/* =========================================================
   New Microtek – Precision Punches
   Concept: "precision you trust" – charcoal steel + brand amber,
   slanted amber labels (from the brand banners), blueprint lines, measured motion.
   ========================================================= */
:root{
  --amber:#f89c00; --amber-2:#ffb733; --amber-ink:#8a5600;
  --ink:#121417; --char:#1b1e23; --char-2:#252930; --steel:#68717d; --steel-2:#9aa3ae;
  --line:#e2e5e9; --mist:#eef0f3; --paper:#f5f6f8; --white:#fff; --ok:#1e9e5a; --wa:#1fae5b;
  --display:"Barlow Condensed", "Arial Narrow", "Roboto Condensed", "DejaVu Sans Condensed", sans-serif; --body:"Manrope", "Segoe UI", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap:1260px; --r:14px; --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; overflow-x:clip; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.wrap{ width:min(var(--wrap),100%); margin:0 auto; padding-inline:22px; }
h1,h2,h3,h4{ margin:0; line-height:1.05; text-wrap:balance; }
.display{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.005em; }
.h2{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(34px,4.4vw,58px); letter-spacing:.005em; }
.h2 em{ font-style:normal; color:var(--amber); }
.kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink); font-weight:600; }
.kicker::before{ content:""; width:28px; height:2px; background:var(--amber); }
.dark .kicker, .on-dark .kicker{ color:var(--amber-2); }
.lead{ color:var(--steel); font-size:18px; max-width:640px; margin:14px 0 0; }
.dark .lead{ color:#b5bcc5; }
.sec{ padding-block:100px; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.center{ text-align:center; } .muted{ color:var(--steel); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.dark{ background:var(--char); color:var(--white); }

/* buttons */
.btn{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border:2px solid transparent; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s; white-space:nowrap; }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:translateX(-101%); transition:transform .45s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover::before{ transform:none; }
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-amber{ background:var(--amber); color:var(--ink); box-shadow:0 14px 30px -14px rgba(248,156,0,.9); }
.btn-amber:hover{ color:var(--white); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark::before{ background:var(--amber); }
.btn-dark:hover{ color:var(--ink); }
.btn-line{ border-color:currentColor; background:transparent; }
.btn-line:hover{ color:var(--white); border-color:var(--ink); }
.dark .btn-line:hover, .on-dark .btn-line:hover{ color:var(--ink); border-color:var(--white); }
.dark .btn-line::before, .on-dark .btn-line::before{ background:var(--white); }
.btn-wa{ background:var(--wa); color:var(--white); }
.btn-wa::before{ background:#168a47; }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn svg{ width:18px; height:18px; }
.link{ font-weight:700; display:inline-flex; gap:8px; align-items:center; border-bottom:2px solid var(--amber); padding-bottom:2px; }
.link span{ transition:transform .3s var(--ease); } .link:hover span{ transform:translateX(5px); }

/* ---------- header ---------- */
.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:linear-gradient(90deg,var(--amber),var(--amber-2)); transform-origin:0 50%; transform:scaleX(0); }
.topbar{ background:var(--ink); color:#aeb5bf; font-size:13px; }
.topbar .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:9px; }
.topbar .tl, .topbar .tr{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.topbar a{ color:var(--white); transition:color .2s; } .topbar a:hover{ color:var(--amber-2); }
.topbar svg{ width:14px; height:14px; vertical-align:-2px; margin-right:6px; color:var(--amber); }
.header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s; }
.header.scrolled{ box-shadow:0 14px 34px -22px rgba(18,20,23,.45); }
.header .wrap{ display:flex; align-items:center; gap:26px; height:84px; transition:height .35s var(--ease); }
.header.scrolled .wrap{ height:70px; }
.logo img{ height:58px; width:auto; transition:height .35s var(--ease), transform .4s var(--ease); }
.header.scrolled .logo img{ height:48px; }
.logo:hover img{ transform:scale(1.03); }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav > a, .nav .mm > button{ position:relative; padding:12px 14px; border:0; background:none; font-weight:700; font-size:15px; cursor:pointer; color:var(--ink); white-space:nowrap; }
.nav > a::after, .nav .mm > button::after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:3px; border-radius:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav > a:hover::after, .nav .mm.open > button::after, .nav .mm > button:hover::after, .nav > a[aria-current="page"]::after, .nav .mm.cur > button::after{ transform:scaleX(1); }
.mm > button .chev{ display:inline-block; margin-left:4px; transition:transform .3s; font-size:11px; }
.mm.open > button .chev{ transform:rotate(180deg); }
.hicons{ display:flex; gap:10px; align-items:center; }
.icon-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--white); display:grid; place-items:center; cursor:pointer; transition:transform .25s, border-color .25s, background .25s; }
.icon-btn:hover{ transform:translateY(-2px); border-color:var(--ink); }
.icon-btn svg{ width:19px; height:19px; }
.menu-btn{ display:none; }

/* mega menu */
.mega{ position:absolute; left:0; right:0; top:100%; padding:0 22px; visibility:hidden; opacity:0; transform:translateY(14px); transition:opacity .3s, transform .4s var(--ease), visibility 0s .4s; }
.mm.open .mega{ visibility:visible; opacity:1; transform:none; transition:opacity .3s, transform .4s var(--ease); }
.mega-card{ width:min(1260px,100%); margin:0 auto; background:var(--white); border-radius:0 0 22px 22px; box-shadow:0 40px 80px -30px rgba(18,20,23,.45); overflow:hidden; border:1px solid var(--line); border-top:0; }
.mega-cols{ display:grid; grid-template-columns:repeat(5,1fr); }
.mega-col{ padding:0 0 22px; border-right:1px solid var(--line); opacity:0; transform:translateY(12px); transition:opacity .4s, transform .5s var(--ease); }
.mega-col:last-child{ border-right:0; }
.mm.open .mega-col{ opacity:1; transform:none; }
.mm.open .mega-col:nth-child(2){ transition-delay:.05s; } .mm.open .mega-col:nth-child(3){ transition-delay:.1s; } .mm.open .mega-col:nth-child(4){ transition-delay:.15s; } .mm.open .mega-col:nth-child(5){ transition-delay:.2s; }
.mega-pic{ position:relative; display:block; height:132px; overflow:hidden; background:var(--mist); }
.mega-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mega-col:hover .mega-pic img{ transform:scale(1.08); }
.mega-pic b{ position:absolute; left:0; bottom:14px; padding:7px 22px 7px 16px; background:var(--amber); color:var(--ink); font-family:var(--display); font-size:19px; text-transform:uppercase; letter-spacing:.02em; clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); transition:padding .35s var(--ease); }
.mega-col:hover .mega-pic b{ padding-right:32px; }
.mega-col ul{ list-style:none; margin:14px 0 0; padding:0 16px; display:grid; gap:1px; }
.mega-col li a{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; font-size:14px; font-weight:600; color:#3a4048; transition:background .2s, color .2s, padding .25s var(--ease); }
.mega-col li a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--line); flex:0 0 6px; transition:background .2s, transform .2s; }
.mega-col li a:hover, .mega-col li a[aria-current="page"]{ background:var(--mist); color:var(--ink); padding-left:12px; }
.mega-col li a:hover::before, .mega-col li a[aria-current="page"]::before{ background:var(--amber); transform:scale(1.4); }
.mega-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 24px; background:var(--ink); color:#c3c9d1; font-size:14px; }
.mega-foot a{ color:var(--white); font-weight:700; } .mega-foot a:hover{ color:var(--amber-2); }
.mega-promo{ margin:18px 16px 0; padding:18px; border-radius:14px; background:var(--ink); color:#c3c9d1; font-size:13.5px; }
.mega-promo .kicker{ font-size:10.5px; color:var(--amber-2); } .mega-promo .kicker::before{ width:16px; }
.mega-promo b{ display:block; color:var(--white); font-family:var(--display); font-size:22px; text-transform:uppercase; line-height:1.05; margin:8px 0 4px; }
.mega-promo p{ margin:0 0 12px; line-height:1.45; } .mega-promo .btn{ width:100%; }
.mega-cata{ display:block; margin-top:12px; border-radius:10px; overflow:hidden; position:relative; }
.mega-cata img{ width:100%; aspect-ratio:2/1; object-fit:cover; transition:transform .6s var(--ease); } .mega-cata:hover img{ transform:scale(1.08); }
.mega-cata span{ position:absolute; left:0; right:0; bottom:0; padding:6px 10px; background:linear-gradient(transparent, rgba(0,0,0,.8)); color:var(--white); font-weight:700; font-size:12px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:radial-gradient(1200px 600px at 75% 30%, #2a2f37 0%, var(--char) 55%, var(--ink) 100%); color:var(--white); isolation:isolate; }
.hero .grid-bg{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at 70% 40%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 30%, transparent 75%); animation:gridmove 30s linear infinite; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; min-height:clamp(560px, 82vh, 760px); padding-block:70px 90px; }
.hero h1{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(44px,5.8vw,88px); line-height:.95; letter-spacing:-.005em; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:inline-block; transform:translateY(105%); animation:lineup 1s var(--ease) forwards; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.12s; } .hero h1 .ln:nth-child(3) > span{ animation-delay:.24s; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero p.lead{ color:#c3cad3; font-size:19px; max-width:560px; opacity:0; animation:rise .9s .45s var(--ease) forwards; }
.hero .acts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; opacity:0; animation:rise .9s .6s var(--ease) forwards; }
.hero .kicker{ opacity:0; animation:rise .8s .1s var(--ease) forwards; margin-bottom:18px; }
.hero-badges{ display:flex; gap:26px; flex-wrap:wrap; margin-top:42px; opacity:0; animation:rise .9s .75s var(--ease) forwards; }
.hero-badges div{ border-left:2px solid var(--amber); padding-left:14px; }
.hero-badges b{ display:block; font-family:var(--display); font-size:34px; line-height:1; }
.hero-badges span{ font-size:13px; color:#9ea6b0; }
.stage{ position:relative; aspect-ratio:1/1; max-width:600px; justify-self:end; width:100%; perspective:1200px; }
.stage .ring{ position:absolute; inset:4%; border-radius:50%; border:1px dashed rgba(255,255,255,.18); animation:spin 60s linear infinite; }
.stage .ring::before{ content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 6px rgba(248,156,0,.2); }
.stage .ring.r2{ inset:16%; border-style:solid; border-color:rgba(248,156,0,.25); animation-duration:40s; animation-direction:reverse; }
.stage .ring.r2::before{ background:var(--white); top:auto; bottom:-6px; box-shadow:none; }
.stage .set{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s, visibility 0s .8s; }
.stage .set.on{ opacity:1; visibility:visible; transition:opacity .8s; }
.stage .card{ position:absolute; border-radius:22px; overflow:hidden; background:var(--white); box-shadow:0 40px 70px -30px rgba(0,0,0,.75); transform-style:preserve-3d; will-change:transform; }
.stage .card img{ width:100%; height:100%; object-fit:cover; }
.stage .c1{ width:62%; aspect-ratio:1; left:19%; top:16%; z-index:2; }
.stage .c2{ width:34%; aspect-ratio:1; left:0; top:4%; }
.stage .c3{ width:36%; aspect-ratio:1; right:0; bottom:6%; z-index:3; }
.stage .set.on .card{ animation:cardin 1s var(--ease) both; }
.stage .set.on .c2{ animation-delay:.12s; } .stage .set.on .c3{ animation-delay:.24s; }
.stage .tag{ position:absolute; z-index:4; left:4%; bottom:8%; background:var(--amber); color:var(--ink); padding:10px 26px 10px 16px; font-family:var(--display); font-size:22px; text-transform:uppercase; clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%); box-shadow:0 20px 30px -16px rgba(0,0,0,.6); }
.stage .tag small{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; }
.stage .chip{ position:absolute; z-index:5; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:rgba(18,20,23,.75); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); font-size:13px; font-weight:600; animation:bob 5s ease-in-out infinite; }
.stage .chip i{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(248,156,0,.25); }
.stage .chip.k1{ top:6%; right:4%; } .stage .chip.k2{ top:48%; left:-4%; animation-delay:-2.5s; }
.hero-dots{ position:absolute; left:0; right:0; bottom:28px; }
.hero-dots .wrap{ min-height:0; padding:0; display:flex; gap:10px; align-items:center; }
.hero-dots button{ position:relative; height:4px; width:56px; border:0; padding:0; border-radius:3px; background:rgba(255,255,255,.2); cursor:pointer; overflow:hidden; }
.hero-dots button i{ position:absolute; inset:0; background:var(--amber); transform-origin:0 50%; transform:scaleX(0); }
.hero-dots button.on i{ animation:fill 5.5s linear forwards; }
.hero-dots span{ font-family:var(--mono); font-size:12px; color:#9ea6b0; margin-left:8px; letter-spacing:.1em; text-transform:uppercase; }
.dim{ position:absolute; z-index:1; color:rgba(255,255,255,.35); font-family:var(--mono); font-size:11px; }
.dim svg{ display:block; overflow:visible; }
.dim path{ stroke:rgba(255,255,255,.35); stroke-width:1; fill:none; stroke-dasharray:400; stroke-dashoffset:400; animation:draw 2.2s .8s var(--ease) forwards; }

/* ticker */
.ticker{ background:var(--amber); color:var(--ink); overflow:hidden; border-block:1px solid #d98700; }
.ticker-track{ display:flex; gap:42px; width:max-content; padding-block:15px; animation:marquee 32s linear infinite; font-family:var(--display); font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.ticker-track span{ display:inline-flex; align-items:center; gap:42px; }
.ticker-track span::after{ content:"✦"; font-size:15px; }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* industries / categories */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat{ position:relative; display:flex; flex-direction:column; min-height:420px; border-radius:var(--r); overflow:hidden; background:var(--char); color:var(--white); isolation:isolate; }
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1s var(--ease), filter .6s; filter:saturate(.9); }
.cat::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(18,20,23,.05) 25%, rgba(18,20,23,.92) 80%); transition:background .5s; }
.cat:hover img{ transform:scale(1.08) rotate(.5deg); filter:saturate(1.1); }
.cat:hover::after{ background:linear-gradient(180deg, rgba(248,156,0,.08) 0%, rgba(18,20,23,.95) 75%); }
.cat .num{ position:absolute; top:18px; left:20px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--amber-2); }
.cat .cnt{ position:absolute; top:14px; right:16px; padding:5px 12px; border-radius:999px; background:rgba(18,20,23,.6); backdrop-filter:blur(6px); font-size:12.5px; font-weight:700; }
.cat .tx{ margin-top:auto; padding:24px; transform:translateY(34px); transition:transform .5s var(--ease); }
.cat:hover .tx{ transform:none; }
.cat h3{ font-family:var(--display); font-size:30px; text-transform:uppercase; }
.cat p{ margin:8px 0 14px; color:#c9cfd6; font-size:14.5px; }
.cat .go{ white-space:nowrap; display:inline-flex; gap:8px; align-items:center; font-weight:700; color:var(--amber-2); opacity:0; transition:opacity .4s; }
.cat:hover .go{ opacity:1; }
.cat.wide{ grid-column:span 2; }
.cat.all{ background:var(--amber); color:var(--ink); justify-content:flex-end; }
.cat.all::after{ background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.35), transparent 50%); }
.cat.all:hover::after{ background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.55), transparent 60%); }
.cat.all .tx{ transform:none; } .cat.all h3{ font-size:40px; } .cat.all p{ color:#3b2a00; } .cat.all .go{ opacity:1; color:var(--ink); } .cat.all .num{ color:var(--ink); }

/* about / numbers */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.collage{ position:relative; aspect-ratio:1/1; }
.collage figure{ position:absolute; margin:0; border-radius:var(--r); overflow:hidden; background:var(--white); box-shadow:0 30px 60px -32px rgba(18,20,23,.55); }
.collage figure img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.collage figure:hover img{ transform:scale(1.07); }
.collage .f1{ width:64%; height:70%; left:0; top:0; }
.collage .f2{ width:46%; height:46%; right:0; top:22%; z-index:2; }
.collage .f3{ width:50%; height:36%; left:22%; bottom:0; z-index:3; }
.collage .stamp{ position:absolute; z-index:4; right:4%; bottom:6%; width:140px; height:140px; border-radius:50%; background:var(--amber); color:var(--ink); display:grid; place-items:center; text-align:center; font-family:var(--display); text-transform:uppercase; line-height:1; animation:spin 22s linear infinite; }
.collage .stamp b{ font-size:44px; display:block; animation:spin 22s linear infinite reverse; }
.collage .stamp svg{ position:absolute; inset:0; }
.collage .stamp text{ font-family:var(--mono); font-size:9.5px; letter-spacing:3px; fill:var(--ink); }
.ticks{ list-style:none; padding:0; margin:24px 0 30px; display:grid; gap:12px; }
.ticks li{ display:grid; grid-template-columns:30px 1fr; gap:10px; font-weight:600; }
.ticks li::before{ content:""; width:24px; height:24px; border-radius:50%; background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121417' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:70px; }
.stat{ padding:28px 22px 0 0; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(46px,5vw,68px); line-height:1; font-variant-numeric:tabular-nums; }
.stat b sup{ font-size:.45em; color:var(--amber); vertical-align:super; }
.stat > span{ color:var(--steel); font-size:14.5px; }

/* products */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{ padding:10px 18px; border:1px solid var(--line); border-radius:999px; background:var(--white); font-weight:700; font-size:14px; cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s; }
.tab:hover{ border-color:var(--ink); transform:translateY(-1px); }
.tab[aria-selected="true"], .tab.on{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.tab .n{ font-family:var(--mono); font-size:11px; opacity:.6; margin-left:4px; }
.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pcard{ position:relative; display:flex; flex-direction:column; background:var(--white); border-radius:var(--r); overflow:hidden; border:1px solid var(--line); transition:transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.pcard:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(18,20,23,.5); border-color:transparent; }
.pcard .pic{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--white); }
.pcard .pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s, transform .9s var(--ease); }
.pcard .pic .alt{ opacity:0; transform:scale(1.06); }
.pcard:hover .pic .alt{ opacity:1; transform:scale(1); }
.pcard:hover .pic .main.has-alt{ opacity:0; }
.pcard:hover .pic .main:not(.has-alt){ transform:scale(1.08); }
.pcard .lbl{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 14px 16px; background:var(--amber); color:var(--ink); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transition:background .35s; }
.pcard .lbl h3{ font-family:var(--display); font-size:20px; text-transform:uppercase; letter-spacing:.01em; line-height:1.05; }
.pcard .lbl .ar{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--ink); color:var(--amber); display:grid; place-items:center; transition:transform .4s var(--ease); }
.pcard:hover .lbl{ background:var(--ink); color:var(--white); }
.pcard:hover .lbl .ar{ background:var(--amber); color:var(--ink); transform:rotate(-45deg); }
.pcard .cat-tag{ position:absolute; top:12px; left:12px; z-index:2; padding:4px 10px; border-radius:999px; background:rgba(18,20,23,.75); color:var(--white); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(6px); }
.pcard .quick{ position:absolute; right:12px; bottom:12px; z-index:2; display:flex; gap:6px; transform:translateY(140%); transition:transform .45s var(--ease); }
.pcard:hover .quick{ transform:none; }
.pcard .quick a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--white); color:var(--ink); box-shadow:0 10px 20px -10px rgba(0,0,0,.5); transition:background .2s, color .2s; }
.pcard .quick a:hover{ background:var(--amber); }
.pcard .quick a.wa{ background:var(--wa); color:var(--white); }
.pcard .quick svg{ width:18px; height:18px; }
.more-row{ text-align:center; margin-top:36px; }

