/**
 * Sectors & Services modules
 * -------------------------------------------------------------------------
 * Loaded after style.css so the theme file stays exactly as shipped.
 *
 * Everything here is built from the theme's own custom properties
 * (--color-primary, --color-title, --color-body, --radius) and its existing
 * type scale, so the modules inherit any brand change made in the admin
 * without further edits. No new colours or fonts are introduced.
 */

/* ======================================================== detail page heroes */

/*
 * The hero image at the top of every detail page — sector, service, project and
 * article — shares the .service-details-main-wrapper-thumbnail wrapper but the
 * theme never styled it, so each page rendered its image at whatever natural
 * size it happened to be. Source images range from roughly 1:1 to 1.9:1, which
 * made the fold height jump from page to page.
 *
 * Fixing the height and cropping with object-fit gives every inner page the
 * same opening, whatever an editor uploads later.
 */
.service-details-main-wrapper-thumbnail {
  overflow: hidden;
  border-radius: 20px;
}

.service-details-main-wrapper-thumbnail img {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

/*
 * Project header slider.
 *
 * The theme already ships the .mySwiper-pd-slider arrows and a matching Swiper
 * init in main.js — they were simply never used by a template. Adding the
 * markup is enough to get working navigation; this only holds the slides to the
 * same height as the single-image heroes above so the fold does not move when a
 * project has a slider and its neighbour does not.
 */
.project-hero-slider {
  border-radius: 20px;
  overflow: hidden;
}

.project-hero-slider .swiper-slide {
  /* Swiper sets its own height from content; without this a slow-loading image
     lets the slide collapse and the arrows jump. */
  height: 500px;
}

.project-hero-slider .service-details-main-wrapper-thumbnail,
.project-hero-slider .service-details-main-wrapper-thumbnail img {
  height: 100%;
  border-radius: 0;
}

/* ============================================================== team cards */

/*
 * Extends the theme's .single-team-area-inner with the two things a leadership
 * page needs and the original card had no slot for: a short biography and a
 * direct contact line. Everything else — photo treatment, name, designation,
 * social row — is inherited from style.css unchanged.
 */
.team-card {
  height: 100%;
}

.team-card .thumbnail {
  display: block;
  overflow: hidden;
}

.team-card .thumbnail img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s ease;
}

.team-card:hover .thumbnail img {
  transform: scale(1.04);
}

.team-card__bio {
  margin: 14px 0 0;
  color: var(--color-body);
  font-size: 15px;
  line-height: 1.75;
}

.team-card__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: "Inter", serif;
  font-size: 14px;
  font-weight: var(--p-medium);
  color: var(--color-body);
  word-break: break-word;
  transition: color var(--transition) ease;
}

.team-card__contact:hover {
  color: var(--color-primary);
}

.team-card__contact i {
  color: var(--color-primary);
}

@media only screen and (max-width: 991px) {
  .team-card .thumbnail img {
    height: 300px;
  }
}

@media only screen and (max-width: 575px) {
  .team-card .thumbnail img {
    height: 260px;
  }
}

/* ============================================================ partner cards */

/*
 * The band carries its own padding rather than the theme's .rts-section-gap.
 * That class puts 120px above and below, which stacked with the video section's
 * own 120px and left a screen-height gap under a single card.
 */
.rts-partners-area {
  padding: 100px 0 20px;
}

.module-section-head--tight {
  margin-bottom: 36px;
}

.partner-card {
  height: 100%;
  padding: 40px;
  background: var(--color-white);
  border: 1px solid #ECECEC;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  transition: box-shadow var(--transition) ease;
}

/* With a photograph the card becomes two columns, so a single partner fills
   the row instead of leaving a band of empty white beside the text. */
