r
:root{--brand:#ff4d00;--ink:#222;--muted:#6b7280;--bg:#fff;--card:#fafafa;--shadow:0 10px 25px rgba(0,0,0,.08)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:"Montserrat",sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:var(--ink);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.navbar{position:sticky;top:0;z-index:40;background:#FCE9E9;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #eee}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:44px}.brand .title{font-weight:700;letter-spacing:.2px}
.menu{display:flex;gap:20px;align-items:center}
.menu a{padding:10px 12px;border-radius:10px;transition:transform .2s ease, background .2s ease}
.menu a:hover{background:#C74D4D;transform:translateY(-1px)}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:#E85A4F;color:#fff;font-weight:600;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(255,77,0,.25)}
.dropdown{position:relative}.dropdown:hover .dropdown-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.dropdown-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:260px;display:grid;grid-template-columns:1fr;gap:4px;opacity:0;transform:translateY(8px);pointer-events:none;transition:all .2s ease}
.dropdown-menu a{padding:10px;border-radius:10px}.dropdown-menu a:hover{background:#f6f6f7}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer}.hamburger span{width:24px;height:2px;background:#222}
@media (max-width: 900px){
  .menu{display:none;position:fixed;inset:0 0 auto auto;background:#fff;padding:80px 24px;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .dropdown-menu{position:relative;box-shadow:none;border:none;opacity:1;transform:none;pointer-events:auto}
  .hamburger{display:flex}
}


.hero{position:relative;isolation:isolate}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:64px 0}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 16px}
.hero p{color:var(--muted);font-size:18px;margin-bottom:24px}
.hero .image{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.hero .image img{width:100%;height:auto;display:block}
.section{padding:72px 0;border-top:1px solid #f1f1f1}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid #eee;padding:24px;border-radius:20px;box-shadow:var(--shadow);transform:translateY(8px);opacity:0}
.card.revealed{}
.card.revealed, .reveal.visible{
  transform:none;
  opacity:1;
  transition:opacity .6s cubic-bezier(.2,.6,.2,1);
}
.card h3{margin:0 0 8px}.card p{color:var(--muted);margin:0}

.reveal{opacity:0;transform:translateY(16px);transition:all .8s cubic-bezier(.2,.6,.2,1)}
.reveal.visible{opacity:1;transform:none}
/* === Hero fade-in + slide-up (Option 1) with gentle stagger === */
.stagger > * { opacity: 0; transform: translateY(12px); }
.stagger.visible > * {
  opacity: 1;
  transform: none;
  transition: all .6s cubic-bezier(.2,.6,.2,1);
}
.stagger.visible > *:nth-child(1) { transition-delay: .05s; }
.stagger.visible > *:nth-child(2) { transition-delay: .15s; }
.stagger.visible > *:nth-child(3) { transition-delay: .25s; }



/* === Hero fade-in + slide-up with stagger === */
.stagger > * {
  opacity: 0;
  transform: translateY(12px);
}
.stagger.visible > * {
  opacity: 1;
  transform: none;
  transition: all .6s cubic-bezier(.2,.6,.2,1);
}
.stagger.visible > *:nth-child(1) { transition-delay: .05s; }
.stagger.visible > *:nth-child(2) { transition-delay: .15s; }
.stagger.visible > *:nth-child(3) { transition-delay: .25s; }

/* ===== PURE CSS hero animation (no JS needed) ===== */
@keyframes bf-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}


/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;   /* distance from bottom */
  right: 20px;    /* distance from right */
  background-color: #25D366;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}

/* --- Sliding image reveal (bottom -> top) --- */
.cards .card{
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}

.cards .card > * {
  position: relative;
  z-index: 2;
}

.cards .card::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  transform: translateY(100%);
  transition: transform .45s ease;
  z-index: 1;
}

.cards .card:hover::before{
  transform: translateY(0);
}



/* Per-card images */


.card-dairy::before          { background-image:url("/assets/images/dairy.webp"); }
.card-beverages::before      { background-image:url("/assets/images/beverages1.webp");}
.card-pharma::before { background-image:url("/assets/images/pharma.webp"); }
.card-pets::before { background-image:url("/assets/images/pets.webp"); }
.card-bakeryconfectionery::before  { background-image:url("/assets/images/confectionery&bakery.webp"); }
.card-colours::before  { background-image:url("/assets/images/colours.webp"); }
.card-antioxidants::before   { background-image:url("/assets/images/antioxidants&preservatives.webp"); }
.card-savory::before         { background-image:url("/assets/images/savory.webp"); }
.card-emulsion::before       { background-image:url("/assets/images/emulsfied.webp"); }
.hero {
  position: relative;
  background: url("images/orange.jpg") no-repeat center center/cover;
  color: white;
  text-align: left;
  padding: 120px 80px;
  border-radius: 12px;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Optional dark overlay for better text contrast */
  z-index: 0;
  border-radius: 12px;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.hero .btn {
  background-color: #ff6b3b;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  transition: background 0.3s ease;
}

.hero .btn:hover {
  background-color: #ff4d1c;
}
.hero {
  min-height: 500px; /* ensures enough space for hero image */
  display: flex;
  align-items: center;
  margin-top:12px;
}
.card {
  flex: 1;
  min-width: 280px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}
/* Keep containers flexible */
.container, section, .columns {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Make your three cards section flexible */
.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.card {
  flex: 1 1 30%;
  min-width: 280px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;


}
/* === Consistent footer styling === */
.footer {
  background-color: #0f172a;
  color: #ffffff;
  padding: 40px 0;
  text-align: center;
  width: 100%;
  position: relative;
  bottom: 0;
}
/* ---- Footer ---- */
.footer { background:#0f172a; color:#d9d9d9; }
.footer a { color:inherit; text-decoration:none; }
.footer a:hover { text-decoration:underline; }

.footer-inner{
  max-width:1200px; margin:0 auto;
  padding:48px 24px;
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:40px 32px;
  text-align:left;           /* key to match reference */
}

.f-col{ max-width:420px; }
.f-title{
  margin:0 0 14px;
  font-size:22px; font-weight:700; letter-spacing:.2px;
  color:#eee;
}
.f-list{ list-style:none; padding:0; margin:0; }
.f-list li{ margin:8px 0; line-height:1.6; }

.f-social{ list-style:none; padding:0; margin:0; }
.f-social li{ margin:8px 0; }

.f-address{ font-style:normal; line-height:1.9; margin:0; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  background:#141414;
}
.footer-bottom-inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  text-align:left;
  color:#aaa; font-size:14px;
}
.f-site a{ color:#aaa; }

@media (max-width: 1024px){
  .footer-inner{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 560px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-bottom-inner{ flex-direction:column; gap:8px; }
}
/* Icon row */
.social-icons{
  display:flex; gap:16px; padding:4px 0; margin:0; list-style:none;
}
.social-icons a{
  display:grid; place-items:center; width:40px; height:40px; 
  border-radius:50%;
  color:#cfcfcf;                     /* base icon color */
  background:rgba(255,255,255,0.06); /* subtle disc background */
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, background .25s ease;
}
.social-icons i{ font-size:18px; line-height:1; }

/* Brighten-up + glow on hover/focus */
.social-icons a:hover,
.social-icons a:focus-visible{
  filter: brightness(1.8);
  background:rgba(255,255,255,0.14);
  box-shadow: 0 0 10px rgba(255,255,255,0.35), 0 0 18px currentColor;
  transform: translateY(-2px) scale(1.08);
  outline: none;
}

/* Gentle attention pulse when page loads (optional) */
@keyframes glow-pulse{
  0%,100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%     { box-shadow: 0 0 14px rgba(255,255,255,0.18); }
}
.social-icons a{ animation: glow-pulse 2.2s ease-in-out 1; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .social-icons a{ transition: none; animation: none; }
}


/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .card, .card, .cards .card {
    transition: box-shadow 120ms ease;    /* no scaling for sensitive users */
    transform: none !important;
  }
}
/* ===== Mobile menu "Back to Home" row ===== */
.mobile-back{
  display:none;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  font-weight:600;
  border-bottom:1px solid #eee;
}
@media (max-width: 900px){
  .mobile-back{display:flex}
}

/* === DOWNLOAD BROCHURE SECTION === */
.download-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.download-box {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 40px 60px;
  max-width: 700px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.download-content h2 {
  font-size: 28px;
  font-weight: 600;
  color: #222;
  margin-bottom: 15px;
}

.download-content p {
  color: #555;
  font-size: 17px;
  margin-bottom: 25px;
  line-height: 1.6;
}

.download-btn {
  background-color: #ff5a5f;
  color: #fff;
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255,90,95,0.3);
  display: inline-block;
}

.download-btn:hover {
  background-color: #e04a4f;
  box-shadow: 0 6px 15px rgba(224,74,79,0.4);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .download-box { padding: 30px 20px; }
  .download-content h2 { font-size: 24px; }
}
#hero-image {
  transition: opacity 0.6s ease-in-out;
}

/* --- Premium Hamburger & Side Panel --- */

/* Base: hide hamburger by default, show via media queries */
.hamburger-btn {
  background: none;
  border: none;
  padding: 4px;
  margin-left: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Desktop: show nav + hamburger after Contact Us */
@media (min-width: 992px) {
  .hamburger-btn {
    display: inline-flex;
  }
}

/* Mobile: hide the normal nav bar, show only hamburger */
@media (max-width: 991px) {
  nav.menu {
    display: none;
  }
  .hamburger-btn {
    display: inline-flex;
    margin-left: auto;
  }
}

/* Side panel base */
.side-panel {
  position: fixed;
  top: 0;
  right: -300px; /* hidden offscreen */
  width: 300px;
  height: 100%;
  background: #ffffff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.18);
  z-index: 9999;
  transition: right 0.3s ease;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

/* When active, slide in */
.side-panel.active {
  right: 0;
}

/* Dark overlay */
.side-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9990;
  display: none;
}

.side-overlay.active {
  display: block;
}

/* Panel header */
.panel-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.panel-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
}

/* Panel menu links */
.panel-menu a,
.panel-dropdown {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: #222;
  text-decoration: none;
}

.panel-menu a:hover {
  color: #000;
}

.panel-dropdown {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* Dropdown content */
.panel-dropdown-content {
  display: none;
  padding-left: 10px;
}

.panel-dropdown.open + .panel-dropdown-content {
  display: block;
}

/* On very small devices, ensure panel fills height */
@media (max-width: 480px) {
  .side-panel {
    width: 280px;
  }

}
/* Fix phone input overlapping country code */
.iti--separate-dial-code input {
  padding-left: 90px !important;
}

.iti__selected-flag {
  width: 80px;
}

.iti input {
  box-sizing: border-box;
}

/* ===== GLOBAL WEBSITE FONT ===== */

body {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500;
}
/* ===== BLOSSOM PREMIUM TYPOGRAPHY PACK ===== */

:root{
  --ff: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Premium readable text */
  --text: 16px;
  --lh: 1.75;

  /* Controlled letter spacing (luxury feel) */
  --ls-title: -0.02em;
  --ls-sub: -0.01em;
  --ls-body: 0.00em;
}

/* Global font + smoothing */
html, body{
  font-family: var(--ff) !important;
  font-size: var(--text);
  line-height: var(--lh);
  letter-spacing: var(--ls-body);
  font-weight: 300; /* thin premium like your sample */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* Links: professional */
a{
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Buttons / Nav: slightly stronger so it looks premium */
button, .btn, .button, nav a{
  font-family: var(--ff) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Inputs: premium text */
input, textarea, select{
  font-family: var(--ff) !important;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Small text */
small, .small{
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
}

/* Mobile tuning */
@media (max-width: 768px){
  html, body{ font-size: 15.5px; }
  p{ line-height: 1.8; }
}

/* ===========================
   Kerry-style Product Section
   Use with classes:
   .kry-section .kry-wrap .kry-row .kry-media .kry-content
   =========================== */

.kry-section{ padding:18px 0; }
.kry-wrap{ width:min(1100px, calc(100% - 28px)); margin:0 auto; display:grid; gap:18px; }

.kry-row{
  display:grid !important;
  grid-template-columns: 1.05fr 1fr;
  gap:18px;
  align-items:center;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 16px 44px rgba(0,0,0,.08);
}

.kry-row.reverse{ grid-template-columns: 1fr 1.05fr; }
.kry-row.reverse .kry-media{ order:2; }
.kry-row.reverse .kry-content{ order:1; }

.kry-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#f6f7fb;
  min-height:260px;
}

.kry-media img{
  width:100% !important;
  height:100% !important;
  min-height:260px;
  object-fit:cover;
  display:block !important;
  transform:scale(1.02);
  transition:transform .7s ease;
}

.kry-row:hover .kry-media img{ transform:scale(1.06); }

.kry-outline{
  position:absolute;
  inset:8%;
  border-radius:18px;
  border:2px solid rgba(255,255,255,.75);
  clip-path: polygon(14% 8%, 86% 8%, 94% 50%, 86% 92%, 14% 92%, 6% 50%);
  opacity:.9;
  pointer-events:none;
}

.kry-content{ padding:6px; }
.kry-eyebrow{ margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.02em; color:rgba(36,48,110,.75); }
.kry-title{ margin:0 0 10px; font-size:clamp(22px, 2.2vw, 34px); line-height:1.12; color:rgba(15,23,42,.96); }
.kry-text{ margin:0 0 14px; font-size:15.5px; line-height:1.7; color:rgba(15,23,42,.72); max-width:60ch; }

.kry-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(90deg, #24306e, #24a0ed);
  box-shadow:0 14px 30px rgba(36,48,110,.18);
}

/* Mobile */
@media (max-width: 860px){
  .kry-row{ grid-template-columns:1fr; padding:14px; }
  .kry-row.reverse .kry-media{ order:1; }
  .kry-row.reverse .kry-content{ order:2; }
  .kry-media, .kry-media img{ min-height:240px; }
}


/* ==============================
   Premium content animations
   (reveal + stagger, enterprise)
   ============================== */

/* Base reveal (smooth fade-up + tiny scale) */
.reveal,
.card,
.stagger{
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(0.2px);
  transition: opacity .65s cubic-bezier(.2,.6,.2,1),
              transform .75s cubic-bezier(.2,.6,.2,1),
              filter .75s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}

/* Visible state */
.reveal.visible,
.card.revealed,
.stagger.visible{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children nicely (apply .stagger on a wrapper div/section) */
.stagger > *{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.6,.2,1),
              transform .65s cubic-bezier(.2,.6,.2,1);
}

.stagger.visible > *{
  opacity: 1;
  transform: none;
}

/* Natural stagger delays (up to 8 items) */
.stagger.visible > *:nth-child(1){ transition-delay: .06s; }
.stagger.visible > *:nth-child(2){ transition-delay: .12s; }
.stagger.visible > *:nth-child(3){ transition-delay: .18s; }
.stagger.visible > *:nth-child(4){ transition-delay: .24s; }
.stagger.visible > *:nth-child(5){ transition-delay: .30s; }
.stagger.visible > *:nth-child(6){ transition-delay: .36s; }
.stagger.visible > *:nth-child(7){ transition-delay: .42s; }
.stagger.visible > *:nth-child(8){ transition-delay: .48s; }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal, .card, .stagger,
  .stagger > *{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   SHARED UI – STANDARDIZED FROM PAGE FILES
   ========================================================= */

/* ---------- Common utility classes ---------- */
.hero-overlay{
  position: relative;
  text-align: left;
  color: #fff;
  overflow: hidden;
}

.hero-overlay__img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.8;
}

.hero-overlay__content{
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.section-tight{
  padding-top: 10px;
}

.center-block{
  text-align: center;
  margin-top: 40px;
}

.cta-primary{
  background:#24A0ED;
  color:#fff;
  padding:12px 28px;
  border-radius:6px;
  display:inline-block;
  margin-top:18px;
  text-decoration:none;
  font-size:16px;
}

.text-blue{
  color:#24A0ED;
}

.text-navy{
  color:#0000A0;
}

.text-red{
  color:#FF0000;
}

/* ---------- Header / hamburger / side panel ---------- */
.hamburger-btn {
  background: none;
  border: none;
  padding: 4px;
  margin-left: 12px;
  margin-right: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  right: 0;
}

@media (min-width: 992px) {
  nav.menu { display: flex; }
  .hamburger-btn { display: inline-flex; }
}

@media (max-width: 991px) {
  nav.menu { display: none; }
  .hamburger-btn {
    display: inline-flex;
    margin-left: auto;
  }
}

.side-panel {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: #b67e7d;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: right 0.3s ease;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-panel.active {
  right: 0;
}

.side-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9990;
  display: none;
}

.side-overlay.active {
  display: block;
}

.panel-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.panel-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: #ffffff;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
}

.panel-menu {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

.panel-menu a,
.panel-dropdown {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
}

.panel-menu a:hover {
  color: #000;
}

.panel-dropdown {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.panel-dropdown-content {
  display: none;
  padding-left: 10px;
}

.panel-dropdown.open + .panel-dropdown-content {
  display: block;
}

@media (max-width: 480px) {
  .side-panel {
    width: 280px;
  }
}

.panel-menu::-webkit-scrollbar {
  width: 6px;
}

.panel-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.35);
  border-radius: 10px;
}

/* ---------- Shared BFF tabs UI ---------- */
.bff-tabs{
  border:1px solid #e9e9e9;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.bff-tabbar{
  display:flex;
  gap:8px;
  padding:10px;
  background:#fafafa;
  border-bottom:1px solid #eee;
}

.bff-tab{
  border:1px solid #e6e6e6;
  background:#fff;
  color:#111;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  transition: transform .2s ease, background .2s ease;
}

.bff-tab:hover{
  background:#C74D4D;
  transform:translateY(-1px);
  color:#fff;
  border-color:#C74D4D;
}

.bff-tab.active{
  background:#C74D4D;
  color:#fff;
  border-color:#C74D4D;
}

.bff-tab:active{
  transform: translateY(0px) scale(0.98);
}

.bff-panel{
  display:block;
  padding:14px;
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  height:0;
  overflow:hidden;
  transition: opacity .22s ease, transform .22s ease;
}

.bff-panel.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  height:auto;
  overflow:visible;
}

.bff-top{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.bff-searchbox{
  position:relative;
  flex:1;
  min-width:220px;
}

.bff-searchicon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:.7;
  pointer-events:none;
}

.bff-search{
  width:100%;
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:11px 12px 11px 36px;
  font-size:14px;
}

.bff-count{
  color:#666;
  font-size:13px;
}

.bff-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.bff-list li{
  border:1px solid #eee;
  border-radius:12px;
  padding:0;
}

.bff-card{
  border:1px solid #eee;
  border-radius:12px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.bff-card-title{
  font-weight:600;
}

.bff-card-sub{
  font-size:13px;
  color:#666;
  margin-top:4px;
}

.bff-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bff-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-size:14px;
  border:1px solid #111;
}

.bff-btn.ghost{
  background:#fff;
  color:#111;
}

.bff-iframe{
  width:100%;
  height:520px;
  border:1px solid #e9e9e9;
  border-radius:12px;
  margin-top:12px;
}

.bff-note{
  color:#666;
  font-size:12px;
  margin-top:8px;
}

.bff-enquire{
  display:block;
  padding:12px;
  border-radius:12px;
  transition: transform .2s ease, background .2s ease;
}

.bff-enquire:hover{
  background:#C74D4D;
  transform:translateY(-1px);
  color:#fff;
}

@media(max-width:900px){
  .bff-list{ grid-template-columns:1fr; }
  .bff-iframe{ height:420px; }
}

/* ---------- Shared FAQ UI : Light / Fast Version ---------- */
:root{
  --faq-accent: #24306e;
  --faq-accent2: #24a0ed;
  --faq-ink: #0f172a;
  --faq-muted: #475569;
  --faq-line: #e2e8f0;
  --faq-bg: #ffffff;
  --faq-soft: #f8fafc;
}

.bf-faq{
  margin-top: 24px;
  padding: 20px 16px;
  background: var(--faq-bg);
  border: 1px solid var(--faq-line);
  border-radius: 18px;
}

.bf-faq__container{
  width: 100%;
}

.bf-faq__head{
  margin-bottom: 14px;
}

.bf-faq__title{
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--faq-ink);
}

.bf-faq__subtitle{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--faq-muted);
}

.bf-faq__list{
  display: grid;
  gap: 10px;
}

details.bf-faq__item{
  background: var(--faq-bg);
  border: 1px solid var(--faq-line);
  border-radius: 14px;
  overflow: hidden;
}

summary.bf-faq__q{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--faq-ink);
  user-select: none;
  background: #fff;
}

summary.bf-faq__q::-webkit-details-marker{
  display: none;
}

summary.bf-faq__q span:first-child{
  flex: 1;
  display: block;
}

.bf-faq__icon{
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 999px;
  border: 1px solid var(--faq-line);
  background: var(--faq-soft);
}

.bf-faq__icon::before,
.bf-faq__icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--faq-accent);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.bf-faq__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.bf-faq__a{
  padding: 0 16px 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--faq-muted);
  background: #fff;
}

