:root{
  --red:#d63328;
  --ink:#252722;
  --muted:#73756e;
  --paper:#f7f7f2;
  --line:#ddded6
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:15px;
  line-height:1.55
}
a{
  color:inherit;
  text-decoration:none
}
button,input,textarea,select{
  font:inherit
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid #316d9a;
  outline-offset:4px
}
img{
  max-width:100%;
  height:auto
}
header{
  height:100px;
  padding:0 4.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  gap:25px
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:21px;
  font-weight:800;
  letter-spacing:.5px;
  line-height:1.3
}
.brand small{
  font-size:8px;
  letter-spacing:2px;
  display:block;
  margin-top:5px
}
.brand-mark{
  color:var(--red);
  font-size:53px;
  font-style:italic;
  line-height:1;
  letter-spacing:-10px;
  margin-right:9px
}
.brand-mark span{
  font-size:45px
}
nav{
  display:flex;
  gap:30px;
  font-size:13px
}
nav a:hover{
  color:var(--red)
}
.header-cta{
  border:1px solid #bfc0b7;
  padding:12px 20px;
  font-size:12px
}
.header-cta span{
  margin-left:18px
}
.hero{
  position:relative;
  padding:73px 4.5% 0;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:20px;
  overflow:hidden
}
.hero-copy{
  position:relative;
  z-index:1
}
.eyebrow{
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:700;
  color:#6f7468;
  display:flex;
  align-items:center;
  gap:10px
}
.eyebrow i{
  width:7px;
  height:7px;
  background:var(--red);
  display:block;
  border-radius:50%
}
h1{
  font-size:clamp(42px,4.5vw,72px);
  line-height:1.08;
  letter-spacing:-2.8px;
  font-weight:500;
  margin:28px 0 24px
}
h1 em{
  font-style:normal;
  color:var(--red)
}
.hero-copy p{
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin-bottom:32px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:17px 24px;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  transition:background .15s
}
.red{
  background:var(--red);
  border-color:var(--red);
  color:white
}
.red:hover{
  background:#b9251c
}
.hero-secondary{
  font-size:12px;
  margin-left:25px;
  border-bottom:1px solid #b5b7ad;
  padding:7px 0
}
.hero-secondary span{
  margin-left:10px
}
.hero-visual{
  position:relative;
  background:#edeee7;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:3px 0 0 15px;
  background-image:linear-gradient(#d8dbd04a 1px,transparent 1px),linear-gradient(90deg,#d8dbd04a 1px,transparent 1px);
  background-size:36px 36px
}
.hero-visual:before{
  content:'';
  position:absolute;
  width:270px;
  height:270px;
  border:1px solid #c6cbbb;
  border-radius:50%
}
.hero-visual img{
  width:130%;
  max-width:none;
  position:relative;
  mix-blend-mode:multiply;
  clip-path:inset(0 13% 12% 12%);
  margin:0 -15%
}
.hero-label{
  position:absolute;
  top:18px;
  left:20px;
  color:#929888;
  font-size:9px;
  letter-spacing:2px
}
.hero-caption{
  position:absolute;
  bottom:18px;
  left:24px;
  right:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#727768
}
.hero-caption b{
  font-size:15px;
  letter-spacing:.5px;
  display:block;
  color:var(--ink)
}
.hero-caption a{
  font-size:27px
}
.hero-bottom{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1.5px;
  color:#898d7f;
  padding:40px 0 21px
}
.category-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--line);
  margin:0 4.5%
}
.category-strip>a{
  padding:25px 20px;
  display:flex;
  gap:18px;
  align-items:center;
  border-right:1px solid var(--line);
  font-size:16px;
  font-weight:600
}
.category-strip>a:first-child{
  padding-left:0
}
.category-strip>a:last-child{
  border-right:0
}
.category-strip a:hover{
  color:var(--red)
}
.category-num{
  font-size:10px;
  color:#8e9384;
  font-weight:400
}
.category-strip small{
  display:block;
  font-weight:400;
  font-size:11px;
  color:#8a8e83;
  margin-top:4px
}
.category-strip b{
  margin-left:auto;
  font-weight:400
}
.section{
  padding:85px 4.5%
}
h2{
  font-size:clamp(30px,3vw,46px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-1.5px;
  margin:20px 0 25px
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:24px
}
.section-heading p{
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
  margin:0 0 27px
}
.catalog-toolbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:15px 0 20px;
  align-items:center
}
.filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.filters button{
  border:1px solid transparent;
  background:transparent;
  padding:10px 18px;
  font-size:12px;
  color:#717569
}
.filters button[aria-pressed=true]{
  background:var(--ink);
  color:white
}
.filters sup{
  font-size:9px;
  margin-left:5px;
  opacity:.6
}
.search{
  position:relative;
  max-width:220px
}
.search input{
  background:transparent;
  border:1px solid var(--line);
  padding:10px 35px 10px 14px;
  width:100%;
  font-size:12px
}
.search>span:last-child{
  position:absolute;
  right:12px;
  top:3px;
  font-size:23px;
  color:#777
}
.result-count{
  font-size:10px;
  color:#8c9182;
  margin:17px 0
}
.products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.product{
  border:1px solid var(--line);
  background:#fff;
  transition:border-color .2s
}
.product:hover{
  border-color:#979d89
}
.product-image{
  position:relative;
  background:#f0f1ec;
  display:block;
  height:205px;
  overflow:hidden
}
.product-image img{
  position:absolute;
  width:127%;
  max-width:none;
  left:-13%;
  top:50%;
  transform:translateY(-50%);
  mix-blend-mode:multiply;
  clip-path:inset(0 14% 6% 13%);
  transition:transform .3s
}
.product:hover .product-image img{
  transform:translateY(-50%) scale(1.04)
}
.image-arrow{
  position:absolute;
  right:15px;
  top:14px;
  color:#858b79
}
.product-body{
  padding:24px
}
.product-body .eyebrow{
  font-size:8px;
  letter-spacing:1.3px
}
h3{
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.5px;
  font-weight:500;
  margin:12px 0
}
.product-body>p{
  color:var(--muted);
  font-size:12px;
  min-height:57px;
  line-height:1.65
}
.product-spec{
  display:flex;
  justify-content:space-between;
  border-block:1px solid #eee;
  padding:15px 0;
  margin:18px 0;
  font-size:16px;
  gap:12px
}
.product-spec small{
  display:block;
  font-size:9px;
  color:#969b8b;
  letter-spacing:0;
  margin-top:4px
}
.text-link{
  font-size:12px;
  display:flex;
  justify-content:space-between;
  font-weight:600
}
.text-link:hover{
  color:var(--red)
}
.catalog-note{
  color:#929789;
  font-size:11px;
  margin-top:25px
}
.applications{
  background:#292e27;
  color:#f7f7f2
}
.applications .eyebrow{
  color:#b2ba9f
}
.applications .section-heading p{
  color:#a2aa96
}
.use-cases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:35px
}
.use-cases article{
  border-top:1px solid #555d4e;
  padding:22px 0 8px
}
.use-cases article>span{
  font-size:9px;
  color:#b2ba9f;
  letter-spacing:1.5px
}
.use-cases h3{
  font-size:28px;
  margin:25px 0 18px
}
.use-cases p{
  font-size:13px;
  color:#a7b09c;
  max-width:300px;
  line-height:1.8
}
.guide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.guide>div>p{
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}
.guide .text-link{
  justify-content:flex-start;
  margin-top:30px
}
.steps article{
  display:flex;
  gap:25px;
  border-bottom:1px solid var(--line);
  padding:5px 0 18px;
  margin-bottom:19px
}
.steps article>span{
  font-size:11px;
  color:var(--red);
  margin-top:10px
}
.steps h3{
  font-size:20px;
  margin:5px 0 10px
}
.steps p{
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.8
}
.request{
  background:#e9ebe1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.request p{
  font-size:13px;
  color:var(--muted);
  line-height:1.85
}
.request-note{
  margin-top:35px;
  font-size:11px!important
}
.contact-placeholders{
  border-top:1px solid #cbd0bf;
  max-width:370px;
  margin-top:28px;
  padding-top:16px
}
.contact-placeholders span{
  display:block;
  font-size:13px;
  margin:6px 0
}
.contact-placeholders small{
  font-size:10px;
  color:#7d8472
}
label{
  display:block;
  font-size:11px;
  margin:0 0 18px
}
input,select,textarea{
  display:block;
  width:100%;
  border:1px solid #c8ccbd;
  background:#f8f9f4;
  padding:13px 14px;
  color:var(--ink);
  border-radius:0;
  margin-top:8px;
  min-width:0;
  font-size:13px
}
textarea{
  resize:vertical
}
form .button{
  width:100%
}
#request-result{
  margin-top:25px
}
.result-actions{
  display:flex;
  gap:10px
}
.result-actions button{
  border:1px solid #a7ad9b;
  background:transparent;
  padding:10px 15px;
  font-size:12px
}
.faq{
  max-width:1000px;
  margin:auto
}
.faq h2{
  margin-bottom:30px
}
details{
  border-bottom:1px solid var(--line)
}
summary{
  padding:20px 0;
  font-size:15px;
  cursor:pointer
}
details p{
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:730px;
  padding-bottom:16px
}
footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  background:#22261f;
  padding:40px 4.5%;
  color:#e2e6da;
  font-size:11px
}
footer p{
  color:#929c85;
  line-height:1.8
}
.footer-brand{
  font-size:19px;
  font-weight:700;
  letter-spacing:1px
}
.footer-brand span{
  display:block;
  font-size:9px;
  font-weight:400;
  letter-spacing:0;
  margin-top:5px
}
.detail{
  padding:35px 4.5% 70px
}
.back{
  font-size:12px;
  color:var(--muted)
}
.detail-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:55px 0;
  align-items:center
}
.detail-hero h1{
  font-size:clamp(35px,4vw,64px)
}
.detail-hero img{
  mix-blend-mode:multiply
}
.lead{
  color:var(--muted);
  font-size:16px;
  max-width:500px
}
.detail-values{
  display:flex;
  gap:40px;
  margin:30px 0;
  font-size:25px
}
.detail-values small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:8px
}
.detail-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  border-top:1px solid var(--line);
  padding-top:40px
}
.detail-info h2{
  font-size:30px
}
dl>div{
  display:flex;
  gap:20px;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}
