/*
 * Homepage redesign (Figma "Capifly-Onboarding", node 57632:129355).
 *
 * Everything here is scoped under .home-redesign (the root class on Home.vue's
 * .page-root), so no other route is affected - except the insight card
 * (.hr-insight*), which the /insights/ page shares.
 *
 * Spacing and typography stay the site's own: the base stylesheet's section padding,
 * Montserrat, and its font sizes at every breakpoint. This file only adds the
 * redesign's colours and the layout of the new markup (testimonial cards, calculator
 * results, Shariah cards, Fatwa band, insight cards), whose text uses the same sizes
 * as the old elements it replaced.
 *
 * The footer and the logo marquee are intentionally untouched: in the Figma file
 * they are the live site captured at 2/3 scale, not a design change.
 */

/* ---- fonts used only by the Amanah logo / certificate artwork ---- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/SpaceGrotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-600-latin.woff2) format('woff2');
}
/* the testimonial quote mark */
@font-face {
  font-family: 'Abhaya Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/AbhayaLibre-500-latin.woff2) format('woff2');
}
/* insight card description and "Learn More" (variable font, one file for all weights) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Roboto-latin.woff2) format('woff2');
}

.home-redesign,
.hr-testimonials { /* the testimonial section is shared with /customers/ */
  --hr-ink: #071015;
  --hr-teal: #0a7fa3;
  --hr-dark-teal: #024058;
  --hr-light-teal-2: #daf3f1;
  --hr-light-teal-3: #e9f8f6;
  --hr-bg: #fafafa;
}

/* ---- buttons with a trailing arrow icon ---- */
.home-redesign .hr-button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* text link styled like the site's button label (Montserrat 18 / 500) */
.home-redesign .hr-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  color: var(--hr-teal);
  font-size: 18px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
}
.home-redesign .hr-link-arrow img { transition: transform .2s; }
.home-redesign .hr-link-arrow:hover img { transform: translateX(3px); }

@media screen and (min-width: 992px) {
  .navbar.new > .container.nav {
    padding: 11px 37px;
    background-color: #faf9f4;
  }
}

