/* ─── TOKENS ─────────────────────────────────────── */
:root {
  --primary:#1A2E52; --primary-dark:#0D1E3A; --primary-fg:#F5F8FF;
  --accent:#D4873A; --accent-light:#F4A254; --accent-fg:#FFFFFF;
  --surface:#F5F8FF; --border:#C5D3E8; --mid-blue:#5A8FBF;
  --pale-navy:#EBF0F8; --success:#1C5C35; --bg:#F5F8FF;
  --text-heading:#0D1E3A; --text-body:#4A5E78; --text-muted:#8A9BB5;
  --card:#FFFFFF; --radius:.875rem;
  --grad-primary:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  --grad-accent:linear-gradient(135deg,var(--accent-light) 0%,var(--accent) 100%);
  --grad-text:linear-gradient(120deg,var(--primary-dark) 0%,var(--primary) 40%,var(--accent) 100%);
  --gradientt-hero:radial-gradient(1200px 600px at 80% -10%,rgba(244,162,84,.18) 0%,transparent 60%),
              radial-gradient(900px 500px at -10% 20%,rgba(90,143,191,.22) 0%,transparent 55%),
              linear-gradient(180deg,#fff 0%,#F5F8FF 60%,#EBF0F8 100%);
  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset,0 20px 50px -24px rgba(13,30,58,.25);
  --shadow-deep:0 40px 80px -30px rgba(13,30,58,.45);
  --shadow-glow:0 30px 80px -20px rgba(212,135,58,.35);
  --shadow-btn-p:0 12px 30px -10px rgba(26,46,82,.55);
  --shadow-btn-a:0 12px 30px -10px rgba(212,135,58,.55);
  --glass-bg:rgba(255,255,255,.6); --glass-border:rgba(255,255,255,.7);
  --glass-dark-bg:rgba(26,46,82,.7); --glass-dark-brd:rgba(255,255,255,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  background:var(--grad-hero); background-attachment:fixed;
  color:var(--text-body); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Literata',ui-serif,Georgia,serif;color:var(--text-heading);letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg{display:block}
::selection{background:rgba(212,135,58,.3);color:var(--primary-dark)}

/* ─── UTILITIES ──────────────────────────────────── */
.container{max-width:min(1300px,94%);margin-inline:auto}
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card);
}
.glass-dark{
  background:var(--glass-dark-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-dark-brd);
}
.gradient-text{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-primary{
  background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-btn-p);
  transition:transform .3s,box-shadow .3s,filter .3s;
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 20px 40px -12px rgba(26,46,82,.65)}
.btn-accent{
  background:var(--grad-accent); color:#fff; box-shadow:var(--shadow-btn-a);
  transition:transform .3s,box-shadow .3s,filter .3s;
}
.btn-accent:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 20px 50px -12px rgba(212,135,58,.7)}

.section-label{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--glass-bg); 
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-card);
  border-radius:999px; padding:.375rem .75rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--text-heading);

}
.section-label-dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ─── AMBIENT BACKDROP ───────────────────────────── */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient-blob{position:absolute;border-radius:50%;filter:blur(80px);animation:blob 14s ease-in-out infinite}
.blob-blue{width:40rem;height:40rem;top:-10rem;left:-10rem;background:radial-gradient(circle at 30% 30%,#5A8FBF,transparent 60%);opacity:.3}
.blob-orange{width:36rem;height:36rem;top:33%;right:-10rem;background:radial-gradient(circle at 60% 40%,#F4A254,transparent 60%);opacity:.3;animation-delay:-6s}
.blob-navy{width:30rem;height:30rem;bottom:0;left:33%;background:radial-gradient(circle at 50% 50%,#1A2E52,transparent 60%);opacity:.1;filter:blur(80px)}

/* ─── PARTICLE CANVAS ────────────────────────────── */
#particle-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45}

/* ─── NAVBAR ─────────────────────────────────────── */
.navbar-wrap{position:sticky;top:.75rem;z-index:50}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  border-radius:999px; padding:.625rem 1rem;
  transition:box-shadow .3s,background .3s;
}
.navbar.scrolled{box-shadow:0 8px 32px rgba(13,30,58,.12)}
.nav-logo{display:flex;align-items:center;gap:.625rem}
.logo-icon{position:relative;width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center}
.logo-icon svg{color:#fff;width:1.125rem;height:1.125rem}
.logo-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(212,135,58,.6);animation:pulse-ring 2.4s ease-out infinite}
.logo-text{font-family:'Literata',serif;font-size:1.125rem;font-weight:600;color:var(--text-heading);letter-spacing:-.01em}
.logo-text span{color:var(--accent)}
.nav-links{display:none;align-items:center;gap:1.75rem}
.nav-links a{
  font-size:.875rem;font-weight:500;color:var(--text-body);
  transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;width:0;height:1.5px;
  background:var(--grad-accent);border-radius:2px;transition:width .3s;
}
.nav-links a:hover{color:var(--text-heading)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:.375rem;border-radius:999px;padding:.5rem 1rem;font-size:.875rem;font-weight:600}
.nav-cta svg{width:.875rem;height:.875rem}
.menu-btn{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:50%;border:none;cursor:pointer;background:var(--glass-bg);backdrop-filter:blur(18px);border:1px solid var(--glass-border)}
.menu-btn svg{width:1rem;height:1rem;color:var(--text-heading)}

/* ─── HERO ───────────────────────────────────────── */
.hero{margin-top:2.5rem;padding-top:2.5rem;position:relative}
.hero-grid{display:grid;gap:2.5rem;align-items:start}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.375rem .75rem;font-size:.75rem;font-weight:500;color:var(--text-heading);animation:fadeUp .6s ease both}
.badge-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--success);animation:pulse-dot 2s ease-in-out infinite}
.hero-h1{margin-top:1.25rem;font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;animation:fadeUp .7s .05s ease both}

/* Typewriter cursor blink on hero */
.hero-h1 .cursor{display:inline-block;width:3px;height:.85em;background:var(--accent);margin-left:3px;animation:blink .8s step-end infinite;vertical-align:middle}

.hero-desc{margin-top:1.25rem;font-size:1rem;line-height:1.7;color:var(--text-body);max-width:36rem;animation:fadeUp .7s .15s ease both}
.hero-cta{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem;animation:fadeUp .6s .25s ease both}
.hero-cta-main{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600}
.hero-cta-main svg{width:1rem;height:1rem;transition:transform .3s}
.hero-cta-main:hover svg{transform:translateX(4px)}
.hero-cta-sec{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--text-heading);transition:transform .3s}
.hero-cta-sec:hover{transform:translateY(-2px)}
.hero-stats{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:28rem;animation:fadeIn .8s .4s ease both;opacity:0;animation-fill-mode:forwards}
.stat-card{border-radius:1rem;padding:.875rem;transition:transform .3s,box-shadow .3s}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(26,46,82,.18)}
.stat-val{font-family:'Literata',serif;font-size:1.25rem;color:var(--text-heading)}
.stat-lbl{margin-top:.125rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted)}

/* ─── ORB ────────────────────────────────────────── */
.orb-wrap{
  position:relative;perspective:1200px;
  animation:fadeIn .9s .2s ease both;opacity:0;animation-fill-mode:forwards;
  display:flex;align-items:center;justify-content:center;
  align-self:start;
  padding-top:3rem;
}
.orb-inner{
  position:relative;margin:0 auto;
  width:100%;max-width:480px;aspect-ratio:1;
  overflow:visible;
}

/* SVG orbit rings replaced by div rings for layering */
.orb-svg{position:absolute;inset:0;width:100%;height:100%}

.orb-core{
  position:absolute;inset:26%;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff,#EBF0F8 35%,#5A8FBF 75%,#1A2E52 100%);
  box-shadow:var(--shadow-deep);animation:float-y 7s ease-in-out infinite;
  transition:transform .1s ease-out;
}
.orb-core::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 120deg,#F4A254,transparent 35%,#5A8FBF,transparent 70%,#F4A254);mix-blend-mode:overlay;opacity:.7}
.orb-core::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
.orb-core-badge{
  position:absolute;inset:0;display:grid;place-items:center;
}
.orb-core-pill{
  display:inline-flex;align-items:center;gap:.375rem;
  border-radius:999px;padding:.3rem .7rem;
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--text-heading);white-space:nowrap;
  background:rgba(255,255,255,.65);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 4px 16px rgba(13,30,58,.1);
}
.orb-glow{position:absolute;inset:-1.5rem;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(244,162,84,.28) 0%,transparent 60%);filter:blur(28px)}

/* Ambient halo */
.orb-halo{position:absolute;inset:-2.5rem;border-radius:50%;z-index:-2;
  background:conic-gradient(from 90deg,rgba(244,162,84,.18),rgba(90,143,191,.22),rgba(244,162,84,.18));
  opacity:.7;filter:blur(48px);}

