:root{
  --lime:#A3C239;
  --lime-deep:#84A22C;
  --lime-bright:#B9DB4D;
  --mint:#4FBFA3;
  --navy:#1D304E;
  --navy-darker:#0E1A2C;
  --ink:#0B0F14;
  --paper:#F7F9F2;
  --grey:#5B6B6F;
  --surface:#FFFFFF;
  --text-primary:#1D304E;
}

html[data-theme="dark"]{
  --paper:#0F1720;
  --surface:#16202C;
  --grey:#94A3AD;
  --text-primary:#F1F5F4;
  --navy:#0B141F;
  color-scheme: dark;
}
html[data-theme="dark"] body{ background:var(--paper); color:var(--text-primary); }
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [style*="background:#FFFFFF"],
html[data-theme="dark"] [style*="background:#fff"]{ background:var(--surface) !important; color:var(--text-primary); }
html[data-theme="dark"] .hairline{ border-color:#ffffff1a; }
html[data-theme="dark"] #site-header .bg-\[\#F7F9F2\]\/95{ background:rgba(15,23,32,0.95) !important; }

/* ---- Theme toggle switch ---- */
#theme-toggle{
  width:2.75rem; height:1.5rem; border-radius:999px; position:relative;
  background:#1D304E22; transition:background .2s ease; flex-shrink:0; cursor:pointer; border:none;
}
#theme-toggle::after{
  content:''; position:absolute; top:2px; left:2px; width:1.15rem; height:1.15rem; border-radius:999px;
  background:var(--navy); transition:transform .25s ease;
}
html[data-theme="dark"] #theme-toggle::after{ transform:translateX(1.25rem); background:var(--lime); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--navy);
  font-family:'Inter',sans-serif;
}
.font-display{font-family:'Space Grotesk',sans-serif;}
.font-mono{font-family:'IBM Plex Mono',monospace;}

