/* =========================================================
   TrAItFold.AI. "Intelligence, folded in."
   Design system: folded light. Angular facets, crease seams,
   one warm accent held back for the AI inside the wordmark.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  /* colour */
  --ink:        #070812;
  --ink-2:      #0B0D19;
  --surface:    #10121F;
  --surface-2:  #161930;
  --line:       rgba(160, 168, 214, 0.14);
  --line-soft:  rgba(160, 168, 214, 0.08);

  /* Darkened from #7C6CFF: white text on the old value measured 3.86:1, below
     the WCAG AA threshold of 4.5:1. #6250E8 measures 5.48:1 and reads as the
     same violet. --iris-lift is the hover state and still passes at 4.65:1. */
  --iris:       #6250E8;
  --iris-lift:  #6E5CF5;
  --iris-dim:   #5B4EE0;
  --cyan:       #4DD9E6;
  /* Sampled from the brand logo's gold ribbon, not approximated. */
  --amber:      #F5B324;
  --amber-lift: #FFD966;

  --paper:      #F2F3FA;
  --muted:      #9AA0BD;
  /* Raised from #6E7492, which measured 4.21:1 on the panel background and
     failed AA. #8188A6 measures 5.53:1. */
  --muted-2:    #8188A6;

  --grad-fold:  linear-gradient(115deg, var(--iris) 0%, var(--cyan) 100%);

  /* type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl:  clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --fs-3xl:  clamp(2.375rem, 1.75rem + 3vw, 4.25rem);

  /* space */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* motion */
  --dur:  260ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shell: 1180px;
  --radius: 14px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--iris); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

/* The header is sticky, so an anchored section would otherwise land underneath
   it. Reserve the header's height plus a little breathing room. */
section[id] { scroll-margin-top: 96px; }

/* ---------- shared atoms ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--sp-3);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Neutral elevation rather than a coloured halo. A zero-offset chromatic glow
   is one of the strongest visual tells of a generated interface. */
.btn--primary {
  background: var(--iris);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.75);
}
.btn--primary:hover { background: var(--iris-lift); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.85); }

.btn--ghost {
  background: rgba(160, 168, 214, 0.05);
  border-color: var(--line);
  color: var(--paper);
}
.btn--ghost:hover { border-color: rgba(124, 108, 255, 0.55); background: rgba(124, 108, 255, 0.09); }

.btn--sm { min-height: 40px; padding: 0.5rem 1.05rem; }
.btn--block { width: 100%; margin-top: auto; }

/* ---------- wordmark ----------
   The supplied brand lockup is a single image (gold mark + white/gold
   wordmark), built for dark backgrounds. Height is fixed and width is
   left to the intrinsic ratio so it never distorts. */
.wordmark { display: inline-flex; align-items: center; }
.wordmark__img {
  height: 44px;
  width: auto;
  display: block;
  transition: opacity var(--dur) var(--ease);
}
a.wordmark:hover .wordmark__img { opacity: 0.82; }
.wordmark--footer .wordmark__img { height: 52px; }

@media (max-width: 600px) {
  .wordmark__img { height: 34px; }
  .wordmark--footer .wordmark__img { height: 42px; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: rgba(7, 8, 18, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line-soft);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: 1rem;
}
.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav a {
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--paper); }
.site-nav .btn { color: #fff; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  place-items: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--paper);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  padding-block: var(--sp-6) var(--sp-6);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Veil keeps text legible but must not smother the fold field behind it:
   it stays open on the right, where the canvas has room to show. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(72% 78% at 6% 50%, rgba(7,8,18,0.95) 0%, rgba(7,8,18,0.72) 40%, transparent 76%),
    linear-gradient(180deg, rgba(7,8,18,0.60) 0%, transparent 24%, rgba(7,8,18,0.72) 90%, var(--ink) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 60rem; }

.hero__title {
  font-size: var(--fs-3xl);
  max-width: 19ch;
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}
.hero__lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: var(--sp-4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: var(--sp-3); }

/* One line of concrete proof directly under the hero actions. Deliberately
   quiet: it reassures the sceptic without competing with the CTA above it. */
.hero__proof {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-4);
}

/* The header CTA collapses into the hamburger below 860px, so nothing stops it
   wrapping to two lines at the top of that range. */
.site-nav .btn--sm { white-space: nowrap; }

