/* =========================================================
   SIINOVIA ABOUT US - DESIGN ALIGNMENT
   Scoped to About Us page only
   ========================================================= */

body.page-id-376 {
  overflow-x: hidden;
}

/* ---------------------------------------------------------
   GENERAL CONTENT WIDTH
   Bring main sections in from the very edges
   --------------------------------------------------------- */

body.page-id-376 .approachBlocks,
body.page-id-376 .specialities,
body.page-id-376 .strategyBlock {
  width: calc(100% - 48px);
  max-width: 1480px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------
   OUR APPROACH - DESKTOP
   --------------------------------------------------------- */

@media (min-width: 992px) {
  /* The first content section immediately after the hero */
  body.page-id-376 .posts-header + .container.mb-5 .row {
    align-items: center !important;
  }

  /* Text column */
  body.page-id-376
    .posts-header
    + .container.mb-5
    .row
    > .col-lg-6:first-child {
    padding-left: 90px !important;
    padding-right: 50px !important;
  }
}

/* ---------------------------------------------------------
   INNOVATION / QUALITY SECTION
   Reduce vertical spacing to match Figma
   --------------------------------------------------------- */

body.page-id-376 .approachBlocks {
  padding: 60px 70px !important;
}

body.page-id-376 .approachBlocks .row {
  align-items: flex-start !important;
}

body.page-id-376 .approachBlocks .col-lg-6 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighten Innovation / Quality inner blocks */

body.page-id-376 .approachBlocks .approachBlock {
  padding-top: 15px !important;
  padding-bottom: 10px !important;
}

body.page-id-376 .approachBlocks .approachBlock.first {
  padding-top: 15px !important;
  padding-bottom: 10px !important;
}

/* ---------------------------------------------------------
   SPECIALITIES / CAPABILITIES / FUTURE FOCUS
   --------------------------------------------------------- */

body.page-id-376 .specialities {
  border-radius: 26px;
  overflow: hidden;

  /* Shorter overall panel */
  padding: 24px 70px !important;

  margin-top: 40px;
  margin-bottom: 40px;
}

body.page-id-376 .specialities h4 {
  font-weight: 400;
  margin-bottom: 22px;
}

body.page-id-376 .specialities p {
  line-height: 1.4;
}

/* Desktop layout */

@media (min-width: 992px) {
  body.page-id-376 .specialities .row {
    align-items: center !important;
  }

  body.page-id-376 .specialities .speciality {
    height: 160px !important;
    min-height: 160px !important;

    display: flex !important;
    align-items: flex-start !important;

    padding-left: 30px !important;
    padding-right: 30px !important;

    border-right: 1px solid #d8d7df !important;
  }

  /* No divider after final column */
  body.page-id-376 .specialities .speciality:last-child {
    border-right: 0 !important;
  }

  body.page-id-376 .specialities .specialityInner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove developer's original divider */
  body.page-id-376 .specialities .speciality::after,
  body.page-id-376 .specialities .specialityInner::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  body.page-id-376 .specialities .specialityInner h4,
  body.page-id-376 .specialities .specialityInner p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

/* ---------------------------------------------------------
   FUTURE FOCUS / STRATEGY BLOCK
   --------------------------------------------------------- */

body.page-id-376 .strategyBlock {
  padding-top: 25px;
  padding-left: 70px;
  padding-right: 70px;
  background-image: none !important;
}

/* Match Figma proportions on desktop */

@media (min-width: 1200px) {
  body.page-id-376 .strategyBlock .row {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    column-gap: 55px !important;
  }

  /* FUTURE FOCUS IMAGE COLUMN */
  body.page-id-376 .strategyBlock .col-lg-4.offset-lg-1 {
    flex: 0 0 450px !important;
    width: 540px !important;
    max-width: 540px !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-376 .strategyBlock .col-lg-4.offset-lg-1 > img.img-fluid {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* ACCORDION COLUMN */
  body.page-id-376 .strategyBlock .col-lg-5 {
    flex: 0 0 410px !important;
    width: 410px !important;
    max-width: 410px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-376 #sgbAccordion .accordion-button {
    min-height: 105px;
    padding: 22px 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 28px !important;
    font-weight: 300 !important;
  }
}

/* =========================================================
   ABOUT US - IPAD LANDSCAPE / SMALL DESKTOP
   992px - 1199px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {
  body.page-id-376 .strategyBlock {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  body.page-id-376 .strategyBlock .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 35px !important;
  }

  body.page-id-376 .strategyBlock .col-lg-4.offset-lg-1 {
    flex: 0 0 44% !important;
    width: 44% !important;
    max-width: 44% !important;
    margin-left: 0 !important;
  }

  body.page-id-376 .strategyBlock .col-lg-5 {
    flex: 0 0 46% !important;
    width: 46% !important;
    max-width: 46% !important;
  }

  body.page-id-376 .strategyBlock img {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  body.page-id-376 #sgbAccordion .accordion-button {
    font-size: 24px !important;
    min-height: 90px !important;
  }
}

/* ---------------------------------------------------------
   ABOUT US - WAVE VIDEO
   Position underneath Future Focus like Figma
   --------------------------------------------------------- */

body.page-id-376 .videoBlock {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;

  margin-top: 0px !important;
  margin-bottom: -40px !important;

  z-index: 0 !important;
}

body.page-id-376 .videoBlock .video {
  height: auto !important;
  overflow: visible !important;
}

body.page-id-376 .videoBlock video {
  width: 100% !important;
  height: auto !important;

  position: relative !important;
  top: 0 !important;
  left: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  opacity: 0.55 !important;
}

/* ---------------------------------------------------------
   ABOUT US - PRE FOOTER GRADIENT
   Reduce space beneath wave
   --------------------------------------------------------- */

@media (min-width: 769px) {
  body.page-id-376 .preFooter {
    height: 90px !important;
    margin-top: 0 !important;
  }
}

/* ---------------------------------------------------------
   ACCORDION
   Remove chunky card styling and match Figma
   --------------------------------------------------------- */

body.page-id-376 #sgbAccordion {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.page-id-376 #sgbAccordion .accordion-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #d8d7df !important;
  border-radius: 0 !important;
}

body.page-id-376 #sgbAccordion .accordion-item:last-child {
  border-bottom: 1px solid #d8d7df !important;
}

body.page-id-376 #sgbAccordion .accordion-header {
  margin: 0;
}

body.page-id-376 #sgbAccordion .accordion-button {
  min-height: 100px;
  padding: 22px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 400;
}

body.page-id-376 #sgbAccordion .accordion-button:not(.collapsed) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Arrow button */

body.page-id-376 #sgbAccordion .accordion-button::after {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px;
  margin-left: auto;

  border-radius: 11px;

  background-color: #8581a4 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;

  transform: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H18M14 8L18 12L14 16' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Open accordion = down arrow */

body.page-id-376 #sgbAccordion .accordion-button:not(.collapsed)::after {
  transform: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5V18M8 14L12 18L16 14' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Accordion content */

body.page-id-376 #sgbAccordion .accordion-body {
  padding: 0 56px 30px 28px !important;
  color: #8681a4;
  line-height: 1.45;
}

body.page-id-376 #sgbAccordion .accordion-body ul {
  margin-bottom: 0;
  padding-left: 18px;
}

body.page-id-376 #sgbAccordion .accordion-body li {
  margin-bottom: 2px;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body.page-id-376 .approachBlocks,
  body.page-id-376 .specialities,
  body.page-id-376 .strategyBlock {
    width: calc(100% - 40px);
  }

  body.page-id-376 .approachBlocks,
  body.page-id-376 .strategyBlock {
    padding-left: 30px;
    padding-right: 30px;
  }

  body.page-id-376 .specialities {
    padding: 38px 40px !important;
  }

  body.page-id-376 .strategyBlock img {
    margin: 0 auto 45px;
  }
}

@media (min-width: 992px) and (max-width: 1024px) {
  body.page-id-376 .specialities {
    padding: 24px 35px !important;
  }

  body.page-id-376 .specialities .speciality {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
  body.page-id-376 .approachBlocks,
  body.page-id-376 .specialities,
  body.page-id-376 .strategyBlock {
    width: calc(100% - 30px);
  }

  body.page-id-376 .approachBlocks,
  body.page-id-376 .strategyBlock {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.page-id-376 .specialities {
    padding: 32px 26px !important;
    border-radius: 20px;
  }

  body.page-id-376 #sgbAccordion .accordion-button {
    min-height: 82px;
    padding: 16px 0 !important;
  }

  body.page-id-376 #sgbAccordion .accordion-button::after {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    background-size: 19px 19px !important;
  }

  body.page-id-376 #sgbAccordion .accordion-body {
    padding: 0 15px 25px 12px !important;
  }
}

/* Remove original accordion arrow glyph */
body.page-id-376 #sgbAccordion .accordion-button::after,
body.page-id-376 #sgbAccordion .accordion-button:not(.collapsed)::after {
  content: "" !important;
}

/* GLOBAL SIINOVIA ARROW ICON ONLY
   Keeps the developer's original button size, colour and shape */