/* process */
.process{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; counter-reset:st; }
.process::before{ content:""; position:absolute; left:0; right:0; top:34px; height:2px; background:rgba(255,255,255,.12); }
.process .bar{ position:absolute; left:0; top:34px; height:2px; width:100%; background:var(--amber); transform-origin:0 50%; transform:scaleX(0); transition:transform 2.2s var(--ease); }
.process.in .bar{ transform:scaleX(1); }
.pstep{ position:relative; }
.pstep .dot{ position:relative; z-index:1; width:68px; height:68px; border-radius:50%; background:var(--char-2); border:2px solid rgba(255,255,255,.15); display:grid; place-items:center; color:var(--amber-2); transition:background .4s, border-color .4s, transform .4s var(--ease); }
.pstep .dot svg{ width:28px; height:28px; }
.pstep:hover .dot{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:scale(1.08) rotate(-8deg); }
.pstep::before{ counter-increment:st; content:"0" counter(st); position:absolute; top:2px; left:80px; font-family:var(--mono); font-size:12px; color:var(--amber-2); letter-spacing:.1em; }
.pstep h3{ font-family:var(--display); font-size:22px; text-transform:uppercase; margin:18px 0 6px; }
.pstep p{ margin:0; color:#aeb5bf; font-size:14px; }

/* why */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why > div{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s; }
.why > div::after{ content:""; position:absolute; right:-40px; top:-40px; width:110px; height:110px; border-radius:50%; background:var(--amber); opacity:.08; transition:transform .6s var(--ease), opacity .4s; }
.why > div:hover{ transform:translateY(-5px); box-shadow:0 28px 44px -30px rgba(18,20,23,.45); }
.why > div:hover::after{ transform:scale(3.5); opacity:.12; }
.why svg{ width:40px; height:40px; color:var(--amber); }
.why h3{ font-family:var(--display); font-size:24px; text-transform:uppercase; margin:16px 0 6px; }
.why p{ margin:0; color:var(--steel); font-size:15px; }

/* catalogue */
.cata{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cata a{ position:relative; display:block; border-radius:var(--r); overflow:hidden; background:var(--white); border:1px solid var(--line); transition:transform .45s var(--ease), box-shadow .45s; }
.cata a:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 30px 50px -30px rgba(18,20,23,.5); }
.cata img{ width:100%; aspect-ratio:1857/847; object-fit:cover; transition:transform .9s var(--ease); }
.cata a:hover img{ transform:scale(1.05); }
.cata .cap{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; font-weight:700; }
.cata .cap span{ font-family:var(--mono); font-size:12px; color:var(--amber-ink); }

/* clients */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track{ display:flex; gap:20px; width:max-content; animation:marquee 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee .lg{ width:210px; height:110px; flex:0 0 auto; display:grid; place-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:14px 24px; }
.marquee .lg img{ max-height:70px; width:auto; filter:grayscale(1); opacity:.65; transition:filter .4s, opacity .4s, transform .4s var(--ease); }
.marquee .lg:hover img{ filter:none; opacity:1; transform:scale(1.08); }

/* enquiry band */
.enq{ display:grid; grid-template-columns:1fr 1.05fr; gap:50px; align-items:start; }
.enq ul{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
.enq ul li{ display:flex; gap:14px; align-items:flex-start; }
.enq ul li i{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; background:rgba(248,156,0,.14); color:var(--amber-2); display:grid; place-items:center; }
.enq ul li i svg{ width:20px; height:20px; }
.enq ul b{ display:block; } .enq ul span{ color:#aeb5bf; font-size:14.5px; }
.form{ background:var(--white); color:var(--ink); border-radius:20px; padding:30px; display:grid; gap:14px; box-shadow:0 40px 70px -40px rgba(0,0,0,.6); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.form input, .form select, .form textarea{ width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); transition:border-color .2s, box-shadow .2s, background .2s; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--amber); background:var(--white); box-shadow:0 0 0 4px rgba(248,156,0,.15); }
.form .msg{ margin:0; min-height:20px; font-size:14px; }
.form .acts{ display:flex; gap:10px; flex-wrap:wrap; } .form .acts .btn{ flex:1; }
.form.bordered{ border:1px solid var(--line); box-shadow:none; }

/* page banner */
.pbanner{ position:relative; overflow:hidden; background:var(--char); color:var(--white); isolation:isolate; }
.pbanner .grid-bg{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:48px 48px; }
.pbanner .wrap{ display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:center; padding-block:60px; }
.pbanner h1{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(40px,5.4vw,72px); line-height:.98; margin:14px 0 12px; animation:rise .8s var(--ease) both; }
.pbanner p{ color:#bfc6ce; max-width:660px; margin:0; font-size:17px; animation:rise .8s .1s var(--ease) both; }
.pbanner .meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; animation:rise .8s .2s var(--ease) both; }
.pbanner .meta span{ font-family:var(--mono); font-size:12px; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2); color:#dfe3e8; }
.pbanner .art{ justify-self:end; width:min(320px,100%); aspect-ratio:1; border-radius:24px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); animation:cardin 1s .15s var(--ease) both; background:var(--white); }
.pbanner .art img{ width:100%; height:100%; object-fit:cover; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:#9ea6b0; animation:rise .6s var(--ease) both; }
.crumbs a{ color:#dfe3e8; } .crumbs a:hover{ color:var(--amber-2); }
.crumbs span.sep{ opacity:.5; }
.crumbs.light{ color:var(--steel); animation:none; } .crumbs.light a{ color:var(--ink); }

/* category layout */
.layout{ display:grid; grid-template-columns:270px 1fr; gap:34px; align-items:start; }
.side{ position:sticky; top:100px; display:grid; gap:16px; }
.side-box{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.side-box h4{ font-family:var(--display); font-size:20px; text-transform:uppercase; margin-bottom:10px; }
.side-cats a{ display:flex; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:8px; font-weight:600; font-size:14.5px; transition:background .2s, padding .25s var(--ease); }
.side-cats a small{ font-family:var(--mono); font-size:11.5px; color:var(--steel); }
.side-cats a:hover{ background:var(--mist); padding-left:14px; }
.side-cats a[aria-current="page"]{ background:var(--ink); color:var(--white); } .side-cats a[aria-current="page"] small{ color:var(--amber-2); }
.help{ background:var(--ink); color:var(--white); border:0; }
.help p{ color:#b5bcc5; font-size:14px; margin:6px 0 14px; }
.help .btn{ width:100%; margin-top:8px; }
.intro-box{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; margin-bottom:22px; color:#3a4048; }
.pgrid.cols3{ grid-template-columns:repeat(3,1fr); }

/* product page */
.pd{ display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:start; }
.gal{ position:sticky; top:100px; display:grid; gap:12px; }
.stage-main{ position:relative; aspect-ratio:1; border-radius:20px; overflow:hidden; background:var(--white); border:1px solid var(--line); cursor:zoom-in; }
.stage-main img{ width:100%; height:100%; object-fit:cover; transition:opacity .35s, transform .35s var(--ease); }
.stage-main .lens{ position:absolute; inset:0; background-repeat:no-repeat; background-size:220%; opacity:0; transition:opacity .25s; pointer-events:none; background-color:var(--white); }
.stage-main:hover .lens.on{ opacity:1; }
.stage-main .hint{ position:absolute; right:14px; bottom:14px; font-size:12px; padding:6px 12px; border-radius:999px; background:rgba(18,20,23,.75); color:var(--white); pointer-events:none; transition:opacity .2s; }
.stage-main:hover .hint{ opacity:0; }
.thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.thumbs button{ aspect-ratio:1; border-radius:12px; overflow:hidden; border:2px solid var(--line); background:var(--white); padding:0; cursor:pointer; transition:border-color .2s, transform .25s; }
.thumbs button:hover{ transform:translateY(-2px); }
.thumbs button.on{ border-color:var(--amber); }
.thumbs img{ width:100%; height:100%; object-fit:cover; }
.pinfo .cat-link{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-ink); font-weight:700; }
.pinfo h1{ font-family:var(--display); text-transform:uppercase; font-size:clamp(38px,4.4vw,60px); line-height:.98; margin:10px 0 16px; }
.pinfo .desc{ font-size:17.5px; color:#3a4048; margin:0 0 22px; }
.feat{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feat li{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:12px; background:var(--white); border:1px solid var(--line); font-weight:600; font-size:14.5px; transition:border-color .25s, transform .25s; }
.feat li:hover{ border-color:var(--amber); transform:translateX(3px); }
.feat li svg{ width:20px; height:20px; color:var(--amber); flex:0 0 20px; }
.buy{ display:flex; gap:12px; flex-wrap:wrap; padding:22px 0; border-block:1px solid var(--line); }
.buy .btn{ flex:1; min-width:200px; }
.ptabs{ margin-top:70px; }
.ptabs [role="tablist"]{ display:flex; gap:6px; border-bottom:1px solid var(--line); overflow-x:auto; }
.ptabs [role="tab"]{ position:relative; padding:14px 20px; border:0; background:none; font-weight:700; color:var(--steel); cursor:pointer; white-space:nowrap; }
.ptabs [role="tab"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--amber); transform:scaleX(0); transition:transform .35s var(--ease); }
.ptabs [role="tab"][aria-selected="true"]{ color:var(--ink); } .ptabs [role="tab"][aria-selected="true"]::after{ transform:scaleX(1); }
.ptabs [role="tabpanel"]{ padding-top:30px; animation:rise .45s var(--ease); }
.prose{ max-width:860px; color:#3a4048; } .prose p{ margin:0 0 14px; } .prose h3{ font-family:var(--display); text-transform:uppercase; font-size:24px; margin:22px 0 8px; color:var(--ink); }
.prose ul{ padding-left:20px; } .prose a{ color:var(--amber-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.faq{ display:grid; gap:12px; max-width:900px; }
.faq details{ background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .3s; }
.faq details[open]{ border-color:var(--amber); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--mist); display:grid; place-items:center; font-size:18px; line-height:1; transition:transform .35s var(--ease), background .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); background:var(--amber); }
.faq details p{ margin:0; padding:0 22px 18px; color:var(--steel); animation:rise .35s var(--ease); }
.scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 54px)/4); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:8px; }
.scroller::-webkit-scrollbar{ display:none; }
.scroller > *{ scroll-snap-align:start; }
.sc-btns{ display:flex; gap:8px; }
.sc-btns button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--white); cursor:pointer; font-size:16px; transition:background .25s, color .25s, transform .25s; }
.sc-btns button:hover{ background:var(--ink); color:var(--white); transform:scale(1.06); }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:150; background:rgba(12,13,15,.92); display:none; place-items:center; padding:30px; }
.lb.open{ display:grid; animation:fade .3s; }
.lb img{ max-width:min(1100px,94vw); max-height:86vh; border-radius:14px; background:var(--white); animation:zoomin .4s var(--ease); }
.lb button{ position:absolute; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:var(--white); font-size:22px; cursor:pointer; transition:background .2s; }
.lb button:hover{ background:var(--amber); color:var(--ink); }
.lb .x{ top:20px; right:20px; } .lb .pv{ left:20px; top:50%; } .lb .nx{ right:20px; top:50%; }

/* about & contact pages */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.values div{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:transform .4s var(--ease), border-color .3s; }
.values div:hover{ transform:translateY(-5px); border-color:var(--amber); }
.values b{ display:block; font-family:var(--display); font-size:24px; text-transform:uppercase; margin-bottom:6px; }
.values p{ margin:0; color:var(--steel); font-size:15px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:start; }
.ccards{ display:grid; gap:12px; }
.ccard{ display:grid; grid-template-columns:52px 1fr; gap:16px; padding:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); transition:border-color .25s, transform .3s var(--ease); }
.ccard:hover{ border-color:var(--amber); transform:translateX(5px); }
.ccard i{ width:52px; height:52px; border-radius:14px; background:var(--amber); color:var(--ink); display:grid; place-items:center; }
.ccard i svg{ width:22px; height:22px; }
.ccard b{ display:block; font-size:16px; } .ccard span{ color:var(--steel); }
.map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--mist); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.cta-strip{ position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; padding:38px 40px; border-radius:22px; background:var(--amber); color:var(--ink); isolation:isolate; }
.cta-strip::before{ content:""; position:absolute; right:-60px; top:-120px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.18); z-index:-1; animation:float 9s ease-in-out infinite; }
.cta-strip h3{ font-family:var(--display); font-size:clamp(28px,3vw,40px); text-transform:uppercase; }
.cta-strip p{ margin:4px 0 0; } .cta-strip .acts{ display:flex; gap:10px; flex-wrap:wrap; }
.big404{ font-family:var(--display); font-size:clamp(120px,22vw,240px); line-height:.9; color:var(--amber); }

