/* ==========================================================================
   Ops Flow — page sections

   Every section component the site uses, shared across pages. Geometry mirrors
   the Figma frames; all lengths are rem at 1rem = 16px, so the numbers still
   read as the Figma pixels. Per-page spacing overrides live at the bottom.
   ========================================================================== */

/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 53.5625rem;
  overflow: hidden;
  background: #0e0918;
}

/* Above the 1300 design width the root font size stops scaling, so the hero's
   height is pinned at 696 while its width keeps growing. The box aspect drifts
   away from the artwork's 1601/857 and object-fit: cover eats the difference —
   at 1920 that is a third of the artwork height, at 2560 nearly half, which cut
   the bottom row of the team banner clean off. Let the height follow the width
   instead so the artwork is always shown whole; the copy stays 1300-sized and
   the extra height falls in the dark lower part of the art. Team and About
   only — the other banners are abstract washes that survive the crop. */
@media (min-width: 1301px) {
  .page-team .hero,
  .page-about .hero {
    height: auto;
    min-height: 53.5625rem;
    aspect-ratio: 1601 / 857;
  }
}

/* Past ~1500 the banner is tall enough that copy pinned to a Figma top offset
   leaves a dead third underneath it. Centre the copy in the banner instead —
   the artwork's subject is centred too, so they line up. */
@media (min-width: 1500px) {
  .page-team .hero__inner,
  .page-about .hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-team .hero__content,
  .page-about .hero__content { padding-top: 0; }
}

/* Figma Group 1171278831 — the composited hero background (1601 x 857) */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero__content {
  position: relative;
  padding-top: 12.3125rem;
  max-width: 100%;
}

.hero__title {
  width: 40.801%; /* 601 / 1473 */
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 3.9375rem;
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-white);
}

.hero__title .is-dim { color: var(--of-heading-dim); }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.9375rem;
}

.hero__lead {
  width: 42.159%; /* 621 / 1473 */
  margin-top: 2.625rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-white);
}

.hero__rule {
  width: 42.227%; /* 622 / 1473 */
  height: max(0.0625rem, 1px);
  margin-top: 3.4375rem;
  /* Figma "Line 3642 (2)" — the dark-banner variant of the rule the founder
     block uses. Supplied as artwork, so it is an image rather than a gradient. */
  background: url('../images/global/line-3642-hero.png') no-repeat center / 100% 100%;
}

/* The break is authored, not natural: line 1 ends after "to" so "Do" starts
   line 2. It is switched off below 1200, where the title is full-width and a
   forced break would leave a stub line. */
.hero__title br { display: inline; }
@media (max-width: 1200px) { .hero__title br { display: none; } }

.hero__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 3.75rem;   /* 37.5 -> 60, more air between the three marks */
  row-gap: 1.25rem;
  margin-top: 1.1875rem;
}

.hero__logos img { flex: none; }

/* The light n8n export carries more padding than the other two (1024x410 =
   aspect 2.50 against a 3.37 box), so `cover` was scaling it up ~35%% to fill
   the width and spilling it out of the top. Box width now matches the art
   aspect and `contain` keeps it at its true size, level with the others. */
.hero__logos .logo-n8n { width: 7.3671rem; height: 2.94975rem; object-fit: contain; }
.hero__logos .logo-zapier { width: 7.29819rem; height: 3.33894rem; object-fit: cover; }
.hero__logos .logo-make { width: 10.83669rem; height: 2.18769rem; object-fit: cover; }

/* Right-hand artwork ------------------------------------------------------
   Positioned as a share of the 1601px frame so it tracks the container. */
/* Cluster wrapper for the hero artwork. It generates no box on desktop, so the
   pieces stay absolutely positioned against .hero__inner exactly as before; the
   tablet/mobile block below turns it into a real box under the copy. */
.hero__visual { display: contents; }

.hero__art {
  position: absolute;
  left: 42.848%;   /* 686 / 1601 */
  top: 21.121%;    /* 181 / 857 */
  width: 52.467%;  /* 840 / 1601 */
  aspect-ratio: 840 / 486.535;
  overflow: hidden;
  pointer-events: none;
}

.hero__art img {
  position: absolute;
  width: 127.19%;
  height: 167.48%;
  left: -12.12%;
  top: -39.43%;
  max-width: none;
}

.hero__art-mark {
  position: absolute;
  left: 69.082%;  /* 1106 / 1601 */
  top: 45.017%;   /* 385.8 / 857 */
  width: 6.623%;  /* 106.04 / 1601 */
  aspect-ratio: 106.04 / 71.833;
  overflow: hidden;
  pointer-events: none;
}

.hero__art-mark img {
  position: absolute;
  width: 518.75%;
  height: 382.89%;
  left: -86.26%;
  top: -144.12%;
  max-width: none;
}

.hero__badge {
  position: absolute;
  left: 66.683%;  /* 1067.6 / 1601 */
  top: 67.945%;   /* 582.29 / 857 */
  width: 11.219%; /* 179.619 / 1601 */
  aspect-ratio: 1;
  pointer-events: none;
}

.hero__badge-glow {
  position: absolute;
  left: 1.353%;
  top: 1.08%;
  width: 97.744%;  /* 175.566 / 179.619 */
  height: 98.196%; /* 176.377 / 179.619 */
}

.hero__badge-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   2. What automation looks like
   ========================================================================== */
.steps { padding-top: 4.6875rem; }

.steps__title {
  width: 42.125rem;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3.3125rem;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 13.1875rem;
  padding: 1.25rem;
  border: 0.06688rem solid var(--of-border);
  border-radius: 1.25rem;
  background: var(--of-white);
}

.step-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-radius: 62.4375rem;
  background: var(--of-tint);
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: normal;
  background-clip: padding-box;
}

.step-card__badge span {
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.step-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1.375rem;
  background: var(--of-tint);
}

.step-card__icon img { width: 1.375rem; height: 1.375rem; }

.step-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
}

.step-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* "Follow-up message sent automatically" needs 257 of the 249 available at
     18px, so the whole set steps down to keep every card on one line. */
  font-size: 1.0625rem;
  line-height: normal;
  color: var(--of-ink);
}

.step-card--outfit .step-card__title { font-family: var(--font-outfit); font-weight: 700; }

.step-card__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--of-muted);
}

.steps__rule {
  height: max(0.0625rem, 1px);
  margin-top: 4.375rem;
  background: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   3. Running a growing business shouldn't feel like this
   ========================================================================== */
.problem { padding-top: 4.375rem; }

.problem__grid {
  display: flex;
  align-items: flex-start;
  gap: 3.055%; /* 45 / 1473 */
}

.problem__media {
  position: relative;
  flex: none;
  width: 50.102%; /* 738 / 1473 */
  aspect-ratio: 738 / 672;
  border-radius: 1.375rem;
  overflow: hidden;
}

.problem__photo,
.problem__photo-tint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  border-radius: 1.375rem;
}

.problem__hue {
  position: absolute;
  inset: 0;
  border-radius: 1.375rem;
  background: #fe390d;
  mix-blend-mode: hue;
}

.problem__shade {
  position: absolute;
  inset: 0;
  border-radius: 1.375rem;
  background: linear-gradient(180deg, rgba(102, 102, 102, 0) 50%, #251f34 100%);
  mix-blend-mode: hue;
}

.problem__mark {
  position: absolute;
  left: 1.355%;    /* 10 / 738 */
  top: -0.149%;    /* -1 / 672 */
  width: 97.154%;  /* 717 / 738 */
  height: 72.315%; /* 485.956 / 672 */
  overflow: hidden;
}

.problem__mark img {
  position: absolute;
  left: 4.53%;
  top: 11.07%;
  right: 6.98%;
  bottom: 7.04%;
  width: 88.49%;
  height: 81.89%;
  max-width: none;
}

.problem__body {
  flex: none;
  width: 46.843%; /* 690 / 1473 */
  min-width: 0;
  padding-top: 0.0625rem;
}

.problem__title { width: 95.652%; } /* 660 / 690 */

.problem__lead {
  width: 95.652%;
  margin-top: 1.4375rem;
}

.problem__columns {
  display: flex;
  gap: 2.492%; /* 17.196 / 690 */
  min-height: 27.67525rem;
  margin-top: 1.5rem;
  padding-top: 0.80606rem;
}

.compare-col {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 1.34344rem;
  padding: 1.34344rem;
  border: 0.06719rem solid var(--of-border);
  border-radius: 1.07475rem;
}

.compare-col--good {
  border-color: #dcfce7;
  background: linear-gradient(315deg, rgba(255, 131, 35, 0.28) 0%, #ffffff 100%);
  filter: drop-shadow(-0.125rem 0.25rem 0.28125rem rgba(254, 134, 37, 0.1))
          drop-shadow(-0.4375rem 0.9375rem 0.5rem rgba(254, 134, 37, 0.09))
          drop-shadow(-1rem 2.0625rem 0.6875rem rgba(254, 134, 37, 0.05))
          drop-shadow(-1.8125rem 3.6875rem 0.8125rem rgba(254, 134, 37, 0.01));
}

.compare-col__head {
  display: flex;
  flex-direction: column;
  gap: 0.26869rem;
}

.compare-col__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.20913rem;
  line-height: normal;
  color: var(--of-ink);
}

.compare-col__underline {
  width: 2.14956rem;
  height: 0.13437rem;
  border-radius: 0.06719rem;
  background: #f87171;
}

.compare-col--good .compare-col__underline { background: #4ade80; }

.compare-col__list {
  display: flex;
  flex-direction: column;
  gap: 0.94044rem;
}

.compare-col__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.67175rem;
}

.compare-col__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.34344rem;
  height: 1.34344rem;
  border-radius: 0.67175rem;
  background: #fee2e2;
}