/* ─── ORBIT CHIPS (static % positions, CSS float only) ── */
.orbit-chip{
  position:absolute;
  display:inline-flex;align-items:center;gap:.4rem;
  border-radius:999px;padding:.3rem .65rem;
  font-size:.6875rem;font-weight:600;color:var(--text-heading);
  white-space:nowrap;cursor:default;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 18px rgba(13,30,58,.13),0 1px 0 rgba(255,255,255,.65) inset;
  transition:box-shadow .25s;
  pointer-events:auto;
  /* centres chip on its % anchor point — never rotated */
  transform:translate(-50%,-50%);
  animation:chip-float 4s ease-in-out infinite;
}
.orbit-chip:hover{box-shadow:0 8px 28px rgba(212,135,58,.32),0 1px 0 rgba(255,255,255,.8) inset}
.orbit-chip-icon{
  width:1.25rem;height:1.25rem;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.orbit-chip-icon svg{width:.7rem;height:.7rem}
@keyframes chip-float{
  0%,100%{ transform:translate(-50%,-50%) translateY(0px); }
  50%{     transform:translate(-50%,-50%) translateY(-5px); }
}

/* Glowing dot accents on orbits */
.orbit-dot{
  position:absolute;
  width:.45rem;height:.45rem;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px rgba(212,135,58,.9),0 0 16px rgba(212,135,58,.45);
  transform:translate(-50%,-50%);
  animation:ticker-pulse 2s ease-in-out infinite;
  pointer-events:none;
}

/* ─── MARQUEE ────────────────────────────────────── */
.marquee-section{position:relative;margin-top:5rem;overflow:hidden}
.marquee-fade-l{pointer-events:none;position:absolute;inset-y:0;left:0;z-index:1;width:6rem;background:linear-gradient(to right,#F5F8FF,transparent)}
.marquee-fade-r{pointer-events:none;position:absolute;inset-y:0;right:0;z-index:1;width:6rem;background:linear-gradient(to left,#F5F8FF,transparent)}
.marquee-track{display:flex;width:max-content;gap:2.5rem;padding:.5rem 0;animation:marquee 40s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:.75rem;color:var(--text-heading);transition:transform .25s}
.marquee-item:hover{transform:scale(1.05)}
.marquee-item span.dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--accent);flex-shrink:0}
.marquee-item span.label{font-family:'Literata',serif;font-size:1.5rem;letter-spacing:-.01em;white-space:nowrap}

/* ─── INTRO ──────────────────────────────────────── */
.intro{margin-top:6rem}
.intro-header{display:grid;gap:2.5rem;align-items:end}
.intro-h2{margin-top:.75rem;font-size:clamp(1.75rem,4vw,3rem);line-height:1.1}
.intro-desc{color:var(--text-body);line-height:1.7}
.intro-cards{margin-top:3rem;display:grid;gap:1.25rem}
.intro-card{
  position:relative;overflow:hidden;border-radius:1.5rem;padding:1.5rem;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;
  cursor:default;
}
.intro-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 24px 60px rgba(13,30,58,.14)}
.intro-card-glow{
  position:absolute;top:-1rem;right:-1rem;
  width:10rem;height:10rem;border-radius:50%;
  background:radial-gradient(circle at 80% 20%, rgba(244,162,84,.02) 0%, rgba(244,162,84,.11) 5%, transparent 70%);
  filter:blur(12px);
  transition:transform .4s, opacity .4s;
  pointer-events:none;
}
.intro-card:hover .intro-card-glow{transform:scale(1.35);opacity:.85}
.intro-icon{width:3rem;height:3rem;border-radius:.875rem;display:grid;place-items:center;transition:transform .3s}
.intro-icon svg{width:1.25rem;height:1.25rem;color:#fff}
.intro-card:hover .intro-icon{transform:rotate(-6deg) scale(1.1)}
.intro-h3{margin-top:1.25rem;font-family:'Literata',serif;font-size:1.25rem}
.intro-p{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--text-body)}
/* shimmer line on intro cards */
.intro-card::after{
  content:'';position:absolute;bottom:0;left:-100%;width:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,162,84,.6),transparent);
  transition:left .6s ease;
}
.intro-card:hover::after{left:140%}

/* ─── ABOUT STORY ────────────────────────────────── */
.about-story{margin-top:7rem}
.about-story-grid{
  display:grid;gap:3.5rem;align-items:center;
}
@media(min-width:768px){
  .about-story-grid{grid-template-columns:1fr 1fr;gap:4rem}
}
/* Left — content */
.about-story-content{}
.about-story-h2{margin-top:.75rem;font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1.1}
.about-story-lead{
  margin-top:1.25rem;font-size:1.0625rem;line-height:1.75;color:var(--text-body);
  border-left:3px solid var(--accent);padding-left:1.25rem;
}
.about-story-body{margin-top:1.25rem;font-size:.9375rem;line-height:1.75;color:var(--text-body)}
.about-story-pills{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.5rem}
.about-story-pill{
  display:inline-flex;align-items:center;gap:.375rem;
  border-radius:999px;padding:.3rem .8rem;
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  background:var(--pale-navy);color:var(--primary);border:1px solid var(--border);
  transition:background .25s,color .25s;
}
.about-story-pill:hover{background:var(--primary);color:#fff}
.about-story-pill-dot{width:.35rem;height:.35rem;border-radius:50%;background:var(--accent);flex-shrink:0}
.about-story-meta{
  margin-top:2rem;display:flex;gap:2rem;flex-wrap:wrap;
}
.about-meta-item{}
.about-meta-val{font-family:'Literata',serif;font-size:2rem;color:var(--text-heading);line-height:1}
.about-meta-val span{color:var(--accent)}
.about-meta-lbl{margin-top:.25rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted)}
/* Right — image collage */
.about-story-images{
  position:relative;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
  gap:.875rem;
}
.about-img{
  border-radius:1.25rem;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.about-img:hover{transform:translateY(-5px) scale(1.01)}
.about-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.about-img:hover img{transform:scale(1.06)}
.about-img-main{grid-column:1/3;height:300px}
.about-img-a{height:200px}
.about-img-b{height:200px}
/* Floating badge on image collage */
.about-img-badge{
  position:absolute;bottom:1.25rem;left:1.25rem;z-index:10;
  display:inline-flex;align-items:center;gap:.625rem;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:.5rem 1rem;
  box-shadow:0 8px 24px rgba(13,30,58,.15);
  font-size:.75rem;font-weight:600;color:var(--text-heading);
}
.about-img-badge-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--success);animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0}