.bf-faq__a > div{
  padding-top: 2px;
}

details.bf-faq__item[open]{
  border-color: #cbd5e1;
}

details.bf-faq__item[open] .bf-faq__icon::after{
  display: none;
}

summary.bf-faq__q:hover{
  background: #f8fafc;
}

summary.bf-faq__q:focus-visible{
  outline: 2px solid rgba(36,160,237,0.35);
  outline-offset: 2px;
}

@media (max-width: 520px){
  .bf-faq{
    padding: 16px 12px;
    border-radius: 16px;
  }

  .bf-faq__title{
    font-size: 20px;
  }

  .bf-faq__subtitle{
    font-size: 14px;
  }

  summary.bf-faq__q{
    padding: 14px 14px;
    font-size: 15px;
  }

  .bf-faq__a{
    padding: 0 14px 14px;
    font-size: 14px;
  }

  .bf-faq__icon{
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}
/* =========================================================
   STANDARDIZED SHARED CLASSES
   ========================================================= */

.hero-banner{
  position: relative;
  text-align: left;
  color: #fff;
  overflow: hidden;
}

.hero-banner__img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.8;
}

.hero-banner__img--light{
  opacity: 0.12;
}

.hero-banner__content{
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero-banner__content--white{
  color: #ffffff;
}

.section-pt-10{
  padding-top: 10px;
}

.cta-wrap{
  text-align: center;
  margin-top: 40px;
}

.cta-wrap__title{
  font-size: 22px;
  font-weight: 600;
}

.cta-wrap__text{
  font-size: 16px;
  margin-top: 10px;
}

.cta-btn{
  background:#24A0ED;
  color:#fff;
  padding:12px 28px;
  border-radius:6px;
  display:inline-block;
  margin-top:18px;
  text-decoration:none;
  font-size:16px;
}

.back-link{
  margin-right: 12px;
}

.text-blue-link{
  color:#24A0ED;
}

.text-blue-strong{
  color:#24A0ED;
  font-weight:600;
}

.text-navy{
  color:#0000A0;
}

.text-red{
  color:#FF0000;
}

.copy-16{
  font-size:16px;
}

.copy-16-muted{
  font-size:16px;
  color:#444;
}

.copy-16-soft{
  font-size:16px;
  color:#555;
}

.copy-16-top20{
  font-size:16px;
  margin-top:20px;
  color:#555;
}

.faq-list-tight{
  margin-top:16px;
}

.guide-section{
  padding:40px 16px;
}

.mt-18{
  margin-top:18px;
}

.hero-list{
  font-size:22px;
  line-height:1.8;
  list-style-type:disc;
  margin-left:20px;
  color:#24A0ED;
  font-weight:600;
}

.hero-btn-orange{
  background-color:#ff6b3b;
  color:#fff;
  padding:12px 24px;
  border-radius:6px;
  text-decoration:none;
  display:inline-block;
  margin-top:20px;
}

.footer-note{
  text-align:center;
  margin-top:30px;
  font-size:14px;
  opacity:0.8;
}

.map-embed{
  border:0;
}

/* =========================================================
    – PREMIUM SPOTLIGHT STYLE [ALL PRODUCT PAGES (beverage.php ; dairy.php) AND MANY-MORE  NO CHILD PAGES]
   ========================================================= */

.bevx-page{
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 18%, #fcfbf8 55%, #ffffff 100%);
}

/* Hero */
.bevx-hero{
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #0f172a;
}

.bevx-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.bevx-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,23,42,.88) 0%, rgba(15,23,42,.60) 40%, rgba(15,23,42,.15) 100%);
}