.compare-col--good .compare-col__icon { background: #dcfce7; }

.compare-col__icon img { width: 0.67175rem; height: 0.67175rem; }

.compare-col__list p {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-alt);
  font-weight: 400;
  font-size: 0.87325rem;
  line-height: 1.4;
  color: var(--of-muted);
}

.compare-col__stamp {
  position: absolute;
  left: 71.62%;  /* 240.93 / 336.4 */
  bottom: 5.32%; /* (429.9 - 344.03 - 63) / 429.9 */
  width: 18.73%; /* 63 / 336.4 */
  aspect-ratio: 1;
  height: auto;
}

.compare-col__stamp--mark {
  left: 61.93%;  /* 208.33 / 336.4 */
  bottom: 4.2%;  /* (429.9 - 340.03 - 71.833) / 429.9 */
  width: 31.52%;  /* 106.04 / 336.4 */
  aspect-ratio: 106.04 / 71.833;
  overflow: hidden;
}

.compare-col__stamp--mark img {
  position: absolute;
  width: 518.75%;
  height: 382.89%;
  left: -86.26%;
  top: -144.12%;
  max-width: none;
}

/* ==========================================================================
   4. Pick where you start (pricing)
   ========================================================================== */
.pricing {
  position: relative;
  padding: 9.875rem 0 0;
}

/* Figma Rectangle 240647741 (4:5311) — y 2152–3170. The section itself starts
   at 2072, so the artwork is inset 80 from its top and runs 1018 tall. */
.pricing__bg {
  position: absolute;
  left: 0;
  top: 5rem;         /* 80 */
  width: 100%;
  height: 63.625rem; /* 1018 */
  object-fit: cover;
  pointer-events: none;
}

.pricing > .container { position: relative; z-index: 1; }

.pricing__head { text-align: center; }

.pricing__lead {
  width: 41.25rem;
  max-width: 100%;
  margin: 1.0625rem auto 0;
  text-align: center;
}

.social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.625rem;
}

/* The avatars, stars and caption are one artwork now (Figma "Group 1171278732",
   434 x 58 exported at 4x) rather than five circles plus an SVG plus text.
   height:auto so it scales down intact on a narrow screen. */
.social-proof img {
  width: 27.125rem; /* 434 */
  max-width: 100%;
  height: auto;
}

.pricing__grid {
  display: grid;
  grid-template-columns: 351fr 348fr 351fr 351fr;
  gap: 1.5rem;
  margin-top: 4.0625rem;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  min-height: 36.4375rem;
  padding: 2rem;
  border: 0.06688rem solid var(--of-border);
  border-radius: 1.25rem;
  background: var(--of-white);
  overflow: hidden;
}

.price-card--featured {
  border: 0;
  background: radial-gradient(circle at 80% -12%,
    #fe8225 0%,
    #f76335 2.87%,
    #ef4444 5.73%,
    #b8393d 17.71%,
    #802e36 29.68%,
    #642933 35.67%,
    #49232f 41.66%,
    #2d1e2c 47.64%,
    #111828 53.63%);
}

.price-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--of-tint);
}

.price-card--featured .price-card__icon { background: var(--of-orange); }

.price-card__icon img { width: 1.375rem; height: 1.375rem; }

.price-card__badge {
  position: absolute;
  top: 0;
  right: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0 0 0.9375rem 0.9375rem;
  background: var(--of-orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: normal;
  color: var(--of-white);
  text-transform: uppercase;
  white-space: nowrap;
}

.price-card__pricing { display: flex; flex-direction: column; gap: 0.25rem; }

.price-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: normal;
  color: var(--of-ink);
}

.price-card__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: normal;
  color: var(--of-ink);
}

.price-card--featured .price-card__name { color: var(--of-white); }
.price-card--featured .price-card__amount { color: var(--of-orange); }

.price-card__desc {
  height: 4rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--of-muted);
}

.price-card--featured .price-card__desc { color: #a1a1aa; }

.price-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 0;
  border: 0.09375rem solid var(--of-ink);
  border-radius: 5.125rem;
  background: var(--of-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: normal;
  color: var(--of-ink);
  white-space: nowrap;
}

.price-card--featured .price-card__cta {
  border: 0;
  background: var(--of-gradient);
  color: var(--of-white);
}

.price-card__rule { height: max(0.0625rem, 1px); background: rgba(0, 0, 0, 0.1); }

.price-card--featured .price-card__rule { background: rgba(255, 255, 255, 0.15); }

.price-card__features { display: flex; flex-direction: column; gap: 0.75rem; }

.price-card__features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.price-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.5625rem;
  background: var(--of-tint);
}

.price-card--featured .price-card__check { background: rgba(255, 255, 255, 0.15); }

.price-card__check img { width: 0.625rem; height: 0.625rem; }

.price-card__features p {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: normal;
  color: var(--of-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-card--featured .price-card__features p { color: var(--of-white); }

.pricing__note {
  margin-top: 3.5rem;
  text-align: center;
}

/* ==========================================================================
   5. Tell us what you're trying to fix (CTA band)
   ========================================================================== */
.fixband { padding-top: 6.4375rem; }

.fixband__panel {
  position: relative;
  aspect-ratio: 1473 / 658;
}

.fixband__card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 82.067%; /* 540 / 658 */
  border: 0.0625rem solid #000000;
  border-radius: 2.5rem;
  background: var(--of-dark-panel);
}

.fixband__content {
  position: absolute;
  left: 3.666%;   /* 54 / 1473 */
  top: 11.55%;    /* 76 / 658 */
  width: 40.53%;  /* 597 / 1473 */
}

.fixband__title {
  width: 91.792%; /* 548 / 597 */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 3.9375rem;
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-white);
}

.fixband__title .is-dim { color: var(--of-heading-dim-2); }

.fixband__lead {
  width: 100%;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-white);
}

.fixband__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.3125rem;
}

/* Same trick as .hero__visual — no box on desktop, a real one below 1200. */
.fixband__visual { display: contents; }

.fixband__chip {
  position: absolute;
  left: 66.327%;  /* 977 / 1473 */
  top: 25.228%;   /* 166 / 658 */
  width: 11.337%; /* 167 / 1473 */
  aspect-ratio: 167 / 165;
  border-radius: 2.4375rem;
  background: #d9d9d9;
  box-shadow: -0.0625rem 0.1875rem 0.4375rem 0 rgba(253, 124, 33, 0.22),
              -0.1875rem 0.75rem 0.75rem 0 rgba(253, 124, 33, 0.19),
              -0.375rem 1.6875rem 1.0625rem 0 rgba(253, 124, 33, 0.11),
              -0.625rem 3.0625rem 1.25rem 0 rgba(253, 124, 33, 0.03);
}

.fixband__art {
  position: absolute;
  left: 44.399%;  /* 654 / 1473 */
  top: 0;
  width: 55.601%; /* 819 / 1473 */
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.fixband__art img {
  position: absolute;
  width: 125.89%;
  height: 129.44%;
  left: -12.82%;
  top: -14.19%;
  max-width: none;
}

/* ==========================================================================
   6. How we work together
   ========================================================================== */
.process { padding-top: 2rem; }

.process__head { text-align: center; }

.process__lead { margin-top: 1.9375rem; }

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.625rem;
}

.process-card {
  position: relative;
  min-height: 27.625rem;
  padding: 2.4375rem 2.4375rem 2.9375rem;
  border: 0.0625rem solid var(--of-border-soft);
  border-radius: 1.25rem;
}

.process-card__icon {
  width: 10.375rem;
  height: 10.375rem;
  margin-top: 2.3125rem;
}

.process-card__icon-stack { position: relative; width: 10.375rem; height: 10.375rem; }

.process-card__icon-stack img { position: absolute; inset: 0; width: 100%; height: 100%; }

.process-card__icon-stack .glyph {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
}

.process-card__number {
  position: absolute;
  right: 1.5625rem;
  top: 3.5625rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 8.89175rem;
  line-height: 1;
  color: transparent;
  opacity: 0.39;
  -webkit-text-stroke: 0.0625rem var(--of-border-soft);
  white-space: nowrap;
}

.process-card__title {
  margin: 2.125rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: normal;
  color: var(--of-ink);
  white-space: nowrap;
}

.process-card__desc {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--of-muted);
}

.process-card:nth-child(1) .process-card__desc,
.process-card:nth-child(2) .process-card__desc { width: 89.75%; } /* 359 / 400 */
.process-card:nth-child(3) .process-card__desc { width: 78.5%; }  /* 314 / 400 */

/* ==========================================================================
   7. Real automations I've built
   ========================================================================== */
