:root {
      --green-deep:   #1a3c2e;
      --green-mid:    #2d6a4f;
      --green-light:  #52b788;
      --gold:         #c9a84c;
      --gold-light:   #e8d5a3;
      --cream:        #faf8f2;
      --text-dark:    #1c1c1c;
      --text-muted:   #6b7a72;
      --border:       rgba(42,106,79,0.15);
      --card-bg:      #ffffff;
      /************/
       --first_color: #1a4fba;          /* keep whatever you have */
          --ctrl-accent:  #1a4fba;
          --ctrl-accent2: #0d3a99;
          --ctrl-bg:      #f4f7fe;
          --ctrl-card-bg: #ffffff;
          --ctrl-border:  rgba(26,79,186,.18);
          --ctrl-shadow:  0 8px 32px rgba(26,79,186,.10), 0 2px 8px rgba(0,0,0,.06);
          --ctrl-radius:  18px;
          --ctrl-ease:    cubic-bezier(.4,0,.2,1);
          --ctrl-dur:     .32s;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      /* font-family: 'DM Sans', sans-serif; */
      background: var(--cream);
      color: var(--text-dark);
      overflow-x: hidden;
    }

    /* ── NOISE TEXTURE OVERLAY ── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* ── BREADCRUMB ── */
    .breadcrumb-bar {
      background: linear-gradient(120deg, #0f1f5c 0%, #1a3a8c 55%, #0d3068 100%);
      padding: 8px 0;
      position: relative;
      overflow: hidden;
      margin-top: 70px;
    }
    .breadcrumb-bar::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--gold), transparent 60%);
    }
    .breadcrumb-bar .breadcrumb { margin: 0; }
    .breadcrumb-bar .breadcrumb-item a {
      color: var(--gold-light);
      text-decoration: none;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      transition: color 0.2s;
    }
    .breadcrumb-bar .breadcrumb-item a:hover { color: var(--gold); }
    .breadcrumb-bar .breadcrumb-item.active {
      color: rgba(255,255,255,0.5);
      font-size: 0.8rem;
    }
    .breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: var(--gold); }

    /* ── HERO HEADER ── */
    .page-hero {
      background: linear-gradient(120deg, #0f1f5c 0%, #1a3a8c 55%, #0d3068 100%);
      padding: 15px 0 7px;
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute; top: -60px; right: -80px;
      width: 340px; height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .page-hero::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .hero-eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px;
      opacity: 0;
      animation: fadeUp 0.6s 0.1s ease forwards;
    }
    .hero-title {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      line-height: 1.18;
      opacity: 0;
      animation: fadeUp 0.6s 0.25s ease forwards;
    }
    .hero-title span { color: var(--gold); }
    .hero-subtitle {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      margin-top: 8px;
      font-weight: 300;
      opacity: 0;
      animation: fadeUp 0.6s 0.4s ease forwards;
    }
    .product_icon_mobile{ display:none;}

    /* ── STATUS PILL ── */
    .status-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(201,168,76,0.35);
      border-radius: 999px;
      padding: 5px 14px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--gold-light);
      opacity: 0;
      animation: fadeUp 0.6s 0.55s ease forwards;
    }
    .pulse-dot {
      width: 7px; height: 7px;
      background: #5cdb95;
      border-radius: 50%;
      animation: pulse 1.8s infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(92,219,149,0.6); }
      50%       { box-shadow: 0 0 0 5px rgba(92,219,149,0); }
    }

    /* ── MAIN CARD SECTION ── */
    .main-section {
      padding: 13px 0 31px;
      position: relative;
    }

    /* ── TIMELINE DATES ── */
    .date-timeline {
      display: flex;
      gap: 0;
      margin-bottom: 0px;
      opacity: 0;
      animation: fadeUp 0.6s 0.7s ease forwards;
    }
    .date-item {
      flex: 1;
      padding: 10px 20px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      position: relative;
    }
    .date-item:first-child { border-radius: 10px 0 0 10px; }
    .date-item:last-child  { border-radius: 0 10px 10px 0; border-left: none; }
    .date-item .label {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .date-item .value {
      font-size: 1.22rem;
      font-weight: 700;
      color: var(--green-deep);
    }
    .date-item.closing .value { color: #c0392b; }
    .date-item::after {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 100%; height: 3px;
      border-radius: 2px;
    }
    .date-item:first-child::after { background: var(--green-light); }
    .date-item:last-child::after  { background: #e74c3c; }

    /* ── PRODUCT CARD ── */
    .product-card {
      background: none;
      border-radius: 16px;
      /* border: 1px solid var(--border); */
      /* box-shadow: 0 4px 40px rgba(26,60,46,0.06); */
      overflow: hidden;
      opacity: 0;
      animation: fadeUp 0.7s 0.85s ease forwards;
      transition: box-shadow 0.3s;
      padding: 10px 6px;
    }
    .product-card:hover {
      box-shadow: 0 8px 60px rgba(26,60,46,0.12);
    }

    /* image panels */
    .img-panel {
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      /* min-height: 220px; */
      position: relative;
      overflow: hidden;
      margin: 10px;
      border-radius: 12px;
    }
    .img-panel::before {
      content: '';
      position: absolute; bottom: -20px; right: -20px;
      width: 100px; height: 100px;
      background: radial-gradient(circle, rgba(82,183,136,0.2), transparent 70%);
    }
    .img-panel img {
      max-height: 175px;
      max-width: 100%;
      object-fit: contain;
      /* filter: drop-shadow(0 4px 16px rgba(26,60,46,0.15)); */
      transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    .img-panel:hover img { transform: scale(1.06); }

    /* center control panel */
    
/* ── Card entrance animation ───────────────────────────────── */
@keyframes ctrl-fadein {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
 
/* ── The card itself ───────────────────────────────────────── */
.ctrl-panel .card {
  font-family: 'Figtree', sans-serif;
  background: var(--ctrl-card-bg);
  border-radius: var(--ctrl-radius) !important;
  border: 1.5px solid var(--ctrl-border) !important;
  box-shadow: var(--ctrl-shadow) !important;
  padding: 2.5rem 2rem !important;
  animation: ctrl-fadein .55s var(--ctrl-ease) both;
  position: relative;
  overflow: hidden;
}

.ctrl-panel
{
    padding:10px;
    margin:10px;
    background:#fff;
    border-radius:12px;
}
 
/* ── Radio button group ────────────────────────────────────── */
.ctrl-panel .radio-button {
  display: flex;
  gap: .5rem;
  background: var(--ctrl-bg);
  border-radius: 12px;
  padding: 5px;
  border: 1.5px solid var(--ctrl-border);
  margin-bottom: .5rem;
}
 
/* each label wrapping the radio */
.ctrl-panel .radio-button label,
.ctrl-panel .radio-button span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 9px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ctrl-dur) var(--ctrl-ease),
              color     var(--ctrl-dur) var(--ctrl-ease),
              box-shadow var(--ctrl-dur) var(--ctrl-ease);
  color: #b19a00;
}
 
/* radio inputs themselves — hide native, keep accessible */
.ctrl-panel .radio-button input[type="radio"] {
  accent-color: var(--ctrl-accent);
  width: 15px; height: 15px;
  cursor: pointer;
}
 
/* active-looking pill when radio is checked (JS adds .ctrl-active) */
.ctrl-panel .radio-button .ctrl-active {
  background: var(--ctrl-accent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(26,79,186,.28);
}
 
/* ── Hidden div slide animation ────────────────────────────── */
@keyframes ctrl-slidedown {
  from { opacity: 0; transform: translateY(-10px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);     max-height: 120px; }
}
 
.ctrl-panel #divClientCode {
  overflow: hidden;
}
 
.ctrl-panel #divClientCode:not(.hiddenDiv) {
  animation: ctrl-slidedown .38s var(--ctrl-ease) both;
}
 
/* ── "Code" label + text input ─────────────────────────────── */
.ctrl-panel #divClientCode span.text-dark {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
 
.ctrl-panel #divClientCode input[type="text"] {
  border: 1.5px solid var(--ctrl-border) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: .93rem !important;
  font-family: 'Figtree', sans-serif;
  color: var(--ctrl-accent) !important;
  font-weight: 600 !important;
  background: var(--ctrl-bg) !important;
  transition: border-color var(--ctrl-dur) var(--ctrl-ease),
              box-shadow   var(--ctrl-dur) var(--ctrl-ease);
  outline: none;
}
 
.ctrl-panel #divClientCode input[type="text"]:focus {
  border-color: var(--ctrl-accent) !important;
  box-shadow: 0 0 0 3px rgba(26,79,186,.15) !important;
}
 
