/* =============================================
   SECTION INTRO SPACING — one rhythm for every page
   Every "mini heading pill → main heading → paragraph" group on the
   site (centred page intros, in-column intros, form-side intros) gets
   its vertical gaps from the four tokens below, matched to About Us'
   "Three Generations Strong" intro.

   The gaps are VISUAL gaps (pill border → heading cap-top, heading
   baseline → paragraph cap-top, paragraph baseline → next block), not
   box gaps. Headings and paragraphs are trimmed to their cap-height
   and baseline (the "capsize" technique below), so a margin here is
   exactly the space the eye sees — regardless of each page's own
   font-size or line-height.

   Pills covered: .biz-pill, .section-intro-pill, .cr-pill, .tm-pill,
   .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill,
   .diff-right .pill, .awards-header .badge, .csr-tagline,
   .biz-section-tag. A heading is either an <h2> or a
   .heading-with-link row (<h2> + Website button).

   Loaded LAST in header.php so it wins over the per-page files.
   ============================================= */

:root {
  --sp-hero-to-pill: 75px;     /* hero banner bottom → pill top */
  --sp-pill-to-heading: 35px;  /* pill bottom → heading cap-top */
  --sp-heading-to-text: 35px;  /* heading baseline → paragraph cap-top */
  --sp-text-to-next: 75px;     /* last line baseline → next block */

  /* Poppins vertical metrics, in em (identical across 300–800). */
  --font-ascent: 1.05;
  --font-descent: 0.35;
  --font-cap: 0.703125;
}

@media (max-width: 768px) {
  :root {
    --sp-hero-to-pill: 50px;
    --sp-pill-to-heading: 25px;
    --sp-heading-to-text: 25px;
    --sp-text-to-next: 50px;
  }
}

/* ===== 1. Pill (mini heading) =====
   vertical-align: top so the pill's line box ends exactly at the
   pill's own border — on baseline alignment the parent's text strut
   can add a few px under it, differently on every page. */
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-intro .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-intro-text .csr-tagline) {
  vertical-align: top;
  margin-bottom: 0;
}
.biz-section-tag {
  margin-bottom: 0;
}

/* ===== 2. Main heading ===== */
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + :is(h2, .heading-with-link),
.biz-section-title {
  margin-top: var(--sp-pill-to-heading);
  margin-bottom: var(--sp-heading-to-text);
}
/* Same line spacing between a two-line heading's lines everywhere
   (About's 44px / 55px = 1.25). */
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + h2,
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + .heading-with-link > h2,
.biz-section-title {
  --lh: 1.25;
  line-height: var(--lh);
}
/* In a .heading-with-link row the 26px Website button is taller than
   a small trimmed heading (phone sizes), which would push the row
   open and add space above and below the text. -5px keeps it inside
   the heading's height; the +5px row-gap gives that back when the row
   wraps and the button drops onto its own line. */
:is(.biz-pill, .csr-tagline) + .heading-with-link {
  row-gap: 15px;
}
:is(.biz-pill, .csr-tagline) + .heading-with-link > .website-btn {
  margin-block: -5px;
}

/* Side images in two-column intros are pushed down to line up with the
   heading beside them: pill height (31px .biz-pill / 32px
   .csr-tagline) + the pill → heading gap. Desktop only — the columns
   stack at ≤992px. */
@media (min-width: 993px) {
  .biz-intro-visual {
    margin-top: calc(31px + var(--sp-pill-to-heading));
  }
  .csr-intro-visual {
    margin-top: calc(32px + var(--sp-pill-to-heading));
  }
}

/* ===== 3. Paragraph after the heading ===== */
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .akur-pill, .awards-header .badge, .csr-tagline) + :is(h2, .heading-with-link) + p,
.biz-section-title + .biz-section-desc {
  --lh: 1.7;
  line-height: var(--lh);
  margin-top: 0;
}
/* In-column intros keep their own paragraph line-height (it has to
   match the paragraphs below them); --lh just has to agree with it. */
.biz-intro-content:not(.biz-intro--centered *) > .biz-pill + :is(h2, .heading-with-link) + p {
  --lh: 1.8;
}
.csr-intro-text > .csr-tagline + :is(h2, .heading-with-link) + p {
  --lh: 1.85;
}
.cr-apply-side > .cr-pill + h2 + p,
.cp-form-side > .cp-pill + h2 + p {
  --lh: 1.75;
}