/* ─── INDUSTRIES SLIDER ───────────────────────────── */
.industries{margin-top:7rem;width:100%;max-width:100%}
.industries-inner{max-width:min(1200px,94%);margin-inline:auto}
.industries-header{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.industries-h2{margin-top:.75rem;font-size:clamp(1.75rem,4vw,3rem);line-height:1.1}
.industries-slider-wrap{position:relative;margin-top:2.5rem;width:100%}
.industries-fade-l{pointer-events:none;position:absolute;inset-y:0;left:0;z-index:10;width:5rem;background:linear-gradient(to right,var(--bg),transparent)}
.industries-fade-r{pointer-events:none;position:absolute;inset-y:0;right:0;z-index:10;width:5rem;background:linear-gradient(to left,var(--bg),transparent)}
.industries-scroller{
  display:flex;gap:.875rem;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:1rem;
  padding-left:0;
  padding-right:0;
  scroll-padding-left:0;
}
.industries-scroller::-webkit-scrollbar{display:none}
.ind-slide{
  position:relative;flex-shrink:0;overflow:hidden;border-radius:1.5rem;
  display:flex;flex-direction:column;justify-content:space-between;
  scroll-snap-align:start;cursor:pointer;
  width:clamp(180px,18vw,220px);height:320px;
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease;
  box-shadow:0 30px 60px -25px rgba(13,30,58,.55),0 1px 0 rgba(255,255,255,.2) inset;
}
.ind-slide:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 40px 80px -25px rgba(13,30,58,.7),0 1px 0 rgba(255,255,255,.3) inset}
.ind-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease-out;z-index:0;filter:saturate(.85) brightness(.85)}
.ind-slide:hover .ind-slide-img{transform:scale(1.08)}
.ind-slide-tint{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply}
.ind-slide-sheen{position:absolute;inset:0;z-index:2;opacity:.3;mix-blend-mode:overlay;background:conic-gradient(from 120deg,transparent,rgba(255,255,255,.4),transparent 55%)}
.ind-slide-ring{pointer-events:none;position:absolute;inset:0;border-radius:inherit}
.ind-slide-ring::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset}
/* Floating spin rings */
.ind-rings{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;width:12rem;height:12rem}
.ind-ring-a{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);animation:spin-slow 28s linear infinite}
.ind-ring-b{position:absolute;inset:1rem;border-radius:50%;border:1px dashed rgba(255,255,255,.3);animation:spin-slow 30s linear infinite reverse}
/* Top chrome */
.ind-top{position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:1.25rem}
.ind-icon-wrap{
  width:3.25rem;height:3.25rem;border-radius:1rem;
  display:grid;place-items:center;
  background:rgba(255,255,255,.15);color:#fff;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.4);
  transition:transform .5s;
}
.ind-slide:hover .ind-icon-wrap{transform:rotate(-6deg) scale(1.1)}
.ind-icon-wrap svg{width:1.375rem;height:1.375rem}
.ind-tag{
  border-radius:999px;padding:.25rem .625rem;
  font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:#fff;background:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.3);
}
/* Glass info panel */
.ind-panel{
  position:relative;z-index:10;margin:.75rem;margin-top:auto;
  border-radius:1rem;padding:1rem 1.25rem;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.ind-panel-num{font-family:'Literata',serif;font-size:.625rem;color:rgba(255,255,255,.75)}
.ind-panel-name{margin-top:.2rem;font-family:'Literata',serif;font-size:1.05rem;line-height:1.2;color:#fff}
.ind-panel-link{margin-top:.75rem;display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:#fff}
.ind-panel-link svg{width:.875rem;height:.875rem;transition:transform .3s}
.ind-slide:hover .ind-panel-link svg{transform:translateX(4px)}
/* Progress dots */
.ind-dots{margin-top:1.25rem;display:flex;align-items:center;justify-content:center;gap:.375rem}
.ind-dot{height:.375rem;border-radius:999px;border:none;cursor:pointer;padding:0;transition:width .5s cubic-bezier(.4,0,.2,1),background .5s}
/* Nav buttons */
.ind-nav{display:flex;align-items:center;gap:.5rem}
.ind-btn{
  width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;transition:transform .3s,box-shadow .3s;
}
.ind-btn:hover{transform:translateY(-2px)}
.ind-btn svg{width:1rem;height:1rem}

/* ─── CAPABILITIES ───────────────────────────────── */
.capabilities{margin-top:7rem}
.cap-card{position:relative;overflow:hidden;border-radius:2rem;padding:2rem;background:var(--grad-primary)}
.cap-glow-r{position:absolute;top:-8rem;right:-8rem;width:24rem;height:24rem;border-radius:50%;background:rgba(212,135,58,.3);filter:blur(80px)}
.cap-glow-l{position:absolute;bottom:0;left:-6rem;width:18rem;height:18rem;border-radius:50%;background:rgba(90,143,191,.4);filter:blur(80px)}
/* Moving shimmer across the dark card */
.cap-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);
  background-size:200% 100%;animation:shimmer-slide 4s ease-in-out infinite;
}
.cap-grid{position:relative;display:grid;gap:2.5rem}
.cap-label{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);padding:.375rem .75rem;font-size:.75rem;font-weight:500;color:rgba(255,255,255,.8)}
.cap-label svg{width:.875rem;height:.875rem;color:var(--accent-light)}
.cap-h2{margin-top:1rem;font-size:clamp(1.75rem,4vw,3rem);line-height:1.1;color:#fff}
.cap-h2 em{font-style:normal;color:var(--accent-light)}
.cap-desc{margin-top:1rem;color:rgba(255,255,255,.75);line-height:1.7}
.cap-list{display:grid;gap:.75rem}
.cap-item{
  display:flex;align-items:flex-start;gap:1rem;border-radius:1rem;padding:1rem;color:#fff;
  transition:transform .3s,background .3s;
}
.cap-item:hover{transform:translateX(6px)}
.cap-num{
  width:2.25rem;height:2.25rem;border-radius:.75rem;background:var(--accent);
  box-shadow:var(--shadow-glow);display:grid;place-items:center;flex-shrink:0;
  font-family:'Literata',serif;font-size:.875rem;
  transition:transform .3s;
}
.cap-item:hover .cap-num{transform:rotate(-6deg) scale(1.1)}
.cap-text{font-size:.875rem;line-height:1.6}

/* Progress bar fill on count-up (capabilities) */
.cap-progress{height:2px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:.5rem;overflow:hidden}
.cap-progress-fill{height:100%;background:var(--grad-accent);border-radius:2px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}

/* ─── CTA ────────────────────────────────────────── */
.cta-section{margin-top:7rem}
.cta-card{position:relative;overflow:hidden;border-radius:2rem;padding:2rem}
.cta-glow-t{position:absolute;top:-5rem;right:2.5rem;width:16rem;height:16rem;border-radius:50%;background:rgba(244,162,84,.4);filter:blur(80px)}
.cta-glow-b{position:absolute;bottom:-6rem;left:-2.5rem;width:18rem;height:18rem;border-radius:50%;background:rgba(90,143,191,.3);filter:blur(80px)}
.cta-grid{position:relative;display:grid;gap:2rem}
.cta-h2{font-size:clamp(1.75rem,4vw,3rem);line-height:1.1}
.cta-desc{margin-top:1rem;color:var(--text-body);line-height:1.7}
.cta-btns{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.cta-btn-main{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600}
.cta-btn-main svg{width:1rem;height:1rem;transition:transform .3s}
.cta-btn-main:hover svg{transform:translateX(4px)}
.cta-btn-sec{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--text-heading);transition:transform .3s}
.cta-btn-sec:hover{transform:translateY(-2px)}
.contact-rows{display:grid;gap:.75rem}
.contact-row{display:flex;align-items:flex-start;gap:1rem;border-radius:1rem;padding:1rem;transition:transform .3s,box-shadow .3s}
.contact-row:hover{transform:translateX(4px);box-shadow:0 8px 24px rgba(13,30,58,.1)}
.contact-icon{width:2.5rem;height:2.5rem;border-radius:.75rem;display:grid;place-items:center;flex-shrink:0;transition:transform .3s}
.contact-row:hover .contact-icon{transform:rotate(-6deg) scale(1.08)}
.contact-icon svg{width:1.125rem;height:1.125rem;color:#fff}
.contact-lbl{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted)}
.contact-val{margin-top:.125rem;font-size:.875rem;color:var(--text-heading)}

/* ─── FOOTER ─────────────────────────────────────── */
footer{margin-top:5rem;padding-bottom:0.5rem;padding-top:1.5rem}
.footer-inner{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;border-top:1px solid rgba(197,211,232,.7);padding-top:1rem}
.footer-logo{display:flex;align-items:center;gap:.625rem}
.footer-logo-icon{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center}
.footer-logo-icon svg{width:1rem;height:1rem;color:#fff}
.footer-logo-text{font-family:'Literata',serif;font-size:1rem;font-weight:600;color:var(--text-heading)}
.footer-copy{font-size:.75rem;color:var(--text-muted)}

/* ─── NOISE ──────────────────────────────────────── */
.noise{position:relative}
.noise::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(13,30,58,.05) 1px,transparent 1px);background-size:4px 4px;mix-blend-mode:multiply;opacity:.35}

/* ─── SCROLL REVEAL ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.reveal.from-left{transform:translateX(-30px)}
.reveal.from-right{transform:translateX(30px)}
.reveal.visible{opacity:1;transform:none}

/* ─── COUNTER ────────────────────────────────────── */
.count-up{display:inline-block}

/* ─── CURSOR GLOW ────────────────────────────────── */
#cursor-glow{
  position:fixed;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,162,84,.08) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  transition:opacity .3s;
}

/* ─── ANIMATIONS ─────────────────────────────────── */
@keyframes float-y{
  0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}
  50%{transform:translateY(-18px) rotateX(6deg) rotateY(-8deg)}
}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes pulse-ring{
  0%{transform:scale(.85);opacity:.8}
  100%{transform:scale(1.6);opacity:0}
}
@keyframes pulse-dot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.6}
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blob{
  0%,100%{border-radius:42% 58% 60% 40%/50% 45% 55% 50%}
  50%{border-radius:60% 40% 35% 65%/40% 60% 40% 60%}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes shimmer-slide{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@keyframes ticker-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,135,58,.4)}
  50%{box-shadow:0 0 0 6px rgba(212,135,58,0)}
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media(min-width:640px){}
@media(min-width:768px){
  .navbar{padding:.45rem 1.5rem}
  .nav-links{display:flex}
  .menu-btn{display:none}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:2rem}
  .intro-header{grid-template-columns:1fr 1fr}
  .intro-cards{grid-template-columns:repeat(3,1fr)}
  .industries-header{flex-direction:row;align-items:flex-end}
  .cap-grid{grid-template-columns:1fr 1fr}
  .cap-card{padding:3.5rem}
  .cta-grid{grid-template-columns:1.2fr 1fr;align-items:center}
  .cta-card{padding:3.5rem}
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .hero-h1{font-size:3.6rem}
}
@media(min-width:1024px){.hero-h1{font-size:4rem}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  #cursor-glow{display:none}
}


/* ─── NAV ACTIVE ────────────────────────────────── */
.nav-links a.nav-active {
  color: var(--text-heading);
}
.nav-links a.nav-active::after {
  width: 100%;
}

