/* =========================================================
   ARADEL DESIGN SYSTEM (Base Layer)
   Tokens are injected via inline :root vars from MU plugin.
   ========================================================= */

:root{
  /* fallbacks (in case ACF not loaded) */
  --ads-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ads-brand-red: #C1000F;
  --ads-brand-blue: #01303A;
  --ads-white: #fff;

  --ads-bg: #fff;
  --ads-surface: #F0F0F0;
  --ads-text: #000;
  --ads-muted: #474747;
  --ads-border: rgba(0,0,0,0.10);

  --ads-success: #005A4E;
  --ads-danger: #F31726;

  --ads-link: #C1000F;

  /* Gradient tokens */
  --ar-gradient-red: linear-gradient(135deg, #C1000F 0%, #F32D17 100%);
  --ar-gradient-red-deep: linear-gradient(135deg, #8D000B 0%, #C1000F 45%, #F32D17 100%);
  --ar-gradient-red-warm: linear-gradient(135deg, #C1000F 0%, #F36417 100%);
  --ar-gradient-sherpa: linear-gradient(135deg, #01303A 0%, #005A4E 100%);
  --ar-gradient-sherpa-deep: linear-gradient(135deg, #011E25 0%, #01303A 55%, #005A4E 100%);
  --ar-gradient-green: linear-gradient(135deg, #005A4E 0%, #9FD4BE 100%);
  --ar-gradient-green-deep: linear-gradient(135deg, #003B33 0%, #005A4E 50%, #0A7C69 100%);

  --ar-gradient-red-soft: linear-gradient(135deg, rgba(193, 0, 15, 0.10) 0%, rgba(243, 45, 23, 0.18) 100%);
  --ar-gradient-red-mist: linear-gradient(135deg, rgba(193, 0, 15, 0.06) 0%, rgba(243, 100, 23, 0.14) 100%);
  --ar-gradient-sherpa-soft: linear-gradient(135deg, rgba(1, 48, 58, 0.08) 0%, rgba(0, 90, 78, 0.16) 100%);
  --ar-gradient-green-soft: linear-gradient(135deg, rgba(0, 90, 78, 0.10) 0%, rgba(159, 212, 190, 0.28) 100%);
  --ar-gradient-green-mist: linear-gradient(135deg, rgba(159, 212, 190, 0.18) 0%, rgba(255, 255, 255, 1) 100%);

  --ar-gradient-surface-light: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);
  --ar-gradient-surface-soft: linear-gradient(135deg, #FFFFFF 0%, #F7F7F7 55%, #F0F0F0 100%);
  --ar-gradient-surface-dark: linear-gradient(135deg, #01303A 0%, #1E3C44 100%);
  --ar-gradient-surface-charcoal: linear-gradient(135deg, #1E1E1E 0%, #606060 100%);

  --ar-gradient-investor: linear-gradient(135deg, #01303A 0%, #C1000F 100%);
  --ar-gradient-energy: linear-gradient(135deg, #005A4E 0%, #F36417 100%);
  --ar-gradient-impact: linear-gradient(135deg, #01303A 0%, #005A4E 50%, #9FD4BE 100%);
  --ar-gradient-premium-red: linear-gradient(135deg, #7D0009 0%, #C1000F 35%, #F32D17 72%, #F36417 100%);

  --ar-gradient-overlay-dark: linear-gradient(180deg, rgba(1, 48, 58, 0.10) 0%, rgba(1, 48, 58, 0.82) 100%);
  --ar-gradient-overlay-sherpa-left: linear-gradient(90deg, rgba(1, 48, 58, 0.88) 0%, rgba(1, 48, 58, 0.00) 100%);
  --ar-gradient-overlay-red-bottom: linear-gradient(180deg, rgba(193, 0, 15, 0.00) 0%, rgba(193, 0, 15, 0.78) 100%);
  --ar-gradient-overlay-soft-bottom: linear-gradient(180deg, rgba(1, 48, 58, 0.00) 0%, rgba(1, 48, 58, 0.46) 100%);

  --ar-gradient-text-light: #FFFFFF;
  --ar-gradient-text-dark: #01303A;
  --ar-gradient-border-light: rgba(255, 255, 255, 0.22);
  --ar-gradient-border-dark: rgba(1, 48, 58, 0.12);

  --ads-body: 18px;
  --ads-body-lh: 27px;

  --ads-h1: 56px; --ads-h1-lh: 64px;
  --ads-h2: 48px; --ads-h2-lh: 64px;
  --ads-h3: 32px; --ads-h3-lh: 48px;
  --ads-h4: 28px; --ads-h4-lh: 32px;

  --ads-meta-title: 16px; --ads-meta-title-lh: 24px;
  --ads-meta-caps: 12px; --ads-meta-caps-lh: 16px; --ads-meta-caps-ls: 0.96px;

  --ads-btn: 18px;

  /* Spacing/layout fallbacks (Batch 3) */
  --ads-container-max: 1280px;
  --ads-gutter-min: 32px;
  --ads-gutter-vw: 4vw;
  --ads-gutter-max: 100px;

  --ads-section-y-min: 56px;
  --ads-section-y-vw: 6vw;
  --ads-section-y-max: 96px;

  /* Optional stack rhythm helpers */
  --ads-stack-1: 8px;
  --ads-stack-2: 12px;
  --ads-stack-3: 16px;
  --ads-stack-4: 24px;
  --ads-stack-5: 32px;
  --ads-stack-6: 48px;
}

/* =========================================================
   Base
   ========================================================= */

html, body{
  font-family: var(--ads-font);
  color: var(--ads-text);
  background: var(--ads-bg);
}

body{
  font-size: var(--ads-body);
  line-height: var(--ads-body-lh);
  font-weight: 400;
}

/* =========================================================
   Headings
   ========================================================= */

h1, .ads-h1{
  font-size: var(--ads-h1);
  line-height: var(--ads-h1-lh);
  font-weight: 400;
  letter-spacing: 0.022px;
}
h2, .ads-h2{
  font-size: var(--ads-h2);
  line-height: var(--ads-h2-lh);
  font-weight: 400;
  letter-spacing: 0.014px;
}
h3, .ads-h3{
  font-size: var(--ads-h3);
  line-height: var(--ads-h3-lh);
  font-weight: 400;
  letter-spacing: 0.01px;
}
h4, .ads-h4{
  font-size: var(--ads-h4);
  line-height: var(--ads-h4-lh);
  font-weight: 600;
  letter-spacing: 0.006px;
}

/* =========================================================
   Links
   ========================================================= */

a{
  color: var(--ads-link);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* =========================================================
   Meta styles
   ========================================================= */

.ads-meta-title{
  font-size: var(--ads-meta-title);
  line-height: var(--ads-meta-title-lh);
  font-weight: 500;
}

.ads-meta-caps{
  font-size: var(--ads-meta-caps);
  line-height: var(--ads-meta-caps-lh);
  font-weight: 600;
  letter-spacing: var(--ads-meta-caps-ls);
  text-transform: uppercase;
}

/* =========================================================
   Buttons
   ========================================================= */

.ads-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--ads-font);
  font-size: var(--ads-btn);
  font-weight: 700;
  line-height: 1;
  padding: 14px 18px;
  border-radius: 12px; /* tokenise later if needed */
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  text-decoration: none;
}

.ads-btn:active{ transform: translateY(1px); }

.ads-btn--red{
  background: var(--ads-brand-red);
  color: var(--ads-white);
}

.ads-btn--blue{
  background: var(--ads-brand-blue);
  color: var(--ads-white);
}

.ads-btn--ghost{
  background: transparent;
  color: var(--ads-text);
  border: 1px solid var(--ads-border);
}

/* =========================================================
   Surfaces
   ========================================================= */

.ads-surface{
  background: var(--ads-surface);
  border: 1px solid var(--ads-border);
  border-radius: 16px; /* tokenise later if needed */
}

/* =========================================================
   Gradient utilities
   ========================================================= */

.ar-bg-gradient-red{ background: var(--ar-gradient-red); }
.ar-bg-gradient-red-deep{ background: var(--ar-gradient-red-deep); }
.ar-bg-gradient-red-warm{ background: var(--ar-gradient-red-warm); }
.ar-bg-gradient-sherpa{ background: var(--ar-gradient-sherpa); }
.ar-bg-gradient-sherpa-deep{ background: var(--ar-gradient-sherpa-deep); }
.ar-bg-gradient-green{ background: var(--ar-gradient-green); }
.ar-bg-gradient-green-deep{ background: var(--ar-gradient-green-deep); }

.ar-bg-gradient-red-soft{ background: var(--ar-gradient-red-soft); }
.ar-bg-gradient-red-mist{ background: var(--ar-gradient-red-mist); }
.ar-bg-gradient-sherpa-soft{ background: var(--ar-gradient-sherpa-soft); }
.ar-bg-gradient-green-soft{ background: var(--ar-gradient-green-soft); }
.ar-bg-gradient-green-mist{ background: var(--ar-gradient-green-mist); }

.ar-bg-gradient-surface-light{ background: var(--ar-gradient-surface-light); }
.ar-bg-gradient-surface-soft{ background: var(--ar-gradient-surface-soft); }
.ar-bg-gradient-surface-dark{ background: var(--ar-gradient-surface-dark); }
.ar-bg-gradient-surface-charcoal{ background: var(--ar-gradient-surface-charcoal); }

.ar-bg-gradient-investor{ background: var(--ar-gradient-investor); }
.ar-bg-gradient-energy{ background: var(--ar-gradient-energy); }
.ar-bg-gradient-impact{ background: var(--ar-gradient-impact); }
.ar-bg-gradient-premium-red{ background: var(--ar-gradient-premium-red); }

.ar-bg-overlay-dark{ background: var(--ar-gradient-overlay-dark); }
.ar-bg-overlay-sherpa-left{ background: var(--ar-gradient-overlay-sherpa-left); }
.ar-bg-overlay-red-bottom{ background: var(--ar-gradient-overlay-red-bottom); }
.ar-bg-overlay-soft-bottom{ background: var(--ar-gradient-overlay-soft-bottom); }

/* =========================================================
   Gradient readability helpers
   ========================================================= */

.ar-on-dark-gradient{
  color: var(--ar-gradient-text-light);
}

.ar-on-dark-gradient :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dt,
  dd,
  blockquote,
  small,
  strong,
  em,
  label,
  legend,
  .ads-h1,
  .ads-h2,
  .ads-h3,
  .ads-h4,
  .ads-meta-title,
  .ads-meta-caps,
  .ar-card__eyebrow,
  .ar-card__title,
  .ar-card__text,
  .ar-card__meta,
  .ar-slider-title--meta,
  .ar-slider-title--heading,
  a:not(.ads-btn)
){
  color: var(--ar-gradient-text-light);
}

.ar-on-light-gradient{
  color: var(--ar-gradient-text-dark);
}

.ar-on-light-gradient :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dt,
  dd,
  blockquote,
  small,
  strong,
  em,
  label,
  legend,
  .ads-h1,
  .ads-h2,
  .ads-h3,
  .ads-h4,
  .ads-meta-title,
  .ads-meta-caps,
  .ar-card__eyebrow,
  .ar-card__title,
  .ar-card__text,
  .ar-card__meta,
  .ar-slider-title--meta,
  .ar-slider-title--heading,
  a:not(.ads-btn)
){
  color: var(--ar-gradient-text-dark);
}

/* =========================================================
   Layout utilities
   ========================================================= */

.ads-container{
  max-width: var(--ads-container-max);
  margin: 0 auto;
  padding: 0 clamp(var(--ads-gutter-min), var(--ads-gutter-vw), var(--ads-gutter-max));
}

.ads-section{
  padding-top: clamp(var(--ads-section-y-min), var(--ads-section-y-vw), var(--ads-section-y-max));
  padding-bottom: clamp(var(--ads-section-y-min), var(--ads-section-y-vw), var(--ads-section-y-max));
}

/* Consistent vertical stacking */
.ads-stack > * + *{
  margin-top: var(--ads-stack-4);
}

/* =========================================================
   Responsive type scaling (no mobile design provided)
   ========================================================= */

@media (max-width: 1024px){
  h1, .ads-h1{ font-size: 44px; line-height: 52px; }
  h2, .ads-h2{ font-size: 38px; line-height: 48px; }
  h3, .ads-h3{ font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px){
  body{ font-size: 16px; line-height: 24px; }
  h1, .ads-h1{ font-size: 36px; line-height: 44px; }
  h2, .ads-h2{ font-size: 32px; line-height: 40px; }
}
/* =========================================================
   Footer (Aradel) - matches Figma layout
   ========================================================= */

.aradel-footer--dark{
  background: #001014; /* close to Sherpa Blue range */
  color: #fff;
}

.aradel-footer--dark a{ color: #fff; }

.aradel-footer__inner{
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

.aradel-footer__brandRow{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 26px;
}

.aradel-footer__logo{
  height: 44px;
  width: auto;
  display: block;
}

.aradel-footer__wordmark{
  font-size: 22px;
  font-weight: 700;
}

.aradel-footer__divider{
  height: 1px;
  background: rgba(255,255,255,.6);
  margin-bottom: 44px;
}

.aradel-footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 52px;
  align-items: start;
}

.aradel-footer__address{
  font-size: 18px;
  line-height: 28px;
  opacity: .95;
}

.aradel-footer__contact{
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}

.aradel-footer__contactText{
  font-size: 18px;
  line-height: 28px;
}

.aradel-footer__contactCircle{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aradel-footer__contactArrow{
  font-size: 22px;
  line-height: 1;
}

.aradel-footer__links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.aradel-footer__link{
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
  opacity: .95;
}

.aradel-footer__link:hover{
  text-decoration: underline;
}

.aradel-footer__socialTitle{
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 14px;
}

.aradel-footer__socialIcons{
  display: flex;
  gap: 16px;
   flex-wrap: nowrap;
  align-items: center;
}

.aradel-footer__socialIcon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: .95;
}

.aradel-footer__socialIcon svg{
  width: 44px;
  height: 44px;
  display: block;
}

.aradel-footer__copyright{
  margin-top: 84px;
  font-size: 18px;
  line-height: 28px;
  opacity: .9;
}

/* Responsive */
@media (max-width: 1024px){
  .aradel-footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .aradel-footer__socialTitle{ font-size: 24px; }
  .aradel-footer__copyright{ margin-top: 56px; }
}

@media (max-width: 768px){
  .aradel-footer__grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .aradel-footer__logo{ height: 38px; }
  .aradel-footer__address,
  .aradel-footer__link,
  .aradel-footer__contactText{
    font-size: 18px;
    line-height: 28px;
  }
  .aradel-footer__socialTitle{ font-size: 22px; }
   .aradel-footer__socialIcons{
    flex-wrap: wrap;   /* allow wrap on mobile */
  }
}
.aradel-footer--dark a,
.aradel-footer--dark a:hover{
  text-decoration: none !important;
}
.aradel-footer__link:hover{
  opacity: .8;
}
/* Footer should align with header gutters (full-width + clamp) */
.aradel-footer__inner{
  max-width: none;
  margin: 0;
  padding-left: clamp(var(--ads-gutter-min, 32px), var(--ads-gutter-vw, 4vw), var(--ads-gutter-max, 100px));
  padding-right: clamp(var(--ads-gutter-min, 32px), var(--ads-gutter-vw, 4vw), var(--ads-gutter-max, 100px));
}


/* Footer should align with header gutters (full-width, not centred container) */
.aradel-footer .ads-container.aradel-footer__inner{
  max-width: none; /* overrides ads-container’s 1280px */
  padding-left: clamp(var(--ads-gutter-min, 32px), var(--ads-gutter-vw, 4vw), var(--ads-gutter-max, 100px));
  padding-right: clamp(var(--ads-gutter-min, 32px), var(--ads-gutter-vw, 4vw), var(--ads-gutter-max, 100px));
}

.aradel-footer__socialIcons{
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
}

.aradel-footer__socialIcon{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  opacity: .95;
  transition: transform 150ms ease, opacity 150ms ease;
}

.aradel-footer__socialIcon svg{
  width: 24px;
  height: 24px;
  display: block;
}

.aradel-footer__socialIcon:hover{
  opacity: .8;
  transform: translateY(-1px);
}
.aradel-footer__socialIcons{
  display: flex;
  gap: 8px;              /* tighter */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.aradel-footer__socialIcon{
  width: 36px;           /* smaller hitbox = tighter row */
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  overflow: visible;     /* prevents clipping */
  opacity: .95;
  transition: transform 150ms ease, opacity 150ms ease;
}

.aradel-footer__socialIcon svg{
  width: 26px;           /* bigger icon */
  height: 26px;
  display: block;
  overflow: visible;     /* prevents clipping */
}

.aradel-footer__socialIcon:hover{
  opacity: .8;
  transform: translateY(-1px);
}
@media (max-width: 768px){
  /* Footer text sizes on mobile */
  .aradel-footer__address,
  .aradel-footer__link,
  .aradel-footer__contactText,
  .aradel-footer__copyright{
    font-size: 16px;
    line-height: 24px;
  }

  .aradel-footer__socialTitle{
    font-size: 20px;
    line-height: 28px;
  }

  /* Optional: slightly smaller contact circle on mobile */
  .aradel-footer__contactCircle{
    width: 46px;
    height: 46px;
  }

}

:root{
  --ar-header-h: 110px; /* change to your actual header height */
}
/* Keep the line length stable so it doesn’t wrap weirdly */
.ar-home-hero .ar-hero__intro{
  max-width: 46ch;   /* adjusts wrapping to a readable width */
}

@media (max-width: 1024px){
  .ar-home-hero .ar-hero__intro{
    max-width: 52ch;
  }
}
@media (max-width: 768px){
  .ar-home-hero .ar-hero__inner{
    left: clamp(28px, 7vw, 42px); /* more padding on mobile */
    max-width: calc(100% - 56px); /* prevents overflow while keeping padding */
  }
}




/* =========================================================
   ARADEL CARD SYSTEM - BASE
   ========================================================= */

.ar-card{
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.ar-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.ar-card__body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.ar-card__eyebrow{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.ar-card__title{
  margin: 0;
  text-wrap: balance;
}

.ar-card__text{
  margin: 0;
  flex: 1;
}

.ar-card__meta{
  font-size: 13px;
  opacity: 0.6;
}

.ar-card__cta{
  margin-top: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ar-card:hover .ar-card__cta{
  opacity: 1;
  transform: translateX(0);
}

.ar-card--cta-visible .ar-card__cta{
  opacity: 1;
  transform: none;
}

.ar-card__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ar-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   VARIANT: Media card (image background, text overlay)
   ========================================================= */

.ar-card--media{
  position: relative;
  aspect-ratio: 381 / 480;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
}

/* Disable base hover lift on media cards */
.ar-card--media:hover{
  transform: none;
  box-shadow: none;
}

/* Image wrap for smooth zoom */
.ar-card__img-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 20px;
}

.ar-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1);
}

.ar-card--media:hover .ar-card__img{
  transform: scale(1.07);
}

/* Gradient overlay */
.ar-card__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.10) 75%,
    rgba(0,0,0,0.00) 100%
  );
  pointer-events: none;
  border-radius: 20px;
}

/* Remove old ::before gradient since we now use .ar-card__overlay */
.ar-card--media::before{
  display: none;
}

/* Card content */
.ar-card--media .ar-card__body{
  position: relative;
  z-index: 2;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

/* Decorative line under title */
.ar-card--media .ar-card__title{
  margin: 0;
  color: #fff;
}

.ar-card--media .ar-card__title::after{
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #fff;
  margin-top: 10px;
  margin-bottom: 14px;
}

.ar-card--media .ar-card__text{
  margin: 0 0 16px;
  color: #fff;
  opacity: 0.9;
}

/* CTA always visible on media cards */
.ar-card--media .ar-card__cta{
  opacity: 1;
  transform: none;
  margin-top: 8px;
}

/* =========================================================
   VARIANT: Feature card (coloured background)
   ========================================================= */

.ar-card--feature{
  background-color: var(--ar-card-bg, #f0ede8);
  padding: 48px;
  min-height: 380px;
}

.ar-card--feature .ar-card__body{
  padding: 0;
  justify-content: space-between;
}

/* =========================================================
   VARIANT: People card
   ========================================================= */

.ar-card--people .ar-card__media{
  aspect-ratio: 3 / 4;
  border-radius: 20px 20px 0 0;
}

/* =========================================================
   VARIANT: Nav card
   ========================================================= */

.ar-card--nav{
  min-height: 280px;
  background-size: cover;
  background-position: center;
}

.ar-card--nav::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.0) 60%
  );
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

.ar-card--nav .ar-card__body{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  color: #fff;
  z-index: 1;
}

/* =========================================================
   CARD GRID WRAPPER
   ========================================================= */

.ar-card-grid{
  display: grid;
  gap: 24px;
}

.ar-card-grid--2{ grid-template-columns: repeat(2, 1fr); }
.ar-card-grid--3{ grid-template-columns: repeat(3, 1fr); }
.ar-card-grid--4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px){
  .ar-card-grid--3,
  .ar-card-grid--4{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){
  .ar-card-grid--2,
  .ar-card-grid--3,
  .ar-card-grid--4{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CARD SECTION WRAPPER
   ========================================================= */

.ar-card-section{
  padding-left: 112px;
  padding-right: 112px;
  padding-bottom: 96px;
  margin-top: 24px;
}

@media (min-width: 1441px){
  .ar-card-section{
    max-width: 1440px;
    margin-inline: auto;
  }
}

@media (max-width: 1024px){
  .ar-card-section{
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 72px;
  }
}

@media (max-width: 768px){
  .ar-card-section{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
  }
}

/* =========================================================
   SLIDER SECTION
   ========================================================= */

.ar-slider-section{
  padding-left: 112px;
  padding-right: 112px;
  padding-bottom: 96px;
  margin-top: 24px;
  overflow: hidden;
}

@media (min-width: 1441px){
  .ar-slider-section{
    max-width: 1440px;
    margin-inline: auto;
  }
}

@media (max-width: 1024px){
  .ar-slider-section{
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 72px;
  }
  .ar-slider-title--heading{
  font-size: 38px !important;
}
}

@media (max-width: 768px){
  .ar-slider-section{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
  }

 .ar-slider-title--heading{
  font-size: 24px !important;
}
}

/* Slider header row */
.ar-slider-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.ar-slider-meta{
  flex: 1;
}

/* Arrow buttons */
.ar-slider-nav{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hide Splide defaults */
.ar-splide .splide__arrows,
.ar-splide .splide__pagination{
  display: none;
}

/* Allow peek of next card */
.ar-splide .splide__list{
  overflow: visible;
}

.ar-splide{
  overflow: visible;
}

/* Footer CTA */
.ar-slider-footer{
  margin-top: 40px;
}
.ar-slider-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 32px;
}

.ar-card--media .ar-card__body{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

.ar-slider-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 32px;
}

.ar-card--media .ar-card__body{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}


.ar-card--media{
  position: relative;
  aspect-ratio: 381 / 480;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}

.ar-slider-title--meta{
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0.96px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  font-family: "Nunito Sans", sans-serif !important;
  margin: 0;
  flex: 1;
}

.ar-slider-title--heading{
  font-family: "Nunito Sans", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: 0.014px;
  color: var(--ads-brand-blue);
  margin: 0;
  flex: 1;
}
.ar-card--media .ar-card__title{
  font-family: "Nunito Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.001em;
  margin: 0;
  color: #fff;
}