.showcase {
  margin-top: 6.875rem;
  padding: 5.1875rem 0 5.6875rem;
  /* Client-supplied wash: peach at the top fading to white before the section
     ends, so it meets the white founder block below with no visible seam. */
  background: linear-gradient(180deg, #ffeada 0%, #ffffff 85%);
}

/* The angled wash this section used to carry ran past its own bottom edge and
   tinted the founder block below it. Keep that block explicitly white. */
.founder { background: var(--of-white); }

.showcase__head { width: 41.005%; } /* 604 / 1473 */

.showcase__lead { width: 39.986%; margin-top: 1.75rem; } /* 589 / 1473 */

.showcase__grid {
  display: flex;
  align-items: flex-start;
  gap: 1.358%; /* 20 / 1473 */
  margin-top: -9.1875rem;
}

.showcase__list {
  flex: none;
  width: 49.321%; /* 727 / 1473 */
  min-width: 0;
  margin-top: 13.5625rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auto-card {
  position: relative;
  min-height: 13.625rem;
  padding: 3.125rem 4.677% 1.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 1.25rem;
  background: var(--of-white);
}

.auto-card--active {
  border-color: var(--of-orange-deep);
  background: var(--of-tint-solid);
}

.auto-card__badge {
  position: absolute;
  top: 0;
  left: 75.643%; /* 549.92 / 727 — the badge is left-anchored; widths vary */
  padding: 0.40175rem 0.80356rem;
  border-radius: 0 0 1.00444rem 1.00444rem;
  background: var(--of-orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.73656rem;
  line-height: normal;
  color: var(--of-white);
  text-transform: uppercase;
  white-space: nowrap;
}

.auto-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: normal;
  color: var(--of-ink);
}

.auto-card__desc {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--of-muted);
}

.auto-card:nth-child(1) .auto-card__desc,
.auto-card:nth-child(2) .auto-card__desc { width: 88.72%; } /* 550 / 620 inner */
.auto-card:nth-child(3) .auto-card__desc { width: 94.84%; } /* 588 / 620 inner */

.showcase__feature {
  position: relative;
  flex: none;
  width: 49.321%; /* 727 / 1473 */
  min-width: 0;
  min-height: 56.9375rem;
  border-radius: 1.25rem;
  background: var(--of-white);
  overflow: hidden;
}

.showcase__feature-badge {
  position: absolute;
  top: 0;
  right: 2.58562rem;
  padding: 0.50987rem 1.01981rem;
  border-radius: 0 0 1.275rem 1.275rem;
  background: var(--of-orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.93437rem;
  line-height: normal;
  color: var(--of-white);
  text-transform: uppercase;
  white-space: nowrap;
}

.showcase__feature-title {
  margin: 0;
  padding: 3.9375rem 0 0 7.153%; /* 52 / 727 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--of-ink);
}

.showcase__feature-desc {
  width: 75.653%; /* 550 / 727 */
  margin: 1.6875rem 0 0 7.153%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--of-muted);
}

.showcase__feature-art {
  position: relative;
  width: 92.572%; /* 673 / 727 */
  margin: 1.6875rem 0 0 3.714%; /* 27 / 727 */
  aspect-ratio: 673 / 615;
}

.showcase__feature-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
}

.showcase__feature-mark {
  position: absolute;
  left: 14.859%;  /* 100 / 673 */
  top: 51.057%;   /* 314 / 615 */
  width: 6.835%;  /* 46 / 673 */
  aspect-ratio: 46 / 31;
  overflow: hidden;
}

.showcase__feature-mark img {
  position: absolute;
  width: 518.75%;
  height: 382.89%;
  left: -86.26%;
  top: -144.12%;
  max-width: none;
}

/* ==========================================================================
   8. Founder
   ========================================================================== */
.founder { padding-top: 3.625rem; }

.founder__grid {
  display: flex;
  align-items: flex-start;
  gap: 3.869%; /* 57 / 1473 */
}

.founder__media {
  position: relative;
  flex: none;
  width: 46.164%; /* 680 / 1473 */
  aspect-ratio: 680 / 744;
  border-radius: 1.25rem;
  overflow: hidden;
}

.founder__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__badge {
  position: absolute;
  left: 5.147%;   /* 35 / 680 */
  top: 6.183%;    /* 46 / 744 */
  width: 19.667%; /* 133.733 / 680 */
  aspect-ratio: 1;
}

.founder__badge-glow {
  position: absolute;
  left: 1.354%;
  top: 1.084%;
  width: 97.744%;
  height: 98.194%;
}

.founder__badge img.founder__badge-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__quote {
  position: absolute;
  left: 2.5%;     /* 17 / 680 */
  bottom: 2.554%; /* (744 - 508 - 217) / 744 */
  width: 95.294%; /* 648 / 680 */
  aspect-ratio: 648 / 217;
  /* The stroke is a gradient, not a flat colour: bright along the top-left and
     fading out towards the bottom-right, so the card reads as lit from above.
     A border cannot take a gradient directly, so the border box is left
     transparent and two backgrounds are stacked — the glass fill clipped to the
     padding box, the gradient clipped to the border box, which leaves the
     gradient showing only in the 1px the border occupies. */
  border: max(0.0625rem, 1px) solid transparent;
  border-radius: 1.25rem;
  background:
    linear-gradient(rgba(26, 26, 33, 0.78), rgba(26, 26, 33, 0.78)) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.34) 38%,
      rgba(255, 255, 255, 0.06) 100%) border-box;
  backdrop-filter: blur(1.5rem);
  -webkit-backdrop-filter: blur(1.5rem);
}

.founder__quote p {
  width: 74.846%;            /* 485 / 648 — margin, not padding, so the text
                                box is the full 485 the Figma line breaks assume */
  margin: 3.781% 0 0 2.778%; /* 24.5 / 648, 18 / 648 */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;      /* 17.7 — 6 lines x 28 = the 168 text box */
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: #d7d7dc;
}

.founder__quote-mark {
  position: absolute;
  right: 3.549%;  /* (648 - 503 - 122) / 648 */
  top: 30.876%;   /* 67 / 217 */
  width: 18.827%; /* 122 / 648 */
  aspect-ratio: 122 / 92;
}

.founder__body {
  flex: none;
  width: 49.083%; /* 723 / 1473 */
  min-width: 0;
  padding-top: 2rem;
}

.founder__title {
  width: 91.286%; /* 660 / 723 */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 3.9375rem;
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-ink);
}

.founder__role {
  width: fit-content;
  margin-top: 1.6875rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  background: var(--of-gradient);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.founder__desc {
  width: 100%;
  margin-top: 1.8125rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-muted);
}

.founder__tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;  /* 20 */
  row-gap: 1.15625rem;  /* 18.5 */
  width: 88.658%;       /* 641 / 723 */
  margin-top: 2.5rem;
}

.founder__tags li {
  display: inline-flex;
  align-items: center;
  padding: 0.4675rem 0.77912rem;
  border-radius: 62.4375rem;
  background: var(--of-tint);
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 0.9375rem; /* 15 — the step badge scaled 1.2486x */
  line-height: 1.25rem;
}

.founder__tags span {
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* Figma Line 3642 (23:410 / 65:635) — the exported hairline, grey at the left
   fading out to the right. 622 x 1, supplied as a 4x PNG. */
.founder__rule {
  width: 86.031%; /* 622 / 723 */
  height: max(0.0625rem, 1px);
  margin-top: 4.1875rem; /* 67 */
  background: url('../images/global/line-3642.png') no-repeat center / 100% 100%;
}

.founder__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 3.75rem;   /* matches the hero strip */
  row-gap: 1.25rem;
  margin-top: 1.1875rem;
}

.founder__logos img { flex: none; }

.founder__logos .logo-n8n { width: 9.7711rem; height: 2.94975rem; object-fit: contain; }  /* 159/48 art aspect — no crop */
/* the n8n glyph is taller than the wordmarks either side, so centring the box
   still leaves the mark reading ~1px high — drop it to level the three up */
.founder__logos .logo-n8n { position: relative; top: 0.0625rem; }
.founder__logos .logo-zapier { width: 7.29819rem; height: 3.33894rem; object-fit: cover; }
.founder__logos .logo-make { width: 10.83669rem; height: 2.18769rem; object-fit: cover; }

/* ==========================================================================
   9. Contact
   ========================================================================== */
/* Figma Rectangle 240647724 (24:436) — one 1601 x 938 dark band that covers the
   contact section AND the footer. The image is shared by both elements and
   anchored to opposite edges, so the two slices meet with no visible seam:
   the contact section is 724 tall, the footer 214, and 724 + 214 = 938. */
.contact,
.site-footer {
  background-color: #0e0918;
  background-image: url('../images/global/contact-footer-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 59.33rem;  /* 949 — must equal .contact height + .site-footer height, or the seam shows */
}

.contact { background-position: 0 0; }
.site-footer { background-position: 0 100%; }

.contact {
  position: relative;
  margin-top: 6.6875rem;
  padding-top: 4.3125rem;
  padding-bottom: 2.625rem;
}

.contact__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 5.906%; /* 87 / 1473 */
}

.contact__intro {
  flex: none;
  width: 44.807%; /* 660 / 1473 */
  min-width: 0;
  padding-top: 1.5625rem;
}

.contact__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 3.9375rem;
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-white);
}

.contact__lead {
  width: 94.091%; /* 621 / 660 */
  margin-top: 1.3125rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-white);
}

.contact__rows { margin-top: 2.75rem; }

