/* ==========================================================================
   Alphatec — Motion & Design Refinement Layer
   Loaded after styles.css. Everything here either (a) fixes a visual issue in
   the base sheet or (b) adds motion. Nothing here is required for the page to
   function, so if it fails to load the site still reads correctly.
   ========================================================================== */

:root{
  /* Easing curves — one "soft" curve for entrances, one springy curve for
     anything the user triggers, so interaction feels different from ambience. */
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .22s;
  --dur-mid: .45s;
  --dur-slow: .85s;
}

/* ==========================================================================
   1. Accessibility floor
   ========================================================================== */
:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible, .pill-btn:focus-visible, .jump-pill:focus-visible{outline-offset:4px;}

/* Everything below degrades to "no movement, still visible" */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  [data-anim], .reveal, [data-observe]{opacity:1!important; transform:none!important;}
}

/* ==========================================================================
   2. Scroll progress bar in the nav
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--navy), #5B93BE, var(--navy-deep));
  z-index:120; pointer-events:none;
  will-change:transform;
}

/* Nav lifts in on first paint */
.site-nav{
  animation:navDrop .7s var(--ease-out-soft) both;
  will-change:transform;
}
@keyframes navDrop{from{transform:translateY(-100%); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* Hide-on-scroll-down, show-on-scroll-up — gives long catalogue pages back
   their vertical space without losing the nav. */
.site-nav.nav-hidden{transform:translateY(-105%);}
.site-nav{transition:transform .35s var(--ease-out-soft), padding .3s ease, background .3s ease, box-shadow .3s ease;}

/* Underline sweeps from the side the pointer is on rather than always L→R */
.nav-links a::after{transition:width .28s var(--ease-out-soft);}

/* ==========================================================================
   3. Generic reveal system
   Elements get [data-anim="up|left|right|scale|blur"] and an optional
   --d (delay). motion.js adds .is-in when they scroll into view.
   ========================================================================== */
[data-anim]{
  opacity:0;
  transition:
    opacity var(--dur-slow) var(--ease-out-soft) var(--d, 0ms),
    transform var(--dur-slow) var(--ease-out-soft) var(--d, 0ms),
    filter var(--dur-slow) var(--ease-out-soft) var(--d, 0ms);
  will-change:opacity, transform;
}
[data-anim="up"]    {transform:translate3d(0,34px,0);}
[data-anim="down"]  {transform:translate3d(0,-26px,0);}
[data-anim="left"]  {transform:translate3d(-40px,0,0);}
[data-anim="right"] {transform:translate3d(40px,0,0);}
[data-anim="scale"] {transform:scale(.93);}
[data-anim="blur"]  {transform:translate3d(0,20px,0); filter:blur(10px);}
[data-anim].is-in{opacity:1; transform:none; filter:none;}

/* Once the entrance is done, drop will-change so hover transforms stay crisp */
[data-anim].anim-done{will-change:auto;}

/* ==========================================================================
   4. Hero — one orchestrated page-load sequence
   ========================================================================== */
.hero .reveal{animation:none; opacity:0; transform:translate3d(0,26px,0);}
.hero.hero-ready .reveal{animation:heroIn .95s var(--ease-out-soft) forwards;}
.hero.hero-ready .hero-inner .reveal:nth-child(1){animation-delay:.10s;}
.hero.hero-ready .hero-inner .reveal:nth-child(2){animation-delay:.20s;}
.hero.hero-ready .hero-inner .reveal:nth-child(3){animation-delay:.30s;}
.hero.hero-ready .hero-inner .reveal:nth-child(4){animation-delay:.40s;}
.hero.hero-ready .hero-visual.reveal{animation-delay:.22s; animation-name:heroVisualIn;}
@keyframes heroIn{to{opacity:1; transform:none;}}
@keyframes heroVisualIn{
  from{opacity:0; transform:translate3d(0,34px,0) scale(.96);}
  to{opacity:1; transform:none;}
}

/* Headline reads as one object, not a word-by-word typewriter */
.hero h1{letter-spacing:-.02em;}

/* Ambient blobs drift very slowly — the only always-on motion on the page */
.hero-shape-1{animation:drift1 22s ease-in-out infinite alternate;}
.hero-shape-2{animation:drift2 26s ease-in-out infinite alternate;}
@keyframes drift1{to{transform:translate3d(-40px,30px,0) scale(1.12);}}
@keyframes drift2{to{transform:translate3d(36px,-26px,0) scale(1.08);}}

/* Parallax on the hero photo, driven by motion.js */
.hero-visual img{will-change:transform;}
.hero-visual-badge{animation:badgeFloat 5.5s ease-in-out 1.2s infinite;}
@keyframes badgeFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* Trust row separators pulse once on entry instead of sitting static */
.hero-trust .dot{display:inline-block;}

/* ==========================================================================
   5. Buttons — sheen sweep on hover, press feedback
   ========================================================================== */
.btn{transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;}
.btn::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); pointer-events:none; opacity:0;
}
.btn:hover::after{opacity:1; animation:sheen .75s var(--ease-out-soft);}
@keyframes sheen{from{left:-60%;} to{left:130%;}}
.btn:active{transform:translateY(0) scale(.97); transition-duration:.08s;}
.btn-secondary::after, .btn-white::after{
  background:linear-gradient(100deg, transparent, rgba(44,91,133,.14), transparent);
}

