/* ============================================================
   Juicy Brains — marketing site
   ============================================================ */

:root {
  /* Brand */
  /* --green is the vibrant accent: icons, display type, gradients.
     --green-ink is a deeper cut of it for small text, which needs
     more contrast than the vibrant shade can give on white. */
  --green:     #009B6A;
  --green-ink: #00754E;
  --blue:    #2B6CF6;
  --pink:    #E6007E;
  --purple:  #7B3FE4;
  --navy:    #0B1533;

  /* Neutrals */
  --ink:      #0B1533;
  --ink-soft: #4A5468;
  --line:     #E4E7EE;
  --panel:    #F5F6F8;
  --white:    #FFFFFF;

  /* Type */
  --font-head: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --shell: 1180px;
  --radius: 18px;
  --radius-lg: 26px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 64px 0; }
.section-tight { padding: 24px 0 48px; }

.muted { color: var(--ink-soft); font-size: 15px; }
.t-green { color: var(--green); }
.dot-magenta { color: var(--pink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

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

/* ─────────────── Eyebrows ─────────────── */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 14px;
}
.eyebrow-green { color: var(--green-ink); }
.eyebrow-blue  { color: var(--blue); }
.eyebrow-pink  { color: var(--pink); }
/* --green-ink is the deep cut tuned for white; on navy it drops to ~3:1, so
   the navy panels take the vibrant green, which reads at ~5:1 there instead */
.ai-panel .eyebrow-green,
.cto-ai .eyebrow-green,
.dark-panel .eyebrow-green { color: var(--green); }
.centered { text-align: center; }

/* ─────────────── Buttons & links ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.btn-dark {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 21, 51, .18);
}
.btn-dark:hover {
  background: #142046;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11, 21, 51, .24);
}
/* for use on the navy panels, where btn-dark would disappear */
.btn-light {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.btn-light:hover {
  background: #F2F4F8;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn .arrow, .link-arrow .arrow { transition: transform .18s ease; }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

/* ─────────────── Header ─────────────── */
/* No backdrop-filter here, deliberately. A translucent `position: sticky`
   element with a backdrop-filter makes WebKit build a backdrop root covering
   the viewport, and Safari intermittently fails to paint that root after a
   navigation — the page stays blank until something forces a repaint. The
   header sits on a white page at 88% white, so the blur bought almost
   nothing visually; an opaque background looks the same, removes the bug,
   and stops body text ghosting through while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(11, 21, 51, .05);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 88px;
}

/* Logo — radial dot-burst mark + solid geometric wordmark.
   The mark is a CSS mask so it takes its colour from `color`,
   which lets the same asset go navy on white and white on navy. */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  color: var(--ink);
}
.logo-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("assets/logo-mark.svg") center / contain no-repeat;
          mask: url("assets/logo-mark.svg") center / contain no-repeat;
}
.logo-word {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0.15em;
  text-indent: 0.15em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}

/* stacked lockup (footer) */
.logo-stacked {
  display: inline-grid;
  justify-items: center;
  gap: 16px;
}
.logo-stacked .logo-mark { width: 64px; height: 64px; }
.logo-stacked .logo-word { font-size: 22px; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--blue); }
.nav a.is-active { border-bottom-color: var(--green); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 8px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--line); background: #fff; padding: 12px 24px 22px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a { display: block; padding: 10px 0; font-weight: 500; }
.mobile-nav .btn { margin-top: 10px; align-self: flex-start; }