.bevx-hero__inner{
  position: relative;
  z-index: 2;
  padding: 88px 0 96px;
}

.bevx-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.bevx-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d4b06a;
  box-shadow:0 0 0 4px rgba(212,176,106,.16);
}

.bevx-hero h1{
  margin: 18px 0 14px;
  max-width: 880px;
  color: #fff;
  font-size: clamp(38px, 5.8vw, 76px);
  line-height: 1;
  letter-spacing: -.045em;
}

.bevx-hero p{
  max-width: 760px;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.85;
}

.bevx-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.bevx-btn,
.bevx-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.bevx-btn:hover,
.bevx-btn-ghost:hover{
  transform:translateY(-1px);
}

.bevx-btn{
  background:#ffffff;
  color:#0f172a;
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.bevx-btn-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}

/* Floating navigator */
.bevx-nav-wrap{
  margin-top:-40px;
  position:relative;
  z-index:5;
}

.bevx-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 44px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}

.bevx-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:#153c73;
  background:#f5f9ff;
  border:1px solid rgba(36,89,166,.10);
  transition:transform .2s ease, background .2s ease;
}

.bevx-nav a:hover{
  transform:translateY(-1px);
  background:#eaf4ff;
}

/* Intro */
.bevx-intro{
  padding-top:34px;
}

.bevx-intro__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items:start;
}

.bevx-intro__copy h2{
  margin:0 0 14px;
  color:#0f172a;
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.08;
  letter-spacing:-.025em;
}

.bevx-intro__copy p{
  margin:0;
  color:#475569;
  font-size:17px;
  line-height:1.9;
}

.bevx-intro__panel{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff, #fcfbf8);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}

.bevx-intro__panel h3{
  margin:0 0 12px;
  color:#0f172a;
  font-size:18px;
}

.bevx-intro__panel ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.bevx-intro__panel li{
  position:relative;
  padding-left:18px;
  color:#64748b;
  line-height:1.75;
}

.bevx-intro__panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:.8em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d4b06a;
}

.bevx-divider{
  height:1px;
  border:0;
  margin:32px 0 10px;
  background:linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
}

/* Spotlight sections */
.bevx-head{
  margin-top:36px;
  margin-bottom:20px;
}

.bevx-head h2{
  margin:0 0 10px;
  color:#0f172a;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.06;
  letter-spacing:-.03em;
}

.bevx-head p{
  max-width:760px;
  margin:0;
  color:#475569;
  font-size:16px;
  line-height:1.85;
}

.bevx-stack{
  display:grid;
  gap:26px;
}

.bevx-spot{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 0;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, #ffffff, #fcfbf8);
  box-shadow:0 20px 48px rgba(15,23,42,.08);
}

.bevx-spot--reverse{
  grid-template-columns: 1.05fr .95fr;
}

.bevx-spot__media{
  position:relative;
  min-height:360px;
  overflow:hidden;
  background:#eef2f7;
}

.bevx-spot__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.bevx-spot:hover .bevx-spot__media img{
  transform:scale(1.05);
}

.bevx-spot__body{
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bevx-spot__eyebrow{
  margin:0 0 10px;
  color:#8a6b2f;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.bevx-spot__title{
  margin:0 0 14px;
  color:#0f172a;
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.bevx-spot__text{
  margin:0 0 16px;
  color:#4b5563;
  line-height:1.85;
  font-size:16px;
}

.bevx-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}

.bevx-tags li{
  padding:8px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  color:#24306e;
  font-size:13px;
  font-weight:700;
}

.bevx-spot__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:auto;
}

.bevx-spot__actions .bevx-btn{
  background:#0f172a;
  color:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.14);
}

.bevx-spot__actions .bevx-btn-ghost{
  background:#fff;
  color:#111827;
  border:1px solid rgba(15,23,42,.10);
}

/* Trust strip */
.bevx-trust{
  margin-top:42px;
  padding:30px;
  border-radius:30px;
  background:linear-gradient(135deg, #fffaf2 0%, #ffffff 42%, #f6fbff 100%);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 42px rgba(15,23,42,.06);
}

.bevx-trust h2{
  margin:0 0 10px;
  color:#0f172a;
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.08;
  letter-spacing:-.02em;
}

.bevx-trust p{
  margin:0;
  max-width:820px;
  color:#475569;
  line-height:1.85;
}

.bevx-trust__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

.bevx-trust__item{
  padding:20px;
  border-radius:20px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.08);
}

.bevx-trust__item h3{
  margin:0 0 8px;
  color:#111827;
  font-size:18px;
}

.bevx-trust__item p{
  margin:0;
  color:#475569;
  line-height:1.75;
}

/* CTA */
.bevx-cta{
  margin-top:42px;
  padding:36px 22px;
  border-radius:30px;
  background:linear-gradient(135deg, #0f172a 0%, #16253f 58%, #1f4d85 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 18px 40px rgba(17,24,39,.18);
}

.bevx-cta h2{
  margin:0 0 10px;
  font-size:clamp(28px, 4vw, 42px);
  color:#fff;
  line-height:1.05;
  letter-spacing:-.02em;
}

.bevx-cta p{
  margin:0 auto;
  max-width:760px;
  color:rgba(255,255,255,.82);
  line-height:1.85;
}

.bevx-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

.bevx-cta .bevx-btn{
  background:#24A0ED;
  color:#fff;
  box-shadow:none;
}

.bevx-cta .bevx-btn-ghost{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.24);
}

/* Mobile */
@media (max-width: 1023px){
  .bevx-intro__grid{
    grid-template-columns:1fr;
  }

  .bevx-spot,
  .bevx-spot--reverse{
    grid-template-columns:1fr;
  }

  .bevx-trust__grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 767px){
  .bevx-hero{
    min-height:400px;
  }

  .bevx-hero__inner{
    padding:64px 0 52px;
  }

  .bevx-hero p{
    font-size:16px;
    line-height:1.75;
  }

  .bevx-hero__actions,
  .bevx-spot__actions,
  .bevx-cta__actions{
    flex-direction:column;
  }

  .bevx-btn,
  .bevx-btn-ghost{
    width:100%;
  }

  .bevx-nav-wrap{
    margin-top:-24px;
  }

  .bevx-nav{
    padding:12px;
  }

  .bevx-intro{
    padding-top:24px;
  }

  .bevx-intro__panel{
    padding:18px 16px;
    border-radius:20px;
  }

  .bevx-spot{
    border-radius:22px;
  }

  .bevx-spot__media{
    min-height:220px;
  }

  .bevx-spot__body{
    padding:22px 16px;
  }

  .bevx-spot__title{
    font-size:24px;
  }

  .bevx-trust{
    padding:22px 16px;
    border-radius:22px;
  }

  .bevx-trust__grid{
    grid-template-columns:1fr;
  }

  .bevx-cta{
    padding:28px 16px;
    border-radius:22px;
  }
}


/**********************************     PREMIUM SPOT LIGHT UI UX       END******* END ******** END    ****************************/



/* =========================================================
   WRI = White / Red / Indigo main-page design system
   ========================================================= */

:root{
  --wri-white:#ffffff;
  --wri-ivory:#f6f4ef;
  --wri-indigo:#281D78;
  --wri-indigo-2:#3C31A0;
  --wri-red:#FF1020;
  --wri-red-2:#D90B19;
  --wri-text:#171c27;
  --wri-muted:#667085;
  --wri-line:rgba(22,28,42,.10);
  --wri-shadow:0 22px 54px rgba(8,10,16,.12);
  --wri-radius:28px;
}

[data-wri-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s ease;
}
[data-wri-reveal].is-in{
  opacity:1;
  transform:none;
}

.wri-page{
  background:
    radial-gradient(circle at 92% 10%, rgba(255,16,32,.05), transparent 18%),
    radial-gradient(circle at 8% 18%, rgba(40,29,120,.08), transparent 22%),
    linear-gradient(180deg, var(--wri-white) 0%, var(--wri-ivory) 100%);
  color:var(--wri-text);
}

/* hero */
.wri-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, #ffffff 0%, #f7f5ef 62%, #f2f0ff 100%);
  border-bottom:1px solid var(--wri-line);
}

.wri-hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:16px;
  height:100%;
  background:linear-gradient(180deg, var(--wri-indigo), var(--wri-red));
}

.wri-hero::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,29,120,.10) 0%, rgba(40,29,120,0) 70%);
  pointer-events:none;
}

.wri-hero__inner{
  padding:84px 0 46px;
}

.wri-hero__grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:30px;
  align-items:center;
}

.wri-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(40,29,120,.07);
  border:1px solid rgba(40,29,120,.10);
  color:var(--wri-indigo);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.wri-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--wri-red);
  box-shadow:0 0 0 4px rgba(255,16,32,.10);
}

.wri-hero h1{
  margin:18px 0 14px;
  max-width:900px;
  color:var(--wri-text);
  font-size:clamp(40px, 6vw, 82px);
  line-height:.97;
  letter-spacing:-.05em;
}

.wri-hero p{
  margin:0 0 24px;
  max-width:760px;
  color:var(--wri-muted);
  font-size:18px;
  line-height:1.9;
}

.wri-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.wri-btn,
.wri-btn--ghost,
.wri-btn--red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.wri-btn:hover,
.wri-btn--ghost:hover,
.wri-btn--red:hover{
  transform:translateY(-2px);
}

.wri-btn{
  background:var(--wri-indigo);
  color:#fff;
  box-shadow:0 16px 30px rgba(40,29,120,.18);
}

.wri-btn:hover{
  background:var(--wri-indigo-2);
}

.wri-btn--ghost{
  background:#fff;
  color:var(--wri-indigo);
  border:1px solid rgba(40,29,120,.18);
}

.wri-btn--ghost:hover{
  border-color:var(--wri-red);
  color:var(--wri-red);
}

.wri-btn--red{
  background:var(--wri-red);
  color:#fff;
  box-shadow:0 16px 30px rgba(255,16,32,.16);
}

.wri-btn--red:hover{
  background:var(--wri-red-2);
}

.wri-visual{
  position:relative;
  min-height:480px;
}

.wri-frame{
  position:absolute;
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--wri-shadow);
  border:1px solid var(--wri-line);
}

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

.wri-frame--a{
  left:0;
  top:38px;
  width:54%;
  height:230px;
  z-index:2;
  animation:wriFloatA 6.4s ease-in-out infinite;
}

.wri-frame--b{
  right:0;
  top:0;
  width:60%;
  height:280px;
  z-index:3;
  border:2px solid rgba(40,29,120,.10);
  animation:wriFloatB 7.2s ease-in-out infinite;
}

