/* Mads shell overrides — kept outside assets/css on purpose, because
   assets/style.css gets restored from the pristine Landin copy on reset. */

/* ---- pinned header ------------------------------------------------- */
.nav {
  transform: none;
}
.nav.is-hidden {
  transform: translateY(-101%);
}
.nav.is-visible {
  transform: none;
}

/* ---- section glows: clip horizontally only, never cut the fade ---- */
.results,
.features,
.benefits,
.portfolio,
.launch,
.testimonials {
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- © mark after a headline --------------------------------------
   31px at an 86px heading, nudged up like a proper superscript mark.  */
.copy {
  font-size: max(16px, 0.364em);
  vertical-align: 0.95em;
  letter-spacing: 0;
  line-height: 0;
}

/* ---- responsive alignment fixes ---------------------------------- */

/* footer: the columns' min-content was forcing a 358px track on phones */
@media (max-width: 1180px) {
  .footer__grid > * {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .footer__tagline br {
    display: none;
  }

  .subscribe {
    width: 100%;
  }

  .subscribe input {
    width: 100%;
    min-width: 0;
  }
}

/* testimonial logo marquee: keep the 53px bleed only while the gutters are wide */
@media (max-width: 1024px) {
  .testimonials .logos__strip {
    margin-left: 0;
    width: 100%;
  }
}

/* case-study figures: fluid tracks — identical to the fixed 588/1200px at 1440 */
.case-figure {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.case-figure--single {
  grid-template-columns: minmax(0, 1fr);
}

/* tablet band (iPad portrait ≈ 768–834): card grids were collapsing to one
   very wide column while desktop-adjacent widths already used two */
@media (min-width: 700px) and (max-width: 899px) {
  .features__grid,
  .bento__row,
  .t-grid,
  .team__grid,
  .tools__grid,
  .awards__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* footer: four columns on small laptops, two on tablets */
/* footer column internals must never outgrow their track */
.footer__grid > * {
  min-width: 0;
}

.footer__logo {
  display: inline-block;
  line-height: 0;
}

.footer__tagline {
  margin-top: 26px;
}

.footer__sales {
  display: flex;
  width: 100%;
  max-width: 244px;
  justify-content: center;
}

.footer__thumb {
  width: 100%;
  max-width: 244px;
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .footer__grid {
    grid-template-columns: 1.55fr 0.8fr 0.8fr 1.05fr;
    column-gap: 32px;
    row-gap: 40px;
  }

  .subscribe {
    max-width: 100%;
  }

  .subscribe .btn {
    padding: 0 14px;
    font-size: 14px;
  }

  .footer__sales {
    font-size: 13px;
    padding: 5px 10px;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
}

/* ---- brand logo (uploaded mark, 2078×620) ------------------------- */
.nav__logo img {
  width: 62px;
  height: auto;
}

.footer__logo img {
  width: 54px;
  height: auto;
}

@media (max-width: 768px) {
  .nav__logo img {
    width: 54px;
  }

  .footer__logo img {
    width: 50px;
  }
}

/* the client-logo marquee is gone, so the hero no longer needs a fixed
   height — let it hug its content instead of leaving dead space */
.hero {
  height: auto;
  padding-bottom: 72px;
}

/* keep the showreel card anchored to the hero's bottom-right corner now that
   the hero is content-sized */
.hero__video {
  top: auto;
  bottom: 18px;
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 56px;
  }
}

/* the testimonial logo rail was removed — give the CTA below the heading
   a little more air */
.testimonials__btn {
  margin-top: 40px;
}

/* phones: let body copy wrap naturally instead of keeping the desktop
   line breaks (they left stray "—" lines) */
@media (max-width: 768px) {
  .hero__desc br,
  .body br,
  .phead .body br,
  .sec-head .body br {
    display: none;
  }
}

/* footer subscribe field: keep the button inside the pill (its outer glow
   was bleeding over the field's border) and never clip the placeholder */
/* bullet-proof field: grid + a minmax(0,1fr) track means the <input>'s
   intrinsic width can never push the button out of the pill (that intrinsic
   width is what made the button poke past the border in Safari/Firefox) */
.subscribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 330px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 6px;
  border-radius: 12px;
}

.subscribe input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  font-size: 15px;
}

.subscribe .btn {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: none;
  border-radius: 7px;
}

@media (max-width: 700px) {
  .subscribe .btn {
    padding: 0 12px;
    font-size: 13px;
  }

  .subscribe input {
    padding: 0 10px;
  }
}

/* decorative diagonal "detail" lines around section heads — removed on request.
   Kept as a kill switch so regenerated pages can never bring them back. */
.detail-vector,
.detail {
  display: none !important;
}

/* ---- "How We Work" photo: pin it, let the stage cards scroll past ----
   Landin ships `body { overflow-x: hidden }`. `hidden` turns <body> into a
   scroll container, which silently disables `position: sticky` on every
   descendant — that is why the photo scrolled away with the page.
   `clip` hides the exact same overflow without creating a container. */
body {
  overflow-x: clip;
}

.work__grid {
  align-items: start;
}

.work__media {
  position: sticky;
  top: 120px;
  align-self: start;
}

/* no pinning once the layout stacks (the photo moves above the cards) */
@media (max-width: 1024px) {
  .work__media {
    position: relative;
    top: 0;
  }
}

/* ---- "Our Services" photo: same pinning as the How-We-Work image ----
   `.services__left` is a grid cell that only grew to the photo's height
   (536px) while the service cards column is ~1800px tall, so the sticky
   child had nothing to travel in. Stretching the cell to the full row
   height gives the photo a track to stay pinned in. */
.services__left {
  align-self: stretch;
}

.services__media {
  position: sticky;
  top: 120px;
  align-self: start;
}

/* stacked layouts: let the photo scroll normally */
@media (max-width: 1024px) {
  .services__left {
    align-self: auto;
  }

  .services__media {
    position: relative;
    top: 0;
  }
}

/* ---- service cards: tighten the vertical rhythm ----
   The stock 93px gap plus a 429px min-height (which left ~76px of empty
   space under the last list item) made the column feel loose and pushed
   the cards far apart. Cards now hug their content. */
.services__cards {
  gap: 32px;
}

.service {
  min-height: 0;
}

@media (max-width: 768px) {
  .services__cards {
    gap: 24px;
  }
}

/* ---- footer: balanced columns + a consistent vertical rhythm ----
   The stock grid was four uneven tracks (336 / 224 / 224 / 280) with no
   gaps, so the column gutters looked random, and 219px of top padding plus
   an 85px gap above the legal bar made the whole block feel hollow. */
.footer {
  padding-top: 140px;
}

.footer__grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 1.05fr);
  column-gap: 48px;
  row-gap: 40px;
  align-items: start;
}