.contact__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 98.03%; /* 647 / 660 */
  height: 2.5rem;
}

.contact__divider + .contact__row { margin-top: 1.5rem; }

/* The exported icons already carry their 2.5rem tinted circle */
.contact__row-icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.contact__row-icon img { width: 2.5rem; height: 2.5rem; }

.contact__row p,
.contact__row a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.98125rem;
  line-height: 1.5rem;
  color: var(--of-white);
}

.contact__divider { width: 97.42%; height: max(0.0625rem, 1px); margin-top: 1.375rem; background: rgba(255, 255, 255, 0.15); } /* 643 / 660 */

/* Form -------------------------------------------------------------------- */
.contact-form {
  flex: none;
  width: 49.287%; /* 726 / 1473 */
  min-width: 0;
  min-height: 38.3125rem;
  padding: 2.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  /* Frosted glass rather than a flat 4% white wash: the red band ran straight
     through the panel unbroken, so it never read as a surface. The blur keeps
     the artwork visible but diffused behind the fields. */
  background: rgba(16, 9, 20, 0.08);
  -webkit-backdrop-filter: blur(1.25rem);
  backdrop-filter: blur(1.25rem);
}

.contact-form__title {
  height: 2.625rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.625rem;
  color: var(--of-white);
}

.contact-form__subtitle {
  height: 1.4375rem;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.98125rem;
  line-height: 1.4375rem;
  color: rgba(255, 255, 255, 0.7);
}

.contact-form__fields { margin-top: 1.75rem; }

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.contact-form__field { margin-bottom: 1.25rem; }

.contact-form__row .contact-form__field { margin-bottom: 0; }

.contact-form__fields > .contact-form__field:last-child { margin-bottom: 0; }

.contact-form__field label {
  display: block;
  /* fit-content so the gradient runs across the words, not the whole field */
  width: fit-content;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  /* the line box has to contain the descenders — background-clip: text cannot
     paint a glyph that hangs outside the element's background area */
  line-height: 1.5rem;
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-form__field input,
.contact-form__field textarea {
  display: block;
  width: 100%;
  height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--of-white);
  outline: none;
}

.contact-form__field textarea { height: 7.0625rem; resize: vertical; padding: 1rem; }

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.contact-form__submit { margin-top: 1.75rem; }


/* ==========================================================================
   Responsive

   Column widths above are percentages of the Figma content column, and every
   length is in rem, so the desktop layout scales as one piece with the root
   font size — no override needed down to 1200px. Below that the root font
   size returns to 16px and the sections re-flow in stages.
   ========================================================================== */

/* --- Below 1200: side-by-side sections stack or wrap --------------------- */
@media (max-width: 1200px) {
  .hero { height: auto; padding-bottom: 5rem; }
  .hero__content { padding-top: 10.625rem; }
  .hero__title,
  .hero__lead,
  .hero__rule { width: 100%; }
  /* The art stops being an overlay and becomes a block under the copy, so
     nothing has to be hidden. .hero__visual takes over as its frame. */
  .hero__visual {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 3rem;
  }

  /* Home: art + logo mark + badge, re-based from the 1601 x 857 frame onto the
     840 x 580.9 box the three of them actually occupy, so the Figma
     arrangement survives the move. */
  .hero__visual--home { aspect-ratio: 840 / 580.9; }
  .hero__visual--home .hero__art { left: 0; top: 0; width: 100%; }
  .hero__visual--home .hero__art-mark { left: 50%; top: 35.25%; width: 12.624%; }
  .hero__visual--home .hero__badge { left: 45.43%; top: 69.08%; width: 21.383%; }

  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .steps__title { white-space: normal; }

  .pricing__grid { grid-template-columns: repeat(2, 1fr); }

  .problem__grid { gap: 2rem; }
  .problem__media { width: 46%; }
  .problem__body { flex: 1 1 0; width: auto; }
  .problem__title,
  .problem__lead { width: 100%; }

  .fixband__panel { aspect-ratio: auto; overflow: hidden; border-radius: 2.5rem; }
  /* .fixband__card is an empty div that draws the dark panel. Once the panel is
     content-sized a static empty div collapses to nothing and the white text
     lands on the page background — so keep it absolute and let it cover the
     whole panel rather than the desktop 82% slice. */
  .fixband__card { height: 100%; }
  .fixband__content {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: 100%;
    padding: 3.5rem 2.5rem 0;
  }
  .fixband__title,
  .fixband__lead { width: 100%; }
  .fixband__visual {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 819 / 658;
    margin-top: 2.5rem;
  }
  .fixband__art { left: 0; top: 0; width: 100%; height: 100%; }
  .fixband__chip { left: 39.44%; top: 25.23%; width: 20.39%; }

  .process__grid { grid-template-columns: 1fr; }
  .process-card__title { white-space: normal; }
  .process-card:nth-child(1) .process-card__desc,
  .process-card:nth-child(2) .process-card__desc,
  .process-card:nth-child(3) .process-card__desc { width: 100%; }

  .showcase__head,
  .showcase__lead { width: 100%; }

  /* Cards stack, so the section grows well past the artwork's 1018 — let the
     peach-to-white gradient run the full height instead of cutting off. */
  .pricing__bg { top: 0; height: 100%; }
  .showcase__grid { flex-wrap: wrap; gap: 1.25rem; margin-top: 3rem; }
  .showcase__list,
  .showcase__feature { flex: 1 1 28.75rem; width: auto; }
  .showcase__list { margin-top: 0; }
  .showcase__feature { min-height: 0; padding-bottom: 2.5rem; }
  .process-card { min-height: 0; }
  .showcase__feature-title { padding: 2.5rem 0 0 2rem; }
  .showcase__feature-desc { width: auto; margin: 1.25rem 2rem 0; }
  .showcase__feature-art { width: calc(100% - 4rem); margin: 2rem 2rem 0; }
  .auto-card { min-height: 0; padding: 3.125rem 2.125rem 1.5rem; }
  .auto-card__badge { left: auto; right: 2rem; }
  .auto-card__desc,
  .auto-card:nth-child(1) .auto-card__desc,
  .auto-card:nth-child(2) .auto-card__desc,
  .auto-card:nth-child(3) .auto-card__desc { width: 100%; }

  .founder__grid { gap: 2rem; }
  .founder__media { width: 46%; }
  .founder__quote { position: relative; width: auto; aspect-ratio: auto; }
  .founder__body { flex: 1 1 0; width: auto; }
  .founder__title,
  .founder__desc,
  .founder__tags,
  .founder__rule { width: 100%; }

  .contact__inner { gap: 2.5rem; }
  .contact__intro,
  .contact-form { flex: 1 1 0; width: auto; }
  .contact__lead { width: 100%; }
}

/* --- Below 992: two-column sections become one column -------------------- */
@media (max-width: 991px) {
  .problem__grid,
  .founder__grid,
  .contact__inner { flex-direction: column; align-items: stretch; }

  /* flex-basis 0 would collapse height once the axis flips to column */
  .problem__media,
  .problem__body,
  .founder__media,
  .founder__body,
  .contact__intro,
  .contact-form { flex: none; width: 100%; min-width: 0; }

  .problem__columns { flex-direction: column; min-height: 0; gap: 1.25rem; }

  .showcase__list,
  .showcase__feature { flex: none; width: 100%; }

  .founder__tags li,
  .founder__tags span { white-space: normal; }
  /* Stacked, the card is narrow and tall, so the mark floats instead of
     overlaying — the text wraps past it and reclaims the full width below.
     (This is why the mark sits before the <p> in the markup.) */
  .founder__quote-mark {
    position: static;
    float: right;
    width: 4rem;
    margin: 1.25rem 1.5rem 0 0.75rem;
  }
  .founder__quote p { width: auto; margin: 1.5rem; }
  .fixband__actions { flex-wrap: wrap; }
  .contact-form { min-height: 0; }

  .contact__intro { padding-top: 0; }
  .contact__title { width: 100%; }

  /* Section heights no longer add up to the 938 band, so stop splitting the
     artwork across the two elements. */
  .contact { background-size: cover; background-position: center; }
  .site-footer { background-image: none; }
}

/* --- Below 768: single column ------------------------------------------- */
@media (max-width: 767px) {
  .hero__title { font-size: 2.125rem; line-height: 2.625rem; }
  .hero__actions { flex-wrap: wrap; }

  .steps__grid,
  .pricing__grid { grid-template-columns: 1fr; }


  .fixband__title,
  .founder__title,
  .contact__title { font-size: 2rem; line-height: 2.5rem; }
  .fixband__content { padding: 2.5rem 1.5rem; }

  .showcase__feature-title { font-size: 1.875rem; line-height: 2.375rem; }
  .auto-card__title { font-size: 1.5rem; }

  .contact-form { padding: 1.5rem; }
  .contact-form__row { grid-template-columns: 1fr; }

}

/* ==========================================================================
   Automation Services — hero variant
   Figma frame 65:18, group 65:550. Same shell as the home hero; the content
   block sits lower, is narrower, and carries a single CTA.
   ========================================================================== */
.hero--services .hero__content { padding-top: 14.75rem; }   /* 236 */

.hero--services .hero__title { width: 38.697%; }            /* 570 / 1473 */

.hero--services .hero__actions { margin-top: 2.0625rem; }   /* 33 */

