/* ==========================================================================
   EVERBRIGHT ENTERPRISES — core PHP theme
   Bootstrap 5 provides grid/utilities; this file layers the brand's premium
   white identity on top: typography, header/mega-nav, hero carousel,
   horizontal product cards, forms, footer. Built on tokens.css variables.
   ========================================================================== */

/* ---------- Layout rhythm ---------- */
.section{ padding:var(--section-pad) 0; position:relative; }
.section--soft{ background:var(--paper-soft); position:relative; overflow:hidden; }
.section--tint{ background:var(--paper-tint); position:relative; overflow:hidden; }
.section--tight{ padding:var(--section-pad-sm) 0; }
.section--pattern{ position:relative; overflow:hidden; }
.container-eb{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* A faint dot texture on the soft/tint alternating sections so pages don't
   read as plain empty white between content blocks — capped at ~4% opacity,
   purely decorative, never competes with text. */
.section--soft::before, .section--tint::before, .section--pattern::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--pattern-line) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 30%, rgba(0,0,0,.7), transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%, rgba(0,0,0,.7), transparent 85%);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:12.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue-deep);
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); flex:0 0 auto; }

.section-head{ max-width:660px; }
.section-head h2{
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(26px, 3.2vw, 42px); line-height:1.15; letter-spacing:-.01em;
  color:var(--ink); margin-top:12px;
}
.section-head p{ margin-top:14px; font-size:16px; line-height:1.7; color:var(--text-muted); }
.section-head.text-center{ margin-inline:auto; }

h1, h2, h3, h4 { font-family:var(--font-head); font-weight:800; color:var(--ink); }