dt{
  color:var(--muted)
}
dd{
  margin:0;
  text-align:right
}
ul{
  padding-left:18px
}
.detail-info li{
  font-size:14px;
  margin:16px 0;
  color:#656c5d
}
.note{
  font-size:12px;
  color:#8c927f;
  margin-top:25px
}
.model-next{
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:60px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.model-next h2{
  font-size:30px
}
[hidden]{
  display:none!important
}
.sr-only,.skip{
  position:absolute;
  left:-10000px
}
.skip:focus{
  left:15px;
  top:10px;
  padding:10px;
  background:#fff;
  z-index:100
}
@media(min-width:1550px){
  body>header,main,footer{
    max-width:1600px;
    margin-inline:auto
  }
  .hero-visual{
    max-height:450px
  }
}
@media(max-width:1050px){
  nav{
    gap:15px
  }
  .hero-secondary{
    display:block;
    margin:14px 0 0;
    width:max-content
  }
  .hero{
    padding-top:45px
  }
  .hero-visual{
    min-height:320px
  }
  .category-strip>a{
    font-size:13px;
    padding:20px 12px;
    gap:10px
  }
  .category-strip small{
    font-size:9px
  }
  .products{
    gap:15px
  }
  .product-body{
    padding:18px
  }
  .product-spec{
    font-size:14px
  }
  .section-heading p{
    max-width:300px
  }
  .guide,.request{
    gap:40px
  }
}
@media(max-width:760px){
  header{
    height:78px;
    padding-inline:5%;
    gap:12px
  }
  .brand{
    font-size:16px;
    gap:7px
  }
  .brand small{
    font-size:6px;
    letter-spacing:1.2px
  }
  .brand-mark{
    font-size:43px
  }
  .brand-mark span{
    font-size:36px
  }
  nav{
    display:none
  }
  .header-cta{
    font-size:10px;
    padding:9px
  }
  .header-cta span{
    margin-left:7px
  }
  .hero{
    grid-template-columns:1fr;
    padding:40px 5% 0;
    gap:18px
  }
  .hero h1{
    font-size:46px;
    letter-spacing:-2px
  }
  .hero-copy p{
    font-size:14px
  }
  .hero-secondary{
    display:inline-block;
    font-size:11px;
    margin-left:15px
  }
  .hero-visual{
    margin:10px 0 0;
    min-height:300px
  }
  .hero-visual img{
    width:115%
  }
  .hero-bottom{
    padding-top:8px;
    font-size:8px
  }
  .hero-bottom span:last-child{
    display:none
  }
  .category-strip{
    grid-template-columns:1fr;
    margin-inline:5%
  }
  .category-strip>a{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:17px 0;
    font-size:15px
  }
  .category-strip>a:last-child{
    border-bottom:0
  }
  .category-strip small{
    font-size:10px
  }
  .category-num{
    margin-right:8px
  }
  .section{
    padding:55px 5%
  }
  .section-heading{
    display:block;
    margin-bottom:10px
  }
  .section-heading p{
    max-width:none;
    font-size:12px
  }
  .desktop{
    display:none
  }
  h2{
    font-size:34px
  }
  .catalog-toolbar{
    display:block;
    padding-top:5px
  }
  .filters{
    gap:3px
  }
  .filters button{
    padding:9px 11px;
    font-size:11px
  }
  .search{
    max-width:none;
    margin-top:14px;
    margin-bottom:0
  }
  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .product-image{
    height:170px
  }
  .product-body{
    padding:15px
  }
  .product-body h3{
    font-size:21px
  }
  .product-body>p{
    font-size:11px;
    min-height:74px
  }
  .product-spec{
    display:block
  }
  .product-spec>span{
    display:block;
    margin-top:8px
  }
  .use-cases{
    grid-template-columns:1fr;
    gap:15px
  }
  .use-cases h3{
    font-size:27px
  }
  .use-cases h3 br{
    display:none
  }
  .use-cases p{
    max-width:none
  }
  .guide,.request{
    grid-template-columns:1fr;
    gap:30px
  }
  .request-note{
    margin-top:20px
  }
  footer{
    flex-wrap:wrap;
    padding:30px 5%
  }
  footer p{
    width:100%;
    order:3;
    margin:0
  }
  .detail{
    padding-inline:5%
  }
  .detail-hero{
    grid-template-columns:1fr;
    gap:25px;
    padding:35px 0
  }
  .detail-hero h1{
    letter-spacing:-1px
  }
  .detail-hero img{
    max-height:300px;
    object-fit:contain
  }
  .detail-values{
    gap:25px;
    font-size:21px
  }
  .detail-info{
    grid-template-columns:1fr;
    gap:30px
  }
  .model-next{
    display:block
  }
  .model-next .button{
    margin-top:10px
  }
}
@media(max-width:420px){
  .products{
    grid-template-columns:1fr
  }
  .product-image{
    height:215px
  }
  .product-body>p{
    min-height:0
  }
  .product-spec{
    display:flex
  }
  .hero h1{
    font-size:41px
  }
  .hero-secondary{
    display:block;
    margin-left:0;
    margin-top:14px
  }
  .hero-visual{
    min-height:260px
  }
  .filters button{
    padding:8px 9px
  }
  .header-cta{
    max-width:125px
  }
  .eyebrow{
    font-size:8px
  }
  .hero-visual:before{
    width:220px;
    height:220px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition:none!important
  }
}