.wri-frame--c{
  right:24px;
  bottom:0;
  width:52%;
  height:200px;
  z-index:2;
  animation:wriFloatC 6.8s ease-in-out infinite;
}

.wri-frame::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg, var(--wri-indigo), var(--wri-red));
  z-index:3;
}

.wri-badge{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:4;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(23,28,39,.86);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

@keyframes wriFloatA{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes wriFloatB{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(12px); }
}
@keyframes wriFloatC{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* stat strip */
.wri-statwrap{
  margin-top:-18px;
}

.wri-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.wri-stat{
  padding:22px 20px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
}

.wri-stat strong{
  display:block;
  color:var(--wri-indigo);
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-.04em;
}

.wri-stat span{
  color:var(--wri-muted);
  line-height:1.75;
}

/* section */
.wri-section{
  padding:72px 0;
}

.wri-head{
  margin-bottom:24px;
}

.wri-head h2{
  margin:0 0 10px;
  color:var(--wri-text);
  font-size:clamp(30px, 3.8vw, 52px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.wri-head p{
  margin:0;
  max-width:820px;
  color:var(--wri-muted);
  font-size:16px;
  line-height:1.9;
}

.wri-split{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:24px;
  align-items:stretch;
}

.wri-panel{
  position:relative;
  padding:30px;
  border-radius:var(--wri-radius);
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
}

.wri-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:5px;
  background:linear-gradient(90deg, var(--wri-indigo), var(--wri-red));
  border-top-left-radius:var(--wri-radius);
}

.wri-panel p{
  margin:0;
  color:var(--wri-muted);
  font-size:17px;
  line-height:1.95;
}

.wri-value-list{
  display:grid;
  gap:14px;
}

.wri-value{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
}

.wri-value strong{
  color:var(--wri-indigo);
  font-size:24px;
  line-height:1;
}

.wri-value p{
  margin:0;
  color:var(--wri-muted);
  line-height:1.8;
  font-size:15px;
}

/* cards */
.wri-grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}

.wri-grid4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.wri-card{
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.wri-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px rgba(8,10,16,.14);
  border-color:rgba(40,29,120,.20);
}

.wri-card__img{
  position:relative;
  height:180px;
  overflow:hidden;
}

.wri-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.wri-card:hover .wri-card__img img{
  transform:scale(1.05);
}

.wri-card__img::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:5px;
  background:linear-gradient(90deg, var(--wri-indigo), var(--wri-red));
}

.wri-card__body{
  padding:22px;
}

.wri-card h3{
  margin:0 0 10px;
  color:var(--wri-text);
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.02em;
}

.wri-card p{
  margin:0 0 18px;
  color:var(--wri-muted);
  line-height:1.82;
}

.wri-card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--wri-indigo);
  text-decoration:none;
  font-weight:700;
}

.wri-card a i{
  transition:transform .2s ease;
}
.wri-card:hover a i{
  transform:translateX(4px);
}

/* steps */
.wri-steps{
  display:grid;
  gap:16px;
}

.wri-step{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:18px;
  padding:22px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
}

.wri-step__num{
  color:var(--wri-red);
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
}

.wri-step h3{
  margin:0 0 8px;
  color:var(--wri-text);
  font-size:22px;
}

.wri-step p{
  margin:0;
  color:var(--wri-muted);
  line-height:1.85;
}

/* logo grid */
.wri-logo-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.wri-logo{
  min-height:150px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  text-align:center;
}

.wri-logo img{
  max-width:100%;
  max-height:72px;
  object-fit:contain;
}

.wri-logo span{
  color:var(--wri-indigo);
  font-weight:700;
  font-size:14px;
}

/* export band */
.wri-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--wri-line);
  box-shadow:var(--wri-shadow);
}

.wri-band__media{
  min-height:360px;
  position:relative;
  overflow:hidden;
}

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

.wri-band__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(40,29,120,.22), rgba(255,16,32,.10));
}

.wri-band__body{
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.wri-band__body p{
  margin:0;
  color:var(--wri-muted);
  line-height:1.9;
}

/* CTA */
.wri-cta{
  margin-top:42px;
  padding:40px 22px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--wri-indigo) 0%, var(--wri-indigo-2) 62%, var(--wri-red) 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 24px 50px rgba(40,29,120,.20);
}

.wri-cta h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.03;
  letter-spacing:-.04em;
}

.wri-cta p{
  margin:0 auto;
  max-width:760px;
  color:rgba(255,255,255,.88);
  line-height:1.9;
}

.wri-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

.wri-cta .wri-btn{
  background:#fff;
  color:var(--wri-indigo);
  box-shadow:none;
}

.wri-cta .wri-btn--ghost{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.26);
}

/* mobile */
@media (max-width: 1023px){
  .wri-hero__grid,
  .wri-split,
  .wri-band{
    grid-template-columns:1fr;
  }

  .wri-stats{
    grid-template-columns:1fr 1fr;
  }

  .wri-grid3{
    grid-template-columns:1fr 1fr;
  }

  .wri-grid4,
  .wri-logo-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 767px){
  .wri-hero__inner{
    padding:64px 0 36px;
  }

  .wri-hero h1{
    font-size:clamp(34px, 10vw, 52px);
  }

  .wri-hero p{
    font-size:16px;
    line-height:1.8;
  }

  .wri-actions,
  .wri-cta__actions{
    flex-direction:column;
  }

  .wri-btn,
  .wri-btn--ghost,
  .wri-btn--red{
    width:100%;
  }

  .wri-visual{
    min-height:360px;
  }

  .wri-frame--a{
    width:58%;
    height:160px;
    top:34px;
  }

  .wri-frame--b{
    width:64%;
    height:200px;
  }

  .wri-frame--c{
    width:58%;
    height:150px;
    right:8px;
  }

  .wri-stats,
  .wri-grid3,
  .wri-grid4,
  .wri-logo-grid{
    grid-template-columns:1fr;
  }

  .wri-panel,
  .wri-card__body,
  .wri-stat{
    padding:18px 16px;
  }

  .wri-value{
    grid-template-columns:1fr;
  }

  .wri-step{
    grid-template-columns:1fr;
    gap:10px;
    padding:18px 16px;
  }

  .wri-band__media{
    min-height:220px;
  }

  .wri-band__body,
  .wri-cta{
    padding:22px 16px;
  }
}

.wri-band__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   ABOUT US  – STRUCTURED PROFESSIONAL STORY UI
   White + Indigo + Red
   ========================================================= */

:root{
  --abp-white:#ffffff;
  --abp-ivory:#f6f4ef;
  --abp-indigo:#281D78;
  --abp-indigo-2:#3C31A0;
  --abp-red:#FF1020;
  --abp-red-2:#D90B19;
  --abp-text:#171c27;
  --abp-muted:#667085;
  --abp-line:rgba(22,28,42,.10);
  --abp-shadow:0 22px 54px rgba(8,10,16,.12);
  --abp-radius:28px;
}

[data-abp-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s ease;
}
[data-abp-reveal].is-in{
  opacity:1;
  transform:none;
}

.abp-page{
  background:
    radial-gradient(circle at 92% 8%, rgba(255,16,32,.05), transparent 18%),
    radial-gradient(circle at 10% 20%, rgba(40,29,120,.08), transparent 22%),
    linear-gradient(180deg, var(--abp-white) 0%, var(--abp-ivory) 100%);
  color:var(--abp-text);
}

/* HERO */
.abp-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, #ffffff 0%, #f7f5ef 58%, #f1eeff 100%);
  border-bottom:1px solid var(--abp-line);
}

.abp-hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:100%;
  background:linear-gradient(180deg, var(--abp-indigo), var(--abp-red));
}

.abp-hero::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,29,120,.08) 0%, rgba(40,29,120,0) 70%);
  pointer-events:none;
}

.abp-hero__gridline{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(40,29,120,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,29,120,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.15));
  pointer-events:none;
}

.abp-hero__inner{
  position:relative;
  z-index:2;
  padding:88px 0 42px;
}

.abp-hero__grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:30px;
  align-items:start;
}

.abp-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(40,29,120,.07);
  border:1px solid rgba(40,29,120,.10);
  color:var(--abp-indigo);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.abp-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--abp-red);
  box-shadow:0 0 0 4px rgba(255,16,32,.10);
}

.abp-titlebox{
  position:relative;
  margin-top:18px;
  padding:26px 28px 22px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
  overflow:hidden;
}

.abp-titlebox::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:180px;
  height:6px;
  background:linear-gradient(90deg, var(--abp-indigo), var(--abp-red));
  border-top-left-radius:30px;
}

.abp-titlebox::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:120px;
  height:6px;
  background:linear-gradient(90deg, var(--abp-red), var(--abp-indigo));
  border-bottom-right-radius:30px;
}

.abp-titlebox h1{
  margin:0 0 14px;
  max-width:900px;
  color:var(--abp-text);
  font-size:clamp(40px, 6vw, 74px);
  line-height:.98;
  letter-spacing:-.05em;
}

.abp-titlebox p{
  margin:0;
  max-width:760px;
  color:var(--abp-muted);
  font-size:18px;
  line-height:1.9;
}

.abp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.abp-btn,
.abp-btn--ghost,
.abp-btn--red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.abp-btn:hover,
.abp-btn--ghost:hover,
.abp-btn--red:hover{
  transform:translateY(-2px);
}

.abp-btn{
  background:var(--abp-indigo);
  color:#fff;
  box-shadow:0 16px 30px rgba(40,29,120,.18);
}
.abp-btn:hover{ background:var(--abp-indigo-2); }

.abp-btn--ghost{
  background:#fff;
  color:var(--abp-indigo);
  border:1px solid rgba(40,29,120,.18);
}
.abp-btn--ghost:hover{
  border-color:var(--abp-red);
  color:var(--abp-red);
}

.abp-btn--red{
  background:var(--abp-red);
  color:#fff;
  box-shadow:0 16px 30px rgba(255,16,32,.16);
}
.abp-btn--red:hover{ background:var(--abp-red-2); }

.abp-hero__side{
  display:grid;
  gap:16px;
}

.abp-media,
.abp-profile{
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-media__head,
.abp-profile__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--abp-line);
  background:linear-gradient(90deg, rgba(40,29,120,.05), rgba(255,16,32,.04));
}

.abp-media__head h3,
.abp-profile__head h3{
  margin:0;
  color:var(--abp-text);
  font-size:20px;
}

.abp-media__body,
.abp-profile__body{
  padding:20px;
}

.abp-media__video{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#0d1018;
  min-height:280px;
}

.abp-media__video video,
.abp-media__video img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
}

.abp-media__caption{
  margin-top:12px;
  color:var(--abp-muted);
  line-height:1.8;
}

.abp-profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.abp-mini{
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--abp-line);
}