/* ---------- Buttons ---------- */
.btn-eb{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:14.5px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-eb:hover{ transform:translateY(-2px); }
.btn-eb svg{ width:16px; height:16px; }

.btn-eb--primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn-eb--primary:hover{ background:var(--blue-deep); color:#fff; }

.btn-eb--dark{ background:var(--navy-900); color:#fff; box-shadow:var(--shadow-md); }
.btn-eb--dark:hover{ background:#000; color:#fff; }

.btn-eb--ghost{ background:var(--paper); color:var(--ink); border-color:var(--line); }
.btn-eb--ghost:hover{ border-color:var(--blue); color:var(--blue-deep); background:var(--blue-tint); }

.flagship-lineup .btn-eb--ghost:hover{ color:#fff; }

.flagship-product-card{ transition:transform .35s var(--ease); }
.flagship-product-card:hover{ transform:scale(1.06); }

.btn-eb--sm{ padding:10px 20px; font-size:13px; }

/* ---------- Cards ---------- */
.card-eb{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card-eb:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(8,146,211,.18); }

.chip-eb{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  border-radius:var(--radius-pill); background:var(--blue-tint); color:var(--blue-deep);
  font-size:12px; font-weight:700; letter-spacing:.02em;
}

.divider-soft{ height:1px; border:none; background:linear-gradient(90deg, transparent, var(--line) 50%, transparent); }

/* ---------- Top utility bar ---------- */
.topbar{ background:var(--navy-950); color:#fff; font-size:13px; }
.topbar__inner{ max-width:var(--container); margin:0 auto; padding:8px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar a{ color:#fff; opacity:.88; }
.topbar a:hover{ opacity:1; color:var(--blue-light); }
.topbar__left, .topbar__right{ display:flex; align-items:center; gap:18px; }
.topbar__social{ display:flex; align-items:center; gap:12px; }
.topbar__icon svg{ width:15px; height:15px; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line); }
.site-header__inner{ max-width:var(--container); margin:0 auto; padding:8px 24px; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand__mark{ height:80px; width:auto; }
.brand__word{ display:flex; flex-direction:column; line-height:1.05; }
.brand__word strong{ font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.01em; text-transform:uppercase; }
.brand__word small{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep); }
@media (max-width:480px){
  .brand__mark{ height:58px; }
  .brand__word strong{ font-size:18px; }
  .brand__word small{ font-size:10.5px; }
  /* Logo + toggler now share one row down to 320px (see the
     max-width:991.98px block below) — trim the header's own side
     padding and the brand/navbar gap so both fit comfortably at the
     narrowest supported width instead of nearly touching. */
  .site-header__inner{ padding-left:16px; padding-right:16px; gap:10px; }
  .brand{ gap:8px; }
}
@media (max-width:991.98px){
  /* Below the navbar-expand-lg breakpoint, .navbar (toggler + collapse)
     is a flex sibling of .brand inside .site-header__inner. Forcing
     .navbar itself onto its own full-width row (the old approach) pushed
     the toggler button down below the logo instead of keeping it inline
     at the top-right. But leaving .navbar inline means its own box is
     only as wide as "remaining space next to the logo" — too narrow for
     the opened menu panel to render in (it would be squeezed into that
     same narrow column). So instead: keep .navbar inline/narrow (just
     wide enough for the toggler, pinned right via the button's own
     .ms-auto), and take .navbar-collapse out of that narrow box entirely
     via position:absolute, anchored to .site-header (already
     position:sticky, so it's the containing block) so the opened panel
     spans the full header width regardless of .navbar's own narrow box.
     Bootstrap's base .navbar rule is itself position:relative though —
     being the closer ancestor, THAT became .navbar-collapse's actual
     containing block instead of .site-header, so left:0/right:0 was
     resolving against .navbar's own narrow right-edge box (only the
     right ~55% of the screen) rather than the full header width. Force
     it back to static so positioning bubbles up to .site-header. */
  .navbar{ margin-left:0 !important; position:static; }
  .navbar-collapse{
    position:absolute; left:0; right:0; top:100%;
    margin-top:0; padding:16px 24px 20px; background:#fff;
    border-top:1px solid var(--line); box-shadow:var(--shadow-md);
    max-height:calc(100vh - 100%); overflow-y:auto; z-index:1;
  }
}
.navbar-nav .nav-link{ font-weight:600; color:var(--ink); padding:10px 14px !important; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover{ color:var(--blue-deep); }
.header-cta{ margin-left:auto; }
.dropdown-menu{ border-radius:var(--radius-md); border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:10px; }
.dropdown-item{ border-radius:var(--radius-sm); padding:10px 12px; }
.dropdown-item:hover{ background:var(--blue-tint); color:var(--blue-deep); }

.eb-mega__panel{ padding:20px; width:min(760px, calc(100vw - 32px)); }
.eb-mega__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.eb-mega__col{ display:flex; flex-direction:column; min-width:0; }
.eb-mega__heading{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:8px; padding:0 12px; }
.eb-mega__col .dropdown-item{ white-space:normal; }
.eb-mega__col-links{ max-height:min(60vh, 420px); overflow-y:auto; overflow-x:hidden; padding-right:4px; }
.eb-mega__empty{ font-size:14px; color:var(--text-muted); padding:0 12px; margin:0; }
@media (max-width:991.98px){
  .eb-mega__panel{ width:100%; }
  .eb-mega__grid{ grid-template-columns:1fr; gap:6px; }
  .eb-mega__heading{ margin-top:8px; }
  .eb-mega__col-links{ max-height:none; overflow:visible; }
}

/* ---------- Hero carousel ---------- */
.hero-carousel{ position:relative; }
/* display/position on .carousel-item itself belong to Bootstrap (it toggles
   display:none/block per-slide) — never override display here, or every
   slide renders stacked at once instead of one at a time. */
.hero-carousel .carousel-item{ background:var(--navy-900); overflow:hidden; }
.hero-carousel .carousel-item .container-eb{ min-height:560px; display:flex; align-items:center; }
.hero-carousel .carousel-item img.hero-bg,
.hero-carousel .carousel-item video.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Two layers: a strong readability scrim (darkest under the text column,
   still present site-wide so no part of the photo ever fights the copy)
   plus a subtle brand-navy wash instead of flat black, tying the hero back
   to the rest of the deep-surface palette. */
.hero-carousel .carousel-item::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(6,24,38,.94) 0%, rgba(6,24,38,.78) 45%, rgba(6,24,38,.25) 100%);
}
.hero-carousel .carousel-item::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 50% 60% at 20% 100%, rgba(6,24,38,.55), transparent 70%);
}
.hero-slide-content{ position:relative; z-index:2; color:#fff; max-width:640px; padding:64px 0; }
.hero-slide-content .eyebrow{ color:var(--blue-light); text-shadow:0 2px 12px rgba(0,0,0,.5); }
.hero-slide-content .eyebrow::before{ background:var(--blue-light); }
.hero-slide-content h1{ color:#fff; font-size:clamp(30px, 4.2vw, 54px); line-height:1.1; margin-top:14px; text-shadow:0 4px 24px rgba(0,0,0,.45); }
.hero-slide-content p{ color:rgba(255,255,255,.92); font-size:17px; line-height:1.7; margin-top:16px; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.hero-slide-content .hero-actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-slide-content .hero-actions .btn-eb--ghost{ background:rgba(255,255,255,.1) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.55) !important; }
.hero-slide-content .hero-actions .btn-eb--ghost:hover{ background:rgba(255,255,255,.18) !important; }
.hero-carousel .carousel-indicators [data-bs-target]{ background:#fff; opacity:.5; width:34px; }
.hero-carousel .carousel-indicators .active{ opacity:1; }
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{ width:6%; }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--gradient-deep); color:#fff; }
/* Flex column + align-items:center (not just text-align:center) so the
   icon badge, label and value are all reliably centered as a unit within
   each stat's own box — text-align alone only centers inline content,
   not the icon badge itself when other rules affect its display type. */
.trust-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 10px; }
.trust-stat__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:10px;
  color:var(--blue-light);
}
.trust-stat__icon svg{ width:26px; height:26px; }
.trust-stat strong{ font-family:var(--font-head); font-size:clamp(26px,3vw,38px); display:block; color:var(--blue-light); }
/* Reserves space for 2 lines of label text (line-height 1.3 × 2) so a
   longer label (e.g. "Operating in India Since") that wraps doesn't push
   its own number down out of line with the other stats in the row,
   whose shorter one-line labels wouldn't otherwise wrap at all. */
.trust-stat span{ font-size:13.5px; color:rgba(255,255,255,.75); display:block; line-height:1.3; min-height:2.6em; }

.oem-marquee{ overflow:hidden; background:var(--paper-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.oem-marquee__track{ display:flex; align-items:center; gap:64px; width:max-content; white-space:nowrap; animation:eb-marquee 28s linear infinite; }
.oem-marquee:hover .oem-marquee__track{ animation-play-state:paused; }
.oem-marquee{ padding:16px 0; }
.oem-marquee__item{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; font-weight:700; color:var(--text-muted); font-size:13px; flex:0 0 auto; }
.oem-marquee__item img{ height:44px; width:auto; max-width:160px; object-fit:contain; }
.oem-marquee__item--logo-only{ justify-content:center; }
.oem-marquee__item--logo-only img{ height:126px; max-width:280px; }
.oem-marquee__item--canis img{ height:121px; }
.oem-marquee__name{ white-space:nowrap; }
@keyframes eb-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:768px){
  .oem-marquee__track{ gap:70px; animation-duration:20s; }
  .oem-marquee__item--logo-only img{ height:94px; max-width:200px; }
  .oem-marquee__item--canis img{ height:89px; }
}
@media (prefers-reduced-motion: reduce){ .oem-marquee__track{ animation:none; overflow-x:auto; } }

/* ---------- Horizontal product cards (per MOM: horizontal, not vertical) ---------- */
.product-row{
  display:flex; gap:28px; align-items:stretch; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.product-row:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.product-row__media{ flex:0 0 260px; background:var(--paper-soft-2); display:flex; align-items:center; justify-content:center; padding:20px; }
.product-row__media img{ max-height:200px; object-fit:contain; margin:0 auto; }
.product-row__body{ flex:1 1 auto; padding:26px 28px; display:flex; flex-direction:column; gap:10px; }
.product-row__cat{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--blue-deep); }
.product-row__title{ font-family:var(--font-head); font-size:20px; font-weight:800; }
.product-row__desc{ color:var(--text-muted); font-size:14.5px; line-height:1.6; }
.product-row__meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:auto; font-size:13px; color:var(--text-faint); }
.product-row__actions{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }

@media (max-width:768px){
  .product-row{ flex-direction:column; }
  .product-row__media{ flex:0 0 auto; }
}

/* ---------- Stat / feature grids ---------- */
.feature-card{ padding:26px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--line); height:100%; }
.feature-card__icon{ width:46px; height:46px; border-radius:12px; background:var(--blue-tint); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feature-card h3{ font-size:17px; margin-bottom:6px; }
.feature-card p{ color:var(--text-muted); font-size:14.5px; line-height:1.65; }
.feature-card--lg{ padding:36px; }
.feature-card--lg .feature-card__icon{ width:56px; height:56px; border-radius:14px; margin-bottom:20px; }
.feature-card--lg h3{ font-size:20px; margin-bottom:10px; }
.feature-card--lg p{ font-size:15.5px; }
.text-highlight{ color:var(--blue-deep); font-weight:700; }
.surface-dark .text-highlight{ color:var(--blue-light); }

/* ---------- Testimonials ---------- */
.testimonial-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; height:100%; }
.testimonial-card__stars{ color:#f5a623; font-size:14px; letter-spacing:2px; }
.testimonial-card__quote{ margin:12px 0; color:var(--ink); font-size:15px; line-height:1.7; }
.testimonial-card__name{ font-weight:700; }
.testimonial-card__meta{ color:var(--text-muted); font-size:13px; }

/* ---------- Testimonial slider (3-up, auto-advance one at a time) ---------- */
.testi-slider{ position:relative; padding:0 52px; }
.testi-slider__viewport{ overflow:hidden; }
.testi-slider__track{ display:flex; gap:24px; transition:transform .55s var(--ease); will-change:transform; }
.testi-slider__slide{ flex:0 0 100%; min-width:0; }
.testi-slider__slide .testimonial-card{ height:100%; }

.testi-slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.testi-slider__arrow:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-50%) scale(1.06); }
.testi-slider__arrow svg{ width:18px; height:18px; }
.testi-slider__arrow--prev{ left:0; }
.testi-slider__arrow--next{ right:0; }

.testi-slider__dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.testi-slider__dots button{
  width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0;
  transition:background .25s var(--ease), width .25s var(--ease);
}
.testi-slider__dots button.active{ background:var(--blue); width:22px; border-radius:99px; }

@media (min-width:640px){
  .testi-slider__slide{ flex:0 0 calc((100% - 24px) / 2); }
}
@media (min-width:992px){
  .testi-slider__slide{ flex:0 0 calc((100% - 48px) / 3); }
}
@media (max-width:576px){
  .testi-slider{ padding:0 0 56px; }
  .testi-slider__arrow{ top:auto; bottom:0; transform:none; }
  .testi-slider__arrow:hover{ transform:scale(1.06); }
  .testi-slider__arrow--prev{ left:calc(50% - 56px); }
  .testi-slider__arrow--next{ right:calc(50% - 56px); }
}

/* ---------- FAQ accordion ---------- */
.accordion-eb .accordion-button{ font-weight:700; font-family:var(--font-head); }
.accordion-eb .accordion-button:not(.collapsed){ color:var(--blue-deep); background:var(--blue-tint); }
.accordion-eb .accordion-button:focus{ box-shadow:none; border-color:var(--blue); }

/* ---------- Forms ---------- */
.form-eb label{ font-weight:600; font-size:13.5px; margin-bottom:6px; }
.form-eb .form-control, .form-eb .form-select{
  border-radius:var(--radius-sm); border-color:var(--line); padding:11px 14px; font-size:14.5px;
}
.form-eb .form-control:focus, .form-eb .form-select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }
.form-eb .invalid-feedback{ font-size:12.5px; }
.form-eb .form-section-title{
  font-size:15px; font-weight:800; color:var(--blue-deep); text-transform:uppercase; letter-spacing:.04em;
  margin:32px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.form-eb .form-section-title:first-child{ margin-top:0; }
.form-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm); }