/* ─── MOBILE DRAWER ─────────────────────────────── */
.mobile-drawer {
  display: none;
  margin-top: .625rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.mobile-drawer.open {
  display: block;
  max-height: 36rem;
  opacity: 1;
}
.mobile-drawer-card {
  position: relative;
  border-radius: 1.25rem;
  padding: .875rem;
  overflow: hidden;
  isolation: isolate;
}
.mobile-drawer-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background: var(--grad-accent);
}
.mobile-drawer-glow{
  position:absolute; width:13rem; height:13rem; border-radius:50%;
  top:-6.5rem; right:-4.5rem; z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 60% 40%, rgba(212,135,58,.28), transparent 70%);
  filter: blur(6px);
}
.mobile-links {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  position: relative;
}
.mobile-links li{
  opacity: 0;
  transform: translateY(10px);
}
.mobile-drawer.open .mobile-links li{
  animation: mobileItemIn .45s ease forwards;
}
.mobile-drawer.open .mobile-links li:nth-child(1){animation-delay:.03s}
.mobile-drawer.open .mobile-links li:nth-child(2){animation-delay:.07s}
.mobile-drawer.open .mobile-links li:nth-child(3){animation-delay:.11s}
.mobile-drawer.open .mobile-links li:nth-child(4){animation-delay:.15s}
.mobile-drawer.open .mobile-links li:nth-child(5){animation-delay:.19s}
.mobile-drawer.open .mobile-links li:nth-child(6){animation-delay:.23s}
@keyframes mobileItemIn{ to{ opacity:1; transform:translateY(0); } }

.mobile-links li{ border-bottom: 1px solid rgba(26,46,82,.07); }
.mobile-links li:last-child{ border-bottom: none; }

.mobile-links a {
  display: flex;
  align-items: center;
  gap: .8125rem;
  padding: .8125rem .375rem;
  font-family: 'Literata', ui-serif, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  border-radius: .75rem;
  transition: background .25s, padding-left .25s, color .2s;
}
.mobile-link-icon{
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.375rem; height: 2.375rem; border-radius: 50%;
  background: rgba(26,46,82,.06); color: var(--primary);
  transition: background .3s, color .3s, transform .3s;
}
.mobile-link-icon svg{ width: 1.0625rem; height: 1.0625rem; }
.mobile-link-text{ flex: 1; }
.mobile-link-idx{
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em;
  color: var(--text-muted); transition: color .25s;
}
.mobile-links a:hover,
.mobile-links a:focus-visible {
  background: rgba(26,46,82,.05);
  padding-left: .625rem;
}
.mobile-links a:hover .mobile-link-icon,
.mobile-links a:focus-visible .mobile-link-icon {
  background: var(--grad-accent); color: #fff; transform: rotate(-6deg) scale(1.06);
}
.mobile-links a:hover .mobile-link-idx{ color: var(--accent); }

.mobile-links a.mobile-active{
  background: linear-gradient(135deg, rgba(26,46,82,.08), rgba(212,135,58,.1));
}
.mobile-links a.mobile-active .mobile-link-icon{
  background: var(--grad-primary); color: #fff;
}
.mobile-links a.mobile-active .mobile-link-idx{ color: var(--accent); }

.mobile-drawer-footer{
  margin-top: .375rem;
  padding-top: .9375rem;
  border-top: 1px dashed rgba(26,46,82,.14);
}
.mobile-cta{
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .875rem 1rem;
  border-radius: 999px; font-size: .9375rem; font-weight: 600;
}
.mobile-cta svg{ width: 1rem; height: 1rem; }

@media(min-width:768px){
  .mobile-drawer, .mobile-drawer-backdrop { display: none !important; }
}

/* ─── MOBILE DRAWER BACKDROP ────────────────────── */
.mobile-drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(13,30,58,.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  z-index: 40;
}
.mobile-drawer-backdrop.open{ opacity: 1; pointer-events: auto; }

/* ─── PAGE HERO ─────────────────────────────────── */
.ab-hero {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}
.ab-hero-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.ab-hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ab-hero-h1 {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
  color: var(--text-heading);
}
.ab-hero-desc {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-body);
  max-width: 38rem;
}
.ab-hero-stats {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.ab-stat {
  border-radius: 1rem;
  padding: .875rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 7rem;
  transition: transform .3s, box-shadow .3s;
}
.ab-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26,46,82,.18);
}
.ab-stat-val {
  font-family: 'Literata', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ab-stat-lbl {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
}

/* Hero image collage */
.ab-hero-images {
  position: relative;
  height: 340px;
}
.ab-img {
  border-radius: 1.25rem;
  overflow: hidden;
  position: absolute;
}
.ab-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.ab-img:hover img { transform: scale(1.04); }
.ab-img-main {
  inset: 0;
  border-radius: 1.25rem;
  overflow: hidden;
}
.ab-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-img-float {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  border-radius: 1rem;
  padding: .75rem 1rem;
  animation: float-y 5s ease-in-out infinite;
  z-index: 5;
}
.ab-img-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .375rem .875rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-heading);
  z-index: 5;
}
.ab-img-badge-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@media(min-width:768px){
  .ab-hero-inner {
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
  }
  .ab-hero-images {
    height: 420px;
  }
}


/* ─── COUNTER STRIP ─────────────────────────────── */
.ab-counter {
  padding-block: 2.5rem 0;
}
.ab-counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media(min-width:640px){
  .ab-counter-grid { grid-template-columns: repeat(4, 1fr); }
}
.ab-counter-card {
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  transition: transform .3s, box-shadow .3s;
}
.ab-counter-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26,46,82,.14);
}
.ab-counter-val {
  font-family: 'Literata', serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  /* color: var(--accent); */
  line-height: 1;
}
.ab-counter-lbl {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
}

/* ─── OUR STORY ─────────────────────────────────── */
.ab-story {
  padding-block: 5rem;
}
.ab-story-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media(min-width:768px){
  .ab-story-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Image card */
.ab-story-img-wrap { position: relative; padding-bottom: 1.5rem; padding-right: 1rem; }
.ab-story-img-card {
  position: relative;
  border-radius: 1.5rem;
  background: #c9dff0;
  aspect-ratio: 4/3.5;
  box-shadow: 0 30px 70px -20px rgba(26,46,82,.25);
  transition: transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s;
}
.ab-story-img-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -20px rgba(26,46,82,.3);
}
.ab-story-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
  mix-blend-mode: multiply;
}
.ab-story-img-card:hover img { transform: scale(1.04); }

/* Floating badge */
.ab-story-badge {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  border-radius: 1rem;
  padding: .875rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  animation: float-y 5s ease-in-out infinite;
  min-width: 11rem;
  z-index: 5;
}
.ab-story-badge-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
}
.ab-story-badge-city {
  font-family: 'Literata', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.15;
}
.ab-story-badge-sub {
  font-size: .75rem;
  color: var(--text-body);
}

/* Content */
.ab-story-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ab-story-h2 {
  margin-top: 1rem;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  color: var(--text-heading);
}
.ab-story-em {
  font-style: italic;
  background: linear-gradient(120deg,var(--primary-dark) 0%,var(--primary) 40%,var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ab-story-p {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-body);
  max-width: 38rem;
}
.ab-story-pills {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ab-story-pill {
  display: inline-flex;
  align-items: center;
  border-radius: .5rem;
  padding: .4rem .875rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-heading);
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform .22s, box-shadow .22s, border-color .22s, background .22s;
  cursor: default;
}
.ab-story-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26,46,82,.12);
  border-color: rgba(212,135,58,.35);
  background: rgba(244,162,84,.08);
}

