body {
  background: url(/images/background-pattern.png) no-repeat center 450px;
  background-size: 100% auto; /* 100% width */
}


/************************************************************
 * BTN-TEXT + HAS-ARROW
 ************************************************************/

/* Container */
.btn-text {
  display: inline-block;
  color: inherit; /* allow parent/variant to drive color */
}

/* Anchor layout */
.btn-text > a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;               /* default: inherit wrapper color */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  position: relative;
  padding-bottom: .35rem;        /* room for underline */
}

/* Soft underline (always visible) */
.btn-text > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: currentColor;      /* follows the anchor color */
  opacity: .28;                  /* subtle */
  border-radius: 2px;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: left center;
}

/* Arrow (uses your nested spans) */
.btn-text .btn-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.btn-text .btn-icon > span {
  position: relative;
  display: inline-block;
  width: 22px;                   /* arrow length */
  height: 12px;
  transition: transform .2s ease;
}
/* shaft */
.btn-text .btn-icon > span > span:first-child {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  border-radius: 1px;
}
/* head */
.btn-text .btn-icon > span > span:last-child {
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* Hover/focus: nudge arrow & strengthen underline */
.btn-text > a:hover .btn-icon > span,
.btn-text > a:focus-visible .btn-icon > span {
  transform: translateX(4px);
}
.btn-text > a:hover::after,
.btn-text > a:focus-visible::after {
  opacity: .38;
}

/* Accessibility focus */
.btn-text > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Optional: compact arrow for small size anchors */
.btn-text > a._sm .btn-icon > span { width: 18px; height: 10px; }

/************************************************************
 * COLOR VARIANTS — target only .btn-text.has-arrow.{custom_btn_color}
 * Apply color to the <a> so underline/arrow (currentColor) follow.
 ************************************************************/

.btn-text.has-arrow > a { color: inherit; } /* baseline inherit */

.btn-text.has-arrow.is-primary         > a { color: var(--primary); }
.btn-text.has-arrow.is-secondary       > a { color: var(--secondary); }
.btn-text.has-arrow.is-third           > a { color: var(--third); }
.btn-text.has-arrow.is-fourth          > a { color: var(--fourth); }
.btn-text.has-arrow.is-gray            > a { color: var(--gray); }
.btn-text.has-arrow.is-dark            > a { color: var(--dark); }
.btn-text.has-arrow.is-white           > a { color: var(--white); }
.btn-text.has-arrow.is-light           > a { color: var(--light); }


/************************************************************
 * OPTIONAL: WIDTH HELPERS (if you want them outside the template <style>)
 ************************************************************/

.is-width-fullwidth   > a { width: 100%; max-width: 100%; }
.is-width-by-percentage > a { width: var(--btn-width-percent, 100%); max-width: 100%; }
.is-width-by-pixel      > a { width: var(--btn-width-px, 320px);  max-width: 100%; }



















/* Everything scoped to .feature-card */
  .feature-card{
    position:relative;
    width:100%;
    height:400px;                 /* fixed height */
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    isolation:isolate;

    /* 10px bottom border matching the panel color */
    border-bottom:10px solid #8aa066;
  }

  /* background image as an <img> that covers */
  .feature-card .feature-card__bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
  }

  /* dark gradient for legibility */
  .feature-card::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
    z-index:1;
    transition:opacity .45s ease;
    pointer-events:none;
  }

  /* image-state caption (icon above title) */
  .feature-card .feature-card__caption{
    position:absolute;
    left: 50px;
    bottom:22px;
    z-index:2;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    transform:translateY(0);
    transition:transform .45s ease, opacity .45s ease;
  }
  .feature-card .feature-card__caption img{
    width:60px; height:60px; object-fit:contain; display:block;
  }
  .feature-card .feature-card__title{
    font-size: clamp(22px, 4.2vw, 36px);
    font-weight: 500;
    letter-spacing:.2px;
    margin:0;
    color: #fff;
  }

  /* slide-up panel */
  .feature-card .feature-card__panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height: 105%;
    background:#8aa066;
    color:#fff;
    padding: 50px;
    display:flex;
    flex-direction:column;
    gap:16px;
    border-radius: 0;
    transform:translateY(100%);     /* hidden below */
    transition:transform .55s cubic-bezier(.22,1,.25,1);
    z-index:3;
  }
  .feature-card .feature-card__head{
    display:flex; flex-direction:column; gap:10px; /* icon above title */
  }
  .feature-card .feature-card__head img{
    width:60px; height:60px; object-fit:contain; display:block;
  }
  .feature-card .feature-card__heading{
    margin:0;
    font-size: clamp(28px, 5.2vw, 36px);
    line-height:1.1;
    font-weight: 500;
    color: #fff;
  }
  .feature-card .feature-card__text{
    max-width:46ch; margin:0 0 8px;
    font-size:clamp(14px, 2.4vw, 18px); opacity:.95;
  }

  /* CTA matches your markup (p.img-card-link > a) */
  .feature-card .img-card-link{ margin:0; }
  .feature-card .img-card-link a{
    display:inline-flex; align-items:center; gap:12px;
    text-decoration:none; color:inherit; font-weight:800; letter-spacing:.4px;
    border-bottom:2px solid rgba(255,255,255,.55);
    padding-bottom:2px;
  }

  /* Interactions */
  .feature-card:hover .feature-card__panel,
  .feature-card:focus-within .feature-card__panel{ transform:translateY(0); }
  .feature-card:hover::before{ opacity:0; }
  .feature-card:hover .feature-card__caption{ opacity:0; transform:translateY(10px); }

  @media (prefers-reduced-motion: reduce){
    .feature-card *, .feature-card::before{ transition:none !important; }
    .feature-card .feature-card__panel{ transform:none; }
  }


