@import url('./insurance.css');


:root{
  --red:#d61f26;
  --red2:#b3151b;
  --black:#0b0f16;
  --black2:#101827;
  --white:#ffffff;
  --muted:#c7cfdb;
  --muted2:#94a3b8;
  --border:rgba(255,255,255,.12);
  --glass:rgba(10,15,22,.55);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 14px 44px rgba(0,0,0,.25);
  --radius:18px;
  --max:1180px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--white);
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(214,31,38,.35), transparent 55%),
    radial-gradient(900px 600px at 20% 50%, rgba(214,31,38,.18), transparent 60%),
    linear-gradient(180deg, #060a10 0%, #070b12 40%, #05070c 100%);
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ======================================================
   GLOBAL NAV
====================================================== */

.nav{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(5,7,12,.92), rgba(5,7,12,.70));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px;
}
.brand__logo{
  font-size:26px;
  color:var(--red);
}
.nav__links{
  display:flex; align-items:center; gap:26px;
  color:rgba(255,255,255,.85);
  font-weight:600;
}
.nav__links a{opacity:.9}
.nav__links a:hover{opacity:1}

/* ======================================================
   GLOBAL BUTTONS
====================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--white);
  font-weight:800;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.25)}
.btn--red{
  background: linear-gradient(180deg, var(--red), var(--red2));
  border-color: rgba(255,255,255,.08);
  color:#fff !important;
}
.btn--dark{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}
.btn--ghost{
  background:#ffffff !important;
  color:#d61f26 !important;
  border:1px solid #d61f26 !important;
  font-weight:700;
}
.btn--ghost:hover{
  background:#d61f26 !important;
  color:#ffffff !important;
  border-color:#d61f26 !important;
}
.btn--sm{height:40px; padding:0 16px; border-radius:12px}
.btn--xs{
  min-height:34px !important;
  height:34px !important;
  padding:0 10px !important;
  border-radius:10px !important;
  font-size:11px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

/* ======================================================
   HOME HERO
====================================================== */

.hero{
  position:relative;
  width:100%;
  margin:0 !important;
  padding:0 !important;
}

.hero__wrap{
  position:relative;
  width:100%;
  overflow:hidden;

  border-radius:0;
  border:none;

  box-shadow:none;

  min-height:430px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.78) 28%,
      rgba(255,255,255,.25) 55%,
      rgba(255,255,255,0) 78%
    ),
    url("/assets/img/hero.jpg") center/cover no-repeat !important;
}

.hero__content{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
  align-items:center;

  max-width:1180px;
  min-height:430px;
  margin:0 auto;
  padding:54px 20px;
}

.hero__title{
  margin:0 0 14px;
  font-size:clamp(34px, 4vw, 54px);
  line-height:1.05;
  letter-spacing:-.5px;
}

.hero__title span{
  color:var(--white);
}

.hero__sub{
  margin:0 0 18px;
  color:rgba(255,255,255,.86);
  font-size:16px;
  max-width:520px;
}

.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}

.hero__hint{
  margin-top:16px;
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.75);
  font-size:13px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #e5e7eb;
}

.pill__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(214,31,38,.18);
}

/* ======================================================
   GENERAL SECTIONS
====================================================== */

.section{
  padding:34px 0 0;
}
.section__title{
  text-align:center;
  margin:26px 0 10px;
  font-size: 28px;
  letter-spacing:-.3px;
}
.section__line{
  width:100%;
  max-width: 780px;
  margin: 0 auto 18px;
  border-top:1px solid rgba(255,255,255,.10);
}

.about{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow: var(--shadow2);
  padding:22px 20px;
}
.about p{
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.7;
  text-align:center;
  max-width:880px;
  margin:0 auto;
}

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.card{
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.card__img{
  height:190px;
  background:#111;
  position:relative;
}
.card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
.card__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}
.card__body{
  padding:18px 18px 20px;
}
.card__title{
  margin:0 0 8px;
  font-size:22px;
}
.card__text{
  margin:0 0 14px;
  color:rgba(255,255,255,.80);
  line-height:1.6;
}
.card__actions{display:flex; gap:12px; flex-wrap:wrap}
.card--dark{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color:rgba(255,255,255,.86);
  font-weight:800;
}

.why{
  margin-top:22px;
  padding:18px 18px 10px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.why__grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:14px;
  padding:10px 0 6px;
}
.why__item{
  text-align:center;
  padding:10px 10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.icon{
  width:46px; height:46px;
  display:grid; place-items:center;
  margin:0 auto 8px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  font-size:22px;
}
.why__label{
  font-weight:800;
  font-size:13px;
  color:rgba(255,255,255,.88);
}

.cta{
  margin:26px 0 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(214,31,38,.35), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
  padding:26px 20px;
  text-align:center;
}
.cta h3{
  margin:0 0 8px;
  font-size:32px;
  letter-spacing:-.4px;
}
.cta p{
  margin:0 0 16px;
  color:rgba(255,255,255,.82);
}

/* ======================================================
   FOOTER
====================================================== */

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0 26px;
  color:rgba(255,255,255,.70);
  font-size:13px;
}
.footer__inner{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}
.footer__links a{opacity:.9}
.footer__links a:hover{opacity:1}

.footer-credit{
  margin-left:6px;
  font-size:12px;
  color: rgba(255,255,255,.65);
}
.footer-credit a{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  transition: color .2s ease, opacity .2s ease;
}
.footer-credit a:hover{
  color:#fff;
  opacity:1;
}
.footer-credit strong{
  font-weight:200;
}

/* ======================================================
   TOP BAR
====================================================== */

.topbar{
  background: rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.78);
  font-size:12px;
}
.topbar__left{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.topbar__right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.kbadge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight:800;
}
.topbar__center{
  flex:1;
  display:flex;
  justify-content:center;
  overflow:hidden;
}
.marquee{
  position:relative;
  white-space:nowrap;
  overflow:hidden;
  max-width:420px;
}
.marquee span{
  display:inline-block;
  padding-left:100%;
  animation: scrollText 18s linear infinite;
  font-weight:700;
  color:rgba(255,255,255,.9);
}
@keyframes scrollText{
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ======================================================
   MODALS
====================================================== */

.modal{
  position:fixed; inset:0; z-index:80;
  display:none;
}
.modal.is-open{display:block}
.modal__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position:relative;
  width:min(860px, calc(100% - 26px));
  margin: 70px auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,24,.92), rgba(10,12,18,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal__title{
  display:flex; gap:10px; align-items:center;
  font-weight:900;
}
.modal__close{
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--white);
  cursor:pointer;
  font-size:18px;
}
.modal__body{padding:16px 18px 18px}

.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.tab{
  height:40px; padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.90);
  font-weight:900;
  cursor:pointer;
}
.tab.is-active{
  background: linear-gradient(180deg, var(--red), var(--red2));
  border-color: rgba(255,255,255,.10);
}

/* ======================================================
   FORM ELEMENTS
====================================================== */

.formgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  padding-top:14px;
}
.field label{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.78);
  margin-bottom:6px;
  font-weight:800;
}
.input, .select, .textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--white);
  padding:12px 12px;
  outline:none;
}
.textarea{min-height: 94px; resize: vertical}
.form__actions{
  display:flex; gap:12px; align-items:center; justify-content:flex-end;
  margin-top:14px; flex-wrap:wrap;
}
.note{
  margin-top:10px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.5;
}

/* ======================================================
   LOGO
====================================================== */

.logo-img{
  height:28px;
  width:auto;
  display:block;
}
.logo-badge{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  padding:8px 14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.logo-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* ======================================================
   BRANCHES MODAL
====================================================== */

.branches__panel{
  transform: translateY(18px) scale(.98);
  opacity:0;
  transition: transform .35s ease, opacity .35s ease;
}
.modal.is-open .branches__panel{
  transform: translateY(0) scale(1);
  opacity:1;
}
.branches__panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background: radial-gradient(420px 180px at 50% 0%, rgba(214,31,38,.28), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.branches__panel .modal__head,
.branches__panel .modal__body{
  position:relative;
  z-index:1;
}
.branches__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.branch-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:14px 14px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease;
}
.branch-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
}
.branch-top{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.branch-icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  font-size:20px;
}
.branch-title{
  font-weight:900;
  letter-spacing:.2px;
}
.branch-sub{
  margin-top:2px;
  font-size:12px;
  color: rgba(255,255,255,.72);
  font-weight:700;
}
.branch-line{
  color: rgba(255,255,255,.84);
  line-height:1.55;
  font-size:13px;
  margin-bottom:10px;
}
.branch-meta{
  color: rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.6;
}

/* ======================================================
   INQUIRY MODAL
====================================================== */

.inquiry__panel{
  transform: translateY(22px) scale(.97);
  opacity:0;
  transition: transform .35s ease, opacity .35s ease;
}
.modal.is-open .inquiry__panel{
  transform: translateY(0) scale(1);
  opacity:1;
}
.inquiry__panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background: radial-gradient(520px 220px at 50% 0%, rgba(214,31,38,.32), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.inquiry__panel .modal__head,
.inquiry__panel .modal__body{
  position:relative;
  z-index:1;
}
.inquiry__intro{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  margin-bottom:14px;
  line-height:1.5;
}

/* ======================================================
   CHAT
====================================================== */

#chatPanel{
  position: fixed;
  right: 18px;
  bottom: 88px;
  width: min(380px, calc(100% - 36px));
  height: 540px;
  z-index: 9999;
  display: none;
}
#chatPanel.is-open{display: block}
#chatFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  cursor: pointer;
}

.chat-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:58px;
  height:58px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, var(--red), var(--red2));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:9999;
  transition: transform .18s ease, box-shadow .18s ease;
}
.chat-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.chat-fab span{font-size:22px}

