/* =====================================================
   ROOT
===================================================== */

:root{

  --ink:#121212;
  --ink-soft:#1b1b1b;
  --ink-line:#2c2c2c;

  --paper:#f6f4f1;
  --paper-alt:#ffffff;

  --red:#d81c26;
  --red-deep:#7a0f16;
  --red-glow:#ff4d4d;

  --text-dark:#181614;
  --text-muted:#6b6560;

  --on-dark:#f2efe9;
  --on-dark-muted:#a39d97;

  --radius:14px;
  --maxw:1180px;

}


/* =====================================================
   GLOBAL
===================================================== */

*{

  box-sizing:border-box;

  margin:0;

  padding:0;

}

html{

  scroll-behavior:smooth;

}

body{

  font-family:'Inter',sans-serif;

  background:var(--paper);

  color:var(--text-dark);

  line-height:1.6;

  -webkit-font-smoothing:antialiased;

  overflow-x:hidden;

}

h1,
h2,
h3,
h4{

  font-family:'Chakra Petch',sans-serif;

  font-weight:700;

  letter-spacing:.2px;

}

.script{

  font-family:'Caveat',cursive;

}

a{

  color:inherit;

  text-decoration:none;

}

img{

  max-width:100%;

  display:block;

}

.wrap{

  max-width:var(--maxw);

  margin:0 auto;

  padding:0 28px;

}


/* =====================================================
   BUTTONS
===================================================== */

.btn{

  display:inline-flex;

  align-items:center;

  gap:8px;

  font-family:'Chakra Petch',sans-serif;

  font-weight:600;

  font-size:14.5px;

  letter-spacing:.4px;

  padding:14px 28px;

  border-radius:8px;

  border:1.5px solid transparent;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

}

.btn:active{

  transform:scale(.97);

}

.btn-primary{

  background:
    linear-gradient(
      135deg,
      var(--red) 0%,
      var(--red-deep) 100%
    );

  color:#fff;

  box-shadow:
    0 8px 24px -8px rgba(216,28,38,.55);

}

.btn-primary:hover{

  box-shadow:
    0 12px 32px -8px rgba(216,28,38,.7);

  transform:translateY(-2px);

}

.btn-ghost{

  background:transparent;

  border-color:rgba(242,239,233,.28);

  color:var(--on-dark);

}

.btn-ghost:hover{

  border-color:var(--red-glow);

  color:#fff;

}

.btn-dark{

  background:var(--ink);

  color:#fff;

}

.btn-dark:hover{

  background:var(--red-deep);

}

section{

  position:relative;

}


/* =====================================================
   REVEAL
===================================================== */

