/* Product pages (Manufaktur product-page model) and the Partners page. Loaded after site.css. */

/* ------------------------------------------------------------------ product hero */
.phero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:#fff}
.phero__bg{position:absolute;inset:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;animation:drift 26s ease-in-out infinite alternate}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,rgba(0,0,0,.8))}
.phero__in{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gut) 48px}
@media (min-width:1024px){.phero__in{padding:0 72px 64px}}
.phero__eye{text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.72);margin-bottom:10px}
.phero__name{font-size:clamp(76px,15vw,230px);line-height:.82;letter-spacing:-.06em;font-weight:500}
.phero__name i{font-style:normal;color:var(--red-lit)}
.phero__tag{font-size:clamp(16px,1.5vw,20px);margin-top:18px;color:rgba(255,255,255,.86)}
.phero__side{max-width:300px;text-transform:uppercase;font-size:11px;line-height:1.5;letter-spacing:.12em;font-weight:600;text-align:right;color:rgba(255,255,255,.8)}
@media (max-width:767px){.phero__side{text-align:left}}

/* ------------------------------------------------------------------ marquee band */
.marq{background:var(--ink);color:var(--red-lit);overflow:hidden;white-space:nowrap;border-top:1px solid rgba(219,218,215,.08);padding:22px 0}
.marq__t{display:inline-flex;animation:marq 40s linear infinite}
.marq__t span{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.02em;padding-right:.6em}
.marq__t span::after{content:"\00B7";padding-left:.6em;color:rgba(219,218,215,.35)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ generic sections */
.sec{padding:120px var(--gut)}
@media (min-width:1024px){.sec{padding:140px 90px}}
.sec--ink{background:var(--ink);color:var(--snow)}
.sec--cream{background:var(--cream)}
.sec--paper{background:var(--paper)}
.eyeb{text-transform:uppercase;letter-spacing:.16em;color:var(--mute);margin-bottom:22px}
.sec--ink .eyeb{color:var(--snow-mute)}
.eyeb b{color:var(--red);font-weight:600;margin-right:10px}
.sec--ink .eyeb b{color:var(--red-lit)}

.prob{display:grid;gap:48px;align-items:center}
@media (min-width:1024px){.prob{grid-template-columns:1.1fr 1fr;gap:90px}}
.prob__p{color:var(--mute);margin-top:28px;max-width:520px}
.prob__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.prob__img img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------------ four-feature strip */
.feats{display:grid;grid-template-columns:1fr;border-top:1px solid var(--mute-2);margin-top:64px}
@media (min-width:640px){.feats{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.feats{grid-template-columns:repeat(4,1fr)}}
.feat4{padding:36px 28px 40px 0;border-bottom:1px solid var(--mute-2)}
@media (min-width:1024px){.feat4{border-bottom:0;border-right:1px solid var(--mute-2);padding:40px 32px 8px}.feat4:first-child{padding-left:0}.feat4:last-child{border-right:0}}
.feat4 svg{width:40px;height:40px;fill:none;stroke:var(--red);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:28px}
.feat4 h3{margin-bottom:10px}
.feat4 p{color:var(--mute)}

/* ------------------------------------------------------------------ form factor showcase with callouts */
.show__head{display:grid;gap:22px;margin-bottom:56px}
@media (min-width:1024px){.show__head{grid-template-columns:1.2fr 1fr;align-items:end}}
.show__head p{color:var(--snow-mute);max-width:440px}
.show__fig{position:relative;border-radius:var(--r);overflow:hidden;background:#0d0d0d}
.show__fig>img{width:100%;height:auto}
.hs{position:absolute;display:flex;align-items:center;gap:14px;transform:translate(-100%,-50%);width:max-content;max-width:30%;flex-direction:row-reverse;text-align:right}
.hs__n{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--red-lit);color:var(--red-lit);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;background:rgba(21,21,21,.85)}
.hs__n::before{content:"";position:absolute;inset:-1px;border-radius:50%;animation:ping 2.6s var(--snappy) infinite}
.hs__t{font-size:13px;line-height:1.45;color:var(--snow-mute)}
.hs__t b{display:block;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--snow);margin-bottom:3px}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,59,46,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,59,46,0)}}
.show__list{display:none}
@media (max-width:1023px){
  .hs{display:none}
  .show__list{display:grid;gap:20px;margin-top:32px;counter-reset:hs}
  .show__list li{display:flex;gap:14px;color:var(--snow-mute);font-size:14px;line-height:1.5}
  .show__list li b{display:block;color:var(--snow);font-weight:500}
  .show__list li::before{counter-increment:hs;content:counter(hs);flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--red-lit);color:var(--red-lit);font-size:11px;display:flex;align-items:center;justify-content:center}
}

.show--list .show__fig{padding:clamp(12px,3vw,48px)}
.show--list .show__list{display:grid;gap:0;margin-top:40px;counter-reset:hs;border-top:1px solid rgba(219,218,215,.14)}
@media (min-width:1024px){.show--list .show__list{grid-template-columns:repeat(4,1fr)}}
.show--list .show__list li{display:flex;gap:14px;padding:24px 20px 24px 0;color:var(--snow-mute);font-size:14px;line-height:1.5}
.show--list .show__list li b{display:block;color:var(--snow);font-weight:500;margin-bottom:4px}
.show--list .show__list li::before{counter-increment:hs;content:counter(hs);flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--red-lit);color:var(--red-lit);font-size:11px;display:flex;align-items:center;justify-content:center}