/* ==========================================================================
   6. Product card — redesign
   The catalogue photos are portrait studio shots on white with wide margins.
   The base sheet cropped them 4:3 with `cover` under a dark navy scrim, which
   cut the product in half and muddied it. Show the whole product on a light
   stage instead, and move the model number out of the image.
   ========================================================================== */
.product-card{
  border:1px solid var(--gray-300);
  border-radius:20px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,35,51,.04), 0 8px 24px rgba(15,35,51,.05);
  transition:transform .4s var(--ease-out-soft), box-shadow .4s ease, border-color .4s ease;
  position:relative; overflow:hidden;
}
.product-card::before{
  /* soft blue wash that fades up from the base of the card on hover */
  content:''; position:absolute; inset:auto 0 0 0; height:65%;
  background:linear-gradient(to top, rgba(44,91,133,.055), transparent);
  opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:0;
}
.product-card:hover{
  transform:translateY(-8px);
  border-color:rgba(44,91,133,.42);
  box-shadow:0 2px 4px rgba(15,35,51,.05), 0 26px 52px rgba(15,35,51,.14);
}
.product-card:hover::before{opacity:1;}

.product-thumb{
  aspect-ratio:1/1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #ffffff 0%, #F4F7FA 62%, #E9EFF5 100%);
  border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:center;
  padding:10px 12px 14px;
}
/* kill the dark scrim from the base sheet */
.product-thumb::after{display:none;}
.product-thumb img{
  width:100%; height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;          /* melts the photo's white box into the stage */
  transform:scale(1);
  transition:transform .55s var(--ease-out-soft);
}
.product-card:hover .product-thumb img{transform:scale(1.07) translateY(-4px);}

.product-thumb{position:relative;}

