/* Motherbase landing page
   White page, centred hero, Instrument Serif headings / Instrument Sans body.
   Palette drawn from images/hero-toolbox.jpg: soil, brushed steel, olive, sunflower. */

:root {
  --white: #ffffff;
  --sand: #f7f4ed;
  --sand-line: #e7e0d2;
  --line: #ece9e2;

  --ink: #16130f;        /* near-black, warm: headings */
  --body: #4a463f;       /* dark grey: body text */
  --muted: #7b756a;      /* captions, labels */

  --soil: #3f3123;
  --wood: #8a6b46;
  --olive: #5f6b3c;
  --olive-deep: #47512c;
  --sun: #d59a12;

  --max: 68rem;
  --fast: 150ms ease;
  --base: 200ms ease;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, .serif {
  font-family: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.08;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .625rem 1rem; z-index: 60;
  border-radius: 0 0 .5rem 0; font-size: .875rem;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.label {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
}

.wordmark {
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 1.375rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--base);
}
.nav-links a:hover { color: var(--ink); }

.nav-cta {
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: .4375rem 1rem;
  color: var(--ink);
  font-weight: 600;
  transition: border-color var(--base), background var(--base), color var(--base);
}
.nav-cta:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  padding: 2.5rem 0 4.5rem;
}

.hero-figure {
  margin: 0 auto;
  max-width: 52.9rem;
}
.hero-figure img { margin-inline: auto; }

.hero h1 {
  margin: 1.5rem auto 0;
  max-width: 20ch;
  font-size: clamp(2.625rem, 7vw, 4.5rem);
}
.hero h1 em {
  font-style: italic;
  color: var(--olive-deep);
}

.hero-lede {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--body);
}

/* The three beats of the offer: speed, method, and who carries the risk.
   Hairline rules between them rather than bullets, to stay quiet under the lede. */
.hero-points {
  margin: 1.75rem auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.25rem;
  max-width: 46rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.hero-points li { position: relative; }
.hero-points li + li::before {
  content: "";
  position: absolute;
  left: -1.125rem;
  top: .3125rem;
  bottom: .3125rem;
  width: 1px;
  background: var(--sand-line);
}
.hero-points strong { color: var(--ink); font-weight: 600; }

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: .75rem 1.375rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background var(--base), color var(--base), border-color var(--base), transform var(--fast);
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--olive-deep); transform: translateY(-1px); }
.btn-ghost { border-color: var(--sand-line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--wood); color: var(--olive-deep); }

/* ---------- Illustration marks ---------- */

/* The marks are keyed out of their white studio ground, so they sit on the
   white sections and the sand bands alike. */
.mark {
  height: 5.5rem;
  width: auto;
  margin: 0 auto 1.25rem;
  object-fit: contain;
}
.mark.mark-tall { height: 2.6rem; }   /* the seed reads large for its detail */
.mark.mark-lg {
  height: 6.65rem;          /* the carrot reads small at the shared height */
  margin-top: -1rem;        /* its airy foliage leaves extra space at the top */
}

@media (max-width: 600px) {
  .mark { height: 4.5rem; }
  .mark.mark-lg { height: 5.45rem; }
  .mark.mark-tall { height: 2.13rem; }
}

/* ---------- Section furniture ---------- */

.section { padding: 4.5rem 0; }
.band { background: var(--sand); }

.section-head { max-width: 46rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
  margin-top: .875rem;
  font-size: clamp(2rem, 4.2vw, 2.875rem);
}
.section-head p {
  margin-top: 1rem;
  font-size: 1.0625rem;
}
.section-head .label { font-size: 1.0625rem; }
/* On a phone the wide-tracked eyebrows read heavier than the copy below them,
   so they come down a step and give back some of the letter-spacing. */
@media (max-width: 600px) {
  .label,
  .section-head .label { font-size: .875rem; letter-spacing: .12em; }
}
.section-head .line {
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.4;
  color: var(--ink);
}

