:root{
  --ink:#060707;
  --panel:#0c0e0e;
  --paper:#f2efe7;
  --muted:#9b9d98;
  --gold:#d7bb66;
  --hot:#ff6a24;
  --line:rgba(255,255,255,.13);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--paper);
  font-family:Arial,"Helvetica Neue",sans-serif;
  cursor:none;
}
button,a{font:inherit;color:inherit}
button{cursor:none}
a{text-decoration:none}
.page-grain{
  position:fixed;
  z-index:100;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.73' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fire-cursor{
  position:fixed;
  z-index:2000;
  left:0;
  top:0;
  width:28px;
  height:32px;
  pointer-events:none;
  transform:translate(-50%,-68%);
  filter:drop-shadow(0 0 4px #fff0a0) drop-shadow(0 0 12px #ff5a17);
}
.fire-cursor:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 77%,#fff6ac 0 14%,#ffc127 15% 34%,#ff6b1e 35% 58%,#dd3518 59% 69%,transparent 70%);
  clip-path:polygon(50% 0,65% 25%,83% 44%,88% 66%,72% 91%,50% 100%,26% 91%,11% 65%,17% 42%,36% 24%);
  animation:flicker .38s infinite alternate;
}
.fire-cursor:after{
  content:"";
  position:absolute;
  left:10px;
  top:13px;
  width:8px;
  height:11px;
  border-radius:60% 40% 60% 40%;
  background:#fff7b5;
  transform:rotate(-18deg);
}
.ember{
  position:fixed;
  z-index:1999;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ff8e2c;
  box-shadow:0 0 8px #ff5a17;
  pointer-events:none;
  animation:emberOut .65s forwards;
}
@keyframes flicker{to{transform:scaleX(.77) translateY(2px) rotate(2deg)}}
@keyframes emberOut{to{translate:var(--dx) var(--dy);scale:0;opacity:0}}

.product-header{
  position:fixed;
  z-index:999;
  top:0;
  left:0;
  right:0;
  height:88px;
  padding:0 4.2vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(215,187,102,.18);
  background:linear-gradient(180deg,rgba(4,5,5,.75),rgba(4,5,5,.18));
  transition:background .35s,backdrop-filter .35s,box-shadow .35s;
}
.product-header.is-scrolled{
  background:rgba(5,7,7,.72);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 14px 45px rgba(0,0,0,.3);
}
.brand{height:100%;display:grid;place-items:center}
.brand img{width:auto;height:64px;max-width:112px;object-fit:contain}
.product-header nav{display:flex;gap:32px}
.product-header nav a{
  position:relative;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:#c5c6c1;
  text-transform:uppercase;
}
.product-header nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-12px;
  height:1px;
  background:var(--gold);
  transition:right .35s var(--ease);
}
.product-header nav a:hover:after,.product-header nav a.active:after{right:0}
.product-header nav a.active{color:var(--paper)}
.header-arrow{
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:19px;
  transition:.3s;
}
.header-arrow:hover{border-color:var(--gold);transform:rotate(45deg)}