/* model number: chip on the stage, no longer white-on-photo */
.product-model{
  left:14px; bottom:14px; top:auto;
  color:var(--navy-deep); text-shadow:none;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--gray-300);
  padding:5px 11px; border-radius:999px;
  font-size:.7rem; letter-spacing:.02em;
  transform:translateY(6px); opacity:0;
  transition:transform .35s var(--ease-out-soft), opacity .35s ease;
  max-width:calc(100% - 28px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.product-card:hover .product-model,
.product-card:focus-within .product-model{transform:translateY(0); opacity:1;}
/* touch devices never hover — keep the model always readable there */
@media (hover:none){
  .product-model{transform:none; opacity:1;}
}
/* One column on a phone means a square stage eats most of the viewport. */
@media(max-width:560px){
  .product-thumb{aspect-ratio:4/3;}
}

.product-body{position:relative; z-index:1; padding:20px 20px 22px; display:flex; flex-direction:column; gap:7px;}
.product-desc{flex:1 0 auto;}
.product-actions{margin-top:auto; padding-top:4px;}
.product-cat{
  color:var(--navy);
  font-size:.68rem; letter-spacing:.07em;
}
.product-body h3{font-size:1rem; line-height:1.35; letter-spacing:-.01em;}
.product-desc{line-height:1.6;}

/* image loads in rather than popping */
.product-thumb img{opacity:0; transition:opacity .5s ease, transform .55s var(--ease-out-soft);}
.product-thumb img.img-loaded{opacity:1;}
.product-thumb.img-fallback{background:linear-gradient(150deg,var(--navy-deep),var(--navy));}
.product-thumb.img-fallback::before{color:rgba(255,255,255,.4);}

/* specs drawer — measured height so long spec lists don't get clipped */
.product-specs{transition:max-height .38s var(--ease-out-soft), opacity .3s ease, margin .38s ease;}
.product-specs.open{max-height:400px;}
.product-specs li{
  opacity:0; transform:translateX(-8px);
  transition:opacity .3s ease, transform .3s var(--ease-out-soft);
  padding:3px 0;
}
.product-specs.open li{opacity:1; transform:none;}
.product-specs.open li:nth-child(1){transition-delay:.06s;}
.product-specs.open li:nth-child(2){transition-delay:.12s;}
.product-specs.open li:nth-child(3){transition-delay:.18s;}
.product-specs.open li:nth-child(4){transition-delay:.24s;}
.specs-toggle{transition:background .25s ease, color .25s ease, border-color .25s ease;}
.specs-toggle:active{transform:scale(.98);}

.pill-btn{transition:transform .2s var(--ease-spring), background .2s ease, box-shadow .2s ease, opacity .2s ease;}
.pill-btn.solid:hover{opacity:1; transform:translateY(-2px); box-shadow:0 8px 18px rgba(44,91,133,.32);}
.pill-btn:active{transform:translateY(0) scale(.97);}

/* Staggered entry for catalogue cards. --i is set per card by products.js. */
.product-grid .product-card{
  animation:cardIn .6s var(--ease-out-soft) both;
  animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes cardIn{
  from{opacity:0; transform:translate3d(0,26px,0) scale(.97);}
  to{opacity:1; transform:none;}
}
/* Re-filtering: fade the grid out, then the new cards stagger back in */
.product-grid.is-swapping{opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease;}
.product-grid{transition:opacity .3s ease, transform .3s ease;}

/* empty state */
.catalogue-empty{
  grid-column:1/-1; text-align:center; padding:56px 20px;
  color:var(--gray-500); animation:cardIn .5s var(--ease-out-soft) both;
}
.catalogue-empty strong{display:block; font-family:var(--ff-head); color:var(--navy-deep); font-size:1.05rem; margin-bottom:6px;}

/* live result count above the grid */
.result-count{
  max-width:1300px; margin:0 auto 18px; font-size:.85rem; color:var(--gray-500);
  font-family:var(--ff-head); font-weight:500;
}
.result-count strong{color:var(--navy-deep);}

/* filter controls get the same focus treatment as the rest of the site */
.cat-filters select, .cat-filters input{transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.cat-filters input:hover, .cat-filters select:hover{border-color:var(--navy);}

/* ==========================================================================
   7. Solution / category / industry / project cards
   ========================================================================== */
.sol-card, .industry-card, .project-card, .item-card, .why-card, .step-item, .value-card{
  transition:transform .4s var(--ease-out-soft), box-shadow .4s ease, border-color .4s ease;
}
.sol-card{position:relative; overflow:hidden;}
.sol-photo{transition:transform .6s var(--ease-out-soft);}
.sol-card:hover .sol-photo{transform:scale(1.08);}
.sol-card:hover .sol-icon{transform:translateY(-4px) rotate(-6deg);}
.sol-icon{transition:transform .4s var(--ease-spring), box-shadow .4s ease;}
.sol-link{transition:transform .3s var(--ease-out-soft), color .3s ease;}
.sol-card:hover .sol-link{transform:translateX(5px);}

/* the arrow in "See Products →" slides independently of the label */
.sol-link{display:inline-flex; align-items:center; gap:6px;}

.industry-card:hover{transform:translateY(-8px);}
.industry-photo{transition:transform .6s var(--ease-out-soft);}
.industry-card:hover .industry-photo{transform:scale(1.08);}

.project-card{overflow:hidden;}
.project-img img, .project-img .project-logo{transition:transform .6s var(--ease-out-soft);}
.project-card:hover .project-img img{transform:scale(1.08);}

.item-card{transition:transform .35s var(--ease-out-soft), box-shadow .35s ease, border-color .35s ease;}
.item-card:hover .item-icon{transform:scale(1.1) rotate(-6deg); background:var(--navy); color:#fff;}
.item-icon{transition:transform .35s var(--ease-spring), background .3s ease, color .3s ease;}

.why-card span{transition:transform .4s var(--ease-spring);}
.why-card:hover span{transform:scale(1.2) translateY(-2px);}

/* Numbered steps: the connecting rail draws itself as the section enters */
.steps-track{position:relative;}
.step-item .step-num{transition:transform .4s var(--ease-spring), background .3s ease;}
.step-item:hover .step-num{transform:scale(1.12); background:var(--navy-deep);}

/* ==========================================================================
   8. Stats — count up on entry
   ========================================================================== */
.exp-stat strong, .stat strong, .stat-card strong, .hero-visual-badge strong{
  font-variant-numeric:tabular-nums;
}
.exp-stat{transition:transform .35s var(--ease-out-soft);}
.exp-stat:hover{transform:translateY(-4px);}
.stat{position:relative; overflow:hidden;}
.stat::after{
  content:''; position:absolute; top:-2px; left:0; height:2px; width:100%;
  background:var(--navy); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease-out-soft);
}
.stat.is-in::after{transform:scaleX(1);}

/* ==========================================================================
   9. Client logo wall → gentle continuous marquee
   Duplicated track is built by motion.js. Pauses on hover and on focus.
   ========================================================================== */
.client-marquee{
  position:relative; overflow:hidden; margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.client-marquee-track{
  display:flex; align-items:center; gap:56px; width:max-content;
  animation:marquee 42s linear infinite;
}
.client-marquee:hover .client-marquee-track,
.client-marquee:focus-within .client-marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/* Logos arrive at wildly different aspect ratios, so each gets an identical
   box and is fitted inside it — otherwise a tall logo renders as a stamp next
   to a wide one. */
.client-marquee .client-logo{
  display:flex; align-items:center; justify-content:center;
  width:156px; height:58px;
}
.client-marquee .client-logo img{
  max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain;
}
.client-marquee .client-logo, .client-marquee span{
  filter:grayscale(1); opacity:.65; transition:filter .3s ease, opacity .3s ease, transform .3s ease;
  flex-shrink:0; font-family:var(--ff-head); font-weight:600; color:var(--gray-500); white-space:nowrap;
}
.client-marquee .client-logo:hover, .client-marquee span:hover{
  filter:none; opacity:1; transform:scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .client-marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:36px;}
  .client-marquee{-webkit-mask-image:none; mask-image:none;}
}

/* ==========================================================================
   10. Category panels
   ========================================================================== */
.cat-panel.open{animation:panelIn .5s var(--ease-out-soft) both;}
@keyframes panelIn{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
.cat-panel.open .item-grid .item-card{animation:cardIn .55s var(--ease-out-soft) both;}
.cat-panel.open .item-grid .item-card:nth-child(1){animation-delay:.05s;}
.cat-panel.open .item-grid .item-card:nth-child(2){animation-delay:.11s;}
.cat-panel.open .item-grid .item-card:nth-child(3){animation-delay:.17s;}
.cat-panel.open .item-grid .item-card:nth-child(4){animation-delay:.23s;}
.cat-panel.open .item-grid .item-card:nth-child(5){animation-delay:.29s;}
.cat-panel.open .item-grid .item-card:nth-child(6){animation-delay:.35s;}

.jump-pill{transition:transform .25s var(--ease-spring), background .25s ease, border-color .25s ease, color .25s ease;}
.sol-card.active{animation:activePulse .5s var(--ease-out-soft);}
@keyframes activePulse{
  0%{box-shadow:0 0 0 0 rgba(44,91,133,.35);}
  100%{box-shadow:0 14px 38px rgba(44,91,133,.22);}
}

/* ==========================================================================
   11. Modal
   ========================================================================== */
.spec-modal-overlay{opacity:0; transition:opacity .25s ease;}
.spec-modal.open .spec-modal-overlay{opacity:1;}
.spec-modal-panel{animation:modalPop .38s var(--ease-spring) both;}
@keyframes modalPop{
  from{opacity:0; transform:translateY(24px) scale(.95);}
  to{opacity:1; transform:none;}
}
.spec-modal-close{transition:background .2s ease, transform .2s var(--ease-spring);}
.spec-modal-close:hover{transform:rotate(90deg);}

/* ==========================================================================
   12. Forms
   ========================================================================== */
.contact-form input, .contact-form select, .contact-form textarea{
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  transform:translateY(-1px);
}
.form-note{transition:opacity .3s ease;}
.form-note.is-sending{opacity:.6;}
.talk-item{transition:transform .25s var(--ease-out-soft), background .25s ease, border-color .25s ease;}
.talk-item:hover .talk-icon{animation:nudge .5s var(--ease-spring);}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

/* ==========================================================================
   13. Footer + floating actions
   ========================================================================== */
.site-footer a{transition:color .2s ease, transform .2s ease; width:fit-content;}
.site-footer a:hover{transform:translateX(3px);}

.wa-float{opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;}
.wa-float.wa-visible{opacity:1; transform:none; pointer-events:auto;}
.wa-float{transition:opacity .35s ease, transform .4s var(--ease-spring), box-shadow .25s ease;}
.wa-float::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.5); opacity:0;
  animation:waPing 3.2s ease-out 2s infinite;
}
@keyframes waPing{
  0%{transform:scale(.9); opacity:.7;}
  70%{transform:scale(1.35); opacity:0;}
  100%{opacity:0;}
}
.wa-float:hover{transform:translateY(-5px) scale(1.07);}

/* Back to top */
.to-top{
  position:fixed; right:22px; bottom:88px; z-index:149;
  width:44px; height:44px; border-radius:50%;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s ease, transform .35s var(--ease-spring), background .2s ease;
}
.to-top.is-visible{opacity:1; transform:none; pointer-events:auto;}
.to-top:hover{background:#fff; transform:translateY(-3px);}
.to-top svg{width:18px; height:18px;}
@media(max-width:600px){.to-top{right:16px; bottom:76px; width:40px; height:40px;}}

/* ==========================================================================
   14. Page transition — a short fade on unload so navigation doesn't flash
   ========================================================================== */
body{animation:pageIn .45s var(--ease-out-soft) both;}
@keyframes pageIn{from{opacity:0;} to{opacity:1;}}
body.page-leaving{opacity:0; transition:opacity .22s ease;}

/* ==========================================================================
   15. Typographic + spacing tightening
   ========================================================================== */
h1,h2,h3{letter-spacing:-.015em;}
h2{line-height:1.18;}
.section-eyebrow{color:var(--navy);}
p{max-width:72ch;}
.page-hero p, section.center p, .cat-section-head p{max-width:62ch;}
.hero-sub{max-width:54ch;}

/* Section rhythm: slightly tighter than 100px so pages scroll less */
section{padding:92px 8vw;}
@media(max-width:900px){section{padding:64px 6vw;}}

/* Spec list gets a real bullet rather than a "•" baked into the text node */
.product-specs li{
  position:relative; padding-left:16px; margin-bottom:0; line-height:1.5;
}
.product-specs li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--navy); opacity:.55;
}

/* ==========================================================================
   FRAMELESS PRODUCTS — no cards, no boxes.
   Products sit directly on the page background. Photo backgrounds are
   removed and white photo edges are blended away (multiply), so the product
   looks like it is floating on the site. Every product keeps a
   "Request a Quote" button.
   ========================================================================== */

/* ---- Category tiles (homepage + products page) ---- */
.sol-card,
.sol-card:hover,
.sol-card.active{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.sol-card:hover{transform:none;}
.sol-photo{
  aspect-ratio:4/3;
  background-color:transparent;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:multiply;
}
.sol-photo::after{display:none;}          /* remove the blue gradient box */
.sol-photo .sol-icon{display:none;}       /* remove the white icon badge */
.sol-card:hover .sol-photo{transform:scale(1.06);}
.sol-card-body,
.sol-card.has-photo .sol-card-body{padding:18px 6px 0; text-align:center;}
.sol-card.active .sol-link{color:var(--navy);}

/* homepage tile: clickable area + quote button */
.sol-card .sol-card-link{display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none;}
.sol-card .sol-quote{align-self:center; margin-top:18px;}

/* ---- Catalogue product cards ---- */
.product-card,
.product-card:hover{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.product-card:hover{transform:none;}
.product-card::before{display:none;}
.product-thumb,
.product-thumb.img-fallback{
  background:transparent;
  border-bottom:0;
  padding:0;
}
.product-thumb.img-fallback::before{color:rgba(15,35,51,.25);}
.product-thumb img{mix-blend-mode:multiply;}
.product-model{background:transparent; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;}
.product-body{padding:14px 4px 0; text-align:center; align-items:center;}
.product-desc{text-align:center;}
.specs-toggle{background:transparent;}
.product-specs{text-align:left; width:100%;}
.product-actions{width:100%; justify-content:center;}
.product-actions .pill-btn{flex:0 1 auto; padding:10px 28px;}

/* ==========================================================================
   FRAMELESS PRODUCT TILES — products.html category panels
   (scoped to .item-product so the "why choose us" style cards on other
   pages keep their look)
   ========================================================================== */
.item-card.item-product,
.item-card.item-product:hover{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0; overflow:visible; transform:none;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
}
.item-product .item-link{display:flex; flex-direction:column; align-items:center; width:100%; color:inherit; text-decoration:none;}
.item-product .item-media{width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;}
.item-product .item-media img{
  width:100%; height:100%; object-fit:contain; display:block;
  mix-blend-mode:multiply; transition:transform .5s var(--ease-out-soft);
}
.item-product:hover .item-media img{transform:scale(1.06);}
.item-product h3{margin:14px 6px 0; font-size:1rem; line-height:1.35;}
.item-product .item-link:hover h3{color:var(--navy);}
.item-product .item-quote{margin-top:16px;}