.hero--services .hero__lead { margin-top: 2.6875rem; width: 40.19%; } /* 43, 592 / 1473 */

/* Figma 65:594 — 851 x 722 at 729,136, no inner crop */
.hero__art--services {
  left: 45.534%;   /* 729 / 1601 */
  top: 15.869%;    /* 136 / 857 */
  width: 53.154%;  /* 851 / 1601 */
  aspect-ratio: 851 / 722;
  overflow: visible;
}

.hero__art--services img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Figma 73:2075 — the 17.5 dot that completes the mark on the laptop screen */
.hero__dot {
  position: absolute;
  left: 65.646%;   /* 1051 / 1601 */
  top: 83.751%;    /* 717.75 / 857 */
  width: 1.093%;   /* 17.5 / 1601 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--of-white);
  pointer-events: none;
}

/* ==========================================================================
   What We automate — Figma 65:599
   ========================================================================== */
.services { padding-top: 9.4375rem; } /* 151 */

.services__head { text-align: center; }

.services__lead { margin-top: 1.25rem; } /* 20 */

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;          /* 40 */
  margin-top: 4.375rem; /* 70 */
}

.service-card {
  min-height: 13.1875rem; /* 211 */
  padding: 2rem;          /* 32 */
  border-radius: 1.25rem;
  background: var(--of-white);
  /* an inset shadow rather than a border: Figma's stroke sits inside the 211,
     a CSS border would add its width on top of it */
  box-shadow: inset 0 0 0 0.06688rem var(--of-border);
}

.service-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 3rem; /* 48 */
}

/* The exported Icon Base carries its own 48px tinted circle */
.service-card__icon { width: 3rem; height: 3rem; }

.service-card__num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1875rem; /* 19 */
  color: var(--of-muted);
  padding-top: 0.90625rem; /* 14.5 */
}

.service-card__title {
  margin: 1.125rem 0 0; /* 18 */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;    /* 22 */
  line-height: 1.6875rem; /* 27 */
  color: var(--of-ink);
}

.service-card__desc {
  margin-top: 0.625rem; /* 10 */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem; /* 15 */
  line-height: 1.375rem; /* 22 */
  color: var(--of-muted);
}

.services__rule {
  height: max(0.0625rem, 1px);
  margin-top: 4.6875rem; /* 75 */
  background: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Per-page spacing
   The section components above default to the home page's rhythm; other pages
   only differ in the gaps between them.
   ========================================================================== */
.page-services .fixband { padding-top: 4.6875rem; } /* 75 */
.page-services .founder { padding-top: 6.25rem; }   /* 100 */
.page-services .contact { margin-top: 6.25rem; }    /* 100 */

/* ==========================================================================
   Automation Services — responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .hero--services .hero__content { padding-top: 10.625rem; }
  .hero--services .hero__title,
  .hero--services .hero__lead { width: 100%; }
  .hero__visual--services { aspect-ratio: 851 / 722; }
  .hero__visual--services .hero__art--services { left: 0; top: 0; width: 100%; height: 100%; }
  .hero__visual--services .hero__dot { left: 37.84%; top: 80.58%; width: 2.056%; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 0; }
}

@media (max-width: 767px) {
  .services__grid { grid-template-columns: 1fr; }
  .service-card__title { font-size: 1.25rem; line-height: 1.5rem; }
}

/* ==========================================================================
   How We Work Together — hero variant
   Figma frame 65:641. Content block at 277; headline, CTA, subtext, rule and
   logo strip each 33 apart.
   ========================================================================== */
.hero--process .hero__content { padding-top: 17.3125rem; } /* 277 */

.hero--process .hero__title { width: 38.764%; }            /* 571 / 1473 */

.hero--process .hero__actions { margin-top: 2.0625rem; }   /* 33 */

.hero--process .hero__lead {
  width: 40.462%;      /* 596 / 1473 */
  min-height: 3.75rem; /* 60 — the Figma text box */
  margin-top: 2.0625rem;
}

.hero--process .hero__rule { margin-top: 2.0625rem; }

/* Figma 89:52 — 819 x 658 at 715,157 */
.hero__art--process {
  left: 44.66%;    /* 715 / 1601 */
  top: 18.32%;     /* 157 / 857 */
  width: 51.156%;  /* 819 / 1601 */
  aspect-ratio: 819 / 658;
  overflow: visible;
}

.hero__art--process img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   Our Step-by-Step Delivery — Figma 68:1198
   ========================================================================== */
.delivery {
  position: relative;
  padding: 6.375rem 0 6.375rem; /* 102 — the artwork band runs 857..2139 */
  /* same wash as "Real automations I have built": peach at the top fading to
     white before the section ends, so it meets the next block with no seam.
     (It carried the old angled gradient, whose tail ran past its own edge.) */
  background: linear-gradient(180deg, #ffeada 0%, #ffffff 85%);
}

.delivery__title { line-height: 4.125rem; } /* 66 */

.delivery__grid {
  display: flex;
  align-items: flex-start;
  gap: 5.346%; /* 78.75 / 1473 */
  margin-top: 3.125rem; /* 50 */
}

.delivery__list {
  flex: none;
  width: 49.355%; /* 727 / 1473 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30 */
}

.delivery__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 45.078%; /* 664 / 1473 */
  aspect-ratio: 664 / 962;
  border-radius: 1.25rem;
  background: var(--of-white);
  overflow: hidden;
}

.delivery__panel img {
  width: 57.982%; /* 385 / 664 */
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   What Happens After Launch? — Figma 65:1054, the process card component
   ========================================================================== */
.aftercare { padding-top: 6.25rem; } /* 100 */

.aftercare__head { text-align: center; }

.aftercare__title { line-height: 4.125rem; } /* 66 */

.aftercare__lead { margin-top: 1.51563rem; } /* 24.25 */

.aftercare__grid { margin-top: 3.625rem; } /* 58 */

/* the icons here are complete 166 artworks, not the home page's ring + glyph */
.aftercare .process-card__icon img { width: 100%; height: 100%; }

/* ==========================================================================
   Frequently Asked Questions — Figma 67:1121
   ========================================================================== */
.faq { padding-top: 6.25rem; } /* 100 */

.faq__title {
  line-height: 4.125rem; /* 66 */
  text-align: center;
}

.faq__list {
  width: 83.164%; /* 1225 / 1473 */
  margin: 4.375rem auto 0; /* 70 */
  display: flex;
  flex-direction: column;
  gap: 2.1875rem; /* 35 */
}

/* Closed: white with a soft orange hairline. Open: the brand gradient with
   everything inside reversed to white. overflow clips the fill to the radius.

   A real border rather than an inset box-shadow, which was drawing the sides
   and bottom inconsistently. The top edge is deliberately open — the side
   strokes curve up through the corners and fade out, which is how the design
   draws it. Kept as a transparent colour rather than width 0 so the box
   geometry and the corner arcs stay exactly the same. */
.faq-item {
  border: max(0.0625rem, 1px) solid rgba(254, 44, 9, 0.35);
  border-top-color: transparent;
  border-radius: 1.25rem;
  background: var(--of-white);
  overflow: hidden;
}

.faq-item[open] {
  border-color: transparent;
  background: var(--of-gradient);
}

.faq-item[open] .faq-item__q { color: var(--of-white); }

.faq-item[open] .faq-item__a { color: rgba(255, 255, 255, 0.92); }

.faq-item[open] .faq-item__a::before { background: rgba(255, 255, 255, 0.35); }

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.6875rem;         /* 43 */
  padding: 2.125rem 2.857% 2.0625rem; /* 34 / 35 / 33 — was 76 each side */
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem; /* 20 */
  line-height: 1.6875rem;
  color: var(--of-ink);
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item[open] .faq-item__q { padding-bottom: 1rem; } /* 16 */

/* Figma 66:1061 — a 43 outlined round control holding a plus or a minus.
   NOTE: the Figma draws the OPEN panel with a plus and the closed ones with a
   minus, which is the reverse of the usual convention. Reproduced as drawn;
   to flip it, move the scaleX(1) onto the closed state instead. */
.faq-item__icon {
  position: relative;
  flex: none;
  width: 2.6875rem;
  height: 2.6875rem;
  border-radius: 50%;
  border: max(0.0625rem, 1px) solid var(--of-orange);
}

.faq-item[open] .faq-item__icon { border-color: var(--of-white); }

/* the bar across — present in both states */
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8125rem;
  height: max(0.09375rem, 1px);
  border-radius: 0.0625rem;
  background: var(--of-orange);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__icon::before,
.faq-item[open] .faq-item__icon::after { background: var(--of-white); }

/* the upright, which only the open panel shows — turning the bar into a plus */
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(1); }

/* answers 2-5 are not written in the Figma yet — collapse rather than open empty */
.faq-item__a:empty { display: none; }

.faq-item__a {
  padding: 0 2.857% 2.25rem; /* 35 / 36 — matches the question */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;      /* 16 */
  line-height: 1.5rem;  /* 24 */
  color: var(--of-muted);
}

/* Figma 66:1062 "Vector 17397" — the rule between question and answer */
.faq-item__a::before {
  content: '';
  display: block;
  height: max(0.0625rem, 1px);
  margin-bottom: 1.6875rem; /* 27 */
  background: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Ready to See How It Works for You? — Figma 37:286
   ========================================================================== */
.ctapanel { padding-top: 6.25rem; } /* 100 */

.ctapanel__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  width: 97.828%; /* 1441 / 1473 */
  min-height: 17.125rem; /* 274 */
  margin: 0 auto;
  padding: 4rem; /* 64 */
  border: 0.0625rem solid #000000;
  border-radius: 2.5rem;
  background: var(--of-dark-panel);
}

.ctapanel__info { flex: none; width: 64.737%; } /* 850 / 1313 content box */

.ctapanel__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 4.125rem; /* 66 */
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-white);
}