.footer__tagline {
  margin-top: 24px;
  max-width: 300px;
}

.subscribe {
  margin-top: 24px;
  max-width: 320px;
  padding: 7px;
  border-radius: 14px;
}

.subscribe input {
  height: 36px;
}

.subscribe .btn {
  height: 36px;
  border-radius: 8px;
}

.footer h4 {
  font-size: 17px;
  line-height: 24px;
}

.footer__links {
  margin-top: 18px;
  gap: 12px;
}

.footer__sales {
  display: flex;
  width: 100%;
  max-width: 244px;
  justify-content: center;
  font-size: 13px;
}

.footer__thumb {
  margin-top: 14px;
  max-width: 244px;
}

.footer__bottom {
  margin-top: 56px;
  padding-top: 22px;
}

.footer--tight {
  padding-top: 88px;
}

.footer--tight .footer__bottom {
  margin-top: 56px;
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1fr);
    column-gap: 32px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding-top: 88px;
  }

  .footer__grid {
    column-gap: 32px;
    row-gap: 32px;
  }

  .footer__bottom {
    margin-top: 40px;
  }
}

/* footer polish: equal gutters look, tighter top air, balanced field inset */
.footer {
  padding-top: 110px;
}

.subscribe {
  padding: 8px;
  max-width: 340px;
  border-radius: 14px;
}

.subscribe input {
  padding: 0 16px;
  font-size: 15px;
}