/* footer */
.footer{ background:var(--ink); color:#aeb5bf; padding-top:80px; position:relative; overflow:hidden; }
.footer .big{ position:absolute; right:-20px; bottom:30px; font-family:var(--display); font-size:clamp(90px,16vw,240px); font-weight:700; line-height:.8; color:rgba(255,255,255,.035); text-transform:uppercase; pointer-events:none; white-space:nowrap; }
.fgrid{ position:relative; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr; gap:30px; }
.footer h4{ color:var(--white); font-family:var(--display); text-transform:uppercase; font-size:20px; letter-spacing:.02em; margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14.5px; }
.footer ul a{ transition:color .2s, padding .25s var(--ease); } .footer ul a:hover{ color:var(--amber-2); padding-left:5px; }
.footer .flogo img{ height:64px; width:auto; margin-bottom:16px; }
.footer p{ font-size:14.5px; }
.fbot{ position:relative; margin-top:56px; padding-block:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; }

/* floating */
.fab{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:70; display:flex; flex-direction:column; gap:10px; }
.fab a, .fab button{ position:relative; width:56px; height:56px; border-radius:50%; border:0; display:grid; place-items:center; color:var(--white); cursor:pointer; box-shadow:0 14px 26px -10px rgba(0,0,0,.45); transition:transform .3s var(--ease); }
.fab a:hover, .fab button:hover{ transform:scale(1.08); }
.fab .wa{ background:var(--wa); } .fab .wa::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ring 2.4s ease-out infinite; }
.fab .call{ background:var(--amber); color:var(--ink); }
.fab .top{ background:var(--white); color:var(--ink); border:1px solid var(--line); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s; }
.fab .top.show{ opacity:1; pointer-events:auto; transform:none; }
.fab svg{ width:24px; height:24px; }
.toast{ visibility:hidden; position:fixed; left:50%; bottom:28px; z-index:140; transform:translate(-50%,160%); background:var(--ink); color:var(--white); padding:13px 18px; border-radius:12px; transition:transform .45s var(--ease); max-width:calc(100% - 40px); }
.toast.show{ visibility:visible; transform:translate(-50%,0); }