.partner-card--with-media {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.partner-card__media {
  position: relative;
  min-height: 100%;
  background: #F4F4F4;
}

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

.partner-card--with-media .partner-card__body {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.partner-card:hover {
  box-shadow: 0 18px 40px rgba(20, 20, 22, 0.08);
}

.partner-card__logo {
  margin-bottom: 22px;
}

.partner-card__logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.partner-card__title {
  font-family: "Gantari", serif;
  font-size: 21px;
  line-height: 1.4;
  font-weight: var(--s-bold);
  color: var(--color-title);
  margin-bottom: 16px;
}

/* Rich text: the editor may add paragraphs, lists, emphasis and links. */
.partner-card__disc {
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.8;
}

.partner-card__disc > :last-child {
  margin-bottom: 0;
}

.partner-card__disc p {
  margin: 0 0 14px;
}

.partner-card__disc ul,
.partner-card__disc ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.partner-card__disc li {
  margin-bottom: 7px;
}

.partner-card__disc strong,
.partner-card__disc b {
  color: var(--color-title);
  font-weight: var(--p-semi-bold);
}

.partner-card__disc a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Credential badges — certifications and scale, from the partner's record. */
.partner-card__creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 0;
  margin: 22px 0 0;
}

.partner-card__creds li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #ECECEC;
  border-radius: 4px;
  background: #FAFAFA;
  font-family: "Inter", serif;
  font-size: 13px;
  font-weight: var(--p-semi-bold);
  color: var(--color-title);
}

.partner-card__creds i {
  color: var(--color-primary);
  font-size: 13px;
}

/*
 * Uses the theme's own .rts-btn.btn-primary, so it matches "Get a Quote" in the
 * header. Only the spacing around it is set here — .rts-btn already carries
 * max-width: max-content, so the button sizes to its label rather than
 * stretching across the card's flex column.
 */
.partner-card__cta {
  margin-top: 26px;
}

.partner-card__cta img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

@media only screen and (max-width: 991px) {
  .rts-partners-area {
    padding: 80px 0 10px;
  }

  /* Side-by-side stops working once the column narrows, so the photograph
     moves above the text. */
  .partner-card--with-media {
    grid-template-columns: 1fr;
  }

  .partner-card__media {
    min-height: 260px;
  }

  .partner-card--with-media .partner-card__body {
    padding: 34px 32px;
  }
}

@media only screen and (max-width: 767px) {
  .rts-partners-area {
    padding: 60px 0 0;
  }

  .partner-card {
    padding: 30px 24px;
  }

  .partner-card--with-media {
    padding: 0;
  }

  .partner-card__media {
    min-height: 200px;
  }

  .partner-card--with-media .partner-card__body {
    padding: 28px 24px;
  }

  .partner-card__title {
    font-size: 19px;
  }
}

/* ==================================================== project detail sidebar */

/*
 * The theme defaults every heading to --color-heading-1 (#FFFFFF) and then
 * re-colours them per section. The project sidebar is a light panel built with
 * inline styles, so it falls outside all of those scopes and its heading was
 * rendering white on #f8f8f8 — invisible.
 *
 * Setting the colour on the panel rather than the heading also protects any
 * heading added to it later.
 */
.project-detail-sidebar h1,
.project-detail-sidebar h2,
.project-detail-sidebar h3,
.project-detail-sidebar h4,
.project-detail-sidebar h5,
.project-detail-sidebar h6,
.project-detail-sidebar .title,
.content-side-panel h1,
.content-side-panel h2,
.content-side-panel h3,
.content-side-panel h4,
.content-side-panel h5,
.content-side-panel h6,
.content-side-panel .title {
  color: var(--color-title);
}

/* ================================================= homepage project showcase */

/*
 * The showcase card is image-first, with a white information panel overlaid on
 * it. The theme never gave the image any dimensions, so the card's height came
 * entirely from whatever was uploaded — and because the panel is absolutely
 * positioned, a tall or missing image left it floating over the section
 * background instead of sitting on the card.
 *
 * Sizing the image fixes the card everywhere: in the slider and in the static
 * grid below.
 */