/* ─────────────── Hero ─────────────── */
.hero { padding: 56px 0 40px; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 700;
  margin-bottom: 30px;
}
/* headline operators, picking up the magenta of the code annotation's + and = */
.h-op { color: var(--pink); }
.lede { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 34px; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.hero-visual { position: relative; }
/* height:auto is safe here because the <img> carries width/height attributes,
   giving it a real intrinsic ratio. The same declaration on an inline <svg>
   with only a viewBox is the Safari intrinsic-sizing bug. */
.brain { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.code-note {
  position: absolute;
  right: 4px;
  bottom: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.85;
  color: #9AA3B5;
}
.code-note .c-comment { color: #A9B1C1; }
.code-note .c-op { color: var(--pink); }
.code-note .c-fn { color: var(--blue); }

/* ─────────────── Panels ─────────────── */
.panel {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}

/* ─────────────── Journey ─────────────── */
.journey {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
}
.journey-intro h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.journey-intro .muted { max-width: 200px; }

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  position: relative;
}
.steps .step-arrow {
  display: none; /* arrows are absolutely placed between columns below */
}
.step {
  text-align: center;
  padding: 0 8px;
  position: relative;
}
.step + .step::before {
  content: "→";
  position: absolute;
  left: -12px;
  top: 26px;
  color: #B9C0CE;
  font-size: 16px;
}
.step-icon svg {
  width: 46px; height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-icon svg .fill { fill: currentColor; stroke: none; }
.step h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 12px 0 8px;
  color: inherit;
}
.step p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.step-green  { color: var(--green); }
.step-purple { color: var(--purple); }
.step-blue   { color: var(--blue); }
.step-pink   { color: var(--pink); }

.rail {
  position: relative;
  height: 12px;
  margin: 26px 0 22px;
}
.rail-line {
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--green) 0%, var(--purple) 27%, var(--blue) 50%, var(--pink) 74%, var(--green) 100%);
}
.rail-dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: calc(10% + var(--i) * 20%);
}
.rail-dot:nth-child(2) { background: var(--green); }
.rail-dot:nth-child(3) { background: var(--purple); }
.rail-dot:nth-child(4) { background: var(--blue); }
.rail-dot:nth-child(5) { background: var(--pink); }
.rail-dot:nth-child(6) { background: var(--green); }

.journey-foot {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.75;
}

/* ─────────────── Discipline cards ─────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.card {
  position: relative;          /* anchors the stretched link below */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11, 21, 51, .09);
  border-color: transparent;
}

/* The whole card is the target, not just the "Learn more" text — it already
   lifts on hover, so it should behave like the link it looks like. Done by
   stretching the existing anchor over the card rather than wrapping
   everything in an <a>: that keeps one link per card, keeps the heading and
   list markup intact, and leaves "Learn more" as the link's accessible name. */
.card .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* keyboard focus lands on that anchor, so show it on the whole card */
.card:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent, var(--blue));
}
.card .link-arrow:focus-visible { outline: none; }
.card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.card-icon {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
}
.card-icon svg {
  width: 27px; height: 27px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-icon svg .fill { fill: currentColor; stroke: none; }
.card h3 { font-size: 22px; font-weight: 700; }
.card-tag { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; margin-top: 2px; }
.card-body { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }

.ticks { display: grid; gap: 11px; margin-bottom: 26px; }
.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  color: var(--ink);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  background-image: linear-gradient(45deg, currentColor, currentColor);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 5px; top: 8px;
  width: 8px; height: 4px;
  border-left: 1.7px solid #fff;
  border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg);
}
.card .link-arrow { margin-top: auto; }

/* --accent paints marks, --accent-ink paints text; they only differ
   for green, whose vibrant shade is too light for small copy */
.card-green  { --accent: var(--green); --accent-ink: var(--green-ink); }
.card-blue   { --accent: var(--blue);  --accent-ink: var(--blue); }
.card-pink   { --accent: var(--pink);  --accent-ink: var(--pink); }
.card-green .card-icon  { background: var(--green); }
.card-blue  .card-icon  { background: var(--blue); }
.card-pink  .card-icon  { background: var(--pink); }
.card .ticks li::before { color: var(--accent); }
.card .card-tag,
.card .link-arrow { color: var(--accent-ink); }
.card:hover { box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ─────────────── Method.AI (homepage) ───────────────
   The one dark block on an otherwise light page, so the AI position reads as
   a statement rather than another card in the stack. */
.ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: start;
  background: var(--navy);
  color: #C3CADB;
  border-radius: var(--radius-lg);
  padding: 56px 60px;
}
.ai-copy h2 {
  color: #fff;
  font-size: clamp(28px, 3.1vw, 38px);
  font-weight: 700;
  margin-bottom: 20px;
}
/* :not(.eyebrow) — the eyebrow is a <p> too, and this selector outranks
   .eyebrow, so without it the label picks up body-copy sizing */