/* reveal + keyframes */
[data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
[data-reveal="left"]{ transform:translateX(-50px); } [data-reveal="right"]{ transform:translateX(50px); } [data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal].in{ opacity:1; transform:none; }
.split-words .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.split-words .w > span{ display:inline-block; transform:translateY(100%); transition:transform .8s var(--ease); transition-delay:var(--d,0s); }
.split-words.in .w > span{ transform:none; }
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes lineup{ to{ transform:none; } }
@keyframes cardin{ from{ opacity:0; transform:translateY(40px) rotate(-3deg) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes fill{ to{ transform:scaleX(1); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@keyframes gridmove{ to{ background-position:56px 56px; } }
@keyframes ring{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.6); opacity:0; } }
@keyframes float{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-24px,26px); } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes zoomin{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }

/* responsive */
@media (min-width:1001px) and (max-width:1200px){ .nav > a, .nav .mm > button{ padding:12px 10px; } .hicons .btn{ display:none; } }
@media (max-width:1100px){
  .cats{ grid-template-columns:repeat(2,1fr); } .cat.wide{ grid-column:span 2; }
.cat.all{ background:var(--amber); color:var(--ink); justify-content:flex-end; }
.cat.all::after{ background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.35), transparent 50%); }
.cat.all:hover::after{ background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.55), transparent 60%); }
.cat.all .tx{ transform:none; } .cat.all h3{ font-size:40px; } .cat.all p{ color:#3b2a00; } .cat.all .go{ opacity:1; color:var(--ink); } .cat.all .num{ color:var(--ink); }
  .pgrid{ grid-template-columns:repeat(3,1fr); } .pgrid.cols3{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(3,1fr); row-gap:40px; } .process::before, .process .bar{ display:none; }
  .fgrid{ grid-template-columns:1fr 1fr 1fr; }
  .scroller{ grid-auto-columns:calc((100% - 36px)/3); }
  .values{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1000px){
  .header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--white); }
  .nav{ position:fixed; inset:0 0 0 auto; width:min(380px,90vw); z-index:90; background:var(--white); flex-direction:column; align-items:stretch; gap:0; padding:90px 18px 30px; overflow:auto; box-shadow:-20px 0 60px rgba(0,0,0,.25); clip-path:inset(0 0 0 100%); visibility:hidden; transition:clip-path .45s var(--ease), visibility 0s .45s; }
  .nav.open{ clip-path:inset(0); visibility:visible; transition:clip-path .45s var(--ease); }
  .nav > a, .nav .mm > button{ width:100%; text-align:left; padding:15px 10px; font-size:17px; border-bottom:1px solid var(--line); }
  .nav > a::after, .nav .mm > button::after{ display:none; }
  .mega{ position:static; padding:0; visibility:visible; opacity:1; transform:none; display:none; }
  .mm.open .mega{ display:block; }
  .mega-card{ box-shadow:none; border:0; border-radius:0; }
  .mega-cols{ grid-template-columns:1fr; }
  .mega-col{ opacity:1; transform:none; border-right:0; border-bottom:1px solid var(--line); padding-bottom:0; }
  .mega-pic{ height:auto; background:none; cursor:pointer; }
  .mega-pic img{ display:none; }
  .mega-pic b{ position:static; display:flex; justify-content:space-between; clip-path:none; background:none; padding:13px 10px; font-size:18px; }
  .mega-pic b::after{ content:"+"; color:var(--steel); }
  .mega-col.open .mega-pic b::after{ content:"–"; }
  .mega-col ul{ display:none; margin:0 0 12px; padding:0 6px; } .mega-col.open ul{ display:grid; }
  .mega-foot, .mega-promo{ display:none; }
  .menu-btn{ display:grid; }
  .hero .wrap, .about, .enq, .pd, .split, .contact-grid, .pbanner .wrap{ grid-template-columns:1fr; }
  .stage{ justify-self:center; max-width:520px; } .dim, .hero-name{ display:none; } .hero .wrap{ padding-bottom:110px; } .pbanner .art{ display:none; }
  .gal{ position:static; } .layout{ grid-template-columns:1fr; } .side{ position:static; order:2; }
  .stats{ grid-template-columns:1fr 1fr; } .why, .cata{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .sec{ padding-block:70px; }
  .topbar .tr{ display:none; }
  .header .wrap{ height:72px; gap:10px; } .logo img{ height:46px; } .hicons .btn{ display:none; }
  .hero .wrap{ padding-block:46px 110px; } .hero-badges{ gap:18px; } .stage .chip.k2{ display:none; }
  .cats, .why, .cata, .values, .fgrid{ grid-template-columns:1fr; } .cat.wide{ grid-column:auto; } .cat{ min-height:340px; }
  .pgrid, .pgrid.cols3{ grid-template-columns:1fr 1fr; gap:10px; }
  .pcard .lbl{ padding:11px 12px; } .pcard .lbl h3{ font-size:16px; } .pcard .lbl .ar{ width:28px; height:28px; flex-basis:28px; } .pcard .quick{ display:none; }
  .process{ grid-template-columns:1fr 1fr; }
  .form{ padding:22px 18px; } .form .row, .feat{ grid-template-columns:1fr; }
  .scroller{ grid-auto-columns:72%; } .thumbs{ grid-template-columns:repeat(4,1fr); }
  .cta-strip{ padding:28px 22px; }
  .collage .stamp{ width:110px; height:110px; } .collage .stamp b{ font-size:34px; }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } [data-reveal], .split-words .w > span{ opacity:1 !important; transform:none !important; } .hero h1 .ln > span, .hero p.lead, .hero .acts, .hero .kicker, .hero-badges{ opacity:1; transform:none; } }