.project-area-start-1 .thumbnail {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.project-area-start-1 .thumbnail img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  transition: transform 0.6s ease;
}

.project-area-start-1:hover .thumbnail img {
  transform: scale(1.04);
}

/*
 * Detail tiles: one row of four.
 *
 * The theme caps the tile strip at max-width:315px with fixed 152px tiles,
 * which forces a 2x2 block and makes the overlay panel taller than the
 * photograph behind it. Letting the strip use the full panel width and sizing
 * the tiles proportionally puts all four on one line, so the panel stays short
 * and the card remains image-led.
 */
.project-area-start-1 .inner-content-project .thumb-wrapper {
  max-width: 100%;
}

.project-area-start-1 .inner-content-project .thumb-wrapper .single {
  width: 24%;
}

.project-area-start-1 .inner-content-project .thumb-wrapper .single p {
  font-size: 15px;
}

/*
 * Detail tiles reveal on hover.
 *
 * Price / client / year / duration made the overlay panel taller than the
 * photograph, so the card read as a block of text with an image behind it.
 * Collapsing them until hover keeps the card image-led — the title, category
 * and location stay visible, and the numbers appear when someone shows
 * interest in that specific project.
 */
.project-area-start-1 .inner-content-project .thumb-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease;
}

.project-area-start-1:hover .inner-content-project .thumb-wrapper,
.project-area-start-1:focus-within .inner-content-project .thumb-wrapper {
  max-height: 320px;
  opacity: 1;
  margin-top: 18px;
}

/* Touch devices have no hover, so the tiles would otherwise be unreachable
   there — show them outright instead. */
@media (hover: none) {
  .project-area-start-1 .inner-content-project .thumb-wrapper {
    max-height: none;
    opacity: 1;
    margin-top: 18px;
    transition: none;
  }
}

/*
 * Static grid fallback.
 *
 * Used when there are too few projects for the theme's looping slider. The card
 * keeps its design; the overlay panel is simply always shown, because there is
 * no active slide to trigger the reveal.
 */
.project-showcase-grid .project-card--static .inner-content-project {
  opacity: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 30px 34px;
}

/* The panel sizes to its content in the slider; in a narrower grid column it
   needs to be held inside the card instead. */
.project-showcase-grid .project-card--static .inner-content-project .title {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 6px;
}

@media only screen and (max-width: 1199px) {
  .project-area-start-1 .thumbnail img {
    height: 440px;
  }

  .project-showcase-grid .project-card--static .inner-content-project {
    padding: 30px 32px;
  }

  .project-showcase-grid .project-card--static .inner-content-project .title {
    font-size: 22px;
  }

  /* Four across stops being readable once the panel narrows, so the strip
     folds to two. These rules also have to restate the theme's own small-screen
     sizing, because modules.css loads after style.css and would otherwise win
     inside its media queries too. */
  .project-area-start-1 .inner-content-project .thumb-wrapper .single {
    width: 48%;
  }
}

@media only screen and (max-width: 575px) {
  .project-area-start-1 .inner-content-project .thumb-wrapper {
    margin-top: 15px;
    gap: 8px;
  }

  .project-area-start-1 .inner-content-project .thumb-wrapper .single {
    width: 48%;
    padding: 12px;
  }

  .project-area-start-1 .inner-content-project .thumb-wrapper .single p {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .project-area-start-1 .thumbnail img {
    height: 360px;
  }

  /* Below this width the overlay would cover the photograph entirely, so the
     panel drops into normal flow underneath it. */
  .project-showcase-grid .project-card--static .inner-content-project {
    position: static;
    padding: 26px 22px 6px;
    background: transparent;
  }

  .project-showcase-grid .project-card--static .inner-content-project .title,
  .project-showcase-grid .project-card--static .inner-content-project .location {
    color: var(--color-white);
  }
}

/* ====================================================== shared: section head */

.module-section-head {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}

.module-section-head .pre {
  display: inline-block;
  font-family: "Inter", serif;
  font-size: 14px;
  font-weight: var(--p-semi-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
  position: relative;
  padding-left: 46px;
}

/* The short rule before the eyebrow echoes the theme's own .pre treatment. */
.module-section-head .pre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--color-primary);
}