.reveal{

  opacity:0;

  transform:translateY(22px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}

.reveal.in{

  opacity:1;

  transform:translateY(0);

}


/* =====================================================
   NAVIGATION
===================================================== */

header{

  position:fixed;

  top:0;

  left:0;

  right:0;

  z-index:200;

  background:rgba(18,18,18,.72);

  backdrop-filter:blur(14px);

  border-bottom:
    1px solid rgba(255,255,255,.06);

  transition:background .3s ease;

}

.nav{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:14px 28px;

  max-width:var(--maxw);

  margin:0 auto;

}

.brand{

  display:flex;

  align-items:center;

  gap:10px;

}

.brand-mark{

  width:32px;

  height:auto;

  flex-shrink:0;

}

.brand-word{

  font-family:'Chakra Petch',sans-serif;

  font-weight:700;

  font-size:19px;

  color:#fff;

  letter-spacing:.5px;

}

.brand-word span{

  color:var(--red-glow);

}

.nav-links{

  display:flex;

  align-items:center;

  gap:32px;

}

.nav-links a{

  font-family:'Chakra Petch',sans-serif;

  font-size:13.5px;

  font-weight:500;

  letter-spacing:.6px;

  color:var(--on-dark-muted);

  text-transform:uppercase;

  transition:color .2s;

}

.nav-links a:hover{

  color:#fff;

}

.nav-cta{

  display:flex;

  align-items:center;

  gap:18px;

}

.nav-toggle{

  display:none;

  flex-direction:column;

  gap:5px;

  background:none;

  border:none;

  cursor:pointer;

  padding:6px;

}

.nav-toggle span{

  width:22px;

  height:2px;

  background:#fff;

  display:block;

}


/* =====================================================
   HERO
===================================================== */

.hero{

  background:
    radial-gradient(
      ellipse at 70% 20%,
      #1c1414 0%,
      var(--ink) 55%
    );

  color:var(--on-dark);

  min-height:100svh;

  display:flex;

  align-items:center;

  padding:150px 0 90px;

  overflow:hidden;

  position:relative;

}


/* =====================================================
   SPARK ANIMATION
===================================================== */

.spark-burst{

  position:absolute;

  top:50%;

  right:-8%;

  transform:
    translateY(-50%)
    rotate(0deg);

  width:640px;

  height:auto;

  max-width:70vw;

  opacity:.28;

  pointer-events:none;

  filter:
    drop-shadow(0 0 30px rgba(216,28,38,.35))
    drop-shadow(0 0 100px rgba(216,28,38,.15));

  animation:
    sparkLogoRotate 35s linear infinite,
    sparkLogoPulse 4s ease-in-out infinite;

}

@keyframes sparkLogoRotate{

  from{

    transform:
      translateY(-50%)
      rotate(0deg);

  }

  to{

    transform:
      translateY(-50%)
      rotate(360deg);

  }

}

@keyframes sparkLogoPulse{

  0%,100%{

    opacity:.20;

    filter:
      drop-shadow(0 0 20px rgba(216,28,38,.25))
      drop-shadow(0 0 70px rgba(216,28,38,.1));

  }

  50%{

    opacity:.42;

    filter:
      drop-shadow(0 0 45px rgba(255,77,77,.6))
      drop-shadow(0 0 120px rgba(216,28,38,.3));

  }

}


/* =====================================================
   PARTICLES
===================================================== */

.spark-particles{

  position:absolute;

  inset:0;

  pointer-events:none;

  z-index:1;

  overflow:hidden;

}

.spark-dot{

  position:absolute;

  width:5px;

  height:5px;

  border-radius:50%;

  background:#ff3333;

  box-shadow:
    0 0 7px #ff3333,
    0 0 16px rgba(255,40,40,.8),
    0 0 30px rgba(216,28,38,.35);

  opacity:0;

  animation:
    particleFloat var(--duration)
    ease-in-out infinite;

  animation-delay:var(--delay);

}

.spark-dot.big{

  width:8px;

  height:8px;

  box-shadow:
    0 0 10px #ff4d4d,
    0 0 25px #d81c26,
    0 0 45px rgba(216,28,38,.5);

}

@keyframes particleFloat{

  0%{

    opacity:0;

    transform:
      translate3d(
        var(--x-start),
        var(--y-start),
        0
      )
      scale(.2);

  }

  15%{

    opacity:.9;

  }

  50%{

    opacity:1;

    transform:
      translate3d(
        var(--x-mid),
        var(--y-mid),
        0
      )
      scale(1);

  }

  80%{

    opacity:.6;

  }

  100%{

    opacity:0;

    transform:
      translate3d(
        var(--x-end),
        var(--y-end),
        0
      )
      scale(.1);

  }

}


/* =====================================================
   ORBITS
===================================================== */

.spark-orbit{

  position:absolute;

  top:50%;

  right:10%;

  width:480px;

  height:480px;

  transform:
    translate(50%,-50%);

  border:
    1px solid rgba(216,28,38,.12);

  border-radius:50%;

  pointer-events:none;

  z-index:1;

  animation:
    orbitRotate 25s linear infinite;

}

.spark-orbit::before{

  content:"";

  position:absolute;

  width:7px;

  height:7px;

  border-radius:50%;

  background:#ff3d3d;

  box-shadow:
    0 0 10px #ff3d3d,
    0 0 25px #d81c26;

  top:-3px;

  left:50%;

}

.spark-orbit::after{

  content:"";

  position:absolute;

  width:4px;

  height:4px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 10px #fff,
    0 0 25px #ff3333;

  bottom:30px;

  right:45px;

}

@keyframes orbitRotate{

  to{

    transform:
      translate(50%,-50%)
      rotate(360deg);

  }

}

.spark-orbit.two{

  width:360px;

  height:360px;

  right:14%;

  border-color:
    rgba(255,77,77,.08);

  animation:
    orbitRotateReverse 18s linear infinite;

}

.spark-orbit.two::before{

  width:5px;

  height:5px;

  top:auto;

  bottom:-2px;

}

@keyframes orbitRotateReverse{

  to{

    transform:
      translate(50%,-50%)
      rotate(-360deg);

  }

}


/* =====================================================
   NETWORK
===================================================== */

.spark-network{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  pointer-events:none;

  z-index:0;

  opacity:.6;

}

.spark-network line{

  stroke:#4b2225;

  stroke-width:1;

  stroke-dasharray:5 12;

  animation:
    networkFlow 5s linear infinite;

}

@keyframes networkFlow{

  to{

    stroke-dashoffset:-100;

  }

}

.spark-network circle{

  fill:#d81c26;

  filter:
    drop-shadow(0 0 6px #d81c26);

  animation:
    networkPulse 2.5s ease-in-out infinite;

}

@keyframes networkPulse{

  0%,100%{

    opacity:.25;

    r:2;

  }

  50%{

    opacity:1;

    r:4;

  }

}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-inner{

  position:relative;

  z-index:5;

  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:40px;

  align-items:center;

}

.kicker-tag{

  font-family:'Chakra Petch',sans-serif;

  font-size:12.5px;

  font-weight:600;

  letter-spacing:3px;

  text-transform:uppercase;

  color:var(--red-glow);

  margin-bottom:22px;

  display:flex;

  align-items:center;

  gap:10px;

}

.kicker-tag .dot{

  width:7px;

  height:7px;

  border-radius:50%;

  background:var(--red-glow);

  box-shadow:
    0 0 12px var(--red-glow),
    0 0 25px var(--red);

  animation:
    pulse 2s ease-in-out infinite;

}

@keyframes pulse{

  0%,100%{

    opacity:1;

    transform:scale(1);

  }

  50%{

    opacity:.35;

    transform:scale(.65);

  }

}

.hero h1{

  font-size:
    clamp(38px,5.4vw,64px);

  line-height:1.04;

  letter-spacing:-.5px;

  margin-bottom:22px;

}

.hero h1 em{

  font-style:normal;

  background:
    linear-gradient(
      100deg,
      var(--red-glow),
      var(--red) 60%
    );

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

}

.hero-tagline{

  font-family:'Caveat',cursive;

  font-size:30px;

  font-weight:700;

  color:var(--on-dark);

  margin-bottom:22px;

  display:inline-block;

  position:relative;

}

.hero-tagline::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-5px;

  width:100%;

  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      transparent
    );

  transform-origin:left;

  animation:
    lineGrow 3s ease-in-out infinite;

}