.rule { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ---------- The capability gap chart ---------- */

/* Two curves on the sand band: what the models can do, and what businesses put
   to work. The olive wash between them is the growth still on the table. */
.gap-chart {
  margin: 2.75rem auto 0;
  max-width: 42rem;
}
.gap-chart-svg { width: 100%; height: auto; display: block; }

.gc-grid {
  stroke: var(--sand-line);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}
.gc-axis { stroke: var(--sand-line); stroke-width: 1.5; }
.gc-today { stroke: var(--wood); stroke-width: 1; opacity: .22; }

.gc-stop-a { stop-color: var(--olive); stop-opacity: .30; }
.gc-stop-b { stop-color: var(--olive); stop-opacity: .04; }

.gc-line { fill: none; stroke-width: 2.25; stroke-linecap: round; }
.gc-line-top { stroke: var(--olive-deep); }
.gc-line-base { stroke: var(--wood); }

.gc-tick text {
  font-size: 13px;
  font-weight: 500;
  fill: var(--muted);
}
.gc-tick .gc-tick-now { letter-spacing: .14em; font-weight: 600; }

.gc-label text {
  font-size: 15px;
  font-weight: 500;
  fill: var(--soil);
}
.gc-label .gc-label-gap { font-weight: 600; fill: var(--ink); }

/* the span the gap label refers to */
.gc-bracket path {
  fill: none;
  stroke: var(--wood);
  stroke-width: 1;
  opacity: .45;
}

/* Below the desktop column the in-chart labels start to collide, so they give way
   to a legend underneath. The ticks stay, and grow because the viewBox shrinks. */
/* centred as a group, left-aligned within it, so the swatches line up */
.gap-legend { display: none; text-align: left; }

.gap-credit {
  display: block;
  margin-top: .875rem;
  font-size: .6875rem;
  letter-spacing: .01em;
  color: var(--muted);
}
.gap-credit a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-color: var(--sand-line);
  transition: color var(--base), text-decoration-color var(--base);
}
.gap-credit a:hover { color: var(--olive-deep); text-decoration-color: currentColor; }
.gap-key { display: block; }
.gap-key::before {
  content: "";
  display: inline-block;
  width: 1.375rem;
  height: 3px;
  border-radius: 2px;
  margin-right: .5rem;
  vertical-align: .3em;
}
.gap-key-top::before { background: var(--olive-deep); }
.gap-key-base::before { background: var(--wood); }
.gap-note {
  margin-top: .5rem;
  font-weight: 600;
  color: var(--ink);
}
/* an area swatch rather than a rule, carrying the same wash as the chart fill */
.gap-note::before {
  height: .8125rem;
  border-radius: 2px;
  vertical-align: -.125em;
  background: linear-gradient(180deg, rgba(95, 107, 60, .34), rgba(95, 107, 60, .08));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--olive) 34%, transparent),
    color-mix(in srgb, var(--olive) 8%, transparent));
}

@media (max-width: 600px) {
  .gc-label, .gc-bracket { display: none; }
  .gap-chart-svg { aspect-ratio: 520 / 420; }   /* crops the empty label column */
  .gc-tick text { font-size: 11px; }
  .gc-line { stroke-width: 3; }
  .gap-legend {
    display: inline-block;
    margin-top: 1.125rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--soil);
  }
}
/* the slice crop scales the viewBox by container width / 520, so the tick size
   has to come down in steps to land near 11px rendered at every width */
@media (max-width: 500px) { .gc-tick text { font-size: 13px; } }
@media (max-width: 440px) {
  .gc-tick text { font-size: 15px; }
  .gc-line { stroke-width: 3.75; }
}
@media (max-width: 380px) { .gc-tick text { font-size: 17px; } }

/* ---------- How ---------- */

.how {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
}
.how-step {
  border-top: 2px solid var(--olive);
  padding-top: 1.25rem;
}
.how-step .step-no {
  counter-increment: step;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 1.125rem;
  color: var(--muted);
}
.how-step .step-no::before { content: "0" counter(step); }
.how-step h3 { margin-top: .375rem; font-size: 1.5rem; }
.how-step p { margin-top: .625rem; font-size: .9375rem; }

/* ---------- Screenshot marquee ---------- */

.marquee-label {
  margin-top: 3.5rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.marquee {
  margin-top: 1rem;
  padding: 1.5rem 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;              /* horizontal drag here, page still scrolls vertically */
  user-select: none;
  -webkit-user-select: none;
  /* fade the slides out at both edges instead of cutting them off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee.is-dragging { cursor: grabbing; }

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Spacing sits on the slide, not on a flex gap, so both runs measure the same
   width and the halfway point lands exactly on the seam. Every slide is the
   same height and takes its width from the screenshot inside it. The frame
   matches the result cards: white, hairline border, barely-there shadow. */
.slide {
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0 1rem 0 0;
  height: 10.4rem;
  width: auto;
  display: flex;
  padding: .75rem;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color var(--base), box-shadow var(--base);
}
.slide:hover {
  border-color: var(--sand-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 28px -20px rgba(63,49,35,.45);
}
.slide img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: .375rem;
}

@media (max-width: 600px) {
  .slide { height: 7.2rem; margin-right: .75rem; }
}

/* ---------- Screenshot lightbox ---------- */

/* Clicking a slide opens it here, big and centred, so the screenshot is
   actually readable. Hidden until the script opens it. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(22, 19, 15, .82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: lightbox-in var(--base) both;
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  animation: lightbox-rise var(--base) both;
}

@keyframes lightbox-rise {
  from { opacity: 0; transform: translateY(.75rem) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* The script sizes the image to fill the space it has, so a small screenshot
   is enlarged rather than sitting tiny in the middle. These are the fallback
   bounds. */
.lightbox-figure img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: .5rem;
  background: #fff;
  padding: .75rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

.lightbox-caption {
  margin: 0;
  max-width: 46rem;
  align-self: center;
  text-align: center;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

.lightbox-close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.25rem);
  right: clamp(.75rem, 2vw, 1.25rem);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .45);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-figure { animation: none; }
}