.ab-why .ab-story-em {
  background: linear-gradient(120deg, #7EB3D8 0%, var(--accent-light) 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media(max-width:767px){
  .ab-story { padding-block: 3.5rem; }
  .ab-story-badge-city { font-size: 1.05rem; }
}

/* ─── WHY CHOOSE US ─────────────────────────────── */
.ab-why {
  background: var(--primary-dark);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.ab-why::before {
  content: '';
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,162,84,.12), transparent 70%);
  pointer-events: none;
}
.ab-why::after {
  content: '';
  position: absolute;
  bottom: -6rem;
  left: -6rem;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,143,191,.1), transparent 70%);
  pointer-events: none;
}
.ab-why-header {
  text-align: center;
  margin-bottom: 3rem;
}
.ab-why-h2 {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: #fff;
}
.ab-why-h2 em {
  font-style: normal;
  color: var(--accent-light);
}
.ab-why-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.ab-why-card {
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform .3s, background .3s;
  border: 1px solid rgba(255,255,255,.1);
}
.ab-why-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
}
.ab-why-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .875rem;
  background: rgba(244,162,84,.15);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .3s, background .3s;
}
.ab-why-card:hover .ab-why-icon {
  background: rgba(244,162,84,.25);
  transform: rotate(-6deg) scale(1.08);
}
.ab-why-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--accent-light);
}
.ab-why-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Literata', serif;
}
.ab-why-desc {
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255,255,255,.65);
}
@media(min-width:640px){
  .ab-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px){
  .ab-why-grid { grid-template-columns: repeat(3, 1fr); }
  /* Last card centered if odd */
  .ab-why-card:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* ─── COMPANY VITALS ────────────────────────────── */
.ab-vitals {
  padding-block: 5rem;
}
.ab-vitals-header {
  margin-bottom: 3rem;
}
.ab-vitals-h2 {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
}
.ab-vitals-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.ab-vital-card {
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform .3s, box-shadow .3s;
}
.ab-vital-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26,46,82,.18);
}
.ab-vital-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  transition: transform .3s;
}
.ab-vital-card:hover .ab-vital-icon {
  transform: rotate(-6deg) scale(1.08);
}
.ab-vital-icon svg { color: #fff; }
.ab-vital-lbl {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  font-weight: 600;
}
.ab-vital-val {
  font-size: .9375rem;
  color: var(--text-heading);
  font-weight: 500;
  line-height: 1.5;
}
@media(min-width:640px){
  .ab-vitals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px){
  .ab-vitals-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── OUR FOUNDATION (Vision / Mission) ─────────── */
.ab-vmv {
  padding-block: 5rem;
}
.ab-found-header {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.ab-found-h2 {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
}
.ab-found-grid {
  position: relative;
  display: grid;
  gap: 1.5rem;
}
.ab-found-connector {
  display: none;
}
.ab-found-dot {
  display: none;
}
.ab-found-card {
  position: relative;
  border-radius: 1.75rem;
  padding: 2.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
  animation: found-float 7s ease-in-out infinite;
}
.ab-found-mission { animation-delay: -3.5s; }
@keyframes found-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.ab-found-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 64px rgba(26,46,82,.18);
}
.ab-found-num {
  position: absolute;
  top: 1.5rem;
  left: 1.25rem;
  font-family: var(--font-display, serif);
  font-size: 9rem;
  line-height: 1;
  font-weight: 700;
  color: var(--text-heading);
  opacity: .045;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.ab-found-mission .ab-found-num { left: auto; right: 1.25rem; top: 1.5rem; }
.ab-found-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.ab-found-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.ab-found-card:hover .ab-found-icon { transform: scale(1.12) rotate(8deg); }
.ab-found-icon-accent { background: var(--grad-accent); box-shadow: var(--shadow-btn-a); }
.ab-found-icon-primary { background: var(--grad-primary); box-shadow: var(--shadow-btn-p); }
.ab-found-icon svg { width: 1.1rem; height: 1.1rem; color: #fff; }
.ab-found-tag {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
}
.ab-found-tag-accent { color: var(--accent); }
.ab-found-tag-primary { color: var(--text-heading); }
.ab-found-title {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  color: var(--text-heading);
}
.ab-found-body {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--text-body);
}
.ab-found-bar {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  width: 3rem;
  height: .2rem;
  border-radius: 999px;
  transform-origin: left;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.ab-found-card:hover .ab-found-bar { width: 5rem; }
.ab-found-bar-accent { background: var(--accent); }
.ab-found-bar-primary { background: var(--grad-primary); }

@media(min-width:1024px){
  .ab-found-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .ab-found-card { display: flex; flex-direction: column; min-height: 360px; }
  .ab-found-body { flex-grow: 1; }
  .ab-found-vision { margin-top: 0; }
  .ab-found-mission { margin-top: 4.5rem; }
  .ab-found-connector {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 1px; height: 70%;
    transform: translate(-50%,-50%);
    background: linear-gradient(to bottom, transparent, var(--border), transparent);
  }
  .ab-found-dot {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: .75rem; height: .75rem;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: var(--accent);
    box-shadow: var(--shadow-btn-a);
  }
}

/* ─── VALUES ─────────────────────────────────────── */
.ab-values-header {
  margin: 5rem auto 3rem;
  text-align: center;
}
.ab-values-tag {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
}
.ab-values-h3 {
  margin-top: .75rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--text-heading);
}
.ab-values-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.ab-value-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform .35s, box-shadow .35s;
}
.ab-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(26,46,82,.15);
}
.ab-value-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: .25rem;
  opacity: .6;
  transition: opacity .35s;
}
.ab-value-card:hover .ab-value-bar { opacity: 1; }
.ab-value-bar-1 { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.ab-value-bar-2 { background: linear-gradient(90deg, var(--primary), var(--mid-blue)); }
.ab-value-bar-3 { background: linear-gradient(90deg, var(--mid-blue), var(--primary)); }
.ab-value-bar-4 { background: linear-gradient(90deg, var(--accent-light), var(--accent)); }
.ab-value-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .9rem;
  background: var(--grad-primary);
  box-shadow: var(--shadow-btn-p);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}
.ab-value-icon svg { width: 1.15rem; height: 1.15rem; color: var(--accent-light); }
.ab-value-title {
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text-heading);
}
.ab-value-desc {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text-body);
}
@media(min-width:640px){
  .ab-values-grid { grid-template-columns: 1fr 1fr; }
}
@media(min-width:1024px){
  .ab-values-grid { grid-template-columns: repeat(4,1fr); }
}

/* ─── SUPPLY INDUSTRIES ─────────────────────────── */
.ab-industries {
  padding-block: 5rem;
}
.ab-industries-header {
  margin-bottom: 3rem;
}
.ab-industries-h2 {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
}
.ab-industries-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}
.ab-ind-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-heading);
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  cursor: default;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.ab-ind-pill:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(26,46,82,.14);
  background: rgba(244,162,84,.1);
  border-color: rgba(212,135,58,.3);
}
.ab-ind-pill::before {
  content: '';
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: .7;
}

/* ─── RESPONSIVE TWEAKS ─────────────────────────── */
@media(max-width:767px){
  .ab-directors-quote { padding: 1.5rem; }
  .ab-why { padding: 3.5rem 0; }
  .ab-vitals { padding-block: 3.5rem; }
  .ab-vmv { padding-block: 3.5rem; }
  .ab-industries { padding-block: 3.5rem; }
  .ab-hero-images { height: 260px; }
  .ab-hero-stats { gap: .5rem; }
  .ab-stat { min-width: 5.5rem; padding: .75rem 1rem; }
}
@media(max-width:479px){
  .ab-hero-images { height: 220px; }
  .ab-why-card { padding: 1.25rem; }
  .ab-found-card { padding: 1.5rem; }
}