/* ── Print Form row ────────────────────────────────────────── */
.ctrl-panel #div1 span.text-dark {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}
 
.ctrl-panel #div1 select {
  border: 1.5px solid var(--ctrl-border) !important;
  border-radius: 10px;
  padding: 6px 32px 6px 14px;
  font-size: .93rem;
  font-family: 'Figtree', sans-serif;
  color: var(--ctrl-accent);
  font-weight: 600;
  background: var(--ctrl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a4fba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--ctrl-dur) var(--ctrl-ease),
              box-shadow   var(--ctrl-dur) var(--ctrl-ease);
  outline: none;
}
 
.ctrl-panel #div1 select:focus {
  border-color: var(--ctrl-accent) !important;
  box-shadow: 0 0 0 3px rgba(26,79,186,.15);
}
 
/* ── Buttons ───────────────────────────────────────────────── */
 
/* Download button */
.ctrl-panel input[type="submit"],
.ctrl-panel input[type="button"],
.ctrl-panel .bg1 {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  letter-spacing: .03em;
  padding: 10px 24px !important;
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, #9b9045 0%, #837517 100%) !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26,79,186,.30);
  transition: transform var(--ctrl-dur) var(--ctrl-ease),
              box-shadow var(--ctrl-dur) var(--ctrl-ease),
              filter     var(--ctrl-dur) var(--ctrl-ease);
  white-space: nowrap;
}
 