main{
  background-image:
    linear-gradient(rgba(215,187,102,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(215,187,102,.055) 1px,transparent 1px);
  background-size:112px 112px;
}
.catalog-hero{
  min-height:430px;
  padding:160px 4.2vw 65px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.catalog-hero:after{
  content:"";
  position:absolute;
  width:52vw;
  height:52vw;
  right:-14vw;
  top:-28vw;
  border:1px dashed rgba(215,187,102,.2);
  border-radius:50%;
  box-shadow:0 0 120px rgba(120,67,23,.12);
}
.hero-index{
  color:var(--gold);
  font:10px/1.2 monospace;
  letter-spacing:.2em;
}
.catalog-heading{
  position:relative;
  z-index:1;
  margin-top:24px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);
  align-items:end;
  gap:7vw;
}
.catalog-heading h1{
  margin:0;
  max-width:930px;
  font-size:clamp(4.3rem,8.8vw,9.4rem);
  line-height:.75;
  letter-spacing:-.09em;
}
.catalog-heading h1 span{
  color:transparent;
  -webkit-text-stroke:1px var(--gold);
}
.heading-copy{padding-bottom:8px}
.heading-copy p{
  max-width:480px;
  margin:0;
  color:#b7b8b2;
  font-size:14px;
  line-height:1.75;
}
.heading-copy span{
  display:block;
  margin-top:26px;
  color:var(--gold);
  font:9px/1.5 monospace;
  letter-spacing:.15em;
}

.catalog-filter{padding:70px 4.2vw 86px}
.filter-heading,.results-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
}
.filter-heading>div{display:flex;align-items:center;gap:18px}
.filter-heading span,.sub-filter-label span{
  color:var(--gold);
  font:10px monospace;
}
.filter-heading h2{
  margin:0;
  font-size:13px;
  letter-spacing:.16em;
}
.filter-heading p{
  margin:0;
  max-width:360px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.major-grid{
  margin-top:25px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.major-card{
  --scene:url("../assets/Before_burning.png");
  min-height:205px;
  padding:22px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:end;
  gap:20px;
  text-align:left;
  border:1px solid var(--line);
  background:#111;
  color:var(--paper);
  appearance:none;
  transition:border-color .45s,transform .45s var(--ease);
}
.major-card:before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    linear-gradient(0deg,rgba(5,6,6,.96),rgba(5,6,6,.18) 75%),
    linear-gradient(90deg,rgba(5,6,6,.6),transparent),
    var(--scene) center 27%/cover no-repeat;
  filter:grayscale(.4) brightness(.52);
  transform:scale(1.02);
  transition:filter .55s,transform .8s var(--ease);
}
.major-card:after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid transparent;
  transition:border-color .4s;
}
.major-card>*{position:relative;z-index:1}
.major-card:hover,.major-card.is-active{border-color:rgba(215,187,102,.72)}
.major-card:hover:before,.major-card.is-active:before{filter:grayscale(0) brightness(.8);transform:scale(1.09)}
.major-card.is-active:after{border-color:rgba(215,187,102,.34)}
.major-card:active{transform:scale(.985)}
.field-fire{--scene:url("../assets/solutions/industry-fire-emergency.webp")}
.field-industrial{--scene:url("../assets/solutions/industry-heavy-manufacturing.webp")}
.field-specialized{--scene:url("../assets/solutions/industry-aviation-defence.webp")}
.major-number{align-self:start;color:var(--gold);font:11px monospace}
.major-copy b{
  display:block;
  font-size:clamp(1.2rem,2vw,2.15rem);
  line-height:.95;
  letter-spacing:-.055em;
}
.major-copy small{
  display:block;
  margin-top:12px;
  color:#aaa;
  font:11px/1.4 monospace;
  letter-spacing:.13em;
}
.major-card i{color:var(--gold);font-style:normal;font-size:20px}

.sub-filter{
  margin-top:34px;
  padding-top:21px;
  border-top:1px solid var(--line);
}
.sub-filter-label{display:flex;gap:17px;align-items:center}
.sub-filter-label b{font-size:10px;letter-spacing:.16em}
.sub-grid{
  margin-top:17px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}
.sub-card{
  --sub-scene:url("../assets/Before_burning.png");
  min-height:96px;
  padding:13px 14px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  background:#101111;
  color:#d9d9d2;
  text-align:left;
  appearance:none;
  transition:border-color .35s,transform .35s var(--ease);
  animation:subEnter .55s both;
  animation-delay:calc(var(--i) * 45ms);
}
.sub-card:before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image:
    linear-gradient(0deg,rgba(5,6,6,.94),rgba(5,6,6,.25)),
    var(--sub-scene);
  background-position:center,center;
  background-size:auto,cover;
  background-repeat:no-repeat;
  filter:grayscale(.6) brightness(.5);
  transition:filter .45s,transform .65s var(--ease);
}
.sub-card>*{position:relative;z-index:1}
.sub-card b{font-size:12px;line-height:1.35;letter-spacing:.045em}
.sub-card span{color:var(--gold);font:10px monospace}
.sub-card:hover,.sub-card.is-active{border-color:var(--gold)}
.sub-card:hover:before,.sub-card.is-active:before{filter:grayscale(0) brightness(.8);transform:scale(1.08)}
.sub-card:active{transform:scale(.98)}
@keyframes subEnter{from{opacity:0;transform:translateY(13px)}}