.hero__slogan {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.hero__crease {
  display: block; width: 56px; height: 2px; flex: none;
  background: var(--grad-fold);
}

/* ---------- positioning band ----------
   The four claims the business is built on. The kicker carries the brand gold
   so the positioning reads as part of the mark, not as generic feature copy. */
.strip {
  border-block: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding-block: var(--sp-5);
}

.pillars-4 {
  display: grid; gap: var(--sp-4) var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-bottom: var(--sp-4);
}
.p4 { position: relative; padding-top: var(--sp-2); border-top: 2px solid rgba(245, 179, 36, 0.35); }
.p4__k {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-2);
}
.p4__t {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--sp-1);
}
.p4__b { font-size: var(--fs-sm); color: var(--muted); }

.strip__lead { font-size: var(--fs-lg); color: var(--paper); max-width: 46ch; }
.strip__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* The 'who we work with' band stacks lead then tags; give the tags room to breathe. */
.strip__lead + .strip__tags { margin-top: var(--sp-3); }
.strip__tags li {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

/* ---------- testimonials ----------
   Client logos arrive in wildly different formats: a dark vector, a stacked
   raster mark, a wide wordmark. Rather than fight that, every logo sits on the
   same white plate at a capped optical size, so the row reads as one system and
   each brand still renders in its own colours. */
.quotes {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
}

.quote {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 60%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* the fold, in gold, to tie client work to the mark */
.quote::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 78px; height: 78px;
  background: linear-gradient(205deg, var(--amber), transparent 70%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: 0.16;
  transition: opacity var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-4px); border-color: rgba(245, 179, 36, 0.34); }
.quote:hover::before { opacity: 0.3; }

/* Stacked, never side by side: the three logos have different widths, so a
   wrapping row put the location beside one logo and beneath the others, which
   in turn started each quote at a different height. */
.quote__plate {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.quote__logo {
  display: grid; place-items: center;
  height: 62px;
  min-width: 196px;   /* one plate size for every client, whatever the logo */
  padding: 0 1rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.7);
  flex: none;
}
.quote__logo img {
  max-height: 42px;
  max-width: 168px;
  width: auto; height: auto;
  object-fit: contain;
}
.quote__co-place {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  color: var(--muted);
}

.quote__text {
  position: relative;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--paper);
}
/* oversized opening quote, set as a watermark behind the first line */
.quote__text::before {
  content: "\201C";
  position: absolute;
  top: -0.42em; left: -0.12em;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--amber);
  opacity: 0.16;
  pointer-events: none;
}

.quote__by {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: grid; gap: 0.1rem;
}
.quote__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.quote__role { font-size: var(--fs-xs); color: var(--muted); }

.quote__tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: var(--sp-3);
}
.quote__tags li {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .quote:hover { transform: none; }
}

/* ---------- crease seam ---------- */
.seam {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(124,108,255,0.5) 22%, rgba(77,217,230,0.5) 62%, transparent 100%);
  opacity: 0.55;
}
.seam--flip {
  background: linear-gradient(90deg, transparent 0%, rgba(255,196,107,0.45) 30%, rgba(124,108,255,0.5) 74%, transparent 100%);
}

/* ---------- generic section ---------- */
.section { padding-block: var(--sp-6); }
.section--alt { background: var(--ink-2); }

.section__head { max-width: 62ch; margin-bottom: var(--sp-5); }
.section__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.section__lede { font-size: var(--fs-lg); color: var(--muted); }

/* ---------- pillars ---------- */
.pillars {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.pillar {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* the fold: a lit crease along the top-left corner */
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 74px; height: 74px;
  background: var(--grad-fold);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 0.14;
  transition: opacity var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-4px); border-color: rgba(124,108,255,0.34); }
.pillar:hover::before { opacity: 0.3; }

.pillar__glyph { margin-bottom: var(--sp-3); }
.pillar__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.pillar__body { color: var(--muted); margin-bottom: var(--sp-3); }
.pillar__list { display: grid; gap: 0.55rem; margin-top: auto; }
.pillar__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-sm);
  color: var(--paper);
}
.pillar__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--iris);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- pillars of work ---------- */
/* Four pillars want an even 2x2, not the 3+1 that auto-fit produces at desktop
   widths. The trio variant is for the "other pillars" block on a pillar page,
   where there are exactly three. */