.ctapanel__lead {
  width: 98.824%; /* 840 / 850 */
  margin-top: 1.5rem; /* 90 - 66 */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-white);
}

.ctapanel__box .btn { flex: none; }

/* ==========================================================================
   How We Work Together — per-page spacing
   ========================================================================== */
.page-process .contact { margin-top: 6.25rem; } /* 100 */

/* ==========================================================================
   How We Work Together — responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .hero--process .hero__content { padding-top: 10.625rem; }
  .hero--process .hero__title,
  .hero--process .hero__lead { width: 100%; }
  .hero--process .hero__lead { min-height: 0; }
  .hero__art--process {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 3rem;
  }

  .delivery__grid { flex-wrap: wrap; gap: 2.5rem; }
  .delivery__list,
  .delivery__panel { flex: 1 1 26rem; width: auto; }
  .delivery__panel { aspect-ratio: 664 / 700; }

  .faq__list { width: 100%; }
  .faq-item__q { padding-left: 2rem; padding-right: 2rem; }
  .faq-item__a { padding-left: 2rem; padding-right: 2rem; }

  .ctapanel__box { flex-direction: column; align-items: flex-start; padding: 2.5rem; }

  /* .ctapanel__info is flex:none at 64.737% to hold the panel to 274 on desktop.
     Once the box stacks, that leaves a third of the width empty down the right
     and squeezes the heading into a narrow column. */
  .ctapanel__info { width: 100%; }

  .ctapanel__title,
  .ctapanel__lead { width: 100%; }
}

@media (max-width: 991px) {
  .delivery__list,
  .delivery__panel { flex: none; width: 100%; }
  .delivery__panel { aspect-ratio: 664 / 500; }
}

@media (max-width: 767px) {
  .delivery__title,
  .aftercare__title,
  .faq__title { line-height: 2.5rem; }

  /* the others are .section-title and pick up 2rem from style.css; this one is
     not, so it was left at the desktop 3.4rem against a 2.5rem line box */
  .ctapanel__title { font-size: 2rem; line-height: 2.5rem; }
  .faq-item__q { font-size: 1.0625rem; line-height: 1.5rem; }
  .faq-item__icon { width: 2.25rem; height: 2.25rem; }
}

/* ==========================================================================
   Let's Talk Automation — Figma 69:1803
   The whole page is the dark band: contact section 880 + footer 214 = 1094.
   ========================================================================== */
.page-contact .contact {
  margin-top: 0;
  padding-top: 12.625rem;    /* 202 */
  padding-bottom: 4.0625rem; /* 65 */
}

.page-contact .contact__intro { padding-top: 3.75rem; } /* 60 */

/* the 1-line title here renders at its true 63, so the Figma gap applies as-is */
.page-contact .contact__lead { margin-top: 2rem; } /* 32 */

.page-contact .contact,
.page-contact .site-footer {
  background-image: url('../images/global/contact-footer-bg.png');
  background-size: 100% 69.08rem;  /* 1105 — same rule, the Contact page band is taller */
}

@media (max-width: 1200px) {
  .page-contact .contact { padding-top: 9.5rem; }
  .page-contact .contact__intro { padding-top: 0; }
  .page-contact .contact { background-size: cover; background-position: center; }
  .page-contact .site-footer { background-image: none; }
}

/* ==========================================================================
   Contact form — validation feedback
   ========================================================================== */
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: rgba(255, 255, 255, 0.45);
}

.contact-form__field.is-invalid input,
.contact-form__field.is-invalid textarea {
  border-color: #f87171;
}

.contact-form__error {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: #f87171;
}

.contact-form__status {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: #4ade80;
}

.contact-form__status:empty { margin-top: 0; }

/* ==========================================================================
   The Story Behind Ops Flow — Figma 69:1270
   ========================================================================== */

/* Hero — one full-bleed artwork (89:54, 1601 x 929 at y-36) instead of the
   dark gradient plus a right-hand illustration. */
.hero--about .hero__bg {
  inset: auto 0 auto 0;
  top: -4.201%;     /* -36 / 857 */
  height: 108.401%; /* 929 / 857 */
}

.hero--about .hero__content { padding-top: 17.375rem; }  /* 278 */
.hero--about .hero__title {
  width: 27.36%;       /* 403 / 1473 */
  min-height: 7.875rem; /* 126 — the Figma placeholder box is two lines */
}
.hero--about .hero__actions { margin-top: 1.68rem; }     /* 430.97 - 404 */
.hero--about .hero__lead {
  width: 40.462%;      /* 596 / 1473 */
  min-height: 3.75rem; /* 60 */
  margin-top: 2.0625rem;
}
.hero--about .hero__rule { margin-top: 2.0625rem; }

/* Founder — the name is the heading here, so the block is laid out differently */
/* Figma "Group 1171277584" — the certification stamp on the Story banner. It
   is a sibling of .hero__bg so its percentages are of the full 1601-wide frame
   rather than the 1473 content column. The export carries its own glow, and the
   white octagon occupies 66.47%% of the PNG starting 29.66%% / 3.13%% in — so the
   numbers here are back-calculated from a landmark in the artwork: the badge
   sits about one badge-width right of the Burj tip and 0.6 below it, which puts
   the octagon at 238 wide, 1161 / 282 in the 1601 x 857 frame. */
.hero--about .hero__stamp {
  position: absolute;
  left: 65.86%;
  top: 31.48%;
  width: 22.39%;
  pointer-events: none;
}

/* Below 1200 the banner copy is centred and full-width, so the stamp has no
   column of its own. It sits centred in the band between the header and the
   heading — deliberate rather than jammed in a corner, and it matches the
   centred banner. translateX is -62.9% rather than -50% because the octagon is
   off-centre inside its own glow. Sized to clear both edges of that band. */
@media (max-width: 1200px) {
  .hero--about .hero__stamp {
    left: 50%;
    right: auto;
    top: 6.5rem;
    width: 5rem;
    transform: translateX(-62.9%);
  }

  /* The copy sits over the full-bleed artwork once the column goes
     full-width, so the banner is dimmed a little to hold the contrast.
     Above .hero__bg, below .hero__inner (z-index 2). */
  .hero--about::after,
  .hero--team::after,
  .hero--projects::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(8, 5, 14, 0.85);
    pointer-events: none;
  }
}

.page-about .founder { padding-top: 6.25rem; }               /* 957 - 857 */
.page-about .founder__body { padding-top: 6.8175rem; }       /* 1066.08 - 957 */
.page-about .founder__title { line-height: 4.125rem; }       /* 66, one line */
.page-about .founder__role { margin-top: 1.875rem; }         /* 30 */
.page-about .founder__desc { margin-top: 1.875rem; }         /* 30 */
.page-about .founder__tags { margin-top: 3.125rem; }         /* 50 */
.page-about .founder__rule { margin-top: 3.125rem; }         /* 50 */

/* Why We Exists — the Services page's card, with a taller body */
.why { padding-top: 6.25rem; } /* 1801 - 1701 */

.why__title { text-align: center; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;          /* 40 */
  margin-top: 3.0625rem; /* 1914 - 1864 */
}

.why .service-card { min-height: 16.25rem; } /* 260 */

/* Our Values — the How We Work delivery band.
   margin, not padding: the artwork band itself starts at 2274. */
.values { margin-top: 6.3125rem; } /* 101 */

.values__title { line-height: 4.125rem; } /* 66 */

.values .delivery__grid { margin-top: 3.125rem; } /* 2492 - 2442 */

/* The Our Values artwork is the whole 664 x 962 panel exported at 4x, not the
   385-wide strip How We Work Together uses, so it fills its frame. (It was
   77.108% for the older 512-wide export.) */
.values .delivery__panel img { width: 100%; }

.page-about .ctapanel { padding-top: 6.25rem; }
.page-about .contact { margin-top: 6.25rem; }

@media (max-width: 1200px) {
  .hero--about .hero__content { padding-top: 10.625rem; }
  .hero--about .hero__title,
  .hero--about .hero__lead { width: 100%; }
  /* both were sized to the Figma placeholder boxes; with real copy in and the
     column full-width, the title box left 94px of dead air under a one-line
     heading */
  .hero--about .hero__title,
  .hero--about .hero__lead { min-height: 0; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why .service-card { min-height: 0; }
}

@media (max-width: 767px) {
  .why__grid { grid-template-columns: 1fr; }
  .values__title { line-height: 2.5rem; }
}

/* ==========================================================================
   Meet The Team — Figma 80:576
   ========================================================================== */
.hero--team .hero__content { padding-top: 15.1855rem; } /* 242.97 */

.hero--team .hero__title {
  width: 43.72%;      /* 644 / 1473 */
  min-height: 9.25rem; /* 148 — the Figma placeholder box */
}

.hero--team .hero__actions { margin-top: 2.0625rem; } /* 33 */

.hero--team .hero__lead {
  width: 40.462%;        /* 596 / 1473 */
  min-height: 5.0625rem; /* 81 */
  margin-top: 2.0625rem;
}

.hero--team .hero__rule { margin-top: 1.5625rem; } /* 25 */

/* The team cluster used to be a separate .hero__art overlay. It is baked into
   the banner artwork now (team/hero-bg.png, 1601 x 857 at 2x), so the hero is
   one full-bleed image and there is no panel edge to line up. */

.page-team .founder { padding-top: 5.0625rem; } /* 938 - 857 */

/* Leadership cards — Figma 84:918, 478 x 645.86 */
.team { padding-top: 7.125rem; } /* 1796 - 1682 */

.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; /* 20 */
}

