/* Prime Directive AI: shared styles for all pages. Dark studio aesthetic, Inter, no build step. */

:root {
  --background: 223 29% 3%;
  --background-gradient-end: 223 29% 2%;
  --text-primary: 0 0% 98%;
  --text-muted: 0 0% 65%;
  --text-dim: 0 0% 52%;
  --text-hover: 0 0% 100%;
  --accent: 317 66% 44%;
  --accent-text: 317 66% 58%;
  --logo-pink: 327 87% 62%;
  --logo-blue: 212 100% 62%;
  --card: 223 25% 6%;
  --border: 223 15% 14%;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Horizontal-overflow lockdown (prevents the mobile "wiggle"). `clip` not `hidden`:
   hidden makes body a scroll container, which silently kills position: sticky (the nav). */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background-gradient-end)));
  color: hsl(var(--text-primary));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
}

/* ---------- site nav ---------- */
.sitenav { position: sticky; top: 0; z-index: 50; background: hsl(var(--background) / 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
.sitenav-inner { max-width: 62rem; margin: 0 auto; padding: 0.7rem max(1.5rem, env(safe-area-inset-right)) 0.7rem max(1.5rem, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.navlogo { display: flex; align-items: center; text-decoration: none; color: hsl(var(--text-primary)); }
/* The nav logo IS the wordmark, with the glyph-A cut of the mark as its A. On scroll
   (script.js toggles .is-scrolled) the text collapses left and the A grows, so the bar
   is left holding just the mark. Progressive enhancement: without JS it never collapses. */
.navword { display: flex; align-items: center; height: 2rem; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap; }
.navword .pk { color: hsl(var(--logo-pink)); display: flex; align-items: center; }
.navword .bl { color: hsl(var(--logo-blue)); }
.navword .aglyph { height: 0.85rem; width: auto; display: block; transition: height 0.35s ease; }
.navtxt, .navword .navi { display: inline-block; overflow: hidden; max-width: 12rem; opacity: 1; transition: max-width 0.35s ease, opacity 0.25s ease; }
.sitenav.is-scrolled .navtxt, .sitenav.is-scrolled .navword .navi { max-width: 0; opacity: 0; }
.sitenav.is-scrolled .navword .aglyph { height: 1.55rem; }
.navlinks { display: flex; align-items: center; gap: 1.2rem; }
.navlink { color: hsl(var(--text-muted)); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.navlink:hover { color: hsl(var(--text-hover)); }
.navlink.is-active { color: hsl(var(--text-primary)); }
.navcta { font-size: 0.88rem; padding: 0.5rem 1rem; }
@media (max-width: 480px) {
  /* Phones: just the A, always (no room for the full wordmark). */
  .navtxt, .navword .navi { display: none; }
  .navword .aglyph { height: 1.3rem; }
  .navlinks { gap: 1rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: calc(88vh - 3.5rem);
  min-height: calc(88dvh - 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6rem;
  padding-top: max(3rem, env(safe-area-inset-top));
  padding-bottom: 2rem;
  overflow: hidden; /* clip the aurora */
}
/* hero content sits above the aurora */
.hero > *:not(.aurora) { position: relative; z-index: 2; }

/* aurora: slow colour drift behind the hero only */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora b { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; }
.aurora .a1 { width: 52%; height: 88%; left: 6%; top: 2%; background: hsl(var(--logo-pink) / 0.26); animation: pd-drift1 22s ease-in-out infinite; }
.aurora .a2 { width: 46%; height: 80%; right: 4%; top: 14%; background: hsl(var(--logo-blue) / 0.24); animation: pd-drift2 26s ease-in-out infinite; }
@keyframes pd-drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6%, 8%); } }
@keyframes pd-drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-7%, 5%); } }

/* the mark, with a sonar pulse radiating out (echoes the old rings, reads as signal-out) */
.logostage { position: relative; width: clamp(9rem, 28vw, 13rem); height: clamp(9rem, 28vw, 13rem); display: flex; align-items: center; justify-content: center; }
.logomark {
  width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2;
  filter: drop-shadow(0 0 20px hsl(var(--logo-pink) / 0.42)) drop-shadow(0 0 44px hsl(var(--logo-blue) / 0.30));
}
.sonar { position: absolute; inset: 0; z-index: 1; }
.sonar span {
  position: absolute; left: 50%; top: 52%; width: 58%; height: 58%;
  transform: translate(-50%, -50%) scale(0.35); border-radius: 50%;
  border: 1.5px solid hsl(var(--logo-pink) / 0.5); opacity: 0;
  animation: pd-ping 4.6s cubic-bezier(0.2, 0.6, 0.3, 1) 0.4s infinite;
}
.sonar span:nth-child(2) { animation-delay: 1.9s; border-color: hsl(272 60% 60% / 0.5); }
.sonar span:nth-child(3) { animation-delay: 3.4s; border-color: hsl(var(--logo-blue) / 0.5); }
@keyframes pd-ping {
  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0.7; }
  70% { opacity: 0.12; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  font-size: clamp(1.5rem, 7.5vw, 3.25rem);
}
/* The logo wordmark ONLY (homepage hero). Space Grotesk, with AI coloured to the mark.
   Case-study h1s stay Inter (base rule above). */
.hero h1 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.02em; font-size: clamp(1.35rem, 6.4vw, 3rem); }
.hero h1 .pk { color: hsl(var(--logo-pink)); }
/* The mark as the A of "AI": a glyph-weight cut of logo-mark (stroke 15% of cap height to sit
   next to Space Grotesk 700; the display mark's ~4% stroke would read as a hairline here).
   Real "A" text stays in a .vh span so crawlers and screen readers read "PRIME DIRECTIVE AI". */
