/* ==========================================================================
   v3 — premium hero, refined header, preloader, app-style mobile
   ========================================================================== */

/* ---------------- Preloader ---------------- */
.preloader { display: none !important; }
.preloader2 { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(600px 400px at 50% 42%, #14213d 0%, #070b13 70%); transition: opacity .55s ease, visibility .55s, clip-path .7s cubic-bezier(.7,0,.2,1); clip-path: circle(150% at 50% 45%); }
.preloader2.done { opacity: 0; visibility: hidden; clip-path: circle(0% at 50% 45%); }
.pl-core { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.pl-core img { width: 96px; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); animation: plPop .9s cubic-bezier(.2,.9,.2,1.2) both; }
.pl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 3; }
.pl-arc { fill: none; stroke: url(#plg); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 260; transform-origin: 60px 60px; animation: plSpin 1.1s linear infinite; }
.pl-name { font: 700 .82rem/1 var(--display); letter-spacing: .5em; padding-left: .5em; color: transparent; background: linear-gradient(90deg, #6b778f 0%, #fff 50%, #6b778f 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: plShine 1.6s linear infinite; }
.pl-line { width: 120px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.pl-line i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, #ff5a36, transparent); animation: plLine 1s ease-in-out infinite; }
@keyframes plSpin { to { transform: rotate(360deg); } }
@keyframes plPop { from { transform: scale(.6); opacity: 0; } }
@keyframes plShine { to { background-position: -200% 0; } }
@keyframes plLine { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------------- Header: roomier, search separated ---------------- */
.header-in { gap: 34px; }
.site-logo { margin-right: 6px; }
.header-search { max-width: 620px; height: 52px; padding: 5px; gap: 6px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.header-search .hs-icon { display: grid; place-items: center; width: 40px; color: #7f8ba3; flex-shrink: 0; }
.header-search input[type=search] { padding: 0 6px; }
.header-search .hs-btn { width: auto; margin-right: 0; height: 42px; padding: 0 22px; border-radius: 999px; background: var(--grad-red); color: #fff; font-weight: 600; font-size: .9rem; flex-shrink: 0; transition: filter .2s; }
.header-search .hs-btn:hover { filter: brightness(1.1); }
.header-search:focus-within { background: rgba(255,255,255,.07); }
.header-actions { gap: 4px; }
.main-nav { border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.015); }
.nav-in { height: 58px; gap: 28px; }
.cat-menu-btn { height: 42px; padding: 0 18px; border-radius: 12px; }
.main-nav .menu > li > a { height: 58px; padding: 0 16px; }
.m-searchbar { display: none; }

/* ---------------- Hero v3 ---------------- */
.hero, .trust { display: none; }
.hero2 { position: relative; overflow: hidden; padding: 64px 0 56px; background: #060a12; isolation: isolate; }
.hero2-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero2-bg .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.hero2-bg .b1 { width: 620px; height: 620px; right: -120px; top: -160px; background: radial-gradient(circle, #1d4fd8 0%, transparent 65%); animation: drift 14s ease-in-out infinite alternate; }
.hero2-bg .b2 { width: 520px; height: 520px; left: -180px; bottom: -220px; background: radial-gradient(circle, #e1262d 0%, transparent 65%); opacity: .35; animation: drift 18s ease-in-out infinite alternate-reverse; }
.hero2-bg .b3 { width: 360px; height: 360px; left: 38%; top: 30%; background: radial-gradient(circle, #ff8a3d 0%, transparent 70%); opacity: .12; }
.hero2-bg .hgrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); }
.hero2-bg .hline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
@keyframes drift { to { transform: translate(-40px, 40px) scale(1.08); } }
.hero2-in > * { min-width: 0; }
.hero2-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font: 600 .78rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: #c7d0e0; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: pulse 2s infinite; }
.hero2-title { margin: 22px 0 18px; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: .98; letter-spacing: -.005em; color: #f4f6fb; text-transform: none; }
.hero2-title em { font-style: normal; display: inline-block; background: linear-gradient(100deg, #ff6b4a 0%, #e1262d 45%, #ff9a5a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2-text { max-width: 540px; color: #9fabc0; font-size: 1.06rem; line-height: 1.7; margin-bottom: 28px; }
.hero-search { position: relative; display: flex; align-items: center; gap: 6px; max-width: 600px; padding: 7px; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 24px 60px -24px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.04); }
.hero-search .hs-ic { display: grid; place-items: center; width: 44px; color: #8790a3; }
.hero-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: #0b111d; font: 500 1rem var(--font); outline: 0; }
.hero-search input::placeholder { color: #8a93a6; }
.hero-search .btn { height: 48px; padding: 0 26px; border-radius: 13px; box-shadow: none; }
.hero-search .live-results { top: calc(100% + 8px); }
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 30px; font-size: .84rem; }
.hero-tags span { color: #6f7b92; margin-right: 2px; }
.hero-tags a { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #c7d0e0; transition: .2s; }
.hero-tags a:hover { background: rgba(225,38,45,.15); border-color: rgba(225,38,45,.4); color: #fff; }
.hero2-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }
.btn-glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.45); }
.btn-glass .ic { color: #25d366; }
.hero-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.hero-proof li { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.1); }
.hero-proof li:first-child { padding-left: 0; border-left: 0; }
.hero-proof b { display: block; font: 700 1.8rem/1 var(--display); color: #fff; }
.hero-proof span { font-size: .76rem; color: #7f8ba3; }

/* 3D ring stage */
.hero2-stage { position: relative; height: 560px; perspective: 1700px; perspective-origin: 50% 35%; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.hero2-stage.dragging { cursor: grabbing; }
.stage-glow { position: absolute; left: 50%; top: 42%; width: 380px; height: 380px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.35), transparent 65%); filter: blur(30px); }
.ring-wrap { position: absolute; inset: 0; transform-style: preserve-3d; }
.ring { position: absolute; left: 50%; top: 40%; width: 0; height: 0; transform-style: preserve-3d; --r: 300px; --w: 160px; }
.ring-card { position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -.62); width: var(--w); padding: 8px 8px 10px; border-radius: 20px; background: linear-gradient(170deg, rgba(255,255,255,.98), rgba(236,240,247,.96)); box-shadow: 0 30px 50px -24px rgba(0,0,0,.85), inset 0 1px 0 #fff; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); color: #0b111d; transition: box-shadow .3s; will-change: opacity; }
.ring-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #fff; pointer-events: none; }
.ring-card span { display: block; margin-top: 8px; font: 700 .86rem/1.15 var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-card:hover { color: #e1262d; box-shadow: 0 30px 60px -20px rgba(225,38,45,.6), inset 0 1px 0 #fff; }
.stage-floor { position: absolute; left: 50%; bottom: 70px; width: 560px; height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.75), transparent 70%); }
.stage-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(13,20,34,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: .8rem; font-weight: 600; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); animation: float 7s ease-in-out infinite; pointer-events: none; }
.stage-chip .ic { color: #25d366; }
.stage-chip.c1 { top: 6%; left: 2%; }
.stage-chip.c2 { top: 14%; right: 0; animation-delay: -2.4s; } .stage-chip.c2 .ic { color: #58a6ff; }
.stage-chip.c3 { bottom: 12%; right: 8%; animation-delay: -4.6s; } .stage-chip.c3 .ic { color: #ff7a5c; }
.stage-hint { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font: 500 .72rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #59647b; }

/* Category stories */
.cat-stories { background: #060a12; border-bottom: 1px solid rgba(255,255,255,.06); }
.stories-in { display: flex; gap: 18px; overflow-x: auto; padding: 22px 0 20px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.stories-in::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-snap-align: start; text-align: center; }
.story-ring { width: 72px; height: 72px; padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, #e1262d, #ff8a3d, #2f6bff, #e1262d); transition: transform .3s var(--ease); }
.story-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #060a12; }
.story:hover .story-ring { transform: translateY(-3px) scale(1.04); }
.story-t { font-size: .72rem; line-height: 1.2; color: #c7d0e0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Size picker */
.size-picker { margin: 6px 0 18px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); transition: box-shadow .4s; }
.size-picker.flash { box-shadow: 0 0 0 3px rgba(255,90,54,.5); }
.sz-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sz-head h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.sz-head small { font: 400 .78rem var(--font); color: var(--muted); }
.sz-clear { font-size: .82rem; color: var(--red-2); font-weight: 600; }
.sz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 92px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: rgba(255,255,255,.03); text-align: left; transition: .2s var(--ease); }
.sz-chip b { font: 700 1rem/1.1 var(--display); }
.sz-chip small { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.sz-chip:hover:not(:disabled) { border-color: rgba(255,255,255,.35); }
.sz-chip.on { border-color: var(--red-2); background: rgba(225,38,45,.12); box-shadow: 0 8px 24px -12px rgba(225,38,45,.7); }
.sz-chip.on::after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; }
.sz-chip:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.sz-lines { display: grid; gap: 8px; margin-top: 14px; }
.sz-lines:empty { display: none; }
.sz-line { display: grid; grid-template-columns: 1fr auto auto auto 28px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); animation: fadeUp .3s var(--ease); }
.sz-line .muted { font-size: .82rem; }
.sz-lt { min-width: 64px; text-align: right; font-family: var(--display); font-size: 1.05rem; }
.sz-x { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--muted); font-size: .75rem; }
.szq { width: 32px; height: 36px; display: grid; place-items: center; color: var(--muted); font-size: 1.1rem; }
.sz-summary { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.sz-summary b { font: 700 1.5rem var(--display); }
.size-picker .sp-buy { margin: 14px 0 0; }
.price .from { font: 500 .75rem var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.size-table thead th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------- Tablet ---------------- */
@media (max-width: 1180px) {
	.hero2-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
	.ring { --r: 250px; --w: 140px; }
	.hero-proof li { padding: 0 16px; }
}

/* ---------------- Phone: premium app style ---------------- */
@media (max-width: 980px) {
	.hero2 { padding: 26px 0 8px; }
	.hero2-in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
	.hero2-copy { order: 1; }
	.hero2-stage { order: 2; height: 330px; margin: 18px -16px 0; }
	.ring { --r: 150px; --w: 104px; top: 40%; }
	.hero2-stage { overflow: hidden; }
	.ring-card { padding: 6px 6px 8px; border-radius: 16px; }
	.ring-card img { border-radius: 11px; }
	.ring-card span { font-size: .72rem; margin-top: 6px; }
	.stage-floor { width: 320px; bottom: 30px; }
	.stage-chip { font-size: .7rem; padding: 7px 10px; }
	.stage-chip.c1 { top: 2%; left: 4%; } .stage-chip.c2 { top: 2%; right: 4%; } .stage-chip.c3 { display: none; }
	.stage-hint { bottom: 0; }
	.hero2-title { font-size: clamp(2.1rem, 9vw, 3rem); margin: 16px 0 12px; }
	.hero2-text { font-size: .95rem; margin-bottom: 18px; }
	.hero-tags { margin: 12px 0 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
	.hero-tags::-webkit-scrollbar { display: none; }
	.hero-tags a, .hero-tags span { flex-shrink: 0; }
	.hero2-cta { margin-bottom: 22px; }
	.hero2-cta .btn { flex: 1; padding: 15px 14px; font-size: .92rem; }
	.hero-proof { display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
	.hero-proof li { padding: 0 6px; text-align: center; }
	.hero-proof li:first-child { padding-left: 0; }
	.hero-proof b { font-size: 1.3rem; }
	.hero-proof span { font-size: .64rem; line-height: 1.2; display: block; }
}

@media (max-width: 768px) {
	:root { --header-h: 64px; }
	html { -webkit-tap-highlight-color: transparent; }
	body { background: #070b13; }
	.container { width: calc(100% - 32px); }
	.topbar { display: none; }

	/* App header */
	.site-header { background: rgba(7,11,19,.86); border-bottom-color: rgba(255,255,255,.05); }
	.header-in { height: 62px !important; gap: 8px; }
	.menu-toggle { display: none !important; }
	.site-logo img, .site-header.scrolled .site-logo img { height: 46px; }
	.header-actions .search-toggle { display: none !important; }
	.header-actions .icon-btn { width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.05); }
	.m-searchbar { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 0 auto 10px; height: 46px; padding: 0 8px 0 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #7f8ba3; font-size: .9rem; text-align: left; transition: max-height .3s, margin .3s, opacity .3s; max-height: 46px; overflow: hidden; }
	.m-searchbar span { flex: 1; }
	.m-searchbar i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grad-red); color: #fff; font-style: normal; }
	.site-header.scrolled .m-searchbar { max-height: 0; margin-bottom: 0; opacity: 0; border-width: 0; }
	.home .hero2 .hero-search { display: flex; }

	/* Hero search on phone */
	.hero-search { padding: 5px; border-radius: 16px; }
	.hero-search .hs-ic { width: 34px; }
	.hero-search input { height: 44px; font-size: .95rem; }
	.hero-search .btn { height: 44px; padding: 0 16px; border-radius: 12px; }
	.home .m-searchbar { display: none; }

	/* Floating tab bar */
	body.has-mobile-bar { padding-bottom: 92px; }
	.mobile-bar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; padding: 0 6px; border-radius: 22px; background: rgba(16,24,40,.88); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px -12px rgba(0,0,0,.8); }
	.mobile-bar a, .mobile-bar button { font-size: .64rem; font-weight: 600; letter-spacing: .02em; color: #7f8ba3; transition: color .2s; }
	.mobile-bar a .ic, .mobile-bar button .ic { width: 22px; height: 22px; transition: transform .25s var(--ease); }
	.mobile-bar .on { color: #fff; }
	.mobile-bar .on .ic { color: var(--red-2); transform: translateY(-2px); }
	.mobile-bar .on::before { content: ""; position: absolute; top: 6px; width: 34px; height: 30px; border-radius: 12px; background: rgba(225,38,45,.14); z-index: -1; }
	.mobile-bar a, .mobile-bar button { position: relative; isolation: isolate; }
	.mobile-bar a:active .ic, .mobile-bar button:active .ic { transform: scale(.88); }
	.mobile-bar .badge { top: 8px; right: calc(50% - 20px); }
	.float-wa { left: auto; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
	.float-wa span { display: none; }
	.to-top { display: none; }
	.toast { bottom: calc(160px + env(safe-area-inset-bottom)); }

	/* Sections compact */
	.section { padding: 46px 0; }
	.section-sm { padding: 30px 0; }
	.section-head { margin-bottom: 20px; gap: 12px; align-items: center; }
	.section-head h2 { font-size: 1.65rem; }
	.section-head .kicker { font-size: .66rem; margin-bottom: 6px; }
	.section-head .link-arrow { font-size: .85rem; }
	.cat-stories { position: relative; }
	.stories-in { gap: 14px; padding: 16px 0; }
	.story { width: 70px; }
	.story-ring { width: 62px; height: 62px; }

	/* Category grid as compact tiles */
	.photo-cats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.photo-cats .cat-card { padding: 8px 8px 10px; border-radius: 16px; transform: none !important; }
	.photo-cats .cat-photo { border-radius: 12px; margin-bottom: 8px; box-shadow: none; }
	.photo-cats .cat-name { font-size: .78rem; line-height: 1.2; font-family: var(--font); font-weight: 600; }
	.photo-cats .cat-foot { display: none; }
	.photo-cats .cat-more { display: none; }

	/* Product carousels on home */
	.tab-panel ul.products, .related ul.products { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
	.tab-panel ul.products::-webkit-scrollbar, .related ul.products::-webkit-scrollbar { display: none; }
	.tab-panel .pcard, .related .pcard { flex: 0 0 46%; scroll-snap-align: start; }
	.tabs { padding: 4px; border-radius: 14px; }
	.section-dark .section-head { flex-direction: column; align-items: stretch; }

	/* App cards */
	.pcard { border-radius: 18px; background: #0f1726; }
	.pcard:hover { transform: none; }
	.pc-media { border-radius: 14px; margin: 6px 6px 0; }
	.pc-actions { top: 8px; right: 8px; }
	.pc-act { width: 32px; height: 32px; border-radius: 10px; }
	.pc-actions .qv-btn { display: none; }
	.pc-badge { top: 8px; left: 8px; font-size: .62rem; padding: 4px 7px; }
	.pc-cat { font-size: .6rem; margin-bottom: 3px; }
	.pcard .button { border-radius: 12px; min-height: 40px; }
	.pc-sku { display: none; }

	/* Hide heavy desktop-only sections */
	.apps, .about-band .about-visual, .footer-gear, .scroll-cue { display: none !important; }
	.about-in { gap: 0; }
	.steps { grid-template-columns: 1fr 1fr; gap: 10px; }
	.step { padding: 18px 14px; border-radius: 16px; }
	.step p { font-size: .8rem; }
	.pin-band { grid-template-columns: minmax(0, 1fr); padding: 20px; border-radius: 20px; margin-top: 26px; gap: 16px; }
	.pin-band h3 { font-size: 1.2rem; }
	.pin-input { padding-left: 12px; }
	.pin-input input { min-width: 0; font-size: .95rem; letter-spacing: .08em; }
	.pin-input .btn { flex-shrink: 0; }
	.about-ceo { gap: 12px; }
	.about-ceo > div { min-width: 0; }
	.about-ceo .btn { width: 100%; }
	.step-ic { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; }
	.step h4 { font-size: 1rem; }
	.contact-band .map-wrap { height: 200px; }

	/* Footer app-like */
	.footer-cta { margin-bottom: -40px; }
	.fcta-in { padding: 24px 20px; border-radius: 22px; }
	.fcta-in h2 { font-size: 1.35rem; }
	.fcta-actions { width: 100%; } .fcta-actions .btn { flex: 1; padding: 14px 10px; font-size: .9rem; }
	.site-footer { padding-top: 80px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
	.f-brand, .f-contact { grid-column: 1 / -1; }
	.footer-logo img { height: 96px; }
	.f-col h4 { font-size: .95rem; margin-bottom: 12px; }
	.f-col ul a { font-size: .85rem; }
	.footer-bottom { margin-top: 30px; padding-bottom: 6px; }
	.fb-in { flex-direction: column; text-align: center; }

	/* Inner page hero compact */
	.page-hero { padding: 22px 0 22px; }
	.page-hero h1 { font-size: 1.8rem; margin: 6px 0; }
	.page-hero p { font-size: .88rem; }
	.page-hero-gear { display: none; }

	/* Shop */
	.shop-layout { padding: 18px 0 40px; }
	.filter-toggle { width: 100%; justify-content: center; }
	.cat-pills { margin: 0 -16px 14px; padding: 0 16px 6px; }

	/* Product page: app style */
	.shop-single { padding-top: 0; }
	.shop-single > .breadcrumb { display: none; }
	.sp-gallery { margin: 0 -16px; }
	.sp-main-img { border-radius: 0; border: 0; aspect-ratio: 1; }
	.sp-thumbs { display: flex; overflow-x: auto; gap: 8px; padding: 10px 16px 0; scrollbar-width: none; }
	.sp-thumbs button { flex: 0 0 60px; }
	.sp-summary { position: relative; margin: -26px -16px 0; padding: 22px 16px 10px; border-radius: 26px 26px 0 0; background: #070b13; box-shadow: 0 -20px 40px -20px rgba(0,0,0,.8); }
	.sp-summary::before { content: ""; display: block; width: 40px; height: 4px; margin: -8px auto 14px; border-radius: 2px; background: rgba(255,255,255,.15); }
	.product_title { font-size: 1.7rem; }
	.sp-summary > .price { font-size: 1.9rem; }
	.size-picker { padding: 14px; margin: 6px -4px 16px; }
	.sz-chip { min-width: 0; flex: 1 1 calc(33.33% - 8px); padding: 9px 10px; }
	.sz-line { grid-template-columns: 1fr auto 28px; grid-template-areas: "n q x" "p t t"; row-gap: 4px; }
	.sz-line > b:first-child { grid-area: n; } .sz-line .muted { grid-area: p; } .sz-line .qty-wrap { grid-area: q; } .sz-line .sz-lt { grid-area: t; } .sz-line .sz-x { grid-area: x; }
	.sp-tabs { margin-top: 30px; }
	.sp-tabs .tab-panel { padding: 18px; }
	.sticky-buy { left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); border-radius: 18px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px -12px rgba(0,0,0,.9); }

	/* Bottom sheets: cart drawer & modals */
	.drawer-right { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 88vh; height: 88dvh; border-radius: 26px 26px 0 0; border-width: 1px 0 0; transform: translateY(105%); }
	.drawer-right.open { transform: none; }
	.drawer-right .drawer-head::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.18); }
	.drawer-right .drawer-head { position: relative; padding-top: 22px; }
	.drawer-left { width: 86vw; border-radius: 0 24px 24px 0; }
	.modal { align-items: end; padding: 0; }
	.modal-box { width: 100%; max-height: 90vh; border-radius: 26px 26px 0 0; padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); transform: translateY(100%); }
	.qv-box { padding: 0; }

	/* Checkout & cart */
	.co-card { border-radius: 20px; }
	.checkout-grid { gap: 14px; }
	.cart-page .cl { border-radius: 16px; }

	/* Search overlay as app screen */
	.search-overlay { padding: 18px 16px; align-items: stretch; flex-direction: column; justify-content: flex-start; }
	.so-form { border: 0; background: rgba(255,255,255,.06); border-radius: 16px; padding: 4px 14px; }
	.so-form input { font: 500 1.05rem var(--font); height: 50px; }
	.so-close { position: static; align-self: flex-end; margin-bottom: 10px; }
	.search-overlay .live-results { position: static; margin-top: 12px; }
}

@media (max-width: 380px) {
	.hero-proof span { display: none; }
	.photo-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ring { animation: none !important; }
	.preloader2 { display: none !important; }
}

/* Overflow guards */
.sp > *, .checkout-grid > *, .cart-page > *, .shop-layout > * { min-width: 0; }
@media (max-width: 980px) {
	.sp, .cart-page, .checkout-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	.so-form { width: 100%; box-sizing: border-box; }
	.sp-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
	.sp-actions .btn { min-width: 0; padding: 13px 10px; font-size: .86rem; }
	.size-picker .sp-buy { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
	.size-picker .sp-buy .btn { min-width: 0; padding: 14px 10px; font-size: .9rem; }
	.sp-buy:not(.size-picker .sp-buy) { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
	.sp-buy .buy-now { grid-column: 1 / -1; }
}
@media (max-width: 768px) { html, body { overflow-x: clip; } }
@media (max-width: 768px) { .sp-actions .btn-wa { white-space: normal; line-height: 1.15; text-align: left; } }

/* ---------------- v3.1: bigger category stories with 3D icons ---------------- */
.ic.flip { transform: scaleX(-1); }
.cat-stories { padding: 34px 0 30px; background: linear-gradient(180deg, #060a12, #0a101c); }
.stories-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.stories-head h2 { margin: 0; font-size: 1.7rem; background: var(--steel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stories-nav { display: flex; gap: 8px; }
.stories-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: .2s; }
.stories-nav button:hover { background: var(--grad-red); border-color: transparent; }
.stories-in { gap: 26px; padding: 18px 4px 14px; scroll-behavior: smooth; mask-image: linear-gradient(90deg, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); }
.story { width: 132px; gap: 12px; }
.story-ring { width: 128px; height: 128px; padding: 3px; background: conic-gradient(from 210deg, #e1262d, #ff8a3d, #ffd36b, #2f6bff, #e1262d); box-shadow: 0 18px 34px -18px rgba(225,38,45,.55); transition: transform .35s var(--ease), box-shadow .35s; }
.story-plate { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #0a101c; background: radial-gradient(circle at 35% 28%, #ffffff 0%, #eef1f6 45%, #cfd6e2 100%); overflow: hidden; box-shadow: inset 0 -8px 18px rgba(20,30,50,.18), inset 0 6px 10px rgba(255,255,255,.9); }
.story-plate img { width: 88%; height: 88%; object-fit: contain; border: 0; border-radius: 0; background: none; transition: transform .45s var(--ease); }
.story:not(.has-icon) .story-plate img { width: 100%; height: 100%; object-fit: cover; }
.story:hover .story-ring { transform: translateY(-6px); box-shadow: 0 26px 40px -18px rgba(225,38,45,.8); }
.story:hover .story-plate img { transform: scale(1.1) rotate(-4deg); }
.story-t { font-size: .9rem; font-weight: 600; color: #dfe5ef; -webkit-line-clamp: 2; }

/* Icon tiles in menus & sidebar */
.mega-ic, .mc-ic, .sc-ic { display: grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 35% 28%, #fff, #e3e8f0 70%, #cbd3df); }
.mega-ic { width: 52px; height: 52px; border-radius: 14px; }
.mega-ic img, .mc-ic img, .sc-ic img { width: 86% !important; height: 86% !important; object-fit: contain !important; background: none !important; border-radius: 0 !important; }
.mc-ic { width: 44px; height: 44px; }
.sc-ic { width: 36px; height: 36px; border-radius: 10px; }

/* WhatsApp floating button: perfect circle */
.float-wa { width: 62px; height: 62px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
.float-wa::before { border-radius: 50%; }
.float-wa span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-6px); max-width: none; padding: 8px 12px; border-radius: 10px; background: #fff; color: #0b111d; font-size: .82rem; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: .25s var(--ease); }
.float-wa:hover span { max-width: none; opacity: 1; transform: translateY(-50%); }

@media (max-width: 768px) {
	.cat-stories { padding: 22px 0 16px; }
	.stories-head h2 { font-size: 1.3rem; }
	.stories-nav { display: none; }
	.stories-in { gap: 14px; padding: 12px 0 8px; }
	.story { width: 92px; gap: 8px; }
	.story-ring { width: 88px; height: 88px; }
	.story-plate { border-width: 3px; }
	.story-t { font-size: .74rem; }
	.float-wa { width: 54px; height: 54px; border-radius: 50%; }
	.float-wa span { display: none; }
}

/* v3.1.1 — sidebar / menu icon tiles: keep square, never stretch */
.side-cats a .sc-ic { flex: 0 0 40px !important; width: 40px; height: 40px; min-width: 40px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.25); }
.side-cats a .sc-ic img { width: 88% !important; height: 88% !important; object-fit: contain !important; }
.side-cats a > span:not(.sc-ic) { flex: 1 1 auto; min-width: 0; }
.side-cats a { gap: 12px; padding: 8px 10px; }
.mega-ic, .mc-ic { flex: 0 0 auto !important; aspect-ratio: 1 / 1; }

/* v3.2 — Enquiry mode (WhatsApp price only) + size under name */
.pc-size { display: flex; align-items: baseline; gap: 6px; font-size: .8rem; line-height: 1.35; color: var(--text-2, #c9d1dd); margin: 2px 0 4px; min-width: 0; }
.pc-size em { font-style: normal; flex-shrink: 0; font: 600 .66rem/1.6 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--red-2); background: rgba(225,38,45,.1); border: 1px solid rgba(225,38,45,.25); padding: 0 6px; border-radius: 6px; }
.pcard .pc-size { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard .pc-size em { margin-right: 6px; }
.pcard .button.btn-wa-card { background: var(--wa); border-color: var(--wa); color: #06210f; font-weight: 700; justify-content: center; gap: 6px; box-shadow: 0 10px 24px -14px rgba(37,211,102,.8); }
.pcard .button.btn-wa-card:hover { background: #2fe374; color: #06210f; }
.pcard .button.btn-wa-card svg { flex-shrink: 0; }

.enq-sizes { margin: 14px 0 6px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); transition: box-shadow .4s; }
.enq-sizes.flash { box-shadow: 0 0 0 3px rgba(37,211,102,.5); }
.enq-sizes .sz-chip.on { border-color: var(--wa); background: rgba(37,211,102,.12); box-shadow: 0 8px 24px -12px rgba(37,211,102,.7); }
.enq-sizes .sz-chip.on::after { background: var(--wa); color: #06210f; }
.sp-size-one { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }
.sp-size-one span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sp-size-one b { font: 700 1.05rem var(--display); }
.sp-summary > .price { margin-top: 10px; }
.sp-wa-main { display: flex; width: 100%; justify-content: center; gap: 10px; margin: 16px 0 12px; font-size: 1.05rem; padding: 16px 20px; border-radius: 16px; }
.wa-only .sp-actions { margin-top: 0; }
.qv-size { margin: 4px 0 8px; }
.sticky-wa .btn-wa { white-space: nowrap; }
@media (max-width: 768px) {
	.wa-only .pcard .pc-size { font-size: .74rem; }
	.wa-only .pcard .button.btn-wa-card { font-size: .74rem; padding: 9px 6px; letter-spacing: 0; white-space: normal; line-height: 1.15; }
	.enq-sizes { padding: 14px; margin: 12px -4px 4px; }
	.enq-sizes .sz-chip { min-width: 0; flex: 1 1 calc(33.33% - 8px); padding: 9px 10px; }
}
.pcard .button.btn-wa-card { white-space: nowrap; font-size: .8rem; padding-left: 8px; padding-right: 8px; letter-spacing: 0; }
.sticky-buy:not(.show) { visibility: hidden; opacity: 0; transition: transform .35s, opacity .25s, visibility 0s .35s; }
.sticky-buy.show { visibility: visible; opacity: 1; transition: transform .35s, opacity .25s; }
@media (max-width: 768px) {
	.wa-only .float-wa { display: none; }
	.wa-only .pcard .button.btn-wa-card { font-size: .86rem; white-space: nowrap; padding: 10px 6px; }
	.pcard .btn-wa-card .wa-on { display: none; }
	.wa-only .mobile-bar .mb-wa svg { color: var(--wa); }
}
/* v3.2.1 — price sits between size chips and buy buttons */
.size-picker .sz-price { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.size-picker .sz-price .price { margin: 0; }
.size-picker .sz-price .gst-note { margin: 6px 0 0; }
.size-picker .sz-lines:empty { display: none; }

/* ================= v3.3 — 3D "logo building" preloader ================= */
.pl3 { gap: 26px; }
.pl3-scene { position: relative; width: min(260px, 64vw); aspect-ratio: 450 / 337; perspective: 900px; }
.pl3-floor { position: absolute; left: 6%; right: 6%; bottom: -16%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,90,54,.35), rgba(225,38,45,.08) 60%, transparent); filter: blur(6px); opacity: 0; transform: scaleX(.4); }
.pl3-logo { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(22deg) rotateY(-32deg) translateZ(-40px); }
.pl3-part, .pl3-print { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl3-part { display: block; opacity: 0; will-change: transform, opacity;
	/* metal thickness: stacked offsets read as an extruded 3D edge */
	filter: drop-shadow(1px 1px 0 #9aa3b2) drop-shadow(1px 1px 0 #6d7686) drop-shadow(1px 1px 0 #4a5260) drop-shadow(1px 2px 0 #2f3540) drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.pl3-print { clip-path: inset(100% 0 0 0); }
.pl3-print .pl3-part { opacity: 1; }
.pl3-laser { position: absolute; left: 4%; right: 4%; height: 3px; bottom: 0; border-radius: 3px; opacity: 0; background: linear-gradient(90deg, transparent, #ff5a36 18%, #fff 50%, #ff5a36 82%, transparent); box-shadow: 0 0 14px 3px rgba(255,90,54,.85), 0 0 40px 8px rgba(225,38,45,.45); }
.pl3-gear { transform-origin: 15.4% 56%; transform: translate3d(-70%, 10%, -220px) rotateY(70deg) rotate(-260deg) scale(.7); }
.pl3-t { transform-origin: 78% 55%; transform: translate3d(0, -90%, 160px) rotateX(-110deg); }
.pl3-arc { transform-origin: 70% 70%; transform: translate3d(60%, 20%, 120px) rotateY(-120deg); }
.pl3-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 48%, rgba(255,200,180,.6) 52%, transparent 65%) -150% 0 / 250% 100% no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mix-blend-mode: screen; }
.pl3 .pl-name, .pl3 .pl-line { opacity: 0; transform: translateY(10px); }

.pl3.go .pl3-logo { animation: pl3Turn 2.1s cubic-bezier(.45,.05,.2,1) .1s forwards; }
.pl3.go .pl3-gear { animation: pl3Gear 1.05s cubic-bezier(.16,.9,.3,1) forwards; }
.pl3.go .pl3-print { animation: pl3Print 1.05s cubic-bezier(.55,.1,.35,1) .2s forwards; }
.pl3.go .pl3-laser { animation: pl3Laser 1.05s cubic-bezier(.55,.1,.35,1) .2s forwards; }
.pl3.go .pl3-t { animation: pl3Drop .7s cubic-bezier(.2,.9,.25,1.15) .95s forwards; }
.pl3.go .pl3-arc { animation: pl3Swing .75s cubic-bezier(.2,.9,.25,1.1) 1.1s forwards; }
.pl3.go .pl3-shine { animation: pl3Shine .9s ease-in-out 1.85s forwards; }
.pl3.go .pl3-floor { animation: pl3Floor 1.6s ease-out .3s forwards; }
.pl3.go .pl-name { animation: pl3Up .6s ease-out 1.7s forwards, plShine 1.6s linear 1.7s infinite; }
.pl3.go .pl-line { animation: pl3Up .6s ease-out 1.8s forwards; }

@keyframes pl3Turn { 0% { transform: rotateX(22deg) rotateY(-32deg) translateZ(-40px); } 70% { transform: rotateX(4deg) rotateY(6deg) translateZ(0); } 100% { transform: rotateX(0) rotateY(0) translateZ(0); } }
@keyframes pl3Gear { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pl3Print { to { clip-path: inset(0 0 0 0); } }
@keyframes pl3Laser { 0% { bottom: 0; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }
@keyframes pl3Drop { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pl3Swing { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pl3Shine { 0% { opacity: 1; background-position: -150% 0; } 100% { opacity: 1; background-position: 250% 0; } }
@keyframes pl3Floor { to { opacity: 1; transform: scaleX(1); } }
@keyframes pl3Up { to { opacity: 1; transform: none; } }

/* Footer credit */
.fb-in .credit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.credit a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }
.credit .heart { color: #ff3b47; display: inline-block; animation: beat 1.3s ease-in-out infinite; }
.credit img { height: 22px; width: auto; display: block; transition: transform .25s, filter .25s; }
.credit a:hover img { transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(.95); } 45% { transform: scale(1.15); } }

/* ================= v3.4 — Brand tool-doodle backgrounds (from the company profile) ================= */
:root { --doodle: url(../img/tools-pattern.webp); }

/* Stronger pattern zones */
.doodle-zone { position: relative; isolation: isolate; overflow: hidden; }
.doodle-zone::before, .doodle-layer { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--doodle) 0 0 / 640px repeat; opacity: .07; }
.doodle-zone::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 50% 0%, rgba(29,79,216,.14), transparent 70%), radial-gradient(700px 400px at 100% 100%, rgba(225,38,45,.1), transparent 70%); }
.hero2-bg .doodle-layer { z-index: 0; opacity: .06; animation: doodleDrift 120s linear infinite; }
.page-hero .doodle-layer { z-index: 0; opacity: .08; animation: doodleDrift 140s linear infinite; }
.page-hero > .container { z-index: 2; }
@keyframes doodleDrift { to { background-position: 640px -640px; } }

/* Floating tools */
.float-tools { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero2-bg .float-tools, .page-hero .float-tools { z-index: 1; }
.ft { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; opacity: var(--o); transform: translate(-50%, -50%) rotate(var(--r)); translate: calc(var(--mx, 0) * var(--z) * 1px) calc(var(--my, 0) * var(--z) * 1px); transition: translate .6s cubic-bezier(.2,.8,.2,1); animation: ftFloat var(--d) ease-in-out var(--dl) infinite alternate; filter: drop-shadow(0 0 14px rgba(120,160,255,.25)); will-change: transform; }
@keyframes ftFloat {
	0% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(var(--r)); }
	50% { transform: translate(-50%, -50%) translate3d(16px, -26px, 0) rotate(calc(var(--r) + 9deg)); }
	100% { transform: translate(-50%, -50%) translate3d(-12px, 14px, 0) rotate(calc(var(--r) - 7deg)); }
}
@media (max-width: 768px) {
	.ft { width: calc(var(--s) * .7); }
	.float-tools .ft:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ft, .doodle-layer { animation: none !important; } }

/* Hero pills: Speed · Precision · Power */
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-pills .hpill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font: 700 .78rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.hero-pills .hpill svg { color: #ff6b4a; }
.hero-pills .hpill:nth-child(2) svg { color: #5b8cff; }
.hero-pills .hpill:nth-child(3) svg { color: #ffb44a; }

/* Wide range of industrial toolings */
.wide-range { padding-top: 90px; }
.section-sub { color: var(--muted); margin: 10px 0 0; max-width: 620px; }
.range-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.range-card { position: relative; overflow: hidden; padding: 26px 22px 22px; border-radius: 22px; background: linear-gradient(160deg, rgba(23,32,52,.85), rgba(10,15,26,.92)); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); transition: transform .4s, border-color .4s, box-shadow .4s; }
.range-card:hover { transform: translateY(-6px); border-color: rgba(255,90,54,.35); box-shadow: 0 30px 60px -30px rgba(225,38,45,.45); }
.rc-art { position: absolute; right: -18px; top: -14px; width: 130px; height: auto; opacity: .22; transform: rotate(-12deg); transition: transform .6s, opacity .6s; pointer-events: none; }
.range-card:hover .rc-art { transform: rotate(4deg) scale(1.08); opacity: .4; }
.rc-n { font: 700 .8rem var(--mono); color: #ff6b4a; letter-spacing: .1em; }
.range-card h3 { margin: 6px 0 6px; font: 700 1.3rem/1.15 var(--display); text-transform: uppercase; max-width: 85%; }
.range-card p { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.rc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-list a { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: .78rem; color: #d7deea; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: background .2s, color .2s, border-color .2s; }
.rc-list a:hover { background: rgba(225,38,45,.18); border-color: rgba(255,90,54,.5); color: #fff; }
@media (max-width: 1100px) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .range-grid { grid-template-columns: minmax(0, 1fr); } .wide-range { padding-top: 56px; } }

/* About page */
.about-copy .lead { font-size: 1.12rem; color: #e6ebf4; }
.pf-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pf-card { padding: 22px 18px; border-radius: 20px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); transition: transform .4s, border-color .4s; }
.pf-card:hover { transform: translateY(-6px); border-color: rgba(91,140,255,.4); }
.pf-art { display: grid; place-items: center; height: 110px; margin-bottom: 14px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(91,140,255,.16), transparent 70%); }
.pf-art img { max-width: 96px; max-height: 90px; width: auto; height: auto; opacity: .9; animation: ftBob 6s ease-in-out infinite; }
.pf-card:nth-child(2n) .pf-art img { animation-delay: -3s; }
@keyframes ftBob { 50% { transform: translateY(-8px) rotate(4deg); } }
.pf-card h3 { font: 700 1.05rem/1.2 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.pf-card p { color: var(--muted); font-size: .88rem; margin: 0; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.why-card { padding: 26px 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(23,32,52,.8), rgba(10,15,26,.9)); border: 1px solid rgba(255,255,255,.08); }
.why-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px; color: #fff; background: var(--grad-red); box-shadow: 0 14px 30px -12px rgba(225,38,45,.7); }
.why-card h3 { font: 700 1.1rem var(--display); text-transform: uppercase; margin: 0 0 8px; }
.why-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.vision-card { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 64px 40px; border-radius: 28px; background: radial-gradient(700px 300px at 50% 0%, rgba(225,38,45,.22), transparent 70%), linear-gradient(160deg, #111a2c, #0a0f1a); border: 1px solid rgba(255,255,255,.08); }
.vision-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--doodle) 0 0 / 560px repeat; opacity: .07; }
.vision-card .kicker { justify-content: center; }
.vision-card .kicker::before { display: none; }
.vision-card blockquote { margin: 14px auto 28px; max-width: 860px; font: 600 clamp(1.3rem, 2.6vw, 2rem)/1.35 var(--display); color: #f4f6fb; }
.vision-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-grid { grid-template-columns: minmax(0, 1fr); } .vision-card { padding: 40px 20px; } .pf-card { padding: 16px 14px; } }
/* range grid: balanced masonry-style layout */
.range-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "a b" "c b" "d d"; align-items: stretch; }
.range-card:nth-child(1) { grid-area: a; } .range-card:nth-child(2) { grid-area: b; } .range-card:nth-child(3) { grid-area: c; } .range-card:nth-child(4) { grid-area: d; }
.range-card:nth-child(2) .rc-list a { font-size: .86rem; padding: 7px 13px; }
.range-card:nth-child(4) h3 { max-width: none; }
.range-card:nth-child(2) .rc-art { width: 170px; }
.range-card:nth-child(4) .rc-art { width: 180px; top: -30px; right: 10px; }
.hero2-bg .doodle-layer { opacity: .045; }
@media (max-width: 760px) { .range-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; } }

/* ================= v3.5 — Preloader: small logo grows big, gear rolls in ================= */
.pl4 { gap: 22px; background: radial-gradient(700px 460px at 50% 44%, #13204a 0%, #0a1024 45%, #060912 80%); }
.pl4-stage { position: relative; width: min(280px, 66vw); aspect-ratio: 450 / 337; display: grid; place-items: center; }
.pl4-logo { position: absolute; inset: 0; transform: scale(.12); opacity: 0; filter: blur(6px); will-change: transform, opacity, filter; }
.pl4-rest, .pl4-rest img, .pl4-gear, .pl4-shine { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl4-rest img, .pl4-gear { filter: drop-shadow(1px 1px 0 #8f99aa) drop-shadow(1px 1px 0 #5d6676) drop-shadow(1px 2px 0 #343b48) drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
/* gear rolls in from the left: travel + rotation like a wheel */
.pl4-gear { transform-origin: 15.4% 56%; transform: translateX(-210%) rotate(-620deg); opacity: 0; }
.pl4-shine { opacity: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 48%, rgba(160,190,255,.6) 53%, transparent 66%) -150% 0 / 250% 100% no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.pl4-halo { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(29,79,216,.45) 0%, rgba(225,38,45,.18) 45%, transparent 70%); filter: blur(10px); opacity: 0; transform: scale(.3); }
.pl4-wave { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(#0000, #0000) padding-box, linear-gradient(120deg, #1d4fd8, #e1262d) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); opacity: 0; transform: scale(.2); }
.pl4 .pl-name, .pl4 .pl4-bar { opacity: 0; transform: translateY(10px); }
.pl4-bar { width: 150px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.pl4-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #1d4fd8, #e1262d); }

.pl4.go .pl4-logo { animation: pl4Grow 1.25s cubic-bezier(.16,.9,.24,1.08) forwards; }
.pl4.go .pl4-gear { animation: pl4Roll 1.15s cubic-bezier(.22,.8,.3,1) .25s forwards, pl4Settle .5s ease-out 1.4s; }
.pl4.go .pl4-halo { animation: pl4Halo 1.4s ease-out .2s forwards; }
.pl4.go .pl4-wave.w1 { animation: pl4Wave 1.6s ease-out .9s; }
.pl4.go .pl4-wave.w2 { animation: pl4Wave 1.6s ease-out 1.15s; }
.pl4.go .pl4-wave.w3 { animation: pl4Wave 1.6s ease-out 1.4s; }
.pl4.go .pl4-shine { animation: pl4Shine .85s ease-in-out 1.45s forwards; }
.pl4.go .pl-name { animation: pl3Up .55s ease-out 1.3s forwards, plShine 1.6s linear 1.3s infinite; }
.pl4.go .pl4-bar { animation: pl3Up .5s ease-out 1.35s forwards; }
.pl4.go .pl4-bar i { animation: pl4Bar 1.1s cubic-bezier(.4,0,.2,1) 1.4s forwards; }

@keyframes pl4Grow { 0% { transform: scale(.12) rotate(-8deg); opacity: 0; filter: blur(6px); } 25% { opacity: 1; filter: blur(0); } 100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); } }
@keyframes pl4Roll { 0% { transform: translateX(-210%) rotate(-620deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes pl4Settle { 0% { transform: rotate(0); } 40% { transform: rotate(14deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes pl4Halo { to { opacity: 1; transform: scale(1); } }
@keyframes pl4Wave { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes pl4Shine { 0% { opacity: 1; background-position: -150% 0; } 100% { opacity: 1; background-position: 250% 0; } }
@keyframes pl4Bar { to { width: 100%; } }

/* v3.5 — CTA band buttons stack on phones */
@media (max-width: 600px) {
	.fcta-in { flex-direction: column; align-items: stretch; text-align: left; }
	.fcta-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; }
	.fcta-actions .btn { width: 100%; justify-content: center; white-space: nowrap; padding: 15px 16px; font-size: 1rem; }
}
/* v3.5 — never let long emails / phone lists push cards off-screen */
.contact-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .contact-in, .about-in, .enquiry-layout { grid-template-columns: minmax(0, 1fr); } }
.contact-card, .contact-form-card { min-width: 0; }
.contact-list, .contact-list b, .contact-list a, .f-contact, .f-contact a { overflow-wrap: anywhere; word-break: normal; }

/* v3.6 — refined pattern: finer, faded with a mask, never a flat wallpaper */
.doodle-zone::before, .doodle-layer { background-size: 460px; opacity: .085;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 40%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 90% at 85% 40%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%); }
.wide-range::before { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 75%); }
.hero2-bg .doodle-layer { opacity: .07; }
.page-hero .doodle-layer { opacity: .1; animation: none; }
.page-hero { background: radial-gradient(700px 360px at 85% 10%, rgba(29,79,216,.22), transparent 65%), radial-gradient(520px 300px at 0% 100%, rgba(225,38,45,.12), transparent 70%), linear-gradient(180deg, #0a1120, #070b13); }
.ft { filter: none; }
.vision-card::before { background-size: 420px; opacity: .06; -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); }
/* v3.6 — doodle page headers: clean, pattern only on the right */
.page-hero.has-doodles .doodle-layer { -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 75%); mask-image: linear-gradient(90deg, transparent 35%, #000 75%); opacity: .11; }
.page-hero.has-doodles .float-tools { -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 70%); mask-image: linear-gradient(90deg, transparent 45%, #000 70%); }
@media (max-width: 768px) { .page-hero.has-doodles .float-tools { display: none; } .page-hero.has-doodles .doodle-layer { opacity: .07; } }

/* v3.7 — solid heading colours (gradient-clipped text breaks under some phones' forced dark mode) */
.section-head h2, .page-hero h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f1f4f9; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .section-head h2, html[data-theme="light"] .page-hero h1 { color: #0f172a; }
.hero2-title em { background: linear-gradient(100deg, #5b8cff 0%, #8b5cf6 30%, #ff3b47 65%, #ff7a45 100%); -webkit-background-clip: text; background-clip: text; color: #ff3b47; -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero2-title em { color: #ff3b47; -webkit-text-fill-color: currentColor; background: none; } }

/* v3.8 — pagination fix + infinite scroll */
.pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: auto; height: auto; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.pagination ul.page-numbers li { list-style: none; }
.infinite { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 34px 0 6px; min-height: 40px; }
.infinite .inf-end { display: none; margin: 0; color: var(--muted); font-size: .9rem; }
.infinite.done .inf-end { display: block; }
.infinite.js + .seo-pagination { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inf-loader { display: none; gap: 7px; }
.infinite.loading .inf-loader { display: flex; }
.infinite.loading .inf-more { display: none; }
.inf-loader span { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-red); animation: infDot 1s ease-in-out infinite; }
.inf-loader span:nth-child(2) { animation-delay: .15s; } .inf-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes infDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-7px); opacity: 1; } }
.products > li.inf-new { opacity: 0; transform: translateY(18px); }
.products > li { transition: opacity .5s ease, transform .5s ease; }
.inf-more { min-width: 220px; justify-content: center; }
/* thin, on-brand scrollbars for scrollable panels */
.shop-sidebar, .drawer-body, .mega, .live-results { scrollbar-width: thin; scrollbar-color: rgba(127,140,165,.35) transparent; }
.shop-sidebar::-webkit-scrollbar, .drawer-body::-webkit-scrollbar { width: 6px; }
.shop-sidebar::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb { background: rgba(127,140,165,.35); border-radius: 6px; }
.shop-sidebar::-webkit-scrollbar-track { background: transparent; }

/* v3.8 — responsive hardening */
.btn { max-width: 100%; }
.search-form input { min-width: 0; flex: 1 1 auto; }
.search-form button { flex: 0 0 auto; }
/* product action row: WhatsApp gets its own full row whenever space is tight */
@media (max-width: 1180px) and (min-width: 769px) {
	.sp-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
	.sp-actions .btn-wa { grid-column: 1 / -1; }
	.sp-actions .btn { min-width: 0; }
}
@media (max-width: 768px) {
	.sp-actions { grid-template-columns: minmax(0, 1fr) auto; }
	.sp-actions .btn-wa { grid-column: 1 / -1; white-space: nowrap; text-align: center; justify-content: center; }
}
@media (max-width: 400px) {
	.hero2-cta { display: grid; grid-template-columns: minmax(0, 1fr); }
	.hero2-cta .btn { width: 100%; justify-content: center; }
	.sp-buy:not(.size-picker .sp-buy) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sp-buy:not(.size-picker .sp-buy) .qty-wrap { grid-column: 1 / -1; justify-self: start; }
	.sp-buy .btn, .size-picker .sp-buy .btn { padding-left: 8px; padding-right: 8px; font-size: .85rem; }
	.size-picker .sp-buy { grid-template-columns: minmax(0, 1fr); }
	.btn-lg { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; line-height: 1.2; } }
/* v3.8 — tablet / small-laptop header: keep every nav item on one line */
.main-nav .menu > li > a, .cat-menu-btn, .nav-cta { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 769px) {
	.main-nav .menu > li > a { padding: 0 10px; font-size: .88rem; }
	.cat-menu-btn { padding: 0 12px; gap: 8px; font-size: .86rem; }
	.nav-cta { padding: 0 12px; }
}
@media (max-width: 1100px) and (min-width: 769px) {
	.nav-cta .nav-cta-t { display: none; }
	.nav-cta { width: 42px; padding: 0; justify-content: center; }
	.header-call, .hcall { display: none; }
}
/* tablet product grid: 3 per row instead of 2 huge cards */
@media (min-width: 640px) and (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* small phones: qty + Add to cart share a row, Buy now full width */
@media (max-width: 400px) {
	.sp-buy:not(.size-picker .sp-buy) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
	.sp-buy:not(.size-picker .sp-buy) .qty-wrap { grid-column: auto; }
	.sp-buy:not(.size-picker .sp-buy) .buy-now { grid-column: 1 / -1; }
	.pincode-form input { letter-spacing: .04em; min-width: 0; }
}
@media (max-width: 1100px) and (min-width: 769px) { .nav-cta { height: 40px; width: 40px; border-radius: 12px; display: inline-flex; align-items: center; } }
.topbar-marquee { min-width: 0; overflow: hidden; }
.topbar-marquee span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1240px) { .topbar-left .hide-sm { display: none; } }

/* ================= v4.1 — wordmark logo (dark & light versions) ================= */
.site-logo.has-wordmark img { height: 62px; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.site-header.scrolled .site-logo.has-wordmark img { height: 52px; }
.site-logo.has-wordmark.small img { height: 46px; }
.footer-logo.has-wordmark img { height: 78px; }
.site-logo .logo-lt { display: none; }
html[data-theme="light"] .site-logo .logo-dk { display: none; }
html[data-theme="light"] .site-logo .logo-lt { display: block; filter: none; }
html[data-theme="light"] .site-footer .site-logo .logo-dk { display: block; }
@media (max-width: 1100px) { .site-logo.has-wordmark img, .site-header.scrolled .site-logo.has-wordmark img { height: 52px; } }
@media (max-width: 768px) { .site-logo.has-wordmark img, .site-header.scrolled .site-logo.has-wordmark img { height: 42px; } .footer-logo.has-wordmark img { height: 62px; } }
@media (max-width: 360px) { .site-logo.has-wordmark img, .site-header.scrolled .site-logo.has-wordmark img { height: 36px; } }

/* ================= v4.1 — Preloader: brand film (tools backdrop, logo reveal, light sweep) ================= */
.pl5 { background: #050506; gap: 0; overflow: hidden; }
.pl5-bg { position: absolute; inset: -4%; background: var(--bgl) center / cover no-repeat; opacity: 0; transform: scale(1.08); filter: brightness(.55) saturate(.9); }
@media (max-aspect-ratio: 1/1) { .pl5-bg { background-image: var(--bgp); } }
.pl5-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 48% at 50% 50%, rgba(5,5,6,.92) 0%, rgba(5,5,6,.55) 55%, rgba(5,5,6,.15) 100%); }
.pl5-logo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 26px); }
.pl5-emb, .pl5-wm { position: relative; line-height: 0; }
.pl5-emb img { width: min(250px, 54vw); height: auto; }
.pl5-wm img { width: min(310px, 70vw); height: auto; }
.pl5-emb img, .pl5-wm img { opacity: 0; filter: brightness(.15) blur(2px); }
.pl5-emb img { transform: scale(.94); }
.pl5-wm img { transform: translateY(10px); }
.pl5-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.0) 38%, rgba(255,255,255,.95) 48%, rgba(190,215,255,.75) 52%, rgba(255,255,255,0) 62%, transparent 70%) -160% 0 / 260% 100% no-repeat; }

.pl5.go .pl5-bg { animation: pl5Bg 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.pl5.go .pl5-emb img { animation: pl5Rise 1.3s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.pl5.go .pl5-wm img { animation: pl5Up 1.1s cubic-bezier(.2,.7,.2,1) .8s forwards; }
.pl5.go .pl5-emb .pl5-shine { animation: pl5Sweep 1s ease-in-out 1.45s forwards; }
.pl5.go .pl5-wm .pl5-shine { animation: pl5Sweep 1s ease-in-out 1.85s forwards; }
@keyframes pl5Bg { to { opacity: 1; transform: scale(1); } }
@keyframes pl5Rise { 0% { opacity: 0; filter: brightness(.15) blur(2px); transform: scale(.94); } 55% { opacity: 1; filter: brightness(.7) blur(0); } 100% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); } }
@keyframes pl5Up { 0% { opacity: 0; filter: brightness(.15) blur(2px); transform: translateY(10px); } 100% { opacity: 1; filter: brightness(1) blur(0); transform: none; } }
@keyframes pl5Sweep { 0% { opacity: 1; background-position: -160% 0; } 100% { opacity: 1; background-position: 260% 0; } }
.pl5.done { opacity: 0; visibility: hidden; clip-path: none; transition: opacity .7s ease, visibility .7s; }
@media (min-width: 1101px) { .site-logo.has-wordmark img { height: 76px; } .site-header.scrolled .site-logo.has-wordmark img { height: 60px; } }
.pl5-emb img { width: clamp(190px, 23vw, 340px); }
.pl5-wm img { width: clamp(240px, 29vw, 430px); }
@media (max-aspect-ratio: 1/1) { .pl5-emb img { width: min(250px, 58vw); } .pl5-wm img { width: min(310px, 74vw); } }
.pl5-bg { filter: brightness(.72) saturate(.95); }
.pl5-shine { background: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,255,255,.55) 46%, #fff 50%, rgba(200,222,255,.6) 54%, transparent 60%, transparent 100%) 100% 0 / 300% 100% no-repeat; }
@keyframes pl5Sweep { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0% 0; } }
.pl5.go .pl5-emb .pl5-shine { animation: pl5Sweep 1.15s cubic-bezier(.45,0,.3,1) 1.35s forwards; }
.pl5.go .pl5-wm .pl5-shine { animation: pl5Sweep 1.05s cubic-bezier(.45,0,.3,1) 1.75s forwards; }

/* v4.2 — preloader plays the brand film; CSS reveal is the fallback */
.pl5-film { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #050506 var(--side) center / cover no-repeat; opacity: 0; transition: opacity .35s ease; }
.pl5-film::before { content: ""; position: absolute; inset: 0; background: rgba(5,5,6,.55); }
.pl5-vid { position: relative; height: 100%; width: auto; max-width: none; aspect-ratio: 9 / 16; object-fit: cover;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
@media (max-aspect-ratio: 3/4) { .pl5-vid { width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; } }
.pl5.has-vid .pl5-film { opacity: 1; }
.pl5.has-vid .pl5-logo, .pl5.has-vid .pl5-bg, .pl5.has-vid .pl5-vig { visibility: hidden; }
.pl5.no-vid .pl5-film { display: none; }
.pl5:not(.has-vid):not(.go) .pl5-logo img { opacity: 0; }
.pl5-film { display: flex; align-items: center; justify-content: center; }
.pl5-vid { height: 100vh; height: 100dvh; width: auto; max-height: 100%; }
@media (max-aspect-ratio: 3/4) { .pl5-vid { width: 100vw; height: 100dvh; height: 100vh; object-fit: contain; } .pl5-film { background: #050506; } .pl5-film::before { display: none; } }
.pl5-film::before { background: radial-gradient(ellipse 40% 70% at 50% 50%, rgba(5,5,6,.2), rgba(5,5,6,.72) 100%); }
/* v4.4 — widescreen preloader film on desktop */
.pl5.vid-wide .pl5-film { background: #050506; }
.pl5.vid-wide .pl5-film::before { display: none; }
.pl5.vid-wide .pl5-vid { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; max-height: none; object-fit: cover; -webkit-mask-image: none; mask-image: none; }

/* v4.5 — live search results: always full width under the field, never off-screen */
.so-form { flex-wrap: wrap; }
.so-form > svg { flex-shrink: 0; }
.so-form .live-search-input { min-width: 0; }
.so-form .live-results { position: static; flex: 0 0 100%; width: 100%; order: 5; margin: 12px 0 4px; }
.live-results { max-height: min(62vh, 480px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.live-results a { min-width: 0; }
.live-results a > span, .live-results a > div { min-width: 0; }
.live-results b, .live-results small { overflow-wrap: anywhere; }
.search-overlay .live-results { max-height: calc(100dvh - 170px); }
@media (max-width: 480px) {
	.live-results a { gap: 10px; padding: 10px 12px; }
	.live-results img { width: 40px; height: 40px; flex-shrink: 0; }
	.live-results b { font-size: .88rem; }
	.live-results .lr-price { white-space: normal; text-align: right; max-width: 36%; font-size: .78rem; line-height: 1.2; }
	.hero-search .live-results { left: 0; right: 0; }
}
/* size picker buttons: stack when the summary column is narrow */
.size-picker .sp-buy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.size-picker .sp-buy .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding-left: 12px; padding-right: 12px; }
@media (max-width: 1240px) and (min-width: 769px) { .size-picker .sp-buy { grid-template-columns: minmax(0, 1fr); } }
.m-searchbar > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }

/* ================= v4.6 — Preloader 6: vector logo, running gears, tool ring ================= */
.pl6 { background: #040506; overflow: hidden; gap: 0; display: block; }
.pl6.done { opacity: 0; visibility: hidden; clip-path: none; transition: opacity .7s ease, visibility .7s, transform .7s; transform: scale(1.04); }
.pl6-stage { position: absolute; inset: 0; transform: scale(1.14) rotate(-4deg); opacity: 0; }
.pl6-tools { position: absolute; inset: 0; --R0: max(27vh, 25vw); --R1: max(37vh, 34vw); --R2: max(48vh, 44vw); --u: clamp(54px, 7.4vmin, 104px); }
.pl6-t { position: absolute; left: 50%; top: 50%; height: calc(var(--u) * var(--s)); width: auto; max-width: none;
	--R: var(--R0); translate: calc(-50% + var(--x) * var(--R)) calc(-50% + var(--y) * var(--R)); rotate: var(--r);
	filter: brightness(var(--b)) contrast(1.08) drop-shadow(0 6px 10px rgba(0,0,0,.7)); opacity: 0; }
.pl6-t.r1 { --R: var(--R1); } .pl6-t.r2 { --R: var(--R2); }
@media (orientation: portrait) { .pl6-tools { --R0: 26vh; --R1: 35vh; --R2: 45vh; --u: clamp(46px, 11vw, 80px); } }
.pl6-vig { position: absolute; inset: 0; background: radial-gradient(ellipse min(46vw, 70vh) min(40vh, 60vw) at 50% 50%, rgba(4,5,6,.96) 0%, rgba(4,5,6,.86) 42%, rgba(4,5,6,.25) 75%, rgba(4,5,6,.55) 100%); }
.pl6-glare { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(190,210,255,.10) 47%, rgba(255,255,255,.16) 50%, rgba(190,210,255,.10) 53%, transparent 62%); transform: translateX(-70%); mix-blend-mode: screen; }
.pl6-logo { position: absolute; left: 50%; top: 50%; width: min(64vw, 50vh, 470px); translate: -50% -52%; }
.pl6-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl6-emblem { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.9); filter: brightness(.12); }
.pl6-word { opacity: 0; transform: translateY(4px); }
.pl6-sub { font: 700 4.3px var(--display, 'Rajdhani'), 'Rajdhani', sans-serif; letter-spacing: 1.3px; }
.pl6-bar { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(0); }
.pl6-gear-o { animation: pl6Spin 5.5s linear infinite; }
.pl6-gear-i { animation: pl6Spin 4.2s linear infinite reverse; }
.pl6-progress { position: absolute; left: 50%; bottom: max(7vh, 40px); width: min(180px, 40vw); height: 2px; translate: -50% 0; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.pl6-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1d4fd8, #8b5cf6, #e1262d); }

.pl6.go .pl6-stage { animation: pl6Stage 3.6s cubic-bezier(.2,.7,.2,1) forwards; }
.pl6.go .pl6-t { animation: pl6Tool .9s cubic-bezier(.2,.7,.2,1) var(--d) forwards; }
.pl6.go .pl6-glare { animation: pl6Glare 2.4s ease-in-out .7s forwards; }
.pl6.go .pl6-emblem { animation: pl6Emb 1.5s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.pl6.go .pl6-sweep { animation: pl6Sweep 1.1s cubic-bezier(.45,0,.3,1) 1.55s forwards; }
.pl6.go .pl6-word { animation: pl6Word .9s cubic-bezier(.2,.7,.2,1) 1.05s forwards; }
.pl6.go .pl6-sweep2 { animation: pl6Sweep2 1s cubic-bezier(.45,0,.3,1) 2.05s forwards; }
.pl6.go .pl6-bar { animation: pl6Bar .9s cubic-bezier(.2,.7,.2,1) 1.4s forwards; }
.pl6.go .pl6-progress i { animation: pl6Prog 3.2s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes pl6Stage { 0% { opacity: 0; transform: scale(1.14) rotate(-4deg); } 20% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes pl6Tool { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl6Glare { to { transform: translateX(70%); } }
@keyframes pl6Emb { 0% { opacity: 0; transform: scale(.9); filter: brightness(.12); } 45% { opacity: 1; filter: brightness(.55); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes pl6Word { to { opacity: 1; transform: none; } }
@keyframes pl6Sweep { from { transform: translateX(0); } to { transform: translateX(150px); } }
@keyframes pl6Sweep2 { from { transform: translateX(0); } to { transform: translateX(150px); } }
@keyframes pl6Bar { to { transform: scaleX(1); } }
@keyframes pl6Prog { to { width: 100%; } }
@keyframes pl6Spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl6 { display: none !important; } }
.pl6-tools { --R0: max(26vh, 22vw); --R1: max(35vh, 30vw); --R2: max(45vh, 39vw); --R3: max(56vh, 49vw); --u: clamp(80px, 12vmin, 150px); }
.pl6-t.r3 { --R: var(--R3); }
@media (orientation: portrait) { .pl6-tools { --R0: 25vh; --R1: 33vh; --R2: 42vh; --R3: 52vh; --u: clamp(60px, 15vw, 110px); } }
.pl6-vig { background: radial-gradient(ellipse min(38vw, 62vh) min(36vh, 52vw) at 50% 50%, rgba(4,5,6,.97) 0%, rgba(4,5,6,.88) 45%, rgba(4,5,6,.2) 80%, rgba(4,5,6,.35) 100%); }

/* v4.7 — categories show the client's photos (not icons) */
.mega-ic, .mc-ic, .sc-ic { background: #fff; padding: 0; }
.mega-ic img, .mc-ic img, .sc-ic img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; }
.story-plate { padding: 0 !important; overflow: hidden; background: #fff; }
.story-plate img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50%; filter: none !important; transform: none !important; }

/* ================= v4.8 — Preloader 7: the brand film ================= */
.pl7 { display: block; background: #000; overflow: hidden; }
.pl7 .pl7-vid, .pl7 .pl7-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.pl7.playing .pl7-vid { opacity: 1; }
.pl7.still .pl7-poster { opacity: 1; animation: pl7Push 2.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pl7Push { from { transform: scale(1.14); filter: brightness(.2); } 55% { filter: brightness(1); } to { transform: scale(1); filter: brightness(1); } }
.pl7.done { opacity: 0; visibility: hidden; clip-path: none; transition: opacity .7s ease, visibility .7s; }
@media (prefers-reduced-motion: reduce) { .pl7.still .pl7-poster { animation: none; } }

/* v4.9 — 68-category mega menu: compact 4 columns, scrolls inside */
.mega { width: min(1180px, 94vw); grid-template-columns: 1fr 240px; }
.mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 6px; max-height: min(66vh, 600px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; align-content: start; }
.mega-item { padding: 7px 8px; gap: 10px; }
.mega-item .mega-ic { width: 40px; height: 40px; border-radius: 10px; }
.mega-item b { font-size: .86rem; line-height: 1.2; }
.mega-item small { font-size: .72rem; }
@media (max-width: 1100px) { .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== v5.0: phone lists, Google Business location link ===== */
.ph-list { display: inline; }
.ph-list a { white-space: nowrap; }
.ph-sep { opacity: .45; margin: 0 .2em; }
.contact-list .ph-list { display: block; }
.contact-list div > a[target="_blank"]:not(.gmb-link) { color: inherit; text-decoration: none; }
.contact-list div > a[target="_blank"]:not(.gmb-link):hover { text-decoration: underline; }
.gmb-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff; background: linear-gradient(90deg, #1d4fd8, #e1262d); text-decoration: none; width: max-content; }
.gmb-link svg { flex: none; }
.gmb-link:hover { filter: brightness(1.1); color: #fff; }
.f-contact a[target="_blank"] { color: inherit; }
/* v5.0: three range cards — client categories 01–28, 29–46, 47–68 */
.range-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; grid-template-areas: none !important; }
.range-grid .range-card { grid-row: auto !important; grid-column: auto !important; }
@media (max-width: 1100px) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .range-grid .range-card:last-child { grid-column: 1 / -1 !important; } }
@media (max-width: 760px) { .range-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.range-grid .range-card .rc-list a { font-size: .8rem; padding: 6px 11px; }
.range-grid .range-card .rc-art { width: 150px; top: -18px; right: 6px; }
.contact-list .ph-list a, .f-contact .ph-list a { margin-right: 0; }
.f-contact a[href^="tel"] { white-space: nowrap; }
.cube .f img.cube-tool { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(120,160,255,.35)); }
html[data-theme="light"] .cube .f img.cube-tool { filter: none; }
.hero-pills .hpill:nth-child(4) svg { color: #3ddc97; }
/* v5.0.2: four hero pills — one row of 4, or a neat 2 × 2 on small screens (never 3 + 1) */
.hero-pills { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px; }
.hero-pills .hpill { justify-content: flex-start; white-space: nowrap; }
@media (max-width: 640px) {
	.hero-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
}
@media (min-width: 641px) and (max-width: 1180px) { .hero-pills .hpill { letter-spacing: .1em; padding: 8px 12px; gap: 6px; } }
@media (max-width: 380px) { .hero-pills .hpill { letter-spacing: .1em; padding: 8px 11px; } }

/* v5.1: client's vernier caliper — a little highlighted in the hero and Wide Range backgrounds */
.cal-feature { position: absolute; pointer-events: none; display: block; z-index: 0; }
.cal-feature img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(91,140,255,.45)) drop-shadow(0 0 2px rgba(255,255,255,.35)); }
.cal-feature::after { content: ""; position: absolute; inset: -30% -10%; background: radial-gradient(closest-side, rgba(47,107,255,.18), transparent 70%); z-index: -1; }
.cal-hero { width: clamp(220px, 26vw, 380px); left: 47%; top: 15%; opacity: .5; transform: rotate(-8deg); animation: calFloat 9s ease-in-out infinite alternate; }
.cal-range { width: clamp(220px, 30vw, 460px); right: 3%; top: 26px; opacity: .42; transform: rotate(6deg); animation: calFloat 11s ease-in-out -3s infinite alternate; z-index: -1; }
@keyframes calFloat { from { translate: 0 0; } to { translate: 10px -14px; } }
.cal-range ~ .container { position: relative; z-index: 1; }
html[data-theme="light"] .cal-feature img { filter: invert(1) brightness(.4) drop-shadow(0 0 14px rgba(29,79,216,.25)); }
html[data-theme="light"] .cal-feature { opacity: .32; }
html[data-theme="light"] .cal-feature::after { background: radial-gradient(closest-side, rgba(29,79,216,.10), transparent 70%); }
@media (max-width: 900px) { .cal-hero { left: auto; top: 55%; right: -30px; bottom: auto; opacity: .32; } }
@media (max-width: 640px) { .cal-hero { width: 230px; opacity: .3; } .cal-range { width: 230px; top: 10px; right: -40px; opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cal-feature { animation: none; } }
/* v5.1.1: caliper sized like the other floating tools — just a little bigger */
.cal-feature img { filter: drop-shadow(0 0 8px rgba(91,140,255,.35)); }
.cal-feature::after { display: none; }
.cal-hero { width: 150px; left: 47%; top: 64%; opacity: .32; transform: rotate(-14deg); }
@media (max-width: 900px) { .cal-hero { width: 120px; left: auto; right: 6%; top: 56%; opacity: .26; } }
@media (max-width: 640px) { .cal-hero { width: 110px; } }
html[data-theme="light"] .cal-feature { opacity: .22; }
html[data-theme="light"] .cal-feature img { filter: invert(1) brightness(.4); }
.range-grid .range-card .rc-art[src$="caliper.svg"] { width: 170px; height: auto; top: 8px; right: 12px; transform: rotate(-4deg); opacity: .42; }
/* v5.1.2: top bar announcement scrolls continuously */
.topbar-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.topbar-marquee .tm-track { display: flex; width: max-content; animation: tmScroll 38s linear infinite; }
.topbar-marquee .tm-track span { display: block; flex: none; white-space: nowrap; overflow: visible; text-overflow: clip; padding-right: 64px; position: relative; }
.topbar-marquee .tm-track span::after { content: "✦"; position: absolute; right: 26px; opacity: .55; color: #ff6b4a; }
.topbar-marquee:hover .tm-track { animation-play-state: paused; }
@keyframes tmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .topbar-marquee .tm-track { animation-duration: 90s; } }
@media (max-width: 768px) {
	.topbar { display: block !important; padding: 0; }
	.topbar .topbar-in { padding: 7px 0; min-height: 0; }
	.topbar-left, .topbar-right { display: none !important; }
	.topbar-marquee { display: block !important; width: 100%; font-size: .74rem; }
	.topbar-marquee .tm-track { animation-duration: 30s; }
}