.subscribe .btn {
  padding: 0 18px;
  height: 36px;
  border-radius: 8px;
}

.footer--tight {
  padding-top: 76px;
}

@media (max-width: 768px) {
  .footer {
    padding-top: 72px;
  }
}

/* ---- footer: collapse to one column on phones ----
   The 4-track layout was still active at 360-430px, squeezing each column
   to 40-100px, which is what pushed the subscribe button out of its pill
   and stacked "Social" under "Menu" in a ragged 4x1 grid. */
@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 36px;
  }

  .footer__tagline {
    max-width: none;
  }

  .subscribe {
    max-width: 100%;
  }

  .footer__sales,
  .footer__thumb {
    max-width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* the "Call us" pill must never wrap onto three lines in tight columns */
.footer__sales {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  justify-content: center;
}

.footer__sales b {
  white-space: nowrap;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .footer__sales {
    font-size: 12px;
    padding: 5px 8px;
    gap: 4px;
  }
}

/* ---- footer: push the link columns further in (towards Social) ----
   The brand block only needs ~330px, so the Menu/Social/Call columns were
   sitting too far left and left a big hole under the subscribe field.
   A wider brand track slides all three columns inward as one group. */
@media (min-width: 1025px) {
  .footer__grid {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 0.72fr) minmax(0, 0.72fr) minmax(0, 1.08fr);
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.05fr);
    column-gap: 32px;
  }
}

/* ---- "Tech & Tools" cards: give the copy room to breathe ----
   `.tool-card` was locked to height:275px while its description sat 45px
   below the subtitle, so anywhere the text wrapped to three lines
   (1100-1300px) it landed 3px off the card's bottom edge. Cards now size
   to their content and keep a real inset at the bottom. */
.tool-card {
  height: auto;
  min-height: 275px;
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
}

.tool-card__desc {
  margin-top: auto;
  padding-top: 28px;
}

@media (max-width: 1180px) {
  .tool-card {
    min-height: 0;
  }

  .tool-card__desc {
    padding-top: 22px;
  }
}

/* ---- FAQ: pin the heading while the questions scroll past ----
   Same behaviour as the How-We-Work and Our-Services photos. The left
   column is ~250px against a ~640px list (taller still when an answer is
   open), so it has real travel to stay pinned in. Applies to every page
   that carries the FAQ block. */
@media (min-width: 1025px) {
  .faq__left {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

/* stacked layout: normal flow */
@media (max-width: 1024px) {
  .faq__left {
    position: relative;
    top: 0;
  }
}

/* ---- CTA card must never touch the footer ----
   Landin gives `.cta` zero bottom padding, and the footer's top border sat
   24px *inside* the card. Every page with a CTA now gets a real gap. */
.cta {
  padding-bottom: 96px;
}

@media (max-width: 1024px) {
  .cta {
    padding-bottom: 64px;
  }
}

@media (max-width: 768px) {
  .cta {
    padding-bottom: 48px;
  }
}

/* ---- footer: blue glow must fade IN, not start on a hard edge ----
   The stock footer paints `rgba(0,85,254,.2)` at row 0 of the section, so
   the boundary read as a 1px seam with a sudden 22-luminance step (plus a
   1px top border on top of it). The glow now ramps up from transparent and
   the hairline is gone, so black flows into the footer invisibly. */
.footer {
  border-top: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 85, 254, 0) 0%,
      rgba(0, 85, 254, 0.07) 10%,
      rgba(0, 85, 254, 0.15) 24%,
      rgba(0, 85, 254, 0.02) 48%,
      rgba(0, 0, 0, 0) 62%
    ),
    #000;
}

/* ---- FAQ glow: the hard cut across the section join ----
   `.faq__glow` sits at top:-231px (i.e. inside the section above) and
   carried `clip-path: inset(0 0 147px 0)`, which sliced the ellipse at its
   brightest point and drew a razor-straight line across the page. The
   glow now fades out through its own gradient instead of being clipped. */