.module-section-head .title {
  font-family: "Gantari", serif;
  font-weight: var(--s-bold);
  color: var(--color-title);
  margin-bottom: 16px;
}

.module-section-head .disc {
  color: var(--color-body);
  margin-bottom: 0;
}

/* ============================================================= sector cards */

.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 1px solid #ECECEC;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition) ease, box-shadow var(--transition) ease,
    border-color var(--transition) ease;
}

.sector-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(20, 20, 22, 0.12);
}

.sector-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #F4F4F4;
}

.sector-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sector-card:hover .sector-card__media img {
  transform: scale(1.06);
}

/* Index badge. Numbering the sectors makes a six-item grid easier to scan and
   to refer to in conversation than six unlabelled cards. */
.sector-card__index {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: "Gantari", serif;
  font-size: 15px;
  font-weight: var(--s-bold);
  letter-spacing: 0.04em;
}

.sector-card__icon {
  position: absolute;
  right: 20px;
  bottom: -26px;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 6px 18px rgba(20, 20, 22, 0.14);
}

.sector-card__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.sector-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 34px 28px 28px;
}

.sector-card__tagline {
  display: block;
  font-family: "Inter", serif;
  font-size: 13px;
  font-weight: var(--p-semi-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.sector-card__title {
  font-family: "Gantari", serif;
  font-size: 22px;
  line-height: 1.35;
  font-weight: var(--s-bold);
  margin-bottom: 12px;
}

.sector-card__title a {
  color: var(--color-title);
  transition: color var(--transition) ease;
}

.sector-card__title a:hover {
  color: var(--color-primary);
}

.sector-card__disc {
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* Pushes the link to the bottom so cards with different copy lengths still
   line their footers up across a row. */
.sector-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", serif;
  font-size: 15px;
  font-weight: var(--p-bold);
  color: var(--color-title);
  transition: color var(--transition) ease, gap var(--transition) ease;
}

.sector-card__link i {
  font-size: 13px;
}

.sector-card__link:hover {
  color: var(--color-primary);
  gap: 16px;
}

/* ============================================ sector detail: at-a-glance bar */

.sector-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #ECECEC;
  border: 1px solid #ECECEC;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
}

.sector-glance__item {
  background: var(--color-white);
  padding: 26px 28px;
}

.sector-glance__label {
  display: block;
  font-family: "Inter", serif;
  font-size: 12px;
  font-weight: var(--p-semi-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.sector-glance__value {
  font-family: "Gantari", serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: var(--s-semi-bold);
  color: var(--color-title);
  margin: 0;
}

/* ================================================= sector detail: stat strip */

.sector-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding: 38px 20px;
  margin: 10px 0 44px;
  border-top: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
}

.sector-stats__item {
  text-align: center;
}

.sector-stats__value {
  display: block;
  font-family: "Gantari", serif;
  font-size: 40px;
  line-height: 1.1;
  font-weight: var(--s-bold);
  color: var(--color-primary);
  margin-bottom: 8px;
}

.sector-stats__label {
  display: block;
  font-family: "Inter", serif;
  font-size: 15px;
  color: var(--color-body);
}

/* ======================================================== service list cards */

/* The services grid keeps the theme's existing card, with a method number and
   a hover state added so the six techniques read as a sequence of methods
   rather than a set of unrelated tiles. */
.service-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 38px 30px 32px;
  background: var(--color-white);
  border: 1px solid #ECECEC;
  border-radius: var(--radius);
  transition: transform var(--transition) ease, box-shadow var(--transition) ease,
    border-color var(--transition) ease;
}

.service-method-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius) var(--radius) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition) ease;
}

.service-method-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(20, 20, 22, 0.12);
}

