/*==============================
  Site-wide overrides
  ------------------------------
  Loaded after style.css, so anything here wins over the theme. Keep it small
  and keep every rule commented — this file exists so the vendor theme files can
  stay untouched.
==============================*/

/*------------------- Fluid container -------------------*/
/* Bootstrap's container jumps between fixed widths (540 / 720 / 960 / 1140px)
   instead of following the screen, so just under each breakpoint the page sat
   in a narrow strip with a wide dead margin down both sides — 113px of empty
   gutter each side at 767px, 135px at 991px, 120px at 1199px. Below the
   theme's own 1300px container rule, let the container fill the screen and give
   it a real side padding instead. The padding steps with the screen, so the
   content edge moves smoothly instead of snapping.

   Above 1300px nothing changes: the theme's --main-container (1250-1320px)
   still centres the page as designed. */
:root {
  --site-gutter: 20px;
}

@media (min-width: 576px) {
  :root {
    --site-gutter: 30px;
  }
}

@media (min-width: 992px) {
  :root {
    --site-gutter: 40px;
  }
}

@media (max-width: 1299.98px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 100%;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  /* .px-0 containers are deliberately edge-to-edge (full-bleed sliders and
     banners); Bootstrap's utility is !important, so it already wins on the
     padding — this only stops them inheriting a max-width they never wanted. */
  .container.px-0 {
    max-width: 100%;
  }
}

/*------------------- Section sub-titles -------------------*/
/* The small uppercase label above every section heading ("LATEST PROJECTS")
   is flanked by two short dashes. The theme drew those dashes as absolutely
   positioned pseudo-elements hung off negative margins, then hid the left one
   on the .style1 variant so it would not spill outside left-aligned
   containers — so centred titles showed two dashes and left-aligned ones
   showed one. Individual pages then repainted the dashes locally, which lost
   another one to a white-on-white section. Three different looks for the same
   element.

   Lay the dashes out inline instead: both always render, both sit inside the
   box whatever the alignment, and the line centres or left-aligns purely from
   the ancestor's text-align — no per-variant rules needed. */
.sub-title {
  display: block;
  color: var(--theme-color);
}

.sub-title::before,
.sub-title::after {
  content: "";
  /* Was absolute + negative margin; inline is what keeps it in the box. */
  position: static;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 2px;
  margin: 0;
  /* Follows the text, so a section only has to recolour the label itself. */
  background-color: currentColor;
}

.sub-title::before {
  margin-right: 10px;
}

.sub-title::after {
  margin-left: 10px;
}

/* .style1 marks the left-aligned titles. It only ever existed to hide the
   left dash, which is now harmless, so give it the same two dashes. */
.sub-title.style1::before {
  display: inline-block;
  margin: 0 10px 0 0;
}

/* The hero and sidebar-offer labels set their own display; keep them block so
   the dashes stay on the label's own line. */
.th-hero-wrapper .sub-title,
.hero-style1 .sub-title,
.hero-style2 .sub-title {
  display: block;
}

/* .style2 and the offer banner are deliberately dashless. */
.sub-title.style2::before,
.sub-title.style2::after,
.widget_offer .offer-banner .sub-title::before,
.widget_offer .offer-banner .sub-title::after {
  display: none;
}

/* Labels on dark sections. currentColor carries the dashes along. */
.sub-title.whiteColor,
.sub-title.text-white {
  color: var(--white-color);
}

/*------------------- Label-to-heading gap -------------------*/
/* The gap is not a gap the theme sets: it is the label's flat 20px bottom margin
   collapsed against the heading's own -0.2em top pull (style.css:2299). Because
   that pull is in em, the gap tracks the heading's font size — 10px under the
   48px headings on the home page, but 13px on the contact page, which sets its
   title-area headings to 36px, and 12px on the board and investor pages at 42px.
   Same label, same markup, three different gaps.

   Pin the pull to a flat 10px so the gap is 10px at every heading size and every
   breakpoint. Scoped to the adjacent-sibling case, so a heading standing without
   a label above it keeps the em pull the theme uses to optically align it with
   whatever sits beside it. */
.sub-title + .sec-title,
.sub-title + .board-title,
.sub-title + .committee-heading,
.sub-title + .investor-heading {
  margin-top: -10px;
}

/* Shorter dashes on small screens so a long label still fits on one line.
   The theme dropped them entirely below 450px — that is the inconsistency
   this block exists to remove, so they stay. */
@media (max-width: 575px) {

  .sub-title::before,
  .sub-title::after {
    display: inline-block;
    width: 26px;
  }
}

/* A centred section intro paragraph runs the full container width otherwise,
   which reads as a single over-long measure under a centred heading. Cap it
   and centre the box; left-aligned title areas are untouched. */
.title-area.text-center .sec-text {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/*------------------- Section rhythm -------------------*/
/* Every content section on the site pays the same vertical pad — 70px, 50px
   below 991px — via the theme's .space (--section-space). Sections that
   invented their own spacing have been put back on it; the audit that found
   them measured the computed padding of every top-level block on every page.

   Keep it that way: a new section gets .space, never an ad-hoc margin. A bare
   margin on a title block sitting *between* two padded sections is what caused
   the 189px holes this rule replaced — padding does not collapse, so the
   margin stacks on top of both neighbours' pads instead of merging with them. */

/* The logo strip was the last block still on its own number (55px), which read
   as a slightly tight band between two 70px neighbours. Only the vertical pad
   is set here — the theme varies the horizontal pad per breakpoint to clear the
   corner wedge, and that still applies. */
.brand-sec {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

@media (max-width: 991px) {
  .brand-sec {
    padding-top: var(--section-space-mobile);
    padding-bottom: var(--section-space-mobile);
  }
}

/* Equal padding does not mean equal *visible* gap. A section with a background
   paints its own padding, so the white space a reader sees at that seam is just
   the neighbour's 70px. Two unpainted sections in a row each contribute theirs,
   so the same rhythm shows up as a 140px hole — on About Company the seam under
   the dark history band reads 70px and the one above the EPF gallery reads
   140px, which is the gap that looks wrong.

   Drop the top pad when the previous sibling is also an unpainted section, so
   every seam on the site shows 70px of white whatever the neighbours are. The
   theme marks painted sections with data-bg-src in the markup (and adds
   .background-image once its JS resolves them); .bg-* and .tinted-sec cover the
   flat-colour bands. */
.space:not([data-bg-src]):not(.background-image):not([class*="bg-"]):not(.tinted-sec)
+ .space:not([data-bg-src]):not(.background-image):not([class*="bg-"]):not(.tinted-sec) {
  padding-top: 0;
}