.faq__glow {
  clip-path: none;
  top: -210px;
  height: 360px;
  background: radial-gradient(
    ellipse 52% 44% at 50% 46%,
    rgba(0, 85, 254, 0.34) 0%,
    rgba(0, 85, 254, 0.2) 42%,
    rgba(0, 85, 254, 0.07) 70%,
    rgba(0, 85, 254, 0) 100%
  );
  filter: blur(18px);
}

/* ---- contact form selects ----
   The native dropdown panel rendered in the browser's LIGHT theme, so each
   option came out as grey text on a grey panel and was effectively
   unreadable. `color-scheme: dark` makes the OS panel dark, and the option
   colours are pinned explicitly for browsers that ignore the scheme. */
.field select {
  color-scheme: dark;
  color: #fff;
  cursor: pointer;
}

/* nothing chosen yet → keep the muted placeholder tone */
.field select:required:invalid {
  color: rgba(255, 255, 255, 0.5);
}

/* the popup list itself */
.field select option {
  background-color: #0e0e0e;
  color: #f2f2f2;
}

.field select option:disabled,
.field select option[value=""] {
  background-color: #0a0a0a;
  color: rgba(255, 255, 255, 0.45);
}

.field select option:checked {
  background-color: #0055fe;
  color: #fff;
}

/* keyboard focus ring matches the text inputs */
.field select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 85, 254, 0.7);
}

/* Firefox paints the dropdown panel from the element's own background */
@supports (-moz-appearance: none) {
  .field select,
  .field select option {
    background-color: #0e0e0e;
  }
}

/* ============================================================
   v26–v27 — ACTIVE PAGE HIGHLIGHT IN NAV
   ============================================================ */

/* desktop nav: tinted blue pill (no underline) */
.nav__links a.is-active {
  position: relative;
  color: #fff;
  background: rgba(0, 85, 254, 0.20);
  box-shadow: inset 0 0 0 1px rgba(0, 85, 254, 0.5);
}

.nav__links a.is-active:hover {
  color: #fff;
  background: rgba(0, 85, 254, 0.26);
}

/* underline removed (v27) — the pill alone carries the highlight */

/* mobile menu: blue dot beside the current page */
.mobile-menu a {
  position: relative;
}

/* no underline of any colour — the dot alone marks the current page (v30) */
.mobile-menu a.is-active {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.mobile-menu a.is-active::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0055fe;
  box-shadow: 0 0 12px rgba(0, 85, 254, 0.9);
}

/* footer "Menu" list: same idea, quieter */
.footer__links a.is-active {
  color: #fff;
  position: relative;
  padding-left: 13px;
}

.footer__links a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0055fe;
  box-shadow: 0 0 8px rgba(0, 85, 254, 0.9);
  transform: translateY(-50%);
}

/* ============================================================
   v28 — SITE-WIDE AUDIT FIXES
   ============================================================ */

/* 1) "How We Work" stage cards were pinned to the original template's
      353px min-height. Mads copy is shorter, so cards 1 and 2 carried
      84px / 58px of dead space at the bottom. Let content define height. */
.stage {
  min-height: 0;
}

/* 2) Footer "you are here" marker was a ::before dot that pushed the
      label 13px right, so the active link sat out of line with its
      siblings. Move the marker after the text — no layout shift. */
.footer__links a.is-active {
  padding-left: 0;
}

.footer__links a.is-active::before {
  display: none;
}

/* v31: marker moved to ::before (absolutely positioned) so it cannot shift the label */
.footer__links a.is-active::after {
  content: none;
}

/* 3) Keyboard focus was invisible everywhere except the contact form. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav__burger:focus-visible,
.tq-opt:focus-visible,
.tq-radio:focus-visible,
.tq-sbtn:focus-visible {
  outline: 2px solid #0055fe;
  outline-offset: 3px;
}

/* 4) Hero seams — .hero/.page-hero paint their glow in an 810px box but the
      section is shorter at every width (510–648px), so the glow used to be
      sliced off on a hard horizontal line. Fade it out in pixels instead, and
      give the two short page-heroes (services, 404) their own compact ramp. */