.hero h1 .aglyph { height: 0.78em; width: auto; display: inline-block; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero h1 .bl { color: hsl(var(--logo-blue)); }
.tagline { font-weight: 500; letter-spacing: 0.02em; font-size: clamp(1.1rem, 3.2vw, 1.35rem); }
.hero-sub {
  color: hsl(var(--text-muted));
  max-width: 38rem;
  line-height: 1.65;
  font-size: clamp(0.98rem, 2.6vw, 1.08rem);
}
.hero-sub a { color: hsl(var(--text-primary)); text-underline-offset: 4px; }
.hero-sub .builders { display: block; margin-top: 0.55rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; padding-top: 0.4rem; }
.btn {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border-radius: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.btn-primary { background: hsl(var(--accent)); color: #fff; }
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.45; cursor: default; }
.btn-ghost { border: 1px solid hsl(var(--border)); color: hsl(var(--text-primary)); }
.btn-ghost:hover { background: hsl(var(--card)); }

/* ---------- page header (case studies) ---------- */
.page-head { padding: max(3.5rem, env(safe-area-inset-top)) 0 0.5rem; }
.crumb { font-size: 0.85rem; color: hsl(var(--text-dim)); margin-bottom: 2.2rem; }
.crumb a { color: hsl(var(--text-muted)); text-decoration: none; }
.crumb a:hover { color: hsl(var(--text-hover)); text-decoration: underline; text-underline-offset: 4px; }
.page-head h1 { white-space: normal; font-size: clamp(1.7rem, 6vw, 2.8rem); margin-bottom: 0.9rem; }
.page-head .lead { font-size: 1.08rem; }

/* ---------- sections ---------- */
section { padding: 4.5rem 0; border-top: 1px solid hsl(var(--border)); }
.page-head + section, section.first { border-top: none; padding-top: 2.5rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--accent-text));
  margin-bottom: 0.9rem;
}
h2 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 1.1rem; }
h3 { font-size: 1.05rem; font-weight: 600; }
.lead { color: hsl(var(--text-muted)); line-height: 1.7; max-width: 44rem; font-size: 1.02rem; }
.lead + .lead { margin-top: 0.9rem; }
.lead a, .card p a { color: hsl(var(--text-primary)); text-underline-offset: 4px; }
.lead a:hover, .card p a:hover { color: hsl(var(--text-hover)); }