@keyframes lineGrow{

  0%,100%{

    transform:scaleX(.3);

    opacity:.4;

  }

  50%{

    transform:scaleX(1);

    opacity:1;

  }

}

.hero p.lede{

  font-size:16.5px;

  color:var(--on-dark-muted);

  max-width:520px;

  margin-bottom:34px;

}

.hero-actions{

  display:flex;

  gap:16px;

  flex-wrap:wrap;

  margin-bottom:56px;

}

.hero-stats{

  display:flex;

  gap:0;

  border-top:
    1px solid var(--ink-line);

  padding-top:26px;

  max-width:520px;

}

.hero-stat{

  flex:1;

  padding-right:20px;

}

.hero-stat .n{

  font-family:'Chakra Petch',sans-serif;

  font-size:26px;

  font-weight:700;

  color:#fff;

}

.hero-stat .l{

  font-size:11.5px;

  color:var(--on-dark-muted);

  text-transform:uppercase;

  letter-spacing:1px;

  margin-top:2px;

}


/* =====================================================
   HERO LOGO
===================================================== */

.hero-mark-panel{

  position:relative;

  z-index:6;

  display:flex;

  align-items:center;

  justify-content:center;

  perspective:1000px;

}

.hero-mark-panel img{

  width:100%;

  max-width:340px;

  height:auto;

  position:relative;

  z-index:5;

  filter:
    drop-shadow(
      0 30px 60px
      rgba(216,28,38,.35)
    );

  animation:
    logoFloat 5s ease-in-out infinite,
    logoGlow 3s ease-in-out infinite;

}