/* ---- Gradient text & shining accents ---- */
.text-gradient{
  background:linear-gradient(100deg, var(--lime-deep) 0%, var(--mint) 55%, var(--navy) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bg-gradient-brand{ background:linear-gradient(120deg, var(--navy), #123049 45%, var(--navy-darker)); }
.bg-gradient-lime{ background:linear-gradient(120deg, var(--lime-bright), var(--lime) 60%, var(--mint)); }

.btn-glow{
  position:relative; transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
  box-shadow: 0 8px 24px -8px rgba(163,194,57,0.55);
}
.btn-glow:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow: 0 14px 32px -10px rgba(163,194,57,0.65); }

.btn-glow-navy{
  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
  box-shadow: 0 10px 28px -10px rgba(29,48,78,0.55);
}
.btn-glow-navy:hover{ transform:translateY(-2px); filter:brightness(1.1); box-shadow: 0 16px 36px -10px rgba(29,48,78,0.6); }

/* ---- Decorative gradient blobs ---- */
.blob{
  position:absolute; border-radius:999px; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0;
}

/* ---- Seal / signature motif ---- */
.seal{ position:relative; display:flex; align-items:center; justify-content:center; }
.seal svg{ width:100%; height:100%; }
.seal .ring-text{
  animation:spin 26s linear infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes spin{ to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .seal .ring-text{ animation:none; } }

/* ---- Scroll reveal ---- */
.reveal{
  opacity:0; transform:translateY(22px) scale(.985);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; opacity:1; }
}

/* ---- Text-specific reveal: headings/eyebrows blur into focus, site-wide ---- */
.reveal h1, .reveal h2, .reveal h3, .reveal > p.font-mono{
  filter:blur(6px);
  transition: filter .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible h1, .reveal.is-visible h2, .reveal.is-visible h3, .reveal.is-visible > p.font-mono{
  filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal h1, .reveal h2, .reveal h3, .reveal > p.font-mono{ filter:none; transition:none; }
}

/* ============================================================
   FIX: Override blur for Mission & Vision headings
   ============================================================ */
#about-mission-heading,
.reveal h2.mission-vision-heading,
.no-blur-heading {
  filter: blur(0) !important;
}

/* Alternatively, you can target headings inside the Mission section */
#about-mission-heading,
.about-mission-section h2 {
  filter: blur(0) !important;
}

/* ---- Animated word-by-word heading reveal ---- */
.animate-words .word{
  display:inline-block; opacity:0; transform:translateY(100%) rotate(2deg);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.animate-words.is-visible .word{ opacity:1; transform:translateY(0) rotate(0); }
@media (prefers-reduced-motion: reduce){
  .animate-words .word{ opacity:1; transform:none; transition:none; }
}

.hairline{ border-color:#1D304E1a; }

.card-hover{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover{ transform:translateY(-4px); box-shadow: 0 18px 40px -20px rgba(29,48,78,0.35); border-color:var(--lime); }

::selection{ background:var(--lime); color:var(--navy); }

/* ---- Focus visibility (accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

/* ---- Shared page hero band (subpages) ---- */
.page-hero{
  background:linear-gradient(160deg, var(--navy), var(--navy-darker));
  position:relative; overflow:hidden;
}

/* ---- Nav active state ---- */
.nav-active{ color:var(--lime-deep) !important; font-weight:600; }

/* ---- Product filter buttons ---- */
.filter-btn{
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn[aria-pressed="true"]{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}

/* ---- Simple fade for filtered-out cards ---- */
.product-card{
  position:relative; display:flex; flex-direction:column;
  transition: opacity .25s ease, transform .25s ease;
}
.product-card.hidden-card{ display:none; }
.product-card-box{ display:flex; flex-direction:column; flex:1; }

/* ---- Product photo (full image, never cropped) ---- */
.product-photo{
  position:relative; overflow:hidden; width:100%;
  background:linear-gradient(150deg, var(--navy) 0%, #24406b 55%, var(--mint) 130%);
}
.product-photo.has-photo{ background:#fff; }
.product-photo img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.product-photo .photo-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}

/* ---- Request-a-Quote bar: sits below the bordered card box, not inside it ---- */
.product-quote-bar{ margin-top:.75rem; }
.product-quote-bar a{ width:100%; }

/* ---- Header scroll state ---- */
#site-header{ transition: box-shadow .25s ease, background-color .25s ease; }
#site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(29,48,78,0.35); }

/* ---- Mobile nav ---- */
#mobile-nav{ }
#mobile-nav.hidden{ display:none; }

/* ---- Hover / focus switcher (specializations, flagship products) ---- */
[data-switch-trigger]{
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
[data-switch-trigger].is-active{
  background:var(--navy);
  border-color:var(--navy);
  box-shadow: 0 12px 28px -16px rgba(29,48,78,0.45);
}
[data-switch-trigger].is-active .switch-title{ color:#fff; }
[data-switch-trigger].is-active .switch-sub{ color:#ffffffb3; }
[data-switch-trigger].is-active .switch-icon{ background:var(--lime); }
[data-switch-trigger] .switch-icon{ background:var(--paper); transition:background .2s ease; }

[data-switch-panel]{ display:none; }
[data-switch-panel].is-active{ display:block; animation: fadein .35s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* ---- Quote badge / pill ---- */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'IBM Plex Mono',monospace; font-size:.7rem;
  padding:.4rem .9rem; border-radius:999px;
  border:1px solid #1D304E22; background:#ffffffb3;
}

/* ---- Icon badge (contact page, etc.) ---- */
.icon-badge{
  width:2.75rem; height:2.75rem; border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:linear-gradient(135deg, var(--navy), #24406b);
  box-shadow: 0 8px 20px -8px rgba(29,48,78,0.5);
}

/* ---- Hero slideshow ---- */
.slideshow{ position:relative; overflow:hidden; }
.slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.04);
  transition: opacity 1s ease, transform 8s ease;
  pointer-events:none;
}
.slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; position:relative; }
.slideshow .slide:not(.is-active){ position:absolute; }
.slide-dots{ display:flex; gap:.4rem; }
.slide-dot{
  width:.5rem; height:.5rem; border-radius:999px; background:#ffffff55;
  transition: background .2s ease, width .3s ease; cursor:pointer;
}
.slide-dot.is-active{ background:var(--lime); width:1.5rem; }

/* ---- WhatsApp floating button ---- */
#whatsapp-button{
  position:fixed; bottom:1.5rem; right:5.75rem; z-index:90;
  width:3.5rem; height:3.5rem; border-radius:999px;
  background:#25D366;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,0.6);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease;
}
#whatsapp-button:hover{ transform:scale(1.06); }

/* ---- AI assistant widget ---- */
#ai-widget-button{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:90;
  width:3.5rem; height:3.5rem; border-radius:999px;
  background:linear-gradient(135deg, var(--lime-bright), var(--mint));
  box-shadow: 0 12px 28px -8px rgba(79,191,163,0.6);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease;
}
#ai-widget-button:hover{ transform:scale(1.06); }
#ai-widget-panel{
  position:fixed; bottom:5.5rem; right:1.5rem; z-index:90;
  width:min(22rem, calc(100vw - 2rem)); max-height:min(30rem, calc(100vh - 8rem));
  background:#fff; border-radius:1.25rem; box-shadow: 0 24px 60px -16px rgba(14,26,44,0.35);
  display:none; flex-direction:column; overflow:hidden; border:1px solid #1D304E14;
}
#ai-widget-panel.is-open{ display:flex; }
.ai-msg{ max-width:85%; padding:.6rem .9rem; border-radius:1rem; font-size:.83rem; line-height:1.4; }
.ai-msg.bot{ background:var(--paper); align-self:flex-start; border-bottom-left-radius:.25rem; }
.ai-msg.user{ background:var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius:.25rem; }

/* =========================================================
   Admin dashboard components (admin.html)
   ========================================================= */
.admin-shell{ min-height:100vh; }
.admin-sidebar{
  background:var(--navy-darker);
}
.admin-nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; border-radius:.75rem;
  color:#ffffff99; font-size:.875rem; font-weight:500;
  transition: background .2s ease, color .2s ease;
}
.admin-nav-link:hover{ background:#ffffff0d; color:#fff; }
.admin-nav-link.is-active{ background:var(--lime); color:var(--navy); }
.admin-nav-link.is-active svg{ stroke:var(--navy); }

.admin-card{
  background:#fff; border:1px solid #1D304E14; border-radius:1rem;
}
.admin-table{ width:100%; border-collapse:separate; border-spacing:0; }
.admin-table th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--grey);
  padding:.85rem 1rem; border-bottom:1px solid #1D304E14;
}
.admin-table td{
  padding:.9rem 1rem; font-size:.875rem; border-bottom:1px solid #1D304E0d;
  vertical-align:middle;
}
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:#F7F9F2; }

.status-dot{ width:.5rem; height:.5rem; border-radius:999px; display:inline-block; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(14,26,44,0.55);
  display:none; align-items:center; justify-content:center; z-index:100; padding:1.5rem;
}
.modal-overlay.is-open{ display:flex; }
.modal-panel{
  background:#fff; border-radius:1.25rem; max-width:32rem; width:100%;
  max-height:90vh; overflow-y:auto;
}

.admin-filter-btn{ transition: background .2s ease, color .2s ease, border-color .2s ease; }
.admin-filter-btn[aria-pressed="true"]{
  background:var(--navy); color:#fff; border-color:var(--navy);
}

/* ---- Product thumbnail in admin table ---- */
.admin-thumb{
  width:2.5rem; height:2.5rem; border-radius:.6rem; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg, var(--navy), var(--mint));
}
.upload-dropzone{
  border:2px dashed #1D304E33; border-radius:1rem; padding:1.5rem; text-align:center;
  transition: border-color .2s ease, background .2s ease; cursor:pointer;
}
.upload-dropzone:hover, .upload-dropzone.is-dragover{ border-color:var(--lime); background:#A3C23910; }

/* ---- Overlapping hero photo composition ---- */
.hero-photo-stack{ position:relative; }
.hero-photo-stack .stack-item{ position:absolute; }
.stack-item{
  border-radius:1.25rem; overflow:hidden; box-shadow:0 20px 45px -18px rgba(29,48,78,0.4);
  animation:float-soft 6s ease-in-out infinite;
}
.stack-item.d2{ animation-delay:.4s; }
.stack-item.d3{ animation-delay:.8s; }
.stack-item.d4{ animation-delay:1.2s; }
@keyframes float-soft{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (prefers-reduced-motion: reduce){ .stack-item{ animation:none; } }

/* ---- Contact page form tabs ---- */
.form-tab-btn{ transition: background .2s ease, color .2s ease, border-color .2s ease; color:var(--grey); }
.form-tab-btn[aria-pressed="true"]{ background:var(--navy); color:#fff; }

/* ---- Chart card ---- */
.chart-card canvas{ max-width:100%; }