.hero__shade {
  background:
    radial-gradient(ellipse 48% 46% at 12% -6%, rgba(0, 85, 254, 0.24), transparent 62%),
    radial-gradient(ellipse 44% 44% at 97% -4%, rgba(0, 85, 254, 0.42), transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.34) 300px, #000 470px, #000 100%);
}

.hero__bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0px, #000 300px, rgba(0, 0, 0, 0) 560px);
  mask-image: linear-gradient(180deg, #000 0px, #000 300px, rgba(0, 0, 0, 0) 560px);
}

.page-hero--short .page-hero__shade {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 250px,
    rgba(0, 0, 0, 0.55) 390px,
    #000 470px,
    #000 100%
  );
}

.page-hero--short .page-hero__bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0px, #000 250px, rgba(0, 0, 0, 0) 500px);
  mask-image: linear-gradient(180deg, #000 0px, #000 250px, rgba(0, 0, 0, 0) 500px);
}

/* 5) Header band — the 1px border-bottom drew a hard line across every page,
      and the flat backdrop-filter left a visible step where the nav ended.
      Replace both with a soft, masked fade so the header melts into the page. */
.nav {
  border-bottom: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.58) 62%, rgba(0, 0, 0, 0.5) 84%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0, 0, 0, 0) 100%);
}

/* header legibility over bright media — text gets its own shadow instead of a heavier band */
.nav__links a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.75);
}

.nav__logo img {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
}

.nav__sep {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

/* 6) Footer "you are here" dot must never push the label out of line.
      (The active link was reading 13px further right than its siblings.) */
.footer__links a {
  position: relative;
}

.footer__links a.is-active {
  padding-left: 0;
}

.footer__links a.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  display: block;
  width: 5px;
  height: 5px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0055fe;
  box-shadow: 0 0 8px rgba(0, 85, 254, 0.9);
}

/* ============================================================
   v32 — TIGHTER VERTICAL RHYTHM
   The stock template stacked 200–290px of padding between sections, which
   read as dead air (hero → about alone was 293px). Every section gap is
   halved here; 40px is the floor so nothing collides.
   ============================================================ */
.about        { padding: 110px 0 50px; }
.results      { padding: 50px 0 118px; }
.work         { padding: 20px 0 50px; }
.features     { padding: 50px 0 50px; }
.benefits     { padding: 50px 0 50px; }
.portfolio    { padding: 50px 0 118px; }
.services     { padding: 20px 0 17px; }
.launch       { padding: 50px 0 50px; }
.pricing      { padding: 50px 0 50px; }
.testimonials { padding: 50px 0 98px; }
.faq          { padding: 20px 0 0; }
.cta          { padding: 60px 0 48px; }

.hero         { padding-bottom: 36px; }

.team         { padding: 50px 0 118px; }
.tools        { padding: 50px 0 98px; }
.about-block  { padding-top: 110px; }
.more-cases   { padding-top: 83px; }
.case-body    { padding-top: 37px; }
.legal__inner { padding-bottom: 80px; }
.page-hero--pad { padding-bottom: 113px; }
.pb-lg        { padding-bottom: 113px; }

.footer          { padding-top: 56px; }
.footer--tight   { padding-top: 40px; }
.footer__bottom  { margin-top: 32px; }

@media (max-width: 1024px) {
  .about, .features, .benefits, .launch, .pricing, .testimonials { padding-top: 40px; padding-bottom: 40px; }
  .results, .portfolio, .team { padding-top: 40px; padding-bottom: 60px; }
  .work, .services { padding-top: 20px; padding-bottom: 40px; }
  .about-block { padding-top: 60px; }
  .more-cases  { padding-top: 50px; }
  .page-hero--pad, .pb-lg { padding-bottom: 60px; }
  .footer      { padding-top: 56px; }
  .footer--tight { padding-top: 40px; }
}

@media (max-width: 768px) {
  .about, .features, .benefits, .launch, .pricing, .testimonials { padding-top: 40px; padding-bottom: 40px; }
  .results, .portfolio, .team { padding-top: 40px; padding-bottom: 48px; }
  .work, .services { padding-top: 20px; padding-bottom: 32px; }
  .cta { padding-top: 40px; padding-bottom: 32px; }
  .about-block { padding-top: 48px; }
  .more-cases  { padding-top: 40px; }
  .page-hero--pad, .pb-lg { padding-bottom: 48px; }
  .footer      { padding-top: 48px; }
  .footer--tight { padding-top: 36px; }
  .footer__bottom { margin-top: 24px; }
}