.siiButton .arrow {
  color: transparent !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H18M14 8L18 12L14 16' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

/* =========================================================
   INTERNAL PAGE HERO
   Keep ORIGINAL theme curves
   Only correct sizing, positioning and image crop
   Homepage excluded
   ========================================================= */

/* HERO TEXT */

body:not(.home) .posts-header .posts-header-background p {
  max-width: 620px !important;
  margin-bottom: 0 !important;
  line-height: 1.4;
}

@media (min-width: 1025px) {
  body:not(.home) .posts-header .posts-header-background h1,
  body:not(.home) .posts-header .posts-header-background p {
    position: relative;
    top: -30px;
  }
}

/* ABOUT US - reduce gap between hero and Our Approach */

@media (min-width: 1025px) {
  body.page-id-376 .posts-header .posts-header-background {
    margin-bottom: 3rem !important;
  }

  body.page-id-376 .posts-header + .container.mb-5 {
    margin-top: -30px !important;
  }
}

/* =========================================================
   ABOUT US - TABLET / IPAD
   ========================================================= */

/* =========================================================
   ABOUT US - MOBILE
   ========================================================= */

@media (max-width: 767px) {
  body.page-id-376 .posts-header .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    background-image: url("https://siinovia.com/wp-content/uploads/2026/10/About-Us-Mobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    align-items: flex-start !important;

    padding: 46px 28px 36px !important;

    margin-bottom: 4rem !important;
  }

  .blog .posts-header .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    background-image: url("https://siinovia.com/wp-content/uploads/2026/10/News-Mobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    align-items: flex-start !important;

    padding: 46px 28px 36px !important;

    margin-bottom: 4rem !important;
  }

  body.page-id-304 .posts-header .posts-header-background {
    background-image: url("https://siinovia.com/wp-content/uploads/2026/10/Partnerships-Mobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  body.page-id-262 .posts-header .posts-header-background {
    background-image: url("https://siinovia.com/wp-content/uploads/2026/10/Careers-Mobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================================================
   ABOUT US - SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {
  body.page-id-376 .posts-header .posts-header-background {
    min-height: 455px !important;

    padding-top: 42px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;

    background-position: center center !important;
  }
}

/* =========================================================
   ABOUT US - TYPOGRAPHY WEIGHTS
   Match lighter Figma typography
   ========================================================= */

/* Smaller headings / subheadings */
body.page-id-376 h3,
body.page-id-376 h4,
body.page-id-376 h5,
body.page-id-376 h6 {
  font-weight: 400 !important;
}

/* Body copy */
body.page-id-376 .posts-header p,
body.page-id-376 .container p,
body.page-id-376 .approachBlocks p,
body.page-id-376 .specialities p,
body.page-id-376 .strategyBlock p,
body.page-id-376 .strategyBlock li {
  font-weight: 400 !important;
}

/* Accordion headings */
body.page-id-376 #sgbAccordion .accordion-button {
  font-weight: 400 !important;
}

/* Accordion content */
body.page-id-376 #sgbAccordion .accordion-body,
body.page-id-376 #sgbAccordion .accordion-body li {
  font-weight: 300 !important;
}

/* =========================================================
   ABOUT US - MOBILE BODY FIXES
   ========================================================= */

@media (max-width: 767px) {
  /* -----------------------------------------------------
	   OUR APPROACH
	   ----------------------------------------------------- */

  body.page-id-376 .posts-header + .container.mb-5 {
    width: calc(100% - 30px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-376 .posts-header + .container.mb-5 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.page-id-376 .posts-header + .container.mb-5 .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-376 .posts-header + .container.mb-5 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    display: block !important;
    margin: 25px auto 0 !important;
  }

  /* -----------------------------------------------------
	   INNOVATION / QUALITY
	   Stack properly on mobile
	   ----------------------------------------------------- */

  body.page-id-376 .approachBlocks {
    width: calc(100% - 30px) !important;
    max-width: none !important;

    margin: 0 auto 35px !important;
    padding: 25px 20px !important;
  }

  body.page-id-376 .approachBlocks .row {
    display: block !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.page-id-376 .approachBlocks .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-376 .approachBlocks .approachBlock,
  body.page-id-376 .approachBlocks .approachBlock.first {
    width: 100% !important;
    max-width: 100% !important;

    padding: 30px 0 !important;
    margin: 0 !important;

    position: relative !important;
  }

  /* Remove desktop centre divider */
  body.page-id-376 .approachBlocks .approachBlock::after,
  body.page-id-376 .approachBlocks .approachBlock.first::after {
    content: none !important;
    display: none !important;
  }

  body.page-id-376 .approachBlocks .approachBlock img {
    width: 90px !important;
    max-width: 90px !important;
    height: auto !important;

    display: block !important;
    margin: 0 0 22px 0 !important;
  }

  body.page-id-376 .approachBlocks .approachBlock h4,
  body.page-id-376 .approachBlocks .approachBlock p {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
  }

  body.page-id-376 .approachBlocks .approachBlock h4 {
    margin-bottom: 16px !important;
  }

  /* -----------------------------------------------------
	   SPECIALITIES / CAPABILITIES / FUTURE FOCUS
	   Compact stacked mobile panel
	   ----------------------------------------------------- */

  body.page-id-376 .specialities {
    width: calc(100% - 30px) !important;

    margin: 35px auto !important;
    padding: 24px 26px !important;

    border-radius: 20px !important;
  }

  body.page-id-376 .specialities .row {
    display: block !important;
    margin: 0 !important;
  }

  body.page-id-376 .specialities .speciality {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    padding: 24px 0 !important;

    border-right: 0 !important;
  }

  body.page-id-376 .specialities .specialityInner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  body.page-id-376 .specialities .speciality::after,
  body.page-id-376 .specialities .specialityInner::after {
    content: none !important;
    display: none !important;
  }

  body.page-id-376 .specialities h4 {
    margin-bottom: 14px !important;
  }

  body.page-id-376 .specialities p {
    margin-bottom: 0 !important;
  }

  /* -----------------------------------------------------
	   FUTURE FOCUS / STRATEGY
	   Stop oversized image and force clean stacking
	   ----------------------------------------------------- */

  body.page-id-376 .strategyBlock {
    width: calc(100% - 30px) !important;

    margin: 35px auto 0 !important;
    padding: 25px 15px 0 !important;
  }

  body.page-id-376 .strategyBlock .row {
    display: block !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.page-id-376 .strategyBlock .col-lg-4.offset-lg-1,
  body.page-id-376 .strategyBlock .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    margin-left: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-376 .strategyBlock img {
    width: 100% !important;
    max-width: 330px !important;
    height: auto !important;

    display: block !important;

    margin: 0 auto 35px !important;
  }

  body.page-id-376 #sgbAccordion {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   ABOUT US - MOBILE FINAL TIDY
   ========================================================= */

@media (max-width: 767px) {
  /* Remove old Innovation / Quality desktop divider */
  body.page-id-376 .approachBlocks .row > .col-12,
  body.page-id-376 .approachBlocks .approachBlock,
  body.page-id-376 .approachBlocks .approachBlock.first {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.page-id-376 .approachBlocks .row > .col-12::before,
  body.page-id-376 .approachBlocks .row > .col-12::after,
  body.page-id-376 .approachBlocks .approachBlock::before,
  body.page-id-376 .approachBlocks .approachBlock::after,
  body.page-id-376 .approachBlocks .approachBlock.first::before,
  body.page-id-376 .approachBlocks .approachBlock.first::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  /* Keep wave underneath accordion rather than behind it */
  body.page-id-376 .strategyBlock {
    position: relative !important;
    z-index: 2 !important;
    background: #fff !important;
  }

  body.page-id-376 .videoBlock {
    position: relative !important;
    z-index: 1 !important;

    margin-top: 0 !important;
  }
}

/* =========================================================
   ABOUT US - MOBILE WAVE FINAL FIX
   ========================================================= */

@media (max-width: 767px) {
  /* Keep wave below accordion */
  body.page-id-376 .videoBlock {
    margin-top: 0 !important;
    margin-bottom: -100px !important;

    height: 280px !important;
    overflow: hidden !important;

    position: relative !important;
    z-index: 1 !important;
  }

  body.page-id-376 .videoBlock .video {
    height: 280px !important;
    overflow: hidden !important;
  }

  body.page-id-376 .videoBlock video {
    width: 100% !important;
    height: auto !important;

    position: relative !important;
    top: 0 !important;
    left: 0 !important;

    margin: 0 !important;

    opacity: 0.55 !important;
    pointer-events: none !important;
  }

  /* Remove iPhone's large native play overlay */
  body.page-id-376 .videoBlock video::-webkit-media-controls,
  body.page-id-376
    .videoBlock
    video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
  }

  /* Reduce the large gap before footer */
  body.page-id-376 .preFooter {
    height: 50px !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   PRODUCTS - MOBILE HERO
   Match signed-off About Us mobile header
   ========================================================= */

@media (max-width: 767px) {
  body.page-template-templateOurProducts
    .posts-header
    .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    align-items: flex-start !important;

    padding: 46px 28px 36px !important;

    margin-bottom: 4rem !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* Product title - same positioning as About Us */
  body.page-template-templateOurProducts
    .posts-header
    .posts-header-background
    h1 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;

    position: relative !important;
    top: 30px !important;

    width: 100% !important;

    font-weight: 400 !important;
    z-index: 2 !important;
  }

  /* Product intro copy - same as About Us */
  body.page-template-templateOurProducts
    .posts-header
    .posts-header-background
    p {
    width: 72% !important;
    max-width: 290px !important;

    margin-bottom: 0 !important;
    line-height: 1.4 !important;

    position: relative !important;
    top: 30px !important;

    font-weight: 400 !important;
    z-index: 2 !important;
  }

  /* Keep Products video filling the hero */
  body.page-template-templateOurProducts .posts-header video {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   PRODUCTS - FILTER TABS + ACTUAL PRODUCTS
   DESKTOP FIGMA MATCH
   ========================================================= */

@media (min-width: 901px) {
  /* -----------------------------------------
	   FILTER / CATEGORY TABS
	   ----------------------------------------- */

  .productResultsFilter {
    width: calc(100% - 80px) !important;
    max-width: 1225px !important;

    margin: 38px auto 62px !important;
    padding: 0 !important;
  }

  .productResultsFilter > .row,
  .productResultsFilter .col-12 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .medicineCategories {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

    gap: 100px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .categoryLabel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}

/* -----------------------------------------
   ACTIVE / INACTIVE TAB ICONS
   ----------------------------------------- */

.categoryImage--default {
  display: block !important;
}

.categoryImage--active {
  display: none !important;
}

/* Only the actually selected radio gets the active icon */
input.filter:checked + .categoryLabel .categoryImage--default {
  display: none !important;
}

input.filter:checked + .categoryLabel .categoryImage--active {
  display: block !important;
}

/* =========================================================
   PRODUCT FILTER LABELS
   Keep identical in every state
   ========================================================= */

/* -----------------------------------------
	   PRODUCTS CONTAINER
	   ----------------------------------------- */

/* ---------------------------------------------------------
   MOBILE / TABLET
   --------------------------------------------------------- */

/* =========================================================
   PRODUCTS - FILTER + PRODUCT CARDS
   MOBILE FINAL
   ========================================================= */

@media (max-width: 900px) {
  /* -----------------------------------------------------
	   FILTER TABS
	   ----------------------------------------------------- */

  .productResultsFilter {
    width: calc(100% - 30px) !important;
    max-width: none !important;

    margin: 25px auto 35px !important;
    padding: 0 !important;
  }

  .productResultsFilter > .row,
  .productResultsFilter .col-12 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .medicineCategories {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 22px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* FILTER ICONS */

  .medicineCategories .categoryImage--default {
    display: block !important;
  }

  .medicineCategories .categoryImage--active {
    display: none !important;
  }

  .medicineCategories
    input.filter:checked
    + .categoryLabel
    .categoryImage--default {
    display: none !important;
  }

  .medicineCategories
    input.filter:checked
    + .categoryLabel
    .categoryImage--active {
    display: block !important;
  }

  /* FILTER WORDING
	   Never changes when selected */

  .medicineCategories .categoryLabel .row.text-center p,
  .medicineCategories input.filter:checked + .categoryLabel .row.text-center p,
  .medicineCategories input.filter.active + .categoryLabel .row.text-center p {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;

    opacity: 1 !important;
    transform: none !important;
    letter-spacing: normal !important;
  }
}

@media (min-width: 901px) {
  /* -----------------------------------------------------
	   Overall three-panel layout
	   ----------------------------------------------------- */

  .horizontalExpandingBlocks .horizontalPanels {
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* -----------------------------------------------------
	   Individual panels
	   ----------------------------------------------------- */

  .horizontalExpandingBlocks .horizontalPanels .panel {
    position: relative !important;

    flex-grow: 1;
    flex-basis: 0;

    min-width: 0 !important;
    min-height: 390px !important;

    padding: 42px 36px 34px !important;

    border-radius: 28px !important;
    overflow: hidden !important;

    cursor: pointer;

    transition:
      flex-grow 0.45s ease,
      flex-basis 0.45s ease,
      background-color 0.35s ease !important;
  }

  /* -----------------------------------------------------
	   Widths once a panel is selected
	   Approx. 44 / 28 / 28 like Figma
	   ----------------------------------------------------- */

  .horizontalExpandingBlocks .horizontalPanels .panel.active {
    flex-grow: 44 !important;
    flex-basis: 0 !important;
  }

  .horizontalExpandingBlocks .horizontalPanels .panel.inactive {
    flex-grow: 28 !important;
    flex-basis: 0 !important;
  }

  /* -----------------------------------------------------
	   Headings
	   ----------------------------------------------------- */

  .horizontalExpandingBlocks .horizontalPanels .panel h3 {
    margin: 0 !important;

    max-width: 95% !important;

    font-weight: 400 !important;
    line-height: 1.15 !important;

    transition: color 0.3s ease !important;
  }

  .horizontalExpandingBlocks .horizontalPanels .panel.active h3 {
    font-size: clamp(28px, 2.1vw, 38px) !important;
    margin-bottom: 22px !important;
  }

  .horizontalExpandingBlocks .horizontalPanels .panel.inactive h3 {
    font-size: clamp(22px, 1.5vw, 28px) !important;
  }

  /* -----------------------------------------------------
	   Arrow button
	   ----------------------------------------------------- */

  .horizontalExpandingBlocks .horizontalPanels .panel .toggle {
    position: absolute !important;

    right: 28px !important;
    bottom: 28px !important;

    margin: 0 !important;
  }

  /* -----------------------------------------------------
	   MIDDLE PANEL
	   White text + arrow when expanded
	   ----------------------------------------------------- */

  .horizontalExpandingBlocks .horizontalPanels .panel:nth-child(2).active,
  .horizontalExpandingBlocks .horizontalPanels .panel:nth-child(2).active h3,
  .horizontalExpandingBlocks .horizontalPanels .panel:nth-child(2).active p {
    color: #ffffff !important;
  }

  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path {
    stroke: #ffffff !important;
  }
}

/* =========================================================
   PRODUCTS PANELS - HIDE RAW BODY TEXT UNTIL HOVER
   ========================================================= */

@media (min-width: 901px) {
  /* The body copy is a raw text node, so collapse it by default */
  .horizontalExpandingBlocks .horizontalPanels .panel {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  /* Keep headings visible */
  .horizontalExpandingBlocks .horizontalPanels .panel h3 {
    color: #29234f !important;
    line-height: 1.15 !important;
  }

  /* Reveal body copy on hover */
  .horizontalExpandingBlocks .horizontalPanels .panel:hover {
    font-size: 18px !important;
    line-height: 1.45 !important;
    color: #202020 !important;
  }

  /* Middle active panel heading stays white */
  .horizontalExpandingBlocks .horizontalPanels .panel:nth-child(2).active h3 {
    color: #ffffff !important;
  }

  /* Middle active body copy becomes white ONLY on hover */
  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active:hover {
    color: #ffffff !important;
  }

  /* Keep the arrow visible */
  .horizontalExpandingBlocks .horizontalPanels .panel .toggle {
    font-size: initial !important;
    line-height: normal !important;
  }

  /* White arrow on active middle panel */
  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path {
    stroke: #ffffff !important;
  }
}

/* Keep arrow icons visible even when body text is hidden */
@media (min-width: 901px) {
  .horizontalExpandingBlocks .horizontalPanels .panel .toggle {
    color: #29234f !important;
    border-color: #29234f !important;
  }

  .horizontalExpandingBlocks .horizontalPanels .panel .toggle svg,
  .horizontalExpandingBlocks .horizontalPanels .panel .toggle svg path {
    stroke: #29234f !important;
  }

  /* Middle active panel keeps white arrow */
  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path {
    stroke: #ffffff !important;
  }
}
/* =========================================================
   PRODUCTS - FORCE ALL MEDICINE ICONS DARK
   ========================================================= */

/* =========================================================
   PRODUCTS - HORIZONTAL PANELS
   MOBILE
   ========================================================= */

@media (max-width: 900px) {
  .productPage .horizontalExpandingBlocks .horizontalPanels {
    display: block !important;
    width: 100% !important;
  }

  .productPage .horizontalExpandingBlocks .horizontalPanels .panel {
    position: relative !important;

    width: 100% !important;
    min-height: 260px !important;

    margin-bottom: 16px !important;
    padding: 32px 28px 30px !important;

    border-radius: 26px !important;
    overflow: hidden !important;

    /* Hide the raw body-copy text */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;

    transition:
      background-color 0.45s ease,
      min-height 0.4s ease !important;
  }

  /* -------------------------------
	   HEADINGS
	   ------------------------------- */

  .productPage .horizontalExpandingBlocks .horizontalPanels .panel h3 {
    display: block !important;

    margin: 0 !important;
    max-width: 88% !important;

    color: #29234f !important;

    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
  }

  /* -------------------------------
	   ARROWS
	   Always visible
	   ------------------------------- */

  .productPage .horizontalExpandingBlocks .horizontalPanels .panel .toggle {
    position: absolute !important;

    right: 24px !important;
    bottom: 24px !important;

    margin: 0 !important;

    color: #29234f !important;
    border-color: #29234f !important;

    font-size: initial !important;
    line-height: normal !important;
  }

  .productPage .horizontalExpandingBlocks .horizontalPanels .panel .toggle svg,
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel
    .toggle
    svg
    path {
    stroke: #29234f !important;
  }

  /* -------------------------------
	   COPY APPEARS WHEN TAPPED
	   Existing script adds .active
	   ------------------------------- */

  .productPage .horizontalExpandingBlocks .horizontalPanels .panel.active {
    font-size: 17px !important;
    line-height: 1.45 !important;
    color: #202020 !important;

    min-height: 340px !important;
  }

  /* -------------------------------
	   MIDDLE PANEL
	   White text when selected
	   ------------------------------- */

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active {
    color: #ffffff !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    h3 {
    color: #ffffff !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path {
    stroke: #ffffff !important;
  }

  /* -------------------------------
	   SCROLL-ACTIVE COLOURS
	   ------------------------------- */

  .productPage .horizontalPanels .panel:nth-child(1).scroll-active {
    background: var(--leftExpand) !important;
  }

  .productPage .horizontalPanels .panel:nth-child(2).scroll-active {
    background: var(--newCenter) !important;
  }

  .productPage .horizontalPanels .panel:nth-child(3).scroll-active {
    background: var(--rightExpand) !important;
  }
}

/* =========================================================
   PRODUCTS PANELS - MOBILE FINAL TIDY
   ========================================================= */

@media (max-width: 900px) {
  /* When opened, leave a protected area for the arrow */
  .productPage .horizontalExpandingBlocks .horizontalPanels .panel.active {
    height: auto !important;
    min-height: 360px !important;

    padding-left: 28px !important;
    padding-top: 32px !important;
    padding-right: 70px !important;
    padding-bottom: 100px !important;
  }

  /* Heading can use the available width without touching arrow */
  .productPage .horizontalExpandingBlocks .horizontalPanels .panel.active h3 {
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  /* Keep arrow safely in its own space */
  .productPage .horizontalExpandingBlocks .horizontalPanels .panel .toggle {
    right: 24px !important;
    bottom: 24px !important;
    z-index: 5 !important;
  }

  /* -----------------------------------------
	   MIDDLE PANEL - WHITE WHEN OPEN
	   ----------------------------------------- */

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active {
    color: #ffffff !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    h3 {
    color: #ffffff !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path {
    stroke: #ffffff !important;
  }
}

@media (max-width: 900px) {
  .productPage .horizontalExpandingBlocks .horizontalPanels .panel.active h3 {
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   PRODUCTS - REDUCE SPACE BEFORE FOOTER ON MOBILE
   ========================================================= */

@media (max-width: 900px) {
  .productPage .horizontalExpandingBlocks {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .productPage .preFooter {
    margin-top: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
  }
}

/* =========================================================
   GLOBAL FOOTER - FIGMA ALIGNMENT
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 901px) {
  /*
	footer > .container:first-child > .row {
		align-items: flex-start !important;
	}

	footer > .container:first-child > .row > .col-12.col-lg-4 {
		align-self: flex-start !important;
		padding-top: 0 !important;
		padding-left: 70px !important;
	}

	footer > .container:first-child > .row > .col-12.col-lg-4 > img {
		display: block !important;

		width: auto !important;
		max-width: 285px !important;
		height: auto !important;

		margin-top: -4px !important;
		margin-left: 50px !important;
		margin-right: auto !important;
	}
		*/
}

/* ---------------------------------------------------------
   REMOVE DESIGN BANK CREDIT
   --------------------------------------------------------- */

footer .footerBottom .copyright > p:nth-of-type(2) {
  display: none !important;
}

/* =========================================================
   MOBILE / TABLET FOOTER
   ========================================================= */

/* =========================================================
   COMPLIANCE - MOBILE TIDY
   Page ID 297
   ========================================================= */

@media (max-width: 900px) {
  /* -----------------------------------------------------
	   HERO
	   Match signed-off About Us mobile text positioning
	   ----------------------------------------------------- */

  body.page-id-297 .posts-header .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    align-items: flex-start !important;

    padding: 46px 28px 36px !important;

    /* Less space before the three panels */
    margin-bottom: 2rem !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    position: relative !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   COMPLIANCE - MOBILE HERO FINAL POSITIONING
   ========================================================= */

@media (max-width: 900px) {
  /* Tighten the gap underneath the hero */
  body.page-id-297 .posts-header .posts-header-background {
    margin-bottom: 1rem !important;
  }

  /* Shift image crop away from the person's back */
  body.page-id-297 .posts-header .posts-header-background {
    background-position: 60% center !important;
  }
}

/* =========================================================
   COMPLIANCE PAGE - MOBILE HERO SHAPE + POSITIONING
   ========================================================= */
@media (max-width: 900px) {
  /* Hero wrapper */
  body.page-id-297 .posts-header {
    margin-bottom: 1.25rem !important;
  }

  /* Soft overlay */
  body.page-id-297 .posts-header .posts-header-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(245, 243, 252, 0.72);
    z-index: 1;
    pointer-events: none;
  }

  /* Bottom-left shaped tab / cut-out */
  body.page-id-297 .posts-header .posts-header-background::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 150px;
    height: 95px;
    background: #ffffff;
    border-top-right-radius: 42px;
    z-index: 2;
    pointer-events: none;
  }
}

/* =========================================================
   COMPLIANCE - FINAL MOBILE HERO
   Shaped artwork baked into background image
   ========================================================= */

@media (max-width: 767px) {
  body.page-id-297 .posts-header .posts-header-background {
    height: auto !important;
    min-height: 550px !important;

    background-image: url("https://siinovia.com/wp-content/uploads/2026/10/Compliance_Mobil-2.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    align-items: flex-start !important;

    padding: 80px 28px 40px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;

    overflow: hidden !important;
    position: relative !important;
  }

  /* Remove the CSS-generated shape/overlay */
  body.page-id-297 .posts-header .posts-header-background::before,
  body.page-id-297 .posts-header .posts-header-background::after {
    content: none !important;
    display: none !important;
  }

  /* Heading */
  body.page-id-297 .posts-header .posts-header-background h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;
    z-index: 2 !important;
  }

  /* Intro copy */
  body.page-id-297 .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* Reduce gap into the three Compliance panels */
  body.page-id-297 .posts-header {
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   COMPLIANCE - MATCH ABOUT US HERO TOP SPACING
   ========================================================= */

@media (max-width: 767px) {
  /* Remove theme spacing above Compliance hero */
  body.page-id-297 .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.page-id-297 .posts-header .posts-header-background {
    margin-top: 0 !important;
  }
}
@media (max-width: 767px) {
  body.page-id-297 .posts-header {
    position: relative !important;
    top: -55px !important;
    margin-bottom: -55px !important;
  }
}

/* =========================================================
   COMPLIANCE - MOBILE PANELS FINAL TIDY
   ========================================================= */

@media (max-width: 900px) {
  body.page-id-297 .horizontalPanels .panel:nth-child(1).scroll-active {
    background: var(--leftExpand) !important;
  }

  body.page-id-297 .horizontalPanels .panel:nth-child(3).scroll-active {
    background: var(--rightExpand) !important;
  }

  /* Middle card text/arrow white when highlighted */
  body.page-id-297 .horizontalPanels .panel:nth-child(2).scroll-active,
  body.page-id-297 .horizontalPanels .panel:nth-child(2).scroll-active h3 {
    color: #ffffff !important;
  }

  body.page-id-297 .horizontalPanels .panel:nth-child(2).scroll-active .toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  body.page-id-297
    .horizontalPanels
    .panel:nth-child(2).scroll-active
    .toggle
    svg,
  body.page-id-297
    .horizontalPanels
    .panel:nth-child(2).scroll-active
    .toggle
    svg
    path {
    stroke: #ffffff !important;
  }
}

/* =========================================================
   PARTNERSHIPS - MOBILE MAIN CONTENT REFLOW
   Put puzzle image BETWEEN the two text sections
   Page ID 304
   ========================================================= */

@media (max-width: 767px) {
  /* Main section beneath hero */
  body.page-id-304 .posts-header + .container {
    width: calc(100% - 40px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 35px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Turn this row into a 4-part mobile sequence */
  body.page-id-304 .posts-header + .container > .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;

    margin: 0 !important;
    row-gap: 0 !important;
  }

  /* The text column contains BOTH headings + paragraph.
	   display:contents lets us position those children
	   separately within the grid. */
  body.page-id-304 .posts-header + .container > .row > div:nth-child(2) {
    display: contents !important;
  }

  /* -----------------------------------------------------
	   1. "WE WELCOME CONVERSATIONS..."
	   ----------------------------------------------------- */

  body.page-id-304
    .posts-header
    + .container
    > .row
    > div:nth-child(2)
    > h3:first-of-type {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 26px !important;

    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;

    text-align: left !important;
  }

  /* -----------------------------------------------------
	   2. PUZZLE IMAGE
	   ----------------------------------------------------- */

  body.page-id-304 .posts-header + .container > .row > div:first-child {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 36px !important;
    padding: 0 !important;
  }

  body.page-id-304 .posts-header + .container > .row > div:first-child img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 26px !important;
  }

  /* -----------------------------------------------------
	   3. "OUR GROWTH AND INNOVATION STRATEGY"
	   ----------------------------------------------------- */

  body.page-id-304
    .posts-header
    + .container
    > .row
    > div:nth-child(2)
    > h3.mb-3.mt-3 {
    grid-column: 1 !important;
    grid-row: 3 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 18px !important;

    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;

    text-align: left !important;
  }

  /* -----------------------------------------------------
	   4. GROWTH & INNOVATION BODY COPY
	   ----------------------------------------------------- */

  body.page-id-304 .posts-header + .container > .row > div:nth-child(2) > p {
    grid-column: 1 !important;
    grid-row: 4 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1.45 !important;

    text-align: left !important;
  }
}

/* =========================================================
   PARTNERSHIPS - MOBILE OPPORTUNITIES
   Page ID 304
   ========================================================= */

@media (max-width: 767px) {
  body.page-id-304 .opportunitiesBlock {
    display: block !important;

    width: calc(100% - 40px) !important;
    max-width: none !important;

    margin: -30px auto 0 !important;
    padding: 0 !important;
  }

  body.page-id-304 .opportunitiesBlock .opportunities {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    margin: 0 !important;
    padding: 32px 10px !important;

    border-right: 0 !important;

    text-align: left !important;
  }

  /* Remove any developer divider lines */
  body.page-id-304 .opportunitiesBlock .opportunities::before,
  body.page-id-304 .opportunitiesBlock .opportunities::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  /* Icons - same sort of scale as About Us */
  body.page-id-304 .opportunitiesBlock .opportunities img {
    display: block !important;

    width: 84px !important;
    max-width: 84px !important;
    height: auto !important;

    margin: 0 0 20px 0 !important;
  }

  /* Headings */
  body.page-id-304 .opportunitiesBlock .opportunities h3 {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 14px !important;

    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    text-align: left !important;
  }

  /* Body copy */
  body.page-id-304 .opportunitiesBlock .opportunities p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1.45 !important;

    text-align: left !important;
  }
}

/* =========================================================
   PARTNERSHIPS - MOBILE SPACING / CENTRING
   Page ID 304
   ========================================================= */

@media (max-width: 767px) {
  /* Remove excess gap between hero/header and
	   "We welcome conversations..." */
  body.page-id-304 .posts-header {
    margin-bottom: -90px !important;
    padding-bottom: 0px !important;
  }

  body.page-id-304 .posts-header + .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* -----------------------------------------
	   AREAS FOR OPPORTUNITIES
	   Centre heading + copy
	   ----------------------------------------- */

  body.page-id-304 .posts-header + .container + .container {
    text-align: center !important;
  }

  body.page-id-304 .posts-header + .container + .container h2,
  body.page-id-304 .posts-header + .container + .container h3,
  body.page-id-304 .posts-header + .container + .container p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-id-304 .posts-header + .container + .container p {
    max-width: 90% !important;
  }
}

/* =========================================================
   PARTNERSHIPS - MOBILE HERO TEXT
   Match Compliance EXACTLY
   ========================================================= */

@media (max-width: 767px) {
  /* Remove any extra space above hero */
  body.page-id-304 .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Same internal positioning as Compliance */
  body.page-id-304 .posts-header .posts-header-background {
    align-items: flex-start !important;

    padding: 45px 28px 40px !important;

    margin-top: 0 !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* PARTNERSHIPS HEADING */
  body.page-id-304 .posts-header .posts-header-background h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* PARTNERSHIPS INTRO COPY */
  body.page-id-304 .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 2 !important;
  }
}

/* =========================================================
   PARTNERSHIPS - DESKTOP FIGMA ALIGNMENT
   Page ID 304
   ========================================================= */

@media (min-width: 901px) {
  /* =====================================================
	   PUZZLE IMAGE / INTRO SECTION
	   ===================================================== */

  body.page-id-304 .posts-header + .container {
    width: calc(100% - 60px) !important;
    max-width: 1900px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 25px !important;
    margin-bottom: 55px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-304 .posts-header + .container > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    gap: 85px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Image column - Figma is considerably narrower */
  body.page-id-304 .posts-header + .container > .row > div:first-child {
    flex: 0 0 39% !important;
    width: 39% !important;
    max-width: 760px !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  body.page-id-304 .posts-header + .container > .row > div:first-child img {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;

    margin: 0 !important;
  }

  /* Text column */
  body.page-id-304 .posts-header + .container > .row > div:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 920px !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* Main statement */
  body.page-id-304
    .posts-header
    + .container
    > .row
    > div:nth-child(2)
    > h3:first-of-type {
    max-width: 900px !important;

    margin: 0 0 42px !important;

    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
  }

  /* Growth heading */
  body.page-id-304
    .posts-header
    + .container
    > .row
    > div:nth-child(2)
    > h3.mb-3.mt-3 {
    margin: 0 0 24px !important;

    font-size: 29px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
  }

  /* Growth paragraph */
  body.page-id-304 .posts-header + .container > .row > div:nth-child(2) > p {
    max-width: 900px !important;

    margin: 0 !important;

    color: #8581a4 !important;

    font-size: 19px !important;
    line-height: 1.42 !important;
    font-weight: 400 !important;
  }

  /* =========================================================
   PARTNERSHIPS - AREAS FOR OPPORTUNITIES
   DESKTOP - FIGMA PROPORTIONS
   ========================================================= */

  @media (min-width: 768px) {
    body.page-id-304 .container:has(> .impactCta) {
      width: calc(100% - 54px) !important;
      max-width: none !important;

      margin-left: auto !important;
      margin-right: auto !important;

      padding: 0 !important;
    }

    /* Lavender panel */
    body.page-id-304 .impactCta {
      height: auto !important;
      min-height: 0 !important;

      padding: 90px 70px 56px !important;
      margin: 0 !important;

      border-radius: 28px !important;

      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;

      gap: 0 !important;
    }

    /* Remove Bootstrap spacing */
    body.page-id-304 .impactCta > .row,
    body.page-id-304 .impactCta .row.content {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;

      margin: 0 !important;
      padding: 0 !important;

      --bs-gutter-x: 0 !important;
      --bs-gutter-y: 0 !important;

      justify-content: center !important;
    }

    body.page-id-304 .impactCta > .row > div,
    body.page-id-304 .impactCta .row.content > div {
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Heading */
    body.page-id-304 .impactCta h3 {
      margin: 0 0 28px !important;
      padding: 0 !important;

      font-size: 32px !important;
      line-height: 1.15 !important;
      font-weight: 400 !important;

      text-align: center !important;
    }

    /* Body copy */
    body.page-id-304 .impactCta .row.content > div > div {
      width: 100% !important;
      max-width: 760px !important;

      margin: 0 auto !important;
      padding: 0 !important;

      color: #8581a4 !important;

      font-size: 18px !important;
      line-height: 1.42 !important;
      font-weight: 300 !important;

      text-align: center !important;
    }

    /* Button */
    body.page-id-304 .impactCta .siiButton {
      width: auto !important;

      margin: 36px 0 0 !important;
      padding: 0 !important;

      align-self: center !important;
    }

    /* Slightly smaller gap before the three icons */
    body.page-id-304 .container:has(.opportunitiesBlock) {
      margin-top: 40px !important;
    }
  }

  /* =====================================================
	   THREE OPPORTUNITY COLUMNS
	   ===================================================== */

  body.page-id-304 .posts-header + .container + .container + .container {
    width: calc(100% - 130px) !important;
    max-width: 1850px !important;

    margin: 55px auto 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-304 .opportunitiesBlock {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    margin: 0 !important;
  }

  body.page-id-304 .opportunitiesBlock .opportunities {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;

    padding: 0 60px !important;

    border-right: 1px solid #d8d7df !important;

    text-align: left !important;
  }

  body.page-id-304 .opportunitiesBlock .opportunities:first-child {
    padding-left: 0 !important;
  }

  body.page-id-304 .opportunitiesBlock .opportunities:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  /* Icons - smaller like Figma */
  body.page-id-304 .opportunitiesBlock .opportunities img {
    display: block !important;

    width: 66px !important;
    max-width: 66px !important;
    height: auto !important;

    margin: 0 0 22px !important;
  }

  /* Headings */
  body.page-id-304 .opportunitiesBlock .opportunities h3 {
    margin: 0 0 12px !important;

    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
  }

  /* Copy */
  body.page-id-304 .opportunitiesBlock .opportunities p {
    max-width: 390px !important;

    margin: 0 !important;

    color: #8581a4 !important;

    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

  /* =====================================================
	   REDUCE EMPTY SPACE BEFORE FOOTER
	   ===================================================== */

  body.page-id-304 .preFooter {
    height: 80px !important;
    min-height: 80px !important;

    margin-top: 45px !important;
  }
}

/* =========================================================
   PARTNERSHIPS - SHOW CONTACT BUTTON ON MOBILE
   ========================================================= */

@media (max-width: 767px) {
  body.page-id-304 .impactCta .siiButton {
    display: flex !important;
    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    margin-top: 24px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile top navigation logo */
@media (max-width: 900px) {
  nav.sticky .logo img {
    width: auto !important;
    max-width: 220px !important;
    max-height: 60px !important;
    height: auto !important;
  }
}

/* Compliance mobile - restore rounded top corners */
@media (max-width: 767px) {
  body.page-id-297 .posts-header .posts-header-background {
    border-top-left-radius: 42px !important;
    border-top-right-radius: 42px !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   COMPLIANCE - MOBILE HEADER FINAL MATCH TO PARTNERSHIPS
   ========================================================= */

@media (max-width: 767px) {
  body.page-id-297 .posts-header {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.page-id-297 .posts-header .posts-header-background {
    align-items: flex-start !important;

    padding: 45px 28px 40px !important;

    margin-top: 0 !important;

    border-radius: 42px !important;
    overflow: hidden !important;

    position: relative !important;
  }
}

/* =========================================================
   NEWS & UPDATES - DESKTOP FIGMA ALIGNMENT
   ========================================================= */

@media (min-width: 901px) {
  /* Reduce the large gap below the hero */
  body:has(#posts-grid) .posts-header .posts-header-background {
    margin-bottom: 4.5rem !important;
  }

  body:has(#posts-grid) .posts-header .headerContent h1 {
    color: #29234f !important;
  }

  /* News hero intro - match Partnerships */
  body:has(#posts-grid) .posts-header .headerContent {
    color: #8581a4 !important;
    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

  /* -----------------------------------------
	   NEWS SECTION CONTAINER
	   ----------------------------------------- */

  body:has(#posts-grid) .container:has(#posts-grid) {
    width: calc(100% - 190px) !important;
    max-width: 1345px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* News heading */
  body:has(#posts-grid) .container:has(#posts-grid) h2 {
    margin: 0 0 28px !important;

    font-size: 38px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  /* -----------------------------------------
	   FOUR NEWS CARDS
	   ----------------------------------------- */

  body:has(#posts-grid) #posts-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    column-gap: 10px !important;
    row-gap: 30px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Images */
  body:has(#posts-grid) #posts-grid .post-card__image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 1.56 / 1 !important;
    object-fit: cover !important;

    border-radius: 14px !important;

    margin: 0 !important;
  }

  /* Space between image and title */
  body:has(#posts-grid) #posts-grid .post-card__content {
    padding: 20px 0 0 !important;
    margin: 0 !important;
  }

  /* Card titles */
  body:has(#posts-grid) #posts-grid .post-card__title {
    margin: 0 !important;

    font-size: 22px !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  /* No View More / Read More buttons */
  body:has(#posts-grid) #posts-grid .siiButton,
  body:has(#posts-grid) .container:has(#posts-grid) > .siiButton {
    display: none !important;
  }
}

/* =========================================================
   NEWS & UPDATES - MOBILE
   Match other internal mobile pages
   ========================================================= */

@media (max-width: 767px) {
  /* -----------------------------------------
	   HERO
	   ----------------------------------------- */

  body:has(#posts-grid) .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body:has(#posts-grid) .posts-header .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    align-items: flex-start !important;

    padding: 45px 28px 40px !important;

    margin-top: 0 !important;
    margin-bottom: 28px !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* Hero heading */
  body:has(#posts-grid) .posts-header .posts-header-background h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* Hero body text */
  body:has(#posts-grid) .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* -----------------------------------------
	   NEWS SECTION
	   ----------------------------------------- */

  body:has(#posts-grid) .container:has(#posts-grid) {
    width: calc(100% - 40px) !important;
    max-width: none !important;

    margin: 0 auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Bring NEWS heading closer to hero */
  body:has(#posts-grid) .container:has(#posts-grid) h2 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;

    font-size: 34px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
  }

  /* -----------------------------------------
	   POSTS
	   ----------------------------------------- */

  body:has(#posts-grid) #posts-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    row-gap: 22px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Images */
  body:has(#posts-grid) #posts-grid .post-card__image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 1.56 / 1 !important;
    object-fit: cover !important;

    border-radius: 16px !important;

    margin: 0 !important;
  }

  /* Tighten image to title */
  body:has(#posts-grid) #posts-grid .post-card__content {
    padding: 14px 0 0 !important;
    margin: 0 !important;
  }

  /* Titles */
  body:has(#posts-grid) #posts-grid .post-card__title {
    margin: 0 !important;

    font-size: 24px !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  /* Keep View More / Read More hidden */
  body:has(#posts-grid) #posts-grid .siiButton,
  body:has(#posts-grid) .container:has(#posts-grid) > .siiButton {
    display: none !important;
  }
}

/* =========================================================
   CAREERS - MOBILE
   Match other internal mobile pages
   ========================================================= */

@media (max-width: 767px) {
  /* -----------------------------------------
	   HERO
	   ----------------------------------------- */

  body[class*="career"] .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body[class*="career"] .posts-header .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    align-items: flex-start !important;

    padding: 45px 28px 40px !important;

    margin-top: 0 !important;
    margin-bottom: 28px !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* Hero heading */
  body[class*="career"] .posts-header .posts-header-background h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* Hero body text */
  body[class*="career"] .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* -----------------------------------------
	   WHY SIINOVIA
	   Pull first section closer to hero
	   ----------------------------------------- */

  body[class*="career"] .posts-header + .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[class*="career"] .posts-header + .container h2,
  body[class*="career"] .posts-header + .container h3 {
    margin-top: 0 !important;
  }

  /* -----------------------------------------
	   GET IN TOUCH
	   Reduce white space above and below
	   ----------------------------------------- */

  body[class*="career"] .container:has(.impactCta) {
    margin-top: 30px !important;
    margin-bottom: 25px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body[class*="career"] .impactCta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Reduce space between Get In Touch and footer */
  body[class*="career"] .preFooter {
    margin-top: 90px !important;
    height: 45px !important;
    min-height: 45px !important;
  }
}

/* =========================================================
   CONTACT PAGE
   DESKTOP + MOBILE
   Page ID 233
   ========================================================= */

/* =========================================================
   DESKTOP
   ========================================================= */

/* MOBILE */
@media (max-width: 767px) {
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child {
    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;

    padding: 28px 24px !important;

    border-radius: 22px !important;
  }

  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child
    img {
    width: auto !important;
    max-width: 250px !important;
    height: auto !important;

    margin: 0 0 22px !important;
  }

  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child
    p {
    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }
}

@media (min-width: 901px) {
  /* -----------------------------------------
	   HERO
	   ----------------------------------------- */

  body.page-id-233 .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.page-id-233 .posts-header .posts-header-background {
    margin-left: auto !important;
    margin-right: auto !important;

    /* Figma has considerably less space below hero */
    margin-bottom: 70px !important;
  }

  /* -----------------------------------------
	   OFFICE / ENQUIRIES SECTION
	   Narrower and centred like Figma
	   ----------------------------------------- */

  body.page-id-233 .posts-header + .container {
    width: calc(100% - 80px) !important;
    max-width: 1230px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-233 .posts-header + .container > .row {
    display: grid !important;

    grid-template-columns:
      minmax(360px, 39%)
      minmax(0, 1fr) !important;

    gap: 32px !important;
    align-items: start !important;

    margin: 0 !important;

    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  body.page-id-233 .posts-header + .container > .row > div {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* -----------------------------------------
	   LEFT COLUMN
	   Office + Yellow Card
	   ----------------------------------------- */

  body.page-id-233 .posts-header + .container > .row > div:first-child {
    display: flex !important;
    flex-direction: column !important;

    gap: 38px !important;
  }

  body.page-id-233 .posts-header + .container > .row > div:first-child > * {
    width: 100% !important;

    margin: 0 !important;

    border-radius: 20px !important;

    box-sizing: border-box !important;
  }

  /* Office panel */
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:first-child {
    min-height: 355px !important;

    padding: 36px 36px 32px !important;
  }

  /* =========================================================
   CONTACT - YELLOW CARD
   Match Figma
   ========================================================= */

  /* DESKTOP */

  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child {
    width: 100% !important;
    max-width: 470px !important;

    min-height: 0 !important;

    padding: 30px 32px 28px !important;

    margin: 0 !important;

    border-radius: 24px !important;

    box-sizing: border-box !important;
  }

  /* Yellow Card logo */
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child
    img {
    display: block !important;

    width: auto !important;
    max-width: 275px !important;
    height: auto !important;

    margin: 0 0 24px !important;
  }

  /* Body copy */
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child
    p {
    margin: 0 !important;

    max-width: 390px !important;

    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    > *:last-child
    a {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;

    text-decoration: underline !important;
  }

  /* Contact headings - Office + Enquiries exact match */
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:first-child
    .address.contactBlock
    > h4,
  body.page-id-233 .posts-header + .container > .row > div:last-child h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
  }

  /* -----------------------------------------
	   ENQUIRIES FORM
	   ----------------------------------------- */

  body.page-id-233 .posts-header + .container > .row > div:last-child {
    align-self: start !important;
    margin-top: 0 !important;
    background: #f5f5f5 !important;
    border-radius: 20px !important;

    padding: 36px 44px 32px !important;

    box-sizing: border-box !important;
  }

  /* Remove original purple inner Enquiries panel
   and remove its extra internal spacing */
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:last-child
    .cf7-contact-wrap,
  body.page-id-233 .posts-header + .container > .row > div:last-child .cf7,
  body.page-id-233 .posts-header + .container > .row > div:last-child .wpcf7,
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:last-child
    .wpcf7
    form {
    background: transparent !important;
    background-color: transparent !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Labels */
  body.page-id-233 .posts-header + .container > .row > div:last-child label {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Inputs */
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:last-child
    input[type="text"],
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:last-child
    input[type="email"],
  body.page-id-233
    .posts-header
    + .container
    > .row
    > div:last-child
    input[type="tel"] {
    min-height: 44px !important;
    height: 44px !important;
  }

  /* Message field */
  body.page-id-233 .posts-header + .container > .row > div:last-child textarea {
    height: 210px !important;
    min-height: 210px !important;
  }

  /* -----------------------------------------
	   REDUCE WHITE SPACE BEFORE FOOTER
	   ----------------------------------------- */

  body.page-id-233 .preFooter {
    height: 70px !important;
    min-height: 70px !important;

    margin-top: 45px !important;
  }
}

/* =========================================================
   MOBILE
   Hero only - leave Contact content as it is
   ========================================================= */

@media (max-width: 767px) {
  body.page-id-233 .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.page-id-233 .posts-header .posts-header-background {
    height: auto !important;
    min-height: 430px !important;

    align-items: flex-start !important;

    padding: 45px 28px 40px !important;

    margin-top: 0 !important;
    margin-bottom: 28px !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* Heading */
  body.page-id-233 .posts-header .posts-header-background h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;

    z-index: 2 !important;
  }

  /* Intro text */
  body.page-id-233 .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 2 !important;
  }
}

/* =========================================================
   CONTACT FORM - PRIVACY STATEMENT
   Page ID 233
   ========================================================= */

body.page-id-233 .form-privacy {
  margin: 0 0 0 auto !important;

  width: auto !important;

  color: #4f4d52 !important;

  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;

  text-align: right !important;
}

body.page-id-233 .form-privacy a {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* MOBILE */
@media (max-width: 767px) {
  body.page-id-233 .form-privacy {
    width: 100% !important;

    margin-top: 16px !important;
    margin-left: 0 !important;

    font-size: 16px !important;
    line-height: 1.4 !important;

    text-align: left !important;
  }
}

/* =========================================================
   PRODUCTS - HERO TEXT FINAL MATCH
   Match other internal pages
   ========================================================= */

/* DESKTOP / TABLET */
body.page-template-templateOurProducts
  .posts-header
  .posts-header-background
  h1 {
  font-weight: 400 !important;
  color: #29234f !important;
}

body.page-template-templateOurProducts
  .posts-header
  .posts-header-background
  p {
  max-width: 620px !important;

  color: #8581a4 !important;

  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* MOBILE */
@media (max-width: 767px) {
  body.page-template-templateOurProducts .posts-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.page-template-templateOurProducts
    .posts-header
    .posts-header-background {
    align-items: flex-start !important;

    padding: 45px 28px 40px !important;

    margin-top: 0 !important;

    position: relative !important;
    overflow: hidden !important;
  }

  body.page-template-templateOurProducts
    .posts-header
    .posts-header-background
    h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;

    z-index: 2 !important;
  }

  body.page-template-templateOurProducts
    .posts-header
    .posts-header-background
    p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    color: #8581a4 !important;

    font-size: inherit !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 2 !important;
  }
}

/* =========================================================
   PRODUCTS - MOBILE HERO POSITION - FINAL
   ========================================================= */

@media (max-width: 767px) {
  body:has(#productResults) .posts-header .posts-header-background {
    align-items: flex-start !important;

    padding: 45px 18px 40px !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* Move the whole text group */
  body:has(#productResults) .posts-header .headerContent {
    position: relative !important;

    top: 40px !important;
    left: 10px !important;

    margin: 0 !important;
  }

  /* Heading */
  body:has(#productResults) .posts-header .posts-header-background h1 {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 0 16px !important;

    font-weight: 400 !important;
  }

  /* Intro copy */
  body:has(#productResults) .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;
  }
}

/* =========================================================
   PRODUCTS - MOBILE REMOVE GAP BELOW HERO
   ========================================================= */

@media (max-width: 767px) {
  body:has(#productResults) .posts-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body:has(#productResults) .posts-header .posts-header-background {
    margin-bottom: 0 !important;
  }

  body:has(#productResults) .productResultsFilter {
    margin-top: 12px !important;
    margin-bottom: 35px !important;
  }
}

/* COMPLIANCE - REMOVE MOBILE GAP ABOVE HERO */

@media (max-width: 767px) {
  body.page-id-297 .posts-header {
    position: relative !important;
    top: -50px !important;
    margin-bottom: -55px !important;
  }
}

/* =========================================================
   HOMEPAGE - KEY FACTORS DESKTOP
   Tighten spacing to match Figma
   ========================================================= */

@media (min-width: 992px) {
  body.home .keyPoints {
    margin-top: 55px !important;
    margin-bottom: 35px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home .keyPoints > .row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home .keyPoints .keyPoint {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Pull About Us up after Key Factors */
  body.home .aboutUs {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

body.home .keyPoints .keyPoint::after {
  content: none !important;
  display: none !important;
}

body.home .keyPoints .keyPoint {
  position: relative !important;
}

body.home .keyPoints .keyPoint:not(:last-child)::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  right: 0 !important;

  width: 1px !important;
  height: 150px !important;

  background: #d8d7df !important;
}

/* =========================================================
   HOMEPAGE - ABOUT US DESKTOP
   Match Figma proportions
   ========================================================= */

@media (min-width: 992px) {
  /* Pull the whole section closer to Key Factors */
  body.home .aboutUs {
    margin-top: -50px !important;
    margin-bottom: 45px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Vertically centre both columns */
  body.home .aboutUs > .container > .row {
    align-items: center !important;
  }

  /* Text column */
  body.home .aboutUs .col-12.col-lg-4.offset-lg-1 {
    transform: translateX(55px) !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    align-self: center !important;
  }

  /* Image column */
  body.home .aboutUs .col-lg-7 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Make About Us image substantially smaller */
  body.home .aboutUs .col-lg-7 img.img-fluid {
    display: block !important;

    width: 60% !important;
    max-width: 620px !important;
    height: auto !important;

    margin: 100px auto !important;
  }
}

/* =========================================================
   HOMEPAGE - OUR PRODUCTS
   Shorter cards to match Figma
   ========================================================= */
/* Product card removed css here */

/* Homepage Our Products - arrow buttons */
/* =========================================================
   HOMEPAGE - OUR PRODUCTS ARROW BUTTONS
   Match the rest of the site
   ========================================================= */

/* Remove any old theme arrow */
body.home .ourProducts .productCardArrow::before,
body.home .ourProducts .productCardArrow::after {
  content: none !important;
  display: none !important;
}

body.home .ourProducts .productCardArrow img,
body.home .ourProducts .productCardArrow svg,
body.home .ourProducts .productCardArrow span {
  display: none !important;
} /* =========================================================
   HOMEPAGE - OUR PRODUCTS
   Position original circular arrows bottom-right
   ========================================================= */

@media (min-width: 768px) {
  body.home
    .ourProducts
    .homepageProducts.productCard
    > .position-relative.z-1 {
    position: relative !important;
  }
}

/* =========================================================
   HOMEPAGE - PARTNERSHIPS DESKTOP
   Narrower layout to match Figma
   ========================================================= */

@media (min-width: 992px) {
  /* Bring the whole section in from the edges */
  body.home .partnership > .container {
    width: calc(100% - 80px) !important;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Control the two-column layout */
  body.home .partnership > .container > .row {
    display: flex !important;
    align-items: center !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* LEFT - Partnerships heading and button */
  body.home .partnership .col-lg-4.offset-lg-1 {
    width: 38% !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;

    margin-left: 0 !important;

    padding-left: 20px !important;
    padding-right: 65px !important;

    align-self: center !important;
  }

  /* RIGHT - reasons list */
  body.home .partnership .col-lg-7 {
    width: 62% !important;
    flex: 0 0 62% !important;
    max-width: 62% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home .partnership .col-lg-7 ul {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make all three rows consistent */
  body.home .partnership .col-lg-7 ul li {
    min-height: 100px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
  }

  body.home .partnership .col-lg-7 ul li h4 {
    margin: 0 !important;
  }
}

/* =========================================================
   HOMEPAGE - PARTNERSHIPS DESKTOP
   Match Figma layout
   ========================================================= */

@media (min-width: 992px) {
  body.home .partnership {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  /* Narrow and centre the whole section */
  body.home .partnership > .container {
    width: calc(100% - 80px) !important;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home .partnership > .container > .row {
    display: flex !important;
    align-items: center !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* LEFT SIDE */
  body.home .partnership .col-lg-4.offset-lg-1 {
    flex: 0 0 38% !important;
    width: 38% !important;
    max-width: 38% !important;

    margin-left: 0 !important;

    padding-left: 20px !important;
    padding-right: 70px !important;

    align-self: center !important;
  }

  /* Keep heading/button group vertically tidy */
  body.home .partnership h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  body.home .partnership h3 {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
  }

  /* RIGHT SIDE */
  body.home .partnership .col-lg-7 {
    flex: 0 0 62% !important;
    width: 62% !important;
    max-width: 62% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home .partnership .col-lg-7 ul {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .partnership .col-lg-7 ul li {
    min-height: 95px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
  }

  body.home .partnership .col-lg-7 ul li h4 {
    margin: 0 !important;
  }
}

/* =========================================================
   SIINOVIA HEADER
   DESKTOP / TABLET / MOBILE
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {
  header {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
  }

  header .container,
  header .header-inner,
  header .site-header-inner {
    min-height: 120px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  header .logo img,
  header .site-logo img,
  header .custom-logo {
    display: block;
    width: auto;
    max-width: 300px;
    max-height: 90px;
    height: auto;
    object-fit: contain;
  }

  header .menu-toggle,
  header .hamburger {
    flex-shrink: 0;
    margin: 0;
  }
}

/* ---------------------------------------------------------
   SMALL DESKTOP / LARGE TABLET
   992px – 1199px
   --------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {
  header {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
  }

  header .container,
  header .header-inner,
  header .site-header-inner {
    min-height: 110px;
    padding: 16px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  header .logo img,
  header .site-logo img,
  header .custom-logo {
    display: block;
    width: auto;
    max-width: 260px;
    max-height: 78px;
    height: auto;
    object-fit: contain;
  }

  header .menu-toggle,
  header .hamburger {
    flex-shrink: 0;
    margin: 0;
  }
}

/* ---------------------------------------------------------
   TABLET
   768px – 991px
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
  header {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
  }

  header .container,
  header .header-inner,
  header .site-header-inner {
    min-height: 105px !important;
    height: auto !important;
    padding: 14px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box;
  }

  header .logo,
  header .site-logo {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
  }

  header .logo img,
  header .site-logo img,
  header .custom-logo {
    display: block !important;
    width: auto !important;
    max-width: 235px !important;
    max-height: 72px !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 !important;
  }

  header .menu-toggle,
  header .hamburger {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    align-self: center;
  }
}

/* ---------------------------------------------------------
   MOBILE
   Up to 767px
   --------------------------------------------------------- */

@media (max-width: 767px) {
  header {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
  }

  header .container,
  header .header-inner,
  header .site-header-inner {
    width: 100%;
    min-height: 100px !important;
    height: 100px !important;
    padding: 10px 24px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box;
  }

  /* LOGO */

  header .logo,
  header .site-logo {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 1;
  }

  header .logo img,
  header .site-logo img,
  header .custom-logo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 210px !important;
    max-height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
  }

  /* HAMBURGER / MENU BUTTON */

  header .menu-toggle,
  header .hamburger {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    width: 42px;
    height: 42px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0;
    align-self: center;
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE
   Up to 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {
  header .container,
  header .header-inner,
  header .site-header-inner {
    min-height: 92px !important;
    height: 92px !important;
    padding: 8px 20px !important;
  }

  header .logo img,
  header .site-logo img,
  header .custom-logo {
    max-width: 190px !important;
    max-height: 68px !important;
  }

  header .menu-toggle,
  header .hamburger {
    width: 40px;
    height: 40px;
  }
}

/* ---------------------------------------------------------
   VERY SMALL MOBILE
   Up to 390px
   --------------------------------------------------------- */

@media (max-width: 390px) {
  header .container,
  header .header-inner,
  header .site-header-inner {
    min-height: 88px !important;
    height: 88px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  header .logo img,
  header .site-logo img,
  header .custom-logo {
    max-width: 175px !important;
    max-height: 64px !important;
  }

  header .menu-toggle,
  header .hamburger {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   HEADER TYPOGRAPHY
   ========================================================= */

/* DESKTOP */
@media (min-width: 1200px) {
  header nav a,
  header .menu-item a {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {
  header nav a,
  header .menu-item a {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  header nav a,
  header .menu-item a {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================
   HEADER TYPOGRAPHY
   ========================================================= */

/* DESKTOP */
@media (min-width: 1200px) {
  header nav a,
  header .menu-item a {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {
  header nav a,
  header .menu-item a {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  header nav a,
  header .menu-item a {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================
   MOBILE HEADING SIZES
   ========================================================= */

@media (max-width: 767px) {
  h1 {
    font-size: 34px !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   MOBILE HEADINGS - FINAL OVERRIDE
   ========================================================= */

@media (max-width: 767px) {
  /* HERO / HEADER H1 */
  body .posts-header .posts-header-background h1,
  body .posts-header h1,
  body.home h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  /* H2 */
  body h2,
  body.home h2,
  body .posts-header h2 {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  /* H3 */
  body h3,
  body.home h3,
  body .posts-header h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   ABOUT US - REMOVE OLD LONG SPECIALITIES DIVIDER
   ========================================================= */

@media (min-width: 992px) {
  /* Remove every old divider source */
  body.page-id-376 .specialities .speciality,
  body.page-id-376 .specialities .specialityInner,
  body.page-id-376 .specialities .row > div {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.page-id-376 .specialities .speciality::before,
  body.page-id-376 .specialities .speciality::after,
  body.page-id-376 .specialities .specialityInner::before,
  body.page-id-376 .specialities .specialityInner::after,
  body.page-id-376 .specialities .row > div::before,
  body.page-id-376 .specialities .row > div::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  /* Add ONLY the shorter divider */
  body.page-id-376 .specialities .speciality:not(:last-child) {
    border-right: 1px solid #d8d7df !important;
  }
}

/* =========================================================
   HOMEPAGE - REMOVE OLD LONG KEY FACTOR DIVIDERS
   Keep only the new shorter divider
   ========================================================= */

@media (min-width: 992px) {
  /* Remove old theme divider sources */
  body.home .keyPoints .keyPoint,
  body.home .keyPoints .keyPoint > div,
  body.home .keyPoints .keyPoint .keyPointInner {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.home .keyPoints .keyPoint::before,
  body.home .keyPoints .keyPoint::after,
  body.home .keyPoints .keyPoint > div::before,
  body.home .keyPoints .keyPoint > div::after,
  body.home .keyPoints .keyPoint .keyPointInner::before,
  body.home .keyPoints .keyPoint .keyPointInner::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  /* Recreate ONLY the shorter divider */
  body.home .keyPoints .keyPoint {
    position: relative !important;
  }

  body.home .keyPoints .keyPoint:not(:last-child)::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 1px !important;
    height: 150px !important;

    background: #d8d7df !important;
    border: 0 !important;
  }
}

/* =========================================================
   HOMEPAGE - KEY FACTORS MOBILE
   Reduce spacing + remove divider lines
   ========================================================= */

@media (max-width: 767px) {
  body.home .keyPoints {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home .keyPoints > .row {
    row-gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.home .keyPoints .keyPoint {
    min-height: 0 !important;

    margin: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;

    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.home .keyPoints .keyPoint > div {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.home .keyPoints .keyPoint h2,
  body.home .keyPoints .keyPoint h3,
  body.home .keyPoints .keyPoint h4 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
  }

  body.home .keyPoints .keyPoint p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Remove divider lines completely on mobile */
  body.home .keyPoints .keyPoint::before,
  body.home .keyPoints .keyPoint::after,
  body.home .keyPoints .keyPoint > div::before,
  body.home .keyPoints .keyPoint > div::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }
}

/* =========================================================
   HOMEPAGE - MOBILE SECTION SPACING
   Reduce space below Products + Partnerships
   ========================================================= */

@media (max-width: 767px) {
  /* OUR PRODUCTS */
  body.home .ourProducts {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }

  body.home .ourProducts > .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* PARTNERSHIPS */
  body.home .partnership {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }

  body.home .partnership > .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   HOMEPAGE - MOBILE NEWS SPACING
   Bring stories closer together
   ========================================================= */

@media (max-width: 767px) {
  body.home #posts-grid {
    row-gap: 12px !important;
  }

  body.home #posts-grid .post-card {
    margin-bottom: 0 !important;
  }

  body.home #posts-grid .post-card__content {
    padding-top: 10px !important;
    margin-bottom: 0 !important;
  }

  body.home #posts-grid .post-card__title {
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   PRODUCTS - HERO VIDEO FINAL
   DESKTOP / TABLET / MOBILE
   ========================================================= */

body.page-template-templateOurProducts .posts-header .posts-header-background {
  position: relative !important;
  overflow: hidden !important;
}

body.page-template-templateOurProducts .posts-header video {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 1 !important;
  pointer-events: none !important;
}

body.page-template-templateOurProducts .posts-header .headerContent {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   PRODUCTS + COMPLIANCE
   SHORTER EXPANDING PANELS + LIGHTER GREY
   ========================================================= */

@media (min-width: 901px) {
  /* Shorten all three panels */
  .productPage .horizontalExpandingBlocks .horizontalPanels .panel {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;

    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  /* Bring arrow up with the shorter card */
  .productPage .horizontalExpandingBlocks .horizontalPanels .panel .toggle,
  body.page-id-297 .horizontalExpandingBlocks .horizontalPanels .panel .toggle {
    bottom: 22px !important;
  }

  /* Middle expanded panel - approximately 50% lighter */
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active {
    background: #a8a9a8 !important;
  }

  /* Dark text works better against the lighter grey */
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active,
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    h3,
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    p,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    h3,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    p {
    color: #29234f !important;
  }

  /* Dark arrow on lighter grey */
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle {
    color: #29234f !important;
    border-color: #29234f !important;
  }

  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  .productPage
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg,
  body.page-id-297
    .horizontalExpandingBlocks
    .horizontalPanels
    .panel:nth-child(2).active
    .toggle
    svg
    path {
    stroke: #29234f !important;
  }
}

/* PARTNERSHIPS - MATCH WELCOME HEADING TO GROWTH HEADING */

@media (min-width: 901px) {
  body.page-id-304
    .posts-header
    + .container
    > .row
    > div:nth-child(2)
    > h3:first-of-type {
    font-size: 29px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
  }
}

.sample_class {
  h1 {
    font-size: 3rem;
  }
}

/* =========================================================
   COMPLIANCE - MOBILE HERO DEFINITIVE FIX
   Match other internal pages
   ========================================================= */

@media (max-width: 767px) {
  /* Stop the whole hero being pulled underneath the navigation */
  body.page-id-297 .posts-header {
    position: relative !important;

    top: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* HERO */
  body.page-id-297 .posts-header .posts-header-background {
    width: calc(100% - 24px) !important;
    max-width: none !important;

    height: auto !important;
    min-height: 550px !important;

    margin: 0 auto 24px !important;

    padding: 45px 28px 40px !important;

    align-items: flex-start !important;

    border-radius: 42px !important;
    overflow: hidden !important;

    position: relative !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Remove Bootstrap/container inset so text lines up properly */
  body.page-id-297 .posts-header .posts-header-background > .container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reset the whole text group */
  body.page-id-297 .posts-header .headerContent {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* INTRO COPY */
  body.page-id-297 .posts-header .posts-header-background p {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;

    width: 72% !important;
    max-width: 300px !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.4 !important;
    font-weight: 400 !important;

    z-index: 3 !important;
  }

  /* No old CSS-generated overlay/shape */
  body.page-id-297 .posts-header .posts-header-background::before,
  body.page-id-297 .posts-header .posts-header-background::after {
    content: none !important;
    display: none !important;
  }
}