@media(prefers-reduced-motion:reduce){
  .ab-img-float { animation: none; }
  .ab-img-badge-dot { animation: none; }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;background:var(--gradientt-hero);background-attachment:fixed;color:var(--text-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4,h5{font-family:'Literata',ui-serif,Georgia,serif;color:var(--text-heading);letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg{display:block}
::selection{background:rgba(212,135,58,.3);color:var(--primary-dark)}

/* layout */
.container{max-width:min(1300px,94%);margin-inline:auto}

/* glass */
.glass{background:var(--glass-bg);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--glass-border);box-shadow:var(--shadow-card)}

/* gradient text */
.gradient-text{background:linear-gradient(120deg,#0D1E3A 0%,#1A2E52 40%,#D4873A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ambient */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);animation:blob 14s ease-in-out infinite}
.blob-blue{width:40rem;height:40rem;top:-10rem;left:-10rem;background:radial-gradient(circle at 30% 30%,#5A8FBF,transparent 60%);opacity:.3}
.blob-orange{width:36rem;height:36rem;top:33%;right:-10rem;background:radial-gradient(circle at 60% 40%,#F4A254,transparent 60%);opacity:.3;animation-delay:-6s}
.blob-navy{width:30rem;height:30rem;bottom:0;left:33%;background:radial-gradient(circle at 50% 50%,#1A2E52,transparent 60%);opacity:.1}

/* page header */
.page-header{padding:4rem 0 2rem}
.page-header h1{margin-top:1.25rem;font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:1.05}
.page-header p{margin-top:.875rem;font-size:1rem;line-height:1.7;color:var(--text-body);max-width:520px}

/* search */
.search-wrap{margin-top:1.875rem}
.search-bar{display:flex;align-items:center;gap:.75rem;border-radius:999px;padding:.75rem 1.25rem;max-width:640px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:var(--shadow-card);transition:box-shadow .2s,border-color .2s,background .2s}
.search-bar:focus-within{border-color:rgba(90,143,191,.5);box-shadow:var(--shadow-card),0 0 0 3px rgba(90,143,191,.12)}
.search-bar svg{width:1.125rem;height:1.125rem;color:var(--text-muted);flex-shrink:0}
.search-bar input{flex:1;border:none;background:transparent;outline:none;font-family:'DM Sans',sans-serif;font-size:.9375rem;color:var(--text-heading)}
.search-bar input::placeholder{color:var(--text-muted)}
.clear-btn{width:1.75rem;height:1.75rem;border-radius:50%;border:none;cursor:pointer;background:rgba(90,143,191,.1);display:grid;place-items:center;transition:background .2s,opacity .2s;opacity:0;pointer-events:none;flex-shrink:0}
.clear-btn.show{opacity:1;pointer-events:auto}
.clear-btn:hover{background:rgba(90,143,191,.22)}
.clear-btn svg{width:.75rem;height:.75rem;color:var(--text-body)}

/* filter pills */
.filter-wrap{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.125rem}
.filter-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.35rem .875rem;font-size:.8125rem;font-weight:500;cursor:pointer;border:1px solid rgba(197,211,232,.65);background:rgba(255,255,255,.65);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);color:var(--text-body);transition:background .2s,color .2s,border-color .2s,transform .15s;white-space:nowrap;line-height:1}
.filter-pill:hover{background:rgba(255,255,255,.92);color:var(--text-heading);transform:translateY(-1px)}
.filter-pill.active{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:0 6px 20px -6px rgba(26,46,82,.45)}

/* results meta */
.results-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:1.125rem;font-size:.8125rem;color:var(--text-muted)}
.results-meta strong{color:var(--text-heading)}
.results-meta-note{font-size:.8rem}

/* grid */
.products-section{padding-bottom:5rem}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:1.25rem;margin-top:1.5rem}

/* card */
.product-card{
  background:#fff;
  border:1px solid rgba(197,211,232,.4);
  border-radius:1.5rem;
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 10px 36px -14px rgba(13,30,58,.13);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
  overflow:hidden;
  position:relative;
}
/* Decorative corner gradient glow — alternates per card (PDF reference) */
.product-card::before{
  content:'';
  position:absolute;
  top:-55px;right:-55px;
  width:190px;height:190px;
  border-radius:50%;
  filter:blur(38px);
  opacity:.28;
  pointer-events:none;
  z-index:0;
  transform:scale(1);
  transition:opacity .45s ease,transform .45s ease,filter .45s ease;
}
/* Pink / purple glow — odd cards */
.product-card:nth-of-type(odd)::before{
  background:radial-gradient(circle at 65% 35%, rgba(236,72,153,.55) 0%, rgba(168,85,247,.4) 45%, transparent 75%);
}
/* Blue / cyan glow — even cards */
.product-card:nth-of-type(even)::before{
  background:radial-gradient(circle at 65% 35%, rgba(56,217,255,.55) 0%, rgba(59,130,246,.4) 45%, transparent 75%);
}
.product-card:hover::before{
  opacity:.55;
  filter:blur(50px) brightness(1.15);
  transform:scale(1.3);
}
.product-card>*{position:relative;z-index:1}
.product-card:hover{transform:translateY(-6px);box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 28px 64px -18px rgba(13,30,58,.2)}
.product-card.dim{opacity:.5}

.card-icon-wrap{position:relative;flex-shrink:0}
.card-icon{
  width:3rem;height:3rem;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.32),0 0 0 3px rgba(255,255,255,.75);
  position:relative;z-index:1;
}
.card-icon::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);pointer-events:none;
}
.card-icon svg{width:1.5rem;height:1.5rem;color:#fff}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;padding:1.375rem 1.375rem 0;gap:.75rem}
.card-cas{
  font-size:.75rem;
  color:var(--text-muted);
  font-weight:500;
  white-space:nowrap;
  letter-spacing:.01em;
  background:#fff;
  border-radius:999px;
  padding:.4rem .9rem;
  box-shadow:0 6px 16px -10px rgba(13,30,58,.25),0 1px 0 rgba(255,255,255,.8) inset;
}

.card-body{padding:1rem 1.375rem 0;flex:1;display:flex;flex-direction:column}
.card-name{font-family:'Literata',serif;font-size:1.125rem;line-height:1.22;color:var(--text-heading);font-weight:600}
.card-alias{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;margin-top:.3rem}
.card-desc{margin-top:.75rem;font-size:.875rem;line-height:1.72;color:var(--text-body);flex:1}
.card-desc.clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.read-more-btn{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;font-size:.8125rem;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;font-family:'DM Sans',sans-serif;transition:color .2s}
.read-more-btn:hover{color:var(--accent-light)}
.read-more-btn svg{width:.8rem;height:.8rem;transition:transform .25s;flex-shrink:0}
.read-more-btn.expanded svg{transform:rotate(180deg)}

.card-tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:1rem 1.375rem 0}
.card-tag{font-size:.6875rem;font-weight:500;border-radius:999px;padding:.3rem .7rem;background:rgba(235,240,248,.85);color:var(--text-body);border:1px solid rgba(197,211,232,.55);letter-spacing:.005em}

.card-footer{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.375rem 1.125rem;margin-top:.875rem;border-top:1px solid rgba(197,211,232,.3)}
.rq-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:700;color:var(--text-heading);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:color .2s;padding:0}
.rq-btn:hover{color:var(--primary)}
.rq-btn svg{width:.8rem;height:.8rem;transition:transform .25s}
.rq-btn:hover svg{transform:translateX(3px)}
.in-stock{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600}
.stock-dot{width:.45rem;height:.45rem;border-radius:50%;background:#8A9BB5;flex-shrink:0}

/* empty state */
.empty-state{grid-column:1/-1;text-align:center;padding:5rem 1rem;display:none}
.empty-state.show{display:block}
.empty-icon{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--pale-navy);display:grid;place-items:center;margin:0 auto 1rem}
.empty-icon svg{width:1.5rem;height:1.5rem;color:var(--text-muted)}
.empty-state h3{font-size:1.125rem;color:var(--text-heading);margin-bottom:.5rem}
.empty-state p{font-size:.875rem;color:var(--text-muted)}

/* animations */
@keyframes blob{0%,100%{border-radius:42% 58% 60% 40%/50% 45% 55% 50%}50%{border-radius:60% 40% 35% 65%/40% 60% 40% 60%}}
@keyframes pulse-ring{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.afu0{animation:fadeUp .6s ease both}
.afu1{animation:fadeUp .6s .08s ease both}
.afu2{animation:fadeUp .6s .16s ease both}
.afu3{animation:fadeUp .6s .24s ease both}

/* responsive */
@media(min-width:768px){
  .navbar{padding:.45rem 1.5rem}
  .nav-links{display:flex}
  .menu-btn{display:none}
  .nav-enquire{display:inline-flex}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .page-header{padding:5rem 0 2rem}
}
@media(max-width:767px){.results-meta-note{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ── PAGINATION ─────────────────────────────────── */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:2rem 0 3rem;flex-wrap:wrap;
}
.pg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  height:2.375rem;min-width:2.375rem;padding:0 .875rem;
  border-radius:999px;border:1px solid rgba(197,211,232,.65);
  background:rgba(255,255,255,.75);backdrop-filter:blur(10px);
  font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:500;
  color:var(--text-body);cursor:pointer;
  transition:all .22s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;
}
.pg-btn:hover:not(:disabled){
  background:#fff;color:var(--text-heading);
  transform:translateY(-1px);box-shadow:0 6px 20px -8px rgba(13,30,58,.18);
  border-color:rgba(90,143,191,.4);
}
.pg-btn.active{
  background:var(--grad-primary);color:#fff;
  border-color:transparent;box-shadow:var(--shadow-btn-p);
}
.pg-btn:disabled{opacity:.35;cursor:not-allowed}
.pg-btn svg{width:.85rem;height:.85rem;flex-shrink:0}
.pg-ellipsis{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.375rem;height:2.375rem;
  font-size:.875rem;color:var(--text-muted);pointer-events:none;
}

/* ── QUOTE MODAL ───────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(13,30,58,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
}
.modal-backdrop.open{opacity:1;pointer-events:auto}

.modal{
  background:#fff;border-radius:1.5rem;
  box-shadow:0 40px 80px -20px rgba(13,30,58,.45),0 2px 0 rgba(255,255,255,.8) inset;
  width:100%;max-width:520px;max-height:90dvh;overflow-y:auto;
  transform:translateY(18px) scale(.97);
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .28s ease;
  opacity:0;position:relative;
  scrollbar-width:thin;
  scrollbar-color:rgba(197,211,232,.9) transparent;
}
.modal::-webkit-scrollbar{width:4px}
.modal::-webkit-scrollbar-track{background:transparent;margin:1.5rem 0}
.modal::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(212,135,58,.5),rgba(26,46,82,.4));
  border-radius:999px;
}
.modal::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(212,135,58,.8),rgba(26,46,82,.65));
}
.modal-backdrop.open .modal{transform:translateY(0) scale(1);opacity:1}

.modal-header{
  padding:1.75rem 1.75rem 1rem;
  border-bottom:1px solid rgba(197,211,232,.3);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  position:sticky;top:0;background:#fff;border-radius:1.5rem 1.5rem 0 0;z-index:1;
}
.modal-header-left{display:flex;align-items:center;gap:.875rem}
.modal-product-icon{
  width:3rem;height:3rem;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.75);
}
.modal-product-icon svg{width:1.25rem;height:1.25rem;color:#fff}
.modal-title{font-family:'Literata',serif;font-size:1.125rem;line-height:1.22;color:var(--text-heading);font-weight:600}
.modal-subtitle{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}
.modal-close{
  width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(197,211,232,.6);
  background:rgba(235,240,248,.7);display:grid;place-items:center;
  cursor:pointer;flex-shrink:0;transition:background .18s,transform .18s;
}
.modal-close:hover{background:rgba(197,211,232,.9);transform:rotate(90deg)}
.modal-close svg{width:.9rem;height:.9rem;color:var(--text-body)}

.modal-body{padding:1.5rem 1.75rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.125rem}
.form-label{
  display:block;font-size:.8125rem;font-weight:600;
  color:var(--text-heading);margin-bottom:.45rem;letter-spacing:.005em;
}
.form-label span{color:var(--accent)}
.form-control{
  width:100%;height:2.75rem;border-radius:.625rem;
  border:1px solid rgba(197,211,232,.7);
  background:rgba(245,248,255,.8);
  padding:0 .875rem;
  font-family:'DM Sans',sans-serif;font-size:.9375rem;color:var(--text-heading);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-control:focus{
  border-color:rgba(90,143,191,.55);
  box-shadow:0 0 0 3px rgba(90,143,191,.12);
  background:#fff;
}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{height:6rem;padding:.75rem .875rem;resize:vertical;line-height:1.6}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9BB5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2.25rem;cursor:pointer}
.form-hint{font-size:.75rem;color:var(--text-muted);margin-top:.35rem}

.modal-footer{
  padding:1rem 1.75rem 1.75rem;
  display:flex;align-items:center;gap:.75rem;
  border-top:1px solid rgba(197,211,232,.3);
}
.btn-submit{
  flex:1;height:2.875rem;border-radius:999px;border:none;cursor:pointer;
  background:var(--grad-primary);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.9375rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  box-shadow:var(--shadow-btn-p);
  transition:transform .25s,filter .25s,box-shadow .25s;
}
.btn-submit:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 40px -10px rgba(26,46,82,.6)}
.btn-submit svg{width:.9rem;height:.9rem}
.btn-cancel{
  height:2.875rem;padding:0 1.25rem;border-radius:999px;
  border:1px solid rgba(197,211,232,.7);background:transparent;
  font-family:'DM Sans',sans-serif;font-size:.9375rem;font-weight:500;
  color:var(--text-body);cursor:pointer;
  transition:background .2s,color .2s;
}
.btn-cancel:hover{background:var(--pale-navy);color:var(--text-heading)}

/* success state */
.modal-success{
  display:none;flex-direction:column;align-items:center;
  text-align:center;padding:2.5rem 2rem;gap:1rem;
}
.modal-success.show{display:flex}
.modal-success-icon{
  width:4rem;height:4rem;border-radius:50%;
  background:linear-gradient(135deg,#1C5C35,#2E7D52);
  display:grid;place-items:center;
  box-shadow:0 12px 32px -8px rgba(28,92,53,.45);
}
.modal-success-icon svg{width:1.75rem;height:1.75rem;color:#fff}
.modal-success h3{font-family:'Literata',serif;font-size:1.375rem;color:var(--text-heading)}
.modal-success p{font-size:.9rem;color:var(--text-muted);line-height:1.65;max-width:340px}
.btn-done{
  margin-top:.5rem;height:2.75rem;padding:0 2rem;border-radius:999px;
  border:none;cursor:pointer;
  background:var(--grad-accent);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.9375rem;font-weight:700;
  box-shadow:var(--shadow-btn-a);
  transition:transform .25s,filter .25s;
}
.btn-done:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ── MOBILE TWEAKS ─────────────────────────────── */
@media(max-width:560px){
  .form-row{grid-template-columns:1fr}
  .modal-header{padding:1.25rem 1.25rem .875rem}
  .modal-body{padding:1.125rem 1.25rem}
  .modal-footer{padding:.875rem 1.25rem 1.25rem;flex-direction:column}
  .btn-submit,.btn-cancel{width:100%}
  .pagination{gap:.375rem}
  .pg-btn{height:2.125rem;min-width:2.125rem;padding:0 .7rem;font-size:.8125rem}
}


  /* ---------- Layout ---------- */
  .contact-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
  }

  .blob {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(70px);
    z-index: 0;
  }
  .blob-1 {
    top: -120px;
    right: -120px;
    height: 480px;
    width: 480px;
    opacity: 0.6;
    background: radial-gradient(closest-side, #C5D3E8, transparent);
  }
  .blob-2 {
    top: 30%;
    left: -160px;
    height: 520px;
    width: 520px;
    opacity: 0.4;
    background: radial-gradient(closest-side, #F4A254, transparent);
    animation-delay: 3s;
  }
  .blob-3 {
    bottom: 0;
    right: 25%;
    height: 420px;
    width: 420px;
    opacity: 0.4;
    background: radial-gradient(closest-side, #5A8FBF, transparent);
    animation-delay: 6s;
  }

  /* Hero */
  .hero {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
  }

  .hero-inner {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }

  .eyebrow-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 50%;
    background: var(--accent);
  }

  .hero h1 {
    margin-top: 1.5rem;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .hero h1 em {
    font-style: italic;
  }

  .hero p {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 36rem;
    margin-right: auto;
  }

  /* Content grid */
  .content {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.25rem 6rem;
  }

  .content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }

  .info-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .info-card {
    border-radius: 1.5rem;
    padding: 1.5rem;
  }

  .info-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .icon-box {
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .icon-box svg {
    height: 1.25rem;
    width: 1.25rem;
  }

  .icon-navy svg { color: var(--accent-light); }
  .icon-accent svg { color: var(--primary-foreground); }

  .info-card h3 {
    font-size: 1.125rem;
    font-weight: 500;
  }

  .info-card p,
  .info-card a {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-body);
  }

  .info-card a {
    display: inline-block;
    text-decoration: none;
    transition: color 0.2s;
  }

  .info-card a:hover {
    color: var(--primary);
  }

  /* Email list */
  .email-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .email-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .email-label {
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: 100%;
  }

  .email-row a {
    margin-top: 0;
    color: var(--text-body);
  }

  /* Hours */
  .hours-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .hours-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .hours-label {
    color: var(--text-muted);
  }

  .hours-value {
    font-weight: 500;
    color: var(--text-heading);
  }

  .hours-value.closed {
    color: var(--destructive);
  }

  /* Form */
  .form-card {
    border-radius: 1.5rem;
    padding: 1.5rem;
  }

  .form-card h2 {
    font-size: 1.5rem;
    font-weight: 500;
  }

  .form-card > p {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-body);
  }

  form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-heading);
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.4);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-heading);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: var(--text-muted);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--mid-blue);
    box-shadow: 0 0 0 3px rgba(90,143,191,0.18);
  }

  .field textarea {
    min-height: 140px;
    resize: none;
  }

  .field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9BB5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
  }

  .submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-start;
    border: none;
    border-radius: 999px;
    color: var(--accent-foreground);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

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

  .submit-btn svg {
    height: 1rem;
    width: 1rem;
  }

  /* ---------- Responsive ---------- */
  @media (min-width: 640px) {
    .hero h1 {
      font-size: 3.75rem;
    }
    .info-card,
    .form-card {
      padding: 2rem;
    }
    .field-row {
      grid-template-columns: 1fr 1fr;
    }
    .submit-btn {
      width: auto;
    }
  }

  @media (min-width: 1024px) {
    .hero {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .hero h1 {
      font-size: 4.5rem;
    }
    .content {
      padding-bottom: 8rem;
    }
    .content-grid {
      grid-template-columns: 5fr 7fr;
      gap: 3rem;
    }
    .form-card {
      padding: 2.5rem;
    }
  }

  @media (max-width: 639px) {
    .hero, .content {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .submit-btn {
      width: 100%;
    }
  }

/* ═══════════════════════════════════════════════════════════════
   CATALOGUE LAYOUT  —  premium light-theme sidebar
   ═══════════════════════════════════════════════════════════════ */

/* ── two-column wrapper ──────────────────────────────────────── */
.catalogue-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 2rem;
  align-items: start;
  padding-top: 1.5rem;
  padding-bottom: 5rem;
}

/* ── SIDEBAR CARD ────────────────────────────────────────────── */
/*
   Design intent: same white-glass treatment as .product-card and
   the site's navbar — crisp white surface, soft border, layered
   shadow — but with an amber gradient ribbon at the top and a
   refined row structure.  Sticky so it travels with the user.
*/
.cat-sidebar {
  position: sticky;
  top: 90px;
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  /* layered shadow: inner highlight + outer depth */
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 1px 0 rgba(197,211,232,.5) inset,
    0 20px 60px -20px rgba(13,30,58,.18),
    0 4px 16px -6px rgba(13,30,58,.08);
  isolation: isolate;
}

/* Amber gradient ribbon across the top */
.cat-sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    var(--accent-light) 0%,
    var(--accent) 50%,
    var(--mid-blue) 100%);
  border-radius: 1.5rem 1.5rem 0 0;
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
}