/* v33 — the "section height parity" block pinned every desktop section to a
   fixed min-height (portfolio 2773px, testimonials 1583px …). Those numbers were
   bigger than the content, so trimming padding did nothing and the extra room
   showed up as dead air above the next section. Let the content decide. */
@media (min-width: 1025px) {
  .about,
  .results,
  .work,
  .features,
  .benefits,
  .portfolio,
  .services,
  .launch,
  .pricing,
  .testimonials,
  .cta {
    min-height: 0;
  }
}

/* v34 — last four seams that were still ~150-180px after the v32 halving. */
.team { padding-bottom: 80px; }
.team { padding-top: 40px; }
.tools { padding-top: 40px; }
.tool { padding-bottom: 64px; }
.cta { padding-top: 50px; }
@media (max-width: 1024px) {
  .team { padding-bottom: 60px; padding-top: 40px; }
  .tools { padding-top: 32px; }
  .tool { padding-bottom: 48px; }
}
@media (max-width: 768px) {
  .team { padding-bottom: 48px; padding-top: 40px; }
  .tools { padding-top: 32px; }
  .tool { padding-bottom: 40px; }
}

/* v36 — about page: only the *second* about block carries bottom padding;
   halve it so the run into the team grid matches the rest of the site. */
.about-block + .about-block { padding-bottom: 50px; }
@media (max-width: 1024px) { .about-block + .about-block { padding-bottom: 40px; } }
@media (max-width: 768px) { .about-block + .about-block { padding-bottom: 32px; } }

/* v37 — ONE VERTICAL RHYTHM.
   Every content section now uses the same 50px top / 50px bottom, so the gap
   between any two sections is the same 100px everywhere (was 67–173px and
   different on every seam). Heroes keep their own top padding (they have to
   clear the fixed nav) but share the 50px bottom. */
.section,
.results,
.work,
.features,
.benefits,
.portfolio,
.services,
.launch,
.pricing,
.testimonials,
.team,
.tools,
.about-block,
.faq,
.cta,
.tool,
.case-body,
.more-cases,
.legal__inner {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* second about-block: cancel the v36 asymmetry so both blocks match */
.about-block.about-block {
  padding-top: 50px;
  padding-bottom: 50px;
}

.hero,
.page-hero,
.tool-hero {
  padding-bottom: 50px;
}

.footer {
  padding-top: 50px;
}
.footer--tight {
  padding-top: 50px;
}

@media (max-width: 1024px) {
  .section, .results, .work, .features, .benefits, .portfolio, .services,
  .launch, .pricing, .testimonials, .team, .tools, .about-block, .faq, .cta,
  .tool, .case-body, .more-cases, .legal__inner,
  .about-block.about-block {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero, .page-hero, .tool-hero { padding-bottom: 40px; }
  .footer, .footer--tight { padding-top: 40px; }
}

@media (max-width: 768px) {
  .section, .results, .work, .features, .benefits, .portfolio, .services,
  .launch, .pricing, .testimonials, .team, .tools, .about-block, .faq, .cta,
  .tool, .case-body, .more-cases, .legal__inner,
  .about-block.about-block {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .hero, .page-hero, .tool-hero { padding-bottom: 32px; }
  .footer, .footer--tight { padding-top: 32px; }
}

/* v38 — hero drops down.
   The fixed nav is 91px tall and the hero/page-hero only carried 160px of top
   padding, so the first line of copy sat 69px under the header and read as
   "squeezed to the top". +60px on desktop (and a matching bump at the two
   breakpoints) gives the opening screen proper breathing room again. */
.hero,
.page-hero {
  padding-top: 220px;
}

@media (max-width: 1024px) {
  .hero,
  .page-hero {
    padding-top: 210px;
  }
}

@media (max-width: 768px) {
  .hero,
  .page-hero {
    padding-top: 190px;
  }
}