.ai-copy p:not(.eyebrow) { font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; }
.ai-copy p strong { color: #fff; font-weight: 600; }
.ai-copy .btn { margin-top: 12px; }

.ai-points { display: grid; gap: 26px; }
.ai-points li { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; }
.ai-points h3 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ai-points p { font-size: 14px; line-height: 1.65; }

@media (max-width: 940px) {
  .ai-panel { grid-template-columns: 1fr; gap: 36px; padding: 44px 36px; }
}
@media (max-width: 720px) {
  .ai-panel { padding: 32px 24px; gap: 30px; }
}

/* ─────────────── Why founders ─────────────── */
.why {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.why-intro h2 { font-size: 30px; font-weight: 700; margin-bottom: 16px; }
.why-intro .muted { max-width: 250px; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.why-item { padding: 0 26px; }
.why-item + .why-item { border-left: 1px solid var(--line); }
.why-icon svg {
  width: 44px; height: 44px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.why-icon svg .fill { fill: currentColor; stroke: none; }
.why-item h3 { font-size: 16px; font-weight: 700; margin: 18px 0 14px; }
.why-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.why-green  { color: var(--green); }
.why-blue   { color: var(--blue); }
.why-pink   { color: var(--pink); }
.why-purple { color: var(--purple); }
.why-item h3, .why-item p { color: var(--ink); }
.why-item p { color: var(--ink-soft); }

/* ─────────────── Logos ─────────────── */
.logos { padding: 34px 48px 38px; }
/* Flex rather than a fixed column count, so adding or removing a client does
   not need a CSS change — the row just re-centres. */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 64px;
  margin-top: 20px;
}

/* Client marks are painted as CSS masks rather than placed as images. The
   supplied files were ink on opaque white, which would have shown as white
   boxes on the panel; as masks they take their colour from `color`, so they
   render grey here and darken on hover exactly like the old inline SVGs.
   --ratio is each mark's own trimmed aspect ratio, so a shared height gives
   every logo its true proportions. */
/* --scale is an optical correction, set per logo in the markup. Matching the
   box heights is not the same as matching visual weight: Facto. is a bare
   wordmark so its letters fill the full height, while MEGT and MotorPlatform
   spend part of theirs on a mark and a dotted ring, leaving their lettering
   smaller. Without this the row reads as one big logo and two small ones. */
.client-logo {
  display: block;
  height: calc(34px * var(--scale, 1));
  width: calc(34px * var(--scale, 1) * var(--ratio, 3));
  background-color: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  color: #8A93A5;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.logo-row li:hover .client-logo { opacity: 1; color: var(--ink); }

/* ─────────────── Closing CTA ───────────────
   A contained panel: copy left, framed image right. The image sits on a
   single offset gradient block rather than a pile of organic blobs, so the
   composition reads as two aligned rectangles instead of coloured noise. */
.cta { padding-bottom: 84px; }

.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
}

.cta-copy h2 {
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 700;
  margin-bottom: 18px;
}
.cta-copy .muted { max-width: 330px; margin-bottom: 34px; font-size: 16px; }

.cta-actions {
  display: flex;
  align-items: center;
  gap: 20px 28px;
  flex-wrap: wrap;
}
.cta-mail { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }
.cta-mail:hover { color: var(--green-ink); }

/* The graphic is flat with no frame — no card shadow, rounded corners or
   offset accent block, which all belonged to the photo treatment this
   replaced. */
.cta-figure { margin: 0; }
.cta-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────── Sub-page scaffold ───────────────
   Shared by every page other than the homepage. The min-height on the
   body keeps the footer down the page while the pages are still empty. */
.page-head { padding: 72px 0 0; }
.page-head h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 700;
  margin-bottom: 18px;
}
.page-head .muted { max-width: 580px; font-size: 16px; }

.page-body { padding: 44px 0 96px; min-height: 38vh; }
.page-placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 64px 32px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

@media (max-width: 720px) {
  .page-head { padding-top: 48px; }
  .page-body { padding: 32px 0 64px; }
  .page-placeholder { padding: 44px 20px; }
}

/* ─────────────── Juicy Ventures ─────────────── */
/* The 680px cap sits on the paragraph, not the whole block. Body copy wants a
   short measure to stay readable; a heading does not, and sharing one cap was
   breaking "Why fractional or interim makes sense" onto a second line for the
   sake of 86px. Headings get a wider ceiling of their own. */
.page-intro { margin-bottom: 56px; }
.page-intro h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  margin-bottom: 18px;
  max-width: 820px;
}
.page-intro .muted { font-size: 16px; line-height: 1.7; max-width: 680px; }

.venture {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
/* alternate which side the artwork sits on */
.venture-flip .venture-media { order: 2; }

.venture-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
/* Real product screenshots, and they do not share an aspect ratio — Wistla is
   about 1.36, Dotzle about 1.74. Forcing both into a fixed frame cropped the
   Dotzle logo off one edge and the value card off the other, so each image
   keeps its natural proportions instead. */
.venture-media img {
  display: block;
  width: 100%;
  height: auto;
}

.venture-body h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; }
.venture-tagline {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--green-ink);
  margin: 8px 0 18px;
}
.venture-desc { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin-bottom: 24px; }
.venture-link { color: var(--ink); }
.venture-link:hover { color: var(--green-ink); }