.abp-mini strong{
  display:block;
  color:var(--abp-indigo);
  font-size:13px;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.abp-mini span{
  display:block;
  color:var(--abp-text);
  font-weight:700;
  line-height:1.5;
}

/* QUICK FACT STRIP */
.abp-facts{
  padding:24px 0 0;
}

.abp-facts__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.abp-fact{
  padding:22px 20px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-fact strong{
  display:block;
  color:var(--abp-indigo);
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-.04em;
}

.abp-fact span{
  color:var(--abp-muted);
  line-height:1.75;
}

/* COMMON */
.abp-section{
  padding:72px 0;
}

.abp-head{
  margin-bottom:24px;
}

.abp-head h2{
  margin:0 0 10px;
  color:var(--abp-text);
  font-size:clamp(30px, 3.8vw, 52px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.abp-head p{
  margin:0;
  max-width:820px;
  color:var(--abp-muted);
  font-size:16px;
  line-height:1.9;
}

.abp-grid2{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:24px;
  align-items:stretch;
}

.abp-panel{
  position:relative;
  padding:30px;
  border-radius:var(--abp-radius);
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:5px;
  background:linear-gradient(90deg, var(--abp-indigo), var(--abp-red));
  border-top-left-radius:var(--abp-radius);
}

.abp-panel p{
  margin:0;
  color:var(--abp-muted);
  font-size:17px;
  line-height:1.95;
}

.abp-values{
  display:grid;
  gap:14px;
}

.abp-value{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-value strong{
  color:var(--abp-indigo);
  font-size:24px;
  line-height:1;
}

.abp-value p{
  margin:0;
  color:var(--abp-muted);
  line-height:1.8;
  font-size:15px;
}

/* PRINCIPLES */
.abp-grid4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.abp-card{
  padding:22px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
  transition:transform .22s ease;
}

.abp-card:hover{
  transform:translateY(-4px);
}

.abp-card i{
  color:var(--abp-red);
  font-size:22px;
  margin-bottom:14px;
}

.abp-card h3{
  margin:0 0 8px;
  color:var(--abp-text);
  font-size:20px;
}

.abp-card p{
  margin:0;
  color:var(--abp-muted);
  line-height:1.82;
}

/* JOURNEY */
.abp-journey{
  display:grid;
  gap:18px;
}

.abp-journey-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:18px;
  align-items:start;
}

.abp-year{
  position:sticky;
  top:20px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--abp-indigo), var(--abp-red));
  color:#fff;
  font-size:24px;
  font-weight:800;
  text-align:center;
  box-shadow:var(--abp-shadow);
}

.abp-journey-card{
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-journey-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}

.abp-journey-media img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.abp-journey-media video{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.abp-journey-body{
  padding:22px;
}

.abp-journey-body h3{
  margin:0 0 8px;
  color:var(--abp-text);
  font-size:24px;
}

.abp-journey-body p{
  margin:0;
  color:var(--abp-muted);
  line-height:1.9;
}

/* CERTIFICATION BLOCK */
.abp-certband{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.abp-certbox,
.abp-trustbox{
  padding:26px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-certbox__number{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-radius:18px;
  background:#f8f7ff;
  border:1px solid rgba(40,29,120,.10);
  margin:16px 0;
}

.abp-certbox__number i{
  color:var(--abp-red);
  font-size:20px;
}

.abp-certbox__number strong{
  display:block;
  color:var(--abp-indigo);
  font-size:13px;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.abp-certbox__number span{
  display:block;
  color:var(--abp-text);
  font-weight:700;
  letter-spacing:.02em;
}

.abp-certlist{
  display:grid;
  gap:12px;
}

.abp-certitem{
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--abp-line);
}

.abp-certitem strong{
  display:block;
  color:var(--abp-text);
  margin-bottom:4px;
}

.abp-certitem p{
  margin:0;
  color:var(--abp-muted);
  line-height:1.75;
}

/* FINAL BAND */
.abp-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--abp-line);
  box-shadow:var(--abp-shadow);
}

.abp-band__media{
  min-height:360px;
  position:relative;
  overflow:hidden;
}

.abp-band__media img,
.abp-band__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.abp-band__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(40,29,120,.22), rgba(255,16,32,.10));
  pointer-events:none;
}

.abp-band__body{
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.abp-band__body p{
  margin:0;
  color:var(--abp-muted);
  line-height:1.9;
}

/* CTA */
.abp-cta{
  margin-top:42px;
  padding:40px 22px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--abp-indigo) 0%, var(--abp-indigo-2) 62%, var(--abp-red) 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 24px 50px rgba(40,29,120,.20);
}

.abp-cta h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.03;
  letter-spacing:-.04em;
}

.abp-cta p{
  margin:0 auto;
  max-width:760px;
  color:rgba(255,255,255,.88);
  line-height:1.9;
}

.abp-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

.abp-cta .abp-btn{
  background:#fff;
  color:var(--abp-indigo);
  box-shadow:none;
}

.abp-cta .abp-btn--ghost{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.26);
}

/* MOBILE */
@media (max-width: 1023px){
  .abp-hero__grid,
  .abp-grid2,
  .abp-certband,
  .abp-band{
    grid-template-columns:1fr;
  }

  .abp-facts__grid,
  .abp-grid4{
    grid-template-columns:1fr 1fr;
  }

  .abp-journey-row{
    grid-template-columns:1fr;
  }

  .abp-year{
    position:static;
    width:max-content;
  }
}

@media (max-width: 767px){
  .abp-hero__inner{
    padding:64px 0 36px;
  }

  .abp-titlebox{
    padding:20px 18px 18px;
  }

  .abp-titlebox h1{
    font-size:clamp(34px, 10vw, 52px);
  }

  .abp-hero p{
    font-size:16px;
    line-height:1.8;
  }

  .abp-actions,
  .abp-cta__actions{
    flex-direction:column;
  }

  .abp-btn,
  .abp-btn--ghost,
  .abp-btn--red{
    width:100%;
  }

  .abp-profile-grid{
    grid-template-columns:1fr;
  }

  .abp-facts__grid,
  .abp-grid4{
    grid-template-columns:1fr;
  }

  .abp-panel,
  .abp-media__body,
  .abp-profile__body,
  .abp-card,
  .abp-certbox,
  .abp-trustbox,
  .abp-fact{
    padding:18px 16px;
  }

  .abp-value{
    grid-template-columns:1fr;
  }

  .abp-journey-media{
    grid-template-columns:1fr;
  }

  .abp-journey-media img,
  .abp-journey-media video{
    height:200px;
  }

  .abp-band__media{
    min-height:220px;
  }

  .abp-band__body,
  .abp-cta{
    padding:22px 16px;
  }
}

/* =========================================================
   EXPORT PAGE V2 – PROFESSIONAL GLOBAL EXPORT UI
   White + Indigo + Red
   ========================================================= */

:root{
  --exp2-white:#ffffff;
  --exp2-ivory:#f6f4ef;
  --exp2-indigo:#281D78;
  --exp2-indigo-2:#3C31A0;
  --exp2-red:#FF1020;
  --exp2-red-2:#D90B19;
  --exp2-text:#171c27;
  --exp2-muted:#667085;
  --exp2-line:rgba(22,28,42,.10);
  --exp2-shadow:0 22px 54px rgba(8,10,16,.12);
  --exp2-radius:28px;
  --exp2-dark:#0b1020;
}

[data-exp2-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s ease;
}
[data-exp2-reveal].is-in{
  opacity:1;
  transform:none;
}

.exp2-page{
  background:
    radial-gradient(circle at 92% 8%, rgba(255,16,32,.05), transparent 18%),
    radial-gradient(circle at 10% 18%, rgba(40,29,120,.08), transparent 22%),
    linear-gradient(180deg, var(--exp2-white) 0%, var(--exp2-ivory) 100%);
  color:var(--exp2-text);
}

/* HERO */
.exp2-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, #ffffff 0%, #f7f5ef 58%, #f0edff 100%);
  border-bottom:1px solid var(--exp2-line);
}

.exp2-hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:100%;
  background:linear-gradient(180deg, var(--exp2-indigo), var(--exp2-red));
}

.exp2-hero::after{
  content:"";
  position:absolute;
  right:-110px;
  top:-110px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,29,120,.08) 0%, rgba(40,29,120,0) 70%);
  pointer-events:none;
}

.exp2-hero__inner{
  padding:88px 0 42px;
}

.exp2-hero__grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:30px;
  align-items:start;
}

.exp2-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(40,29,120,.07);
  border:1px solid rgba(40,29,120,.10);
  color:var(--exp2-indigo);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.exp2-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--exp2-red);
  box-shadow:0 0 0 4px rgba(255,16,32,.10);
}

.exp2-titlebox{
  position:relative;
  margin-top:18px;
  padding:26px 28px 22px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
  overflow:hidden;
}

.exp2-titlebox::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:180px;
  height:6px;
  background:linear-gradient(90deg, var(--exp2-indigo), var(--exp2-red));
  border-top-left-radius:30px;
}

.exp2-titlebox::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:120px;
  height:6px;
  background:linear-gradient(90deg, var(--exp2-red), var(--exp2-indigo));
  border-bottom-right-radius:30px;
}

.exp2-titlebox h1{
  margin:0 0 14px;
  max-width:900px;
  color:var(--exp2-text);
  font-size:clamp(40px, 6vw, 74px);
  line-height:.98;
  letter-spacing:-.05em;
}

.exp2-titlebox p{
  margin:0;
  max-width:760px;
  color:var(--exp2-muted);
  font-size:18px;
  line-height:1.9;
}

.exp2-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.exp2-btn,
.exp2-btn--ghost,
.exp2-btn--red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.exp2-btn:hover,
.exp2-btn--ghost:hover,
.exp2-btn--red:hover{
  transform:translateY(-2px);
}

.exp2-btn{
  background:var(--exp2-indigo);
  color:#fff;
  box-shadow:0 16px 30px rgba(40,29,120,.18);
}
.exp2-btn:hover{ background:var(--exp2-indigo-2); }

.exp2-btn--ghost{
  background:#fff;
  color:var(--exp2-indigo);
  border:1px solid rgba(40,29,120,.18);
}
.exp2-btn--ghost:hover{
  border-color:var(--exp2-red);
  color:var(--exp2-red);
}

.exp2-btn--red{
  background:var(--exp2-red);
  color:#fff;
  box-shadow:0 16px 30px rgba(255,16,32,.16);
}
.exp2-btn--red:hover{ background:var(--exp2-red-2); }

/* MAP CARD */
.exp2-mapcard{
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(135deg, #0c1120 0%, #12193a 58%, #221b66 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 28px 60px rgba(8,10,16,.18);
  color:#fff;
}

.exp2-mapcard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.exp2-mapcard__head h3{
  margin:0;
  font-size:20px;
  color:#fff;
}

.exp2-mapcard__head span{
  color:rgba(255,255,255,.72);
  font-size:14px;
}

.exp2-mapcard__body{
  padding:18px 18px 14px;
}

.exp2-map{
  position:relative;
  min-height:380px;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}

.exp2-map__base{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.exp2-map__base img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.82;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.exp2-map__routes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

.exp2-map__routes path{
  fill:none;
  stroke-linecap:round;
  stroke-width:3.2;
}

.exp2-route-red{
  stroke:var(--exp2-red);
  opacity:.95;
  stroke-dasharray:10 9;
}

.exp2-route-white{
  stroke:#ffffff;
  opacity:.82;
  stroke-dasharray:10 9;
}

.exp2-node{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.28));
}

.exp2-node--india{
  fill:var(--exp2-red);
}

.exp2-node--market{
  fill:#ffffff;
}

.exp2-dot-red{
  fill:var(--exp2-red);
}

.exp2-dot-white{
  fill:#ffffff;
}

.exp2-map-chip{
  position:absolute;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(9,12,20,.86);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  backdrop-filter:blur(6px);
  white-space:nowrap;
}

.exp2-map-chip--india{ left:58%; top:54%; border-color:rgba(255,16,32,.40); }
.exp2-map-chip--europe{ left:10%; top:45%; }                        /*  changed to America in export.php   */
.exp2-map-chip--middleeast{ left:40%; top:33%; }                                /*  changed to EUROPE in export.php   */
.exp2-map-chip--africa{ left:45%; top:56%; }
.exp2-map-chip--asia{ left:60%; top:33%; }
.exp2-map-chip--oceania{ left:79%; top:66%; }                            /*  changed to Australia in export.php   */

.exp2-map-note{
  margin-top:12px;
  color:rgba(255,255,255,.76);
  line-height:1.8;
  font-size:14px;
}

/* FACT STRIP */
.exp2-facts{
  padding:24px 0 0;
}

.exp2-facts__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.exp2-fact{
  padding:22px 20px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
}

.exp2-fact strong{
  display:block;
  color:var(--exp2-indigo);
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-.04em;
}