/* The cards are the dark panel, not white: photo on top, then a gradient name
   pill and centred copy reversed out of it. */
.team-card {
  min-height: 40.36625rem; /* 645.86 — all six cards match in the Figma */
  border-radius: 1.25rem;
  background: var(--of-dark-panel);
  overflow: hidden;
}

.team-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 478 / 360;
  object-fit: cover;
}

.team-card__name {
  display: block;
  width: fit-content;
  /* sits under the photo, fully visible — an earlier pass pulled it half over
     the image, which read as the pill being cut off */
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  /* a rounded rectangle, not a pill — the design keeps the corners tight */
  border-radius: 0.5rem;
  background: var(--of-gradient);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;     /* 24 */
  line-height: 2.125rem; /* 34 */
  color: var(--of-white);
  white-space: nowrap;
  text-transform: uppercase;
}

.team-card__body { padding: 2rem; } /* 32 */

.team-card__role {
  /* fit-content + auto margins so the gradient runs across the words rather
     than the full card width, and stays centred */
  width: fit-content;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;     /* 16 */
  line-height: 1.5rem; /* 24 */
  text-align: center;
  background: var(--of-gradient);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.team-card__bio {
  margin-top: 1rem; /* 16 */
  font-family: var(--font-body); /* Poppins */
  font-weight: 300;
  font-size: 1.125rem;   /* 18 */
  line-height: 1.6875rem; /* 27 */
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

.page-team .ctapanel { padding-top: 6.25rem; }
.page-team .contact { margin-top: 6.25rem; }

@media (max-width: 1200px) {
  .hero--team .hero__content { padding-top: 10.625rem; }
  .hero--team .hero__title,
  .hero--team .hero__lead { width: 100%; min-height: 0; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }

  /* The 645.86 min-height is the Figma card, where all six match. Once the
     grid narrows the bios are shorter than that and it left 111-136px of dead
     space under the last line. The grid still equalises each row. */
  .team-card { min-height: 0; }

  .team-card__body { padding: 2rem 2rem 1.75rem; }
}

@media (max-width: 767px) {
  .team__grid { grid-template-columns: 1fr; }
  .team-card__name { font-size: 1.25rem; line-height: 1.875rem; white-space: normal; text-align: center; }
}

/* ==========================================================================
   Real UAE Businesses — Figma 86:1455
   ========================================================================== */
.hero--projects .hero__content { padding-top: 15.1855rem; } /* 242.97 */

.hero--projects .hero__title {
  width: 43.72%;    /* 644 / 1473 */
  min-height: 10rem; /* 160 — the Figma placeholder box */
}

.hero--projects .hero__actions { margin-top: 1.3125rem; }

.hero--projects .hero__lead {
  width: 40.462%;
  min-height: 5.0625rem; /* 81 */
  margin-top: 2.0625rem;
}

.hero--projects .hero__rule { margin-top: 1.5625rem; }

/* Figma 94:57 — image 132, 987 x 747 at 614,110 */
/* The case-study artwork used to be a separate .hero__art overlay. It is baked
   into the banner now (projects/hero-bg.png, 1601 x 857 at 2x), same as Team. */

/* ---- Case study band — 1601 x 819, six of them stacked ------------------ */
/* Figma "Rectangle 240647741" — 1601 x 819 exported at 2x, a straight vertical
   wash from #ffe3cf to white with no horizontal variation. Reproduced as a CSS
   gradient rather than shipping the 3.7MB PNG for what is two colour stops. */
.case,
.case--alt {
  min-height: 51.1875rem;  /* 819 — every band is the same height in the Figma */
  padding: 6.82813rem 0;   /* 109.25 */
  background: linear-gradient(180deg, #ffe3cf 0%, #ffffff 100%);
}

.case__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.9375rem; /* 31 */
}

.case__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem; /* 6 / 14 */
  border-radius: 62.4375rem;
  background: var(--of-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;  /* 13 */
  line-height: 1.1875rem; /* 19 */
}

.case__badge span {
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.case__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;   /* 14 */
  line-height: 1.3125rem; /* 21 */
  color: var(--of-muted);
}

/* the sector reads in the brand gradient; the bullet and location stay muted */
.case__meta span:first-child {
  font-weight: 700;
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case__grid {
  display: flex;
  align-items: flex-start;
  gap: 5.431%; /* 80 / 1473 */
  margin-top: 2.9375rem; /* 1045.25 - 997.25 */
}

.case__main { flex: none; width: 50.034%; min-width: 0; } /* 737 / 1473 */
.case__side { flex: none; width: 44.535%; min-width: 0; } /* 656 / 1473 */

.case__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 4.125rem; /* 66 */
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-ink);
}

.case__overview {
  margin-top: 1rem; /* 148 - 132 */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.625rem; /* 26 */
  letter-spacing: 0.02813rem;
  color: var(--of-muted);
}

.case__subhead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem; /* 18 */
  line-height: 1.5rem; /* 24 */
  color: var(--of-ink);
}

/* "The Operational Hurdles" and "How We Solved It" carry the gradient;
   "Automation Infrastructure Stack" stays dark, as the design has it. */
.case__hurdles .case__subhead,
.case__solution .case__subhead {
  width: fit-content;
  background: var(--of-gradient);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case__hurdles { margin-top: 2.14063rem; } /* 1305.5 - 1271.25 */

.case__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 35 - 23 */
  width: 76.798%; /* 566 / 737 */
  margin-top: 1rem; /* 16 */
}

.case__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; /* 34 - 22 */
}

.case__list .compare-col__icon { margin-top: 0.03125rem; }

.case__list p {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;   /* 15 */
  line-height: 1.4375rem; /* 23 */
  color: var(--of-muted);
}

.case__stack { margin-top: 2.14063rem; } /* 1507.75 - 1473.5 */

.case__stack .case__subhead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;    /* 14 */
  line-height: 1.0625rem; /* 17 */
  color: var(--of-ink);
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem; /* 29 from the block top, 12 after the heading */
}

.case__tags li {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;       /* 30 */
  padding: 0.375rem 0.875rem; /* 6 / 14 */
  border-radius: 0.5rem;
  background: var(--of-tint);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;  /* 13 */
  line-height: 1.125rem; /* 18 */
  color: var(--of-orange);
}

/* ---- right column ------------------------------------------------------ */
.case__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.75rem; /* 44 */
  padding: 0 1rem;
  border-radius: 0.75rem;
  background: var(--of-gradient);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--of-white);
  letter-spacing: 0.03rem;
}

.case__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.case__live::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4ade80;
}

.case__stats {
  display: grid;
  width: 97.561%; /* 640 / 656 */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem; /* 20 */
  margin-top: 2rem; /* 76 - 44 */
}

.stat-card {
  min-height: 7rem; /* 112 */
  padding: 1.25rem; /* 20 */
  border-radius: 1.25rem;
  background: var(--of-white);
  box-shadow: inset 0 0 0 0.06688rem var(--of-border);
}

.stat-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;  /* 36 */
  line-height: 2.75rem; /* 44 */
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.stat-card__label {
  margin-top: 0.5rem; /* 72 - 64 */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem; /* 14 */
  line-height: 1.25rem; /* 20 */
  color: var(--of-muted);
}

.case__solution { margin-top: 2.21875rem; } /* 1400.75 - 1365.25 */

.case__solution p {
  margin-top: 0.75rem; /* 36 from the block top, 12 after the heading */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625rem; /* 26 */
  color: var(--of-muted);
}

.page-projects .ctapanel { padding-top: 6.25rem; }
.page-projects .contact { margin-top: 6.25rem; }

@media (max-width: 1200px) {
  .hero--projects .hero__content { padding-top: 10.625rem; }
  .hero--projects .hero__title,
  .hero--projects .hero__lead { width: 100%; min-height: 0; }
  .case { padding: 4rem 0; }
  .case__grid { flex-direction: column; gap: 2.5rem; }
  .case__main,
  .case__side { flex: none; width: 100%; }
  .case__list { width: 100%; }
}