.stat-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0; }
.stat {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  min-width: 8.5rem;
}
.stat b { display: block; font-size: 1.25rem; letter-spacing: -0.01em; }
.stat span { color: hsl(var(--text-dim)); font-size: 0.78rem; line-height: 1.35; display: block; margin-top: 0.15rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.card {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 0.7rem;
  padding: 1.4rem;
}
.card h3 { margin-bottom: 0.55rem; }
.card p { color: hsl(var(--text-muted)); font-size: 0.92rem; line-height: 1.65; }
.card p + p { margin-top: 0.6rem; }
.card .more { display: inline-block; margin-top: 0.8rem; color: hsl(var(--accent-text)); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.card .more:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-wide { grid-column: 1 / -1; border-color: hsl(var(--accent) / 0.45); }
a.card { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
a.card:hover { border-color: hsl(var(--text-dim)); }

.person .role { color: hsl(var(--accent-text)); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.55rem; }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
blockquote { border-left: 2px solid hsl(var(--accent)); padding: 0.2rem 0 0.2rem 1.1rem; }
blockquote p { color: hsl(var(--text-primary)); font-size: 1.02rem; line-height: 1.6; font-weight: 500; }
blockquote cite { display: block; margin-top: 0.6rem; font-style: normal; color: hsl(var(--text-dim)); font-size: 0.82rem; }
blockquote cite a { color: hsl(var(--text-muted)); text-underline-offset: 4px; }
blockquote cite a:hover { color: hsl(var(--text-hover)); }

/* ---------- press lists (case studies) ---------- */
.press-group { margin-top: 1.4rem; }
.press-group h3 { color: hsl(var(--text-dim)); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.6rem; }
.press-list { list-style: none; columns: 2; column-gap: 2.5rem; }
.press-list li { margin-bottom: 0.55rem; break-inside: avoid; font-size: 0.92rem; line-height: 1.5; }
.press-list a { color: hsl(var(--text-muted)); text-decoration: none; }
.press-list a:hover { color: hsl(var(--text-hover)); text-decoration: underline; text-underline-offset: 4px; }
.press-list b { color: hsl(var(--text-primary)); font-weight: 600; }
@media (max-width: 640px) { .press-list { columns: 1; } }

/* ---------- subscribe ---------- */
.subscribe-box {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 0.7rem;
  padding: 1.6rem;
  max-width: 34rem;
  margin-top: 1.6rem;
}
.subscribe-box form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.subscribe-box input[type="email"] {
  flex: 1;
  min-width: 12rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  border-radius: 0.55rem;
  padding: 0.65rem 0.9rem;
  color: hsl(var(--text-primary));
  font: inherit;
  font-size: 0.95rem;
}
.subscribe-box input[type="email"]:focus { outline: 1px solid hsl(var(--accent)); }

/* Pinch-zoom is allowed (no maximum-scale, WCAG 1.4.4), so inputs must be >=16px on
   phones or iOS zooms the page on focus and never zooms back out. Desktop keeps the
   designed size. */
@media (max-width: 639.98px) {
  input, textarea, select { font-size: 16px; }
}

/* Respect reduced-motion: the mark stays, the movement stops (WCAG 2.3.3 / 2.2.2). */
@media (prefers-reduced-motion: reduce) {
  .sonar span, .aurora b { animation: none; }
  .sonar { display: none; }
  .navword .aglyph, .navtxt, .navword .navi { transition: none; }
}
.consent { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.8rem; font-size: 0.75rem; color: hsl(var(--text-dim)); line-height: 1.5; cursor: pointer; }
.consent a { color: hsl(var(--text-muted)); }
.subscribe-msg { margin-top: 0.7rem; font-size: 0.85rem; }
.subscribe-msg.ok { color: hsl(var(--accent-text)); }
.subscribe-msg.err { color: hsl(8 70% 60%); }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid hsl(var(--border));
  padding: 2.2rem 0 max(2.2rem, env(safe-area-inset-bottom));
  color: hsl(var(--text-dim));
  font-size: 0.85rem;
  line-height: 1.7;
}
footer a { color: hsl(var(--text-muted)); text-underline-offset: 4px; }
footer a:hover { color: hsl(var(--text-hover)); }
/* Statutory trading disclosure (Companies Act 2006 s.82, SI 2015/17 reg 26). Must stay
   visible on every page: name, place of registration, number, registered office. Do not
   remove or hide it, and do not shrink it below legibility. */
.legal {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: hsl(var(--text-dim));
  max-width: 60ch;
}

/* ---------- product screenshots ---------- */
/* These are shots of LIGHT-themed products sitting on a dark page. Framing them in a
   card-style border stops them reading as a hole punched in the layout, and the caption
   carries the claim so the image is decoration, not evidence. */
figure.shot { margin: 1.8rem 0 0; }
figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 0.7rem;
}
figure.shot figcaption {
  color: hsl(var(--text-dim));
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 0.6rem;
}
figure.shot figcaption a { color: hsl(var(--text-muted)); }

/* ---------- faq ---------- */
#faq .faq-item { border-top: 1px solid hsl(var(--border)); padding: 1.1rem 0; }
#faq .faq-item:last-child { border-bottom: 1px solid hsl(var(--border)); }
#faq .faq-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
#faq .faq-item p { color: hsl(var(--text-muted)); line-height: 1.6; font-size: 0.95rem; }