.pillar-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pillar-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Related-pillar cards carry no description, so the auto-pushed CTA opened a
   void directly beneath the heading. With more space below than above, the
   heading reads as belonging to the image above it rather than to its own
   card. Let the CTA sit with the heading and give the heading air above. */
.pillar-grid--trio .pcard__body { padding-top: var(--sp-4); }
.pillar-grid--trio .pcard__go { margin-top: var(--sp-1); }

.pcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pcard:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 179, 36, 0.36);
  box-shadow: 0 26px 60px -38px rgba(0,0,0,0.95);
}

.pcard__art {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.pcard__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.pcard:hover .pcard__art img { transform: scale(1.045); }

.pcard__body {
  display: flex; flex-direction: column;
  padding: var(--sp-3);
  flex: 1;
}
.pcard__k {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-2);
}
.pcard__t {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
}
.pcard__d { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.pcard__go {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cyan);
}
.pcard__go::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.pcard:hover .pcard__go::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .pcard:hover { transform: none; }
  .pcard:hover .pcard__art img { transform: none; }
  .pcard:hover .pcard__go::after { transform: none; }
}

/* ---------- packages ---------- */
.packages {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
  align-items: stretch;
}
.pkg {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pkg:hover { transform: translateY(-4px); border-color: rgba(124,108,255,0.34); }

.pkg--featured {
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 62%);
  border-color: rgba(124, 108, 255, 0.45);
  box-shadow: 0 24px 60px -34px var(--iris);
}
.pkg__badge {
  position: absolute; top: -11px; left: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--amber);
  color: #1A1200;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  font-weight: 500;
}
.pkg__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.pkg__term {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--cyan);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}
.pkg__pitch { color: var(--paper); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.pkg__list { display: grid; gap: 0.5rem; margin-bottom: var(--sp-3); }
.pkg__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.pkg__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Pin the "best for" block and the CTA to the card floor together, so the
   four cards align across the row regardless of how long each list is. */
.pkg__for {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--sp-2);
  margin-top: auto;
  margin-bottom: var(--sp-3);
}
.pkg .btn--block { margin-top: 0; }
.pkg__for span {
  display: block;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.packages__note {
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 56ch;
}

/* ---------- process ---------- */
.steps {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  counter-reset: none;
}
.step {
  position: relative;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border-top: 2px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.step:hover { border-top-color: var(--iris); }
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--amber);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}
.step__title { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.step__body { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- why ---------- */
.why__grid { display: grid; gap: var(--sp-5); }
.why__items { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.why__item {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.why__item:hover { border-left-color: var(--cyan); }
.why__item h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.why__item p { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 980px) {
  .why__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-5); align-items: start; }
}

/* ---------- faq ---------- */
.faq {
  display: grid; gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.faq__q {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-1);
  color: var(--paper);
}
.faq__a { font-size: var(--fs-sm); color: var(--muted); max-width: 60ch; }
.faq__a a { color: var(--cyan); border-bottom: 1px solid rgba(77,217,230,0.35); }
.faq__a a:hover { border-bottom-color: var(--cyan); }

/* ---------- contact ---------- */
.contact__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 980px) {
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-5); align-items: start; }
}

.contact__meta {
  margin: var(--sp-4) 0 0;
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem var(--sp-3);
  font-size: var(--fs-sm);
}
.contact__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.contact__meta dd { margin: 0; color: var(--paper); }
.contact__meta a { color: var(--cyan); border-bottom: 1px solid rgba(77,217,230,0.35); }
.contact__meta a:hover { border-bottom-color: var(--cyan); }

/* <address> is italic by default in every browser; the brand voice is not. */
.addr { font-style: normal; line-height: 1.5; }
.site-footer__contact .addr { font-size: var(--fs-sm); color: var(--muted); }