.service-method-card:hover::after {
  transform: scaleX(1);
}

.service-method-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.service-method-card__icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(137, 0, 0, 0.06);
}

.service-method-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.service-method-card__number {
  font-family: "Gantari", serif;
  font-size: 34px;
  line-height: 1;
  font-weight: var(--s-bold);
  color: #ECECEC;
  margin-left: auto;
}

.service-method-card__title {
  font-family: "Gantari", serif;
  font-size: 21px;
  line-height: 1.35;
  font-weight: var(--s-bold);
  margin-bottom: 12px;
}

.service-method-card__title a {
  color: var(--color-title);
  transition: color var(--transition) ease;
}

.service-method-card__title a:hover {
  color: var(--color-primary);
}

.service-method-card__disc {
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.service-method-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", serif;
  font-size: 15px;
  font-weight: var(--p-bold);
  color: var(--color-title);
  transition: color var(--transition) ease, gap var(--transition) ease;
}

.service-method-card__link i {
  font-size: 13px;
}

.service-method-card__link:hover {
  color: var(--color-primary);
  gap: 16px;
}

/* ================================================================ responsive */

@media only screen and (max-width: 1199px) {
  .sector-card__body {
    padding: 32px 24px 26px;
  }

  .sector-card__title,
  .service-method-card__title {
    font-size: 20px;
  }

  /* The hero steps down with the viewport — 500px on a phone would fill the
     screen and push the heading below the fold. */
  .service-details-main-wrapper-thumbnail img {
    height: 420px;
  }

  .project-hero-slider .swiper-slide {
    height: 420px;
  }
}

@media only screen and (max-width: 991px) {
  .module-section-head {
    margin-bottom: 40px;
  }

  .service-details-main-wrapper-thumbnail img {
    height: 340px;
  }

  .project-hero-slider .swiper-slide {
    height: 340px;
  }

  .sector-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector-stats__value {
    font-size: 34px;
  }
}

@media only screen and (max-width: 767px) {
  .sector-glance {
    grid-template-columns: 1fr;
  }

  .service-details-main-wrapper-thumbnail,
  .service-details-main-wrapper-thumbnail img {
    border-radius: 14px;
  }

  .service-details-main-wrapper-thumbnail img {
    height: 260px;
  }

  .project-hero-slider {
    border-radius: 14px;
  }

  .project-hero-slider .swiper-slide {
    height: 260px;
  }

  .sector-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
    padding: 32px 12px;
  }

  .sector-card__body {
    padding: 30px 22px 24px;
  }

  .service-method-card {
    padding: 32px 24px 28px;
  }

  .module-section-head .pre {
    padding-left: 0;
  }

  .module-section-head .pre::before {
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .sector-stats {
    grid-template-columns: 1fr;
  }

  .service-details-main-wrapper-thumbnail img {
    height: 210px;
  }

  .project-hero-slider .swiper-slide {
    height: 210px;
  }

  .sector-card__icon {
    width: 48px;
    height: 48px;
    right: 16px;
  }
}

/* ====================================================== rich text in cards */

/*
 * Every module's description is now a rich text field, so a card body may
 * contain paragraphs, lists and links rather than a single run of text. These
 * rules keep that markup from breaking the card rhythm: the first and last
 * blocks sit flush, and lists stay inside the card.
 */
.sector-card__disc > p,
.service-method-card__disc > p,
.tender-row__disc > p {
  margin: 0 0 12px;
}

.sector-card__disc > :last-child,
.service-method-card__disc > :last-child,
.tender-row__disc > :last-child,
.partner-card__disc > :last-child {
  margin-bottom: 0;
}

.disc ul,
.disc ol,
.sector-card__disc ul,
.sector-card__disc ol,
.service-method-card__disc ul,
.service-method-card__disc ol,
.tender-row__disc ul,
.tender-row__disc ol {
  margin: 0 0 12px;
  padding-left: 18px;
}