.exp2-fact span{
  color:var(--exp2-muted);
  line-height:1.75;
}

/* COMMON */
.exp2-section{
  padding:72px 0;
}

.exp2-head{
  margin-bottom:24px;
}

.exp2-head h2{
  margin:0 0 10px;
  color:var(--exp2-text);
  font-size:clamp(30px, 3.8vw, 52px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.exp2-head p{
  margin:0;
  max-width:820px;
  color:var(--exp2-muted);
  font-size:16px;
  line-height:1.9;
}

/* STRUCTURED INTRO */
.exp2-grid2{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:24px;
  align-items:stretch;
}

.exp2-panel{
  position:relative;
  padding:30px;
  border-radius:var(--exp2-radius);
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
}

.exp2-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:5px;
  background:linear-gradient(90deg, var(--exp2-indigo), var(--exp2-red));
  border-top-left-radius:var(--exp2-radius);
}

.exp2-panel p{
  margin:0;
  color:var(--exp2-muted);
  font-size:17px;
  line-height:1.95;
}

.exp2-value-list{
  display:grid;
  gap:14px;
}

.exp2-value{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
}

.exp2-value strong{
  color:var(--exp2-indigo);
  font-size:24px;
  line-height:1;
}

.exp2-value p{
  margin:0;
  color:var(--exp2-muted);
  line-height:1.8;
  font-size:15px;
}

/* MARKET CARDS */
.exp2-grid4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.exp2-card{
  padding:22px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
  transition:transform .22s ease;
}

.exp2-card:hover{
  transform:translateY(-4px);
}

.exp2-card i{
  color:var(--exp2-red);
  font-size:22px;
  margin-bottom:14px;
}

.exp2-card h3{
  margin:0 0 8px;
  color:var(--exp2-text);
  font-size:20px;
}

.exp2-card p{
  margin:0;
  color:var(--exp2-muted);
  line-height:1.82;
}

/* EXPORT STEPS */
.exp2-steps{
  display:grid;
  gap:16px;
}

.exp2-step{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:18px;
  padding:22px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
}

.exp2-step__num{
  color:var(--exp2-red);
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
}

.exp2-step h3{
  margin:0 0 8px;
  color:var(--exp2-text);
  font-size:22px;
}

.exp2-step p{
  margin:0;
  color:var(--exp2-muted);
  line-height:1.85;
}

/* DOC / TRUST */
.exp2-docgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.exp2-docbox,
.exp2-trustbox{
  padding:26px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--exp2-line);
  box-shadow:var(--exp2-shadow);
}

.exp2-doclist{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.exp2-docitem{
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--exp2-line);
}

.exp2-docitem strong{
  display:block;
  color:var(--exp2-text);
  margin-bottom:4px;
}

.exp2-docitem p{
  margin:0;
  color:var(--exp2-muted);
  line-height:1.75;
}

/* CTA */
.exp2-cta{
  margin-top:42px;
  padding:40px 22px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--exp2-indigo) 0%, var(--exp2-indigo-2) 62%, var(--exp2-red) 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 24px 50px rgba(40,29,120,.20);
}

.exp2-cta h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.03;
  letter-spacing:-.04em;
}

.exp2-cta p{
  margin:0 auto;
  max-width:760px;
  color:rgba(255,255,255,.88);
  line-height:1.9;
}

.exp2-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

.exp2-cta .exp2-btn{
  background:#fff;
  color:var(--exp2-indigo);
  box-shadow:none;
}

.exp2-cta .exp2-btn--ghost{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.26);
}

/* MOBILE */
@media (max-width: 1023px){
  .exp2-hero__grid,
  .exp2-grid2,
  .exp2-docgrid{
    grid-template-columns:1fr;
  }

  .exp2-facts__grid,
  .exp2-grid4{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 767px){
  .exp2-hero__inner{
    padding:64px 0 36px;
  }

  .exp2-titlebox{
    padding:20px 18px 18px;
  }

  .exp2-titlebox h1{
    font-size:clamp(34px, 10vw, 52px);
  }

  .exp2-titlebox p{
    font-size:16px;
    line-height:1.8;
  }

  .exp2-actions,
  .exp2-cta__actions{
    flex-direction:column;
  }

  .exp2-btn,
  .exp2-btn--ghost,
  .exp2-btn--red{
    width:100%;
  }

  .exp2-facts__grid,
  .exp2-grid4{
    grid-template-columns:1fr;
  }

  .exp2-map,
  .exp2-map__routes{
    min-height:260px;
    height:260px;
  }

  .exp2-map-chip{
    font-size:10px;
    padding:6px 9px;
  }

  .exp2-panel,
  .exp2-docbox,
  .exp2-trustbox,
  .exp2-card,
  .exp2-fact{
    padding:18px 16px;
  }

  .exp2-value{
    grid-template-columns:1fr;
  }

  .exp2-step{
    grid-template-columns:1fr;
    gap:10px;
    padding:18px 16px;
  }

  .exp2-cta{
    padding:22px 16px;
  }
}

/* =========================================================
   CONTACT PAGE UI
   ========================================================= */

.bf-contact-page {
  background:
    radial-gradient(circle at 92% 8%, rgba(255,16,32,.05), transparent 18%),
    radial-gradient(circle at 8% 20%, rgba(40,29,120,.08), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f6f4ef 100%);
  color: #171c27;
}

[data-bf-contact-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s ease;
}

[data-bf-contact-reveal].is-in {
  opacity: 1;
  transform: none;
}

.bf-contact-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.bf-contact-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7f5ef 58%, #f0edff 100%);
  border-bottom: 1px solid rgba(22,28,42,.10);
}

.bf-contact-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(180deg, #281D78, #FF1020);
}

.bf-contact-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40,29,120,.08) 0%, rgba(40,29,120,0) 70%);
  pointer-events: none;
}

.bf-contact-hero__gridline {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(40,29,120,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,29,120,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.10));
  pointer-events: none;
}

.bf-contact-hero__inner {
  position: relative;
  z-index: 2;
  padding: 86px 0 42px;
}

.bf-contact-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 28px;
  align-items: start;
}

.bf-contact-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(40,29,120,.07);
  border: 1px solid rgba(40,29,120,.10);
  color: #281D78;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bf-contact-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF1020;
  box-shadow: 0 0 0 4px rgba(255,16,32,.10);
}

.bf-contact-titlebox {
  position: relative;
  margin-top: 18px;
  padding: 26px 28px 22px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(22,28,42,.10);
  box-shadow: 0 22px 54px rgba(8,10,16,.12);
  overflow: hidden;
}

.bf-contact-titlebox::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 6px;
  background: linear-gradient(90deg, #281D78, #FF1020);
  border-top-left-radius: 30px;
}

.bf-contact-titlebox::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 6px;
  background: linear-gradient(90deg, #FF1020, #281D78);
  border-bottom-right-radius: 30px;
}

.bf-contact-titlebox h1 {
  margin: 0 0 14px;
  color: #171c27;
  font-size: clamp(40px, 6vw, 72px);
  line-height: .98;
  letter-spacing: -.05em;
}

.bf-contact-titlebox p {
  margin: 0;
  max-width: 760px;
  color: #667085;
  font-size: 18px;
  line-height: 1.9;
}

.bf-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.bf-contact-btn,
.bf-contact-btn--ghost,
.bf-contact-btn--red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.bf-contact-btn:hover,
.bf-contact-btn--ghost:hover,
.bf-contact-btn--red:hover {
  transform: translateY(-2px);
}

.bf-contact-btn {
  background: #281D78;
  color: #fff;
  box-shadow: 0 16px 30px rgba(40,29,120,.18);
}

.bf-contact-btn:hover { background: #3C31A0; }

.bf-contact-btn--ghost {
  background: #fff;
  color: #281D78;
  border: 1px solid rgba(40,29,120,.18);
}

.bf-contact-btn--ghost:hover {
  border-color: #FF1020;
  color: #FF1020;
}

.bf-contact-btn--red {
  background: #FF1020;
  color: #fff;
  box-shadow: 0 16px 30px rgba(255,16,32,.16);
}

.bf-contact-btn--red:hover { background: #D90B19; }

.bf-contact-desk {
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(135deg, #0c1120 0%, #12193a 58%, #221b66 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 28px 60px rgba(8,10,16,.18);
  color: #fff;
}

.bf-contact-desk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.bf-contact-desk__head h3 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}

.bf-contact-desk__head span {
  color: rgba(255,255,255,.72);
  font-size: 14px;
}

.bf-contact-desk__body { padding: 20px; }

.bf-contact-desk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bf-contact-mini {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.bf-contact-mini strong {
  display: block;
  color: #fff;
  font-size: 13px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bf-contact-mini span {
  display: block;
  color: rgba(255,255,255,.80);
  font-weight: 700;
  line-height: 1.55;
}

.bf-contact-section { padding: 72px 0; }

.bf-contact-support-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 24px;
  align-items: stretch;
}

.bf-contact-panel,
.bf-contact-list-panel,
.bf-contact-formbox,
.bf-contact-sidebox {
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(22,28,42,.10);
  box-shadow: 0 22px 54px rgba(8,10,16,.12);
  overflow: hidden;
}

.bf-contact-panel__head,
.bf-contact-boxhead,
.bf-contact-list-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(22,28,42,.10);
  background: linear-gradient(90deg, rgba(40,29,120,.05), rgba(255,16,32,.04));
}

.bf-contact-panel__head h2,
.bf-contact-list-panel__head h2,
.bf-contact-boxhead h3 {
  margin: 0;
  color: #171c27;
  font-size: 20px;
}

.bf-contact-panel__body,
.bf-contact-list-panel__body,
.bf-contact-boxbody { padding: 22px; }

.bf-contact-panel__body p,
.bf-contact-list-panel__body p {
  margin: 0 0 14px;
  color: #667085;
  line-height: 1.9;
}

.bf-contact-panel__body p:last-child,
.bf-contact-list-panel__body p:last-child { margin-bottom: 0; }

.bf-contact-list {
  margin: 0;
  padding-left: 18px;
  color: #667085;
  line-height: 1.9;
}

.bf-contact-list li { margin-bottom: 6px; }
.bf-contact-list li:last-child { margin-bottom: 0; }

.bf-contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 560px;
}

.bf-contact-media {
  position: relative;
  background: #0b4bff;
}

.bf-contact-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}

.bf-contact-media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.35);
  pointer-events: none;
}

.bf-contact-form-area {
  padding: 26px 26px 22px;
}

.bf-contact-title {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.bf-contact-subtitle {
  margin: 0 0 18px;
  color: #475569;
  font-size: 0.98rem;
}

.bf-contact-subtitle a {
  color: #0b4bff;
  text-decoration: none;
  font-weight: 600;
}

.bf-contact-subtitle a:hover {
  text-decoration: underline;
}

.bf-contact-form {
  display: grid;
  gap: 12px;
}

.bf-contact-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f172a;
  margin: 10px 0 6px;
}

.bf-contact-input,
.bf-contact-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 12px 12px;
  font-size: 0.95rem;
  outline: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.bf-contact-input:focus,