/* ---- how we build ---- */
.venture-pillars { margin-top: 72px; }
.venture-pillars h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
}
.pillar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
}
.pillar-grid h4 { font-size: 16px; font-weight: 700; margin: 10px 0 8px; }
.pillar-grid p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ---- closing CTA ---- */
.page-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 72px;
  padding: 36px 40px;
  background: var(--panel);
  border-radius: var(--radius-lg);
}
.page-cta h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }

@media (max-width: 860px) {
  .venture {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0;
  }
  /* keep the artwork above the copy on every venture once stacked */
  .venture-flip .venture-media { order: 0; }
  .page-intro { margin-bottom: 40px; }
  .venture-pillars, .page-cta { margin-top: 52px; }
  .page-cta { padding: 28px 24px; }
}

/* ─────────────── Sub-page sections ───────────────
   .page-section is the generic spacing between the stacked sections of a
   sub-page. The .cto-* names alongside it predate it and are kept so that
   Ask the CTO's markup does not have to change. */
.page-section,
.cto-models, .cto-why, .cto-lead, .cto-ai, .cto-where { margin-top: 76px; }

/* shared with .venture-pillars — a small caps heading over a hairline */
.section-rule, .venture-pillars h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

/* ---- engagement models ---- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.model {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
}
.model-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
}
.model h4 { font-size: 19px; font-weight: 700; margin: 10px 0 10px; }
.model p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
/* scoped rather than !important — `.model p` above has the same weight */
.model .model-best {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13.5px;
}
.model .model-best strong { color: var(--ink); font-weight: 600; }

/* ---- why fractional / interim ---- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 34px 32px;
}
.reason-grid h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 9px;
  padding-left: 16px;
  position: relative;
}
.reason-grid h4::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.reason-grid p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); padding-left: 16px; }

/* ---- leading from the front ---- */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}
.lead-grid h4 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.lead-grid h4::after {
  content: "";
  display: block;
  width: 32px; height: 3px;
  border-radius: 2px;
  background: var(--blue);
  margin-top: 12px;
}
.lead-grid p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

.culture-note {
  margin-top: 40px;
  padding: 30px 32px;
  background: var(--panel);
  border-radius: var(--radius);
  border-left: 4px solid var(--green);
}
.culture-note h4 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.culture-note p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* An inline link inside running prose. The global `a { color: inherit }` would
   otherwise leave it indistinguishable from the sentence around it. Uses
   --green-ink, not --green: this is small text on a light background. */
.text-link { color: var(--green-ink); font-weight: 500; }
.text-link:hover { text-decoration: underline; }

/* ---- dark panel: the one dark block on a sub-page, so it reads as the claim
        the rest of the page is built around. .cto-ai is the original name,
        kept so Ask the CTO's markup is left alone. ---- */
.cto-ai, .dark-panel {
  background: var(--navy);
  color: #C3CADB;
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}
.cto-ai h3,
.dark-panel h3 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; margin-bottom: 16px; }
/* :not(.eyebrow) matters — the eyebrow is itself a <p>, and this rule is more
   specific than .eyebrow, so without it the label gets body-copy sizing */
.cto-ai p:not(.eyebrow),
.dark-panel p:not(.eyebrow) { font-size: 15.5px; line-height: 1.75; max-width: 760px; }
.dark-panel p + p:not(.eyebrow) { margin-top: 16px; }
.dark-panel a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.dark-panel a:hover { border-bottom-color: var(--green); }

/* ---- where and how ---- */
.where-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}
.where-grid h4 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chip-list li {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}