.chat-panel{
  position:fixed;
  right:18px;
  bottom:88px;
  width:min(380px, calc(100% - 36px));
  height:540px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,24,.94), rgba(10,12,18,.94));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  z-index:9999;
  opacity:0;
  transform: translateY(14px) scale(.98);
  pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
}
.chat-panel.is-open{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(214,31,38,.22), transparent 60%),
    rgba(255,255,255,.02);
}
.chat-title{
  display:flex;
  gap:10px;
  align-items:center;
}
.chat-avatar{
  width:40px;height:40px;
  border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.chat-name{font-weight:900; line-height:1.05}
.chat-sub{font-size:12px; color: rgba(255,255,255,.70); font-weight:700}

.chat-close{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  transition: background .2s ease, border-color .2s ease;
}
.chat-close:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.chat-body{
  height: calc(540px - 64px - 78px);
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.chat-body::-webkit-scrollbar{ width:8px; }
.chat-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius:999px;
}
.chat-body::-webkit-scrollbar-thumb:hover{
  background: rgba(214,31,38,.25);
}
.msg{
  display:flex;
  margin:10px 0;
}
.msg.bot{justify-content:flex-start}
.msg.user{justify-content:flex-end}
.bubble{
  max-width: 82%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  line-height:1.45;
  font-size:13px;
}
.msg.user .bubble{
  background: linear-gradient(180deg, rgba(214,31,38,.96), rgba(179,21,27,.96));
  border-color: rgba(255,255,255,.08);
  color:#fff;
}
.chat-foot{
  border-top:1px solid rgba(255,255,255,.10);
  padding:10px;
  background: rgba(255,255,255,.03);
}
.chat-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.chat-input{
  flex:1;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:0 12px;
  outline:none;
}
.chat-input::placeholder{ color: rgba(255,255,255,.55); }
.chat-send{
  height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.chat-send:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.chat-note{
  margin-top:8px;
  font-size:11px;
  color: rgba(255,255,255,.62);
  line-height:1.45;
}

/* ======================================================
   NAV PILL / DROPDOWN
====================================================== */

.nav-pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  box-shadow:
    0 0 0 1px rgba(214,31,38,.25),
    0 10px 26px rgba(0,0,0,.35),
    0 0 18px rgba(214,31,38,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-pill .nav__links{gap:20px}
.nav-pill a{
  padding:8px 14px;
  border-radius:999px;
  transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav-pill a:hover{
  background: rgba(214,31,38,.12);
  color:#fff;
  transform: translateY(-1px);
  border:1px solid rgba(214,31,38,.25);
  box-shadow: 0 0 10px rgba(214,31,38,.20);
}

.dd{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.dd__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  font: inherit;
  font-weight:600;
  line-height:40px;
  color:rgba(255,255,255,.85);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.dd__btn:hover{
  background: rgba(214,31,38,.12);
  color:#fff;
  transform: translateY(-1px);
  border-color: rgba(214,31,38,.25);
  box-shadow: 0 0 10px rgba(214,31,38,.20);
}
.dd__menu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  display:none;
  z-index:80;
}
.dd:hover .dd__menu,
.dd.is-open .dd__menu{
  display:block;
}
.dd__menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  font-weight:500;
  font-size:13px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease;
  margin:6px 0;
}
.dd__menu a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color:#fff;
}
.dd__menu--small{min-width:220px;}
.is-active-link{
  background: rgba(214,31,38,.12);
  color:#fff !important;
  border:1px solid rgba(214,31,38,.25);
  box-shadow: 0 0 10px rgba(214,31,38,.16);
}

/* ======================================================
   MOBILE BRAND
====================================================== */

.mbrand{display:none !important;}

/* ======================================================
   NRAND FUNERAL PAGE
====================================================== */

.nrand-funeral-page{
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(214,31,38,.06), transparent 60%),
    linear-gradient(180deg, #f4f6f9 0%, #eceff3 48%, #f7f8fa 100%);
  min-height: 100vh;
}

.nrand-funeral-hero{
  position: relative;
  width: 100%;
  height: 118px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.nrand-funeral-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(12,14,18,.70) 0%, rgba(12,14,18,.34) 55%, rgba(214,31,38,.18) 100%);
}
.nrand-funeral-hero__bar{
  position:relative;
  z-index:2;
  max-width:1180px;
  height:100%;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}
.nrand-funeral-hero__center{
  text-align:center;
}
.nrand-funeral-hero__center h1{
  margin:0;
  color:#fff;
  font-size:26px;
  font-weight:900;
  letter-spacing:-.2px;
}
.nrand-funeral-hero__right{
  display:flex;
  justify-content:flex-end;
}

.nrand-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  transition:all .18s ease;
}
.nrand-mini-btn--light{
  background: rgba(255,255,255,.92);
  color:#d61f26;
  border:1px solid #d61f26;
}
.nrand-mini-btn--light:hover{
  background:#d61f26;
  color:#fff;
}
.nrand-mini-btn--red{
  background: linear-gradient(180deg, #d61f26, #b3151b);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}
.nrand-mini-btn--red:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(214,31,38,.20);
}

.nrand-funeral-body{
  padding: 24px 0 42px;
}
.nrand-alert-success{
  margin-bottom:16px;
  padding:14px 16px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  color:#1f2937;
  box-shadow:0 12px 35px rgba(0,0,0,.06);
  font-weight:800;
}
.nrand-section-head{
  margin-bottom:18px;
}
.nrand-section-head h2{
  margin:0 0 6px;
  font-size:30px;
  color:#101827;
  letter-spacing:-.3px;
}
.nrand-section-head p{
  margin:0;
  color:#667085;
  font-weight:600;
}

.nrand-plan-wrapper{
  background: linear-gradient(180deg, #f7f8fb 0%, #edf1f5 100%);
  padding:26px;
  border-radius:24px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.06);
  margin-bottom:24px;
}
.nrand-plan-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.nrand-plan-card{
  border-radius:22px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  overflow:hidden;
  transition:all .25s ease;
  align-self:start;
}
.nrand-plan-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  border-color:#d61f26;
}
.nrand-plan-card__top{
  padding:16px 18px 8px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.nrand-plan-badge{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(180deg, #d61f26, #b3151b);
  box-shadow: 0 10px 28px rgba(214,31,38,.18);
  flex-shrink:0;
}
.nrand-plan-title-wrap h3{
  margin:0;
  color:#111827;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}
.nrand-plan-cover{
  margin-top:5px;
  color:#6b7280;
  font-weight:400;
}
.nrand-plan-price-row{
  padding: 0 18px 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.nrand-price-box{
  border-radius:16px;
  background:#f7f8fb;
  border:1px solid rgba(0,0,0,.05);
  padding: 10px 12px;
}
.nrand-price-box span{
  display:block;
  color:#6b7280;
  font-size:12px;
  font-weight:400;
  margin-bottom:4px;
}
.nrand-price-box strong{
  color:#101827;
  font-size:16px;
  font-weight:500;
}
.nrand-plan-actions{
  padding: 0 18px 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.nrand-plan-details{
  margin: 0 18px 16px;
  padding: 12px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid rgba(0,0,0,.05);
}
.nrand-detail-block + .nrand-detail-block{
  margin-top:14px;
}
.nrand-detail-title{
  font-weight:700;
  color:#101827;
  margin-bottom:10px;
}
.nrand-detail-table{
  display:grid;
  gap:8px;
}
.nrand-detail-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
}
.nrand-detail-row span{
  color:#4b5563;
  font-weight:400;
}
.nrand-detail-row strong{
  color:#101827;
  font-weight:600;
}
.nrand-benefit-list{
  margin:0;
  padding-left:18px;
  color:#374151;
  line-height:1.45;
  font-weight:400;
}
.nrand-benefit-list li{
  margin:4px 0;
  line-height:1.5;
}
.nrand-important-note{
  margin-top:18px;
  padding:14px 16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  color:#4b5563;
  box-shadow:0 12px 35px rgba(0,0,0,.05);
  font-weight:400;
  line-height:1.6;
}

.nrand-apply-card{
  margin-top:28px;
  border-radius:22px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}
.nrand-apply-card__head{
  padding:20px 20px 14px;
  background: linear-gradient(180deg, rgba(214,31,38,.06), rgba(255,255,255,0));
}
.nrand-apply-card__head h2{
  margin:0 0 6px;
  color:#111827;
  font-size:28px;
  font-weight:700;
}
.nrand-apply-card__head p{
  margin:0;
  color:#6b7280;
  font-weight:400;
}
.nrand-apply-card__body{
  padding:20px;
}

.nrand-funeral-page .field label{
  color:#475467;
  font-weight:500;
}
.nrand-funeral-page .input,
.nrand-funeral-page .select,
.nrand-funeral-page .textarea{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  color:#111827;
  font-weight:400;
}
.nrand-funeral-page .input::placeholder,
.nrand-funeral-page .textarea::placeholder{
  color:#98a2b3;
}

.nrand-sub-footer{
  margin-top:22px;
  padding-top:10px;
}
.nrand-sub-footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:16px;
  color:#667085;
  font-size:13px;
  font-weight:400;
}
.nrand-sub-footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.nrand-sub-footer__links a{
  color:#667085;
  text-decoration:none;
  font-weight:400;
}
.nrand-sub-footer__links a:hover{
  color:#111827;
}

/* ======================================================
   FUNERAL DETAILS MODAL
====================================================== */

.nrand-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}
.nrand-modal.is-open{
  display:block;
}
.nrand-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.nrand-modal__panel{
  position:relative;
  width:min(760px, calc(100% - 28px));
  max-height:calc(100vh - 40px);
  margin:20px auto;
  overflow:auto;
  border-radius:24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  font-weight:400;
}
.nrand-modal__panel::-webkit-scrollbar{width:8px;}
.nrand-modal__panel::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.16);
  border-radius:999px;
}
.nrand-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 20px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(214,31,38,.07), rgba(255,255,255,0));
}
.nrand-modal__badge{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(180deg, #d61f26, #b3151b);
  box-shadow:0 10px 24px rgba(214,31,38,.18);
  margin-bottom:10px;
}
.nrand-modal__head h3{
  margin:0 0 6px;
  color:#101827;
  font-size:24px;
  font-weight:600;
}
.nrand-modal__head p{
  margin:0;
  color:#6b7280;
  font-weight:700;
}
.nrand-modal__close{
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background:#fff;
  color:#d61f26;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(214,31,38,.18);
}
.nrand-modal__body{
  padding:16px 18px 18px;
}
.nrand-modal__price-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.nrand-modal__price-box{
  border-radius:16px;
  background:#f7f8fb;
  border:1px solid rgba(0,0,0,.05);
  padding:12px 14px;
}
.nrand-modal__price-box span{
  display:block;
  color:#6b7280;
  font-size:12px;
  font-weight:400;
  margin-bottom:4px;
}
.nrand-modal__price-box strong{
  color:#101827;
  font-size:16px;
  font-weight:500;
}
.nrand-modal__block{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
}
.nrand-modal__block h4{
  margin:0 0 10px;
  color:#101827;
  font-size:16px;
  font-weight:600;
}
.nrand-modal__table{
  display:grid;
  gap:8px;
}
.nrand-modal__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(0,0,0,.05);
}
.nrand-modal__row span{
  color:#4b5563;
  font-weight:400;
}
.nrand-modal__row strong{
  color:#101827;
  font-weight:500;
}
.nrand-modal__list{
  margin:0;
  padding-left:18px;
  color:#374151;
  line-height:1.45;
  font-weight:400;
}
.nrand-modal__list li{
  margin:4px 0;
}
.nrand-modal__actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* ======================================================
   NRAND LANDING PLANS SECTION
====================================================== */

.nrand-plans-home{
  position:relative;
  overflow:hidden;
  padding-top:8px;
}
.nrand-plans-home__head{
  text-align:center;
  margin-bottom:22px;
}
.nrand-plans-home__title{
  margin-top:0;
}
.nrand-plans-home__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(214,31,38,.08);
  color:#ffd4d6;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.10);
}
.nrand-plans-home__sub{
  max-width:640px;
  margin:12px auto 0;
  color:rgba(255,255,255,.74);
  line-height:1.7;
  font-size:14px;
}
.nrand-plans-grid-wrap{
  max-width:1040px;
  margin:0 auto;
}
.nrand-plans-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.nrand-plan-slide-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  padding:14px 14px 13px;
  background:linear-gradient(180deg, rgba(255,248,248,.98) 0%, rgba(255,241,241,.99) 100%);
  border:1px solid rgba(214,31,38,.10);
  box-shadow:
    0 10px 26px rgba(0,0,0,.14),
    0 4px 12px rgba(214,31,38,.06);
  transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}
.nrand-plan-slide-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    0 6px 14px rgba(214,31,38,.08);
  border-color:rgba(214,31,38,.16);
}
.nrand-plan-slide-card__glow{
  position:absolute;
  inset:auto -34px -62px auto;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,31,38,.10) 0%, rgba(214,31,38,0) 72%);
  pointer-events:none;
}
.nrand-plan-slide-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.nrand-plan-slide-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(214,31,38,.10);
  color:#8a6a6a;
  font-weight:700;
  font-size:11px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.nrand-plan-slide-card__mini{
  color:#a9484d;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nrand-plan-slide-card__title{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.22;
  color:#171717;
  font-weight:800;
}
.nrand-plan-slide-card__cover{
  font-size:18px;
  font-weight:900;
  color:#d61f26;
  line-height:1;
  margin-bottom:6px;
}
.nrand-plan-slide-card__price{
  color:#232323;
  font-weight:700;
  font-size:12px;
  margin-bottom:10px;
}
.nrand-plan-slide-card__text{
  color:#5f5f5f;
  font-size:12px;
  line-height:1.5;
  margin-bottom:10px;
  min-height:54px;
}
.nrand-plan-slide-card__list{
  list-style:none;
  padding:0;
  margin:0 0 12px;
}
.nrand-plan-slide-card__list li{
  position:relative;
  padding-left:14px;
  margin-bottom:6px;
  color:#2f2f2f;
  font-size:12px;
  line-height:1.45;
}
.nrand-plan-slide-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff5d63;
  box-shadow:0 0 0 3px rgba(255,93,99,.10);
}
.nrand-plan-slide-card__actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.nrand-plan-slide-card__actions .btn{
  flex:1 1 96px;
  justify-content:center;
}