.form {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.form__row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }
/* A crisp outline rather than a soft ring: same affordance, no chromatic halo. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--iris-lift);
  outline-offset: 1px;
  border-color: var(--iris-lift);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #FF8B8B; }

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field select option { background: var(--surface); color: var(--paper); }

/* honeypot, off-screen but focusable-free */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: var(--fs-sm); min-height: 1.2em; }
.form__status.is-ok   { color: var(--cyan); }
.form__status.is-err  { color: #FF9B9B; }
.form__fineprint { font-size: var(--fs-xs); color: var(--muted-2); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--ink-2); padding-block: var(--sp-5); }
.site-footer__inner { display: grid; gap: var(--sp-4); }
@media (min-width: 880px) {
  .site-footer__inner { grid-template-columns: 1.1fr 1fr 1fr; align-items: start; }
}
.site-footer__slogan {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.site-footer__nav { display: grid; gap: 0.55rem; align-content: start; }
.site-footer__nav a { font-size: var(--fs-sm); color: var(--muted); }
.site-footer__nav a:hover { color: var(--paper); }
.site-footer__contact { display: grid; gap: 0.6rem; align-content: start; }
.site-footer__contact a { font-size: var(--fs-sm); color: var(--cyan); }
.site-footer__legal { font-size: var(--fs-xs); color: var(--muted-2); }

/* ---------- pillar pages ---------- */
.page-hero { padding-block: var(--sp-6) var(--sp-5); }
.page-hero__inner { max-width: 56rem; }
.page-hero__title {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}
.page-hero__lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: var(--sp-4);
}

.crumb {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted-2);
  margin-bottom: var(--sp-3);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--paper); }
.crumb span[aria-hidden] { margin-inline: 0.4rem; }

.page-art { padding-bottom: var(--sp-5); }
.page-art__img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}

/* what a pillar covers */
.cov {
  display: grid; gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.cov__item { padding-left: var(--sp-3); border-left: 2px solid var(--line); transition: border-color var(--dur) var(--ease); }
.cov__item:hover { border-left-color: var(--amber); }
.cov__t { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.cov__d { font-size: var(--fs-sm); color: var(--muted); max-width: 56ch; }

/* what you end up with */
.outcome { display: grid; gap: var(--sp-5); }
@media (min-width: 980px) {
  .outcome { grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
}
.outcome__list {
  display: grid; gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.outcome__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-sm);
  color: var(--paper);
}
.outcome__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- reveal ---------- */
/* Reveal-on-scroll is opt-in via the `js` class that app.v9.js puts on <html>
   as its first act. Without that class every .reveal element renders normally.
   This matters commercially: .reveal is on the H1, the pillar cards and the
   enquiry form, so hiding by default meant one script error, one blocked CDN
   or one slow connection rendered the entire page blank — a guaranteed bounce
   on traffic we are paying for. Content first, animation only if the browser
   proves it can run it. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 85ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive nav ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed; inset: 64px 0 auto;
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding: var(--sp-3) 1.25rem var(--sp-4);
    background: rgba(7, 8, 18, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-14px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { padding-block: 0.9rem; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-base); }
  .site-nav .btn { margin-top: var(--sp-3); border-bottom: none; justify-content: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .pkg:hover, .pillar:hover { transform: none; }
}

/* ---------- mobile sticky CTA ----------
   Below 860px the header CTA is folded into the hamburger menu, which leaves
   paid traffic with nothing to tap for the whole length of the page. This bar
   is the only always-visible action on a phone, and it hides itself once the
   enquiry form is actually on screen so it never covers the thing it points at. */
.mcta { display: none; }

@media (max-width: 860px) {
  .mcta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    min-height: 56px;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--iris); color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-sm); font-weight: 600;
    text-decoration: none;
    box-shadow: 0 -10px 26px -14px rgba(0, 0, 0, 0.95);
  }
  .mcta:hover, .mcta:focus-visible { background: var(--iris-lift); color: #fff; }
  .mcta.is-hidden { display: none; }
  /* Keep the footer clear of the bar rather than letting it overlap content. */
  body { padding-bottom: 76px; }
}

/* "(optional)" marker on a field label. Naming the optional fields explicitly
   is what stops a visitor abandoning the form because it looks longer than it
   is — on paid traffic that abandonment is paid for twice. */
.field__opt {
  font-weight: 400;
  color: var(--muted-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}

/* ---------- cookie consent ----------
   Built by /assets/consent.js, which also decides whether it appears. Styled
   from the same tokens as the rest of the site so it reads as part of the
   page rather than a bolted-on third-party widget.

   Reject is a real button of the same size as Accept, not a text link: a
   refusal that is harder to make than an acceptance is not a free choice. */
.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.9);
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  /* The three-option view is tall. On a short phone in landscape it would
     otherwise run off the top of the screen and put the buttons out of reach,
     so it scrolls inside itself instead of growing without limit. */
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cc__inner {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  display: flex; align-items: flex-start; gap: var(--sp-4);
  justify-content: space-between;
}
.cc__copy { max-width: 68ch; }
.cc__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-bottom: 0.4rem;
}
.cc__title:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.cc__text {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}
.cc__opts { display: grid; gap: 0.75rem; margin-top: var(--sp-3); }
.cc__opt {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--muted);
  cursor: pointer;
}
.cc__opt--fixed { cursor: default; opacity: 0.75; }
.cc__opt input { margin-top: 0.25rem; accent-color: var(--iris); flex: none; }
.cc__opt strong {
  display: block; color: var(--paper); font-weight: 600;
  font-size: var(--fs-sm); margin-bottom: 0.1rem;
}
.cc__actions {
  display: flex; align-items: center; gap: 0.65rem;
  flex: none; flex-wrap: wrap;
  padding-top: 0.25rem;
}
.cc__link {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm);
  color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem 0.25rem;
}
.cc__link:hover { color: var(--paper); }