@media (max-width: 720px) {
  .page-section,
  .cto-models, .cto-why, .cto-lead, .cto-ai, .cto-where { margin-top: 52px; }
  .cto-ai, .dark-panel { padding: 32px 24px; }
  .culture-note { padding: 24px 22px; }
}

/* ─────────────── Our Team ─────────────── */
.team-intro { max-width: 720px; margin-bottom: 56px; }
.team-intro h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  margin-bottom: 18px;
}
.team-intro .muted { font-size: 16px; line-height: 1.7; }

.team-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  margin-top: 32px;
}
.team-stats li { display: flex; align-items: baseline; gap: 9px; }
.team-stats strong {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.team-stats span { font-size: 14px; color: var(--ink-soft); }

.team-group + .team-group { margin-top: 56px; }
.team-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.team-count {
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--green-ink);
  background: #E3F2EC;
  border-radius: 999px;
  padding: 3px 9px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 40px 32px;
}
.member-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;      /* keeps real headshots from distorting */
  display: block;
  margin-bottom: 18px;
  background: var(--panel);
}
.member h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px;
}
.member-loc {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 12px;
}
.member-bio { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 720px) {
  .team-intro { margin-bottom: 40px; }
  .team-group + .team-group { margin-top: 44px; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .team-stats { gap: 12px 32px; }
}

/* ─────────────── Booking (Calendly) ─────────────── */
.booking {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.booking-aside h2 { font-size: 20px; font-weight: 700; margin-bottom: 22px; }
.booking-mail { color: var(--green-ink); font-weight: 500; }
.booking-mail:hover { text-decoration: underline; }

/* numbered "how it works" list in the sidebar */
.how-list { display: grid; gap: 22px; margin-bottom: 26px; }
.how-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
}
.how-num {
  grid-row: 1 / span 2;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
}
.how-list strong { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.how-list .muted { font-size: 13.5px; line-height: 1.55; }

.booking-main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

/* ---- progress stepper ---- */
.stepper {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.stepper-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.stepper-item + .stepper-item { border-left: 1px solid var(--line); }
.stepper-num {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #DDE1E8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.stepper-item.is-current { color: var(--ink); background: #fff; }
.stepper-item.is-current .stepper-num { background: var(--green); }
.stepper-item.is-done .stepper-num { background: var(--green-ink); }
.stepper-item.is-done .stepper-num::after { content: "✓"; font-size: 12px; }
.stepper-item.is-done .stepper-num { font-size: 0; }

/* ---- step 1: the form ---- */
#step-details { padding: 30px 32px 34px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.req { color: var(--pink); }
.optional { color: var(--ink-soft); font-weight: 400; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5468' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.field [aria-invalid="true"] { border-color: var(--pink); }
.field [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent);
}
.field-error { color: var(--pink); font-size: 13px; }

.form-note { color: var(--ink-soft); font-size: 13px; margin: 20px 0 22px; }

/* ---- step 2: summary above the calendar ---- */
.booking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.summary-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.summary-meta { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.summary-edit {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  color: var(--green-ink);
}
.summary-edit:hover { text-decoration: underline; }
/* Calendly sizes its own iframe to this box; it scrolls internally,
   so the height needs to be generous enough to avoid a cramped widget */
.calendly-inline-widget {
  min-width: 320px;
  height: 700px;
}

.booking-noscript { padding: 48px 32px; text-align: center; color: var(--ink-soft); }
.booking-noscript p + p { margin-top: 20px; }

.booking-fallback {
  border-top: 1px solid var(--line);
  padding: 16px 24px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.booking-fallback a { color: var(--green-ink); font-weight: 500; }
.booking-fallback a:hover { text-decoration: underline; }

@media (max-width: 940px) {
  .booking { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  /* Calendly's mobile layout stacks, so it needs more vertical room */
  .calendly-inline-widget { height: 1000px; }
  .field-grid { grid-template-columns: 1fr; }
  #step-details { padding: 24px 20px 28px; }
  .stepper-item { padding: 14px 16px; font-size: 13px; gap: 8px; }
  .stepper-label { font-size: 13px; }
  .booking-summary { padding: 16px 20px; }
}

/* ─────────────── Footer ─────────────── */
.site-footer {
  background: var(--navy);
  color: #C3CADB;
  padding: 60px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 40px;
}
.footer-brand p { font-size: 14px; margin-top: 18px; max-width: 280px; }
.logo-invert { color: #fff; }
.footer-col h4 {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; transition: color .15s ease; }
.footer-col a:hover { color: var(--green); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
}
.footer-bottom a:hover { color: var(--green); }

/* The scroll-reveal rules that lived here are gone — see the note in
   script.js. Nothing in this stylesheet sets content to opacity:0 any more,
   so no page can render blank waiting for JavaScript to un-hide it. */

/* ─────────────── Responsive ─────────────── */
/* The nav collapses to the menu button at 980px. Measured: the logo, five
   nav items and the Let's Talk button need ~921px on one row, so this leaves
   a comfortable margin. Re-measure if items are added or removed — the point
   is to collapse just before the row would collide, not well before it. */
@media (max-width: 980px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1080px) {
  .journey { grid-template-columns: 1fr; gap: 30px; }
  .journey-intro .muted, .why-intro .muted { max-width: none; }
  .why { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy h1 br, .lede br { display: none; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .code-note { position: static; margin-top: 4px; text-align: right; }
  .cards { grid-template-columns: 1fr; }
  .cta-panel { grid-template-columns: 1fr; gap: 44px; padding: 48px 40px; }
  .cta-copy .muted { max-width: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .section { padding: 44px 0; }
  .panel { padding: 32px 24px; }
  .logos { padding: 28px 24px 32px; }
  /* the 64px column gap forces one logo per line on a phone — tighten it so
     they pair up two by two instead of running down the page */
  .logo-row { gap: 22px 30px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 26px 8px; }
  /* Five steps across two columns leaves the last one alone on its row. Let it
     span the full width so it reads as the end of the sequence rather than an
     orphan sitting under the left-hand column. Its hand-placed <br> was sized
     for a narrow column, so drop it and let the line run — the markup carries
     a trailing space before the <br>, so the words stay apart. */
  .steps .step:last-child { grid-column: 1 / -1; }
  .steps .step:last-child p br { display: none; }
  .step + .step::before { display: none; }
  /* The rail carries 60px of vertical separation on desktop (its own height
     plus margins). Hiding it on mobile left the closing paragraph sitting
     directly under the last step with no gap at all, reading as one block. */
  .rail { display: none; }
  .journey-foot { margin-top: 30px; }
  .journey-foot br { display: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .why-item { padding: 0 18px; }
  .why-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cta-panel { padding: 36px 24px; gap: 34px; }

  /* ---- Footer, narrow ----
     Stacked in one column this ran to ~775px — most of a phone screen for
     eight links. The two three-item groups pair up instead, and the brand
     becomes a centred crown above them: the stacked lockup centres its mark
     over the wordmark, so left-aligned at full width the dot burst looked
     adrift rather than deliberate. */
  .site-footer { padding: 44px 0 24px; }

  /* Everything is centred on one axis — brand, columns, bottom bar. The two
     columns size to their content and the pair is centred as a unit: at a
     full 1fr each they drifted to the outer edges with a gap down the
     middle, which read as two separate blocks rather than one group. */
  .footer-grid {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 30px 44px;
    padding-bottom: 30px;
  }
  .footer-col { text-align: center; }
  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .footer-brand .logo-stacked { gap: 14px; }
  .footer-brand .logo-mark { width: 54px; height: 54px; }

  /* "Get in touch" spans both columns — the email address will not fit beside
     anything — and lays its two links out side by side, centred. */
  .footer-col:last-child { grid-column: 1 / -1; }
  /* flex rather than a column-flow grid: side by side when there is room, and
     it wraps to two centred lines instead of overflowing when there is not.
     At 320px the pair fits with only a few pixels to spare. */
  .footer-col:last-child ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    gap: 10px 18px;
  }
}

@media (max-width: 460px) {
  .logo-mark { width: 34px; height: 34px; }
  .logo-word { font-size: 16px; letter-spacing: .12em; text-indent: .12em; }

  /* The journey steps and the why-grid deliberately stay two-up here rather
     than collapsing to one column. Stacked, five steps and four reasons turned
     both sections into a long run of mostly-empty rows that read as filler.
     Tightening the horizontal padding buys back the width two columns need. */
  .step { padding: 0 3px; }
  .why-item { padding: 0 11px; }

  .hero-actions { gap: 16px; }
}