/* Soft ambient glow behind the card — amber top-right */
.cat-sidebar::after {
  content: '';
  position: absolute;
  top: -3rem; right: -3rem;
  width: 12rem; height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(244,162,84,.14) 0%,
    transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

/* everything inside sits above the pseudo glows */
.cat-sidebar-inner-wrap { position: relative; z-index: 1; }

/* ── HEADER ──────────────────────────────────────────────────── */
.cat-sidebar-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1.375rem 1rem;
  border-bottom: 1px solid rgba(197,211,232,.45);
  /* very faint warm tint behind header */
  background: linear-gradient(135deg,
    rgba(244,162,84,.04) 0%,
    rgba(255,255,255,0) 60%);
}

/* icon bubble — matches .card-icon / .intro-icon treatment */
.cat-header-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .875rem;
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  box-shadow: 0 8px 20px -6px rgba(212,135,58,.55),
              0 0 0 3px rgba(255,255,255,.8);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s;
}
.cat-sidebar:hover .cat-header-icon {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 12px 28px -6px rgba(212,135,58,.6),
              0 0 0 3px rgba(255,255,255,.85);
}
.cat-header-icon svg { color: #fff; width: 1.0625rem; height: 1.0625rem; }

.cat-sidebar-header-text { display: flex; flex-direction: column; gap: .1rem; }

.cat-sidebar-title {
  font-family: 'Literata', ui-serif, Georgia, serif;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: -.015em;
  line-height: 1.2;
}

.cat-sidebar-sub {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── SCROLLABLE LIST ─────────────────────────────────────────── */
.cat-list {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem 0 .75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(197,211,232,.6) transparent;
}
.cat-list::-webkit-scrollbar { width: 3px; }
.cat-list::-webkit-scrollbar-track { background: transparent; }
.cat-list::-webkit-scrollbar-thumb {
  background: rgba(197,211,232,.6);
  border-radius: 99px;
}

/* ── CATEGORY ROW ────────────────────────────────────────────── */
.cat-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  padding: .5rem 1rem .5rem 1.375rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition:
    background .2s ease,
    padding-left .22s cubic-bezier(.22,1,.36,1);
  box-sizing: border-box;
}

/* animated left accent bar */
.cat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  box-shadow: 2px 0 8px rgba(212,135,58,.4);
  transform: scaleY(0) translateX(-3px);
  transform-origin: center;
  opacity: 0;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    opacity .28s ease;
}