.nrand-home-plan-modal{
  max-width:700px;
}
.nrand-home-plan-modal__title{
  display:flex;
  align-items:center;
  gap:10px;
}
.nrand-home-plan-modal__hero{
  padding:4px 0 10px;
}
.nrand-home-plan-modal__cover{
  font-size:32px;
  line-height:1;
  font-weight:900;
  color:#d61f26;
  margin-bottom:10px;
}
.nrand-home-plan-modal__price{
  font-size:15px;
  font-weight:800;
  color:#fff;
  margin-bottom:12px;
}
.nrand-home-plan-modal__text{
  color:rgba(255,255,255,.74);
  line-height:1.8;
  margin:0;
}
.nrand-home-plan-modal__prices{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}
.nrand-home-plan-modal__pricebox{
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
}
.nrand-home-plan-modal__pricebox span{
  display:block;
  color:rgba(255,255,255,.60);
  font-size:13px;
  margin-bottom:6px;
}
.nrand-home-plan-modal__pricebox strong{
  color:#fff;
  font-size:20px;
  font-weight:800;
}
.nrand-home-plan-modal__block{
  margin:10px 0 20px;
}
.nrand-home-plan-modal__block h4{
  margin:0 0 12px;
  color:#fff;
  font-size:18px;
  font-weight:800;
}
.nrand-home-plan-modal__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 14px;
}
.nrand-home-plan-modal__list li{
  position:relative;
  padding-left:18px;
  color:rgba(255,255,255,.78);
  line-height:1.6;
}
.nrand-home-plan-modal__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff5d63;
}

/* ======================================================
   NRAND GALLERY SECTION
   IMPORTANT:
   If you update this gallery layout in the future,
   DELETE this full block and paste the new updated
   gallery block here instead of adding another one
   at the bottom of style.css.
====================================================== */

.nrand-gallery-page{
  min-height:100vh;
  background:
    radial-gradient(950px 420px at 88% 0%, rgba(214,31,38,.18), transparent 60%),
    radial-gradient(760px 340px at 12% 8%, rgba(179,21,27,.10), transparent 58%),
    linear-gradient(180deg, #140809 0%, #1b0d0f 38%, #120708 100%);
}

.nrand-gallery-container{
  max-width:1380px;
  margin:0 auto;
  padding:0 22px;
}

/* PREMIUM TOP CARD */
.nrand-gallery-hero{
  padding:12px 0 8px;
}
.nrand-gallery-hero__content{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(520px 170px at 50% 0%, rgba(214,31,38,.16), transparent 72%),
    linear-gradient(135deg, #120708 0%, #1a0d0f 45%, #0f0a0b 100%);
  box-shadow:0 16px 34px rgba(0,0,0,.20);
  padding:14px 22px 16px;
  text-align:center;
}
.nrand-gallery-hero__top{
  display:flex;
  justify-content:flex-start;
  margin-bottom:8px;
}
.nrand-gallery-back-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.nrand-gallery-back-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
}
.nrand-gallery-back-btn__icon{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.10);
  color:#ffffff;
}
.nrand-gallery-hero__content h1{
  margin:0 0 6px;
  font-size:clamp(21px, 3vw, 32px);
  line-height:1.08;
  letter-spacing:-.4px;
  color:#ffffff;
}
.nrand-gallery-hero__content p{
  margin:0 auto;
  max-width:700px;
  color:rgba(255,255,255,.76);
  line-height:1.5;
  font-size:13px;
}

.nrand-gallery-main{
  padding:8px 0 30px;
}
.nrand-gallery-shell{
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 390px;
  gap:18px;
  align-items:start;
}
.nrand-gallery-center{
  min-width:0;
}

/* LEFT IMAGES PANEL */
.nrand-gallery-images-panel{
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  overflow:hidden;
}
.nrand-gallery-panel-head{
  padding:16px 18px;
  border-bottom:1px solid rgba(15,23,42,.07);
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(180deg, rgba(214,31,38,.04), rgba(255,255,255,0));
}
.nrand-gallery-panel-head h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#111827;
}
.nrand-gallery-panel-head span{
  font-size:12px;
  font-weight:700;
  color:#98a2b3;
}
.nrand-gallery-images-list{
  padding:12px;
  display:grid;
  gap:12px;
}
.nrand-gallery-images-list--scroll{
  max-height:650px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nrand-gallery-images-list--scroll::-webkit-scrollbar{
  width:8px;
}
.nrand-gallery-images-list--scroll::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.14);
  border-radius:999px;
}
.nrand-gallery-images-list--scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(214,31,38,.28);
}
.nrand-gallery-image-card{
  border:none;
  width:100%;
  text-align:left;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nrand-gallery-image-card:hover,
.nrand-gallery-image-card.is-active{
  transform:translateY(-2px);
  border-color:rgba(214,31,38,.26);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.nrand-gallery-image-card__thumb{
  height:132px;
  background:#eef2f6;
  overflow:hidden;
}
.nrand-gallery-image-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nrand-gallery-image-card__body{
  padding:10px 12px 12px;
}
.nrand-gallery-image-card__body h4{
  margin:0 0 5px;
  font-size:13px;
  line-height:1.35;
  color:#111827;
  font-weight:800;
}
.nrand-gallery-image-card__body p{
  margin:0;
  font-size:11px;
  line-height:1.55;
  color:#667085;
}

/* CENTER PLAYER */
.nrand-gallery-feature{
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.nrand-gallery-feature__player-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#0b0f16;
  overflow:hidden;
}
.nrand-gallery-feature__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  object-fit:cover;
  background:#000;
}
.nrand-gallery-feature__image-view{
  position:absolute;
  inset:0;
  display:none;
  background:#f3f4f6;
}
.nrand-gallery-feature__image-view.is-visible{
  display:block;
}
.nrand-gallery-feature__image-view img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#f3f4f6;
}
.nrand-gallery-feature__playbtn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:84px;
  height:84px;
  border:none;
  border-radius:50%;
  background:linear-gradient(180deg, #d61f26, #b3151b);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 18px 34px rgba(0,0,0,.26);
  z-index:3;
}
.nrand-gallery-feature__playbtn span{
  font-size:28px;
  margin-left:4px;
}
.nrand-gallery-feature__meta{
  padding:18px 18px 22px;
}
.nrand-gallery-feature__topline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.nrand-gallery-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(214,31,38,.08);
  border:1px solid rgba(214,31,38,.14);
  color:#b3151b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nrand-gallery-date{
  color:#98a2b3;
  font-size:12px;
  font-weight:700;
}
.nrand-gallery-feature__meta h2{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.3px;
  color:#111827;
}
.nrand-gallery-feature__meta p{
  margin:0;
  color:#667085;
  line-height:1.75;
  font-size:14px;
}

/* RIGHT VIDEOS PANEL */
.nrand-gallery-list{
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  overflow:hidden;
}
.nrand-gallery-list__head--light{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 18px;
  border-bottom:1px solid rgba(15,23,42,.07);
  background:linear-gradient(180deg, rgba(214,31,38,.04), rgba(255,255,255,0));
}
.nrand-gallery-list__head--light h3{
  margin:0;
  color:#111827;
  font-size:16px;
  font-weight:800;
}
.nrand-gallery-list__head--light span{
  color:#98a2b3;
  font-size:12px;
  font-weight:700;
}
.nrand-gallery-list__items{
  padding:10px;
}
.nrand-gallery-list__items--scroll{
  max-height:650px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nrand-gallery-list__items--scroll::-webkit-scrollbar{
  width:8px;
}
.nrand-gallery-list__items--scroll::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.14);
  border-radius:999px;
}
.nrand-gallery-list__items--scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(214,31,38,.28);
}
.nrand-gallery-item--light{
  width:100%;
  border:none;
  text-align:left;
  display:grid;
  grid-template-columns:138px 1fr;
  gap:12px;
  padding:10px;
  margin-bottom:10px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nrand-gallery-item--light:last-child{
  margin-bottom:0;
}
.nrand-gallery-item--light:hover,
.nrand-gallery-item--light.is-active{
  transform:translateY(-2px);
  border-color:rgba(214,31,38,.24);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.nrand-gallery-item__thumb-wrap--light{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#eef2f6;
  min-height:94px;
}
.nrand-gallery-item__video-preview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#e5e7eb;
}
.nrand-gallery-item__play{
  position:absolute;
  left:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(214,31,38,.92);
  color:#fff;
  font-size:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  z-index:2;
  pointer-events:none;
}
.nrand-gallery-item__body--light{
  min-width:0;
}
.nrand-gallery-item__category--light{
  color:#d61f26;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.nrand-gallery-item__body--light h4{
  margin:0 0 6px;
  color:#111827;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
}
.nrand-gallery-item__body--light p{
  margin:0 0 8px;
  color:#667085;
  font-size:12px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.nrand-gallery-item__meta--light{
  color:#98a2b3;
  font-size:11px;
  font-weight:700;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1100px){
  .hero__content{grid-template-columns:1fr; padding:42px 22px}
  .cards{grid-template-columns:1fr}
  .why__grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .nrand-plans-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width: 980px){
  .branches__grid{grid-template-columns:1fr}
  .dd__menu{ left:auto; right:0; }
  .mbrand{display:flex !important;}
  .nrand-plan-grid{grid-template-columns:1fr;}
  .nrand-plan-price-row,
  .nrand-plan-actions{grid-template-columns:1fr;}
  .nrand-plan-wrapper{padding:16px;}
  .nrand-funeral-hero{height:108px;}
  .nrand-funeral-hero__bar{
    grid-template-columns: 1fr auto 1fr;
    padding:0 14px;
  }
  .nrand-funeral-hero__center h1{font-size:22px;}
  .nrand-mini-btn{
    height:36px;
    padding:0 12px;
    font-size:13px;
  }
}

@media (max-width: 780px){
  .formgrid{grid-template-columns:1fr}
}

@media (max-width: 767px){
  .nrand-plans-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .nrand-plan-slide-card{
    padding:14px 13px 12px;
  }
  .nrand-plan-slide-card__text{
    min-height:auto;
  }
  .nrand-home-plan-modal__prices,
  .nrand-home-plan-modal__list{
    grid-template-columns:1fr;
  }
}

@media (max-width: 680px){
  .nrand-modal__panel{
    width:min(100%, calc(100% - 16px));
    margin:8px auto;
    max-height:calc(100vh - 16px);
    border-radius:18px;
  }
  .nrand-modal__price-row{
    grid-template-columns:1fr;
  }
  .nrand-modal__actions{
    flex-direction:column;
  }
  .nrand-modal__actions .btn{
    width:100%;
  }
  .nrand-modal__row{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .nrand-funeral-hero__bar{
    grid-template-columns: 1fr;
    gap:8px;
    justify-items:center;
    text-align:center;
  }
  .nrand-funeral-hero{
    height:auto;
    min-height:118px;
    padding:12px 0;
  }
  .nrand-funeral-hero__right,
  .nrand-funeral-hero__left{
    display:flex;
    justify-content:center;
  }

  .nrand-gallery-container{
    padding:0 14px;
  }
  .nrand-gallery-hero{
    padding:12px 0 8px;
  }
  .nrand-gallery-hero__content{
    padding:14px 14px 16px;
  }
  .nrand-gallery-hero__content h1{
    font-size:22px;
  }
  .nrand-gallery-hero__content p{
    font-size:12px;
    line-height:1.5;
  }
  .nrand-gallery-feature__meta h2{
    font-size:22px;
  }
  .nrand-gallery-item--light{
    grid-template-columns:1fr;
  }
  .nrand-gallery-item__thumb-wrap--light{
    min-height:180px;
  }
  .nrand-gallery-feature__playbtn{
    width:72px;
    height:72px;
  }
  .nrand-gallery-feature__playbtn span{
    font-size:24px;
  }
}

@media (max-width: 420px){
  .nav__links{display:none}
  .cta h3{font-size:26px}
}

@media (max-width: 1200px){
  .nrand-gallery-shell{
    grid-template-columns:1fr;
  }
  .nrand-gallery-images-list--scroll,
  .nrand-gallery-list__items--scroll{
    max-height:none;
    overflow:visible;
  }
}

/* Light Theme Override */
body{
    background:#ffffff !important;
    color:#111827 !important;
}

/* ===== Light Theme Text Override ===== */

.section__title,
.about p,
.card__title,
.card__text,
.why__label,
.cta h3,
.cta p,
.footer,
.footer__links a,
.footer-credit,
.topbar__inner,
.badge,
.hero__title span{
    color:#111827 !important;
}

/* Top moving message */
.marquee span{
    color:#111827 !important;
}

/* ==============================
   LIGHT THEME OVERRIDES
   ============================== */

/* Top moving message */
.marquee span{
    color:#111827 !important;
}

/* Funeral plans description */
.nrand-plans-home__sub{
    color:#4b5563 !important;
    font-weight:400 !important;
}

/* Hero title */
.hero__title{
    font-weight:600 !important;
}

/* ==========================
   PREMIUM HERO
   ========================== */

/* ======================================================
   FULL WIDTH HOME HERO
====================================================== */

.hero{
    position:relative;
    width:100%;
    margin:0 !important;
    padding:0 !important;
}

.hero > .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

.hero__wrap{
    position:relative;

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

    /*
     * Keeps the full family image visible
     * instead of aggressively cropping it.
     */
    min-height:520px;

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

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.75) 28%,
            rgba(255,255,255,.20) 55%,
            rgba(255,255,255,0) 75%
        ),
        url("/assets/img/hero.jpg") center center / 100% auto no-repeat;

    background-color:#f5f5f5;
}

/* ======================================================
   HERO CONTENT
====================================================== */

.hero__content{
    width:100%;
    max-width:1180px;

    min-height:520px;

    margin:0 auto;

    padding:54px 20px;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:20px;

    align-items:center;
}

/* ======================================================
   HERO TITLE
====================================================== */

.hero__title{
    color:#14213d !important;
    font-weight:600 !important;
}

/* ======================================================
   TRUSTED BADGE
====================================================== */

.pill{
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    color:#111827 !important;
    backdrop-filter:none !important;
}

/* ======================================================
   HERO DESCRIPTION
====================================================== */

.hero__sub{
    color:#374151 !important;
}

/* ======================================================
   HERO HINT
====================================================== */

.hero__hint{
    color:#4b5563 !important;
}

/* ======================================================
   BUTTON
====================================================== */

.btn{
    font-weight:600 !important;
}

/* =========================================================
   NRAND PREMIUM FUNERAL PLANS SECTION
   FINAL OVERRIDE
========================================================= */

.nrand-plans-home{
    position:relative;

    width:100%;

    padding:95px 0 105px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(214,31,38,.10),
            transparent 38%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(214,31,38,.055),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255,255,255,.035),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #08090b 0%,
            #101114 45%,
            #08090b 100%
        );

    color:#fff;
}