/* ---------- Results ---------- */

.cases {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
}
.case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--base), box-shadow var(--base), transform var(--fast);
}
.case:hover {
  border-color: var(--sand-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 28px -20px rgba(63,49,35,.45);
  transform: translateY(-2px);
}
.case-sector {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wood);
}
.case-figure {
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  color: var(--ink);
}
.case-figure span { color: var(--olive-deep); }
.case-metric {
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
}
.case-what {
  margin-top: 1.25rem;
  font-size: .9375rem;
  color: var(--body);
}
.case-how {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--sand-line);
  font-size: .875rem;
  color: var(--muted);
}
.case-how strong {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .375rem;
}

/* ---------- Beliefs and the founder ---------- */

.beliefs-layout {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 4rem;
  align-items: center;
}

.founder { margin: 0; }
/* The portrait was shot on a white ground, so multiply drops it onto the band. */
.founder img { width: 100%; mix-blend-mode: multiply; }
.founder figcaption {
  margin-top: 1.125rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.founder figcaption span { display: block; }
.founder figcaption span + span { margin-top: .375rem; }

.founder-name {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
.founder-name a {
  display: inline-flex;
  align-items: center;
  vertical-align: -.1875rem;
  margin-left: .3125rem;
  color: var(--olive);
  transition: color var(--base);
}
.founder-name a:hover { color: var(--olive-deep); }
.founder-name svg { width: .9375rem; height: .9375rem; }

.beliefs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: insight;
}
.belief {
  padding: 1.75rem 0;
  border-top: 1px solid var(--sand-line);
  text-align: left;
}
.belief:first-child { padding-top: 0; border-top: 0; }
.belief:last-child { padding-bottom: 0; }
.belief h3 {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 1.625rem;
}
.belief h3::before {
  counter-increment: insight;
  content: counter(insight);
  flex: 0 0 auto;
  margin-top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--olive);
  color: #fff;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.belief p { margin-top: .625rem; font-size: 1rem; }

/* ---------- Contact ---------- */

.contact { text-align: center; padding: 5rem 0 4rem; }
.contact h2 { margin-top: .875rem; font-size: clamp(2rem, 4.2vw, 2.875rem); }
.contact p { margin: 1rem auto 0; max-width: 34rem; }
.contact-fit { margin-top: 1.75rem; font-size: .8125rem; color: var(--muted); }

.email-row {
  margin: 2rem auto 0;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--sand-line);
  background: var(--sand);
  border-radius: 999px;
  padding: .3125rem .3125rem .3125rem 1.125rem;
}
.email-row a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.email-row a:hover { color: var(--olive-deep); }

.copy-btn {
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--body);
  background: #fff;
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: .4375rem .875rem;
  cursor: pointer;
  transition: color var(--base), border-color var(--base), background var(--base);
}
.copy-btn:hover { color: var(--olive-deep); border-color: var(--wood); }
.copy-btn.copied { color: var(--olive-deep); border-color: var(--olive); background: #fff; }

.foot {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .8125rem;
  color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: .25rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .nav-links { gap: 1.25rem; }
  .nav-links a { font-size: .8125rem; }
}

@media (max-width: 900px) {
  .how, .cases { grid-template-columns: 1fr; }
  .beliefs-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .founder { max-width: 17rem; margin-inline: auto; text-align: center; }
}

@media (max-width: 780px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

@media (max-width: 700px) {
  .hero-points { flex-direction: column; gap: .375rem; }
  .hero-points li + li::before { display: none; }
}

@media (max-width: 600px) {
  .hero { padding-bottom: 3rem; }
  .section { padding: 3.25rem 0; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .email-row { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }

}