/* (orphaned selector-less rules removed - ligatures, kerning, hanging-punctuation etc.) */

/* === Shared page arch hero (About Us / Services / Contact) === */
.page-arch{
  background:
    radial-gradient(ellipse 60% 80% at 92% 8%, rgba(1,70,126,0.16) 0%, transparent 100%),
    radial-gradient(ellipse 50% 60% at 8% 95%, rgba(251,191,36,0.12) 0%, transparent 100%),
    linear-gradient(158deg, #c3dcf0 0%, #d4e9f9 28%, #e3f1fd 58%, #f0f8ff 100%);
  padding:clamp(3rem,6vw,5.5rem) 1.5rem clamp(5.5rem,11vw,9.5rem);
  text-align:center;
  border-radius:0 0 50% 50% / 0 0 clamp(80px,10vw,150px) clamp(80px,10vw,150px);
  position:relative;overflow:hidden;
}
.page-arch::before{content:'';position:absolute;bottom:-80px;left:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(1,70,126,0.11) 0%,transparent 70%);pointer-events:none;z-index:0;}
.page-arch::after{content:'';position:absolute;top:-100px;right:-100px;width:420px;height:420px;border-radius:50%;border:60px solid rgba(1,70,126,0.055);pointer-events:none;z-index:0;}
.page-arch-inner{max-width:760px;margin:0 auto;position:relative;z-index:1;}
.page-arch-title{font-size:clamp(2.5rem,5.2vw,3.8rem);font-weight:900;color:#0a2342;line-height:1.08;letter-spacing:-0.03em;margin:0 0 1.2rem;text-shadow:0 1px 10px rgba(10,35,66,0.10);}
.page-arch-rule{width:60px;height:3px;border-radius:3px;background:linear-gradient(90deg,#fbbf24,#ED8936);margin:0 auto;box-shadow:0 0 14px rgba(251,191,36,0.50);}
@media(max-width:640px){.page-arch{padding-bottom:clamp(4.5rem,16vw,7rem);}}

/* --- Desktop nav animations (moved from inline <style> blocks) --- */
.nav-link{position:relative;padding-bottom:4px;}
.nav-link::after{content:none;}
.nav-link:hover::after{content:none;}
.nav-cta{transition:all .4s cubic-bezier(.22,1,.36,1);}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px -6px rgba(251,191,36,.45);background:#fbbf24!important;}
.nav-dropdown{opacity:0;visibility:hidden;left:50%;top:calc(100% + .5rem);transform:translateX(-50%) translateY(8px);pointer-events:none;transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);background:#fff;border-radius:.875rem;box-shadow:0 12px 32px -8px rgba(10,35,66,.18);border:1px solid rgba(10,35,66,.08);width:max-content;min-width:11rem;max-width:calc(100vw - 2rem);padding:.4rem .3rem;}
.nav-dropdown.is-open,
.group:hover .nav-dropdown,
.group:focus-within .nav-dropdown{transform:translateX(-50%) translateY(0);}
.nav-dropdown.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.group:hover .nav-dropdown,
.group:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;}
.nav-dropdown li + li{margin-top:.1rem;}
.nav-dropdown a{display:flex;align-items:center;justify-content:flex-start;min-height:2.4rem;padding:.5rem 1.1rem;border-radius:.6rem;color:#0a2342;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background-color .15s ease,color .15s ease;}
.nav-dropdown a:hover{background:#f1f5f9;color:#01467e;}
.nav-dropdown a:focus-visible{outline:none;background:#e8edf4;color:#01467e;}
.desktop-topbar{box-shadow:0 1px 3px rgba(10,35,66,.04);background-color:#fafcff!important;}
header.bg-white{background-color:#fafcff!important;}
.desktop-nav{box-shadow:0 4px 16px -4px rgba(10,35,66,.2);}
.desktop-nav a:not(.nav-cta),.desktop-nav button{color:#fff;font-weight:800;font-size:1.125rem;}
.desktop-nav .nav-dropdown a{color:#0a2342;}
.desktop-nav .nav-dropdown a:hover{color:#01467e;}
.desktop-nav .nav-cta{color:#0a2342;font-weight:800;font-size:1.125rem;}

/* ---- Products mega-menu (desktop) ---- */
.nav-dropdown.nav-mega{
  display:grid;grid-template-columns:repeat(2,minmax(12.5rem,1fr));
  gap:0 2.5rem;width:max-content;min-width:36rem;max-width:calc(100vw - 2rem);
  padding:1.75rem 2rem 1.5rem;
  border-radius:1.125rem;
  box-shadow:0 20px 56px -12px rgba(10,35,66,.18),0 6px 16px -6px rgba(10,35,66,.06);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:rgba(255,255,255,0.97);
}
.nav-mega-col{display:flex;flex-direction:column;position:relative;gap:.2rem;}
.nav-mega-col + .nav-mega-col::before{
  content:"";position:absolute;left:-1.25rem;top:.5rem;bottom:.5rem;width:1px;
  background:linear-gradient(180deg,transparent,rgba(10,35,66,.08) 20%,rgba(10,35,66,.08) 80%,transparent);
}
.nav-mega-head{
  margin:0 0 .625rem;padding:0 .625rem .5rem;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#94a3b8;white-space:nowrap;
  border-bottom:1px solid rgba(10,35,66,.05);
}
/* Tableware head icon */
.nav-mega-col:first-child .nav-mega-head::before{content:"🍽 ";font-size:.65rem;}
/* Agri head icon */
.nav-mega-col:last-child .nav-mega-head::before{content:"🌾 ";font-size:.65rem;}
.desktop-nav .nav-dropdown.nav-mega a,
.nav-dropdown.nav-mega a{
  min-height:0;display:flex;align-items:center;
  padding:.5rem .625rem;border-radius:.5rem;
  font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:#0a2342;white-space:nowrap;position:relative;
  transition:all .18s cubic-bezier(.22,1,.36,1);
}
.nav-dropdown.nav-mega a::before{
  content:"";width:3px;height:0;border-radius:2px;background:#ED8936;margin-right:0;
  transition:all .22s cubic-bezier(.22,1,.36,1);flex:0 0 auto;opacity:0;
}
.nav-dropdown.nav-mega a::after{
  content:"→";font-size:.75rem;margin-left:auto;padding-left:.5rem;
  opacity:0;transform:translateX(-6px);color:#94a3b8;
  transition:all .22s cubic-bezier(.22,1,.36,1);
}
.desktop-nav .nav-dropdown.nav-mega a:hover,
.nav-dropdown.nav-mega a:hover,
.nav-dropdown.nav-mega a:focus-visible{
  background:linear-gradient(90deg,#f1f5f9,#fafcff);color:#01467e;outline:none;
  padding-left:.875rem;
  box-shadow:0 1px 4px -1px rgba(10,35,66,0.06);
}
.nav-dropdown.nav-mega a:hover::before,
.nav-dropdown.nav-mega a:focus-visible::before{height:1.125rem;margin-right:.5rem;opacity:1;}
.nav-dropdown.nav-mega a:hover::after,
.nav-dropdown.nav-mega a:focus-visible::after{opacity:1;transform:translateX(0);color:#01467e;}
/* Agri column: green accent */
.nav-mega-col:last-child a::before{background:#16a34a;}
.header-contact-link{transition:color .25s ease,transform .15s ease;}
.header-contact-link:hover{color:#01467e!important;}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Agricultural Commodities Hero Banner */
.agri-hero-banner {
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.agri-hero-banner video {
  display: block;
  filter: brightness(1.1) contrast(1.05) saturate(1.2);
}

.agri-hero-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px -12px rgba(0,0,0,.28), 0 6px 16px -6px rgba(0,0,0,.18);
}

.agri-hero-banner h2 {
  transition: all 0.5s ease-out;
}

.agri-hero-banner:hover h2 {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .agri-hero-banner,
  .agri-hero-banner * {
    transition: none !important;
    animation: none !important;
  }
  .agri-hero-banner:hover {
    transform: none;
  }
  .agri-hero-banner:hover h2 {
    transform: none;
  }
  .agri-hero-banner video {
    filter: none;
  }
}

#services .service-card{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:.75rem;}
@media (min-width:768px){#services .service-card{padding:2.25rem!important;}}
@media (min-width:1024px){#services .service-card{padding:2.5rem!important;}}
/* Service card body copy - left-aligned, balanced wrapping (premium) */
.services-main .service-card p,
.svc-card p{
  text-align: left;
  text-wrap: pretty;
  max-width: 50ch;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Global Responsive & Accessibility Styles (shared) */
/* About Us section: smart justify on wide layouts, left on narrow */
.about-copy p {
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
  word-spacing: -0.02em;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width:640px){
  .about-copy p { text-align: left; word-spacing: normal; }
}
/* Hide form labels on mobile only */
.hidden-mobile-label { display: block; }
@media (max-width: 640px) {
  .hidden-mobile-label { display: none !important; }
}
/* =========================================
   PREMIUM TYPOGRAPHY SYSTEM - Inter
   Global Corporate Standard
   ========================================= */
:root{
  /* ── Font stack ──
     Body text: Inter  |  Headlines: Roboto
     (--font-serif retained as the heading-font variable name for back-compat) */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ── Font weights ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* ── Letter spacing (refined for optical balance) ── */
  --ls-tighter: -0.035em;
  --ls-tight:   -0.025em;
  --ls-snug:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.015em;
  --ls-wider:    0.03em;
  --ls-widest:   0.05em;

  /* ── Line heights (premium breathing room) ── */
  --lh-none:     1;
  --lh-heading:  1.12;
  --lh-subhead:  1.25;
  --lh-body:     1.7;
  --lh-relaxed:  1.8;
  --lh-caption:  1.5;

  /* ── Type scale (fluid clamp - stronger hierarchy) ── */
  --fs-h1: clamp(2.125rem, 4.5vw + 0.75rem, 3.5rem);
  --fs-h2: clamp(1.625rem, 2.6vw + 0.5rem, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.5vw + 0.55rem, 1.875rem);
  --fs-h4: clamp(1.125rem, 1vw + 0.5rem, 1.4375rem);
  --fs-h5: clamp(1rem, 0.6vw + 0.5rem, 1.1875rem);
  --fs-h6: clamp(0.875rem, 0.4vw + 0.5rem, 1rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;    /* 18px - emphasis body for premium readability */
  --fs-small: 0.875rem;      /* 14px */
  --fs-caption: 0.8125rem;   /* 13px */
  --fs-tiny: 0.75rem;        /* 12px */

  /* ── Component tokens ── */
  --fs-btn: 0.9375rem;       /* 15px - larger tap targets */
  --fs-label: 0.8125rem;     /* 13px */
  --fs-nav: 0.9375rem;       /* 15px */
  --fs-input: 1rem;          /* 16px - prevents iOS zoom */
  --fs-helper: 0.8125rem;    /* 13px */
  --fs-overline: 0.75rem;    /* 12px */
  --fs-footer: 0.9375rem;    /* 15px */
  --fs-footer-sm: 0.8125rem; /* 13px */
  --fs-copyright: 0.8125rem; /* 13px */
}

/* 1. Reset & base */
*,*::before,*::after{box-sizing:border-box;}
html{font-family:var(--font-sans);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem;font-optical-sizing:auto;}
body{margin:0;min-height:100dvh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#0a2342;background:#fafcff;letter-spacing:var(--ls-normal);line-height:var(--lh-body);font-size:var(--fs-body);font-weight:var(--fw-regular);font-feature-settings:"cv01","cv02","cv03","cv04";font-optical-sizing:auto;} 
body.menu-open{overflow:hidden;touch-action:none;}
img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block;}
img{font-style:italic;background-repeat:no-repeat;background-size:cover;}
/* Image protection (deterrent): reduce drag/copy/long-press behaviors */
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Phone icon utility */
.icon-phone{width:clamp(26px,6vw,40px);height:clamp(26px,6vw,40px);display:inline-block;color:#1886ff;flex-shrink:0;background:url("../images/logos/Phone%20Logo.svg") no-repeat center/contain;}
.icon-phone svg{width:100%;height:100%;display:none;}
/* Mail icon utility (mirrors phone sizing for visual consistency) */
.icon-mail{width:clamp(26px,6vw,40px);height:clamp(26px,6vw,40px);display:inline-block;flex-shrink:0;background:url("../images/logos/Mail%20Logo.svg") no-repeat center/contain;}
.icon-mail svg{width:100%;height:100%;display:none;}
/* Customer service icon */
.cs-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.cs-icon svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));}
@media (min-width:640px){.cs-icon svg{width:26px;height:26px;}}
@media (min-width:1024px){.cs-icon svg{width:28px;height:28px;}}
@media (min-width:768px){.icon-phone{width:32px;height:32px;}}
@media (min-width:768px){.icon-mail{width:32px;height:32px;}}

/* Replace header mail/phone SVGs with provided logo SVGs (site-wide) */
.cs-icon[title="Email"]{width:28px;height:28px;background:url("../images/logos/Mail%20Logo.svg") no-repeat center/contain;}
.cs-icon[title="Phone"]{width:28px;height:28px;background:url("../images/logos/Phone%20Logo.svg") no-repeat center/contain;}
.cs-icon[title="Email"] svg,.cs-icon[title="Phone"] svg{display:none;}
@media (min-width:640px){.cs-icon[title="Email"],.cs-icon[title="Phone"]{width:30px;height:30px;}}
@media (min-width:1024px){.cs-icon[title="Email"],.cs-icon[title="Phone"]{width:34px;height:34px;}}

/* Replace mobile-menu mail/phone SVGs that are wrapped in an inline-block span */
a.header-contact[href^="mailto:"]>span.inline-block{width:24px;height:24px;background:url("../images/logos/Mail%20Logo.svg") no-repeat center/contain;flex-shrink:0;}
a.header-contact[href^="mailto:"]>span.inline-block svg{display:none;}
a.header-contact[href^="tel:"]>span.inline-block{width:24px;height:24px;background:url("../images/logos/Phone%20Logo.svg") no-repeat center/contain;flex-shrink:0;}
a.header-contact[href^="tel:"]>span.inline-block svg{display:none;}
.hero-video-wrapper{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.10) contrast(1.1) saturate(1.34) hue-rotate(2deg);transition:none!important;}
/* Keep video vivid while retaining readable text; slightly lighter overall */
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,35,66,.38),rgba(10,35,66,.18) 50%,rgba(255,255,255,.12));mix-blend-mode:multiply;}
@media (max-width:767px){
  /* On small screens allow slightly more vibrance since text is large & shadowed */
  .hero-bg-video{filter:brightness(1.12) contrast(1.12) saturate(1.42) hue-rotate(3deg);} 
  .hero-video-overlay{background:linear-gradient(180deg,rgba(10,35,66,.32),rgba(10,35,66,.14) 48%,rgba(255,255,255,.10));}
}
@media (min-width:1280px){
  /* Large screens: dial back slightly to avoid washout */
  .hero-bg-video{filter:brightness(1.08) contrast(1.08) saturate(1.30) hue-rotate(2deg);} 
}
@media (prefers-color-scheme: dark){
  /* In dark mode slightly boost brightness less to avoid glare */
  .hero-bg-video{filter:brightness(1.02) contrast(1.08) saturate(1.32) hue-rotate(2deg);} 
  .hero-video-overlay{background:linear-gradient(180deg,rgba(10,35,66,.44),rgba(10,35,66,.22) 52%,rgba(255,255,255,.08));}
}
@media (prefers-reduced-motion: reduce){
  /* Preserve brightness adjustments even when motion reduced */
  .hero-bg-video{animation:none!important;filter:brightness(1.10) contrast(1.08) saturate(1.38) hue-rotate(2deg)!important;}
}
.hero-with-video>.mx-auto>*{position:relative;z-index:1;}
/* Remove solid/gradient background so video is visible */
.hero-with-video{background:transparent!important;height:70dvh;min-height:70dvh;max-height:70dvh;display:flex;align-items:center;margin-bottom:0;padding-bottom:0;}
/* Ensure hero video reaches very top under transparent mobile header */
@media (max-width:767px){
  .hero-with-video{padding-top:0;}
  body.index #hero{margin-top:0;}
}
/* Custom hero text sizing (premium corporate) */
.hero-heading{font-size:clamp(2.75rem,6.5vw,4.5rem);line-height:1.05;overflow-wrap:anywhere;text-wrap:balance;}
@media (min-width:1024px){.hero-heading{font-size:clamp(3rem,2.6vw+1.2rem,4.5rem);} }
.hero-sub{font-size:clamp(1.0625rem,1.2vw+0.65rem,1.35rem);line-height:1.6;} 
@media (min-width:1280px){.hero-sub{font-size:clamp(1.125rem,1vw+0.9rem,1.4rem);} }
/* --- HERO MOBILE ENHANCEMENTS --- */
@media (max-width: 767px) {
  .hero-heading {
  text-align: center !important;
  font-size: clamp(2.5rem, 9vw, 3.2rem) !important;
  font-weight: 800 !important;
  padding: 0.5em 0.2em;
  margin: 0 auto 0.2em auto;
  letter-spacing: 0.01em;
  line-height: 1.15 !important;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  }
  .hero-sub {
    text-align: center !important;
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
    font-weight: 600;
    margin: 0 auto 0.5em auto;
    width: 100%;
    max-width: 95vw;
    box-sizing: border-box;
  }
  .hero-text-shadow {
    text-shadow: 0 3px 12px rgba(0,0,0,0.55), 0 8px 32px rgba(0,0,0,0.38) !important;
  }
  .hero-video-overlay {
    background: linear-gradient(180deg,rgba(10,35,66,0.48),rgba(10,35,66,0.28) 60%,rgba(255,255,255,0.10)) !important;
  }
}
/* Center hero content tighter (remove excess top spacing) */
/* Balanced vertical spacing: slight shift upward without crowding header */
.hero-with-video{margin-top:0;}
/* Base (mobile first) hero positioning (reduced gap under tall mobile header) */
.hero-with-video .hero-grid{padding-top:0;padding-bottom:0;transform:none;}
@media (min-width:640px){.hero-with-video .hero-grid{padding-top:0;padding-bottom:0;transform:none;}}
@media (min-width:1024px){.hero-with-video .hero-grid{padding-top:0;padding-bottom:0;transform:none;}}
/* Very short viewport safeguard: reduce upward shift to prevent overlap */
@media (max-height:620px){.hero-with-video .hero-grid{transform:none;padding-bottom:0;}}
@media (max-height:520px){.hero-with-video .hero-grid{transform:none;padding-bottom:0;}}
/* Ultra narrow width refinement (<360px) tighten slightly less to avoid clipping */
@media (max-width:359px){
  .hero-with-video .hero-grid{transform:none;padding-bottom:0;}
  .hero-heading{font-size:clamp(2.5rem,7.4vw+0.4rem,3.5rem);} 
  .hero-sub{font-size:clamp(1.0625rem,2.8vw+0.55rem,1.3rem);}
}
/* Ultra tiny height + narrow width safeguard to avoid overlapping header */
@media (max-width:359px) and (max-height:520px){
  .hero-with-video .hero-grid{transform:none;}
}
/* If header height increases, adjust calc below by changing 5rem -> actual header total height */
/* Removed desktop height subtraction to avoid initial scroll jump hiding part of logo */
/* If you still want a subtle overlay tint, adjust .hero-video-overlay above */
.hero-text-shadow{text-shadow:0 2px 4px rgba(0,0,0,.35),0 4px 18px rgba(0,0,0,.25);} 
@media (min-width:1024px){.hero-text-shadow{text-shadow:0 3px 6px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);} }
@media (prefers-reduced-motion:reduce){.hero-bg-video{animation:none!important;filter:brightness(1.08) contrast(1.06) saturate(1.3) hue-rotate(2deg);}}
/* Back To Top Button */
#backToTop{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0) + clamp(.9rem,1.1vw + .6rem,1.55rem));transform:translate(-50%,14px) scale(.8);width:clamp(42px,6.4vw,52px);height:clamp(42px,6.4vw,52px);display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,0.2);color:#0a2342;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1),background .3s,color .3s,box-shadow .35s;z-index:90;outline:none;padding:0;margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}/* 20% base */
#backToTop::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 2px 4px -2px rgba(0,0,0,.22),0 4px 10px -4px rgba(0,0,0,.18);opacity:.35;transition:opacity .4s;}/* subtle ring */
#backToTop:hover{background:rgba(255,255,255,0.95);} 
#backToTop:focus-visible{background:rgba(255,255,255,0.95);box-shadow:0 0 0 3px rgba(14,165,233,.55),0 6px 18px -6px rgba(0,0,0,.3);} 
#backToTop:hover::before,#backToTop:focus-visible::before{opacity:.6;}
#backToTop:active{transform:translate(-50%,16px) scale(.78);}/* pressed */
#backToTop.visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(.94);} 
#backToTop svg{pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));opacity:.9;transition:transform .45s cubic-bezier(.19,1,.22,1);} 
#backToTop:hover svg,#backToTop:focus-visible svg{transform:translateY(-2px);} 
@media (prefers-reduced-motion:reduce){#backToTop{transition:none;}}
@media (max-width:640px){#backToTop{width:56px;height:56px;}}
@media (max-width:480px){#backToTop{width:54px;height:54px;}}
@media (max-width:380px){#backToTop{width:52px;height:52px;}}
@media (max-width:340px){#backToTop{width:50px;height:50px;}}
@media (max-height:520px){#backToTop{bottom:clamp(.55rem,2vh,.9rem);}}
/* High contrast mode improvement */
@media (forced-colors:active){#backToTop{background:ButtonFace;border:1px solid ButtonText;}}

/* Home page: white logo on transparent mobile header (overlays dark hero video) */
body.index #mobileHeader .site-logo{filter:brightness(0) invert(1) !important;}

/* Responsive brand logo (refined sizing) */
/* Strategy: Keep logo comfortably visible on very small phones (~46-56px), scale modestly through tablets, cap ~64px on large desktops. */
.site-logo{display:block;width:auto;max-width:100%;height:auto;aspect-ratio:1080/323;object-fit:contain;max-height:clamp(48px,14vw,88px);}
/* In header we constrain a bit more to align with typical 64px (h-16) nav height while allowing slight growth on mid widths */
header .site-logo{max-height:clamp(52px,8vw,68px);}
@media (min-width:1280px){header .site-logo{max-height:64px;}}
@media (min-width:1600px){header .site-logo{max-height:68px;}}

/* 2. Layout utilities */
.container{width:100%;margin-inline:auto;max-width:1280px;padding-inline:clamp(1rem,4vw,2.5rem);} 
.no-scroll-x,html,body{overflow-x:hidden;}
.responsive-grid{display:grid;gap:clamp(1rem,2vw,2rem);} 

/* Product card galleries: allow swipe/scroll but hide the scrollbar bar */
[data-gallery="true"],
[data-auto-swipe="true"]{
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge legacy */
}
[data-gallery="true"]::-webkit-scrollbar,
[data-auto-swipe="true"]::-webkit-scrollbar{
  width:0;
  height:0;
}

/* 3. Typographic scale - Inter unified hierarchy (premium corporate) */
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);letter-spacing:var(--ls-tight);text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:1.08;font-weight:var(--fw-bold);letter-spacing:var(--ls-tighter);}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);}
h3{font-size:var(--fs-h3);line-height:var(--lh-subhead);font-weight:var(--fw-semi);letter-spacing:var(--ls-snug);}
h4{font-size:var(--fs-h4);line-height:var(--lh-subhead);font-weight:var(--fw-semi);letter-spacing:var(--ls-snug);}
h5{font-size:var(--fs-h5);line-height:var(--lh-subhead);font-weight:var(--fw-medium);letter-spacing:var(--ls-normal);}
h6{font-size:var(--fs-h6);line-height:var(--lh-caption);font-weight:var(--fw-medium);letter-spacing:var(--ls-wide);text-transform:uppercase;}
p,li{font-family:var(--font-sans);line-height:var(--lh-body);font-weight:var(--fw-regular);}
p{margin-block:0 1em;}
/* ── Body text: one solid brand-navy across every page ──
   This file is unlayered, so it overrides Tailwind's @layer text-* utilities
   (text-black, text-slate-600/700, text-gray-700, etc.) on body paragraphs.
   Excludes white text on dark backgrounds and intentional orange/amber accents. */
p:not([class*="text-white"]):not([class*="text-[#ED"]):not([class*="text-[#fbbf24"]){color:#0a2342;}
span,a,label,input,select,textarea,button{font-family:var(--font-sans);}
small,.caption{font-size:var(--fs-small);line-height:var(--lh-caption);font-weight:var(--fw-regular);letter-spacing:var(--ls-wide);}

/* Utility type classes (premium) */
.text-subtitle{font-size:var(--fs-body-lg);font-weight:var(--fw-medium);line-height:var(--lh-relaxed);letter-spacing:var(--ls-normal);}
.text-overline{font-size:var(--fs-overline);font-weight:var(--fw-semi);letter-spacing:var(--ls-widest);text-transform:uppercase;line-height:var(--lh-caption);}
.text-helper{font-size:var(--fs-helper);color:#64748b;line-height:var(--lh-caption);letter-spacing:var(--ls-wide);}
.text-label{font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-wide);line-height:var(--lh-caption);}
.text-display{font-size:clamp(2.5rem,5.5vw+0.5rem,4.5rem);font-weight:var(--fw-extrabold);line-height:1.05;letter-spacing:var(--ls-tighter);text-wrap:balance;}

/* Desktop typography lock (>=1024px) - premium corporate */
@media (min-width:1024px){
  body{font-size:16px;}
  h1{font-size:42px;line-height:1.08;letter-spacing:-0.03em;}
  h2{font-size:32px;line-height:1.14;letter-spacing:-0.025em;}
  h3{font-size:24px;line-height:1.22;letter-spacing:-0.02em;}
  h4{font-size:20px;line-height:1.28;letter-spacing:-0.015em;}
  h5{font-size:17px;line-height:1.32;letter-spacing:-0.01em;}
  h6{font-size:14px;line-height:1.4;letter-spacing:0.04em;}
  small,.caption{font-size:13px;}
  p,li{line-height:1.7;}
}

/* Tablet typography (641px-1023px) - premium corporate */
@media (min-width:641px) and (max-width:1023px){
  h1{font-size:36px;line-height:1.1;letter-spacing:-0.025em;}
  h2{font-size:28px;line-height:1.16;letter-spacing:-0.02em;}
  h3{font-size:22px;line-height:1.24;letter-spacing:-0.015em;}
  h4{font-size:18px;line-height:1.28;letter-spacing:-0.01em;}
  h5{font-size:16px;line-height:1.34;letter-spacing:0;}
  h6{font-size:13px;line-height:1.4;letter-spacing:0.04em;}
  small,.caption{font-size:13px;}
  p,li{line-height:1.7;}
}

/* Mobile typography (<=640px) - premium corporate */
@media (max-width:640px){
  body{font-size:16px;line-height:1.7;}
  h1{font-size:28px;line-height:1.12;letter-spacing:-0.025em;}
  h2{font-size:24px;line-height:1.18;letter-spacing:-0.02em;}
  h3{font-size:20px;line-height:1.24;letter-spacing:-0.015em;}
  h4{font-size:17px;line-height:1.28;letter-spacing:-0.01em;}
  h5{font-size:15px;line-height:1.34;letter-spacing:0;}
  h6{font-size:12.5px;line-height:1.4;letter-spacing:var(--ls-widest);}
  small,.caption{font-size:12.5px;}
  p,li{line-height:1.7;}
  header nav a,
  #mobileNav a,
  nav a,
  .btn,
  button{
    font-size:15px;
    text-transform:uppercase;
    font-weight:var(--fw-semi);
  }
}

/* Menu / buttons: 15px uppercase across pages (premium) */
header nav a,
#mobileNav a,
nav a,
.btn,
button{
  font-family:var(--font-sans);
  font-size:var(--fs-nav);
  text-transform:uppercase;
  letter-spacing:var(--ls-wider);
  font-weight:var(--fw-semi);
}

/* 4. Forms */
form{width:100%;max-width:100%;}
.input,form input,form textarea,form select{width:100%;min-width:0;box-sizing:border-box;font:inherit;border:1px solid #e5e7eb;border-radius:0.85rem;padding:0.75rem 1rem;background:#fff;color:#0a2342;transition:border-color .18s,box-shadow .18s;}
.input:focus,form input:focus,form textarea:focus,form select:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px #bae6fd;} 
textarea{resize:vertical;}

/* Contact page: office map sizing */
.office-map-aspect{aspect-ratio:16/9;}
@media (min-width:1024px){
  .office-map-aspect{aspect-ratio:24/9;}
}

/* 5. Interactive */
a{text-decoration:none;color:#0a2342;}a:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;border-radius:0.5rem;}
button{cursor:pointer;border:none;font:inherit;background:none;}
button:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;border-radius:0.75rem;}
/* Hide phone call icon in mobile top header bar (all pages) */
a[aria-label="Call"].p-2{display:none!important;}
/* Suppress all focus rings in mobile header & nav — touch interface */
#menuBtn:focus,#menuBtn:focus-visible,
#closeMenuBtn:focus,#closeMenuBtn:focus-visible{outline:none!important;}
#mobileNav a:focus,#mobileNav a:focus-visible,
#mobileNav button:focus,#mobileNav button:focus-visible{outline:none!important;}
#mobileHeader a:focus,#mobileHeader a:focus-visible{outline:none!important;}

/* Consistent header contact font size (premium) */
.header-contact{font-size:var(--fs-body);font-weight:var(--fw-medium);letter-spacing:var(--ls-normal);}

/* 6. Cards */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;box-shadow:0 4px 14px -4px rgba(0,0,0,.12);transition:box-shadow .25s,transform .25s;} 
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -12px rgba(0,0,0,.18);} 
.card:focus-within{box-shadow:0 0 0 3px #0ea5e9,0 12px 32px -12px rgba(0,0,0,.22);} 
/* Prevent grid cards from overflowing narrow columns */
.product-card-static{min-width:0;}

/* Footer copyright text (premium) */
footer p.tracking-wide,
footer .text-xs.tracking-wide{font-size:var(--fs-copyright);letter-spacing:var(--ls-wider);line-height:var(--lh-caption);}

/* 7. Media queries tweaks */
@media (max-width:640px){
  .stack-sm{flex-direction:column!important;}
  .hide-sm{display:none!important;}
  .pad-sm{padding:0.75rem!important;}
}

/* 8. Utility helpers */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.max-w-prose{max-width:68ch;}
.text-balance{text-wrap:balance;}

/* 9. Animations */
.fade-in{opacity:0;transform:translateY(12px);animation:fadeIn .7s ease forwards;}@keyframes fadeIn{to{opacity:1;transform:none;}}

/* 10. Responsive images inside aspect containers */
.aspect-16-10{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:1.25rem;} .aspect-16-10>img{width:100%;height:100%;object-fit:cover;}

/* 10b. Product card utilities missing from the prebuilt tailwind.css */
/* Product image tile: 4:3 landscape on top, text + button flow naturally below */
.aspect-\[4\/3\]{aspect-ratio:4/3;}
/* Agri & category photo tiles: the image's h-full doesn't resolve inside the
   flex + aspect-ratio tile, so it rendered at natural height with gray bands
   above/below. Pin it to fill the tile. Scoped to .overflow-hidden tiles so the
   packaging product tiles (which use p-2 + object-contain) are NOT affected. */
.aspect-\[4\/3\].overflow-hidden{position:relative;}
.aspect-\[4\/3\].overflow-hidden > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Product card titles: the global unlayered h3 rule (font-size:var(--fs-h3))
   outranks Tailwind's layered .text-sm utility, so force the intended size here.
   h3.text-sm (0,1,1) beats bare h3 (0,0,1) and, being unlayered, beats the
   layered utility too. */
h3.text-sm{font-size:1rem;font-weight:700;line-height:1.35;letter-spacing:-0.01em;}

/* 11. Accessibility improvements */
:focus-visible{scroll-margin:6rem;}

/* 12. Print */
@media print{.no-print{display:none!important;}body{background:#fff;}a{color:#000;text-decoration:underline;}}

/* 13. Floating WhatsApp button */
.float{position:fixed;inset:auto 1.75rem 1.75rem auto;width:60px;height:60px;background:#25d366;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:30px;box-shadow:2px 2px 6px rgba(0,0,0,.3);z-index:100;transition:transform .25s,box-shadow .25s,background .25s;}
.float{inset:auto 1.75rem calc(1.75rem + env(safe-area-inset-bottom)) auto;}/* Respect iOS safe-area */
.float:hover{background:#1ebe5a;transform:translateY(-3px);box-shadow:4px 6px 14px rgba(0,0,0,.25);} 
.float:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px;}
.my-float{line-height:1;margin-top:0;}
@media (max-width:640px){.float{width:54px;height:54px;font-size:26px;inset:auto 1rem 1rem auto;}}
@media (prefers-reduced-motion:reduce){.float{transition:none!important;}}

/* 14. Ultra-small viewport refinements (<360px) */
@media (max-width:359px){
  header .site-logo{max-height:52px;}
  h1{font-size:clamp(1.75rem,8vw,2.35rem);} 
}
#mobileNav{will-change:transform;}
#mobileNav .rotate-180{transform:rotate(180deg);} 

/* Scroll-fade edges for horizontally scrollable tab bar */
/* Removed scroll-fade edges for deprecated tab bar */

/* Modal responsive refinements */
#rqModal .max-w-md{max-width:min(94vw,480px);} /* Already applied by Tailwind-esque class; reconfirm */
#rqModal .max-w-md{width:100%;}
#rqModal .max-w-md{max-height:calc(100dvh - 2rem);}
@media (max-width:480px){
  #rqModal .max-w-md{border-radius:1.25rem;padding:1rem;}
}
@media (max-height:560px){
  #rqModal .max-w-md{max-height:calc(100dvh - 1rem);}
}
@media (orientation:landscape) and (max-height:500px){
  #rqModal .max-w-md{flex-direction:column;}
  #rqModal form{gap:.85rem;}
}

/* Ensure internal scroll behavior does not cause outer body scroll */
#rqModal .max-w-md{overflow:auto;scrollbar-gutter:stable both-edges;}

/* Smooth scroll to active tab when selected (JS sets scroll) */
/* Removed .tab active scroll margin (tabs removed) */

/* 17. Card reveal animation (progressive enhancement) */
.card-reveal-init{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform;}
.card-reveal-init.in-view{opacity:1;transform:translateY(0) scale(1);}
@media (prefers-reduced-motion: reduce){
  .card-reveal-init{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* 18. (Removed) Effects toggle button styles cleaned */

/* 19. Product category description - smart justify on wide, left on narrow */
.cat-desc{
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  -webkit-hyphens:none;
  word-spacing:-0.02em;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
@media (max-width:640px){
  .cat-desc{ text-align:left; word-spacing:normal; }
}
@media (min-width:1024px){
  .cat-desc{ max-width:78ch; }
}
/* Products We Export: solid brand-navy description text for higher contrast */
#products .cat-desc{ color:#0a2342!important; }

/* Solid brand-navy body text also on mobile for About Us and Products We Export */
@media (max-width:767px){
  .about-copy .about-p{ color:#0a2342!important; }
  #products .cat-desc{ color:#0a2342!important; }
}

/* 19. Orientation & very short viewport refinements */
@media (orientation:landscape) and (max-height:600px){
  .hero-heading{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.05;}
  .hero-sub{font-size:clamp(.95rem,1.5vw,1.1rem);}
  .hero-with-video .hero-grid{transform:translateY(-1.1rem)!important;padding-bottom:1rem;}
}
@media (orientation:landscape) and (max-height:480px){
  .hero-with-video .hero-grid{transform:translateY(-0.5rem)!important;padding-bottom:.75rem;}
  .hero-heading{font-size:clamp(1.5rem,2.8vw,2.15rem);}
}

/* 20. Ultra-wide containment (avoid overly long line lengths) */
@media (min-width:2000px){
  .hero-heading{max-width:60ch;}
  .hero-sub{max-width:70ch;}
}

/* 21. Optional header offset utility
   Usage: add class 'hero-minus-header' alongside 'hero-with-video' IF you prefer the hero section to exclude the header height.
   Adjust the --header-height variable below to match actual total header size. */
:root{--header-height:4.5rem;}
.hero-minus-header{min-height:calc(100dvh - var(--header-height));}

/* 22. Image responsive helpers */
.img-cover{width:100%;height:100%;object-fit:cover;object-position:center;}

/* 23. Safe-area utility (if needed elsewhere) */
.pb-safe{padding-bottom:calc(env(safe-area-inset-bottom) + 1rem)!important;}

/* 23a. Global text flow - balanced, premium wrapping */
html, body, p, li, span, div{
  word-break:normal;
  overflow-wrap:break-word;
  white-space:normal;
  text-wrap:pretty;           /* modern browsers: balance line lengths */
}
h1, h2, h3, h4, h5, h6{text-wrap:balance;}

/* Smart justify: only on wide containers (>=42ch equivalent).
   Uses auto-hyphenation + text-align-last:left to prevent
   rivers of white space and short last-line stretching.       */
.prose-justify{
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  -webkit-hyphens:none;
  word-spacing:-0.02em;       /* tighten slightly to reduce gaps */
}
/* Disable smart justify on narrow viewports where cards stack */
@media (max-width:640px){
  .prose-justify{ text-align:left; word-spacing:normal; }
}

/* 24. Brand / marketplace scrolling strip */
.brand-strip{background:#fafcff;} 
.brand-strip-track{width:100%;position:relative;overflow:hidden;}
.brand-strip-sequence{flex:0 0 auto;animation:brandScroll 28s linear infinite;}
.brand-strip:hover .brand-strip-sequence,.brand-strip:focus-within .brand-strip-sequence{animation-play-state:paused;}
@keyframes brandScroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
.brand-logo{filter:grayscale(8%) contrast(104%) saturate(108%);opacity:.95;transition:filter .35s,opacity .35s,transform .35s;will-change:filter,opacity;}
.brand-logo:hover,.brand-logo:focus-visible{filter:none;opacity:1;transform:scale(1.04);}
.brand-bullet{width:.65rem;height:.65rem;border-radius:50%;background:radial-gradient(circle at 30% 30%,#cba269,#8d6a34);box-shadow:0 0 0 4px rgba(203,162,105,.18),0 2px 4px -1px rgba(0,0,0,.15);}
@media (max-width:640px){
  .brand-strip-sequence{animation-duration:20s;}
  .brand-strip{border-radius:1.5rem;}
}

/* Mobile: limit Accreditations strip to ~2 inches tall */
@media (max-width:640px){
  #marketplaces .accreditations-strip{height:2in;padding:0!important;align-items:stretch;}
  #marketplaces .accreditations-strip-scroll{height:100%;}
  #marketplaces .brand-strip-track{height:100%;align-items:stretch;}
  #marketplaces .brand-strip-sequence{height:100%;align-items:stretch;padding-top:0!important;padding-bottom:0!important;gap:2rem!important;}

  /* Standardize tile size so all logos look uniform */
  #marketplaces .brand-logo-box{
    width:120px;
    height:100%;
    padding:0 .75rem;
    box-sizing:border-box;
    flex:0 0 auto;
    overflow:visible;
  }
  #marketplaces .brand-logo,
  #marketplaces .brand-logo-box img{
    max-width:100%!important;
    max-height:100%!important;
    width:auto;
    height:100%;
    object-fit:contain;
  }

  /* Some files have more whitespace; scale them up for visual consistency */
  #marketplaces img[src*="/STARTUP INIDA"],
  #marketplaces img[src*="/FSSAI"],
  #marketplaces img[src*="/APEDA"],
  #marketplaces img[src*="/ISO"],
  #marketplaces img[src*="/Spices Board"],
  #marketplaces img[src*="/IGTD"]{
    transform:scale(1.15);
    transform-origin:center;
  }

  /* Make selected logos larger on mobile */
  #marketplaces img[src*="/FSSAI"],
  #marketplaces img[src*="/IGTD"],
  #marketplaces img[src*="/STARTUP INIDA"],
  #marketplaces img[src*="/STARTUP INDIA"],
  #marketplaces img[src*="/GSTIN"],
  #marketplaces img[src*="/UDYAM"]{
    transform:scale(1.3);
  }

  /* Startup logo: a touch larger */
  #marketplaces img[src*="/STARTUP INIDA"],
  #marketplaces img[src*="/STARTUP INDIA"]{
    transform:scale(1.4);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{animation:none!important;filter:brightness(1.08) contrast(1.08) saturate(1.32) hue-rotate(2deg)!important;}
}
/* Ensure seamless loop: duplicate sequences inline in markup */
/* Additional layout for static-left logo variant */
.brand-strip-track{gap:0;}
.brand-strip-track>.brand-strip-sequence{padding-top:.5rem;padding-bottom:.5rem;}
.brand-strip-mask{position:absolute;inset:0;pointer-events:none;background:transparent;}
.brand-strip:hover .brand-logo{filter:none;opacity:1;}
/* Slightly slower when static logo present */
section#marketplaces .brand-strip-sequence{animation-duration:20s;}

/* Accreditations title visibility boost (mobile & up) */
#marketplaces h3{
  font-weight:var(--fw-bold)!important;
  font-size:var(--fs-h2)!important;
  line-height:var(--lh-subhead)!important;
}
@media (min-width:640px){ /* sm */
  #marketplaces h3{font-size:var(--fs-h2)!important;line-height:var(--lh-subhead)!important;}
}
/* Uniform accreditation logo sizing (responsive square/rect box) */
.brand-logo-box img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.brand-logo-box{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0.85rem;padding:.25rem;}
@media (min-width:1024px){
  .brand-logo-box{width:clamp(110px,11vw,170px);height:clamp(80px,9vw,138px);} 
}
/* Optional subtle equal-height baseline alignment helper */
.brand-logo-box:before{content:"";position:absolute;inset:0;border-radius:0.85rem;background:linear-gradient(145deg,#ffffff,#f1f5f9);box-shadow:0 2px 4px -2px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);opacity:0;transition:opacity .35s;}
.brand-logo-box:hover:before,.brand-logo-box:focus-within:before{opacity:1;}
.brand-logo-box img{position:relative;z-index:1;}

/* --- Responsive Enhancement Injected (Nov 2025) --- */
/* Mobile navigation drawer adaptive width (overrides Tailwind w-64) */
#mobileNav{width:clamp(14rem,75vw,20rem);}
/* Contact form button touch comfort */
#contactForm button{min-height:48px;}
@media (max-width:380px){#contactForm button{font-size:var(--fs-btn);}}
/* Ensure category descriptions don't exceed comfortable measure inside cards */
.dynamic-card .cat-desc{max-width:78ch;}
/* Narrow phones: prevent horizontal scroll from long email in mobile menu */
@media (max-width:340px){#mobileNav a[href^="mailto:"]{word-break:break-all;}}
/* Product cards interactive hover (Products We Export section and Agricultural Commodities) */
.product-card-static{position:relative;box-shadow:0 4px 14px -4px rgba(0,0,0,.12);transition:box-shadow .4s cubic-bezier(.19,1,.22,1),transform .45s cubic-bezier(.19,1,.22,1);} 
.product-card-static:hover,.product-card-static:focus-within{transform:translateY(-6px);box-shadow:0 16px 44px -12px rgba(0,0,0,.28),0 6px 16px -6px rgba(0,0,0,.18);} 
.product-card-static:hover img,.product-card-static:focus-within img{transform:scale(1.08);} 
.product-card-static img{transition:transform .6s cubic-bezier(.19,1,.22,1),filter .6s;}
.product-card-static:hover img,.product-card-static:focus-within img{filter:saturate(1.08) contrast(1.05);} 
@media (prefers-reduced-motion:reduce){.product-card-static,.product-card-static *{transition:none!important;}.product-card-static:hover,.product-card-static:focus-within{transform:none;}.product-card-static:hover img,.product-card-static:focus-within img{transform:none;filter:none;}}
/* Responsive adjustments for product cards */
#products .product-card-static{display:flex;flex-direction:column;}
@media (min-width:640px){#products .product-card-static{flex-direction:column;}}
/* Keep images on top for all viewports */
#products .product-card-static > div:first-child{position:relative;overflow:hidden;height:220px;}
/* Guard against flex children forcing unexpected growth in some WebKit builds */
#products .product-card-static > div:last-child{min-height:0;}
/* Center text & content on homepage product cards */
#products .product-card-static .p-6{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* Category page product articles hover effect */
article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden {
  position: relative;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.12);
  transition: box-shadow .4s cubic-bezier(.19,1,.22,1), transform .45s cubic-bezier(.19,1,.22,1);
}
article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:hover,
article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 44px -12px rgba(0,0,0,.28), 0 6px 16px -6px rgba(0,0,0,.18);
}
article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden img {
  transition: transform .6s cubic-bezier(.19,1,.22,1), filter .6s;
}
article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:hover img,
article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:focus-within img {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.05);
}
@media (prefers-reduced-motion: reduce) {
  article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden,
  article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden * {
    transition: none !important;
  }
  article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:hover,
  article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:focus-within {
    transform: none;
  }
  article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:hover img,
  article.bg-white.border.rounded-2xl.shadow-sm.overflow-hidden:focus-within img {
    transform: none;
    filter: none;
  }
}
/* --- Responsive Baseline (global) --- */
/* Fluid media: images, videos, iframes scale with container */
img, video, iframe{max-width:100%;height:auto;}
/* Ensure embedded videos keep aspect ratio when width shrinks */
.responsive-media{position:relative;width:100%;}
.responsive-media iframe,.responsive-media video{position:relative;display:block;width:100%;height:auto;}
/* Prevent horizontal scroll from long content on small screens */
pre, code, table{max-width:100%;}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Wrap long words/links in narrow viewports */
.wrap-long{word-break:break-word;overflow-wrap:anywhere;}
/* Section container padding clamps for tighter mobile spacing */
.section-pad{padding-left:clamp(1rem,4vw,2rem);padding-right:clamp(1rem,4vw,2rem);} 
/* Headings clamp for smoother scaling where not already tailwind-controlled */
.heading-clamp{font-size:var(--fs-h3);line-height:var(--lh-subhead);text-wrap:balance;}
/* Index page specific extracted inline styles (migrated from index.html) */
/* Our Services: enable hover/focus lift on all grid cards */
#services .service-card{position:relative;border-radius:1rem;box-shadow:0 4px 14px -4px rgba(0,0,0,.12);transition:box-shadow .42s cubic-bezier(.19,1,.22,1),transform .42s cubic-bezier(.19,1,.22,1),opacity .4s,background-color .35s ease,border-color .35s ease,color .25s ease;transform:translateZ(0);will-change:transform,box-shadow;background-clip:padding-box;overflow:hidden;}
#services .service-card::after{content:none!important;}
#services .service-card:hover,#services .service-card:focus-within{transform:translateY(-14px) scale(1.045);box-shadow:
  0 30px 72px -20px rgba(0,0,0,.38),
  0 16px 38px -12px rgba(0,0,0,.22),
  0 10px 26px -14px rgba(36,67,122,.22); /* removed white inset + overlay */}

/* Intensify each card's own background hue on hover (no white overlay) */
#services .service-card.bg-blue-50:hover{background-color:#dbeafe;border-color:#93c5fd;}
#services .service-card.bg-amber-50:hover{background-color:#fef3c7;border-color:#fcd34d;}
#services .service-card.bg-sky-50:hover{background-color:#e0f2fe;border-color:#7dd3fc;}
#services .service-card.bg-purple-50:hover{background-color:#ede9fe;border-color:#c4b5fd;}
#services .service-card.bg-rose-50:hover{background-color:#ffe4e6;border-color:#fecdd3;}
#services .service-card.bg-green-50:hover{background-color:#dcfce7;border-color:#86efac;}

/* Make text brighter (more legible) on hover */
#services .service-card:hover p{color:#1f2937;} /* slate-800 */
#services .service-card.bg-blue-50:hover h3{color:#1d4ed8;}    /* blue-700 */
#services .service-card.bg-amber-50:hover h3{color:#b45309;}   /* amber-700 */
#services .service-card.bg-sky-50:hover h3{color:#0369a1;}     /* sky-700 */
#services .service-card.bg-purple-50:hover h3{color:#6d28d9;}  /* purple-700 */
#services .service-card.bg-rose-50:hover h3{color:#be123c;}    /* rose-700 */
#services .service-card.bg-green-50:hover h3{color:#15803d;}   /* green-700 */
/* On small screens, tone down lift/scale to avoid jumpiness */
@media (max-width:640px){
  #services .service-card:hover,#services .service-card:focus-within{transform:translateY(-8px) scale(1.02);box-shadow:
    0 20px 48px -16px rgba(0,0,0,.32),
    0 10px 26px -12px rgba(0,0,0,.2),
    0 6px 18px -10px rgba(36,67,122,.18); /* removed white inset */}
}
/* Optional visible focus outline for keyboard users */
#services .service-card:focus-visible{outline:3px solid rgba(14,165,233,.6);outline-offset:3px;}
#services .service-card h3{margin-top:0;font-weight:var(--fw-semi);}
body.index form,
body.contact-page form{width:100%;max-width:100vw;box-sizing:border-box;}
body.index .input,
body.contact-page .input{width:100%;min-width:0;box-sizing:border-box;font-size:var(--fs-input);padding:.75rem 1rem;border-radius:.75rem;border:1px solid #e5e7eb;margin-bottom:.5rem;background:#fff;color:#0a2342;transition:border-color .2s;}
body.index #contactForm .input,
body.contact-page #contactForm .input{margin-bottom:0;line-height:var(--lh-caption);transition:none;}
body.index #contactForm .assist-row,
body.contact-page #contactForm .assist-row{margin-top:.2rem;min-height:1rem;}
body.index #contactForm .field-row,
body.contact-page #contactForm .field-row{min-height:3.5rem;}
body.index #contactForm .status-row,
body.contact-page #contactForm .status-row{min-height:1rem;}
body.index #contactForm .input:hover:not(.border-red-300):not([aria-invalid="true"]),
body.index #contactForm .input:focus:not(.border-red-300):not([aria-invalid="true"]),
body.contact-page #contactForm .input:hover:not(.border-red-300):not([aria-invalid="true"]),
body.contact-page #contactForm .input:focus:not(.border-red-300):not([aria-invalid="true"]){border-color:#e5e7eb!important;box-shadow:none!important;outline:none!important;}
body.index #contactForm input:not(#cf-email):not(#cf-phone):invalid,
body.index #contactForm textarea:invalid,
body.index #contactForm select:invalid,
body.contact-page #contactForm input:not(#cf-email):not(#cf-phone):invalid,
body.contact-page #contactForm textarea:invalid,
body.contact-page #contactForm select:invalid{outline:none!important;box-shadow:none!important;border-color:inherit!important;}
@media (max-width:640px){body.index form,body.contact-page form{padding:.5rem!important;}body.index .input,body.contact-page .input{font-size:var(--fs-input);padding:.75rem .75rem;}body.index #contactForm,body.contact-page #contactForm{background:#fff!important;box-shadow:0 2px 16px 0 rgba(0,0,0,.08);border-radius:1rem;padding:1.25rem!important;margin:0 auto;width:100%!important;max-width:100vw!important;}body.index #contact .contact-details,body.contact-page #contact .contact-details{font-size:var(--fs-body);line-height:var(--lh-caption);word-break:break-word;white-space:normal;padding:.75rem .5rem;background:#fff;border-radius:.75rem;box-shadow:0 1px 8px 0 rgba(0,0,0,.06);margin-top:1.5rem;}body.index #contact .contact-details p,body.contact-page #contact .contact-details p{font-size:var(--fs-body);margin-bottom:.5rem;display:flex;flex-wrap:wrap;align-items:center;}body.index #contact .contact-details strong,body.contact-page #contact .contact-details strong{min-width:80px;font-weight:var(--fw-semi);color:#0a2342;margin-right:.5rem;}body.index #contact .contact-details a,body.contact-page #contact .contact-details a{color:#0ea5e9;word-break:break-all;}}
body.index .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;}body.index .reveal.show{opacity:1;transform:translateY(0);} 
.hero-heading{font-family:var(--font-serif);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);text-wrap:balance;}
body.index section{padding:0;margin-top:0;margin-bottom:0;}
/* Controlled section gaps - padding only, no margin */
body.index main>section{margin-top:0;}
body.index main>section:first-of-type{margin-top:0;}
body.index main>#socials{margin-top:0;}
.card{transition:transform .25s ease,box-shadow .25s ease;}@media (min-width:640px){.card:hover,.card:focus-visible{box-shadow:0 8px 32px 0 rgba(16,42,67,.18),0 1.5px 6px 0 rgba(16,42,67,.10);transform:translateY(-6px) scale(1.02);}}
/* Reduced motion: keep services grid static */
@media (prefers-reduced-motion:reduce){
  #services .service-card,#services .service-card *{transition:none!important;}
  #services .service-card:hover,#services .service-card:focus-within{transform:none!important;box-shadow:0 4px 14px -4px rgba(0,0,0,.12)!important;}
  #services .service-card::after{content:none!important;}
}
/* Mobile header overlay: make icons white and add subtle shadow for contrast */
@media (max-width:767px){
  /* Respect iOS safe-area on notched devices so header content (logo) isn't clipped under status bar */
  #mobileHeader{
    padding-top: constant(safe-area-inset-top); /* iOS 11 */
    padding-top: env(safe-area-inset-top);      /* modern iOS */
  }
  /* Also offset the slide-out drawer so its top bar isn't clipped */
  #mobileHeader #mobileNav{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }
  /* Remove internal top padding in header container to eliminate gap above logo */
  #mobileHeader > div{padding-top:0!important;padding-bottom:0!important;}
  /* Override Tailwind fixed height and vertical centering to allow true flush top on mobile */
  #mobileHeader .h-24{height:auto!important;min-height:0!important;}
  /* Scope align-items override to only the topbar row and its immediate flex children (not the drawer) */
  #mobileHeader > div.flex{align-items:flex-start!important;}
  #mobileHeader > div.flex > .flex{align-items:flex-start!important;}
  /* Ensure comfortable tap targets in mobile drawer */
  #mobileHeader #mobileNav a,
  #mobileHeader #mobileNav button{
    min-height:44px;
    padding-block:.5rem;
  }
  /* Restrict white phone fill to top bar only (header-phone) so dropdown retains original colors */
  #mobileHeader a.header-phone .icon-phone svg path{fill:white!important;}
  /* Restrict white stroke to hamburger icon only */
  #mobileHeader #hamburgerIcon line{stroke:white!important;}
  #mobileHeader a,#mobileHeader button{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
}
/* Mobile drawer: remove all shadows/highlights inside dropdown menu */
@media (max-width:767px){
  /* Remove outer drawer shadow set via Tailwind 'shadow-lg' */
  #mobileHeader #mobileNav{box-shadow:none!important;}
  /* Neutralize link/button drop-shadows inherited from header */
  #mobileHeader #mobileNav a,
  #mobileHeader #mobileNav button{filter:none!important;box-shadow:none!important;text-shadow:none!important;}
}
/* Index (home) page only: add a subtle 2% top gap above the logo on mobile, while preserving safe-area inset */
@media (max-width:767px){
  body.index #mobileHeader{
    /* iOS 11 legacy + modern iOS safe-area, plus small viewport-based gap */
    padding-top: calc(constant(safe-area-inset-top) + 2vh);
    padding-top: calc(env(safe-area-inset-top) + 2vh);
  }
}
/* All pages mobile: consistent logo size matching home page */
@media (max-width:767px){
  header .site-logo{
    background:transparent!important;
    mix-blend-mode:normal!important;
    -webkit-mask-image:none;
    mask-image:none;
    filter:none!important;
    max-height:clamp(54px,15vw,74px) !important;
  }
  /* Mobile hero tagline tuning (premium) */
  .mobile-tagline{
    font-weight:var(--fw-bold);
    color:#fff;
    letter-spacing:var(--ls-wider);
    font-size:clamp(1.0625rem,4.5vw,1.35rem);
    line-height:1.5;
  }
}
.about-copy .about-p,#contact .contact-copy p{
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  -webkit-hyphens:none;
  word-spacing:-0.02em;
  text-wrap:pretty;
}
@media (max-width:640px){
  .about-copy .about-p,#contact .contact-copy p{ text-align:left; word-spacing:normal; }
}
/* Make About Us body text bright black for higher contrast on white */
.about-copy .about-p{color:#000!important;}
/* Mobile (<640px): increase About Us paragraph font size for better readability */
@media (max-width:639px){
  .about-copy .about-p{font-size:var(--fs-body)!important;line-height:var(--lh-body)!important;}
}
#contact .contact-copy p{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-relaxed);letter-spacing:var(--ls-normal);}@media (min-width:640px){#contact .contact-copy p{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);}}
#contact .contact-copy strong{font-weight:var(--fw-bold);color:#0a2342;}
#contact .contact-details{background:#fafcff;}

/* --- Contact form: dark style (Nov 2025) --- */
/* Goal: Match dark mockup while keeping existing fields/validation */
/* Charcoal background to match provided mockup (not pure black) */
/* Contact section ash background (slightly lighter than previous charcoal) */
body.index #contact,
body.contact-page #contact{background:#2b2e31!important;color:#e5e7eb;}
body.index #contact a,
body.contact-page #contact a{color:#fde047;} /* yellow-300 for links on dark */
body.index #contact a:hover,
body.contact-page #contact a:hover{color:#facc15;}

/* Make the form transparent (no card), remove border/shadow */
body.index #contactForm,
body.contact-page #contactForm{background:transparent!important;border:none!important;box-shadow:none!important;}

/* Labels on dark */
/* Slightly lighter labels to match mock */
body.index #contactForm label,
body.contact-page #contactForm label{color:#e5e7eb;} /* slate-200 */

/* Underline-only inputs on dark */
body.index #contactForm .input,
body.index #contactForm input,
body.index #contactForm textarea,
body.index #contactForm select,
body.contact-page #contactForm .input,
body.contact-page #contactForm input,
body.contact-page #contactForm textarea,
body.contact-page #contactForm select{
  background:transparent!important;
  color:#e5e7eb!important; /* slate-200 */
  border:none!important;
  border-bottom:1px solid rgba(255,255,255,0.85)!important; /* white underline base */
  border-radius:0!important;
  padding-left:0.25rem!important;
  padding-right:0.25rem!important;
  box-shadow:none!important;
  caret-color:#facc15; /* yellow-400 */
}
/* Focus state: brighter underline */
body.index #contactForm .input:focus,
body.index #contactForm input:focus,
body.index #contactForm textarea:focus,
body.index #contactForm select:focus,
body.contact-page #contactForm .input:focus,
body.contact-page #contactForm input:focus,
body.contact-page #contactForm textarea:focus,
body.contact-page #contactForm select:focus{
  outline:none!important;
  border-bottom-color:#facc15!important; /* yellow */
  box-shadow:0 2px 10px -2px rgba(250,204,21,0.6)!important; /* yellow glow */
}
/* Placeholder color on dark */
body.index #contactForm ::placeholder,
body.contact-page #contactForm ::placeholder{color:#94a3b8;opacity:1;}

/* Character counter + assist rows on dark */
body.index #contactForm .assist-row,
body.contact-page #contactForm .assist-row{color:#94a3b8;}
body.index #cf-message-count,
body.contact-page #cf-message-count{color:#9ca3af;}

/* Consent checkbox text */
body.index #contactForm #cf-consent + label,
body.contact-page #contactForm #cf-consent + label{color:#e5e7eb;}

/* Submit button: pill outline yellow, invert on hover */
body.index #contactForm #contactSubmitBtn,
body.contact-page #contactForm #contactSubmitBtn{
  background:transparent!important;
  color:#ffffff!important;
  border:2px solid #facc15!important;
  border-radius:9999px!important;
  box-shadow:none!important;
}
body.index #contactForm #contactSubmitBtn:hover,
body.index #contactForm #contactSubmitBtn:focus,
body.contact-page #contactForm #contactSubmitBtn:hover,
body.contact-page #contactForm #contactSubmitBtn:focus{
  background:#facc15!important;
  color:#111827!important; /* slate-900 */
}

/* Error messages remain red for visibility; adjust underline when invalid */
body.index #contactForm [aria-invalid="true"],
body.contact-page #contactForm [aria-invalid="true"]{border-bottom-color:#f87171!important;} /* red-400 */
body.index #contactForm [aria-invalid="true"],
body.contact-page #contactForm [aria-invalid="true"]{box-shadow:0 2px 8px -2px rgba(248,113,113,0.55)!important;}

/* --- RFQ Popup: dark style to match contact (Nov 2025) --- */
/* Modal panel background and text */
#popupModal .rounded-2xl.bg-white{background:#1f1b16!important;color:#e5e7eb!important;border:1px solid #3f4248!important;}
#popupModal h2{color:#e5e7eb!important;}

/* Underline-only inputs inside popup */
#popupModal .input,
#popupModal input,
#popupModal textarea,
#popupModal select{
  background:transparent!important;
  color:#e5e7eb!important;
  border:none!important;
  border-bottom:1px solid rgba(255,255,255,0.85)!important;
  border-radius:0!important;
  padding-left:.25rem!important;
  padding-right:.25rem!important;
  box-shadow:none!important;
  caret-color:#facc15;
}
#popupModal .input:focus,
#popupModal input:focus,
#popupModal textarea:focus,
#popupModal select:focus{
  outline:none!important;
  border-bottom-color:#facc15!important;
  box-shadow:0 2px 10px -2px rgba(250,204,21,0.6)!important;
}
#popupModal ::placeholder{color:#94a3b8;opacity:1;}

/* Submit button: pill outline yellow */
#popupModal button[type="submit"]{
  background:transparent!important;
  color:#ffffff!important;
  border:2px solid #facc15!important;
  border-radius:9999px!important;
  box-shadow:none!important;
}
#popupModal button[type="submit"]:hover,
#popupModal button[type="submit"]:focus{
  background:#facc15!important;
  color:#111827!important;
}

/* Popup status text */
#popupFormStatus{color:#e5e7eb!important;}

/* Remove gap above Connect with us section (#socials) */
/* Socials spacing - overridden by premium spacing block at end of file for index */
/* Keep this for non-index pages (catalog pages) */
body:not(.index) #socials{padding-top:1rem!important;padding-bottom:1rem!important;}
@media (min-width:640px){body:not(.index) #socials{padding-top:1.25rem!important;padding-bottom:1.25rem!important;}}
@media (min-width:1024px){body:not(.index) #socials{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}}
/* Footer section is also #socials - zero its bottom padding (specificity 2,0,0 beats above 1,1,1) */
#socials:has(#brandFooter){padding-bottom:0 !important;}
/* Contact section bottom padding - use body.index for specificity */
body.index #contact{padding-bottom:1rem!important;}
@media (min-width:640px){body.index #contact{padding-bottom:1.25rem!important;}}
@media (min-width:1024px){body.index #contact{padding-bottom:2rem!important;}}

/* --- Brand Footer Panel (under socials) --- */
/* Subtle black glassline under socials logos to separate from content below */
#socials #socialLinks{position:relative;padding-bottom:2.25rem;}
#socials #socialLinks::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:.4rem; /* sits within the increased padding */
  width:100vw; /* full viewport width */
  height:2px;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.45), rgba(0,0,0,0));
  border-radius:9999px;
  box-shadow:0 6px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
  opacity:.9;
  pointer-events:none;
}
/* === Brand footer - enhanced v3: icon badges, accent lines, arrow hover === */

/* Parent section gets a subtle blue-gray background so the footer stands apart */
section:has(#brandFooter){background:#fafcff;padding-bottom:0 !important;}

#brandFooter.brand-footer-panel{background:transparent;border:none;border-radius:0;padding:0 0 1.25rem;}
@media (min-width:640px){#brandFooter.brand-footer-panel{padding:0 0 1.25rem;}}

/* Force correct 5/3/4 column spans - md:col-span-4 is absent from the prebuilt Tailwind partial */
@media (min-width:768px){
  #brandFooter .grid>div:nth-child(1){grid-column:span 5;}
  #brandFooter .grid>div:nth-child(2){grid-column:span 3;}
  #brandFooter .grid>div:nth-child(3){grid-column:span 4;}
}

/* Section headings: compact uppercase with 2px orange accent underline */
#brandFooter .brand-footer-h{font-family:var(--font-sans);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#0a2342;font-size:0.9rem;margin:0 0 0.85rem 0;position:relative;padding-bottom:0.65rem;}
#brandFooter .brand-footer-h::after{content:'';position:absolute;bottom:0;left:0;width:1.5rem;height:2px;background:#ED8936;border-radius:2px;}

/* Brand description */
#brandFooter .brand-footer-lead{color:#1e293b;line-height:1.62;font-weight:var(--fw-regular);letter-spacing:var(--ls-normal);font-size:0.825rem;text-align:left;}
@media (max-width:639px){#brandFooter .brand-footer-lead{font-size:1rem;line-height:1.65;}}
@media (min-width:640px){#brandFooter .brand-footer-lead{font-size:1rem;line-height:1.65;}}

/* Brand name/meta */
#brandFooter .brand-footer-name{font-family:var(--font-sans);font-weight:var(--fw-bold);color:#0a2342;font-size:var(--fs-h4);margin:0 0 .65rem 0;letter-spacing:var(--ls-snug);}
#brandFooter .brand-footer-meta{color:#64748b;font-size:var(--fs-footer-sm);line-height:var(--lh-body);margin-top:0.5rem;letter-spacing:var(--ls-normal);}

/* Logo */
#brandFooter .brand-footer-logo{width:160px;max-width:100%;height:auto;display:block;object-fit:contain;}
@media (max-width:767px){#brandFooter .brand-footer-logo{width:auto;height:clamp(54px,15vw,74px);}}
@media (min-width:640px){#brandFooter .brand-footer-logo{width:200px;}}
@media (min-width:1024px){#brandFooter .brand-footer-logo{width:220px;}}

/* Quick links: clean non-underlined with animated › arrow on hover */
#brandFooter .brand-footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.55rem;}
#brandFooter .brand-footer-list li{position:relative;padding-left:0;transition:padding-left 0.22s cubic-bezier(.22,1,.36,1);}
#brandFooter .brand-footer-list li::before{content:'›';color:#ED8936;font-size:1.1rem;font-weight:700;position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(-3px);opacity:0;transition:opacity 0.22s,transform 0.22s;line-height:1;}
#brandFooter .brand-footer-list li:hover{padding-left:0.9rem;}
#brandFooter .brand-footer-list li:hover::before{opacity:1;transform:translateY(-50%) translateX(0);}
#brandFooter .brand-footer-list a{color:#0a0a0a;text-decoration:none;font-weight:600;font-size:1rem;transition:color 0.2s;display:block;}
#brandFooter .brand-footer-list a:hover{color:#0a2342;}

/* Contact section */
#brandFooter .brand-footer-contact{display:flex;flex-direction:column;gap:1rem;color:#334155;}
#brandFooter .brand-footer-contact p{margin:0;}

/* Contact item: icon badge + label + value */
.contact-item{display:flex;align-items:flex-start;gap:0.75rem;}

.ci-label{display:block;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.07em;color:#475569;line-height:1;margin-bottom:0.25rem;}
.ci-val{display:block;font-size:0.9375rem;color:#0a2342;font-weight:600;line-height:1.45;}

/* Contact links - no underline, hover turns orange */
#brandFooter .brand-footer-contact .ci-val a,
#brandFooter .brand-footer-contact .brand-footer-link{color:#0a2342;text-decoration:none;font-weight:600;transition:color 0.2s;}
#brandFooter .brand-footer-contact .ci-val a:hover,
#brandFooter .brand-footer-contact .brand-footer-link:hover{color:#ED8936;}

#brandFooter .brand-footer-legal{margin-top:1rem;display:flex;flex-direction:column;gap:.6rem;list-style:none;padding:0;}
#brandFooter .brand-footer-legal a{color:#0a2342;font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}

/* Blue copyright bar */
footer.sticky-footer .py-5{padding-block:1rem;gap:.4rem;}
footer.sticky-footer .py-5 p{margin-block:0;}

/* --- Social Links Interactive Effects (Nov 2025) --- */
/* Goal: Provide subtle lift, icon emphasis, and brand color hint on hover/focus while keeping mobile minimal */
#socialLinks a{transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s cubic-bezier(.19,1,.22,1),background-color .35s ease,border-color .35s ease,color .3s ease,filter .4s;position:relative;will-change:transform,box-shadow;}
#socialLinks a img{transition:transform .6s cubic-bezier(.19,1,.22,1),filter .5s ease;}
@media (min-width:640px){#socialLinks a{border-radius:1.5rem;}}
/* Hover / keyboard focus: lift + scale */
#socialLinks a:hover,#socialLinks a:focus-visible{transform:translateY(-5px) scale(1.035);box-shadow:0 12px 32px -14px rgba(0,0,0,.24),0 6px 20px -10px rgba(36,67,122,.15);background:#fff;}
#socialLinks a:hover img,#socialLinks a:focus-visible img{transform:scale(1.09);filter:saturate(1.15) contrast(1.05);}
/* Active (pressed) state: slight compress */
#socialLinks a:active{transform:translateY(-2px) scale(.98);box-shadow:0 6px 18px -8px rgba(0,0,0,.26),0 3px 10px -6px rgba(36,67,122,.2);}
/* Mobile: gentler motion & shadow */
@media (max-width:639px){#socialLinks a:hover,#socialLinks a:focus-visible{transform:translateY(-3px) scale(1.025);box-shadow:0 8px 22px -12px rgba(0,0,0,.22),0 4px 12px -8px rgba(36,67,122,.16);}}
/* Brand color accents for label text on larger screens */
#socialLinks a[aria-label^="LinkedIn"]:hover span:not(.sr-only),#socialLinks a[aria-label^="LinkedIn"]:focus-visible span:not(.sr-only){color:#0A66C2!important;}
#socialLinks a[aria-label^="Instagram"]:hover span:not(.sr-only),#socialLinks a[aria-label^="Instagram"]:focus-visible span:not(.sr-only){color:#d6249f!important;}
#socialLinks a[aria-label^="X"]:hover span:not(.sr-only),#socialLinks a[aria-label^="X"]:focus-visible span:not(.sr-only){color:#000!important;}
/* Reduced motion: disable transforms */
@media (prefers-reduced-motion:reduce){
  #socialLinks a,#socialLinks a *{transition:none!important;}
  #socialLinks a:hover,#socialLinks a:focus-visible{transform:none!important;box-shadow:0 4px 14px -4px rgba(0,0,0,.12)!important;}
  #socialLinks a:hover img,#socialLinks a:focus-visible img{transform:none!important;filter:none!important;}
}

/* ── MOBILE-ONLY 2-COLUMN PRODUCT GRID ── */
@media (max-width:767px){
  /* Grid + hero: matching edge-to-edge padding */
  .product-grid{gap:0.5rem!important;}
  section[class*="pb-8"] > .max-w-7xl,
  section[class*="pt-3"] > .max-w-7xl{padding-left:0.5rem!important;padding-right:0.5rem!important;}

  /* Hero banner: edge-to-edge, tighter padding */
  section[class*="pt-3"] .bg-\[\#fbbf24\]{
    border-radius:0.875rem!important;
    padding:1rem 0.875rem!important;
    min-height:auto!important;
  }
  section[class*="pt-3"] .bg-\[\#fbbf24\] h1{font-size:1.5rem!important;margin-bottom:0.25rem!important;}
  section[class*="pt-3"] .bg-\[\#fbbf24\] nav{font-size:0.75rem!important;margin-top:0.375rem!important;}
  section[class*="pt-3"] .bg-\[\#fbbf24\] p{font-size:0.8125rem!important;margin-top:0.5rem!important;line-height:1.5!important;}

  /* Card: premium elevated look */
  .product-grid > article{
    display:flex!important;flex-direction:column!important;height:100%!important;
    border-radius:1.125rem!important;
    border:none!important;
    box-shadow:0 1px 3px rgba(10,35,66,0.06), 0 4px 16px -4px rgba(10,35,66,0.10)!important;
    background:#fff!important;
    transition:box-shadow 0.3s ease, transform 0.3s ease!important;
  }
  .product-grid > article:active{
    transform:scale(0.97)!important;
    box-shadow:0 1px 6px rgba(10,35,66,0.12)!important;
  }

  /* Image container: square with soft bg */
  .product-grid > article > div:first-child{
    overflow:hidden!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    background:linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%)!important;
    border-radius:1.125rem 1.125rem 0 0!important;
    position:relative!important;
  }
  .product-grid > article > div:first-child img{
    width:100%!important;height:100%!important;
    max-width:100%!important;max-height:100%!important;
    transition:transform 0.4s ease!important;
  }
  /* Photos: fill edge-to-edge */
  .product-grid > article > div:first-child img.object-fill{
    object-fit:cover!important;padding:0!important;
  }
  /* PNGs on transparent bg: contain with padding */
  .product-grid > article > div:first-child img.object-contain,
  .product-grid > article > div:first-child img[class*="max-w-full"]{
    object-fit:contain!important;padding:0.75rem!important;
  }

  /* Divider line between image and content */
  .product-grid > article > div:last-child{
    flex:1!important;display:flex!important;flex-direction:column!important;
    padding:0.75rem 0.75rem 0.75rem!important;
    border-top:1px solid rgba(10,35,66,0.06)!important;
  }

  /* Title: bold and navy */
  .product-grid > article > div:last-child h3{
    flex:1 1 auto!important;
    font-size:0.8125rem!important;
    line-height:1.45!important;
    min-height:2.4em!important;
    margin-bottom:0.625rem!important;
    font-weight:700!important;
    color:#0a2342!important;
    letter-spacing:-0.01em!important;
  }

  /* Get Quote button: branded, tactile */
  .product-grid > article > div:last-child a{
    display:flex!important;align-items:center!important;justify-content:center!important;
    margin-top:auto!important;align-self:stretch!important;
    font-size:0.8125rem!important;
    font-weight:800!important;
    padding:0.625rem 0.5rem!important;
    width:100%!important;
    border-radius:0.625rem!important;
    background:#0a2342!important;
    color:#fff!important;
    box-shadow:0 2px 8px -2px rgba(10,35,66,0.3)!important;
    letter-spacing:0.02em!important;
    transition:background 0.2s ease, box-shadow 0.2s ease!important;
  }
  .product-grid > article > div:last-child a:active{
    background:#0f3460!important;
    box-shadow:0 1px 4px rgba(10,35,66,0.2)!important;
  }
}
@media (max-width:374px){
  .product-grid > article > div:last-child h3{font-size:0.75rem!important;min-height:2.2em!important;}
  .product-grid > article > div:last-child a{font-size:0.75rem!important;padding:0.5rem!important;}
}

/* ── RESPONSIVENESS IMPROVEMENTS ── */

/* Product banners: reduce min-height on small screens */
@media (max-width:639px){
  .tab-banner .relative.flex.flex-col,
  .agri-banner .relative.flex.flex-col{min-height:280px!important;padding:1.75rem 1.25rem!important;}
  .tab-banner h2,.agri-banner h2{font-size:clamp(1.75rem,7vw,2.5rem)!important;}
}
@media (max-width:374px){
  .tab-banner .relative.flex.flex-col,
  .agri-banner .relative.flex.flex-col{min-height:240px!important;padding:1.5rem 1rem!important;}
}

/* Bento grid advantage cards: reduce min-height on mobile */
@media (max-width:767px){
  .advantage-card{min-height:auto!important;padding:1.75rem!important;}
  .advantage-card span[style*="font-size:140px"],
  .advantage-card span[style*="font-size:120px"]{font-size:80px!important;}
}

/* Hero: shorter on landscape phones */
@media (max-height:480px) and (orientation:landscape){
  .hero-with-video{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;}
}

/* Welcome section: tighter spacing on mobile */
@media (max-width:639px){
  .welcome-section .mb-10{margin-bottom:1.75rem!important;}
  .welcome-section .mb-12{margin-bottom:2rem!important;}
  .welcome-section .mb-14{margin-bottom:2.5rem!important;}
  .welcome-section p.text-base{font-size:0.9375rem!important;line-height:1.7!important;}
}

/* Contact form: consistent field spacing on mobile */
@media (max-width:639px){
  body.index #contactForm .field-row{min-height:auto!important;margin-bottom:0.25rem;}
  body.index #contactForm .grid.gap-0{gap:0!important;}
}

/* Featured products: tighter items on very small screens */
@media (max-width:374px){
  .featured-item-frame{max-width:180px!important;}
  .featured-item-name{font-size:0.8125rem!important;}
}

/* Services cards: prevent text overflow on narrow screens */
@media (max-width:374px){
  #services .service-card{padding:1.5rem!important;}
  #services .service-card h3{font-size:1rem!important;}
}

/* Brand footer: tighter mobile layout */
@media (max-width:767px){
  #brandFooter .grid{gap:1.5rem!important;}
  #brandFooter .brand-footer-list{gap:0.4rem;}
  #brandFooter .brand-footer-list a{font-size:0.9375rem;}
}

/* Sticky footer: safe area padding for notched phones */
footer.sticky-footer{padding-bottom:env(safe-area-inset-bottom,0);}

/* Prevent horizontal overflow from any absolute positioned decorative elements */
@media (max-width:767px){
  .advantage-card .absolute.w-80,
  .advantage-card .absolute.w-64,
  .advantage-card .absolute.w-56{display:none!important;}
}

/* Social icons: slightly larger tap targets on mobile */
@media (max-width:639px){
  #socialLinks a img{width:3rem!important;height:3rem!important;}
}

/* Contact form width (narrower on tablet/desktop) */
/* Responsive width tiers for contact form */
@media (min-width:640px){ /* sm */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:36rem!important;}
}
@media (min-width:1024px){ /* lg */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:40rem!important;}
}
@media (min-width:1280px){ /* xl */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:44rem!important;}
}
@media (min-width:1536px){ /* 2xl */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:48rem!important;}
}

/* 25. Global responsive hardening (site-wide) */
/* Prevent flex/grid children from forcing overflow on narrow devices */
:where(.flex, .grid) > *{min-width:0;}

/* Keep desktop dropdown within viewport bounds */
#desktopProductsDropdownMenu{
  max-width:min(92vw, 22rem);
}

/* Make mobile drawer robust on all pages, including long menus */
#mobileNav{
  max-width:100vw;
  max-height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#mobileNav ul{
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);
}

/* Tablet optimization: avoid cramped 4-column product grids at md widths */
@media (min-width:768px) and (max-width:1023px){
  .grid.md\:grid-cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Index marquee cards: tighter, safer sizing on very small screens */
@media (max-width:480px){
  .featured-item{
    width:min(44vw, 220px)!important;
    max-width:44vw!important;
  }
  .featured-item-img{
    max-width:100%!important;
  }
  .featured-item-name{
    font-size:0.75rem!important;
    line-height:1.35!important;
    overflow-wrap:anywhere;
  }
}

/* Long contact values (email/phone) should wrap instead of pushing layout */
.header-contact,
.header-contact-link,
#brandFooter .brand-footer-link{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Reduce side paddings globally for ultra-small devices */
@media (max-width:359px){
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl{
    padding-left:0.75rem!important;
    padding-right:0.75rem!important;
  }
}

/* Several pages use lg:whitespace-nowrap for taglines; allow wrapping on smaller laptops */
@media (max-width:1279px){
  .lg\:whitespace-nowrap{white-space:normal!important;}
}

/* ============================================================
   Mobile Nav - Full-screen overlay (Reliance-style)
   Overrides the narrow slide-in panel on all pages.
   All rules are unlayered so they beat Tailwind @layer utilities.
   ============================================================ */

/* 1. Expand to full screen + brand-navy background */
#mobileNav{
  inset:0 !important;
  width:100% !important;
  max-width:100% !important;
  background:#0a2342 !important;
  box-shadow:none !important;
  display:flex;
  flex-direction:column;
}

/* 2. The dark JS-injected overlay is redundant now (nav IS the overlay) */
#mobileOverlay{display:none !important;}

/* 3. Header row: logo left, white × right */
#mobileNav > div.flex{
  padding:1.1rem 1.5rem !important;
  align-items:center;
}
/* Logo image inside nav header - invert to white on dark bg */
.mobile-nav-logo{
  height:auto;
  max-height:clamp(54px,15vw,74px);
  width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1);
  display:block;
}
/* Close × button */
#mobileNav #closeMenuBtn svg{stroke:#fff !important;width:1.75rem;height:1.75rem;}

/* 4. Nav list: remove white-bg padding/gap, use full-bleed rows */
#mobileNav > ul{
  padding:0 !important;
  gap:0 !important;
  flex:1;
}
/* Each top-level item: left+right padding, bottom separator */
#mobileNav > ul > li{
  padding:0 1.5rem;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* Top-level links + Products toggle button */
#mobileNav > ul > li > a,
#mobileNav > ul > li > button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  padding:1.1rem 0 !important;
  color:#fff !important;
  font-size:1.1rem !important;
  font-weight:500 !important;
  letter-spacing:.01em;
  background:transparent !important;
}
/* Chevron icon on Products button */
#mobileNav > ul > li > button svg{stroke:#fff !important;opacity:.85;}

/* 5. Products sub-menu: two-level nested structure
   Level 1 (#productsDropdownMenu): Tableware + Agri Commodities category rows
   Level 2 (#tablewareDropdownMenu, #agriDropdownMenu): individual product links */

#productsDropdownMenu{
  margin:0 -1.5rem !important;
  padding:0 !important;
  background:rgba(255,255,255,.06);
  border-radius:0 !important;
}
/* Category header rows (Tableware / Agri Commodities) */
#productsDropdownMenu > li{
  padding:0 1.5rem 0 3rem !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#productsDropdownMenu > li:last-child{border-bottom:none;}
/* Category toggle buttons */
#productsDropdownMenu > li > button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  padding:.9rem 0 !important;
  color:#fff !important;
  font-size:.95rem !important;
  font-weight:600 !important;
  background:transparent !important;
  letter-spacing:.04em;
  white-space:nowrap;
}
/* Constrain the chevron SVG - w-3/h-3 Tailwind classes may not be compiled */
#productsDropdownMenu > li > button svg{
  stroke:rgba(255,255,255,.7) !important;
  width:1rem !important;
  height:1rem !important;
  flex-shrink:0;
}
/* Level-2: individual product lists */
#tablewareDropdownMenu,
#agriDropdownMenu{
  margin:0 -3rem 0 -3rem !important;
  padding:0 !important;
  background:rgba(255,255,255,.05);
}
#tablewareDropdownMenu li,
#agriDropdownMenu li{
  padding:0 1.5rem 0 5rem !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#tablewareDropdownMenu li:last-child,
#agriDropdownMenu li:last-child{border-bottom:none;}
#tablewareDropdownMenu li a,
#agriDropdownMenu li a{
  display:block;
  padding:.65rem 0 !important;
  margin:0 !important;
  color:rgba(255,255,255,.65) !important;
  font-size:.88rem !important;
  font-weight:400 !important;
}

/* 6. Contact items (email + phone at bottom of list) */
#mobileNav ul > li > a.header-contact{
  color:rgba(255,255,255,.7) !important;
  font-size:.95rem !important;
  gap:.75rem;
}
/* Hide the decorative circular SVG icons in nav - show contact as clean text only */
#mobileNav .icon-mail,
#mobileNav .icon-phone{display:none !important;}

/* 7. Safe-area bottom padding for notched phones */
#mobileNav > ul{
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.5rem) !important;
}

/* =============================================================
   HOME PAGE - TIGHTER SECTION SPACING
   Reduces the default Tailwind py-10/py-20 values down.
   Unlayered → beats all @layer utilities.
   ============================================================= */

/* All main sections: controlled vertical rhythm
   margin-top is now 0 on all sections (see rule above),
   so inter-section gap = pb of prev + pt of next. */
.welcome-section,
.featured-products,
#products,
#advantages,
#socials{
  padding-top:    2rem !important;
  padding-bottom: 2rem !important;
}
#contact{
  padding-top:    1.25rem !important;
}
body.index #contact{
  padding-bottom: 1.25rem !important;
}

/* Tablet 640px+ */
@media (min-width:640px){
  .welcome-section,
  .featured-products,
  #products,
  #advantages,
  #socials{ padding-top:2.5rem !important; padding-bottom:2.5rem !important; }
  #contact{ padding-top:1.5rem !important; }
  body.index #contact{ padding-bottom:1.5rem !important; }
}

/* Desktop 1024px+ */
@media (min-width:1024px){
  .welcome-section,
  .featured-products,
  #products,
  #advantages,
  #socials{ padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
  #contact{ padding-top:2rem !important; }
  body.index #contact{ padding-bottom:2rem !important; }
}

/* ── Welcome section: tighten internal element spacing ── */
.welcome-section h2{ margin-bottom:0.75rem !important; }
.welcome-section .w-24{ margin-bottom:1rem !important; }
.welcome-section p{ margin-bottom:1.25rem !important; }

/* ── Featured products: tighten heading gap ── */
.featured-products-heading{ margin-bottom:0.25rem !important; }
.featured-products .w-16{ margin-bottom:1rem !important; }

/* ── Products section: tighter heading block ── */
#products .text-center.w-full{ margin-bottom:1.25rem !important; }
#products .w-16.h-\[3px\]{ margin-top:0.5rem !important; margin-bottom:0.5rem !important; }
#products .agri-banner{ margin-top:0 !important; }

/* ── Advantages: tighter header + grid ── */
#advantages .flex.flex-col.lg\:flex-row{ margin-bottom:1.5rem !important; }
#advantages .bento-grid{ gap:0.75rem !important; }

/* ── Contact: tighten heading block ── */
#contact .text-center.mt-4{ margin-top:0 !important; margin-bottom:1rem !important; }

/* ── Socials: tighter internal gaps ── */
#socials .w-16{ margin-top:0.5rem !important; margin-bottom:0.75rem !important; }
#socials .mt-6{ margin-top:1rem !important; }
#brandFooter{ margin-top:1.5rem !important; }

/* ── ALL NON-HOME PAGES: same tight section spacing ─────────────────
   Matches the home page rhythm (1rem / 1.25rem / 1.5rem per side).
   Named hero banners (.about-hero, .ct-hero, .svc-hero) are excluded
   so they keep their full-bleed appearance unchanged. */
body:not(.index) main>section:not(.about-hero):not(.ct-hero):not(.svc-hero):not(.hero-with-video):not(:has(#brandFooter)){
  padding-top:    1rem !important;
  padding-bottom: 1rem !important;
  margin-top:     0    !important;
  margin-bottom:  0    !important;
}
@media (min-width:640px){
  body:not(.index) main>section:not(.about-hero):not(.ct-hero):not(.svc-hero):not(.hero-with-video):not(:has(#brandFooter)){
    padding-top:    1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}
@media (min-width:1024px){
  body:not(.index) main>section:not(.about-hero):not(.ct-hero):not(.svc-hero):not(.hero-with-video):not(:has(#brandFooter)){
    padding-top:    1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ===== Global page background (#fafcff everywhere white appears as a section/page bg) ===== */
/* body bg already set above; these cover Tailwind bg-white on sections, headers, wrappers */
section.bg-white,
main.bg-white,
div.bg-white:not(article):not(#mobileNav):not([role="menu"]):not(#desktopProductsDropdownMenu):not(#popupModal *) { background-color: #fafcff !important; }
/* Top contact bar stays white */
header.desktop-topbar { background-color: #ffffff !important; }
/* Nav bar and mobile nav: #01467e */
nav.desktop-nav { background-color: #01467e !important; }
#mobileNav { background-color: #01467e !important; }
/* Dropdown menus: keep pure white */
[role="menu"].bg-white, #desktopProductsDropdownMenu { background-color: #ffffff !important; }
/* Social link hover cards: keep white */
#socialLinks a:hover, #socialLinks a:focus-visible { background: #ffffff !important; }


/* ── INDEX PAGE COMPONENTS (consolidated from inline <style>) ── */
.welcome-section {
                position: relative;
                overflow: hidden;
                background: #fff;
                margin-top: 0;
            }

            .welcome-cta {
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .welcome-cta::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
                opacity: 0;
                transition: opacity 0.4s ease;
            }

            .welcome-cta:hover::before {
                opacity: 1;
            }

            .welcome-cta:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 32px -8px rgba(237, 137, 54, 0.4);
            }

            .hero-badge-text {
                font-size: 10px;
                font-weight: 900;
            }

            @media (min-width: 640px) {
                .hero-badge-text {
                    font-size: 15px;
                }
            }

            @media (min-width: 1024px) {
                .hero-badge-text {
                    font-size: 12px;
                    font-weight: 900;
                    letter-spacing: 0.14em;
                }
            }
.featured-products {
                background: #fafcff;
                overflow: hidden;
            }

            .featured-products-heading {
                text-align: center;
                font-size: clamp(1.5rem, 4vw, 2.25rem);
                font-weight: 800;
                color: #0a2342;
                letter-spacing: -0.02em;
                margin-bottom: 0.5rem;
            }

            .featured-track-wrapper {
                position: relative;
                width: 100%;
                overflow: hidden;
                -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
            }

            .featured-track {
                display: flex;
                gap: 0;
                width: max-content;
                will-change: transform;
                align-items: flex-start;
                cursor: grab;
                user-select: none;
                -webkit-user-select: none;
            }

            .featured-track.is-dragging {
                cursor: grabbing;
            }

            .featured-item {
                flex: 0 0 auto;
                width: calc((100vw - 2rem) / 2);
                max-width: 260px;
                padding: 0 0.5rem;
                text-align: center;
                text-decoration: none;
                color: inherit;
                cursor: pointer;
                transition: transform 0.3s ease;
            }

            .featured-item:hover {
                transform: translateY(-3px);
            }

            .featured-item-frame {
                width: 100%;
                max-width: 240px;
                height: 220px;
                margin: 0 auto 0.75rem;
                background: transparent;
                border: none;
                box-shadow: none;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                overflow: hidden;
            }

            .featured-item-img {
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
                display: block;
                min-height: 60px;
            }

            .featured-item-frame--agri {
                aspect-ratio: 1 / 1;
                height: auto;
            }

            .featured-item-frame--agri .featured-item-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 12px;
            }

            .featured-item-name {
                font-size: 0.8125rem;
                font-weight: 600;
                color: #1a1a1a;
                line-height: 1.4;
                max-width: 100%;
                margin: 0 auto;
                padding: 0 0.25rem;
            }

            @media (min-width: 640px) {
                .featured-track {
                    gap: 2.5rem;
                }
                .featured-item {
                    width: 220px;
                    max-width: 220px;
                    padding: 0;
                }
                .featured-item-frame {
                    max-width: 200px;
                }
                .featured-item-name {
                    font-size: 0.875rem;
                }
            }

            @media (min-width: 1024px) {
                .featured-track {
                    gap: 2rem;
                }
                .featured-item {
                    width: 260px;
                    max-width: 260px;
                }
                .featured-item-frame {
                    max-width: 230px;
                }
                .featured-item-name {
                    font-size: 0.9375rem;
                }
            }
.product-card {
                transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                border: 1px solid rgba(10, 35, 66, 0.06);
                box-shadow: 0 1px 3px rgba(10, 35, 66, 0.04);
            }

            .product-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 16px 40px -10px rgba(10, 35, 66, 0.13), 0 6px 16px -6px rgba(10, 35, 66, 0.06);
                border-color: rgba(10, 35, 66, 0.12);
            }

            .product-card .product-img {
                transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .product-card:hover .product-img {
                transform: scale(1.04);
            }

            .product-card .product-arrow {
                transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
                opacity: 0;
                transform: translateX(-8px);
            }

            .product-card:hover .product-arrow {
                opacity: 1;
                transform: translateX(0);
            }

            .product-card .product-label {
                transition: color 0.3s ease;
            }

            .product-card:hover .product-label {
                color: #ED8936;
            }
/* ── Premium banner styles ── */

.tab-banner,.agri-banner{
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),box-shadow 0.6s cubic-bezier(0.22,1,0.36,1);
  border:none;border-radius:1.25rem;
  box-shadow:0 4px 24px -6px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.06);
  overflow:hidden;
}
.tab-banner:hover,.agri-banner:hover{transform:translateY(-8px);}
.tab-banner:hover{box-shadow:0 28px 56px -16px rgba(251,191,36,0.28),0 12px 28px -8px rgba(0,0,0,0.12);}
.agri-banner:hover{box-shadow:0 28px 56px -16px rgba(22,163,74,0.28),0 12px 28px -8px rgba(0,0,0,0.12);}

/* Background zoom on hover */
.tab-banner img.tab-bg{transition:transform 1.2s cubic-bezier(0.22,1,0.36,1);width:100%;height:100%;}
.tab-banner:hover img.tab-bg{transform:scale(1.08);}
.agri-banner video{transition:transform 1.2s cubic-bezier(0.22,1,0.36,1);object-fit:cover;object-position:center 55%;}
.agri-banner:hover video{transform:scale(1.08);}

/* Accent line: animate width on hover */
.tab-banner .tab-line,.agri-banner .agri-line{width:0;transition:width 0.7s cubic-bezier(0.22,1,0.36,1);}
.tab-banner:hover .tab-line{width:72px;}
.agri-banner:hover .agri-line{width:72px;}

/* Arrow: slide in on hover */
.tab-banner .tab-arrow,.agri-banner .agri-arrow{transition:all 0.5s cubic-bezier(0.22,1,0.36,1);opacity:0;transform:translateX(-12px);}
.tab-banner:hover .tab-arrow,.agri-banner:hover .agri-arrow{opacity:1;transform:translateX(0);}

/* CTA button: lift + glow on hover */
.tab-banner .tab-cta,.agri-banner .agri-cta{transition:all 0.4s cubic-bezier(0.22,1,0.36,1);}
.tab-banner:hover .tab-cta{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 32px -6px rgba(237,137,54,0.55);}
.agri-banner:hover .agri-cta{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 32px -6px rgba(22,163,74,0.55);}

/* Badge: subtle pulse glow */
.tab-banner .inline-flex,.agri-banner .inline-flex{transition:background 0.4s ease,border-color 0.4s ease;}
.tab-banner:hover .inline-flex{background:rgba(251,191,36,0.12);border-color:rgba(251,191,36,0.3);}
.agri-banner:hover .inline-flex{background:rgba(74,222,128,0.12);border-color:rgba(74,222,128,0.3);}

/* Description: fade brighter on hover */
.tab-banner p,.agri-banner p{transition:color 0.4s ease;}
.tab-banner:hover p,.agri-banner:hover p{color:#fff!important;}

                    @media (min-width: 640px) {
                        .agri-banner video {
                            object-position: center 50%;
                        }
                    }

                    @media (min-width: 1024px) {
                        #products .banners-row {
                            display: flex;
                            flex-direction: row;
                            gap: 1.5rem;
                            align-items: flex-start;
                        }
                        #products .banners-row>a {
                            flex: 1 1 0;
                            min-width: 0;
                        }
                    }
.advantage-card {
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .advantage-card:hover {
                transform: translateY(-6px);
            }

            .advantage-card-dark:hover {
                box-shadow: 0 36px 72px -12px rgba(10, 35, 66, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
            }

            .advantage-card-green:hover {
                box-shadow: 0 36px 72px -12px rgba(5, 46, 22, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
            }

            .advantage-card-light-green:hover {
                box-shadow: 0 24px 56px -8px rgba(22, 163, 74, 0.24);
            }

            .advantage-card-light-blue:hover {
                box-shadow: 0 24px 56px -8px rgba(19, 78, 142, 0.24);
            }

            .advantage-icon {
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .advantage-card:hover .advantage-icon {
                transform: scale(1.1) rotate(-4deg);
            }

            @media (min-width: 768px) {
                .bento-grid {
                    grid-template-rows: auto auto;
                }
            }
.contact-section {
                position: relative;
                overflow: hidden;
            }

            .contact-section::before {
                content: '';
                position: absolute;
                top: -150px;
                right: -150px;
                width: 500px;
                height: 500px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(237, 137, 54, 0.06) 0%, transparent 70%);
                pointer-events: none;
            }

            .contact-section::after {
                content: '';
                position: absolute;
                bottom: -120px;
                left: -120px;
                width: 400px;
                height: 400px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(22, 163, 74, 0.04) 0%, transparent 70%);
                pointer-events: none;
            }

            .contact-form-card {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(16px);
                box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.2);
            }

            .contact-submit-btn {
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .contact-submit-btn::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
                opacity: 0;
                transition: opacity 0.4s ease;
            }

            .contact-submit-btn:hover::before {
                opacity: 1;
            }

            .contact-submit-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 32px -8px rgba(250, 204, 21, 0.35);
            }

            .contact-submit-btn .submit-arrow {
                transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .contact-submit-btn:hover .submit-arrow {
                transform: translateX(4px);
            }

            .contact-form-card .input {
                transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
            }

            .contact-form-card .input:focus {
                border-color: rgba(250, 204, 21, 0.45) !important;
                box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08) !important;
                background: rgba(255, 255, 255, 0.03) !important;
            }

            .contact-form-card .field-row {
                margin-bottom: 0;
            }

            .contact-form-card .assist-row {
                margin-top: 2px;
                margin-bottom: 0;
                min-height: 1rem;
            }