/* =========================================================
   SUBTLE BACKGROUND LIGHT
========================================================= */

.nrand-plans-home::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-360px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(214,31,38,.10) 0%,
            rgba(214,31,38,.035) 35%,
            transparent 70%
        );

    pointer-events:none;

}


/* =========================================================
   SUBTLE RED SIDE GLOW
========================================================= */

.nrand-plans-home::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-280px;
    bottom:-250px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(214,31,38,.10),
            transparent 68%
        );

    pointer-events:none;

}


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

.nrand-plans-home__head{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:55px;

}


/* TITLE */

.nrand-plans-home__title{

    margin:0;

    color:#fff;

    font-size:clamp(28px,3vw,40px);

    font-weight:500;

    letter-spacing:-.4px;

}


/* =========================================================
   UNIQUE RED TITLE ACCENT
========================================================= */

.nrand-plans-home__title::after{

    content:"";

    display:block;

    width:90px;

    height:2px;

    margin:18px auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        #d61f26,
        transparent
    );

    position:relative;

}


/* SMALL RED DOT */

.nrand-plans-home__title::before{

    content:"";

    display:block;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    margin-top:34px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#d61f26;

    box-shadow:
        0 0 0 4px rgba(214,31,38,.10),
        0 0 18px rgba(214,31,38,.35);

}


/* SUBTITLE */

.nrand-plans-home__sub{

    position:relative;

    z-index:2;

    max-width:680px;

    margin:25px auto 0;

    color:rgba(255,255,255,.68);

    font-size:15px;

    line-height:1.7;

}


/* =========================================================
   FULL WIDTH CARD AREA
========================================================= */

.nrand-plans-home .container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1500px;

    margin:0 auto;

    padding-left:35px;

    padding-right:35px;

}


/* =========================================================
   GRID
========================================================= */

.nrand-plans-grid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}


/* =========================================================
   PREMIUM CARD
========================================================= */

.nrand-plan-slide-card{

    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99) 0%,
            rgba(255,249,249,.98) 55%,
            rgba(252,239,240,.98) 100%
        );

    border:1px solid rgba(214,31,38,.16);

    border-radius:18px;

    padding:22px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.04);

    color:#222;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}


/* RED LIGHT AT BOTTOM OF CARD */

.nrand-plan-slide-card::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-160px;
    bottom:-170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(214,31,38,.14),
            transparent 70%
        );

    pointer-events:none;

}


/* =========================================================
   CARD HOVER
========================================================= */

.nrand-plan-slide-card:hover{

    transform:translateY(-9px);

    border-color:rgba(214,31,38,.38);

    box-shadow:
        0 28px 60px rgba(0,0,0,.28),
        0 10px 35px rgba(214,31,38,.10);

}


/* =========================================================
   TITLE
========================================================= */

.nrand-plan-slide-card__title{

    position:relative;

    z-index:2;

    color:#202020;

    font-size:17px;

    font-weight:500;

}


/* =========================================================
   COVER
========================================================= */

.nrand-plan-slide-card__cover{

    position:relative;

    z-index:2;

    color:#d61f26;

    font-size:23px;

    font-weight:500;

}


/* =========================================================
   MONTHLY PRICE
========================================================= */

.nrand-plan-slide-card__price{

    position:relative;

    z-index:2;

    color:#333;

    font-size:13px;

    font-weight:500;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.nrand-plan-slide-card__text{

    position:relative;

    z-index:2;

    color:#626262;

}


/* =========================================================
   FEATURES
========================================================= */

.nrand-plan-slide-card__list{

    position:relative;

    z-index:2;

}


.nrand-plan-slide-card__list li{

    color:#404040;

}


/* =========================================================
   RED FEATURE DOT
========================================================= */

.nrand-plan-slide-card__list li::before{

    background:#d61f26;

    box-shadow:
        0 0 0 3px rgba(214,31,38,.08);

}


/* =========================================================
   FOOTER / VIEW PLAN
========================================================= */

.nrand-plan-slide-card__footer{

    position:relative;

    z-index:2;

    border-top:1px dashed rgba(0,0,0,.10);

}


.nrand-plan-view-btn{

    color:#d61f26;

    font-weight:600;

}


.nrand-plan-view-btn:hover{

    color:#a80f15;

}


/* =========================================================
   DESKTOP LARGE SCREENS
========================================================= */

@media(min-width:1500px){

    .nrand-plans-home .container{

        max-width:1600px;

    }

    .nrand-plans-grid{

        gap:28px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1200px){

    .nrand-plans-home .container{

        padding-left:25px;
        padding-right:25px;

    }

    .nrand-plans-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .nrand-plans-home{

        padding:70px 0 80px;

    }

    .nrand-plans-home__head{

        margin-bottom:40px;

        padding:0 20px;

    }

    .nrand-plans-home__title{

        font-size:28px;

    }

    .nrand-plans-home__sub{

        font-size:14px;

    }

    .nrand-plans-home .container{

        padding-left:18px;
        padding-right:18px;

    }

    .nrand-plans-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .nrand-plan-slide-card{

        padding:20px;

    }

}

/* =========================================================
   NRAND FUNERAL PLANS — DARK PREMIUM SECTION
========================================================= */

.nrand-plans-home{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:90px 0 100px !important;

    background-color:#0b0c0f !important;

    background-image:
        radial-gradient(
            circle at 50% -15%,
            rgba(214,31,38,.18) 0%,
            rgba(214,31,38,.07) 25%,
            transparent 55%
        ),
        linear-gradient(
            135deg,
            #08090b 0%,
            #111318 50%,
            #08090b 100%
        ) !important;

}


/* =========================================================
   SUBTLE RED GLOW
========================================================= */

.nrand-plans-home::before{

    content:"";

    position:absolute;

    top:-250px;
    left:50%;

    width:800px;
    height:500px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(214,31,38,.12) 0%,
            rgba(214,31,38,.04) 40%,
            transparent 72%
        );

    pointer-events:none;

}


/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

.nrand-plans-home .container{

    position:relative;

    z-index:2;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.nrand-plans-home__head{

    position:relative;

    z-index:3;

}


.nrand-plans-home__title{

    color:#ffffff !important;

}


/* REMOVE THE OLD DECORATIVE LINE */

.nrand-plans-home__title::after{

    display:none !important;

    content:none !important;

}


.nrand-plans-home__sub{

    color:rgba(255,255,255,.70) !important;

}


/* =========================================================
   PLAN GRID
========================================================= */

.nrand-plans-grid{

    position:relative;

    z-index:3;

}


/* =========================================================
   KEEP CARDS CLEAN
========================================================= */

.nrand-plan-slide-card{

    box-shadow:
        0 18px 45px rgba(0,0,0,.32);

}


/* =========================================================
   CARD HOVER
========================================================= */

.nrand-plan-slide-card:hover{

    box-shadow:
        0 25px 60px rgba(0,0,0,.42),
        0 10px 30px rgba(214,31,38,.12);

}

/* =========================================================
   NRAND FUNERAL PLANS
   LIGHT PREMIUM SECTION
========================================================= */

.nrand-plans-home{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:90px 0 100px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214,31,38,.08) 0%,
            rgba(214,31,38,.035) 22%,
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #fafafa 0%,
            #ffffff 45%,
            #f8f9fa 100%
        ) !important;

}


/* =========================================================
   SUBTLE SIDE ACCENTS
========================================================= */

.nrand-plans-home::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-220px;
    top:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(214,31,38,.055) 0%,
            rgba(214,31,38,.018) 45%,
            transparent 72%
        );

    pointer-events:none;

}


.nrand-plans-home::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-220px;
    bottom:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.035) 0%,
            rgba(0,0,0,.012) 45%,
            transparent 72%
        );

    pointer-events:none;

}


/* =========================================================
   KEEP CONTENT ABOVE DECORATION
========================================================= */

.nrand-plans-home .container{

    position:relative;

    z-index:2;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.nrand-plans-home__head{

    position:relative;

    z-index:3;

}


.nrand-plans-home__title{

    color:#14213d !important;

    font-weight:600;

}


/* Remove unwanted long line */

.nrand-plans-home__title::after{

    content:none !important;

    display:none !important;

}


.nrand-plans-home__sub{

    color:#526173 !important;

}


/* =========================================================
   PLAN GRID
========================================================= */

.nrand-plans-grid{

    position:relative;

    z-index:3;

}


/* =========================================================
   CARDS
========================================================= */

.nrand-plan-slide-card{

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffafa 70%,
            #fff3f3 100%
        ) !important;

    border:1px solid rgba(193,27,35,.12);

    box-shadow:
        0 12px 35px rgba(20,33,61,.07);

}


/* =========================================================
   CARD HOVER
========================================================= */

.nrand-plan-slide-card:hover{

    transform:translateY(-6px);

    border-color:rgba(193,27,35,.28);

    box-shadow:
        0 20px 45px rgba(20,33,61,.11),
        0 8px 25px rgba(214,31,38,.06);

}

/* =========================================================
   FUNERAL PLANS HEADING — CLEAN RED ACCENT
========================================================= */

.nrand-plans-home__title{

    position:relative;

    display:inline-block;

    color:#14213d !important;

}


/* Remove the misplaced decoration */

.nrand-plans-home__title::after{

    content:"";

    display:block;

    position:relative;

    width:70px;

    height:3px;

    margin:14px auto 0;

    background:#d7262d;

    border-radius:10px;

    box-shadow:
        0 0 12px rgba(214,31,38,.18);

}


/* Remove any dot/decorative element attached to the heading */

.nrand-plans-home__title::before{

    content:none !important;

    display:none !important;

}

/* =========================================================
   FUNERAL PLANS HEADING — VISIBLE RED ACCENT
========================================================= */

.nrand-plans-home__title{

    position:relative;

    display:inline-block;

    color:#14213d !important;

}


/* Strong visible red line */

.nrand-plans-home__title::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    margin:14px auto 0;

    background:#d7262d !important;

    border-radius:20px;

    opacity:1 !important;

    box-shadow:
        0 2px 8px rgba(214,31,38,.25);

}


/* Make sure no old dot interferes */

.nrand-plans-home__title::before{

    content:none !important;

    display:none !important;

}

/* =========================================================
   NRAND FUNERAL PLANS — FINAL SPACING & HEADING FIX
========================================================= */