@keyframes logoFloat{

  0%,100%{

    transform:
      translateY(0)
      rotateZ(0deg);

  }

  25%{

    transform:
      translateY(-8px)
      rotateZ(-1deg);

  }

  50%{

    transform:
      translateY(-14px)
      rotateZ(1deg);

  }

  75%{

    transform:
      translateY(-6px)
      rotateZ(-1deg);

  }

}

@keyframes logoGlow{

  0%,100%{

    filter:
      drop-shadow(
        0 25px 50px
        rgba(216,28,38,.25)
      );

  }

  50%{

    filter:
      drop-shadow(
        0 25px 70px
        rgba(255,50,50,.65)
      )
      drop-shadow(
        0 0 35px
        rgba(216,28,38,.35)
      );

  }

}


/* =====================================================
   ABOUT
===================================================== */

.about{

  background:var(--paper-alt);

  padding:110px 0;

}

.about-grid{

  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:64px;

  align-items:start;

}

.eyebrow{

  display:inline-flex;

  align-items:center;

  gap:8px;

  font-family:'Chakra Petch',sans-serif;

  font-weight:600;

  font-size:12.5px;

  letter-spacing:2.5px;

  text-transform:uppercase;

  color:var(--red);

  margin-bottom:14px;

}

.eyebrow::before{

  content:'';

  width:22px;

  height:2px;

  background:var(--red);

  display:inline-block;

}

.about h2{

  font-size:
    clamp(28px,3.4vw,40px);

  line-height:1.15;

  margin-bottom:22px;

  color:var(--text-dark);

}

.about p{

  color:var(--text-muted);

  font-size:15.5px;

  margin-bottom:16px;

  max-width:560px;

}

.mv-card{

  background:var(--ink);

  color:var(--on-dark);

  border-radius:var(--radius);

  padding:34px 30px;

  margin-bottom:20px;

  position:relative;

  overflow:hidden;

}

.mv-card::before{

  content:'';

  position:absolute;

  top:-40px;

  right:-40px;

  width:140px;

  height:140px;

  background:
    radial-gradient(
      circle,
      var(--red) 0%,
      transparent 70%
    );

  opacity:.5;

}

.mv-card h3{

  font-size:13px;

  letter-spacing:2px;

  text-transform:uppercase;

  color:var(--red-glow);

  margin-bottom:12px;

}

.mv-card p{

  color:var(--on-dark-muted);

  font-size:14.5px;

  position:relative;

  z-index:1;

  margin:0;

}


/* =====================================================
   VALUES
===================================================== */

.values{

  background:var(--ink);

  color:var(--on-dark);

  padding:130px 0 110px;

  clip-path:
    polygon(
      0 5%,
      100% 0,
      100% 95%,
      0 100%
    );

  margin:-40px 0;

}

.values-head{

  text-align:center;

  max-width:640px;

  margin:0 auto 60px;

}

.values-head h2{

  font-size:
    clamp(28px,3.4vw,38px);

  color:#fff;

}

.values-head p{

  color:var(--on-dark-muted);

  margin-top:14px;

  font-size:15px;

}

.values-grid{

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:1px;

  background:var(--ink-line);

  border:1px solid var(--ink-line);

  border-radius:var(--radius);

  overflow:hidden;

}