.bf-contact-textarea:focus {
  border-color: rgba(11, 75, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(11, 75, 255, 0.10);
}

.bf-contact-textarea {
  min-height: 120px;
  resize: vertical;
}

.bf-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bf-contact-row-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.bf-contact-submit {
  margin-top: 14px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 13px 14px;
  font-weight: 700;
  font-size: 0.98rem;
  color: #fff;
  background: linear-gradient(90deg, #0b4bff, #1d8bff);
  box-shadow: 0 14px 30px rgba(11, 75, 255, 0.22);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.bf-contact-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 36px rgba(11, 75, 255, 0.26);
}

.iti {
  width: 100%;
}

.iti input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 12px 12px 12px 52px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.iti input:focus {
  border-color: rgba(11, 75, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(11, 75, 255, 0.10);
}

.bf-contact-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bf-contact-turnstile {
  margin: 8px 0 4px;
}

@media (max-width: 1023px) {
  .bf-contact-hero__grid,
  .bf-contact-support-grid,
  .bf-contact-grid {
    grid-template-columns: 1fr;
  }

  .bf-contact-desk-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .bf-contact-hero__inner { padding: 64px 0 36px; }

  .bf-contact-titlebox { padding: 20px 18px 18px; }

  .bf-contact-titlebox h1 { font-size: clamp(34px, 10vw, 52px); }

  .bf-contact-titlebox p { font-size: 16px; line-height: 1.8; }

  .bf-contact-actions { flex-direction: column; }

  .bf-contact-btn,
  .bf-contact-btn--ghost,
  .bf-contact-btn--red { width: 100%; }

  .bf-contact-row,
  .bf-contact-desk-grid { grid-template-columns: 1fr; }

  .bf-contact-form-area,
  .bf-contact-panel__body,
  .bf-contact-list-panel__body,
  .bf-contact-boxbody { padding: 18px 16px; }

  .bf-contact-media {
    min-height: 260px;
  }
}

/* =========================================================
   CHILD PAGES – FRESH UI
   ========================================================= */

:root{
  --rpf-white:#ffffff;
  --rpf-off:#f7f5ef;
  --rpf-indigo:#281D78;
  --rpf-indigo-2:#3C31A0;
  --rpf-red:#FF1020;
  --rpf-red-2:#D90B19;
  --rpf-text:#171c27;
  --rpf-muted:#667085;
  --rpf-line:rgba(22,28,42,.10);
  --rpf-shadow:0 22px 54px rgba(8,10,16,.12);
  --rpf-soft:#f8f7ff;
  --rpf-card:#fbfbfd;
}

[data-rpf-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-rpf-reveal].is-in{
  opacity:1;
  transform:none;
}

.rpf-page{
  background:
    radial-gradient(circle at 92% 8%, rgba(255,16,32,.05), transparent 18%),
    radial-gradient(circle at 8% 18%, rgba(40,29,120,.08), transparent 22%),
    linear-gradient(180deg, var(--rpf-white) 0%, var(--rpf-off) 100%);
  color:var(--rpf-text);
}

/* HERO */
.rpf-hero{
  position:relative;
  overflow:hidden;
  padding:30px 0 18px;
}

.rpf-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(40,29,120,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,29,120,.04) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.14));
  pointer-events:none;
}

.rpf-hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:22px;
  align-items:stretch;
}

.rpf-hero__main{
  position:relative;
  padding:28px;
  border-radius:34px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
  overflow:hidden;
}

.rpf-hero__main::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:240px;
  height:7px;
  background:linear-gradient(90deg, var(--rpf-indigo), var(--rpf-red));
  border-top-left-radius:34px;
}

.rpf-hero__main::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:140px;
  height:7px;
  background:linear-gradient(90deg, var(--rpf-red), var(--rpf-indigo));
  border-bottom-right-radius:34px;
}

.rpf-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.rpf-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:var(--rpf-muted);
  font-size:13px;
  font-weight:700;
}

.rpf-breadcrumb strong{
  color:var(--rpf-indigo);
}

.rpf-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(40,29,120,.07);
  border:1px solid rgba(40,29,120,.10);
  color:var(--rpf-indigo);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.rpf-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rpf-red);
  box-shadow:0 0 0 4px rgba(255,16,32,.10);
}

.rpf-title{
  margin:0 0 12px;
  font-size:clamp(38px, 5vw, 68px);
  line-height:.96;
  letter-spacing:-.05em;
  color:var(--rpf-text);
}

.rpf-desc{
  margin:0;
  max-width:760px;
  color:var(--rpf-muted);
  font-size:18px;
  line-height:1.9;
}

.rpf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.rpf-btn,
.rpf-btn--ghost,
.rpf-btn--red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.rpf-btn:hover,
.rpf-btn--ghost:hover,
.rpf-btn--red:hover{
  transform:translateY(-2px);
}

.rpf-btn{
  background:var(--rpf-indigo);
  color:#fff;
  box-shadow:0 16px 30px rgba(40,29,120,.18);
}
.rpf-btn:hover{ background:var(--rpf-indigo-2); }

.rpf-btn--ghost{
  background:#fff;
  color:var(--rpf-indigo);
  border:1px solid rgba(40,29,120,.18);
}
.rpf-btn--ghost:hover{
  border-color:var(--rpf-red);
  color:var(--rpf-red);
}

.rpf-btn--red{
  background:var(--rpf-red);
  color:#fff;
  box-shadow:0 16px 30px rgba(255,16,32,.16);
}
.rpf-btn--red:hover{ background:var(--rpf-red-2); }

.rpf-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.rpf-meta-card{
  padding:16px;
  border-radius:20px;
  background:var(--rpf-soft);
  border:1px solid rgba(40,29,120,.10);
}

.rpf-meta-card strong{
  display:block;
  margin-bottom:4px;
  color:var(--rpf-indigo);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.rpf-meta-card span{
  display:block;
  color:var(--rpf-text);
  font-weight:700;
  line-height:1.5;
}

.rpf-hero__side{
  display:grid;
  gap:16px;
}

.rpf-showcase{
  overflow:hidden;
  border-radius:34px;
  background:linear-gradient(135deg, #0d1222 0%, #141d42 58%, #281D78 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 28px 60px rgba(8,10,16,.18);
  color:#fff;
}

.rpf-showcase__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.rpf-showcase__head h3{
  margin:0;
  font-size:20px;
  color:#fff;
}

.rpf-showcase__head span{
  color:rgba(255,255,255,.76);
  font-size:14px;
}

.rpf-showcase__media{
  position:relative;
  min-height:280px;
  overflow:hidden;
}

.rpf-showcase__media img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
  opacity:.92;
}

.rpf-showcase__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,20,36,.05), rgba(15,20,36,.58));
}

.rpf-floating{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  display:grid;
  gap:10px;
}

.rpf-floating-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rpf-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.rpf-showcase__body{
  padding:18px;
  display:grid;
  gap:10px;
}

.rpf-search-demo{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-weight:600;
}

.rpf-search-demo i{
  color:#fff;
}

.rpf-shortlist{
  display:grid;
  gap:10px;
}

.rpf-shortlist-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
}

.rpf-shortlist-item strong{
  color:#fff;
  font-size:14px;
}

.rpf-shortlist-item span{
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.rpf-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.rpf-mini{
  padding:15px 16px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
}

.rpf-mini strong{
  display:block;
  margin-bottom:4px;
  color:var(--rpf-indigo);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.rpf-mini span{
  display:block;
  color:var(--rpf-text);
  font-weight:700;
  line-height:1.5;
}

/* sticky search */
.rpf-toolbar-wrap{
  position:static;
  top:10px;
  z-index:20;
  padding:10px 0 0;
}

.rpf-toolbar{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:center;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
  backdrop-filter:blur(10px);
}

.rpf-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:0 14px;
  border-radius:18px;
  border:1px solid var(--rpf-line);
  background:#fff;
}

.rpf-search input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:var(--rpf-text);
  font-size:16px;
  min-width:0;
}

.rpf-search-help{
  color:var(--rpf-muted);
  font-size:14px;
  line-height:1.5;
  white-space:nowrap;
}

.rpf-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 16px;
  border-radius:18px;
  background:var(--rpf-soft);
  border:1px solid rgba(40,29,120,.10);
  color:var(--rpf-indigo);
  font-weight:800;
  white-space:nowrap;
}

.rpf-clear{
  min-height:56px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid rgba(40,29,120,.14);
  background:#fff;
  color:var(--rpf-indigo);
  font-weight:700;
  cursor:pointer;
}

.rpf-clear:hover{
  border-color:var(--rpf-red);
  color:var(--rpf-red);
}

/* sections */
.rpf-section{
  padding:62px 0;
}

.rpf-head{
  margin-bottom:24px;
}

.rpf-head h2{
  margin:0 0 10px;
  color:var(--rpf-text);
  font-size:clamp(28px, 3.6vw, 46px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.rpf-head p{
  margin:0;
  max-width:820px;
  color:var(--rpf-muted);
  font-size:16px;
  line-height:1.9;
}

.rpf-grid2{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:24px;
  align-items:stretch;
}

.rpf-panel{
  position:relative;
  padding:28px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
}

.rpf-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:6px;
  background:linear-gradient(90deg, var(--rpf-indigo), var(--rpf-red));
  border-top-left-radius:30px;
}

.rpf-panel p{
  margin:0;
  color:var(--rpf-muted);
  font-size:17px;
  line-height:1.95;
}

.rpf-stack{
  display:grid;
  gap:14px;
}

.rpf-stack-card{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:14px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
}

.rpf-stack-card strong{
  color:var(--rpf-indigo);
  font-size:24px;
  line-height:1;
}

.rpf-stack-card p{
  margin:0;
  color:var(--rpf-muted);
  line-height:1.8;
  font-size:15px;
}

/* product list */
.rpf-products{
  display:grid;
  gap:18px;
}

.rpf-product{
  border-radius:28px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
  overflow:hidden;
}

.rpf-product__top{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:0;
}

.rpf-gallery{
  position:relative;
  min-height:320px;
  background:var(--rpf-card);
  overflow:hidden;
}

.rpf-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .45s ease;
}

.rpf-slide.is-active{
  opacity:1;
}

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

.rpf-gallery-nav{
  position:absolute;
  left:14px;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}

.rpf-gallery-btn{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(15,20,36,.72);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  pointer-events:auto;
}

.rpf-gallery-btn:hover{
  background:rgba(40,29,120,.92);
}

.rpf-gallery-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.rpf-gallery-dot{
  width:9px;
  height:9px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}

.rpf-gallery-dot.is-active{
  background:#fff;
}

.rpf-product__main{
  padding:24px 22px 20px;
  position:relative;
}

.rpf-product__main::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:180px;
  height:6px;
  background:linear-gradient(90deg, var(--rpf-indigo), var(--rpf-red));
}

.rpf-product__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:var(--rpf-soft);
  border:1px solid rgba(40,29,120,.10);
  color:var(--rpf-indigo);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.rpf-product__name{
  margin:14px 0 10px;
  font-size:24px;
  line-height:1.2;
}

.rpf-product__name a{
  color:var(--rpf-text);
  text-decoration:none;
}

.rpf-product__name a:hover{
  color:var(--rpf-red);
}

.rpf-product__desc{
  margin:0 0 18px;
  color:var(--rpf-muted);
  line-height:1.82;
}

.rpf-spec-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.rpf-spec{
  padding:12px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--rpf-line);
}

.rpf-spec strong{
  display:block;
  margin-bottom:4px;
  color:var(--rpf-indigo);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.rpf-spec span{
  display:block;
  color:var(--rpf-text);
  font-weight:700;
  line-height:1.5;
}

.rpf-product__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 22px 20px;
  border-top:1px solid var(--rpf-line);
  background:#fff;
}

.rpf-product__note{
  color:var(--rpf-muted);
  font-size:14px;
  line-height:1.7;
}

.rpf-product__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rpf-empty{
  display:none;
  padding:26px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
  color:var(--rpf-muted);
}

/* bottom band */
.rpf-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  border:1px solid var(--rpf-line);
  box-shadow:var(--rpf-shadow);
}

.rpf-band__media{
  min-height:360px;
  position:relative;
  overflow:hidden;
}

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

.rpf-band__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(40,29,120,.20), rgba(255,16,32,.10));
}

.rpf-band__body{
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rpf-band__body p{
  margin:0;
  color:var(--rpf-muted);
  line-height:1.9;
}

.rpf-checks{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.rpf-checks li{
  position:relative;
  padding-left:28px;
  color:var(--rpf-muted);
  line-height:1.8;
}

.rpf-checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.48em;
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--rpf-indigo), var(--rpf-red));
}