/* The mobile sticky CTA also lives on the bottom edge. While the banner is up
   it is suppressed rather than stacked, so neither covers the other. */
body.cc-open .mcta { display: none; }

@media (max-width: 860px) {
  .cc__inner { flex-direction: column; gap: var(--sp-3); }
  .cc__actions { width: 100%; }
  .cc__actions .btn { flex: 1 1 auto; }
}

/* =========================================================
   2026-09-05 repositioning additions (v17)
   New homepage architecture: hero proof chips, two "doors",
   for/not-for line, the app-builder comparison, delivery list.
   All built from the existing folded-light tokens.
   ========================================================= */

/* ---------- hero proof chips ----------
   Four factual chips under the hero actions. Replaces the
   separate "who we work with" strip: the audience now lives in
   the hero lede, and these carry the commercial terms. */
.hero__chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 var(--sp-4);
}
.hero__chips li {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--paper);
  background: rgba(160, 168, 214, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}
.hero__chips li::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.5rem;
  vertical-align: middle;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- two doors ("what we build") ----------
   Exactly two cards, side by side from 780px. Reuses the .pillar
   look but forces a two-up grid rather than auto-fit's 3+1. */
.doors {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- for / not-for line ---------- */
.fornot {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--paper);
  max-width: 64ch;
}
.fornot .no { color: var(--muted); }

/* A quiet trailing note (model training / advisory footnote, table caveats). */
.note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 64ch;
}
.note a { color: var(--cyan); border-bottom: 1px solid rgba(77, 217, 230, 0.35); }
.note a:hover { border-bottom-color: var(--cyan); }

/* ---------- commercial terms list ----------
   The AI-first argument's terms, and the "what you get" list.
   Amber fold bullets, tying the promise back to the mark. */
.terms {
  display: grid; gap: 0.7rem;
  margin-top: var(--sp-4);
}
.terms li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--paper);
  max-width: 62ch;
}
.terms li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.terms li strong { font-weight: 600; }

/* A single honest caveat line under a claim (running cost, etc.). */
.aside {
  margin-top: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- app-builder comparison ----------
   Two columns of paired rows. Stacks on mobile with a per-cell
   label; from 780px it becomes an aligned table with one header
   row. The right (Traitfold) column carries a faint iris wash so
   the eye lands on it, without a chromatic glow. */
.vs { display: grid; gap: 0.65rem; margin-top: var(--sp-4); }

.vs__row {
  display: grid; gap: 0.65rem;
  grid-template-columns: 1fr;
}
.vs__cell {
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.vs__cell--a { color: var(--muted); }
.vs__cell--b {
  color: var(--paper);
  background: linear-gradient(168deg, rgba(98, 80, 232, 0.10) 0%, var(--surface) 70%);
  border-color: rgba(124, 108, 255, 0.30);
}
.vs__cell--b::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.55rem;
  vertical-align: middle;
  background: var(--grad-fold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.vs__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
}
.vs__cell--a .vs__tag { color: var(--muted-2); }
.vs__cell--b .vs__tag { color: var(--cyan); }

/* header row: hidden on mobile (per-cell tags do the labelling instead) */
.vs__row--head { display: none; }
.vs__row--head .vs__cell {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
}

@media (min-width: 780px) {
  .vs__row { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .vs__row--head { display: grid; }
  .vs__tag { display: none; }
  .vs__cell--b::before { display: none; }
}

/* ---------- founder / reply promise (contact) ---------- */
.reply-note {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid rgba(245, 179, 36, 0.45);
  font-size: var(--fs-sm);
  color: var(--paper);
}