/* ACCENTS: tie class -> panel background + bottom border color */

/* neutrals with hard-coded values (adjust if your design tokens differ) */
.feature-card._bg-white            { border-bottom-color:#ffffff; }
.feature-card._bg-white .feature-card__panel { background:#ffffff; color:#1e1e1e; }

.feature-card._bg-light            { border-bottom-color:#f5f6f7; }
.feature-card._bg-light .feature-card__panel { background:#f5f6f7; color:#1e1e1e; }

.feature-card._bg-gray             { border-bottom-color:#9ca3af; }
.feature-card._bg-gray .feature-card__panel  { background:#9ca3af; color:#111111; }

.feature-card._bg-dark             { border-bottom-color:#111111; }
.feature-card._bg-dark .feature-card__panel  { background:#111111; color:#ffffff; }

/* brand accents using your existing CSS variables (with safe fallbacks) */
.feature-card._bg-primary          { border-bottom-color:var(--primary); }
.feature-card._bg-primary .feature-card__panel   { background:var(--primary); }


.feature-card._bg-secondary        { border-bottom-color:var(--secondary); }
.feature-card._bg-secondary .feature-card__panel { background:var(--secondary); }

.feature-card._bg-third            { border-bottom-color:var(--third); }
.feature-card._bg-third .feature-card__panel     { background:var(--third); }

.feature-card._bg-fourth           { border-bottom-color:var(--fourth); }
.feature-card._bg-fourth .feature-card__panel    { background:var(--fourth); }


















.mini-card{
  width: 100%;
  height: 400px;                 /* fixed height as requested */
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
  padding: 50px;
  display: flex;
  /* flex-direction: column; */        /* lets the link sit at the bottom */
  /* align-content: center; */
  align-items: center;
}










/* ===== Social CTA (scoped) ===== */
.social-cta{
  position: relative;
  width: 100%;
  min-height: 450px;
  /* border-radius: 20px; */
  overflow: hidden;
  background: #f0f4f6;             /* fallback while image loads */
  /* box-shadow: 0 6px 24px rgba(0,0,0,.08); */
}

/* Background as an image element (behind everything) */
.social-cta .social-cta__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: saturate(.95) contrast(.98) brightness(1);
  z-index: 0;                        /* <-- ensure it's at the back */
}

/* Soft top-to-bottom fade for legibility (over image, under text) */
.social-cta::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
              rgba(255,255,255,.35) 0%,
              rgba(255,255,255,.15) 40%,
              rgba(0,0,0,.08) 100%);
  pointer-events:none;
  z-index: 1;                        /* <-- above image */
}

/* Content wrapper (above overlay) */
.social-cta .social-cta__inner{
  position: relative; z-index: 2;    /* <-- above gradient */
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  justify-content: center;
  padding: 48px 16px;
  min-height: 360px;
}

/* Typography */
.social-cta .social-cta__title{
  margin: 0 0 8px;
  color: var(--secondary);
  /* font-weight: 900; */
  letter-spacing: .2px;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.1;
}
.social-cta .social-cta__subtitle{
  margin: 0 0 28px;
  color: #24484e;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  opacity: .9;
}

/* Icons row */
.social-cta .social-cta__icons{
  display: flex; gap: 28px; flex-wrap: wrap;
  align-items: center; justify-content: center;
}

/* Circle button for each icon — this was missing */
.social-cta .social-cta__icon{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #2f6f75;               /* teal circle */
  display: grid; place-items: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.12), inset 0 -2px 0 rgba(0,0,0,.1);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

/* Font Awesome glyph inside circle */
.social-cta .social-cta__icon i{
  font-size: 34px;
  line-height: 1;
  color: #fff;                        /* white glyph */
}

/* Hover/focus */
.social-cta .social-cta__icon:hover,
.social-cta .social-cta__icon:focus-visible{
  transform: translateY(-2px);
  background: #2a6267;
  box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.12);
  outline: none;
}

/* Responsive tweak */
@media (max-width: 600px){
  .social-cta .social-cta__icon{ width: 64px; height: 64px; }
  .social-cta .social-cta__icon i{ font-size: 30px; }
}


@media (max-width: 600px){
  .social-cta .social-cta__icon{
    width: 54px;
    height: 54px;
  }

  .social-cta .social-cta__icon i{
    font-size: 24px;
  }
}











/* =======================
   Promo Card (scoped)
   ======================= */
.promo-card{
  position: relative;
  width: 100%;
  min-height: 380px;               /* tweak as needed; mock is roomy */
  border-radius: 20px;
  overflow: hidden;
  padding: 40px;                    /* interior spacing */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);

  /* ✅ Vertically center content */
  display: flex;
  flex-direction: column;           /* keeps title/text/button stacked */
  justify-content: center;          /* vertical centering */
}

.promo-card .promo-card__inner{
  position: relative;
  z-index: 2;                       /* above pattern */
  max-width: 44rem;                 /* readable line length */
}

.promo-card .promo-card__title{
  margin: 0 0 18px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(28px, 4.8vw, 48px);  /* big headline */
}

.promo-card .promo-card__text{
  color: #fff;
  opacity: .95;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  margin: 0 0 28px;
}

.promo-card .promo-card__actions{
  margin: 0;
}

/* Button (coral like mock) */
.promo-card .promo-card__btn{
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background: #E87760;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}

.promo-card .promo-card__btn:hover{
  transform: translateY(-1px);
  background: #e76a52;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Optional decorative pattern image */
.promo-card .promo-card__pattern{
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: 55%;
  height: auto;
  opacity: .22;                     /* subtle like mock */
  mix-blend-mode: multiply;         /* soft overlap */
  pointer-events: none;
  z-index: 1;
}

/* ------- Theme Colors (use your tokens with fallbacks) ------- */
.promo-card._theme-primary  { background: var(--primary); }
.promo-card._theme-secondary{ background: var(--secondary); }
.promo-card._theme-third    { background: var(--third); }
.promo-card._theme-fourth   { background: var(--fourth); }

/* If you prefer theme-specific button contrasts, uncomment:
.promo-card._theme-dark   .promo-card__btn{ background:#E87760; }
.promo-card._theme-gray   .promo-card__btn{ background:#E87760; }
*/

/* Responsive padding */
@media (max-width: 991px){
  .promo-card{
    /* padding: 28px; */
  }
}

@media (max-width: 575px){
  .promo-card{
    /* padding: 20px; */
  }
  .promo-card .promo-card__pattern{
    width: 70%;
    right: -10%;
    bottom: -22%;
  }
}




/* ===========================
   E-Newsletter (dark, lined)
   Scope: .newsletter …
   =========================== */

.newsletter {
  /* palette */
  --nl-text: #d7e4e5;      /* light text */
  --nl-muted: #7aa6a8;     /* muted labels/placeholder */
  --nl-line: #6b8c8e;      /* input underline */
  --nl-line-focus: #8fd3d3;/* focus underline */
  --nl-cta: #5f8f92;       /* button bg */
  --nl-cta-hover: #4e7c7f;
  /* --nl-heading-font: "ArcherBold", "Archer", ui-serif, Georgia, serif; */
  /* --nl-body-font: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
}

/* wrapper card */
.newsletter {
  color: var(--nl-text);
  /* font-family: var(--nl-body-font); */
  /* padding: 20px; */
  /* border-radius: 8px; */
  border: none;
  /* max-width: 520px; */
}

/* heading */
.newsletter > h3 {
  /* margin: 0 0 18px 0; */
  /* font: 700 1.25rem/1.2 var(--nl-heading-font); */
  /* color: var(--nl-muted); */
}

/* neutralize table spacing */
.newsletter table.Dialog { width: 100%; border-collapse: separate; border-spacing: 0; }
.newsletter table.Dialog td { padding: 0; text-align: left !important; }
.newsletter table.Dialog tr + tr td { padding-top: 18px; }

/* input container: strip boxes, use underline only */
.newsletter .mwInput {
  background: transparent !important;
  border:none !important;
  border-bottom: 1px solid #fff !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  box-shadow: none !important;
  color: var(--nl-text) !important;
  position: relative;
}


/* the “line” */
.newsletter .mwInput.text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--nl-line);
  opacity: 0.9;
  pointer-events: none;
}

/* inputs */
.newsletter .mwInput.text input[type="text"],
.newsletter .mwInput.text input[type="email"],
.newsletter .mwInput.text input[type="search"] {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px !important;
  color: var(--nl-text) !important;
  background: transparent !important;
  padding: 5px;
}


/* placeholders look like the labels in the screenshot */
.newsletter ::placeholder { color: var(--nl-muted) !important; }

/* focus state: brighten underline */
.newsletter .mwInput.text:focus-within::after {
  background: var(--nl-line-focus);
  height: 2px;
}

/* kill icon sprites/padding if injected by system */
.newsletter .mwInput.icon,
.newsletter .mwInput .subInput.icon { padding-left: 0 !important; padding-right: 0 !important; }
.newsletter .mwInput.icon:before,
.newsletter .mwInput .subInput.icon:before { display: none !important; }

/* submit row: right-aligned button, no float */
.newsletter .mwFormSubmit {
  float: right !important;
  width: 140px;
  margin-top: 18px;
  text-align: right;
  border: none !important;
  background: var(--primary) !important;
  border-radius: 8px !important;
}

/* button base */
.newsletter .mwFormSubmit .mwInput.button {
  display: inline-block;
  border: 1px solid transparent !important;
  background: var(--nl-cta) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* button input */
.newsletter .mwFormSubmit input[type="submit"].mw,
.newsletter .mwFormSubmit input[type="button"].mw {
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  font-size: 14px !important;
  color: #ffffff !important;
  background: transparent !important; /* parent provides bg */
  border: none !important;
  text-transform: uppercase;
  cursor: pointer;
}

/* hover/active */
.newsletter .mwFormSubmit .mwInput.button:hover { background: var(--nl-cta-hover) !important; }
.newsletter .mwFormSubmit .mwInput.button:active { transform: translateY(1px); }

/* status text (optional) */
.newsletter .mwFormStatus { margin-top: 10px; font-size: 14px; color: var(--nl-muted); }
.newsletter .mwFormStatus .error, .newsletter .mwFormStatus .err { color: #ef4444; }

/* remove any leftover label or header padding inside Dialog cells */
.newsletter .Dialog th,
.newsletter .Dialog .label,
.newsletter .Dialog label { padding: 0 !important; margin: 0 !important; color: var(--nl-muted) !important; }

/* ===========================
   OPTIONAL: visual text swap
   If you can't change the input value to "LEARN MORE"
   =========================== */
.newsletter .mwFormSubmit input[type="submit"].mw[value="SUBMIT"] {
  
}
.newsletter .mwFormSubmit input[type="submit"].mw[value="SUBMIT"]::after {
  content: "LEARN MORE";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-indent: 0; color: #fff; font-weight: 800; letter-spacing: 0.04em;
}
















/* Action Alert Slider (dark card, bold CTA) */
.action-alert-slider {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  margin: 2rem 0;
}

/* Theme backgrounds – hook to your {custom_theme} radios */
.action-alert-slider._bg-primary  {/* background: #0e2f32; */}  /* deep teal */
.action-alert-slider._bg-secondary{ background: #14383b; }
.action-alert-slider._bg-third    { background: #1b3f42; }
.action-alert-slider._bg-fourth   { background: #0a2a2c; }
.action-alert-slider._bg-dark     { background: #0a1f21; }
.action-alert-slider._bg-gray     { background: #2f3a3b; }
.action-alert-slider._bg-light    { background: #eef5f6; color:#0e2f32; }
.action-alert-slider._bg-white    { background: #ffffff; color:#0e2f32; }

.action-alert-slider__inner {padding: 3rem 2rem 0;}

.action-alert-slider__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.action-alert-slider__image {flex: 0 0 369px;}
.action-alert-slider__image img { width: 100%; height: auto; display: block; }

.action-alert-slider__text {flex: 1;/* color: #d7e4e5; */}

.action-alert-slider__label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* color: #7aa6a8; */
}

.action-alert-slider__headline {
  color: inherit;
  margin: 0 0 1.25rem 0;
  line-height: 1.2;
}

/* CTA Area */
.action-alert-slider__actions {
  margin-top: 0.25rem;
  text-align: right;
}

/* Base CTA button */
.action-alert-slider__btn {
  display: inline-block;
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  color: #fff !important;
  background: #5f8f92; /* default if no color class applied */
}
.action-alert-slider__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}
.action-alert-slider__btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

/* Button color variations tied to {custom_btn_color} */
.action-alert-slider__btn._btn-primary   { background: #0ea5a4; }
.action-alert-slider__btn._btn-primary:hover   { background: #0b8e8d; }

.action-alert-slider__btn._btn-secondary { background: #5f8f92; }
.action-alert-slider__btn._btn-secondary:hover { background: #4e7c7f; }

.action-alert-slider__btn._btn-third     { background: #e87760; }
.action-alert-slider__btn._btn-third:hover     { background: #d66650; }

.action-alert-slider__btn._btn-fourth    { background: #8b5cf6; }
.action-alert-slider__btn._btn-fourth:hover    { background: #7c3aed; }

/* Responsive */
@media (max-width: 768px) {
  .action-alert-slider__inner { padding: 2rem 1.5rem; }
  .action-alert-slider__content { flex-direction: column; text-align: center; gap: 2rem; }
  .action-alert-slider__image { flex: 0 0 auto; max-width: 250px; }
  .action-alert-slider__headline { font-size: 2rem; }
  .action-alert-slider__actions { text-align: center; }
}


.responsive-embed {
  width: 100%;
  height: 500px;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  .responsive-embed {
    height: 350px;
  }
}

.responsive-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
}





.footer-sns {
  display: flex;
  align-items: center;
}

.social-cta__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.social-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  text-decoration: none;
  background: var(--primary-6);
  color: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.social-cta__icon i {
  font-size: 18px;
  line-height: 1;
}

.social-cta__icon:hover,
.social-cta__icon:focus {
  transform: translateY(-2px);
  opacity: 0.9;
	color:#fff;
}

.social-cta__icon:focus {
  outline: 2px solid var(--primary-5);
  outline-offset: 3px;
}