.value-cell{

  background:var(--ink-soft);

  padding:34px 22px;

  text-align:left;

  transition:background .25s;

}

.value-cell:hover{

  background:#241414;

}

.value-cell .vi{

  width:38px;

  height:38px;

  margin-bottom:18px;

  stroke:var(--red-glow);

}

.value-cell h4{

  font-size:15.5px;

  color:#fff;

  margin-bottom:8px;

  letter-spacing:.3px;

}

.value-cell p{

  font-size:13px;

  color:var(--on-dark-muted);

}


/* =====================================================
   SERVICES
===================================================== */

.services{

  background:var(--paper);

  padding:150px 0 110px;

}

.services-head{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap:30px;

  margin-bottom:56px;

  flex-wrap:wrap;

}

.services-head h2{

  font-size:
    clamp(28px,3.4vw,38px);

  max-width:480px;

}

.services-head p{

  color:var(--text-muted);

  max-width:380px;

  font-size:14.5px;

}

.services-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:22px;

}

.service-card{

  background:var(--paper-alt);

  border:1px solid #e7e3dd;

  border-radius:var(--radius);

  padding:32px 28px;

  transition:
    border-color .2s,
    transform .2s,
    box-shadow .2s;

}

.service-card:hover{

  border-color:var(--red);

  transform:translateY(-4px);

  box-shadow:
    0 20px 40px -20px
    rgba(0,0,0,.18);

}

.service-card .si{

  width:34px;

  height:34px;

  stroke:var(--red);

  margin-bottom:20px;

}

.service-card h3{

  font-size:17px;

  margin-bottom:10px;

  color:var(--text-dark);

}

.service-card p{

  font-size:13.8px;

  color:var(--text-muted);

}


/* =====================================================
   PRODUCTS
===================================================== */

.products{

  background:var(--ink);

  color:var(--on-dark);

  padding:110px 0;

}

.products-grid{

  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:60px;

  align-items:start;

}

.products h2{

  font-size:
    clamp(28px,3.4vw,38px);

  color:#fff;

  margin-bottom:18px;

}

.products >
.products-grid >
div:first-child p{

  color:var(--on-dark-muted);

  font-size:15px;

  margin-bottom:26px;

  max-width:420px;

}

.catalog{

  border-top:
    1px solid var(--ink-line);

}

.cat-row{

  border-bottom:
    1px solid var(--ink-line);

  padding:22px 6px;

  display:grid;

  grid-template-columns:
    170px 1fr;

  gap:26px;

  align-items:start;

}

.cat-row .cn{

  font-family:'Chakra Petch',sans-serif;

  font-weight:600;

  color:#fff;

  font-size:14.5px;

  letter-spacing:.3px;

}

.cat-row .ci{

  font-size:13.5px;

  color:var(--on-dark-muted);

}

.cat-row .ci b{

  color:var(--on-dark);

  font-weight:500;

}


/* =====================================================
   WHY
===================================================== */

.why{

  background:var(--paper-alt);

  padding:100px 0;

  border-top:1px solid #ece8e1;

  border-bottom:1px solid #ece8e1;

}

.why-head{

  text-align:center;

  margin-bottom:54px;

}

.why-head h2{

  font-size:
    clamp(26px,3vw,34px);

}

.why-strip{

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:0;

}

.why-item{

  text-align:center;

  padding:0 18px;

  border-left:
    1px solid #ece8e1;

}

.why-item:first-child{

  border-left:none;

}

.why-item .wi{

  width:30px;

  height:30px;

  stroke:var(--red);

  margin:0 auto 16px;

}

.why-item h4{

  font-size:14px;

  color:var(--text-dark);

}


/* =====================================================
   BRANDS
===================================================== */

.brands{

  background:var(--ink);

  padding:90px 0 100px;

  overflow:hidden;

}

.brands-head{

  text-align:center;

  margin-bottom:52px;

}

