/* =============================================================
   JB the PM — spatial UI stylesheet
   Direction: light base, soft depth.

   The "spatial" feel comes from four stacked techniques:
     1. Elevation tokens (--e1..--e4) — a consistent shadow ladder
        that reads as real distance from the page, not drop shadows.
     2. Perspective containers + translateZ on children, so cards
        sit ON the page rather than being drawn into it.
     3. Ambient orbs + grain behind everything for atmosphere depth.
     4. Pointer-driven tilt / parallax (see main.js), which only
        adjusts CSS custom properties defined here.

   Everything here is decoration. All content lives in real HTML
   text so AI crawlers can read it. Motion is disabled entirely
   under prefers-reduced-motion.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces */
  --bg:        #f5f4f1;
  --bg-deep:   #ecebe6;
  --surface:   #ffffff;
  --surface-2: #fbfaf8;

  /* Ink */
  --ink:       #16181d;
  --ink-2:     #3a4049;
  --muted:     #6b7280;
  --line:      rgba(20, 24, 32, 0.09);
  --line-soft: rgba(20, 24, 32, 0.05);

  /* Accent */
  --accent:      #3f3ddb;
  --accent-ink:  #2b2aa8;
  --accent-soft: rgba(63, 61, 219, 0.08);
  --warm:        #ef7f52;

  /* Elevation ladder — the core of the depth system */
  --e1: 0 1px 1px rgba(16,20,30,.03), 0 2px 6px rgba(16,20,30,.04);
  --e2: 0 1px 2px rgba(16,20,30,.04), 0 6px 16px rgba(16,20,30,.06);
  --e3: 0 2px 4px rgba(16,20,30,.04), 0 14px 32px rgba(16,20,30,.08);
  --e4: 0 4px 8px rgba(16,20,30,.05), 0 28px 60px rgba(16,20,30,.11);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.9);

  /* Geometry */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --wrap: 1160px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Set by main.js — pointer tilt. Defaults keep things flat. */
  --tiltX: 0deg;
  --tiltY: 0deg;
  --px: 0px;
  --py: 0px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.14; letter-spacing: -0.021em; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); letter-spacing: -0.026em; }
h3 { font-size: 1.16rem; }
p  { margin: 0 0 1em; }

a { color: var(--accent-ink); text-decoration-color: rgba(63,61,219,.3); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: 820px; }

.muted { color: var(--muted); }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 .9rem;
}

/* ---------- 3. Ambient depth layer ---------- */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  transform: translate3d(var(--px), var(--py), 0);
}
.orb--1 {
  width: 46vw; height: 46vw; top: -12vw; left: -8vw;
  background: radial-gradient(circle at 35% 35%, rgba(63,61,219,.20), rgba(63,61,219,0) 70%);
}
.orb--2 {
  width: 38vw; height: 38vw; top: 28vh; right: -10vw;
  background: radial-gradient(circle at 50% 50%, rgba(239,127,82,.17), rgba(239,127,82,0) 70%);
}
.orb--3 {
  width: 52vw; height: 52vw; bottom: -18vw; left: 22vw;
  background: radial-gradient(circle at 50% 50%, rgba(63,61,219,.11), rgba(120,180,200,0) 72%);
}
/* Fine grain keeps the large soft gradients from banding */
.grain {
  position: absolute; inset: -50%;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-lift: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .95rem; font-weight: 570; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--e1), var(--inset-hi);
  transform: translateY(var(--btn-lift));
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
              background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { --btn-lift: -2px; box-shadow: var(--e3), var(--inset-hi); }
.btn:active { --btn-lift: 0px; box-shadow: var(--e1); }