@media (max-width: 767px) {
  .case__title { font-size: 2rem; line-height: 2.5rem; }
  .case__eyebrow { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .case__stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tablet corrections

   Reviewed on an iPad-width render. Everything here is 1200-and-down only —
   the desktop composition is untouched.
   ========================================================================== */
@media (max-width: 1200px) {
  /* ---- 1. The banner centres --------------------------------------------
     With the art moved below the copy the column is full-width, and a
     left-ragged block in a full-width column reads as unaligned. */
  .hero__content { text-align: center; }

  .hero__title,
  .hero__lead { margin-left: auto; margin-right: auto; }

  .hero__actions,
  .hero__logos { justify-content: center; }

  .hero__rule { margin-left: auto; margin-right: auto; }

  /* ---- 2. No section butts against the next ------------------------------
     These all carry padding-top but zero padding-bottom, so their last
     element sat directly on the following section's first. */
  .steps,
  .problem,
  .pricing,
  .fixband,
  .process,
  .founder,
  .services,
  .why,
  .faq,
  .team,
  .ctapanel { padding-bottom: 4.5rem; }

  /* ---- 3. "Pick where you start" ----------------------------------------
     158px of desktop head-room is far too much once the section is this
     narrow. */
  .pricing { padding-top: 4.5rem; }

  /* ---- 4. The CTA band's copy had no floor ------------------------------- */
  .fixband__content { padding: 3.5rem 2.5rem; }

  /* ---- 5. The founder quote drops below the photo -----------------------
     The media box was a fixed-ratio frame with the photo absolutely filling
     it, so the quote — the only child still in flow — stacked at the top and
     covered the picture. The frame now grows with its content. */
  .founder__media {
    aspect-ratio: auto;
    overflow: visible;
  }

  .founder__photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 680 / 744;
    border-radius: 1.25rem;
  }

  /* the badge anchored to a percentage of a frame that is now much taller, so
     it is pinned in absolute units against the top of the photo instead */
  .founder__badge { top: 3rem; }

  .founder__quote {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin-top: 1.5rem;
  }

  /* ---- 6. The contact/footer band stops being split ----------------------
     The one artwork is shared by .contact (top-anchored) and .site-footer
     (bottom-anchored) and only lines up while their heights still add to the
     949 background-size. From 1200 down they do not — the seam was out by
     117px at 1200 and 208px at 992, a visible step through the artwork. The
     991 breakpoint already handled this; it just started too late. */
  .contact {
    background-size: cover;
    background-position: center;
  }

  .site-footer { background-image: none; }
}



/* ==========================================================================
   Section rhythm — tablet

   Every band carries generous Figma head-room and the pass above added a
   bottom to each, which stopped them touching but left the gaps ranging from
   104 to 275px depending on the page. One consistent 72 + 48 = 120px instead.
   ========================================================================== */
@media (max-width: 1200px) {
  /* body[class] :is(...) rather than a bare list: several pages set their own
     padding on these sections with a two-class selector (.page-team .founder
     and friends), which out-ranks a single class no matter where it sits in
     the file. This matches that weight and wins on order. */
  body[class] :is(.steps, .problem, .pricing, .fixband, .process, .showcase,
                  .founder, .services, .delivery, .faq, .why, .team, .case,
                  .ctapanel, .contact) {
    padding-top: 4.5rem;
    padding-bottom: 3rem;
  }

  body[class] :is(.showcase, .contact, .delivery) { margin-top: 0; }

  /* the hero keeps its own 80px floor, which would make the first gap 152 */
  body[class] .hero { padding-bottom: 3rem; }

  /* ---- 7. The corner stamps stop landing on the list --------------------
     They are sized as a share of the column (18.73%% and 31.52%% of its width),
     so they grow with it — no fixed reserve holds. Once .problem__columns
     stacks the last list item reaches them, from 1200 all the way down, so
     they are pinned to a real size in the corner with room kept below. */
  .compare-col { padding-bottom: 6rem; }

  .compare-col__stamp {
    left: auto;
    right: 1.5rem;
    bottom: 1.25rem;
    width: 3.75rem;
  }

  .compare-col__stamp--mark { width: 6.25rem; }
}

/* ==========================================================================
   Mobile corrections

   Reviewed at 375 wide on the home page and carried across every page, since
   the components are shared. All of it is 767-and-down, so tablet and desktop
   keep what they have. Rules are grouped by the review point they answer.
   ========================================================================== */
@media (max-width: 767px) {
  /* ---- 1 + 12. Both logo strips fit on one line -------------------------
     408px of hero marks (446 for the full-colour set) never fit the 335 of
     usable width, so they broke to two rows. Each mark is scaled by the same
     factor rather than to a common height, which keeps the relative sizes the
     Figma gives them. */
  .hero__logos,
  .founder__logos {
    flex-wrap: nowrap;
    column-gap: 0.75rem;
  }

  /* below 375 even the reduced set is too wide, so let the marks shrink
     together rather than break the line — contain keeps each aspect */
  .hero__logos img,
  .founder__logos img {
    flex: 0 1 auto;
    min-width: 0;
    object-fit: contain;
  }

  .hero__logos .logo-n8n    { width: 5.157rem;  height: 2.0648rem; }
  .hero__logos .logo-zapier { width: 5.1087rem; height: 2.3373rem; }
  .hero__logos .logo-make   { width: 7.5857rem; height: 1.5314rem; }

  .founder__logos .logo-n8n    { width: 6.2633rem; height: 1.8908rem; }
  .founder__logos .logo-zapier { width: 4.6781rem; height: 2.1403rem; }
  .founder__logos .logo-make   { width: 6.9463rem; height: 1.4023rem; }

  /* ---- 2. The banner art sits last, under the whole block ---------------
     Default flow already puts the art after .hero__content, so there is
     nothing to reorder — just less air around it. */
  body[class] .hero { padding-bottom: 2.5rem; }

  .hero__visual,
  .hero__art--process { margin-top: 2rem; }

  /* ---- 5 + 9. Sections sit closer together, evenly ----------------------
     Adjacent sections were 104-275px apart on a 375 screen. One consistent
     48 + 40 = 88px gap instead. */
  body[class] :is(.steps, .problem, .pricing, .fixband, .process, .showcase,
                  .founder, .services, .delivery, .faq, .why, .team, .case,
                  .ctapanel, .contact) {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }

  body[class] :is(.showcase, .contact, .delivery) { margin-top: 0; }

  /* ---- 3. "What automation looks like" on one line ---------------------- */
  .steps__title {
    /* fluid so it still holds one line at 320 */
    font-size: clamp(1.25rem, 7.2vw, 1.6875rem);
    line-height: 1.35;
  }

  /* ---- 4. Step cards centre ---------------------------------------------
     Not extended to .service-card: that one leads with a head row holding the
     icon left and the number right, which centring would pull apart. */
  .step-card {
    align-items: center;
    text-align: center;
  }

  /* ---- 6. The comparison heading centres -------------------------------- */
  .problem__title,
  .problem__lead { text-align: center; }

  /* ---- 8. Price cards stop being padded out to a desktop height --------- */
  .price-card {
    min-height: 0;
    padding: 1.75rem 1.5rem 1.5rem;
  }

  /* ---- 10. The CTA band's copy centres in a tighter gutter -------------- */
  .fixband__content {
    padding: 2.5rem 1.5rem;
    text-align: center;
  }

  .fixband__actions { justify-content: center; }

  /* ---- 11. The step number stops colliding with the icon ----------------
     Applies to How We Work Together too, which reuses the card. Not needed on
     .service-card, whose icon and number sit in a flex row rather than
     overlapping absolutes. */
  .process-card { min-height: 0; }

  .process-card__icon,
  .process-card__icon-stack { width: 7rem; height: 7rem; }

  .process-card__number {
    top: 2.5rem;
    font-size: 5.5rem;
  }
}

/* Narrowest phones: "What automation looks like" needs one more step down to
   hold a single line inside a 265px column. */
@media (max-width: 359px) {
  .steps__title { font-size: 1.125rem; }
}

/* ==========================================================================
   The Story Behind Ops Flow — mobile corrections
   ========================================================================== */
@media (max-width: 991px) {
  /* ---- 6. The values artwork shows whole ---------------------------------
     .delivery__panel is squared off to 664/500 for the How We Work Together
     timeline, which crops this taller 664 x 962 board to a letterbox. Give it
     the artwork's own ratio so nothing is cut. */
  .values .delivery__panel { aspect-ratio: 664 / 962; }
}

@media (max-width: 767px) {
  /* ---- 1. The banner heading holds one line -----------------------------
     "The Story Behind Ops Flow" needs ~400px at the 34px mobile size against
     335 of usable width, so it broke into three. Fluid down to the width. */
  .hero--about .hero__title {
    font-size: clamp(1.1rem, 7vw, 2.125rem);
    line-height: 1.3;
  }

  /* ---- 4. Less air between the founder photo and the copy ----------------
     body[class] to out-rank .page-about .founder__body, which pushes the copy
     down 109px to line up with the photo on desktop. */
  .founder__grid { gap: 0.75rem; }

  body[class] .founder__body { padding-top: 1.25rem; }

  /* ---- 5. The CTA panel's gutters come in -------------------------------- */
  .ctapanel__box { padding: 2rem 1.5rem; }
}

/* the honeypot must be unreachable, not just invisible */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* the honeypot must be unreachable, not just invisible */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The Contact page opens straight into .contact instead of a hero, so that
   section has to clear the fixed header itself. The shared section rhythm
   above out-ranks its own padding and left the heading 25px underneath the
   header pill — this puts the clearance back. */
@media (max-width: 1200px) {
  body[class].page-contact .contact { padding-top: 7.5rem; }
}