.disc li,
.sector-card__disc li,
.service-method-card__disc li,
.tender-row__disc li {
  margin-bottom: 6px;
}

.sector-card__disc a,
.service-method-card__disc a,
.tender-row__disc a,
.disc a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Headings pasted into a card body would otherwise dwarf the card title. */
.disc h1, .disc h2, .disc h3, .disc h4, .disc h5, .disc h6,
.sector-card__disc h1, .sector-card__disc h2, .sector-card__disc h3,
.sector-card__disc h4, .sector-card__disc h5, .sector-card__disc h6,
.service-method-card__disc h1, .service-method-card__disc h2, .service-method-card__disc h3,
.service-method-card__disc h4, .service-method-card__disc h5, .service-method-card__disc h6,
.tender-row__disc h1, .tender-row__disc h2, .tender-row__disc h3,
.tender-row__disc h4, .tender-row__disc h5, .tender-row__disc h6 {
  font-size: 1.05em;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* ==================================================== hero slide eyebrow */

/*
 * Turns the hero slider's eyebrow into a white pill on the photograph, where
 * plain red-on-image was hard to read.
 *
 * The !important on display is required, not defensive: the theme's
 * active-slide rule
 *
 *   .banner-swiper-area-one .mySwiper-banner-one .swiper-slide.swiper-slide-active
 *   .banner-inner-content-one span.pre { display: block; ... }
 *
 * is far more specific than this selector, and a block-level pill would stretch
 * the full width of the slide instead of hugging its text.
 */
.banner-inner-content-one span.pre {
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 18px;
  background: white;
  display: inline-block !important;
  padding: 7px 25px;
  border-radius: 10px;
  font-weight: bold;
}

/*
 * Paragraph spacing inside .disc, the theme's generic description block.
 *
 * Kept as its own rule rather than grouped with the card variants, which use a
 * tighter 12px gap to keep their footers aligned across a row. Bottom margin
 * only, so the text stays flush with its container on both sides.
 */
.disc p {
  margin-bottom: 20px;
}

/* ============================================================ video lightbox */

/*
 * The theme centred the player with a margin:auto + translateY hack that only
 * ever applied to an <iframe>, so an uploaded file played through a <video>
 * element sat at its natural size in the top-left corner.
 *
 * The overlay becomes a flex container instead, which centres either element,
 * and both are sized identically. Selectors are scoped to .vedio-icone to match
 * the theme's own specificity — a looser selector loses to it.
 */
.vedio-icone .video-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.vedio-icone .video-overlay iframe,
.vedio-icone .video-overlay video {
  width: min(90vw, 1100px);
  height: auto;
  max-height: 85vh;
  aspect-ratio: 16 / 9;
  /* Undo the theme's centring hack. */
  margin: 0;
  top: auto;
  position: relative;
  transform: none;
  display: block;
  border: 0;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* Sits above the player rather than behind it. */
.vedio-icone .video-overlay .video-overlay-close {
  z-index: 2;
}

/* ================================================ working process timeline */

/*
 * The intro section above carries Bootstrap's .pb-0 (padding-bottom: 0
 * !important), so its white card sits flush with the section edge and the
 * timeline that follows starts almost immediately. The gap is added as a margin
 * rather than padding, because !important cannot be outbid on the intro side.
 */
.rts-company-storyhear {
  margin-top: 60px;
}

/*
 * The design assumed the first step had no image. Now that one can be uploaded,
 * the extra height needs clearance above it so the photograph does not butt up
 * against the section above.
 */
.rts-company-storyhear .timeline ul li.first > div {
  padding-top: 30px;
}

@media only screen and (max-width: 991px) {
  .rts-company-storyhear {
    margin-top: 40px;
  }
}

@media only screen and (max-width: 575px) {
  .rts-company-storyhear {
    margin-top: 24px;
  }

  .rts-company-storyhear .timeline ul li.first > div {
    padding-top: 0;
  }
}