@media (max-width:1100px){
  .rpf-product__top{
    grid-template-columns:300px 1fr;
  }

  .rpf-spec-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:1023px){
  .rpf-hero__grid,
  .rpf-grid2,
  .rpf-band,
  .rpf-product__top{
    grid-template-columns:1fr;
  }

  .rpf-toolbar{
    grid-template-columns:1fr;
  }

  .rpf-meta,
  .rpf-mini-grid{
    grid-template-columns:1fr 1fr;
  }

  .rpf-gallery{
    min-height:260px;
  }
}

@media (max-width:767px){
  .rpf-hero{
    padding:24px 0 18px;
  }

  .rpf-hero__main{
    padding:20px 18px 18px;
  }

  .rpf-title{
    font-size:clamp(34px, 10vw, 52px);
  }

  .rpf-desc{
    font-size:16px;
    line-height:1.8;
  }

  .rpf-actions,
  .rpf-product__bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .rpf-btn,
  .rpf-btn--ghost,
  .rpf-btn--red{
    width:100%;
  }

  .rpf-meta,
  .rpf-mini-grid{
    grid-template-columns:1fr;
  }

  .rpf-panel,
  .rpf-band__body,
  .rpf-product__main{
    padding:18px 16px;
  }

  .rpf-stack-card{
    grid-template-columns:1fr;
  }

  .rpf-band__media{
    min-height:220px;
  }

  .rpf-product__bottom{
    padding:16px;
  }
}



/* =========================
   Product child pages: shared ux layout
   ========================= */
.ux-page{
    --ux-border: rgba(0,0,0,.08);
    --ux-soft: #f7f8fc;
    --ux-text: #5f6673;
    --ux-dark: #1f2937;
    --ux-brand: #24306e;
}
.ux-hero{
    padding:24px 0 10px;
}
.ux-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:24px;
    align-items:start;
}
.ux-box{
    background:#fff;
    border:1px solid var(--ux-border);
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 28px rgba(0,0,0,.04);
}
.ux-intro{
    max-width:820px;
}
.ux-intro p{
    margin:0;
    color:var(--ux-text);
    line-height:1.8;
}
.ux-short-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.ux-short-card{
    background:var(--ux-soft);
    border:1px solid rgba(36,48,110,.08);
    border-radius:16px;
    padding:14px;
}
.ux-short-card strong{
    display:block;
    color:var(--ux-dark);
    font-size:.95rem;
}
.ux-short-card span{
    display:block;
    color:var(--ux-text);
    margin-top:4px;
    font-size:.9rem;
}
.ux-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.ux-chip{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:7px 13px;
    border-radius:999px;
    border:1px solid var(--ux-border);
    background:#fff;
    color:#374151;
    font-size:.9rem;
}
.ux-common-specs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.ux-common-item{
    background:#fff;
    border:1px solid var(--ux-border);
    border-radius:18px;
    padding:16px;
}
.ux-common-item strong{
    display:block;
    color:var(--ux-dark);
    margin-bottom:6px;
}
.ux-common-item span{
    color:var(--ux-text);
    font-size:.95rem;
    line-height:1.5;
}
.ux-sticky-bar{
    position:sticky;
    top:82px;
    z-index:10;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border:1px solid var(--ux-border);
    border-radius:20px;
    padding:14px;
    box-shadow:0 12px 26px rgba(0,0,0,.06);
}
.ux-sticky-top{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}
.ux-search-wrap{
    flex:1 1 420px;
}
.ux-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}
.ux-tab{
    border:1px solid var(--ux-border);
    background:#fff;
    color:#111827;
    border-radius:999px;
    padding:10px 15px;
    font:inherit;
    cursor:pointer;
    transition:.2s ease;
}
.ux-tab:hover,
.ux-tab.is-active{
    background:var(--ux-brand);
    color:#fff;
    border-color:var(--ux-brand);
}
.ux-group-block{
    margin-top:28px;
}
.ux-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px;
}
.ux-card{
    background:#fff;
    border:1px solid var(--ux-border);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(0,0,0,.04);
    display:flex;
    flex-direction:column;
}
.ux-thumb{
    aspect-ratio:4 / 3;
    background:linear-gradient(180deg,#f8f8f8 0%,#f1f1f1 100%);
    border-bottom:1px solid var(--ux-border);
    position:relative;
    overflow:hidden;
}
.ux-slide{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}
.ux-slide.is-active{
    opacity:1;
    pointer-events:auto;
}
.ux-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.ux-thumb-note{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px;
    color:#6b7280;
    font-size:.92rem;
    line-height:1.5;
}
.ux-gallery-nav{
    position:absolute;
    left:10px;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    pointer-events:none;
}
.ux-gallery-btn{
    pointer-events:auto;
    width:34px;
    height:34px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    color:#111827;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.ux-gallery-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:12px;
    display:flex;
    justify-content:center;
    gap:6px;
}
.ux-gallery-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    border:0;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}
.ux-gallery-dot.is-active{
    background:#fff;
}
.ux-card-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    height:100%;
}
.ux-tag{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:#edf2ff;
    color:var(--ux-brand);
    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
    align-self:flex-start;
}
.ux-name{
    margin:0;
    font-size:1.02rem;
    line-height:1.45;
}
.ux-name a{
    color:#111827;
    text-decoration:none;
}
.ux-name a:hover{
    color:var(--ux-brand);
}
.ux-desc{
    margin:0;
    color:var(--ux-text);
    line-height:1.7;
    font-size:.95rem;
}
.ux-details{
    border-top:1px dashed rgba(0,0,0,.08);
    padding-top:10px;
}
.ux-details summary{
    cursor:pointer;
    color:var(--ux-brand);
    font-weight:600;
}
.ux-spec-mini{
    display:grid;
    gap:8px;
    margin-top:10px;
}
.ux-spec-mini div{
    font-size:.92rem;
    line-height:1.5;
    color:var(--ux-text);
}
.ux-spec-mini strong{
    color:#111827;
}
.ux-card-actions{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.ux-small-note{
    color:#6b7280;
    font-size:.86rem;
}
.ux-empty{
    display:none;
}
@media (max-width: 980px){
    .ux-hero-grid{
        grid-template-columns:1fr;
    }
    .ux-common-specs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 640px){
    .ux-short-grid,
    .ux-common-specs{
        grid-template-columns:1fr;
    }
}


/* =========================
   Small utility helpers
   ========================= */
.ux-pt-8{ padding-top:8px; }
.ux-pt-10{ padding-top:10px; }
.ux-pt-18{ padding-top:18px; }
.ux-mt-14{ margin-top:14px; }
.ux-mt-18{ margin-top:18px; }
.ux-mb-12{ margin-bottom:12px; }
.ux-title-sm{ font-size:1.1rem; }
.ux-media-clip{
    border-radius:18px;
    overflow:hidden;
}

/* =========================================================
   MOBILE HERO COMPRESSION
   Non-product pages only
   index / research / about / export / contact
   ========================================================= */
@media (max-width: 767px){

  /* remove heavy decorative elements on mobile */
  .wri-hero::after,
  .abp-hero::after,
  .abp-hero__gridline,
  .bf-contact-hero__gridline,
  .exp2-hero::after{
    display:none;
  }

  /* tighten hero spacing */
  .wri-hero__inner,
  .abp-hero__inner,
  .exp2-hero__inner,
  .bf-contact-hero__inner{
    padding:42px 0 20px !important;
  }

  .wri-hero__grid,
  .abp-hero__grid,
  .exp2-hero__grid,
  .bf-contact-hero__grid{
    gap:14px !important;
    align-items:start;
  }

  /* smaller kickers */
  .wri-kicker,
  .abp-kicker,
  .exp2-kicker,
  .bf-contact-kicker{
    padding:7px 12px;
    gap:8px;
    font-size:11px;
    letter-spacing:.08em;
  }

  .wri-kicker::before,
  .abp-kicker::before,
  .exp2-kicker::before,
  .bf-contact-kicker::before{
    width:7px;
    height:7px;
    box-shadow:none;
  }

  /* compact hero headings */
  .wri-hero h1,
  .abp-titlebox h1,
  .exp2-titlebox h1,
  .bf-contact-titlebox h1{
    margin:10px 0 10px !important;
    font-size:clamp(28px, 7.8vw, 38px) !important;
    line-height:1.06 !important;
    letter-spacing:-.03em !important;
  }

  /* compact hero paragraphs */
  .wri-copy > p,
  .abp-titlebox p,
  .exp2-titlebox p,
  .bf-contact-titlebox p{
    margin:0 0 12px !important;
    font-size:14px !important;
    line-height:1.65 !important;
  }

  /* show only first supporting paragraph in hero on mobile */
  .wri-copy > p + p,
  .abp-titlebox p + p,
  .exp2-titlebox p + p{
    display:none;
  }

  /* tighten title cards */
  .abp-titlebox,
  .exp2-titlebox,
  .bf-contact-titlebox{
    margin-top:12px !important;
    padding:18px 16px 16px !important;
    border-radius:20px !important;
  }

  .abp-titlebox::before,
  .exp2-titlebox::before,
  .bf-contact-titlebox::before{
    width:110px !important;
    height:4px !important;
  }

  .abp-titlebox::after,
  .exp2-titlebox::after,
  .bf-contact-titlebox::after{
    width:74px !important;
    height:4px !important;
  }

  /* CTA buttons: compact grid instead of tall stack */
  .wri-actions,
  .abp-actions,
  .exp2-actions,
  .bf-contact-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px !important;
    margin-top:14px !important;
  }

  .wri-actions > a,
  .abp-actions > a,
  .exp2-actions > a,
  .bf-contact-actions > a{
    width:100% !important;
    min-height:44px !important;
    padding:11px 14px !important;
    font-size:14px !important;
    line-height:1.35 !important;
    text-align:center;
  }

  /* pages with 3 buttons: make the 3rd one full width */
  .wri-actions > :nth-child(3),
  .bf-contact-actions > :nth-child(3){
    grid-column:1 / -1;
  }

  /* hide heavy right-side hero visuals/cards on mobile */
  .wri-visual,
  .abp-hero__side,
  .exp2-mapcard,
  .bf-contact-desk{
    display:none !important;
  }

  /* prevent overlap feeling under hero */
  .wri-statwrap{
    margin-top:0 !important;
  }
}

/* very small screens */
@media (max-width: 420px){
  .wri-actions,
  .abp-actions,
  .exp2-actions,
  .bf-contact-actions{
    grid-template-columns:1fr !important;
  }

  .wri-actions > :nth-child(3),
  .bf-contact-actions > :nth-child(3){
    grid-column:auto !important;
  }
}
/* =========================================================
   ABOUT US MOBILE VIDEO REPAIR
   Keep video visible, keep layout compact
   ========================================================= */
@media (max-width: 767px){
  .abp-page .abp-hero__side{
    display:grid !important;
    gap:12px !important;
    margin-top:14px !important;
  }

  /* keep the company video visible */
  .abp-page .abp-media{
    display:block !important;
  }

  /* hide the extra profile card to avoid long mobile hero */
  .abp-page .abp-profile{
    display:none !important;
  }

  .abp-page .abp-media__head{
    padding:12px 14px !important;
  }

  .abp-page .abp-media__body{
    padding:12px !important;
  }

  .abp-page .abp-media__video{
    min-height:auto !important;
    aspect-ratio:16 / 9;
    border-radius:16px !important;
  }

  .abp-page .abp-media__video video,
  .abp-page .abp-media__video img{
    min-height:auto !important;
    height:100% !important;
    aspect-ratio:16 / 9;
    object-fit:cover;
    display:block;
  }
}