.nrand-plans-home{

    padding:45px 0 75px !important;

    position:relative;

    width:100%;

    overflow:hidden;

}


/* =========================================================
   HEADING AREA
========================================================= */

.nrand-plans-home__head{

    margin-bottom:32px !important;

    text-align:center;

}


/* =========================================================
   HEADING + VISIBLE RED ACCENT
========================================================= */

.nrand-plans-home__title{

    display:inline-block !important;

    position:relative;

    margin:0 !important;

    padding:0 0 17px !important;

    color:#14213d !important;

    background:

        linear-gradient(
            to right,
            #d7262d,
            #d7262d
        )

        center bottom /

        70px 3px

        no-repeat !important;

}


/* =========================================================
   REMOVE ALL OLD HEADING DECORATIONS
========================================================= */

.nrand-plans-home__title::before,
.nrand-plans-home__title::after{

    content:none !important;

    display:none !important;

}


/* =========================================================
   SUBTITLE
========================================================= */

.nrand-plans-home__sub{

    margin-top:0 !important;

    color:#526173 !important;

}


/* =========================================================
   REMOVE EXTRA TOP SPACE CREATED BY HERO
========================================================= */

.hero{

    padding-bottom:0 !important;

}

/* =========================================================
   NRAND — WHY CHOOSE US
   PREMIUM FULL-WIDTH SECTION
========================================================= */

.why{

    position:relative;

    width:100vw;

    margin-left:calc(50% - 50vw);

    padding:90px 0 100px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214,31,38,.16) 0%,
            rgba(214,31,38,.06) 25%,
            transparent 52%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(214,31,38,.08) 0%,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #111318 0%,
            #17191f 50%,
            #0d0f13 100%
        );

    color:#fff;

}


/* =========================================================
   SUBTLE TOP LIGHT
========================================================= */

.why::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:700px;
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,31,38,.65),
            transparent
        );

}


/* =========================================================
   INNER
========================================================= */

.why__inner{

    position:relative;

    z-index:2;

    width:min(1180px, calc(100% - 40px));

    margin:0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.why__heading{

    text-align:center;

    margin-bottom:55px;

}


.why__heading .section__title{

    margin:0;

    color:#fff !important;

    font-size:clamp(28px, 3vw, 40px);

    font-weight:600;

}


.why__line{

    width:65px;

    height:3px;

    margin:14px auto 16px;

    border-radius:20px;

    background:#d7262d;

    box-shadow:
        0 0 14px rgba(214,31,38,.35);

}


.why__subtitle{

    max-width:620px;

    margin:0 auto;

    color:rgba(255,255,255,.68);

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   GRID
========================================================= */

.why__grid{

    display:grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:25px;

    align-items:stretch;

}


/* =========================================================
   FEATURE ITEM
========================================================= */

.why__item{

    position:relative;

    min-height:205px;

    padding:28px 18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.20);

    backdrop-filter:blur(8px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   ICON
========================================================= */

.why__icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f4f6
        );

    border:1px solid rgba(214,31,38,.15);

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);

}


.why__icon svg{

    width:27px;

    height:27px;

    fill:none;

    stroke:#d7262d;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* =========================================================
   LABEL
========================================================= */

.why__label{

    color:#fff;

    font-size:15px;

    font-weight:600;

    line-height:1.4;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.why__text{

    margin:10px 0 0;

    color:rgba(255,255,255,.58);

    font-size:12px;

    line-height:1.6;

}


/* =========================================================
   HOVER
========================================================= */

.why__item:hover{

    transform:translateY(-6px);

    border-color:rgba(214,31,38,.35);

    box-shadow:
        0 20px 45px rgba(0,0,0,.28),
        0 5px 25px rgba(214,31,38,.08);

}


/* =========================================================
   MOVEMENT — LEFT ITEMS
========================================================= */

.why__item--left{

    animation:
        whyLeftMeet 1.1s cubic-bezier(.22,.8,.25,1)
        both;

}


.why__item--left:nth-child(1){

    animation-delay:.15s;

}


.why__item--left:nth-child(2){

    animation-delay:.30s;

}


/* =========================================================
   MOVEMENT — RIGHT ITEMS
========================================================= */

.why__item--right{

    animation:
        whyRightMeet 1.1s cubic-bezier(.22,.8,.25,1)
        both;

}


.why__item--right:nth-child(4){

    animation-delay:.30s;

}


.why__item--right:nth-child(5){

    animation-delay:.15s;

}


/* =========================================================
   CENTRE ITEM
========================================================= */

.why__item--center{

    animation:

        whyCenterAppear .8s ease .4s

        both;

}


/* =========================================================
   LEFT ANIMATION
========================================================= */

@keyframes whyLeftMeet{

    from{

        opacity:0;

        transform:
            translateX(-150px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateX(0)
            scale(1);

    }

}


/* =========================================================
   RIGHT ANIMATION
========================================================= */

@keyframes whyRightMeet{

    from{

        opacity:0;

        transform:
            translateX(150px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateX(0)
            scale(1);

    }

}


/* =========================================================
   CENTRE ANIMATION
========================================================= */

@keyframes whyCenterAppear{

    from{

        opacity:0;

        transform:
            translateY(25px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .why{

        padding:75px 0 80px;

    }

    .why__grid{

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .why{

        padding:65px 0 70px;

    }

    .why__inner{

        width:
            calc(100% - 30px);

    }

    .why__heading{

        margin-bottom:35px;

    }

    .why__grid{

        grid-template-columns:1fr;

        gap:16px;

    }

    .why__item{

        min-height:auto;

        padding:24px 18px;

    }

    .why__item--left,
    .why__item--right,
    .why__item--center{

        animation:none;

    }

}

/* =========================================================
   NRAND — WHY CHOOSE US
   PREMIUM SHAPED PANEL OVERRIDE
========================================================= */

.why{

    position:relative;

    width:calc(100% - 70px);

    max-width:1400px;

    margin:70px auto 80px;

    padding:85px 55px 90px;

    overflow:hidden;

    border-radius:32px;

    border:1px solid rgba(214,31,38,.18);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214,31,38,.18) 0%,
            rgba(214,31,38,.06) 25%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            #111318 0%,
            #17191f 50%,
            #0d0f13 100%
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.16);

}


/* =========================================================
   REMOVE FULL-WIDTH BEHAVIOUR
========================================================= */

.why::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:520px;

    height:2px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #d7262d,
            transparent
        );

    opacity:.8;

}


/* =========================================================
   HEADING
========================================================= */

.why__heading .section__title{

    color:#ffffff !important;

}


.why__subtitle{

    color:rgba(255,255,255,.68) !important;

}


/* =========================================================
   RED HEADING LINE
========================================================= */

.why__line{

    width:60px !important;

    height:3px !important;

    margin:14px auto 16px !important;

    background:#d7262d !important;

    border-radius:20px;

    box-shadow:
        0 0 12px rgba(214,31,38,.35);

}


/* =========================================================
   CARDS
========================================================= */

.why__item{

    color:#ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        ) !important;

    border:1px solid rgba(255,255,255,.10) !important;

}


/* =========================================================
   MAKE ALL CARD TEXT WHITE
========================================================= */

.why__item .why__label{

    color:#ffffff !important;

}


.why__item .why__text{

    color:rgba(255,255,255,.62) !important;

}


/* Prevent inherited blue link/text styles */

.why__item,
.why__item *{

    color:#ffffff;

}


.why__item .why__text{

    color:rgba(255,255,255,.62) !important;

}


/* =========================================================
   ICON BOX
========================================================= */

.why__icon{

    background:#ffffff !important;

    border:1px solid rgba(214,31,38,.15) !important;

}


.why__icon svg{

    stroke:#d7262d !important;

}


/* =========================================================
   CARD HOVER
========================================================= */

.why__item:hover{

    border-color:rgba(214,31,38,.40) !important;

    background:
        linear-gradient(
            145deg,
            rgba(214,31,38,.12),
            rgba(255,255,255,.035)
        ) !important;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .why{

        width:calc(100% - 40px);

        padding:70px 35px 75px;

        border-radius:26px;

    }

}


@media(max-width:600px){

    .why{

        width:calc(100% - 24px);

        margin:45px auto 55px;

        padding:60px 18px 65px;

        border-radius:22px;

    }

}

/* =========================================================
   WHY CHOOSE NRAND — FINAL TEXT FIX
========================================================= */

/* Card titles */
.why .why__label,
.why .why__item .why__label,
.why .why__item > .why__label {
    color:#ffffff !important;
    opacity:1 !important;
}

/* Card descriptions */
.why .why__item p,
.why .why__item .why__text {
    color:rgba(255,255,255,.72) !important;
    opacity:1 !important;
}

/* Make sure nothing inside the cards inherits the old blue */
.why .why__item * {
    --text-color:#ffffff;
}

/* Icon stays clean */
.why .why__item .icon,
.why .why__item .why__icon {
    color:#d7262d !important;
}

/* Keep the heading white */
.why h2,
.why .section__title {
    color:#ffffff !important;
}

/* =========================================================
   NRAND — CONTACT CTA DARK RED THEME
   Keeps existing card layout and dimensions unchanged
========================================================= */

.protect-family,
.protect-family .container,
.protect-family .cta-card,
.family-protection,
.cta-card {

    color:#ffffff !important;

}


/* Main CTA card */

.protect-family .cta-card,
.family-protection .cta-card,
.cta-card {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214,31,38,.20) 0%,
            rgba(214,31,38,.08) 32%,
            transparent 68%
        ),
        linear-gradient(
            145deg,
            #111214 0%,
            #171216 48%,
            #0d0e11 100%
        ) !important;

    border-color:rgba(214,31,38,.18) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.035);

}


/* Heading */

.protect-family .cta-card h2,
.family-protection .cta-card h2,
.cta-card h2 {

    color:#ffffff !important;

}


/* Description */

.protect-family .cta-card p,
.family-protection .cta-card p,
.cta-card p {

    color:rgba(255,255,255,.72) !important;

}


/* Contact button */

.protect-family .cta-card .btn,
.family-protection .cta-card .btn,
.cta-card .btn {

    color:#ffffff !important;

    background:#d7262d !important;

    border-color:#d7262d !important;

}


/* Button hover */

.protect-family .cta-card .btn:hover,
.family-protection .cta-card .btn:hover,
.cta-card .btn:hover {

    color:#ffffff !important;

    background:#b91f25 !important;

}

/* =========================================================
   NRAND — PREMIUM CONTACT CTA
   Dark Black + Deep Red Theme
   Existing layout and dimensions preserved
========================================================= */

.landing-contact-box{

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214,31,38,.20) 0%,
            rgba(214,31,38,.08) 30%,
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #111214 0%,
            #171216 50%,
            #0d0e11 100%
        ) !important;

    color:#ffffff !important;

    border:1px solid rgba(214,31,38,.20) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035);

}


/* Heading */

.landing-contact-box h2{

    color:#ffffff !important;

}


/* Description */

.landing-contact-box p{

    color:rgba(255,255,255,.78) !important;

}


/* Contact button */

.landing-contact-box .btn--red{

    color:#ffffff !important;

    background:#d7262d !important;

    border-color:#d7262d !important;

}


/* Button hover */

.landing-contact-box .btn--red:hover{

    color:#ffffff !important;

    background:#b91f25 !important;

    border-color:#b91f25 !important;

}

/* =========================================================
   NRAND FUNERAL PLANS
   EDGE FADE-IN ANIMATION
   First card from left / Last card from right
========================================================= */

/* Prevent the animated cards from creating horizontal scrolling */
.burial-cover-home{
    overflow-x:clip;
}


/* ---------------------------------------------------------
   FIRST CARD — ENTER FROM LEFT
--------------------------------------------------------- */

.burial-cover-home .burial-card:first-child{

    animation:
        burialCardFromLeft 1.8s cubic-bezier(.22,.61,.36,1) both;

}


/* ---------------------------------------------------------
   LAST CARD — ENTER FROM RIGHT
--------------------------------------------------------- */

.burial-cover-home .burial-card:last-child{

    animation:
        burialCardFromRight 1.8s cubic-bezier(.22,.61,.36,1) .35s both;

}


/* ---------------------------------------------------------
   LEFT ANIMATION
--------------------------------------------------------- */