.brands-head .eyebrow{

  justify-content:center;

}

.brands-head h2{

  color:#fff;

  font-size:
    clamp(24px,2.8vw,30px);

}


/* =====================================================
   BRAND MARQUEE
===================================================== */

.marquee{

  display:flex;

  overflow:hidden;

  position:relative;

  width:100%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent
    );

}

.marquee-track{

  display:flex;

  align-items:center;

  gap:18px;

  animation:
    brandScroll 38s linear infinite;

  flex-shrink:0;

  padding-right:18px;

}

.marquee:hover .marquee-track{

  animation-play-state:paused;

}

@keyframes brandScroll{

  from{

    transform:translateX(0);

  }

  to{

    transform:translateX(-50%);

  }

}


/* =====================================================
   REAL BRAND CARDS
===================================================== */

.brand-chip{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:13px;

  min-width:150px;

  height:72px;

  padding:0 22px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:12px;

  background:
    var(
      --brand-color,
      var(--red)
    );

  color:#fff;

  font-family:'Chakra Petch',sans-serif;

  font-weight:600;

  font-size:14px;

  letter-spacing:.3px;

  white-space:nowrap;

  flex-shrink:0;

  overflow:hidden;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;

}


/* subtle red light */

.brand-chip::before{

  content:"";

  position:absolute;

  width:70px;

  height:70px;

  border-radius:50%;

  left:-35px;

  top:-35px;

  background:
    radial-gradient(
      circle,
      rgba(216,28,38,.5),
      transparent 70%
    );

  opacity:.25;

  transition:opacity .3s;

}

.brand-chip:hover{

  transform:
    translateY(-6px)
    scale(1.03);

  border-color:
    rgba(255,77,77,.7);

  background:
    linear-gradient(
      145deg,
      rgba(216,28,38,.16),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 12px 35px rgba(216,28,38,.18),
    0 0 25px rgba(216,28,38,.08);

}

.brand-chip:hover::before{

  opacity:.8;

}


/* REAL LOGO */

.brand-logo{

  width:32px;

  height:32px;

  object-fit:contain;

  position:relative;

  z-index:2;

  filter:
    brightness(0)
    invert(1);

  transition:
    transform .3s ease,
    filter .3s ease;

}

.brand-chip:hover .brand-logo{

  transform:
    scale(1.15)
    rotate(-3deg);

  filter:
    brightness(0)
    invert(1)
    drop-shadow(
      0 0 8px
      rgba(255,77,77,.75)
    );

}

.brand-name{

  position:relative;

  z-index:2;

}


/* =====================================================
   BRAND FALLBACK
===================================================== */

.brand-fallback{

  width:32px;

  height:32px;

  border-radius:8px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-deep)
    );

  color:#fff;

  font-family:'Chakra Petch',sans-serif;

  font-size:12px;

  font-weight:700;

  box-shadow:
    0 0 15px
    rgba(216,28,38,.35);

}


/* =====================================================
   CTA
===================================================== */

.cta-strip{

  background:
    linear-gradient(
      120deg,
      var(--red-deep),
      var(--red) 120%
    );

  color:#fff;

  padding:70px 0;

}

.cta-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  flex-wrap:wrap;

}

.cta-inner h2{

  font-size:
    clamp(24px,3vw,32px);

  max-width:520px;

}

.cta-inner p{

  color:
    rgba(255,255,255,.85);

  margin-top:8px;

  font-size:14.5px;

}


/* =====================================================
   FOOTER
===================================================== */

footer{

  background:#0c0c0c;

  color:var(--on-dark-muted);

  padding:90px 0 0;

}

.footer-grid{

  display:grid;

  grid-template-columns:
    1.3fr .9fr 1fr;

  gap:50px;

  padding-bottom:60px;

  border-bottom:
    1px solid var(--ink-line);

}

.footer-brand .brand-word{

  font-size:22px;

}

.footer-brand p{

  margin-top:16px;

  font-size:14px;

  max-width:300px;

  color:var(--on-dark-muted);

}