/* subtle separator between rows */
.cat-item + .cat-item::after {
  content: '';
  position: absolute;
  inset: 0 1.25rem auto;
  height: 1px;
  background: rgba(197,211,232,.35);
  top: 0;
}

/* hover */
.cat-item:hover {
  background: linear-gradient(90deg,
    rgba(244,162,84,.06) 0%,
    rgba(235,240,248,.5) 60%,
    transparent 100%);
  padding-left: 1.625rem;
}
.cat-item:hover::before {
  transform: scaleY(1) translateX(0);
  opacity: 1;
}

/* active */
.cat-item.active {
  background: linear-gradient(90deg,
    rgba(212,135,58,.1) 0%,
    rgba(212,135,58,.04) 55%,
    transparent 100%);
  padding-left: 1.625rem;
}
.cat-item.active::before {
  transform: scaleY(1) translateX(0);
  opacity: 1;
}

/* ── ROW INNER ELEMENTS ──────────────────────────────────────── */

/* dot marker replaces generic bullet */
.cat-item-dot {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .35rem;
  background: var(--border);
  transition: background .2s, transform .2s;
}
.cat-item:hover .cat-item-dot,
.cat-item.active .cat-item-dot {
  background: var(--accent);
  transform: scale(1.4);
}

/* name */
.cat-item-name {
  flex: 1;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-body);
  line-height: 1.4;
  word-break: break-word;
  transition: color .2s;
  text-align: left;
}
.cat-item:hover .cat-item-name  { color: var(--text-heading); }
.cat-item.active .cat-item-name {
  color: var(--primary);
  font-weight: 600;
}

/* count pill */
.cat-item-count {
  flex-shrink: 0;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  padding: .25rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pale-navy);
  color: var(--text-muted);
  min-width: 1.5rem;
  text-align: center;
  margin-top: .1rem;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1);
}
.cat-item:hover:not(.active) .cat-item-count {
  background: rgba(197,211,232,.55);
  color: var(--text-heading);
  border-color: rgba(197,211,232,.9);
  transform: scale(1.05);
}
.cat-item.active .cat-item-count {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -3px rgba(212,135,58,.5);
  transform: scale(1.08);
}

/* ── RIGHT COLUMN ────────────────────────────────────────────── */
.catalogue-right { min-width: 0; }
.catalogue-right .search-wrap { margin-top: 0; margin-bottom: 0; }

.active-cat-label {
  font-weight: 600;
  color: var(--accent);
  font-size: .8125rem;
}

/* ── MOBILE TOGGLE ───────────────────────────────────────────── */
.cat-mobile-toggle {
  display: none;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 1.125rem 1.375rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-heading);
  position: relative;
  z-index: 1;
}
.cat-mobile-toggle .cat-toggle-icon {
  width: 2rem; height: 2rem;
  border-radius: .625rem;
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(212,135,58,.5);
}
.cat-mobile-toggle .cat-toggle-icon svg { color: #fff; width: .875rem; height: .875rem; }
.cat-mobile-toggle .cat-toggle-chev {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.cat-mobile-toggle .cat-toggle-label-sub {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: .25rem;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:900px) {
  .catalogue-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cat-sidebar { position: static; }
  .cat-sidebar-header { display: none; }
  .cat-mobile-toggle  { display: flex; }

  .cat-list {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition:
      max-height .38s cubic-bezier(.4,0,.2,1),
      padding .25s ease;
  }
  .cat-sidebar.cat-open .cat-list {
    max-height: 440px;
    overflow-y: auto;
    padding: .5rem 0 .75rem;
    border-top: 1px solid rgba(197,211,232,.45);
  }
  .cat-sidebar.cat-open .cat-mobile-toggle .cat-toggle-chev {
    transform: rotate(180deg);
  }
}

@media(max-width:560px) {
  .catalogue-layout {
    padding-top: 1rem;
    padding-bottom: 3rem;
  }
}

/* ═══════════════════════════════════════════════════════
   PRODUCTS PAGE — MOBILE RESPONSIVE  (≤ 767px)
   Desktop styles are completely untouched above.
   All rules here are additive / override-only for mobile.
   ═══════════════════════════════════════════════════════ */

@media(max-width:767px){

  /* ── PAGE HEADER ─────────────────────────────────── */
  .page-header{
    padding: 2rem 0 1.25rem;
  }
  .page-header h1{
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    line-height: 1.1;
  }
  .page-header p{
    font-size: .9375rem;
    line-height: 1.65;
  }

  /* ── SEARCH BAR ──────────────────────────────────── */
  .search-wrap{
    margin-top: 1.25rem;
  }
  .search-bar{
    padding: .65rem 1rem;
  }
  .search-bar input{
    font-size: .875rem;
  }
  /* Shorten placeholder on very small screens */
  @supports selector(:placeholder-shown){
    .search-bar input::placeholder{
      font-size: .8125rem;
    }
  }

  /* ── RESULTS META ────────────────────────────────── */
  .results-meta{
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    font-size: .75rem;
  }

  /* ── CATALOGUE LAYOUT ────────────────────────────── */
  .catalogue-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  /* ── CATEGORY SIDEBAR ────────────────────────────── */
  .cat-sidebar{
    position: static !important;
    max-height: none;
  }
  .cat-sidebar-inner-wrap{
    border-radius: 1rem;
    overflow: hidden;
  }

  /* ── PRODUCTS GRID ───────────────────────────────── */
  .products-grid{
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
  }

  /* ── PRODUCT CARD ────────────────────────────────── */
  .card-top{
    padding: 1.125rem 1.125rem 0;
  }
  .card-body{
    padding: .875rem 1.125rem 0;
  }
  .card-tags{
    padding: .875rem 1.125rem 0;
  }
  .card-footer{
    padding: .75rem 1.125rem 1rem;
  }
  .card-name{
    font-size: 1rem;
  }

  /* ── PAGINATION ──────────────────────────────────── */
  .pagination{
    gap: .25rem;
    padding: 1.5rem 0 2rem;
  }
  .pg-btn{
    height: 2rem;
    min-width: 2rem;
    padding: 0 .6rem;
    font-size: .8125rem;
  }

  /* ── MODAL ───────────────────────────────────────── */
  .modal{
    max-height: 96dvh;
    border-radius: 1.25rem;
  }
  .modal-header{
    padding: 1.125rem 1rem .75rem;
  }
  .modal-body{
    padding: 1rem;
  }
  .modal-footer{
    padding: .75rem 1rem 1.125rem;
    flex-direction: column;
  }
  .btn-submit,
  .btn-cancel{
    width: 100%;
  }

  /* ── NAVBAR — keep hamburger visible ─────────────── */
  .menu-btn{
    display: grid !important;
  }
  .nav-links{
    display: none !important;
  }
}

/* Very small screens (≤ 380px) */
@media(max-width:380px){
  .page-header h1{
    font-size: 1.6rem;
  }
  .products-grid{
    grid-template-columns: 1fr;
  }
  .cat-mobile-toggle{
    font-size: .875rem;
    padding: 1rem 1.125rem;
  }
}