@keyframes burialCardFromLeft{

    0%{

        opacity:0;

        transform:translateX(-110vw);

    }

    65%{

        opacity:.75;

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}


/* ---------------------------------------------------------
   RIGHT ANIMATION
--------------------------------------------------------- */

@keyframes burialCardFromRight{

    0%{

        opacity:0;

        transform:translateX(110vw);

    }

    65%{

        opacity:.75;

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .burial-cover-home .burial-card:first-child,
    .burial-cover-home .burial-card:last-child{

        animation:none;

    }

}

/* ==========================================================
   NRAND FUNERAL PLANS
   REPLAY EDGE-IN ANIMATION
   ========================================================== */

.nrand-plans-grid .nrand-plan-slide-card:first-child,
.nrand-plans-grid .nrand-plan-slide-card:last-child {
    opacity: 0;
}


/* LEFT CARD */
.nrand-plans-grid .nrand-plan-slide-card:first-child.nrand-plan-animate {
    animation: nrandPlanFromLeft 2s cubic-bezier(.22, .61, .36, 1) forwards;
}


/* RIGHT CARD */
.nrand-plans-grid .nrand-plan-slide-card:last-child.nrand-plan-animate {
    animation: nrandPlanFromRight 2s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: .25s;
}


/* ==========================================================
   LEFT → POSITION
   ========================================================== */

@keyframes nrandPlanFromLeft {

    0% {
        opacity: 0;
        transform: translateX(-110vw);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }

}


/* ==========================================================
   RIGHT → POSITION
   ========================================================== */

@keyframes nrandPlanFromRight {

    0% {
        opacity: 0;
        transform: translateX(110vw);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }

}


/* ==========================================================
   REDUCE MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .nrand-plans-grid .nrand-plan-slide-card:first-child,
    .nrand-plans-grid .nrand-plan-slide-card:last-child {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

}

/* =========================================================
   WHY CHOOSE NRAND
   REPLAYING EDGE ANIMATION
========================================================= */

/* LEFT CARDS */

.why__item--left.why-animate-left{

    animation:
        whyCardsFromLeft
        1.5s
        cubic-bezier(.22,.61,.36,1)
        both;

}


/* RIGHT CARDS */

.why__item--right.why-animate-right{

    animation:
        whyCardsFromRight
        1.5s
        cubic-bezier(.22,.61,.36,1)
        both;

}


/* =========================================================
   LEFT
========================================================= */

@keyframes whyCardsFromLeft{

    0%{

        opacity:0;

        transform:translateX(-100vw);

    }

    70%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}


/* =========================================================
   RIGHT
========================================================= */

@keyframes whyCardsFromRight{

    0%{

        opacity:0;

        transform:translateX(100vw);

    }

    70%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}


/* =========================================================
   KEEP CENTER CARD STILL
========================================================= */

.why__item--center{

    opacity:1;

    transform:none;

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    .why__item--left,
    .why__item--right{

        animation:none !important;

        opacity:1 !important;

        transform:none !important;

    }

}

/* =========================================================
   NRAND HERO — PREMIUM LEFT SHADE
========================================================= */

.hero__wrap{
    position:relative;
    overflow:hidden;
}

/* Premium black + NRAND red shade on the left */
.hero__wrap::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(8,8,10,.58) 0%,
            rgba(35,8,12,.42) 18%,
            rgba(120,12,20,.20) 38%,
            rgba(255,255,255,0) 62%
        );
}

/* Keep hero content above the shade */
.hero__content{
    position:relative;
    z-index:2;
}

/* =========================================================
   NRAND HERO — STRONGER BLACK / RED LEFT SHADE
========================================================= */

.hero__wrap{
    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 10, .82) 0%,
            rgba(25, 7, 10, .74) 18%,
            rgba(80, 10, 18, .52) 36%,
            rgba(150, 18, 28, .25) 52%,
            rgba(255, 255, 255, 0) 72%
        ),
        url("/assets/img/hero.jpg") center/cover no-repeat !important;
}

/* Remove the extra overlay we added previously */
.hero__wrap::before{
    display:none !important;
}

/* Keep hero content above everything */
.hero__content{
    position:relative;
    z-index:2;
}

/* =========================================================
   NRAND HERO — FINAL CONTENT POSITION & TEXT
========================================================= */

/* Move hero content further toward the left */
.hero__content{
    max-width:1180px;
    margin:0 auto;
    padding-left:0 !important;
    padding-right:20px;
}

/* Keep the text area on the left side */
.hero__content > div:first-child{
    justify-self:start;
    text-align:left;
}

/* Main hero heading */
.hero__title{
    color:#ffffff !important;
    font-weight:400 !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Make ONLY the main NRAND title bold */
.hero__title strong,
.hero__title b{
    color:#ffffff !important;
    font-weight:700 !important;
}

/* Hero description */
.hero__sub{
    color:rgba(255,255,255,.90) !important;
    text-shadow:0 1px 5px rgba(0,0,0,.35);
}

/* Small supporting text */
.hero__hint{
    color:rgba(255,255,255,.82) !important;
    text-shadow:0 1px 4px rgba(0,0,0,.30);
}

/* Keep the trusted badge clean */
.hero .pill{
    color:#111827 !important;
}

/* =========================================================
   NRAND HERO — FINAL CONTENT POSITION & TEXT
========================================================= */

/* Move hero content further toward the left */
.hero__content{
    max-width:1180px;
    margin:0 auto;
    padding-left:0 !important;
    padding-right:20px;
}

/* Keep the text area on the left side */
.hero__content > div:first-child{
    justify-self:start;
    text-align:left;
}

/* Main hero heading */
.hero__title{
    color:#ffffff !important;
    font-weight:400 !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Make ONLY the main NRAND title bold */
.hero__title strong,
.hero__title b{
    color:#ffffff !important;
    font-weight:700 !important;
}

/* Hero description */
.hero__sub{
    color:rgba(255,255,255,.90) !important;
    text-shadow:0 1px 5px rgba(0,0,0,.35);
}

/* Small supporting text */
.hero__hint{
    color:rgba(255,255,255,.82) !important;
    text-shadow:0 1px 4px rgba(0,0,0,.30);
}

/* Keep the trusted badge clean */
.hero .pill{
    color:#111827 !important;
}

/* =========================================================
   HERO CONTENT — FINAL POSITION
========================================================= */

@media (min-width: 1100px) {
    .hero__content > div:first-child {
        transform: translateX(-75px) !important;
    }
}

@media (min-width: 1500px) {
    .hero__content > div:first-child {
        transform: translateX(-95px) !important;
    }
}

/* =========================================================
   NRAND HERO — REMOVE HEADER/ HERO WHITE SEAM
========================================================= */

.hero {
    margin-top: -2px !important;
    padding-top: 0 !important;
}

.hero__wrap {
    margin-top: 0 !important;
    display: block !important;
    border-top: none !important;
}

/* Remove unwanted 1px header-to-hero separator */
.hero,
.hero__wrap {
    border-top: 0 !important;
    outline: 0 !important;
}

/* =========================================================
   NRAND HEADER — REMOVE STICKY SCROLL SEAM
========================================================= */

/* Remove the 1px line that appears when scrolling */
header,
.site-header,
.main-header,
.navbar,
.nav-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Prevent sticky header from creating a white separator */
header::after,
.site-header::after,
.main-header::after,
.navbar::after,
.nav-header::after {
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   NRAND HERO — IMAGE TOUCHES HEADER
========================================================= */

.hero {
    position: relative !important;
    margin-top: -5px !important;
    padding-top: 0 !important;
}

.hero__wrap {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* =========================================================
   NRAND — FIX STICKY HEADER / HERO WHITE SEAM
========================================================= */

.nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;

    /* Use a solid header background while scrolling */
    background: #202126 !important;

    /* Remove the source of the thin rendering line */
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Force stable browser compositing */
    transform: translateZ(0);
    will-change: transform;
}


/* Keep hero directly against the header */
.hero {
    position: relative !important;
    margin-top: -1px !important;
    padding-top: 0 !important;
    border-top: none !important;
}


.hero__wrap {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;

    /* Pull image 1px into the header area */
    transform: translateY(-1px);
}

/* =========================================================
   NRAND — TOP BAR FINAL TEXT STYLING
========================================================= */


/* =========================================================
   LEFT — PHONE + EMAIL
   DARK / THIN
========================================================= */

.topbar__left {
    color:#17191d !important;
    font-weight:400 !important;
}

.topbar__left span,
.topbar__left a {
    color:#17191d !important;
    font-weight:400 !important;
}


/* Phone + email icons */
.topbar__left i,
.topbar__left svg {
    color:#b3151b !important;
}


/* =========================================================
   CENTER — MOVING WELCOME TEXT
   WHITE / THIN
========================================================= */

.topbar__center {
    color:#ffffff !important;
    font-weight:400 !important;
}

.topbar__center .marquee {
    color:#ffffff !important;
    font-weight:400 !important;
}

.topbar__center .marquee span {
    color:#ffffff !important;
    font-weight:400 !important;
}


/* =========================================================
   RIGHT — 24/7 SUPPORT + FAST CLAIMS
   DARK / THIN
========================================================= */

.topbar__right {
    color:#17191d !important;
    font-weight:400 !important;
}

.topbar__right span,
.topbar__right a {
    color:#17191d !important;
    font-weight:400 !important;
}


/* =========================================================
   REMOVE BOLD FROM TOPBAR
========================================================= */

.topbar__left *,
.topbar__center *,
.topbar__right * {
    font-weight:400 !important;
}


/* =========================================================
   NRAND — TOP BAR VISIBLE SHADOW
========================================================= */

.topbar {
    position:relative !important;
    z-index:10001 !important;

    background:#ffffff !important;

    border-bottom:none !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.28),
        0 3px 6px rgba(0,0,0,.16) !important;
}



/* =========================================================
   NRAND — TOPBAR BLACK / DARK RED EDGE
   FORCED VISIBLE
========================================================= */

.topbar {
    position: relative !important;
    z-index: 10050 !important;
    background: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Black inner edge above the dark red */
.topbar__inner {
    position: relative !important;
}


/* =========================================================
   SMALL BLACK ACCENT
========================================================= */

.topbar {
    box-shadow:
        inset 0 -1px 0 #17191d !important;
}

/* =========================================================
   NRAND TOP BAR
   DARK SHADE LEFT + WHITE CENTER + DARK SHADE RIGHT
========================================================= */

.topbar {
    position: relative !important;
    z-index: 10050 !important;

    width: 100% !important;

    height: 40px !important;

    /* DARK → WHITE → DARK */
    background:
        linear-gradient(
            90deg,
            #d4d7dc 0%,
            #e9ebee 12%,
            #f7f8f9 28%,
            #ffffff 42%,
            #ffffff 58%,
            #f7f8f9 72%,
            #e9ebee 88%,
            #d4d7dc 100%
        ) !important;

    border: none !important;

    box-shadow:
        inset 0 8px 18px rgba(0,0,0,.10),
        inset 0 -8px 18px rgba(0,0,0,.06) !important;
}


/* =========================================================
   SOFT DARK SHADOW ON THE TWO SIDES
========================================================= */

.topbar::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.08) 8%,
            rgba(0,0,0,0) 25%,
            rgba(0,0,0,0) 75%,
            rgba(0,0,0,.08) 92%,
            rgba(0,0,0,.18) 100%
        );
}


/* =========================================================
   KEEP CONTENT ABOVE SHADE
========================================================= */

.topbar__inner {
    position: relative !important;
    z-index: 2 !important;

    height: 40px !important;
}


/* =========================================================
   LEFT + RIGHT TEXT
========================================================= */

.topbar__left *,
.topbar__right * {
    color: #17191d !important;
    font-weight: 400 !important;
}


/* =========================================================
   CENTER TEXT
========================================================= */

.topbar__center,
.topbar__center *,
.topbar__center .marquee,
.topbar__center .marquee span {
    color: #17191d !important;
    font-weight: 400 !important;
}


/* =========================================================
   RED ICONS ONLY
========================================================= */

.topbar__left i,
.topbar__left svg,
.topbar__right i,
.topbar__right svg {
    color: #b3151b !important;
}

/* =========================================================
   NRAND TOP BAR — FINAL DARK RED / BLACK SIDE SHADING
========================================================= */