/* ---- colours only (spacing and type come from the base stylesheet) ---- */
@media screen and (min-width: 992px) {
  .home-redesign .navbar.new { background-color: #faf9f4; }
}
.home-redesign .section_header_holder h2,
.home-redesign .testimonial-card-heading.testimonials,
.hr-testimonials .testimonial-card-heading.testimonials,
.home-redesign #insights .heading__section,
.home-redesign .hero_title,
.home-redesign .hero_text_holder .subtitle,
.home-redesign .why_text_holder .alt_title,
.home-redesign .why_text_holder p,
.home-redesign .how_timeline_title,
.home-redesign .who_box h2,
.home-redesign .who_box > p,
.home-redesign .who_box .who_list_text,
.home-redesign .evaluation_text_holder-copy .heading-3,
.home-redesign .evaluation_text_holder-copy .subtitle,
.home-redesign .eyebrow.calculator,
.home-redesign .calcultor_text {
  color: var(--hr-ink);
}
.home-redesign .how_timeline_copy { color: #394044; }
.home-redesign .section_main.logos .paragraph-2 { color: #000; }

.home-redesign .section_main.why { background-color: var(--hr-bg); }
.home-redesign .section_main.how { background-color: #fff; }
.home-redesign .section_main.evaluation { background-color: var(--hr-bg); }
.home-redesign .who_box {
  border-radius: 15.78px;
  background-color: var(--hr-bg);
}

.home-redesign .section__hero { min-height: 0; }

@media screen and (min-width: 768px) {
  .home-redesign .hero_title {
    font-size: 40px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: 0;
    text-align: center;
  }
  .home-redesign .hero_text_holder .subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: 0;
    text-align: center;
  }
}
@media screen and (min-width: 480px) {
  .home-redesign .section__hero {
    padding-top: 32px;
    padding-bottom: 30px;
  }
}

/* ---- analytics tool: the new dashboard image is taller than the one it replaced, so
   crop it (from the top) to the old image's proportions to keep the old section height */
.home-redesign .section_main.evaluation .image-6 {
  aspect-ratio: 495 / 552;
  object-fit: cover;
  object-position: 50% 0;
}

/* ---- equity vs capifly calculator ---- */
.home-redesign .section_main.calculator { background-color: var(--hr-light-teal-3); }
@media screen and (min-width: 992px) {
  .home-redesign .section_main.calculator {
    background-size: auto, 1280px 1280px;
    background-position: 0 0, 50% 0;
    background-repeat: repeat, no-repeat;
    background-attachment: scroll, scroll;
  }
}
.home-redesign .range_slider_content_holder {
  border-radius: 8px;
  background-color: var(--hr-bg);
  box-shadow: 2.67px 3.33px 26.67px 4.67px rgba(0, 0, 0, .1);
}
.home-redesign #raise-amount { color: var(--hr-dark-teal); }

/* result boxes (new markup) - sizes match the old .calculator_text / .calculator_out_text */
.home-redesign .hr-calc-result,
.home-redesign .hr-calc-cost {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 20px;
  border-radius: 13.59px;
}
.home-redesign .hr-calc-result { background-color: #fff; }
.home-redesign .hr-calc-cost {
  align-self: start;
  border-radius: 8.73px;
  background-color: var(--hr-light-teal-2);
}
.home-redesign .hr-calc-result__label {
  margin: 0;
  color: var(--hr-dark-teal);
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
}
.home-redesign .hr-calc-result__value,
.home-redesign .hr-calc-cost__value {
  margin: 0;
  color: var(--hr-teal);
  font-size: 22px;
  font-weight: 700;
  line-height: 35.2px;
}
.home-redesign .hr-calc-result__divider {
  height: 1px;
  margin: 10px 0;
  background-color: #dfddd9;
}
@media screen and (max-width: 479px) {
  .home-redesign .hr-calc-result__label { font-size: 17px; line-height: 25.5px; }
  .home-redesign .hr-calc-result__value,
  .home-redesign .hr-calc-cost__value { font-size: 18px; line-height: 27px; }
}

/* ---- testimonials ----
   Scoped to the section's own .hr-testimonials class (not .home-redesign): the
   /customers/ page uses the same section. */
.section_main.testimonial.hr-testimonials { background-color: var(--hr-bg); }

/* content capped at 1280px. Side padding is the site's .container gutter (60 / 30 /
   20px) on this element only: .container.shariaah's own 40px and the extra 20px that
   testimonials-design.css puts on .testimonials_main under 992px stacked to 60px a
   side on phones. */
.section_main.testimonial.hr-testimonials .container.shariaah {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
}
/* the base stylesheet caps this at 760px, which kept the 841px slider (and the
   divider line under it) at 760 */
.section_main.testimonial.hr-testimonials .testimonials_main {
  max-width: 841px;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 991px) {
  .section_main.testimonial.hr-testimonials .container.shariaah {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767px) {
  .section_main.testimonial.hr-testimonials .container.shariaah {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Webflow lays the slides out as inline-blocks in one row. On the default baseline
   alignment every slide sits as low as the one with the longest quote, so after the
   first slide the photo and name drop below the mask (which testimonial-mask-fix.js
   sizes to the active slide) and get cut off. Top-align them instead. */
.section_main.testimonial.hr-testimonials .w-slide { vertical-align: top; }

.hr-testimonials .hr-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: none;
  padding: 0;
  text-align: left;
}
.hr-testimonials .hr-testimonial__photo {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 100px;
  background-color: var(--hr-light-teal-3);
}
.hr-testimonials .hr-testimonial__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma's cut-out portrait: oversized and shifted up inside the circle */
.hr-testimonials .hr-testimonial__photo--cutout .hr-testimonial__img {
  position: absolute;
  top: -24.42%;
  left: 7.88%;
  width: 83.73%;
  height: 124.73%;
  object-fit: fill;
}
.hr-testimonials .hr-testimonial__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 617px;
  padding-bottom: 54px; /* room for the slider arrows / dots row */
}
/* Figma: a plain " in Abhaya Libre Medium 60 / 60, overflowing its 28px box */
.hr-testimonials .hr-testimonial__mark {
  height: 28px;
  color: #7fbdcf;
  font-family: 'Abhaya Libre', serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 60px;
  opacity: .5;
}
/* quote: Figma's type spec (Montserrat Italic 16 / 20) at every breakpoint. The
   min-height reserves room for the longest quote so the name, role and slider
   arrows stay in the same place from slide to slide. */
.hr-testimonials .hr-testimonial__quote {
  min-height: 160px;
  margin: 0;
  color: #394044;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}
/* name / role: the old h3.subtitle and role sizes */
.hr-testimonials .hr-testimonial__name,
.hr-testimonials .hr-testimonial__role { margin: 0; }
.hr-testimonials .hr-testimonial__name {
  color: #0e3a52;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
}
.hr-testimonials .hr-testimonial__role {
  color: var(--hr-teal);
  font-size: 14px;
  line-height: 20px;
}

/* arrows + dots sit under the quote column */
.section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-left,
.section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: auto auto 0 auto;
  width: 34px;
  height: 30px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
}
.section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-left {
  background-color: var(--hr-light-teal-3);
}
.section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-right {
  background-color: var(--hr-light-teal-2);
}
.section_main.testimonial.hr-testimonials .slide-nav {
  inset: auto 0 12px auto;
  height: auto;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-align: right;
}
.section_main.testimonial.hr-testimonials .w-slider-dot {
  width: 5.33px;
  height: 5.33px;
  margin: 0 4px;
  background-color: #e7e7e9;
}
.section_main.testimonial.hr-testimonials .w-slider-dot.w-active {
  width: 20.67px;
  border-radius: 2.67px;
  background-color: var(--hr-teal);
}
/* the "Learn more" row's border-top is the divider line under the slider; keep it
   clear of the arrows */
.section_main.testimonial.hr-testimonials .button_holder { margin-top: 32px; }

@media screen and (min-width: 992px) {
  .section_main.testimonial.hr-testimonials .testimonial_slider {
    width: 841px;
    max-width: 100%;
    margin: 0 auto;
  }
  .hr-testimonials .hr-testimonial {
    flex-direction: row;
    align-items: center;
  }
  .section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-left  { left: 224px; }
  .section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-right { left: 266px; }
}
@media screen and (max-width: 991px) {
  .hr-testimonials .hr-testimonial__body { text-align: center; align-items: center; }
  .section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-left  { left: 0; }
  .section_main.testimonial.hr-testimonials .testimonial_slider .w-slider-arrow-right { left: 42px; }
}
@media screen and (max-width: 479px) {
  .hr-testimonials .hr-testimonial__name { font-weight: 400; }
}

/* ---- Shariah fatwa cards (old Shariah block: 26px bold title, 16px subtitle) ---- */
.home-redesign .hr-shariah-card {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  background-color: var(--hr-bg);
}
.home-redesign .hr-shariah-card__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 938px;
  max-width: 100%;
}
.home-redesign .hr-shariah-card__art {
  position: relative;
  flex: 0 0 384px;
  height: 193.46px;
  overflow: hidden;
  border-radius: 16px;
}
.home-redesign .hr-shariah-card__art--gold {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c19741;
  box-shadow: 2.67px 3.33px 13.33px rgba(0, 0, 0, .1);
}
.home-redesign .hr-shariah-card__art--gold img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-redesign .hr-shariah-card__art--light {
  background-color: rgba(193, 151, 65, .1);
}
.home-redesign .hr-shariah-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 480.33px;
  max-width: 100%;
}
.home-redesign .hr-shariah-card__title {
  margin: 0 0 8px;
  color: var(--hr-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 31.2px;
}
.home-redesign .hr-shariah-card__copy {
  margin: 0 0 16px;
  color: var(--hr-ink);
  font-size: 16px;
  line-height: 22.4px;
}
@media screen and (max-width: 479px) {
  .home-redesign .hr-shariah-card__title { font-size: 24px; }
}

/* Amanah emblem: three horizontal bands of one gradient "A", the middle band offset
   left - Figma builds it from rectangular masks; overflow:hidden windows are the
   same thing without mask-image. */
.home-redesign .hr-emblem {
  position: absolute;
  overflow: hidden;
}
.home-redesign .hr-band {
  position: absolute;
  display: block;
  overflow: hidden;
}
.home-redesign .hr-band img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
}
/* faded background emblem (card 11) */
.home-redesign .hr-emblem--faded {
  left: 248px;
  top: 88.48px;
  width: 143px;
  height: 113px;
  mix-blend-mode: multiply;
}
.home-redesign .hr-emblem--faded img { width: 113.49px; height: 113px; }
.home-redesign .hr-emblem--faded .hr-band { width: 113.49px; }
.home-redesign .hr-emblem--faded .hr-band--1 { left: 18.16px; top: 0; height: 35.03px; }
.home-redesign .hr-emblem--faded .hr-band--2 { left: 3.4px; top: 39.55px; height: 33.9px; }
.home-redesign .hr-emblem--faded .hr-band--2 img { top: -39.55px; }
.home-redesign .hr-emblem--faded .hr-band--3 { left: 18.16px; top: 77.97px; height: 35.03px; }
.home-redesign .hr-emblem--faded .hr-band--3 img { top: -77.97px; }

/* "Amanah Advisors" logo lock-up (card 11) */
.home-redesign .hr-amanah-logo {
  position: absolute;
  left: 36px;
  top: 69.33px;
  width: 312.7px;
  height: 53px;
  white-space: nowrap;
}
.home-redesign .hr-emblem--small {
  left: 0;
  top: 10.34px;
  width: 42.47px;
  height: 33.71px;
}
.home-redesign .hr-emblem--small img { width: 33.7px; height: 33.7px; }
.home-redesign .hr-emblem--small .hr-band { width: 33.7px; }
.home-redesign .hr-emblem--small .hr-band--1 { left: 5.39px; top: 0; height: 10.45px; }
.home-redesign .hr-emblem--small .hr-band--2 { left: 1.01px; top: 11.8px; height: 10.11px; }
.home-redesign .hr-emblem--small .hr-band--2 img { top: -11.8px; }
.home-redesign .hr-emblem--small .hr-band--3 { left: 5.39px; top: 23.26px; height: 10.45px; }
.home-redesign .hr-emblem--small .hr-band--3 img { top: -23.26px; }
.home-redesign .hr-amanah-logo__word {
  position: absolute;
  top: 3.98px;
  left: 54.63px;
  color: #0a0a0a;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 31.8px;
  font-weight: 700;
  line-height: normal;
}
.home-redesign .hr-amanah-logo__word--gold {
  left: 181.4px;
  color: #a47c2e;
  font-weight: 400;
}


/* ---- Fatwa secured band ---- */
.home-redesign .hr-fatwa {
  display: flex;
  justify-content: center;
  padding: 60px 112px;
  background-color: #0f1b22;
}
.home-redesign .hr-fatwa__inner {
  display: flex;
  align-items: center;
  gap: 72px;
  width: 100%;
  max-width: 1056px;
}
.home-redesign .hr-fatwa__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  min-width: 0;
}
.home-redesign .hr-fatwa__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffe599;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
}
.home-redesign .hr-fatwa__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  max-width: 534.33px;
}
.home-redesign .hr-fatwa__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-redesign .hr-fatwa__title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 28.8px;
}
.home-redesign .hr-fatwa__copy {
  max-width: 500px;
  margin: 0;
  color: #b9c3c8;
  font-size: 16px;
  line-height: 22.4px;
}
.home-redesign .hr-fatwa .hr-button-arrow { width: 239px; }