.alert-eb-success{ background:#eafaf0; border:1px solid #b8e6c9; color:#1c6b3d; border-radius:var(--radius-sm); padding:14px 18px; }
.alert-eb-error{ background:#fdeeee; border:1px solid #f3c1c1; color:#a33a3a; border-radius:var(--radius-sm); padding:14px 18px; }
.alert-eb-info{ background:#eaf4fb; border:1px solid #bfe0f5; color:#0b5f8a; border-radius:var(--radius-sm); padding:14px 18px; }

/* ---------- Bento grid (Why Choose Us / feature highlight mix) ---------- */
/* Explicit named areas rather than auto-placement spans — with 4 fixed
   items, letting the grid auto-place spans leaves the 4th tile stranded
   at half-width with dead space beside it. Naming exactly which cell each
   of the 4 items occupies removes that ambiguity entirely. */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "feature feature b       b"
    "feature feature c       c"
    "d       d       d       d";
  gap:20px;
}
.bento-grid__item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.bento-grid__item:nth-of-type(1){ grid-area:feature; }
.bento-grid__item:nth-of-type(2){ grid-area:b; }
.bento-grid__item:nth-of-type(3){ grid-area:c; }
.bento-grid__item:nth-of-type(4){ grid-area:d; }
.bento-grid__item h3{ font-size:17px; margin-bottom:6px; }
.bento-grid__item p{ color:var(--text-muted); font-size:14.5px; line-height:1.65; }
.bento-grid__item--feature{
  background:var(--gradient-deep); border-color:transparent; color:#fff;
  padding:34px;
}
.bento-grid__item--feature h3{ color:#fff; font-size:22px; }
.bento-grid__item--feature p{ color:var(--on-deep-muted); font-size:15.5px; max-width:340px; }
.bento-grid__item--feature .feature-card__icon{ background:var(--glass-bg); color:var(--blue-light); width:56px; height:56px; }
.bento-grid__item--wide{ display:flex; flex-direction:row; align-items:center; gap:20px; }
.bento-grid__item--wide .feature-card__icon{ margin-bottom:0; flex:0 0 auto; }

@media (max-width:900px){
  .bento-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-areas:
      "feature feature"
      "b       c"
      "d       d";
  }
}
@media (max-width:576px){
  .bento-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "feature"
      "b"
      "c"
      "d";
  }
  .bento-grid__item--wide{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Manufacturing stepper (connected process nodes, not empty boxes) ---------- */
.mfg-stepper{
  display:grid;
  grid-template-columns:repeat(var(--step-count), 1fr);
  gap:0 8px;
  position:relative;
  padding-top:8px;
}
.mfg-stepper::before{
  content:''; position:absolute; top:34px; left:calc(50% / var(--step-count)); right:calc(50% / var(--step-count));
  height:3px; background:linear-gradient(90deg, var(--blue), var(--blue-light));
  border-radius:99px; z-index:0; opacity:.55;
}
.mfg-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 12px; }
.mfg-step__node{
  width:68px; height:68px; border-radius:50%; flex:0 0 auto;
  background:var(--gradient-accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:22px;
  box-shadow:0 12px 24px -8px rgba(8,146,211,.45), 0 0 0 6px var(--paper-soft);
  margin-bottom:18px;
}
.mfg-step__body h3{ font-size:16px; margin-bottom:6px; }
.mfg-step__body p{ font-size:13.5px; color:var(--text-muted); line-height:1.6; max-width:230px; margin:0 auto; }

.mfg-stats-bar{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 28px; box-shadow:var(--shadow-md);
}
.mfg-stats-bar__item{ display:flex; align-items:center; gap:14px; padding:8px 18px; }
.mfg-stats-bar__icon{ width:42px; height:42px; border-radius:12px; background:var(--blue-tint); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mfg-stats-bar__item strong{ font-family:var(--font-head); font-size:22px; color:var(--blue-deep); display:block; }
.mfg-stats-bar__item span{ font-size:12.5px; color:var(--text-muted); }

@media (max-width:768px){
  .mfg-stepper{ grid-template-columns:1fr; gap:28px 0; }
  .mfg-stepper::before{ top:0; bottom:0; left:34px; right:auto; width:3px; height:auto; background:linear-gradient(180deg, var(--blue), var(--blue-light)); }
  .mfg-step{ flex-direction:row; text-align:left; padding:0; }
  .mfg-step__node{ margin-bottom:0; margin-right:16px; width:56px; height:56px; font-size:18px; }
  .mfg-step__body p{ max-width:none; }
  .mfg-stats-bar{ justify-content:flex-start; }
}

/* ---------- Grid / List view toggle (Products catalog page) ---------- */
.view-toggle{ display:inline-flex; background:var(--paper-soft-2); border-radius:var(--radius-pill); padding:4px; gap:2px; flex:0 0 auto; }
.view-toggle__btn{
  width:38px; height:34px; border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:background .25s var(--ease), color .25s var(--ease);
}
.view-toggle__btn svg{ width:17px; height:17px; }
.view-toggle__btn.active{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.product-list-view{ display:flex; flex-direction:column; gap:24px; }
.catalog-results[data-view="grid"] .product-list-view{ display:none; }
.catalog-results[data-view="list"] .product-grid{ display:none; }

/* ---------- Product grid cards (Products catalog page — grid view) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.product-grid__card{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:20px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-grid__card:hover{ box-shadow:var(--shadow-lg); border-color:rgba(8,146,211,.2); }
.product-grid__media{ position:relative; display:block; height:150px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; }
.product-grid__glow{
  position:absolute; inset:10% 15%; border-radius:50%;
  background:radial-gradient(circle, var(--blue-glow), transparent 72%);
  opacity:0; transition:opacity .35s var(--ease);
}
.product-grid__card:hover .product-grid__glow{ opacity:1; }
.product-grid__media img{ position:relative; z-index:1; max-height:150px; width:auto; margin:0 auto; transition:transform .4s var(--ease); }
.product-grid__card:hover .product-grid__media img{ transform:scale(1.06); }
.product-grid__cat{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep); }
.product-grid__title{ font-size:15.5px; margin:6px 0 4px; }
.product-grid__title a{ color:var(--ink); }
.product-grid__title a:hover{ color:var(--blue-deep); }
.product-grid__desc{ font-size:13px; color:var(--text-muted); line-height:1.55; flex:1 1 auto; }
.product-grid__meta{ display:flex; gap:12px; margin:8px 0 12px; font-size:11.5px; color:var(--text-faint); flex-wrap:wrap; }
.product-grid__meta span{ display:inline-flex; align-items:center; gap:4px; }
.product-grid__meta svg{ width:12px; height:12px; }
.product-grid__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }

@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:820px){ .product-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .product-grid{ grid-template-columns:1fr; } }

/* ---------- Product lineup gallery — calmer, catalog-style (no float/tilt),
   deliberately distinct from the 3D floating Featured Products cards and
   the single rotating flagship showcase elsewhere on the homepage. ---------- */
.lineup-gallery{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
}
.lineup-gallery__item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  flex:0 1 calc(33.333% - 16px);
  padding:22px 16px; border-radius:var(--radius-lg); background:var(--surface);
  border:1px solid var(--line); transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.lineup-gallery__item:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:rgba(8,146,211,.18); }
.lineup-gallery__media{ height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.lineup-gallery__media img{ max-height:150px; width:auto; margin:0 auto; }
.lineup-gallery__cat{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep); }
.lineup-gallery__title{ font-size:14.5px; margin-top:6px; line-height:1.35; }
.lineup-gallery__badge{ display:inline-block; margin-top:8px; font-size:11.5px; color:var(--text-faint); }

@media (max-width:900px){ .lineup-gallery__item{ flex-basis:calc(50% - 12px); } }
@media (max-width:480px){ .lineup-gallery__item{ flex-basis:100%; } }

/* ---------- Gallery album grid + pure-CSS lightbox (no JS dependency —
   the overlay is an anchor target, shown via :target so it works even if
   motion.js fails to load). Masonry-ish via column-count so items with
   different aspect ratios pack tightly without JS measuring. ---------- */
.eb-gallery-grid{ column-count:3; column-gap:22px; }
.eb-gallery-item{
  display:block; break-inside:avoid; margin-bottom:22px; position:relative;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); text-decoration:none; transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.eb-gallery-item:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.eb-gallery-item img{ width:100%; display:block; }
.eb-gallery-item figcaption{
  padding:10px 14px; font-size:13px; color:var(--text-muted); background:var(--surface);
}
.eb-gallery-item--video{ break-inside:avoid; margin-bottom:22px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.eb-gallery-item--video iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

@media (max-width:900px){ .eb-gallery-grid{ column-count:2; } }
@media (max-width:560px){ .eb-gallery-grid{ column-count:1; } }

.eb-lightbox{
  display:none; position:fixed; inset:0; z-index:1200; align-items:center; justify-content:center; padding:32px;
}
.eb-lightbox:target{ display:flex; }
.eb-lightbox__backdrop{ position:absolute; inset:0; background:rgba(6,24,38,.92); }
.eb-lightbox__frame{
  position:relative; z-index:1; max-width:min(920px, 92vw); max-height:90vh; margin:0;
  display:flex; flex-direction:column; align-items:center;
}
.eb-lightbox__frame img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:var(--radius-md); }
.eb-lightbox__frame figcaption{ color:#fff; font-size:14px; margin-top:12px; text-align:center; }
.eb-lightbox__close{
  position:absolute; top:-38px; right:0; color:#fff; font-size:28px; line-height:1; text-decoration:none;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Framed spec panel (bordered spec-sheet card, flagship lineup) ---------- */
.spec-panel{
  border:1px solid var(--deep-line); border-radius:var(--radius-lg);
  background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
}
.spec-panel__head{
  display:flex; justify-content:space-between; align-items:baseline; padding:14px 18px;
  background:rgba(255,255,255,.06); border-bottom:1px solid var(--deep-line);
}
.spec-panel__head span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-light); }
.spec-panel__head strong{ color:#fff; font-family:var(--font-head); font-size:15px; }
.spec-panel__row{
  display:flex; justify-content:space-between; padding:12px 18px;
  border-bottom:1px solid var(--deep-line); font-size:13.5px;
}
.spec-panel__row:last-child{ border-bottom:none; }
.spec-panel__row span{ color:var(--on-deep-muted); }
.spec-panel__row strong{ color:#fff; font-weight:700; }

/* ---------- Initials avatar (placeholder for team members with no photo yet) ---------- */
.avatar-initials{
  display:inline-flex; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--gradient-accent); color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:28px; letter-spacing:.02em;
  box-shadow:var(--shadow-blue);
}

/* ---------- Leadership card — flex column so the avatar (a block-level
   element per the global img reset) centers via flex, not text-align,
   which never affects block boxes. ---------- */
.leader-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  height:100%; padding:32px 26px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.leader-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:rgba(8,146,211,.18); }
.leader-card__photo{
  width:180px; height:180px; border-radius:50%; object-fit:cover; margin-bottom:20px;
  border:4px solid var(--blue-tint); box-shadow:var(--shadow-blue);
}
.leader-card__name{ font-size:17px; margin-bottom:10px; }
.leader-card__desc{ font-size:14px; color:var(--text-muted); margin-top:12px; line-height:1.7; }

/* ---------- Breadcrumb ---------- */
.eb-breadcrumb{ background:var(--paper-soft); border-bottom:1px solid var(--line); padding:16px 0; font-size:13.5px; }
.eb-breadcrumb a{ color:var(--text-muted); }
.eb-breadcrumb a:hover{ color:var(--blue-deep); }
.eb-breadcrumb .current{ color:var(--ink); font-weight:600; }

/* ---------- Page hero (non-home pages) ---------- */
.page-hero{ background:var(--gradient-deep); color:#fff; padding:48px 0 40px; position:relative; overflow:hidden; }
.page-hero h1{ color:#fff; font-size:clamp(28px,3.8vw,44px); }
.page-hero p{ color:rgba(255,255,255,.78); max-width:680px; margin-top:12px; }

/* ---------- Reusable deep-surface section (replaces every former black panel) ---------- */
.surface-dark{ background:var(--gradient-deep); color:#fff; position:relative; overflow:hidden; }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4{ color:#fff; }
.surface-dark p{ color:var(--on-deep-muted); }
.surface-dark .eyebrow{ color:var(--blue-light); }
.surface-dark .eyebrow::before{ background:var(--blue-light); }
.surface-dark .card-eb, .surface-dark .feature-card{ background:var(--glass-bg); border-color:var(--glass-border); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.surface-dark .card-eb h3, .surface-dark .feature-card h3{ color:#fff; }
.surface-dark .card-eb p, .surface-dark .feature-card p{ color:var(--on-deep-muted); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--gradient-deep); color:rgba(255,255,255,.82); padding:64px 0 24px; position:relative; overflow:hidden; }
.site-footer h5{ color:#fff; font-size:15px; margin-bottom:16px; }
.site-footer a{ color:rgba(255,255,255,.72); }
.site-footer a:hover{ color:var(--blue-light); }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.site-footer ul a{ overflow-wrap:anywhere; word-break:break-word; }
.site-footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.site-footer .footer-logo{ display:inline-flex; align-items:center; background:#fff; border-radius:10px; padding:8px 14px; margin-right:10px; }
.site-footer .footer-logo img{ height:40px; width:auto; display:block; }
.site-footer .footer-logo--ultimotive{ padding:10px 16px; }
.site-footer .footer-logo--ultimotive img{ height:28px; }
.site-footer .footer-contact-list li{ display:flex; align-items:center; gap:10px; }
.site-footer .footer-contact-list svg{ flex:none; width:16px; height:16px; color:var(--blue-light); }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ border-color:var(--blue-light); color:var(--blue-light); background:rgba(79,195,247,.1); }

.topbar__icon{ color:rgba(255,255,255,.85); display:inline-flex; align-items:center; transition:color .2s var(--ease); }
.topbar__icon:hover{ color:var(--blue-light); }

.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; z-index:900; width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
}
.whatsapp-fab svg{ width:28px; height:28px; }

@media (max-width:768px){
  .section{ padding:36px 0; }
  /* A fixed min-height (not auto) so every slide is the same height
     regardless of how much text it has — auto meant a short-caption
     slide (e.g. the video one) got a short box, which forced its
     background image/video's object-fit:cover crop into a thin, zoomed
     sliver, and pushed the carousel dots (bottom:0 of the whole
     carousel, not of the text) right up against the copy above them. */
  .hero-carousel .carousel-item .container-eb{ min-height:480px; padding:40px 5px 60px; }
  .hero-slide-content{ padding:0; max-width:none; }
  .hero-slide-content p{ text-indent:10px; }
  /* The default scrim is a left-to-right fade (dark under the text
     column, fading out toward the image on desktop's two-column
     layout) — on mobile the text spans the full width, so the faded
     right side left it unreadable against a bright background. Flatten
     it to a uniform dark wash so contrast holds across the whole line. */
  .hero-carousel .carousel-item::before{
    background:linear-gradient(180deg, rgba(6,24,38,.85) 0%, rgba(6,24,38,.8) 55%, rgba(6,24,38,.92) 100%);
  }
  .form-panel{ padding:22px; }
  .page-hero{ padding:36px 0 28px; }
}