.topbar {
    background:
        linear-gradient(
            90deg,
            #17191d 0%,
            #24171a 8%,
            #3b2024 16%,
            #75676a 27%,
            #f3f3f4 40%,
            #ffffff 50%,
            #f3f3f4 60%,
            #75676a 73%,
            #3b2024 84%,
            #24171a 92%,
            #17191d 100%
        ) !important;

    border: none !important;

    box-shadow: none !important;
}


/* Stronger side depth */
.topbar::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(10,10,12,.38) 0%,
            rgba(91,21,24,.22) 12%,
            rgba(91,21,24,.08) 25%,
            transparent 35%,
            transparent 65%,
            rgba(91,21,24,.08) 75%,
            rgba(91,21,24,.22) 88%,
            rgba(10,10,12,.38) 100%
        );

    z-index: 0;
}


/* Keep all topbar content above the shading */
.topbar__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* Keep the text clean and visible */
.topbar__left *,
.topbar__center *,
.topbar__right * {
    color: #17191d !important;
    font-weight: 400 !important;
}


/* Red phone/email icons */
.topbar__left i,
.topbar__left svg {
    color: #b3151b !important;
}

/* =========================================================
   NRAND TOP BAR — WHITE TEXT
========================================================= */

/* LEFT — PHONE + EMAIL */
.topbar__left,
.topbar__left *,
.topbar__left span,
.topbar__left a {
    color: #ffffff !important;
    font-weight: 400 !important;
}


/* CENTER — WELCOME */
.topbar__center,
.topbar__center *,
.topbar__center .marquee,
.topbar__center .marquee span {
    color: #ffffff !important;
    font-weight: 400 !important;
}


/* RIGHT — SUPPORT + CLAIMS */
.topbar__right,
.topbar__right *,
.topbar__right span,
.topbar__right a {
    color: #ffffff !important;
    font-weight: 400 !important;
}


/* RED ICONS ONLY */
.topbar__left i,
.topbar__left svg {
    color: #e21b23 !important;
}

/* =========================================================
   CENTER — WELCOME TEXT BLACK
========================================================= */

.topbar__center,
.topbar__center *,
.topbar__center .marquee,
.topbar__center .marquee span {
    color: #17191d !important;
    font-weight: 400 !important;
}

/* =========================================================
   NRAND TOP BAR — SOCIAL MEDIA ICONS
========================================================= */

.topbar__socials {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 18px;
}

.topbar__social {
    width: 28px;
    height: 28px;

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

    color: #ffffff !important;

    text-decoration: none;

    font-size: 15px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.topbar__social i {
    color: #ffffff !important;
}

.topbar__social:hover {
    color: #e21b23 !important;
    transform: translateY(-2px);
}

.topbar__social:hover i {
    color: #e21b23 !important;
}

/* =========================================================
   NRAND TOP BAR — SOCIAL ICONS
========================================================= */

.topbar__socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 18px;
}

.topbar__social {
    width: 28px;
    height: 28px;

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

    text-decoration: none;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.topbar__social svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;

    transition:
        stroke 0.25s ease,
        fill 0.25s ease;
}

/* TikTok + Facebook need filled shapes */
.topbar__social:nth-child(2) svg,
.topbar__social:nth-child(3) svg {
    fill: #ffffff;
    stroke: none;
}

.topbar__social:hover {
    transform: translateY(-2px);
}

.topbar__social:hover svg {
    stroke: #e21b23;
}

.topbar__social:nth-child(2):hover svg,
.topbar__social:nth-child(3):hover svg {
    fill: #e21b23;
}

/* =========================================================
   NRAND — SMOOTH NAVIGATION SCROLL
========================================================= */

html {
    scroll-behavior: smooth;
}

#funeral-plans {
    scroll-margin-top: 110px;
}

/* =========================================================
   NRAND — PLAN VIEWER
   ONLY FIX MODAL LAYERING
   DO NOT CONTROL MODAL DISPLAY OR BROCHURE
========================================================= */

/* Modal overlay */
#planViewerModal {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    z-index: 2147483647 !important;

    background: rgba(8, 8, 10, 0.78) !important;

    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
}


/* Keep the actual modal above the backdrop */
#planViewerModal > * {
    position: relative;
    z-index: 2147483647;
}


/* Header stays underneath the modal */
.topbar,
.nav {
    z-index: 100 !important;
}


/* Prevent background scrolling when YOUR JavaScript
   adds this class */
body.plan-viewer-open {
    overflow: hidden !important;
}

/* =========================================================
   NRAND — APPLICATION FORM
   LIGHT / COMPACT / PROFESSIONAL
========================================================= */

.application-form,
.application-form * {
    font-weight: 400 !important;
}


/* FORM TITLE */

.application-form h2 {
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}


/* DESCRIPTION */

.application-form > p,
.application-form .form-description {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}


/* LABELS */

.application-form label {
    display: block;

    font-size: 13px !important;
    font-weight: 400 !important;

    margin-bottom: 6px !important;

    color: #24344f !important;
}


/* INPUTS / SELECT / TEXTAREA */

.application-form input,
.application-form select,
.application-form textarea {
    width: 100% !important;

    box-sizing: border-box;

    border: 1px solid #e2e2e2 !important;
    border-radius: 12px !important;

    background: #ffffff !important;

    color: #17243d !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    padding: 0 14px !important;

    outline: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* NORMAL INPUT HEIGHT */

.application-form input,
.application-form select {
    height: 46px !important;
}


/* NOTES */

.application-form textarea {
    min-height: 90px !important;
    height: 90px !important;

    padding: 12px 14px !important;

    resize: vertical;
}


/* PLACEHOLDER */

.application-form input::placeholder,
.application-form textarea::placeholder {
    color: #9aa5b5 !important;

    font-size: 14px !important;

    font-weight: 400 !important;
}


/* FOCUS */

.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus {
    border-color: #d51f26 !important;

    box-shadow: 0 0 0 3px rgba(213, 31, 38, .08) !important;
}


/* FORM ROWS */

.application-form .form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 14px;
}


/* FIELD SPACING */

.application-form .form-group {
    margin-bottom: 14px !important;
}


/* SELECTED PLAN */

.application-form .selected-plan {
    background: #fafafa !important;

    color: #17243d !important;

    font-weight: 400 !important;
}


/* SMALL INFORMATION MESSAGE */

.application-form .plan-message {
    font-size: 12px !important;

    line-height: 1.5 !important;

    color: #6b7280 !important;

    margin-top: 5px !important;
}


/* BUTTON AREA */

.application-form .form-actions {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 12px;

    margin-top: 18px;
}


/* BUTTONS */

.application-form button {
    min-height: 44px !important;

    padding: 0 20px !important;

    border-radius: 10px !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    cursor: pointer;
}


/* SUBMIT BUTTON */

.application-form .btn--red {
    font-weight: 500 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .application-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .application-form h2 {
        font-size: 24px !important;
    }

    .application-form input,
    .application-form select {
        height: 44px !important;
    }

    .application-form .form-actions {
        justify-content: stretch;
    }

    .application-form button {
        flex: 1;
    }
}

/* =========================================================
   NRAND — FUNERAL PLAN APPLICATION FORM
   LIGHT / SMALL / PROFESSIONAL
========================================================= */

#membershipModal .modal__panel {
    font-weight: 400 !important;
}

#membershipModal .modal__body {
    font-weight: 400 !important;
}

/* Selected plan */

#membershipModal .selected-plan-box {
    margin-bottom: 18px;
    padding: 11px 14px;

    background: rgba(179, 21, 27, 0.045);

    border: 1px solid rgba(179, 21, 27, 0.18);
    border-radius: 10px;

    display: flex;
    align-items: center;
    gap: 10px;
}

#membershipModal .selected-plan-label {
    font-size: 12px;
    font-weight: 400 !important;
    color: #777;
}

#membershipModal .selected-plan-name {
    font-size: 13px;
    font-weight: 500 !important;
    color: #b3151b;
}


/* Form grid */

#membershipModal #funeralTab .formgrid {
    gap: 13px 16px;
}


/* Labels */

#membershipModal #funeralTab label {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 400 !important;

    color: #30343b;
}

#membershipModal #funeralTab label span {
    font-weight: 400 !important;
    color: #888;
}


/* Inputs */

#membershipModal #funeralTab .input,
#membershipModal #funeralTab .select {
    width: 100%;

    height: 40px;

    padding: 0 11px;

    border: 1px solid #dedede;
    border-radius: 8px;

    background: #fff;

    font-size: 13px;
    font-weight: 400 !important;

    color: #20242a;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#membershipModal #funeralTab .input:focus,
#membershipModal #funeralTab .select:focus,
#membershipModal #funeralTab .textarea:focus {
    border-color: #b3151b;

    box-shadow: 0 0 0 3px rgba(179, 21, 27, 0.07);
}


/* Textarea */

#membershipModal #funeralTab .textarea {
    width: 100%;

    min-height: 78px;

    padding: 10px 11px;

    border: 1px solid #dedede;
    border-radius: 8px;

    background: #fff;

    font-size: 13px;
    font-weight: 400 !important;

    color: #20242a;

    resize: vertical;

    box-sizing: border-box;

    outline: none;
}


/* Placeholder */

#membershipModal #funeralTab input::placeholder,
#membershipModal #funeralTab textarea::placeholder {
    color: #a5a9b0;
    font-weight: 400 !important;
}


/* Buttons */

#membershipModal #funeralTab .form__actions {
    margin-top: 17px;
}

#membershipModal #funeralTab .form__actions .btn {
    font-size: 13px;
    font-weight: 400 !important;
}


/* Small privacy message */

#membershipModal #funeralTab .note {
    margin-top: 10px;

    font-size: 10px;
    line-height: 1.5;

    color: #888;

    font-weight: 400 !important;
}


/* Keep everything thin */

#membershipModal #funeralTab *,
#membershipModal #funeralTab *::before,
#membershipModal #funeralTab *::after {
    font-weight: 400;
}

#membershipModal #funeralTab .selected-plan-name {
    font-weight: 500 !important;
}

#membershipModal #funeralTab .btn--red {
    font-weight: 400 !important;
}

/* =========================================================
   NRAND — FUNERAL APPLICATION
   CLEAN WHITE MODAL
========================================================= */


/* ---------------------------------------------------------
   HIDE INSURANCE TAB FROM THE FUNERAL APPLICATION
--------------------------------------------------------- */

#membershipModal .modal__tabs {
    display: none !important;
}


/* ---------------------------------------------------------
   WHITE APPLICATION MODAL
--------------------------------------------------------- */

#membershipModal .modal__panel {

    background: #ffffff !important;

    color: #17243d !important;

    border: 1px solid #eeeeee !important;

    border-radius: 22px !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.16) !important;

}


/* ---------------------------------------------------------
   MODAL HEADER
--------------------------------------------------------- */

#membershipModal .modal__head {

    background: #ffffff !important;

    border-bottom: 1px solid #eeeeee !important;

    color: #17243d !important;

}


/* Remove dark header styling */

#membershipModal .modal__head * {

    color: #17243d !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   BODY
--------------------------------------------------------- */

#membershipModal .modal__body {

    background: #ffffff !important;

    color: #17243d !important;

}


/* ---------------------------------------------------------
   APPLICATION HEADER
--------------------------------------------------------- */

.nrand-application-header {

    margin-bottom: 25px;

}


.nrand-application-header h2 {

    margin: 0 0 6px;

    color: #17243d !important;

    font-size: 28px !important;

    line-height: 1.25;

    font-weight: 500 !important;

}


.nrand-application-header p {

    margin: 0;

    color: #64748b !important;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   SELECTED PLAN
--------------------------------------------------------- */

.nrand-selected-plan {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 44px;

    padding: 0 14px;

    margin-bottom: 20px;

    background: #fff7f7 !important;

    border: 1px solid #f1d4d4 !important;

    border-radius: 10px;

    box-sizing: border-box;

}


.nrand-selected-plan span {

    color: #64748b !important;

    font-size: 12px;

    font-weight: 400 !important;

}


.nrand-selected-plan strong {

    color: #b3151b !important;

    font-size: 13px;

    font-weight: 500 !important;

}


/* ---------------------------------------------------------
   FORM GRID
--------------------------------------------------------- */

.nrand-application-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px 16px;

}