/* ------------------------------------------------------------------ experience steps */
.steps{display:grid;gap:16px;margin-top:56px}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.stp{background:var(--paper);border-radius:12px;padding:28px 26px 32px;min-height:240px;display:flex;flex-direction:column}
.stp__n{font-size:12px;font-weight:600;color:var(--red);letter-spacing:.1em;margin-bottom:auto;padding-bottom:40px}
.stp h3{margin-bottom:10px}
.stp p{color:var(--mute)}

/* ------------------------------------------------------------------ specification list */
.spec{margin-top:56px;border-top:1px solid var(--mute-2)}
.spec__r{display:grid;gap:6px 40px;padding:26px 0;border-bottom:1px solid var(--mute-2)}
@media (min-width:768px){.spec__r{grid-template-columns:280px 1fr}}
.spec__k{text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.spec__v{max-width:640px}

/* ------------------------------------------------------------------ deployment */
.deploy{display:grid;gap:48px}
@media (min-width:1024px){.deploy{grid-template-columns:1fr 1fr;gap:90px;align-items:start}}
.deploy__p{color:var(--mute);margin-top:24px;max-width:480px}
.deploy__list li{padding:22px 0;border-top:1px solid var(--mute-2)}
.deploy__list li:last-child{border-bottom:1px solid var(--mute-2)}
.deploy__list b{display:block;font-weight:500;margin-bottom:6px}
.deploy__list span{color:var(--mute)}

/* ------------------------------------------------------------------ closing call to action */
.pcta{position:relative;overflow:hidden;background:var(--ink);color:var(--snow);padding:130px var(--gut)}
@media (min-width:1024px){.pcta{padding:170px 90px}}
.pcta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.pcta__in{position:relative}
.pcta__h{font-size:clamp(44px,7.4vw,112px);line-height:.9;letter-spacing:-.05em;font-weight:500;text-transform:uppercase;max-width:1100px}
.pcta__h i{font-style:normal;color:var(--red-lit)}
.boxbtn{display:inline-flex;align-items:stretch;margin-top:44px;text-decoration:none;border:1px solid rgba(219,218,215,.3);border-radius:999px;overflow:hidden;transition:border-color .4s var(--snappy)}
.boxbtn span{display:flex;align-items:center;padding:0 26px;height:52px;font-size:13px;font-weight:500;letter-spacing:.02em}
.boxbtn i{display:flex;align-items:center;justify-content:center;width:52px;background:var(--red);color:#fff;font-style:normal;transition:width .5s var(--snappy)}
.boxbtn i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.boxbtn:hover{border-color:var(--red)}
.boxbtn:hover i{width:66px}

.parent{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;padding:56px var(--gut);background:var(--paper);border-top:1px solid var(--mute-2)}
@media (min-width:1024px){.parent{padding:56px 90px}}
.parent p{max-width:640px;color:var(--mute)}
.parent a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-size:13px;font-weight:500}

/* ================================================================== PARTNERS PAGE */
.lhero{background:var(--paper);padding:180px var(--gut) 90px}
@media (min-width:1024px){.lhero{padding:220px 90px 110px}}
.lhero h1{max-width:1100px}
.lhero p{color:var(--mute);max-width:560px;margin-top:32px}
.routes4{display:grid;gap:16px;padding:0 var(--gut) 120px;background:var(--paper)}
@media (min-width:768px){.routes4{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.routes4{padding:0 90px 140px}}
.rt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;padding:32px;scroll-margin-top:90px}
@media (min-width:1024px){.rt{padding:44px}}
.rt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform .8s var(--snappy)}
.rt:hover>img{transform:scale(1.06)}
.rt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.8))}
.rt>*:not(img){position:relative;z-index:2}
.rt .s-12{text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.72);margin-bottom:10px}
.rt p.s-15{color:rgba(255,255,255,.76);margin:14px 0 26px;max-width:460px}
.rt .btn{align-self:flex-start}
.rt:target{outline:2px solid var(--red-lit);outline-offset:4px}

.models{display:grid;border-top:1px solid rgba(219,218,215,.14);margin-top:56px}
@media (min-width:1024px){.models{grid-template-columns:repeat(4,1fr)}}
.mdl{padding:32px 28px 36px 0;border-bottom:1px solid rgba(219,218,215,.14)}
@media (min-width:1024px){.mdl{border-bottom:0;border-right:1px solid rgba(219,218,215,.14);padding:36px 30px 8px}.mdl:first-child{padding-left:0}.mdl:last-child{border-right:0}}
.mdl__n{font-size:12px;font-weight:600;color:var(--red-lit);letter-spacing:.1em;margin-bottom:28px}
.mdl h3{margin-bottom:12px}
.mdl p{color:var(--snow-mute)}

.enq{display:grid;gap:56px;scroll-margin-top:40px}
@media (min-width:1024px){.enq{grid-template-columns:1fr 1.2fr;gap:90px}}
.enq__p{color:var(--mute);margin-top:24px;max-width:420px}
.enq__c{margin-top:32px;color:var(--mute)}
.enq__c a{color:var(--ink)}
.form{display:grid;gap:18px}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid rgba(21,21,21,.28);border-radius:10px;padding:14px 16px;min-height:50px}
.fld textarea{min-height:150px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.fld[data-bad] input,.fld[data-bad] select,.fld[data-bad] textarea{border-color:#93191a}
.fld .err{font-size:12px;color:#93191a;min-height:1.2em}
.form .btn{justify-self:start;border:0;cursor:pointer}
.form__ok{grid-column:1/-1;font-size:14px;color:var(--ink)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}