.btn--primary {
  background: linear-gradient(180deg, #4a48e6, var(--accent));
  color: #fff; border-color: transparent;
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--primary:hover {
  box-shadow: 0 4px 10px rgba(63,61,219,.22), 0 20px 44px rgba(63,61,219,.26),
              inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--ghost { background: rgba(255,255,255,.6); backdrop-filter: blur(10px); }
.btn--sm { padding: .58rem 1.05rem; font-size: .88rem; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(180%) blur(16px);
  background: rgba(245,244,241,.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(250,249,247,.85);
  box-shadow: 0 1px 20px rgba(16,20,30,.05);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand__mark {
  display: grid; place-items: center; width: 28px; height: 28px;
  color: #302FB1;
}
.brand__mark svg { width: 28px; height: 28px; }
.brand__text { font-weight: 640; letter-spacing: -.02em; margin: 0; }

.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--accent-ink); }

/* ---------- 6. Sections ---------- */
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--alt { background: linear-gradient(180deg, transparent, var(--bg-deep) 22%, var(--bg-deep) 78%, transparent); }
.section__head { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 3.6rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__lede { color: var(--ink-2); font-size: 1.06rem; }

/* ---------- 7. Hero ---------- */
.hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__inner {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  perspective: 1400px;   /* depth root for the hero stack */
}
.hero__title { max-width: 15ch; }
.hero__lede { max-width: 52ch; color: var(--ink-2); font-size: 1.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0 2.4rem; }

.stats {
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: start; gap: 1.5rem 2rem;
  list-style: none; margin: 0; padding: 0;
}
.stats li { display: flex; flex-direction: column; min-width: 0; }
.stats strong { font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.stats span { font-size: .84rem; color: var(--muted); }

/* Layered photo stack — the hero's spatial centerpiece */
.stack {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition: transform .5s var(--ease-out);
  aspect-ratio: 1 / 1;
}
.stack__card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e4), var(--inset-hi);
}
.stack__card--photo {
  inset: 8% 6% 8% 6%;
  margin: 0; overflow: hidden;
  transform: translateZ(0px);
  border-radius: var(--r-xl);
}
.stack__card--photo img { width: 100%; height: 100%; object-fit: cover; }

/* No flex `gap` here — the chip's contents are inline text, and a gap would
   insert space before punctuation ("Founder , DoorCheck"). The status dot
   carries its own margin instead. */
.stack__card--chip {
  display: inline-flex; align-items: center;
  padding: .62rem .95rem;
  font-size: .82rem; font-weight: 520; white-space: nowrap;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  box-shadow: var(--e3), var(--inset-hi);
}
.stack__card--chip-a { top: 4%;  left: -6%;  transform: translateZ(60px); }
.stack__card--chip-b { bottom: 16%; right: -8%; transform: translateZ(46px); }
.stack__card--chip-c { bottom: 1%; left: 2%;  transform: translateZ(80px); }

.dot {
  width: 7px; height: 7px; margin-right: .5rem; flex: none;
  border-radius: 50%; background: #22c17b;
  box-shadow: 0 0 0 3px rgba(34,193,123,.18);
}

/* ---------- 8. Cards (services) ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); perspective: 1200px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card, .work, .form, .about__frame {
  transform-style: preserve-3d;
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateZ(0);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

/* Flex column + margin-top:auto on the list keeps the divider rules aligned
   across all four cards even when the paragraphs are different lengths. */
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--e2), var(--inset-hi);
}
.card p:last-of-type { margin-bottom: 0; }
.card:hover { box-shadow: var(--e4), var(--inset-hi); }
.card__icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1.1rem;
  border-radius: 13px; font-size: .95rem; color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(63,61,219,.1);
}
.card__icon svg { width: 20px; height: 20px; }
.card p { font-size: .95rem; color: var(--ink-2); }
.card__list {
  list-style: none; margin: 1.4rem 0 0; padding: 1.1rem 0 0;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  font-size: .87rem; color: var(--muted);
}
.card__list li { padding-left: 1.1rem; position: relative; margin-bottom: .35rem; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .5;
}

/* ---------- 9. Work ---------- */
.work {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  box-shadow: var(--e2), var(--inset-hi);
}
.work:hover { box-shadow: var(--e4), var(--inset-hi); }
.work__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.work__top h3 { margin: 0; font-size: 1.3rem; }
.work__role { font-size: .87rem; color: var(--accent-ink); font-weight: 550; margin: .35rem 0 .9rem; }
.work p { font-size: .95rem; color: var(--ink-2); }