.ctrl-panel input[type="submit"]:hover,
.ctrl-panel input[type="button"]:hover,
.ctrl-panel .bg1:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26,79,186,.38);
  filter: brightness(1.06);
}
 
.ctrl-panel input[type="submit"]:active,
.ctrl-panel input[type="button"]:active,
.ctrl-panel .bg1:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 3px 10px rgba(26,79,186,.22);
}
 
/* Ripple layer on download button */
.ctrl-panel input[type="submit"],
.ctrl-panel input[type="button"] {
  position: relative;
  overflow: hidden;
}
 
/* "Rest Pages" link-button */
.ctrl-panel a.bg2 {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  letter-spacing: .03em;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--ctrl-accent) !important;
  background: transparent !important;
  color: var(--ctrl-accent) !important;
  transition: background var(--ctrl-dur) var(--ctrl-ease),
              color      var(--ctrl-dur) var(--ctrl-ease),
              transform  var(--ctrl-dur) var(--ctrl-ease),
              box-shadow var(--ctrl-dur) var(--ctrl-ease);
}
 
.ctrl-panel a.bg2:hover {
  background: var(--ctrl-accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26,79,186,.28);
}
 
.ctrl-panel a.bg2:active {
  transform: translateY(0) scale(.97);
}
 
/* ── Button row spacing ─────────────────────────────────────── */
.ctrl-panel .mt-2.mt-sm-4.align-items-center.d-flex {
  gap: .75rem;
  margin-top: 1.5rem !important;
}
 
/* ── Divider between sections ──────────────────────────────── */
.ctrl-panel #div1 {
  border-top: 1px solid var(--ctrl-border);
  padding-top: .75rem;
  margin-top: .5rem;
  width: 100%;
}
    /* ── CONTACT BANNER ── */
    .contact-banner {
      background: #ffffff;
      padding: 40px 0;
      position: relative;
      overflow: hidden;
      opacity: 0;
      animation: fadeUp 0.6s 1.1s ease forwards;
    }
    .contact-banner::before {
      /* content: ''; */
      position: absolute;
      inset: 0;
      /* background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 30px,
        rgba(255,255,255,0.012) 30px, rgba(255,255,255,0.012) 60px
      ); */
    }
    .contact-banner::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .contact-title {
      font-size: clamp(1.1rem, 2.5vw, 1.6rem);
      font-weight: 700;
      color: #44439b;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
    }
    .contact-title span { color: var(--gold); }

    .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #ffffff;
      text-decoration: none;
      font-size: 0.86rem;
      font-weight: 500;
      padding: 10px 20px;
      border: 1px solid rgba(201,168,76,0.3);
      border-radius: 8px;
      background: linear-gradient(120deg, #0f1f5c 0%, #1a3a8c 55%, #0d3068 100%);
      transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
    }
    .contact-link:hover {
      background:linear-gradient(135deg, #9b9045 0%, #837517 100%) !important;
      border-color:#9b9045;
      color: #ffffff;
      transform: translateY(-2px);
    }
    .contact-link i { font-size: 0.9rem; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 991px) {
      .ctrl-panel { border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    }
    @media (max-width: 576px) {
      .ctrl-panel { padding: 28px 20px; }
      .date-timeline { flex-direction: column; gap: 1px; }
      .date-item:first-child { border-radius: 10px 10px 0 0; }
      .date-item:last-child  { border-radius: 0 0 10px 10px; border-left: 1px solid var(--border); border-top: none; }
    }