.footer-col h5{

  font-family:'Chakra Petch',sans-serif;

  color:#fff;

  font-size:13px;

  letter-spacing:1.5px;

  text-transform:uppercase;

  margin-bottom:18px;

}

.footer-col a,
.footer-col p{

  display:block;

  font-size:14px;

  color:var(--on-dark-muted);

  margin-bottom:12px;

}

.footer-col a:hover{

  color:var(--red-glow);

}

.footer-bottom{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:26px 0;

  font-size:12.5px;

  flex-wrap:wrap;

  gap:10px;

}

.footer-bottom a{

  color:var(--on-dark-muted);

}

.footer-bottom a:hover{

  color:#fff;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:980px){

  .nav-links{

    display:none;

  }

  .nav-toggle{

    display:flex;

  }

  .hero-inner{

    grid-template-columns:1fr;

  }

  .hero-mark-panel{

    order:-1;

    margin-bottom:10px;

  }

  .hero-mark-panel img{

    max-width:200px;

  }

  .spark-burst{

    right:-20%;

    width:500px;

    opacity:.25;

  }

  .spark-orbit{

    right:-10%;

    width:360px;

    height:360px;

  }

  .spark-orbit.two{

    right:-5%;

    width:270px;

    height:270px;

  }

  .about-grid{

    grid-template-columns:1fr;

  }

  .values-grid{

    grid-template-columns:
      repeat(2,1fr);

  }

  .services-grid{

    grid-template-columns:
      repeat(2,1fr);

  }

  .products-grid{

    grid-template-columns:1fr;

    gap:30px;

  }

  .why-strip{

    grid-template-columns:
      repeat(2,1fr);

    gap:30px;

  }

  .why-item{

    border-left:none;

  }

  .footer-grid{

    grid-template-columns:1fr;

    gap:36px;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

  .wrap{

    padding:0 20px;

  }

  .nav{

    padding:
      13px 20px;

  }

  .nav-cta .btn-primary{

    display:none;

  }

  .hero{

    padding:
      125px 0 70px;

  }

  .hero h1{

    font-size:
      clamp(36px,11vw,52px);

  }

  .hero-tagline{

    font-size:26px;

  }

  .hero p.lede{

    font-size:15px;

  }

  .hero-mark-panel img{

    max-width:180px;

  }

  .spark-burst{

    width:420px;

    right:-55%;

    opacity:.22;

  }

  .spark-orbit{

    right:-38%;

    width:300px;

    height:300px;

  }

  .spark-orbit.two{

    right:-30%;

    width:220px;

    height:220px;

  }

  .values-grid{

    grid-template-columns:1fr;

  }

  .services-grid{

    grid-template-columns:1fr;

  }

  .cat-row{

    grid-template-columns:1fr;

    gap:6px;

  }

  .hero-stats{

    flex-wrap:wrap;

    gap:20px 0;

  }

  .hero-stat{

    flex:
      0 0 50%;

  }

  .why-strip{

    grid-template-columns:1fr;

    gap:32px;

  }

  .cta-inner{

    align-items:flex-start;

    flex-direction:column;

  }


  /* MOBILE BRANDS */

  .brands{

    padding:
      70px 0 80px;

  }

  .brand-chip{

    min-width:135px;

    height:64px;

    padding:0 17px;

    gap:10px;

    font-size:13px;

  }

  .brand-logo{

    width:27px;

    height:27px;

  }

  .brand-fallback{

    width:27px;

    height:27px;

    font-size:10px;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

  .spark-burst,
  .spark-orbit,
  .hero-mark-panel img,
  .spark-dot,
  .kicker-tag .dot,
  .marquee-track,
  .spark-network line,
  .spark-network circle{

    animation:none !important;

  }

  .reveal{

    opacity:1;

    transform:none;

    transition:none;

  }

}


/* =====================================================
   FOCUS
===================================================== */

:focus-visible{

  outline:
    2px solid var(--red-glow);

  outline-offset:3px;

}