/* ---------- CMS blocks: content above footer, sections, specs ---------- */
.seo-content{ padding-block:70px; background:var(--white); border-top:1px solid var(--line); }
.seo-prose{ max-width:900px; margin:0 auto; color:#3a4048; font-size:16.5px; line-height:1.8; }
.seo-prose > :first-child{ margin-top:0; }
.seo-prose h1, .seo-prose h2, .seo-prose h3, .seo-prose h4, .seo-prose h5, .seo-prose h6{ color:var(--ink); margin:1.5em 0 .5em; font-family:var(--display); text-transform:uppercase; letter-spacing:.01em; line-height:1.1; }
.seo-prose h1{ font-size:clamp(30px,3.6vw,44px); } .seo-prose h2{ font-size:clamp(26px,3vw,36px); } .seo-prose h3{ font-size:24px; } .seo-prose h4{ font-size:20px; } .seo-prose h5{ font-size:17px; } .seo-prose h6{ font-size:14px; letter-spacing:.12em; color:var(--amber-ink); }
.seo-prose p{ margin:0 0 1.1em; }
.seo-prose ul, .seo-prose ol{ margin:0 0 1.2em; padding-left:1.3em; } .seo-prose li{ margin:.3em 0; } .seo-prose ul li::marker{ color:var(--amber); }
.seo-prose img{ max-width:100%; height:auto; border-radius:12px; display:inline-block; margin:8px 0; }
.seo-prose blockquote{ margin:1.4em 0; padding:14px 20px; border-left:4px solid var(--amber); background:var(--paper); border-radius:0 10px 10px 0; color:var(--ink); }
.seo-prose hr{ border:0; height:1px; background:var(--line); margin:2em 0; }
.seo-prose table, .spec-table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:15px; }
.seo-prose table{ display:block; overflow-x:auto; }
.seo-prose th, .seo-prose td, .spec-table th, .spec-table td{ border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; }
.seo-prose th, .spec-table th{ background:var(--paper); font-weight:700; }
.spec-table{ max-width:860px; background:var(--white); border-radius:12px; overflow:hidden; } .spec-table th{ width:36%; }
.ta-center{ text-align:center; } .ta-right{ text-align:right; } .ta-justify{ text-align:justify; }
.cms-narrow{ max-width:900px; margin:0 auto; }
.cms-sec .prose p{ color:var(--steel); }
.cms-art{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--white); }
.cms-art img{ width:100%; height:auto; transition:transform .8s var(--ease); } .cms-art:hover img{ transform:scale(1.05); }
.cms-gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.cms-gal a{ display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:1; background:var(--white); border:1px solid var(--line); }
.cms-gal img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .cms-gal a:hover img{ transform:scale(1.07); }
.cms-video{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; max-width:980px; margin:0 auto; }
.cms-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.socials{ display:flex; gap:8px; margin-top:6px; }
.socials a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); color:#dfe3e8; transition:background .25s, color .25s, transform .25s; }
.socials a:hover{ background:var(--amber); color:var(--ink); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; }
a.tab{ display:inline-block; }