.product-results{
  padding:88px 4.2vw 95px;
  position:relative;
  background:rgba(4,5,5,.84);
  border-top:1px solid var(--line);
}
.results-heading span{
  color:var(--gold);
  font:9px monospace;
  letter-spacing:.17em;
}
.results-heading h2{
  margin:15px 0 0;
  font-size:clamp(3.2rem,6.1vw,7rem);
  line-height:.82;
  letter-spacing:-.08em;
}
.result-meta{max-width:350px;text-align:right}
.result-meta b{
  display:block;
  color:var(--gold);
  font:11px monospace;
  letter-spacing:.17em;
}
.result-meta p{
  margin:18px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}
.product-grid{
  margin-top:50px;
  min-height:720px;
  display:grid;
  grid-template-columns:1.32fr repeat(3,minmax(0,.68fr));
  grid-template-rows:repeat(2,minmax(330px,1fr));
  grid-auto-rows:330px;
  gap:8px;
  transition:opacity .24s,transform .24s;
}
.product-grid.is-changing{opacity:0;transform:translateY(18px)}
.product-card{
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 55% 44%,rgba(114,75,31,.25),transparent 43%),
    linear-gradient(145deg,#121413,#080909 72%);
  color:var(--paper);
  isolation:isolate;
  transition:border-color .4s,transform .5s var(--ease);
}
.product-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(215,187,102,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(215,187,102,.065) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.55;
}
.product-card:after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(3,4,4,.98),transparent 46%);
}
.product-card:hover{
  z-index:2;
  border-color:rgba(215,187,102,.86);
  transform:translateY(-5px);
}
.product-card.featured{grid-row:1 / span 2}
.product-media{
  position:absolute;
  inset:26px 12px 108px;
  display:grid;
  place-items:center;
}
.product-media:before{
  content:"";
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border:1px dashed rgba(215,187,102,.22);
  border-radius:50%;
  animation:rotate 22s linear infinite;
}
.product-media img{
  position:relative;
  z-index:1;
  width:auto;
  height:95%;
  max-width:92%;
  object-fit:contain;
  filter:saturate(.9) contrast(1.06) brightness(.98) drop-shadow(0 22px 35px rgba(0,0,0,.65));
  transform:translateY(3%) scale(.94);
  transition:transform .7s var(--ease),filter .7s;
}
.product-card:hover .product-media img{transform:translateY(-1%) scale(1.02);filter:saturate(.9) contrast(1.06) brightness(.98) drop-shadow(0 30px 45px rgba(0,0,0,.8))}
.product-card.featured .product-media{inset:28px 0 30px 42%}
.product-card.featured .product-media img{height:100%;max-width:100%}
.product-index{
  position:absolute;
  z-index:4;
  left:20px;
  top:18px;
  color:var(--gold);
  font:9px monospace;
}
.product-info{
  position:absolute;
  z-index:4;
  left:20px;
  right:18px;
  bottom:18px;
}
.product-info small{
  color:var(--gold);
  font:12px/1.2 monospace;
  letter-spacing:.1em;
}
.product-info h3{
  margin:9px 0 11px;
  font-size:clamp(1.22rem,1.55vw,1.7rem);
  line-height:.96;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.product-tags{display:flex;gap:5px;flex-wrap:wrap}
.product-tags span{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.22);
  color:#c7c7c0;
  font:10px/1 monospace;
  letter-spacing:.07em;
}
.swatches{display:flex;gap:5px;margin-top:10px}
.swatches i{
  width:9px;
  height:9px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  background:var(--c);
}
.view-product{
  position:absolute;
  z-index:4;
  right:18px;
  bottom:20px;
  color:var(--gold);
  font:11px/1.2 monospace;
  letter-spacing:.11em;
  opacity:0;
  transform:translateX(-8px);
  transition:.4s var(--ease);
}
.product-card:hover .view-product{opacity:1;transform:none}
.product-card.featured .product-info{left:32px;right:52%;bottom:36px}
.product-card.featured .product-info h3{
  margin:12px 0 15px;
  font-size:clamp(2rem,3.4vw,4.2rem);
  line-height:.86;
}
.product-card.featured .view-product{left:32px;right:auto;bottom:22px;opacity:1;transform:none}
.product-card.featured .view-product{font-size:13px;font-weight:700}
@keyframes rotate{to{transform:rotate(360deg)}}