/* certificate illustration */
.home-redesign .hr-fatwa__art {
  position: relative;
  flex: 0 0 365.46px;
  height: 342.43px;
}
.home-redesign .hr-cert-back {
  position: absolute;
  left: 54.8px;
  top: 14.61px;
  width: 297.12px;
  height: 308.12px;
  border-radius: 4.46px;
  background-color: #e9e3d4;
  opacity: .35;
  transform: rotate(6deg);
}
.home-redesign .hr-cert {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 297.12px;
  height: 268.12px;
  border-radius: 4.46px;
  background-color: #fbf8f1;
  filter: drop-shadow(0 22.28px 22.28px rgba(0, 0, 0, .45));
  transform: translate(-50%, -50%) rotate(-2deg);
  color: #1a1a1a;
  text-align: center;
}
.home-redesign .hr-cert p { margin: 0; }
.home-redesign .hr-cert__brand {
  position: absolute;
  top: 26.74px;
  left: calc(50% + .62px);
  display: flex;
  align-items: center;
  gap: 5.94px;
  padding-top: 4.46px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.home-redesign .hr-emblem--cert {
  position: relative;
  flex: 0 0 19.32px;
  width: 19.32px;
  height: 15.6px;
}
.home-redesign .hr-emblem--cert img { width: 15.33px; height: 15.33px; }
.home-redesign .hr-emblem--cert .hr-band { width: 15.33px; }
.home-redesign .hr-emblem--cert .hr-band--1 { left: 2.45px; top: .14px; height: 5.45px; }
.home-redesign .hr-emblem--cert .hr-band--2 { left: .46px; top: 5.27px; height: 5.45px; }
.home-redesign .hr-emblem--cert .hr-band--2 img { top: -5.13px; }
.home-redesign .hr-emblem--cert .hr-band--3 { left: 2.45px; top: 10.55px; height: 4.92px; }
.home-redesign .hr-emblem--cert .hr-band--3 img { top: -10.41px; }
.home-redesign .hr-cert__brand-word {
  margin-right: -3.14px; /* 2.8px word gap after the 5.94px flex gap */
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.89px;
  font-weight: 600;
  letter-spacing: -.24px;
  line-height: normal;
}
.home-redesign .hr-cert__brand-word--gold {
  margin-right: 0;
  color: #a47c2e;
  font-weight: 500;
}
.home-redesign .hr-cert__eyebrow {
  position: absolute;
  top: 57.19px;
  left: calc(50% - .54px);
  transform: translateX(-50%);
  color: #8a6a2a;
  font-size: 6.69px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-redesign .hr-cert__title {
  position: absolute;
  top: 75.77px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22.28px;
  font-weight: 600;
  letter-spacing: .45px;
  line-height: 23.03px;
  white-space: nowrap;
}
.home-redesign .hr-cert__issued,
.home-redesign .hr-cert__name {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: normal;
  white-space: nowrap;
}
.home-redesign .hr-cert__issued {
  top: 161.36px;
  color: #5a5a5a;
  font-size: 8.17px;
}
.home-redesign .hr-cert__name {
  top: 184.16px;
  font-size: 11.89px;
  font-weight: 700;
}
.home-redesign .hr-cert__lines {
  position: absolute;
  top: 201.67px;
  left: 26.74px;
  right: 26.74px;
  display: flex;
  flex-direction: column;
  gap: 4.46px;
  padding-top: 2.97px;
}
.home-redesign .hr-cert__lines span {
  display: block;
  height: 4.46px;
  border-radius: 2.23px;
  background-color: #e8e1d0;
}
.home-redesign .hr-cert__lines span:nth-child(2) { width: 224.15px; }
.home-redesign .hr-cert__lines span:nth-child(3) { width: 233.89px; }
.home-redesign .hr-cert__lines span:nth-child(4) { width: 170.54px; }
.home-redesign .hr-cert__border {
  position: absolute;
  inset: 8.91px 8.92px 8.25px 8.91px;
  border: .74px solid #d9c79a;
  border-radius: 2.23px;
}

@media screen and (max-width: 991px) {
  .home-redesign .hr-shariah-card { padding: 40px 30px; }
  .home-redesign .hr-shariah-card__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  /* stacked: flex-basis would size the height, so pin the box explicitly */
  .home-redesign .hr-shariah-card__art { flex: none; width: 384px; }
  .home-redesign .hr-fatwa { padding: 56px 30px; }
  .home-redesign .hr-fatwa__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  .home-redesign .hr-fatwa__art { align-self: center; }
}
@media screen and (max-width: 479px) {
  .home-redesign .hr-shariah-card { padding: 32px 20px; }
  .home-redesign .hr-fatwa { padding: 48px 20px; overflow: hidden; }
  .home-redesign .hr-fatwa .hr-button-arrow { width: 100%; }
  /* the art pieces are fixed-size compositions; zoom (unlike transform) shrinks
     their layout box too, so they never push the page sideways */
  .home-redesign .hr-shariah-card__art { zoom: .82; }
  .home-redesign .hr-fatwa__art { zoom: .85; }
}

/* ---- insights (new card markup, old card type sizes) ---- */
.home-redesign #insights { background-color: var(--hr-bg); }
.home-redesign .insights_carousel .featured_posts_collection_list {
  align-items: stretch;
}
/* insights-carousel.css pins the old cards at 450px; these size to their content
   (the row still equalises them to the tallest card) */
.home-redesign .insights_carousel .featured_posts_collection_item { height: auto; }

/* /insights/ page grid: the base 16px row gap left the white text card (which hangs
   below each card) nearly touching the next row's image */
.posts_collection_list {
  grid-row-gap: 32px;
  row-gap: 32px;
}

@media screen and (max-width: 767px) {
  .insights-page > .section { padding: 0; }
}

/* The insight card itself (.hr-insight*) is NOT scoped to .home-redesign: the
   /insights/ page uses the same card. It carries its own colour tokens. */
.hr-insight {
  --hr-ink: #071015;
  --hr-teal: #0a7fa3;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: transparent;
  color: var(--hr-ink);
  text-decoration: none;
}
.hr-insight:hover { background-color: transparent; }
/* Figma: the grey card stops 36px short of the white text card, which hangs over
   its bottom edge */
.hr-insight::before {
  content: '';
  position: absolute;
  inset: 0 0 36px;
  border-radius: 16px;
  background-color: #f1f1f1;
}
.hr-insight__media {
  position: relative; /* paint above the grey ::before */
  flex: 0 0 172px;
  height: 172px;
  margin-bottom: -38px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.hr-insight__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.hr-insight__img--award { object-position: 50% 25.26%; }
.hr-insight:hover .hr-insight__img { transform: scale(1.03); }
.hr-insight__body {
  position: relative;
  flex: 1 1 auto;
  padding: 0 16px;
}
.hr-insight__card {
  height: 100%;
  padding: 16px;
  border-radius: 16px;
  background-color: #fff;
}
.hr-insight__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hr-insight__tag {
  padding: 2px 6px;
  color: var(--hr-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
}
.hr-insight__source {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #83888a;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap; /* always one 20px line, so the space it takes is fixed */
}
/* cards without a source line keep its space (20px line + the 8px meta gap), so the
   title starts at the same height on every card */
.hr-insight__tag + .hr-insight__text { margin-top: 28px; }
.hr-insight__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}
/* title / description / "Learn More": Figma's type spec, at every breakpoint */
.hr-insight__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--hr-ink); /* #071015 */
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20.8px;
  letter-spacing: 0;
  min-height: 41.6px; /* always two lines' space (clamped to two), so cards match */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hr-insight__desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #024058;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4; /* 21px */
  letter-spacing: 0;
  min-height: 42px; /* two lines, as the title */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hr-insight__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: var(--hr-teal); /* #0a7fa3 */
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1; /* 13.2px */
  letter-spacing: .05em;
  text-align: center;
  text-transform: capitalize;
}

/* carousel controls: Figma has centred dots only */
.home-redesign .insights_carousel_controls { justify-content: center; }
.home-redesign .insights_carousel_arrow { display: none; }
/* insights-carousel.css pins the dots to the right (margin-left: auto) */
.home-redesign .insights_carousel_dots { margin-left: 0; }
.home-redesign .insights_carousel_dot {
  width: 5.33px;
  height: 5.33px;
  background-color: #e7e7e9;
}
.home-redesign .insights_carousel_dot.is-active {
  width: 20.67px;
  border-radius: 2.67px;
  background-color: var(--hr-teal);
}

@media screen and (min-width: 992px) {
  .home-redesign #insights .section_heading_holder-insights { align-items: center; }
  /* three per view (two/one keep the carousel's own tablet/mobile rules) */
  .home-redesign .insights_carousel .featured_posts_collection_item {
    flex: 0 0 calc((100% - 48px) / 3); /* the carousel's own 24px gap */
  }
}

/* ---- news (Figma "News", node 57780:148784) ----
   Reuses the insights carousel (markup classes + insights-carousel.js) for paging and
   dots; two cards per view instead of three, 16px apart. */
.home-redesign .hr-news { background-color: var(--hr-bg); }
.home-redesign .hr-news .featured_posts_collection_list {
  grid-column-gap: 16px;
  gap: 16px;
}
/* min-width: 0 - the one-line (nowrap) title and description would otherwise set the
   card's minimum width and push it past its half of the row */
.home-redesign .hr-news .featured_posts_collection_item { min-width: 0; }
@media screen and (min-width: 768px) {
  .home-redesign .hr-news .insights_carousel .featured_posts_collection_item {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
/* with a single page (all cards in view) a lone dot means nothing; keep its space */
.home-redesign .insights_carousel_dots:has(> :only-child) { visibility: hidden; }

.hr-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  height: 360px;
  overflow: hidden;
  border-radius: 16px;
  background-color: #f1f1f1;
  color: #fff;
  text-decoration: none;
}
.hr-news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.hr-news-card__img--award { object-position: 50% 25.26%; } /* Figma's crop of the photo */
.hr-news-card:hover .hr-news-card__img { transform: scale(1.03); }
/* bottom 306 of the 360px card: black -> transparent, behind the text */
.hr-news-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 85%;
  background-image: linear-gradient(to top, #000 5.882%, rgba(24, 24, 24, .76) 23.211%, rgba(102, 102, 102, 0) 77.614%);
}
.hr-news-card__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 40px 25px;
}
.hr-news-card__title,
.hr-news-card__desc {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-news-card__title {
  color: #e8e1d0;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 20.8px;
  letter-spacing: 0;
}
.hr-news-card__desc {
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.hr-news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .05em;
  text-align: center;
  text-transform: capitalize;
}
.hr-news-card__more img { transition: transform .2s; }
.hr-news-card:hover .hr-news-card__more img { transform: translateX(3px); }
@media screen and (max-width: 479px) {
  .hr-news-card__text { padding: 0 20px 20px; }
}

/* ---- CTA - left aligned ---- */
.home-redesign .section.cta {
  background-position: 0 0;
  background-size: 208.72px 261.06px;
}
/* the base holder uses wrap-reverse, which turns flex-start into the right edge */
.home-redesign .section_heading_holder-insights.cts {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.home-redesign .section_button_holder.cta { align-items: flex-start; }
@media screen and (min-width: 992px) {
  .home-redesign .section.cta .container { width: 100%; }
}