.pill {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--bg-deep); color: var(--muted); white-space: nowrap;
}
.pill--live { background: rgba(34,193,123,.12); color: #157a4d; }
.pill--muted { background: rgba(20,24,32,.06); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 1.1rem 0 0; }
.tags li {
  font-size: .77rem; color: var(--muted);
  padding: .28rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.work__note {
  margin-top: 2.2rem; max-width: 74ch; font-size: .95rem; color: var(--muted);
  padding-left: 1.1rem; border-left: 2px solid var(--accent-soft);
}

/* ---------- 10. About ---------- */
.about {
  display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; perspective: 1200px;
}
.about__frame {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--e4), var(--inset-hi);
}
.about__copy p { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 1.6rem 0 0; }
.chips li {
  font-size: .82rem; padding: .38rem .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--e1); color: var(--ink-2);
}

/* ---------- 11. FAQ ---------- */
.faq { display: grid; gap: .9rem; }
.qa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--e1), var(--inset-hi);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease-out);
}
.qa:hover { box-shadow: var(--e3), var(--inset-hi); transform: translateY(-2px); }
.qa h3 { font-size: 1.04rem; margin-bottom: .5rem; }
.qa p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------- 12. Form ---------- */
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--e4), var(--inset-hi);
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 570; color: var(--ink-2); }
.opt { color: var(--muted); font-weight: 400; }

.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .72rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: inset 0 1px 2px rgba(16,20,30,.03);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--surface);
  border-color: rgba(63,61,219,.45);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: rgba(214,69,69,.55);
  box-shadow: 0 0 0 4px rgba(214,69,69,.09);
}

.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__status { margin: 0; font-size: .88rem; color: var(--muted); }
.form__status.is-error { color: #b3392f; }
.form__status.is-ok { color: #157a4d; }

/* Honeypot — visually gone, still fillable by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__alt { text-align: center; margin-top: 1.4rem; font-size: .93rem; color: var(--muted); }

/* ---------- 13. Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 2.6rem 0; background: var(--bg-deep); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.footer-inner p { margin: 0; font-size: .9rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-nav a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.footer-nav a:hover { color: var(--accent-ink); }

/* ---------- 14. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; }
  /* width:100% is required — auto inline margins turn off grid stretch, and
     .stack has no intrinsic width (all its children are absolutely
     positioned), so without it the whole visual collapses to zero. */
  .hero__visual { width: 100%; max-width: 440px; margin-inline: auto; order: -1; }
  .about { grid-template-columns: 1fr; }
  .about__media { width: 100%; max-width: 320px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding-top: 1.25rem; }
  .nav { display: none; }
  .header-inner { gap: .75rem; }
  .brand { margin-right: auto; }
  .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .stats { gap: 1.5rem; }
  .stack__card--chip { font-size: .74rem; padding: .5rem .8rem; }
  .stack__card--chip-a { left: -2%; }
  .stack__card--chip-b { right: -2%; }
}

/* ---------- 16. Reduced motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .stack, .card, .work, .form, .about__frame { transform: none !important; }
  .orb { transform: none !important; }
}

@media print {
  .ambient, .site-header, .hero__actions, .form { display: none; }
  body { background: #fff; }
  * { box-shadow: none !important; }
}

/* ---------- 12. Slide-in menu (mobile) ----------
   Hidden entirely above 720px, where the inline nav and header CTA do the job.
   The sheet lives outside <header> so its fixed positioning is not affected by
   the header's sticky context. */
.menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(18,17,30,.42);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(82vw, 340px);
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.15rem 1.4rem 2rem;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--e4);
  transform: translateX(100%);
  transition: transform .34s var(--ease-out);
  overflow-y: auto;
}
.sheet.is-open { transform: translateX(0); }
.sheet a {
  color: var(--ink); text-decoration: none;
  font-size: 1.05rem; font-weight: 560; letter-spacing: -.01em;
  padding: .95rem .2rem;
  border-bottom: 1px solid var(--line);
}
.sheet__close {
  align-self: flex-end;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: .5rem; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.sheet__close svg { width: 20px; height: 20px; }
.sheet .sheet__cta {
  margin-top: 1.4rem; border-bottom: 0;
  color: #fff; justify-content: center;
}
.sheet .sheet__cta--alt { margin-top: .6rem; color: var(--ink); }
body.menu-open { overflow: hidden; }

@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; }
  .header__cta { display: none; }
}
/* Above the breakpoint the sheet must not be reachable by keyboard at all. */
@media (min-width: 721px) {
  .sheet, .sheet-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop { transition: none; }
}