.product-grid.accessory-mode{
  min-height:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,340px);
}
.accessory-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(150deg,#151716,#080909 68%);
  color:var(--paper);
  transition:.45s var(--ease);
}
.accessory-card:hover{border-color:var(--gold);transform:translateY(-5px)}
.accessory-card:first-child{grid-column:span 2}
.accessory-visual{
  position:absolute;
  inset:28px 20px 92px;
  display:grid;
  place-items:center;
  color:rgba(215,187,102,.84);
}
.accessory-visual svg{
  width:min(65%,220px);
  height:min(75%,190px);
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  filter:drop-shadow(0 0 18px rgba(215,187,102,.13));
  transition:transform .55s var(--ease),color .4s;
}
.accessory-card:hover svg{transform:scale(1.08) translateY(-4px);color:#f0d47e}
.accessory-info{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
}
.accessory-info small{color:var(--gold);font:8px monospace}
.accessory-info h3{margin:8px 0 0;font-size:1.25rem;letter-spacing:-.04em}

.results-footer{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#767974;
  font:8px monospace;
  letter-spacing:.14em;
}
.results-footer b{color:var(--gold);font-weight:500}
footer{
  padding:31px 4.2vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
  background:#050606;
  color:#858882;
  font:8px monospace;
  letter-spacing:.14em;
}
footer img{width:84px}
footer span:nth-child(2){text-align:center}
footer span:last-child{text-align:right}

@media(max-width:1050px){
  .catalog-heading{grid-template-columns:1fr;gap:30px}
  .major-grid{grid-template-columns:1fr}
  .major-card{min-height:150px}
  .sub-grid{grid-template-columns:repeat(3,1fr)}
  .product-grid{grid-template-columns:1.1fr repeat(2,1fr);grid-template-rows:repeat(3,310px);grid-auto-rows:310px}
  .product-card.featured{grid-row:1 / span 2}
  .product-grid.accessory-mode{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  body{cursor:auto}
  button{cursor:pointer}
  .fire-cursor,.ember{display:none}
  .product-header{height:68px;padding:0 20px}
  .brand img{height:49px;max-width:90px}
  .product-header nav{display:none}
  .header-arrow{width:38px;height:38px}
  .catalog-hero{min-height:390px;padding:125px 20px 55px}
  .catalog-heading h1{font-size:clamp(3.6rem,18vw,6.2rem)}
  .catalog-filter,.product-results{padding-left:20px;padding-right:20px}
  .filter-heading,.results-heading{display:grid;gap:22px}
  .filter-heading p{max-width:none}
  .major-grid{grid-template-columns:1fr}
  .major-card{min-height:135px}
  .sub-grid{grid-template-columns:repeat(2,1fr)}
  .sub-card{min-height:88px}
  .result-meta{text-align:left}
  .product-grid{min-height:auto;grid-template-columns:repeat(2,1fr);grid-template-rows:520px repeat(3,300px);grid-auto-rows:300px}
  .product-card.featured{grid-column:1 / -1;grid-row:auto}
  .product-card.featured .product-media{inset:22px 0 112px 34%}
  .product-card.featured .product-info{right:45%}
  .product-grid.accessory-mode{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,280px)}
  .accessory-card:first-child{grid-column:span 2}
  footer{grid-template-columns:1fr;text-align:left}
  footer span:nth-child(2),footer span:last-child{text-align:left}
}
@media(max-width:480px){
  .sub-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr;grid-template-rows:480px repeat(6,390px);grid-auto-rows:390px}
  .product-card.featured{grid-column:auto}
  .product-card.featured .product-media{inset:20px 0 100px 25%}
  .product-card.featured .product-info{right:38%}
  .product-grid.accessory-mode{grid-template-columns:1fr;grid-template-rows:repeat(7,300px)}
  .accessory-card:first-child{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .ember{display:none}
  .product-media:before,.fire-cursor:before{animation:none!important}
}

/* Product layout: exactly one featured card, followed by equal regular cards. */
.product-grid{
  display:block;
  min-height:0;
}
.product-grid>.product-card.featured,
.product-grid>.accessory-card.featured{
  display:block;
  width:min(100%,980px);
  height:610px;
  margin-inline:auto;
}
.regular-grid{
  width:100%;
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.regular-grid>.product-card{
  flex:0 1 calc(25% - 6px);
  width:calc(25% - 6px);
  height:360px;
}
.product-card.featured{
  grid-row:auto;
  background:
    radial-gradient(circle at 50% 42%,rgba(112,73,31,.22),transparent 42%),
    linear-gradient(145deg,#121413,#080909 72%);
}
.product-card.featured .product-media{
  inset:25px 21% 122px;
  z-index:2;
}
.product-card.featured .product-media img{
  height:100%;
  max-width:100%;
  transform:translateY(2%) scale(.96);
}
.product-card.featured:hover .product-media img{
  transform:translateY(-1%) scale(1.01);
}
.featured-footer{
  position:absolute;
  z-index:5;
  left:30px;
  right:30px;
  bottom:26px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
}
.product-card.featured .product-info{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  max-width:70%;
}
.product-card.featured .product-info h3{
  margin:9px 0 12px;
  font-size:clamp(2rem,3.1vw,3.8rem);
}
.featured-actions{
  flex:none;
  min-width:190px;
  padding-left:24px;
  display:grid;
  justify-items:end;
  gap:15px;
  border-left:1px solid rgba(215,187,102,.25);
}
.featured-actions .swatches{
  margin:0;
  gap:9px;
}
.featured-actions .swatches i{
  width:16px;
  height:16px;
  box-shadow:0 0 0 3px rgba(255,255,255,.045);
}
.product-card.featured .view-product{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  padding:12px 15px;
  border:1px solid rgba(215,187,102,.55);
  background:rgba(4,5,5,.6);
  font-size:14px;
  white-space:nowrap;
  opacity:1;
  transform:none;
}
.view-product b{font-size:1.25em;font-weight:400}

/* The environment motion stays behind the garment and never changes its colour. */
.featured-effect{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.featured-effect:before,
.featured-effect:after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.fx-flame .featured-effect:before,
.fx-embers .featured-effect:before,
.fx-radiant .featured-effect:before{
  left:4%;
  right:4%;
  bottom:-26%;
  height:64%;
  background:
    radial-gradient(ellipse at 12% 100%,rgba(255,73,8,.85),transparent 42%),
    radial-gradient(ellipse at 38% 100%,rgba(255,180,34,.58),transparent 40%),
    radial-gradient(ellipse at 70% 100%,rgba(255,87,7,.72),transparent 43%),
    radial-gradient(ellipse at 92% 100%,rgba(255,193,52,.45),transparent 37%);
  filter:blur(15px);
  opacity:.6;
  animation:flameSurge 1.7s ease-in-out infinite alternate;
}
.fx-embers .featured-effect:after,
.fx-static .featured-effect:after,
.fx-molten .featured-effect:after{
  inset:8% 4% 24%;
  background-image:
    radial-gradient(circle,#ffb13b 0 1px,transparent 2px),
    radial-gradient(circle,#ff6b1e 0 1px,transparent 2px);
  background-size:47px 61px,73px 89px;
  opacity:.42;
  animation:particlesRise 5s linear infinite;
}
.fx-radiant .featured-effect:after{
  inset:4% 8% 17%;
  border:1px solid rgba(255,151,32,.28);
  border-radius:50%;
  box-shadow:0 0 42px rgba(255,83,12,.2),inset 0 0 42px rgba(255,154,37,.1);
  animation:radiantPulse 2.4s ease-in-out infinite;
}
.fx-lightning .featured-effect:before{
  inset:12% 4% 25%;
  background:
    linear-gradient(112deg,transparent 0 41%,rgba(100,190,255,.85) 41.5% 42%,transparent 42.5% 100%),
    linear-gradient(70deg,transparent 0 58%,rgba(160,221,255,.7) 58.5% 59%,transparent 59.5% 100%);
  filter:drop-shadow(0 0 9px #2f9fff);
  opacity:.55;
  animation:lightningFlash 3.1s steps(1) infinite;
}
.fx-molten .featured-effect:before{
  right:-12%;
  bottom:3%;
  width:56%;
  height:42%;
  border-radius:50%;
  background:radial-gradient(ellipse,#fff0a1 0 5%,#ff9a12 18%,#eb4c08 40%,transparent 70%);
  filter:blur(12px);
  opacity:.6;
  animation:moltenFlow 2.8s ease-in-out infinite alternate;
}
.fx-airflow .featured-effect:before,
.fx-speed .featured-effect:before,
.fx-data .featured-effect:before,
.fx-search .featured-effect:before,
.fx-scan .featured-effect:before,
.fx-prototype .featured-effect:before{
  inset:9% 5% 24%;
  background:
    repeating-linear-gradient(168deg,transparent 0 32px,rgba(92,193,255,.2) 33px 34px,transparent 35px 62px);
  opacity:.42;
  mask-image:linear-gradient(90deg,transparent,#000 18% 82%,transparent);
  animation:signalSweep 4.2s linear infinite;
}
.fx-speed .featured-effect:before{transform:skewX(-14deg);opacity:.28}
.fx-data .featured-effect:after,
.fx-prototype .featured-effect:after{
  inset:12% 12% 29%;
  border:1px solid rgba(73,185,255,.24);
  background-image:linear-gradient(rgba(73,185,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(73,185,255,.1) 1px,transparent 1px);
  background-size:36px 36px;
  animation:radiantPulse 2.8s ease-in-out infinite;
}
@keyframes flameSurge{to{transform:translateY(-8%) scaleX(1.06);filter:blur(22px);opacity:.82}}
@keyframes particlesRise{to{background-position:17px -180px,-21px -230px}}
@keyframes radiantPulse{50%{transform:scale(1.05);opacity:.82}}
@keyframes lightningFlash{0%,7%,11%,100%{opacity:.08}8%,10%{opacity:.8}}
@keyframes moltenFlow{to{transform:translate(-12%,-8%) scale(1.08)}}
@keyframes signalSweep{to{background-position:220px 0}}

/* Accessories follow the same hierarchy: one feature, then equal cells. */
.product-grid.accessory-mode{
  display:block;
  min-height:0;
}
.product-grid>.accessory-card.featured{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(150deg,#151716,#080909 68%);
}
.accessory-card.featured .accessory-visual{inset:38px 25% 112px}
.accessory-card.featured .accessory-visual svg{width:min(62%,320px);height:min(78%,300px)}
.accessory-card.featured .accessory-info{left:30px;bottom:30px}
.accessory-card.featured .accessory-info small{font-size:12px}
.accessory-card.featured .accessory-info h3{font-size:clamp(2rem,3vw,3.6rem)}
.accessory-card.featured .view-product{
  opacity:1;
  transform:none;
  bottom:30px;
  padding:12px 15px;
  border:1px solid rgba(215,187,102,.55);
}
.accessory-regular>.accessory-card{
  flex:0 1 calc(25% - 6px);
  width:calc(25% - 6px);
  height:340px;
}

@media(max-width:1050px){
  .regular-grid>.product-card,
  .accessory-regular>.accessory-card{flex-basis:calc(33.333% - 6px);width:calc(33.333% - 6px)}
  .product-grid>.product-card.featured,
  .product-grid>.accessory-card.featured{height:570px}
}
@media(max-width:760px){
  .product-grid>.product-card.featured,
  .product-grid>.accessory-card.featured{height:520px}
  .product-card.featured .product-media{inset:22px 12% 155px}
  .featured-footer{left:20px;right:20px;bottom:20px}
  .product-card.featured .product-info{max-width:58%}
  .product-card.featured .product-info h3{font-size:clamp(1.7rem,6vw,2.6rem)}
  .featured-actions{min-width:165px;padding-left:16px}
  .product-card.featured .view-product{font-size:12px}
  .regular-grid>.product-card,
  .accessory-regular>.accessory-card{flex-basis:calc(50% - 4px);width:calc(50% - 4px)}
}
@media(max-width:480px){
  .product-grid>.product-card.featured,
  .product-grid>.accessory-card.featured{height:520px}
  .product-card.featured .product-media{inset:22px 6% 190px}
  .featured-footer{display:grid;gap:15px}
  .product-card.featured .product-info{max-width:100%}
  .featured-actions{min-width:0;padding:13px 0 0;border-left:0;border-top:1px solid rgba(215,187,102,.25);display:flex;align-items:center;justify-content:space-between}
  .regular-grid>.product-card,
  .accessory-regular>.accessory-card{flex-basis:100%;width:100%;height:390px}
}
@media(prefers-reduced-motion:reduce){
  .featured-effect:before,.featured-effect:after{animation:none!important}
}

/* Commercial-use OFL typefaces are bundled locally for offline/file:// viewing. */
@font-face{
  font-family:"Outfit";
  src:url("../assets/fonts/Outfit-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("../assets/fonts/Outfit-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("../assets/fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("../assets/fonts/GeistMono-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
body{font-family:"Outfit","Segoe UI",Arial,sans-serif;font-size:14px}
.hero-index,
.heading-copy span,
.filter-heading span,
.sub-filter-label span,
.major-number,
.major-copy small,
.sub-filter-label b,
.sub-card span,
.results-heading span,
.result-meta b,
.product-index,
.product-info small,
.product-tags span,
.view-product,
.accessory-info small,
.results-footer,
footer{
  font-family:"Geist Mono","Cascadia Mono",monospace;
  font-size:14px;
}
.product-header nav a,
.filter-heading h2,
.filter-heading p,
.sub-card b,
.result-meta p,
.heading-copy p{font-size:14px}
small,
.hero-index,
.heading-copy span,
.filter-heading span,
.filter-heading h2,
.filter-heading p,
.major-number,
.major-copy small,
.sub-filter-label span,
.sub-filter-label b,
.sub-card b,
.sub-card span,
.results-heading span,
.result-meta b,
.result-meta p,
.product-index,
.product-info small,
.product-tags span,
.view-product,
.accessory-info small,
.results-footer,
footer{font-size:14px!important}
.major-copy small{line-height:1.45}
.product-tags span{padding:7px 9px}
.accessory-info small{font-size:14px}

/* Desktop mosaic: the feature occupies exactly two regular cells on the left. */
.product-grid,
.product-grid.accessory-mode{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:none;
  grid-auto-rows:420px;
  align-items:stretch;
  gap:8px;
}
.regular-grid,
.accessory-regular{display:contents}
.product-grid>.product-card.featured,
.product-grid>.accessory-card.featured{
  grid-column:span 2;
  width:auto;
  height:auto;
  min-height:0;
  margin:0;
}
.regular-grid>.product-card,
.accessory-regular>.accessory-card{
  width:auto;
  height:auto;
  min-height:0;
}
.accessory-regular>.accessory-card:first-child{grid-column:span 1}
.product-card.featured .product-media{inset:18px 17% 148px}
.product-card.featured .product-info{max-width:58%}
.product-card.featured .product-info h3{
  font-size:clamp(1.75rem,2.35vw,2.8rem);
  line-height:.9;
}
.featured-footer{left:22px;right:22px;bottom:20px;gap:18px}
.featured-actions{min-width:162px;padding-left:16px;gap:13px}
.product-card.featured .view-product{font-size:14px;padding:11px 12px}
.featured-actions .swatches i{width:18px;height:18px}

@media(max-width:1280px){
  .product-grid,
  .product-grid.accessory-mode{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:410px}
}
@media(max-width:900px){
  .product-grid,
  .product-grid.accessory-mode{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:400px}
}
@media(max-width:760px){
  .product-grid,
  .product-grid.accessory-mode{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:410px}
  .product-grid>.product-card.featured,
  .product-grid>.accessory-card.featured{grid-column:span 2}
  .product-card.featured .product-media{inset:20px 12% 160px}
}
@media(max-width:480px){
  .product-grid,
  .product-grid.accessory-mode{grid-template-columns:1fr;grid-auto-rows:420px}
  .product-grid>.product-card.featured,
  .product-grid>.accessory-card.featured{grid-column:span 1;height:540px}
  .product-card.featured .product-media{inset:20px 8% 190px}
}