/* ===== 4. Gap to the next block (centred intros) ===== */
/* The last line of the intro — paragraph, or the heading itself when
   there is no paragraph — hands the whole gap to its container. */
:is(.biz-intro--centered .biz-intro-content, .section-intro, .cr-head, .tm-head, .cp-intro, .vm-intro, .awards-header) > :is(p, h2):last-child {
  margin-bottom: 0;
}
.biz-intro--centered,
.section-intro,
.cr-head,
.tm-head,
.cp-intro,
.vm-intro,
.awards-header {
  margin-bottom: var(--sp-text-to-next);
}
.section-intro:last-child {
  margin-bottom: 0;
}
.biz-section-desc,
.offer-container > .offer-pill + .offer-title {
  margin-bottom: var(--sp-text-to-next);
}
/* About Us: the timeline's own 30px top padding sits between the
   intro and the first card. */
.biz-intro--centered + .about-timeline {
  padding-top: 0;
}
/* Business pages: the centred intro is alone in its own section, so
   the gap is this section's bottom + the next section's top. Give the
   whole gap to the next section's top padding. (Ids, not a prefix
   match, so this outranks business.css's own #why-choose-us-* rule.) */
#why-choose-us-realestate,
#why-choose-us-warehouse,
#why-choose-us-caps,
#why-choose-us-energy,
#why-choose-us-it {
  padding-bottom: 0;
}
:is(#why-choose-us-realestate, #why-choose-us-warehouse, #why-choose-us-caps, #why-choose-us-energy, #why-choose-us-it) + .biz-detail-section {
  padding-top: var(--sp-text-to-next);
}

/* ===== Hero → pill ===== */
.about-hero + section[class] {
  padding-top: var(--sp-hero-to-pill);
}
.cr-container > .cr-block:first-child .cr-head,
.cr-container > .cr-block:first-child .cr-pill {
  margin-top: 0;
}

/* ===== Capsize trim =====
   ::before pulls the box top down to the first line's cap-top,
   ::after pulls the box bottom up to the last line's baseline. Both
   read the element's own --lh, which is why every trimmed element
   above sets line-height from --lh. */
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + h2::before,
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + .heading-with-link > h2::before,
.biz-section-title::before,
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .akur-pill, .awards-header .badge, .csr-tagline) + :is(h2, .heading-with-link) + p::before,
.biz-section-title + .biz-section-desc::before {
  content: "";
  display: table;
  margin-bottom: calc(
    (var(--font-ascent) - var(--font-cap) + (var(--lh) - var(--font-ascent) - var(--font-descent)) / 2) * -1em
  );
}
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + h2::after,
:is(.biz-pill, .section-intro-pill, .cr-pill, .tm-pill, .cp-pill, .vm-pill, .re-pill, .akur-pill, .offer-pill, .diff-right .pill, .awards-header .badge, .csr-tagline) + .heading-with-link > h2::after,
.biz-section-title::after,
/* Only paragraphs that END a centred intro get their baseline trimmed —
   in-column paragraphs keep their normal gap to the paragraph below. */
:is(.biz-intro--centered .biz-intro-content, .section-intro, .cr-head, .tm-head, .cp-intro, .vm-intro, .awards-header) > p:last-child::after,
.biz-section-title + .biz-section-desc::after {
  content: "";
  display: table;
  margin-top: calc(
    (var(--font-descent) + (var(--lh) - var(--font-ascent) - var(--font-descent)) / 2) * -1em
  );
}

/* ===== Warehousing: equal section-to-section spacing =====
   Every content section below the intro gets the same padding on top
   and bottom, so each boundary is 2 x --sp-section (adjacent sections
   don't merge their padding). The Snapshot card sits inside its own
   section wrapper so it follows the same rhythm. */
:root {
  --sp-section: 50px;
}
#standalone,
#bespoke,
#warehouse-snapshot-wrap,
#logistics,
#quality,
#tenants-ticker {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}
#warehouse-snapshot-wrap > .project-stats {
  margin-block: 0;
}

/* Snapshot sits between a cream (Tailor-made) and a white (Logistics
   Parks) section — a cool light-grey band keeps both boundaries visible. */
#warehouse-snapshot-wrap {
  background: #eef1f6;
}