/* Global Responsive & Accessibility Styles (shared) */
/* 1. Reset & base */
*,*::before,*::after{box-sizing:border-box;}
html{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans';-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem;}
body{margin:0;min-height:100dvh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#0a2342;background:#fff;line-height:1.55;font-size:clamp(.95rem,0.32vw+0.9rem,1.05rem);} 
body.menu-open{overflow:hidden;touch-action:none;}
img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block;}
img{font-style:italic;background-repeat:no-repeat;background-size:cover;}

/* Catalog shared layout */
.catalog-main{max-width:80rem;margin-inline:auto;padding-left:1rem;padding-right:1rem;padding-top:1.5rem;padding-bottom:6rem;}
@media (min-width:640px){.catalog-main{padding-left:1.5rem;padding-right:1.5rem;}}
@media (min-width:1024px){.catalog-main{padding-left:2rem;padding-right:2rem;}}
.catalog-header-wrap{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem;}
@media (min-width:768px){.catalog-header-wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}}
.catalog-search{display:flex;align-items:center;gap:.45rem;padding:.3rem .85rem;border:1px solid #e5e7eb;border-radius:9999px;background:#fff;min-height:36px;width:100%;box-shadow:0 1px 2px rgba(0,0,0,.05);} 
.catalog-search input{background:transparent;outline:none;border:none;width:100%;font-size:.9rem;line-height:1.15;min-height:28px;padding:.15rem 0;} 
.catalog-search:focus-within{border-color:#0ea5e9;box-shadow:0 0 0 2px #bae6fd,0 1px 2px rgba(0,0,0,.05);} 
.catalog-toolbar{background:linear-gradient(to bottom,#ffffff,#f5f5f5cc);border-bottom:1px solid #e7e5e4;}
.catalog-toolbar-inner{max-width:80rem;margin-inline:auto;padding:1rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;}
@media (min-width:640px){.catalog-toolbar-inner{padding:1rem 1.5rem;}}
@media (min-width:1024px){.catalog-toolbar-inner{padding:1rem 2rem;}}
/* Removed .catalog-tabs styles (category tab bar deprecated) */

/* Phone icon utility */
.icon-phone{width:clamp(22px,5vw,30px);height:clamp(22px,5vw,30px);display:inline-block;color:#1886ff;flex-shrink:0;}
.icon-phone svg{width:100%;height:100%;display:block;}
/* Mail icon utility (mirrors phone sizing for visual consistency) */
.icon-mail{width:clamp(22px,5vw,30px);height:clamp(22px,5vw,30px);display:inline-block;flex-shrink:0;}
.icon-mail svg{width:100%;height:100%;display:block;}
/* Customer service icon */
.cs-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.cs-icon svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));}
@media (min-width:640px){.cs-icon svg{width:26px;height:26px;}}
@media (min-width:1024px){.cs-icon svg{width:28px;height:28px;}}
@media (min-width:768px){.icon-phone{width:26px;height:26px;}}
@media (min-width:768px){.icon-mail{width:26px;height:26px;}}
.catalog-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.25rem;}
@media (min-width:640px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:768px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1280px){.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:1536px){.catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
/* Slight gap scaling on ultra-wide for better density */
@media (min-width:1800px){.catalog-grid{gap:1.5rem;}}

/* Meta line under toolbar */
.catalog-results-meta{font-size:.8125rem;color:#78716c;margin:1rem 0 .75rem;}

/* Unified catalog card styling */
.catalog-card{background:#fff;border:1px solid #e5e7eb;border-radius:1.25rem;box-shadow:0 6px 20px -8px rgba(0,0,0,.15);display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:box-shadow .25s,transform .25s;}
/* Improve large lists performance */
.catalog-card{content-visibility:auto;contain-intrinsic-size:300px 400px;}
.catalog-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -12px rgba(0,0,0,.25);} 
.catalog-card:focus-within{box-shadow:0 0 0 3px #0ea5e9,0 14px 32px -10px rgba(0,0,0,.25);} 
/* Dynamic card enhancement (shade-free version) */
.dynamic-card{position:relative;isolation:isolate;--tiltX:0deg;--tiltY:0deg;--shadow:rgba(2,8,23,0.28);transition:transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s cubic-bezier(.19,1,.22,1), border-color .35s;will-change:transform;backface-visibility:hidden;perspective:1000px;}
/* Remove overlay entirely */
.dynamic-card:before{content:none!important;}
/* Hover/focus: only shadow emphasis (no color/gradient shift) */
.dynamic-card:hover,.dynamic-card:focus-visible{box-shadow:0 18px 44px -14px var(--shadow),0 4px 10px -4px rgba(0,0,0,.12);} 
.dynamic-card.animating{transform:rotateX(var(--tiltY)) rotateY(var(--tiltX)) scale(1.025);}
.dynamic-card.touch-tilt.animating{transform:rotateX(var(--tiltY)) rotateY(var(--tiltX)) scale(1.03);} 
.dynamic-card .catalog-card-img img{transition:transform .6s ease,filter .5s ease;}
.dynamic-card:hover .catalog-card-img img{transform:scale(1.09);filter:saturate(1.1) contrast(1.05);} 
.dynamic-card:focus-within .catalog-card-img img{transform:scale(1.06);filter:saturate(1.07) contrast(1.03);} 
@media (prefers-reduced-motion: reduce){
  .dynamic-card,.dynamic-card *{transition:none!important;}
  .dynamic-card.animating{transform:none!important;}
  .dynamic-card:hover .catalog-card-img img,.dynamic-card:focus-within .catalog-card-img img{transform:none!important;}
}
/* Flat background (no shade) */
.dynamic-card{background:#ffffff;border:1px solid #e4e7ec;}
.dynamic-card:hover,.dynamic-card:focus-within{border-color:#d7dbe0;} 
/* Keep title color stable for readability */
.dynamic-card .catalog-card-badge{backdrop-filter:blur(6px);} 
.catalog-card-img{position:relative;aspect-ratio:4/3;background:#f5f5f4;}
.catalog-card-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
/* Indicate missing image mapping (if any) */
[data-missing-image=true] .catalog-card-img{background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 10px,#e5e7eb 10px,#e5e7eb 20px);} 
[data-missing-image=true] .catalog-card-img:after{content:'Image coming soon';position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.55);color:#fff;font-size:.62rem;letter-spacing:.5px;padding:.25rem .4rem;text-align:center;}
.hero-video-wrapper{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.82) contrast(1.05) saturate(1.08);transform:scale(1.02);}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,35,66,.38),rgba(10,35,66,.12) 55%,rgba(255,255,255,.5));mix-blend-mode:multiply;}
.hero-with-video>.mx-auto>*{position:relative;z-index:1;}
/* Remove solid/gradient background so video is visible */
.hero-with-video{background:transparent!important;min-height:100dvh;display:flex;align-items:center;}
/* Custom hero text sizing (video unchanged) */
.hero-heading{font-size:clamp(2.65rem,6.2vw+0.5rem,3.85rem);line-height:1.055;} /* Even bigger mobile base (user request) */
@media (min-width:1024px){.hero-heading{font-size:clamp(2.8rem,2.4vw+1.2rem,4.1rem);} }
.hero-sub{font-size:clamp(1rem,1.1vw+0.65rem,1.28rem);} 
@media (min-width:1280px){.hero-sub{font-size:clamp(1.05rem,0.9vw+0.9rem,1.35rem);} }
/* Center hero content tighter (remove excess top spacing) */
/* Balanced vertical spacing: slight shift upward without crowding header */
.hero-with-video{margin-top:0;}
/* Base (mobile first) hero positioning (reduced gap under tall mobile header) */
.hero-with-video .hero-grid{padding-top:0;padding-bottom:1.35rem;transform:translateY(-2.55rem);} /* tighter gap */
@media (min-width:640px){.hero-with-video .hero-grid{padding-top:0;padding-bottom:2.15rem;transform:translateY(-2.15rem);}}
@media (min-width:1024px){.hero-with-video .hero-grid{padding-top:0;padding-bottom:2.55rem;transform:translateY(-2.75rem);}}
/* Very short viewport safeguard: reduce upward shift to prevent overlap */
@media (max-height:620px){.hero-with-video .hero-grid{transform:translateY(-0.75rem);padding-bottom:1.4rem;}}
@media (max-height:520px){.hero-with-video .hero-grid{transform:translateY(-0.4rem);padding-bottom:1.1rem;}}
/* Ultra narrow width refinement (<360px) tighten slightly less to avoid clipping */
@media (max-width:359px){
  .hero-with-video .hero-grid{transform:translateY(-2.1rem);padding-bottom:1.25rem;}
  .hero-heading{font-size:clamp(2.35rem,7.2vw+0.4rem,3.4rem);} 
  .hero-sub{font-size:clamp(1.04rem,2.6vw+0.55rem,1.28rem);}
}
/* Ultra tiny height + narrow width safeguard to avoid overlapping header */
@media (max-width:359px) and (max-height:520px){
  .hero-with-video .hero-grid{transform:translateY(-1.65rem);}
}
/* If header height increases, adjust calc below by changing 5rem -> actual header total height */
/* Removed desktop height subtraction to avoid initial scroll jump hiding part of logo */
/* If you still want a subtle overlay tint, adjust .hero-video-overlay above */
.hero-text-shadow{text-shadow:0 2px 4px rgba(0,0,0,.35),0 4px 18px rgba(0,0,0,.25);} 
@media (min-width:1024px){.hero-text-shadow{text-shadow:0 3px 6px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);} }
@media (prefers-reduced-motion:reduce){.hero-bg-video{animation:none!important;filter:brightness(.9);}}
.catalog-card-body{padding:1rem;display:flex;flex-direction:column;gap:.75rem;flex:1 1 auto;}
.catalog-card-body{--card-pad:1rem;padding:var(--card-pad);} 
@media (min-width:640px){.catalog-card-body{--card-pad:1.1rem}}
@media (min-width:1024px){.catalog-card-body{--card-pad:1.25rem}}
.catalog-card-title{font-size:1rem;font-weight:600;line-height:1.3;margin:0;word-break:break-word;}
@media (min-width:640px){.catalog-card-title{font-size:1.0625rem;}}
.catalog-card-title.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:639px){.catalog-card-title.line-clamp{-webkit-line-clamp:2;line-clamp:2;}}
@media (min-width:640px) and (max-width:1023px){.catalog-card-title.line-clamp{-webkit-line-clamp:2;line-clamp:2;}}
@media (min-width:1024px){.catalog-card-title.line-clamp{-webkit-line-clamp:3;line-clamp:3;}}
.catalog-card ul{margin:0;padding-left:1.1rem;font-size:.8125rem;line-height:1.35;color:#57534e;list-style:disc;max-height:min(38vh,14rem);overflow:auto;}
@media (min-width:640px){.catalog-card ul{max-height:min(40vh,16rem);}}
@media (min-width:1024px){.catalog-card ul{max-height:min(42vh,18rem);}}
.catalog-card ul:empty{display:none;}
/* Back To Top Button */
#backToTop{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0) + clamp(.9rem,1.1vw + .6rem,1.55rem));transform:translate(-50%,14px) scale(.8);width:clamp(42px,6.4vw,52px);height:clamp(42px,6.4vw,52px);display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,0.2);color:#0a2342;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1),background .3s,color .3s,box-shadow .35s;z-index:90;outline:none;padding:0;margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}/* 20% base */
#backToTop::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 2px 4px -2px rgba(0,0,0,.22),0 4px 10px -4px rgba(0,0,0,.18);opacity:.35;transition:opacity .4s;}/* subtle ring */
#backToTop:hover{background:rgba(255,255,255,0.95);} 
#backToTop:focus-visible{background:rgba(255,255,255,0.95);box-shadow:0 0 0 3px rgba(14,165,233,.55),0 6px 18px -6px rgba(0,0,0,.3);} 
#backToTop:hover::before,#backToTop:focus-visible::before{opacity:.6;}
#backToTop:active{transform:translate(-50%,16px) scale(.78);}/* pressed */
#backToTop.visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(.94);} 
#backToTop svg{pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));opacity:.9;transition:transform .45s cubic-bezier(.19,1,.22,1);} 
#backToTop:hover svg,#backToTop:focus-visible svg{transform:translateY(-2px);} 
@media (prefers-reduced-motion:reduce){#backToTop{transition:none;}}
@media (max-width:640px){#backToTop{width:56px;height:56px;}}
@media (max-width:480px){#backToTop{width:54px;height:54px;}}
@media (max-width:380px){#backToTop{width:52px;height:52px;}}
@media (max-width:340px){#backToTop{width:50px;height:50px;}}
@media (max-height:520px){#backToTop{bottom:clamp(.55rem,2vh,.9rem);}}
/* High contrast mode improvement */
@media (forced-colors:active){#backToTop{background:ButtonFace;border:1px solid ButtonText;}}
.catalog-card-badge{position:absolute;left:.75rem;top:.75rem;padding:.35rem .5rem;border-radius:.6rem;font-size:.6875rem;font-weight:600;background:#ffffffee;border:1px solid #e7e5e4;color:#3f3f46;backdrop-filter:blur(4px);} 
.catalog-card-body .list-spacer{min-height:1rem;}
.catalog-quote-btn{width:100%;min-height:44px;padding:.75rem 1rem;border-radius:1rem;background:#24437A;color:#fff;font-weight:600;font-size:.9rem;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.catalog-quote-btn:hover{background:#1b335c;}
.catalog-quote-btn:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .catalog-card,.catalog-card *{transition:none!important;}
  .catalog-card:hover{transform:none!important;}
}

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

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

/* 3. Typographic scale */
h1{font-size:clamp(2rem,4vw+1rem,3.25rem);line-height:1.1;font-weight:800;}
h2{font-size:clamp(1.5rem,2.4vw+0.5rem,2.5rem);line-height:1.15;font-weight:700;}
h3{font-size:clamp(1.25rem,1.4vw+0.6rem,1.75rem);line-height:1.2;font-weight:600;}
small{font-size:.825em;}

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

/* 5. Interactive */
a{text-decoration:none;color:#0a2342;}a:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;border-radius:0.5rem;}
button{cursor:pointer;border:none;font:inherit;background:none;}
button:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;border-radius:0.75rem;}

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

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

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

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

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

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

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

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

/* 14. Ultra-small viewport refinements (<360px) */
@media (max-width:359px){
  header .site-logo{max-height:52px;}
  .catalog-main{padding-left:.75rem;padding-right:.75rem;}
  h1{font-size:clamp(1.65rem,8vw,2.2rem);} 
  .catalog-search{padding:.25rem .6rem;min-height:32px;}
  .catalog-search input{font-size:.82rem;min-height:24px;}
  .catalog-sort select{padding:.3rem .7rem;font-size:.68rem;min-height:28px;}
  .catalog-card{border-radius:1rem;}
  .catalog-card-body{--card-pad:.85rem;}
  .catalog-card-title{font-size:.95rem;}
  .catalog-quote-btn{min-height:40px;padding:.6rem .85rem;font-size:.8rem;}
}
/* Very short landscape viewports: tighten card spacing */
@media (orientation:landscape) and (max-height:500px){
  .catalog-grid{gap:.85rem;}
  .catalog-card-title{font-size:.92rem;}
}

/* 15. Hard wrap protection for very long product names */
.catalog-card-title,.catalog-card-title.line-clamp{overflow-wrap:anywhere;word-break:break-word;}
/* Extra clamp for ultra-wide to avoid excessive vertical growth */
@media (min-width:1800px){.catalog-card-title{font-size:1.05rem;}}

/* 16. Remove any legacy inline min-heights on catalog search inputs if present */
.catalog-search input[style]{min-height:auto!important;height:auto!important;}
#mobileNav{will-change:transform;}
#mobileNav .rotate-180{transform:rotate(180deg);} 

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

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

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

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

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

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

/* 19. Product category description justified alignment */
.cat-desc{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
@media (max-width:380px){
  /* Avoid awkward large gaps on ultra-narrow phones */
  .cat-desc{ text-align:left; }
}
@media (min-width:1024px){
  /* Maintain justification on desktop but constrain measure slightly if inside wide card */
  .cat-desc{ max-width:78ch; }
}

/* 19. Orientation & very short viewport refinements */
@media (orientation:landscape) and (max-height:600px){
  .hero-heading{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.05;}
  .hero-sub{font-size:clamp(.9rem,1.4vw,1.05rem);}
  .hero-with-video .hero-grid{transform:translateY(-1.1rem)!important;padding-bottom:1rem;}
}
@media (orientation:landscape) and (max-height:480px){
  .hero-with-video .hero-grid{transform:translateY(-0.5rem)!important;padding-bottom:.75rem;}
  .hero-heading{font-size:clamp(1.45rem,2.6vw,2.05rem);}
}

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

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

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

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

/* 24. Brand / marketplace scrolling strip */
.brand-strip{background:#ffffff;} 
.brand-strip-track{width:100%;position:relative;overflow:hidden;}
.brand-strip-sequence{flex:0 0 auto;animation:brandScroll 28s linear infinite;}
.brand-strip:hover .brand-strip-sequence,.brand-strip:focus-within .brand-strip-sequence{animation-play-state:paused;}
@keyframes brandScroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
.brand-logo{filter:grayscale(8%) contrast(104%) saturate(108%);opacity:.95;transition:filter .35s,opacity .35s,transform .35s;will-change:filter,opacity;}
.brand-logo:hover,.brand-logo:focus-visible{filter:none;opacity:1;transform:scale(1.04);}
.brand-bullet{width:.65rem;height:.65rem;border-radius:50%;background:radial-gradient(circle at 30% 30%,#cba269,#8d6a34);box-shadow:0 0 0 4px rgba(203,162,105,.18),0 2px 4px -1px rgba(0,0,0,.15);}
@media (max-width:640px){
  .brand-strip-sequence{animation-duration:22s;}
  .brand-strip{border-radius:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .brand-strip-sequence{animation-duration:0s;animation-iteration-count:1;animation-name:none;}
}
/* Ensure seamless loop: duplicate sequences inline in markup */
/* Additional layout for static-left logo variant */
.brand-strip-track{gap:0;}
.brand-strip-track>.brand-strip-sequence{padding-top:.5rem;padding-bottom:.5rem;}
.brand-strip-mask{position:absolute;inset:0;pointer-events:none;background:transparent;}
.brand-strip:hover .brand-logo{filter:none;opacity:1;}
/* Slightly slower when static logo present */
section#marketplaces .brand-strip-sequence{animation-duration:34s;}

/* Uniform accreditation logo sizing (responsive square/rect box) */
.brand-logo-box{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:clamp(88px,15vw,140px);height:clamp(70px,12vw,120px);position:relative;padding:.35rem;}
.brand-logo-box img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
@media (max-width:640px){
  /* Larger logos on small devices while still clamped for very narrow widths */
  .brand-logo-box{width:clamp(92px,32vw,140px);height:clamp(70px,26vw,118px);padding:.35rem;}
}
@media (min-width:1024px){
  .brand-logo-box{width:clamp(110px,11vw,170px);height:clamp(80px,9vw,138px);} 
}
/* Optional subtle equal-height baseline alignment helper */
.brand-logo-box:before{content:"";position:absolute;inset:0;border-radius:0.85rem;background:linear-gradient(145deg,#ffffff,#f1f5f9);box-shadow:0 2px 4px -2px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);opacity:0;transition:opacity .35s;}
.brand-logo-box:hover:before,.brand-logo-box:focus-within:before{opacity:1;}
.brand-logo-box img{position:relative;z-index:1;}