/* ---------------------------------------------------------
   FIELD
--------------------------------------------------------- */

.nrand-field {

    min-width: 0;

}


.nrand-field--full {

    grid-column: 1 / -1;

}


/* ---------------------------------------------------------
   LABELS
--------------------------------------------------------- */

.nrand-field label {

    display: block;

    margin-bottom: 6px;

    color: #24344f !important;

    font-size: 13px !important;

    line-height: 1.3;

    font-weight: 400 !important;

}


.nrand-field label span {

    color: #8b929d !important;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

.nrand-input {

    width: 100% !important;

    height: 44px !important;

    padding: 0 13px !important;

    box-sizing: border-box;

    background: #ffffff !important;

    border: 1px solid #e1e1e1 !important;

    border-radius: 10px !important;

    color: #17243d !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.nrand-input:focus {

    border-color: #d51f26 !important;

    box-shadow:
        0 0 0 3px rgba(213, 31, 38, 0.07) !important;

}


/* ---------------------------------------------------------
   TEXTAREA
--------------------------------------------------------- */

.nrand-textarea {

    width: 100% !important;

    height: 92px !important;

    min-height: 92px !important;

    padding: 11px 13px !important;

    box-sizing: border-box;

    background: #ffffff !important;

    border: 1px solid #e1e1e1 !important;

    border-radius: 10px !important;

    color: #17243d !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    resize: vertical;

    outline: none;

}


.nrand-textarea:focus {

    border-color: #d51f26 !important;

    box-shadow:
        0 0 0 3px rgba(213, 31, 38, 0.07) !important;

}


/* ---------------------------------------------------------
   PLACEHOLDERS
--------------------------------------------------------- */

.nrand-input::placeholder,
.nrand-textarea::placeholder {

    color: #9aa3b2 !important;

    font-weight: 400 !important;

    opacity: 1;

}


/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.nrand-application-actions {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

}


/* ---------------------------------------------------------
   CANCEL
--------------------------------------------------------- */

.nrand-cancel-btn {

    height: 44px;

    padding: 0 20px;

    background: #ffffff !important;

    color: #d51f26 !important;

    border: 1px solid #d51f26 !important;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 400 !important;

    cursor: pointer;

}


.nrand-cancel-btn:hover {

    background: #fff5f5 !important;

}


/* ---------------------------------------------------------
   SUBMIT
--------------------------------------------------------- */

.nrand-submit-btn {

    height: 44px;

    padding: 0 22px;

    background: #d51f26 !important;

    color: #ffffff !important;

    border: 1px solid #d51f26 !important;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 400 !important;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(213, 31, 38, 0.16);

}


.nrand-submit-btn:hover {

    background: #b3151b !important;

}


/* ---------------------------------------------------------
   SMALL MESSAGE
--------------------------------------------------------- */

.nrand-application-note {

    margin: 10px 0 0;

    color: #8b929d !important;

    font-size: 10px !important;

    line-height: 1.5;

    font-weight: 400 !important;

}


/* ---------------------------------------------------------
   FORCE THIN TYPOGRAPHY
--------------------------------------------------------- */

#membershipModal,
#membershipModal * {

    font-weight: 400 !important;

}


#membershipModal h1,
#membershipModal h2,
#membershipModal h3 {

    font-weight: 500 !important;

}


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

@media (max-width: 700px) {

    #membershipModal .modal__panel {

        width: calc(100% - 24px) !important;

        border-radius: 16px !important;

    }


    .nrand-application-grid {

        grid-template-columns: 1fr;

        gap: 13px;

    }


    .nrand-field--full {

        grid-column: auto;

    }


    .nrand-application-header h2 {

        font-size: 23px !important;

    }


    .nrand-application-header p {

        font-size: 13px;

    }


    .nrand-application-actions {

        justify-content: stretch;

    }


    .nrand-cancel-btn,
    .nrand-submit-btn {

        flex: 1;

    }

}

/* =========================================================
   NRAND — FINAL FUNERAL APPLICATION MODAL FIX
========================================================= */


/* ---------------------------------------------------------
   REMOVE FUNERAL / INSURANCE TAB AREA
   The customer already selected a funeral plan.
--------------------------------------------------------- */

#membershipModal .modal__tabs {
    display: none !important;
}


/* ---------------------------------------------------------
   MAKE THE APPLICATION MODAL FIT THE SCREEN
--------------------------------------------------------- */

#membershipModal .modal__panel {

    max-height: calc(100vh - 30px) !important;

    height: auto !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius: 22px !important;

}


/* ---------------------------------------------------------
   MODAL BODY
--------------------------------------------------------- */

#membershipModal .modal__body {

    max-height: calc(100vh - 150px) !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    background: #ffffff !important;

}


/* ---------------------------------------------------------
   APPLICATION HEADER
--------------------------------------------------------- */

#membershipModal .nrand-application-header {

    margin-bottom: 20px !important;

}


#membershipModal .nrand-application-header h2 {

    margin: 0 0 5px !important;

    font-size: 27px !important;

    line-height: 1.25 !important;

    font-weight: 500 !important;

    color: #17243d !important;

}


#membershipModal .nrand-application-header p {

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    font-weight: 400 !important;

    color: #64748b !important;

}


/* ---------------------------------------------------------
   SELECTED PLAN
--------------------------------------------------------- */

#membershipModal .nrand-selected-plan {

    margin-bottom: 18px !important;

    min-height: 42px !important;

}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

#membershipModal .nrand-input {

    height: 42px !important;

    min-height: 42px !important;

    max-height: 42px !important;

}


/* ---------------------------------------------------------
   NOTES TEXTAREA
--------------------------------------------------------- */

#membershipModal .nrand-textarea {

    height: 78px !important;

    min-height: 78px !important;

    max-height: 78px !important;

    resize: none !important;

    overflow: hidden !important;

}


/* ---------------------------------------------------------
   AGREEMENT NOTE
   KEEP IT DIRECTLY UNDER NOTES
--------------------------------------------------------- */

#membershipModal #funeralTab
.nrand-field--full
.nrand-application-note {

    display: block !important;

    margin: 7px 0 0 !important;

    padding: 0 !important;

    font-size: 10px !important;

    line-height: 1.4 !important;

    color: #8b929d !important;

    font-weight: 400 !important;

    visibility: visible !important;

    opacity: 1 !important;

}


/* Hide any old note that may still exist
   outside the Notes field */

#membershipModal #funeralTab > .nrand-application-note {

    display: none !important;

}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

#membershipModal .nrand-application-actions {

    margin-top: 14px !important;

}


#membershipModal .nrand-cancel-btn,
#membershipModal .nrand-submit-btn {

    height: 42px !important;

    min-height: 42px !important;

}


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

@media (max-width: 700px) {

    #membershipModal .modal__panel {

        width: calc(100% - 20px) !important;

        max-height: calc(100vh - 20px) !important;

        border-radius: 16px !important;

    }


    #membershipModal .modal__body {

        max-height: calc(100vh - 120px) !important;

    }

}

/* =========================================================
   NRAND — APPLICATION NOTES FIELD
========================================================= */

/* Fixed Notes box */
#membershipModal .nrand-textarea {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;

    resize: none !important;

    overflow-y: auto !important;
}


/* Small message directly below Notes */
#membershipModal .nrand-field--full .nrand-application-note {

    display: block !important;

    margin: 7px 0 0 !important;

    padding: 0 !important;

    color: #8b929d !important;

    font-size: 10px !important;

    line-height: 1.45 !important;

    font-weight: 400 !important;

    text-align: left !important;
}


/* Make sure the old bottom spacing does not push it away */
#membershipModal #funeralTab > .nrand-application-note {
    display: none !important;
}

/* =========================================================
   NRAND — FORCE MEMBERSHIP MODAL ABOVE PAGE FOOTER
   FINAL OVERRIDE
========================================================= */

/* Keep the entire modal fixed to the viewport */
#membershipModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

    display: none !important;

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

    padding: 15px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

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

/* When opened */
#membershipModal.is-open {
    display: flex !important;
}

/* Full-screen dark overlay */
#membershipModal .modal__overlay {
    position: absolute !important;
    inset: 0 !important;

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

    z-index: 0 !important;

    background: rgba(0, 0, 0, 0.62) !important;

    backdrop-filter: blur(6px) !important;
}

/* Force the application panel to stay inside the viewport */
#membershipModal .modal__panel {

    position: relative !important;

    z-index: 1 !important;

    width: min(860px, 100%) !important;

    height: auto !important;

    max-height: calc(100vh - 30px) !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;

    border-radius: 22px !important;

    border: 1px solid #eeeeee !important;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.20) !important;
}

/* Header must remain fixed */
#membershipModal .modal__head {

    flex: 0 0 auto !important;

    position: relative !important;

    z-index: 2 !important;

    background: #ffffff !important;

}

/* ONLY the body scrolls */
#membershipModal .modal__body {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
}

/* Prevent anything inside the form from pushing the panel outside */
#membershipModal #funeralTab {

    min-height: 0 !important;

    box-sizing: border-box !important;
}

/* Keep buttons inside the modal */
#membershipModal .nrand-application-actions {

    flex: 0 0 auto !important;

}

/* Prevent the page behind the modal from scrolling */
body:has(#membershipModal.is-open) {

    overflow: hidden !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    #membershipModal {

        padding: 10px !important;

    }

    #membershipModal .modal__panel {

        width: 100% !important;

        max-width: 100% !important;

        max-height: calc(100vh - 20px) !important;

        border-radius: 16px !important;

    }

    #membershipModal .modal__body {

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

    }

}

/* =========================================================
   NRAND — MEMBERSHIP MODAL / FOOTER FINAL FIX
========================================================= */


/* ---------------------------------------------------------
   1. NEVER HIDE THE MAIN WEBSITE FOOTER
--------------------------------------------------------- */

body > .footer,
body > footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   2. FOOTER MUST STAY BEHIND THE MODAL
--------------------------------------------------------- */

.footer,
footer {
    position: relative !important;
    z-index: 1 !important;
}


/* ---------------------------------------------------------
   3. MEMBERSHIP MODAL ABOVE THE ENTIRE WEBSITE
--------------------------------------------------------- */

#membershipModal {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 999999 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   4. MODAL OVERLAY COVERS THE FOOTER
--------------------------------------------------------- */

#membershipModal .modal__overlay {
    position: absolute !important;

    inset: 0 !important;

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

    z-index: 0 !important;

    background: rgba(8, 8, 10, 0.62) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}


/* ---------------------------------------------------------
   5. APPLICATION PANEL ABOVE OVERLAY
--------------------------------------------------------- */

#membershipModal .modal__panel {
    position: relative !important;

    z-index: 1 !important;

    background: #ffffff !important;

    max-height: calc(100vh - 30px) !important;

    overflow: hidden !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   6. ONLY MODAL BODY SCROLLS
--------------------------------------------------------- */

#membershipModal .modal__body {
    position: relative !important;

    z-index: 2 !important;

    background: #ffffff !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    min-height: 0 !important;
}


/* ---------------------------------------------------------
   7. IF A FOOTER IS ACTUALLY INSIDE THE MODAL,
      REMOVE ONLY THAT FOOTER
--------------------------------------------------------- */

#membershipModal > footer,
#membershipModal > .footer,
#membershipModal .modal__panel > footer,
#membershipModal .modal__panel > .footer {
    display: none !important;
}


/* ---------------------------------------------------------
   8. IMPORTANT:
      DO NOT HIDE body FOOTER WHEN MODAL OPENS
--------------------------------------------------------- */


/* ---------------------------------------------------------
   9. PREVENT WEBSITE SCROLL WHILE MODAL IS OPEN
--------------------------------------------------------- */

body.plan-viewer-open,
body.membership-modal-open {
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   10. MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    #membershipModal {
        padding: 10px !important;
    }

    #membershipModal .modal__panel {
        width: calc(100% - 20px) !important;

        max-width: 100% !important;

        max-height: calc(100vh - 20px) !important;

        border-radius: 16px !important;
    }

}

/* =========================================================
   NRAND — FOOTER LOGO SIZE
========================================================= */

.footer-logo {
    width: 160px !important;
    max-width: 160px !important;
    margin-bottom: 20px !important;
}

.footer-logo img {
    width: 100% !important;
    max-width: 160px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Hide browser scrollbar but keep website scrolling */

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}