:root{
  --ink:#12100c; --paper:#ece3d0; --kraft:#b5895a; --kraft-d:#8a6238;
  --orange:#e83c00; --green:#1f6b3a; --line:rgba(18,16,12,.18);
  --display:'Archivo Black', Impact, sans-serif;
  --body:'Archivo', Helvetica, Arial, sans-serif;
  --mono:'Space Mono', Consolas, monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:25% 100%;opacity:.5}
/* utility bar */
.util{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 20px;position:relative;z-index:60}
.util a{color:#ffb38a;text-decoration:none;font-weight:700}
.util a:hover{text-decoration:underline}
.util .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
/* nav */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--ink)}
nav{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:20px;letter-spacing:-.5px;padding:16px 18px;text-decoration:none;border-right:3px solid var(--ink);display:flex;align-items:center;gap:10px}
.logo .spiral-mark{width:28px;height:28px;flex:none;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.navlinks{display:flex;list-style:none;flex-wrap:wrap}
.navlinks>li{position:relative;display:flex}
.navlinks a{display:flex;align-items:center;padding:0 16px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:1.2px;text-decoration:none;border-left:1px solid var(--line);min-height:56px;transition:background .18s,color .18s}
.navlinks a:hover,.navlinks a.active{background:var(--ink);color:var(--paper)}
.cta-nav{background:var(--orange);color:#fff !important;border-left:3px solid var(--ink) !important;font-family:var(--display)}
.cta-nav:hover{background:var(--ink)}
.cta-nav.ghost{background:var(--paper);color:var(--ink) !important;border:2px solid var(--orange) !important}
.cta-nav.ghost:hover{background:var(--orange);color:#fff !important}
.finder{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.finder-lbl{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--kraft-d);font-weight:700;margin-right:2px}
.finder a{font-family:var(--mono);font-size:12.5px;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:6px 11px;transition:background .15s,color .15s}
.finder a:hover{background:var(--ink);color:var(--paper)}
.drop{position:absolute;top:100%;left:0;min-width:280px;background:var(--paper);border:3px solid var(--ink);display:none;flex-direction:column;z-index:70;box-shadow:8px 8px 0 rgba(18,16,12,.35)}
.navlinks>li:hover .drop,.navlinks>li:focus-within .drop{display:flex}
.drop a{border-left:none;border-bottom:1px solid var(--line);min-height:46px;font-size:12.5px;white-space:nowrap}
/* marquee */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;border-bottom:3px solid var(--ink);position:relative;z-index:4}
.marquee-track{display:flex;width:max-content;animation:marq 28s linear infinite;font-family:var(--mono);font-size:14px;padding:10px 0;text-transform:uppercase;letter-spacing:1px}
.marquee-track span{padding:0 28px;border-right:1px solid rgba(236,227,208,.3);white-space:nowrap}
.marquee-track .hot{color:#ff9e6b;font-weight:700}
@keyframes marq{to{transform:translateX(-50%)}}
main{position:relative;z-index:1}
/* hero (home) */
.hero{padding:60px 20px 40px;position:relative;min-height:68vh;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-family:var(--display);font-size:clamp(44px,9.5vw,130px);line-height:.88;text-transform:uppercase;letter-spacing:-2px}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row i{display:inline-block;font-style:normal;transform:translateY(110%);animation:rise .8s cubic-bezier(.2,.9,.2,1) forwards}
.hero h1 .row:nth-child(2) i{animation-delay:.12s;color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.hero h1 .row:nth-child(3) i{animation-delay:.24s;color:var(--orange)}
@keyframes rise{to{transform:none}}
.hero .sub{max-width:520px;margin-top:30px;font-size:18px;line-height:1.55;font-weight:600}
.heroctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--display);text-transform:uppercase;font-size:15px;padding:16px 30px;border:3px solid var(--ink);background:var(--orange);color:#fff;text-decoration:none;cursor:pointer;letter-spacing:1px;transition:transform .15s,box-shadow .15s;box-shadow:6px 6px 0 var(--ink);display:inline-block}
.btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
/* three-lane strip */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:3px solid var(--ink);background:var(--ink);gap:3px;margin:0 20px 50px}
.lane{background:var(--paper);padding:24px;text-decoration:none;display:block;transition:background .15s}
.lane:hover{background:#fff}
.lane b{font-family:var(--display);text-transform:uppercase;font-size:18px;display:block}
.lane span{font-family:var(--mono);font-size:13px;color:var(--kraft-d)}
/* page hero (interior) */
.phero{border-bottom:3px solid var(--ink);padding:64px 20px 44px;position:relative}
.phero h1{font-family:var(--display);font-size:clamp(34px,6vw,72px);line-height:.95;text-transform:uppercase;letter-spacing:-1px;max-width:1000px}
.phero .lede{max-width:680px;margin-top:18px;font-size:17.5px;line-height:1.6;font-weight:600}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--kraft-d);display:block;margin-bottom:14px}
.crumb a{color:var(--orange);text-decoration:none}
/* sections */
section{padding:70px 20px;border-top:3px solid var(--ink);position:relative}
section.first{border-top:none}
.kicker{font-family:var(--mono);text-transform:uppercase;font-size:13px;letter-spacing:3px;color:var(--kraft-d);display:block;margin-bottom:14px}
h2.big{font-family:var(--display);font-size:clamp(28px,5vw,58px);text-transform:uppercase;line-height:.95;letter-spacing:-1px;margin-bottom:26px}
.wrap{max-width:1180px;margin:0 auto}
/* prose (article/content) */
.prose{max-width:780px;font-size:17px;line-height:1.7}
.prose h1{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);text-transform:uppercase;line-height:1.02;margin:42px 0 16px}
.prose h2{font-family:var(--display);font-size:clamp(22px,3vw,32px);text-transform:uppercase;line-height:1.05;margin:40px 0 14px}
.prose h3,.prose h4,.prose h5{font-family:var(--display);font-size:20px;text-transform:uppercase;margin:32px 0 12px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--orange);font-weight:700;text-decoration-thickness:2px}
.prose img{display:block;width:100%;height:auto;max-width:640px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin:26px 0}
.prose blockquote{border-left:6px solid var(--orange);padding:8px 0 8px 18px;font-weight:600;margin:0 0 18px}
.prose table{border-collapse:collapse;margin:0 0 22px;font-family:var(--mono);font-size:14px}
.prose td,.prose th{border:2px solid var(--ink);padding:9px 12px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:3px solid var(--ink);background:var(--ink)}
.stat{background:var(--paper);padding:34px 24px;display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--ink)}
.stat b{font-family:var(--display);font-size:clamp(36px,5vw,58px);line-height:1}
.stat b .unit{font-size:.45em;color:var(--orange)}
.stat span{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.stat:hover{background:#fff}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;margin-top:10px}
.card{border:3px solid var(--ink);background:#f4ecdc;position:relative;overflow:hidden;cursor:pointer;transition:transform .2s;text-decoration:none;display:flex;flex-direction:column}
.card:hover{transform:rotate(-.6deg) translateY(-4px)}
.card .ph{height:165px;border-bottom:3px solid var(--ink);position:relative;overflow:hidden;background:repeating-linear-gradient(115deg,var(--kraft) 0 26px,var(--kraft-d) 26px 30px);background-size:cover;background-position:center}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-110%);transition:transform .6s}
.card:hover .ph::after{transform:translateX(110%)}
.card .ph .codes{position:absolute;bottom:8px;left:10px;font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--paper);padding:3px 8px}
.card h3{font-family:var(--display);font-size:19px;text-transform:uppercase;padding:16px 16px 6px}
.card p{padding:0 16px 14px;font-size:14px;line-height:1.5;flex:1}
.card .go{display:block;border-top:3px solid var(--ink);padding:10px 16px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:1px;background:var(--paper);transition:background .15s,color .15s}
.card:hover .go{background:var(--orange);color:#fff}
/* spec table */
.spec{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14.5px;margin-top:18px;background:#f4ecdc}
.spec th{font-family:var(--display);text-transform:uppercase;font-size:13.5px;letter-spacing:1px;background:var(--ink);color:var(--paper);text-align:left}
.spec th,.spec td{border:2px solid var(--ink);padding:12px 14px}
.spec tr:hover td{background:#ffe9de}
.spec td b{color:var(--orange)}
/* eco */
.eco-claims{list-style:none;display:flex;flex-direction:column;gap:14px}
.eco-claims li{border:3px solid var(--ink);background:#f4ecdc;padding:16px 18px;font-weight:600;display:flex;gap:14px;align-items:center}
.eco-claims li b{font-family:var(--display);font-size:28px;color:var(--green);min-width:92px}
.greenbar{background:var(--green);color:#eaf5ec;font-family:var(--mono);padding:13px 18px;margin-top:26px;border:3px solid var(--ink);font-size:13.5px}
.loop-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.loop{aspect-ratio:1;max-width:400px;margin:auto;position:relative}
.loop svg{width:100%;height:100%}
.loop .orbit-dot{animation:orbit 7s linear infinite;transform-origin:center}
@keyframes orbit{to{transform:rotate(360deg)}}
/* FAQ */
.faq details{border:3px solid var(--ink);background:#f4ecdc;margin-bottom:14px}
.faq summary{font-family:var(--display);text-transform:uppercase;font-size:16px;padding:16px 18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::after{content:"+";color:var(--orange);font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px;line-height:1.6;max-width:760px}
/* forms */
.rfq{max-width:880px}
.rfq .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.rfq label{display:block;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;color:var(--kraft-d)}
.rfq input,.rfq select,.rfq textarea{width:100%;background:#fff;border:2.5px solid var(--ink);padding:11px 12px;font-family:var(--body);font-size:15px}
.rfq input:focus,.rfq select:focus,.rfq textarea:focus{outline:none;border-color:var(--orange)}
.sla{font-family:var(--mono);font-size:13px;background:var(--ink);color:var(--paper);padding:12px 16px;margin:18px 0;display:inline-block}
.ok-note{display:none;background:var(--green);color:#eaf5ec;border:3px solid var(--ink);padding:14px 16px;font-family:var(--mono);margin-top:16px}
/* drawer */
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(460px,100vw);background:var(--ink);color:var(--paper);z-index:100;transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.9,.25,1);padding:30px;overflow-y:auto;border-left:4px solid var(--orange)}
.drawer.open{transform:none}
.drawer h3{font-family:var(--display);font-size:26px;text-transform:uppercase;margin-bottom:4px}
.drawer p.dsub{font-family:var(--mono);font-size:12.5px;color:#cfc4ab;margin-bottom:18px}
.drawer label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin:12px 0 5px}
.drawer input,.drawer select,.drawer textarea{width:100%;background:#241f17;border:2px solid #4a4234;color:var(--paper);padding:10px 12px;font-family:var(--body);font-size:14.5px}
.drawer input:focus,.drawer select:focus,.drawer textarea:focus{border-color:var(--orange);outline:none}
.drawer .frow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drawer .btn{width:100%;margin-top:18px;text-align:center}
.drawer .close{position:absolute;top:12px;right:14px;background:none;border:2px solid var(--paper);color:var(--paper);font-family:var(--mono);font-size:13px;padding:5px 10px;cursor:pointer}
.drawer .close:hover{background:var(--orange);border-color:var(--orange)}
.drawer .ok{display:none;background:var(--green);border:2px solid #eaf5ec;padding:14px;font-family:var(--mono);margin-top:18px;font-size:13px}
.scrim{position:fixed;inset:0;background:rgba(18,16,12,.55);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.loc{border:3px solid var(--ink);padding:24px;background:#f4ecdc}
.loc h3{font-family:var(--display);font-size:20px;text-transform:uppercase;margin-bottom:10px}
.loc p{font-family:var(--mono);font-size:13.5px;line-height:1.8}
.loc a{color:var(--orange);font-weight:700}
/* post grid */
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
/* CTA band */
.ctaband{border:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:38px 30px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;margin-top:50px}
.ctaband h3{font-family:var(--display);font-size:clamp(20px,3vw,30px);text-transform:uppercase;max-width:560px;line-height:1.05}
.ctaband .btn{box-shadow:6px 6px 0 var(--kraft-d)}
/* images */
.ph.img{background-size:cover;background-position:center}
.pageimg{display:block;width:100%;height:auto;max-width:640px;border:3px solid var(--ink);margin-top:24px;box-shadow:6px 6px 0 var(--ink)}
.yard{padding:0;height:300px;background:url('assets/yard.webp') center/cover;position:relative}
.yard .chip{position:absolute;left:20px;bottom:20px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;padding:8px 14px;letter-spacing:1px}
/* winder */
.winder{position:absolute;right:1vw;top:52%;translate:0 -50%;width:min(44vw,600px);cursor:crosshair}
.winder svg{width:100%;height:auto;display:block}
.winder .lbl{position:absolute;left:50%;top:-6px;translate:-50% -100%;font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper);padding:4px 10px;white-space:nowrap}
.winder .lbl .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;animation:blink 1.6s infinite}
.winder .lbl .rec{color:var(--orange);font-weight:700}
@keyframes seamdash{to{stroke-dashoffset:var(--pitch,-46px)}}
.seamdash{animation:seamdash var(--wind,1s) linear infinite}
@keyframes ribfeed{to{stroke-dashoffset:28}}
.ribfeed{animation:ribfeed var(--feed,.55s) linear infinite}
@keyframes rollspin{to{transform:rotate(360deg)}}
.roller{animation:rollspin 1.2s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes chop{0%,54%{transform:translateY(0)}59%,64%{transform:translateY(var(--chop,89px))}72%,100%{transform:translateY(0)}}
.blade{animation:chop var(--cycle,7s) cubic-bezier(.7,0,.3,1) infinite}
.saw{animation:rollspin .18s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes cutflash{0%,56%{opacity:0}58%,63%{opacity:1}66%,100%{opacity:0}}
.cutflash{animation:cutflash var(--cycle,7s) linear infinite}
@keyframes piece{0%,58%{opacity:0;transform:translate(0,0) rotate(0deg)}61%{opacity:1;transform:translate(6px,0) rotate(0deg)}82%{opacity:1;transform:translate(92px,3px) rotate(1.5deg)}96%{opacity:0;transform:translate(150px,48px) rotate(10deg)}100%{opacity:0}}
.piece{animation:piece var(--cycle,7s) ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.winder:hover .seamdash{animation-duration:.38s}
.winder:hover .ribfeed{animation-duration:.2s}
.winder:hover .roller{animation-duration:.45s}
.winder:hover .saw{animation-duration:.08s}
.winder svg{transition:opacity .3s}
.winder.swap svg{opacity:.18}
/* circular-economy loop pictograph */
.ecocol{display:flex;align-items:center;justify-content:center}
.ecoloop{width:100%;height:auto;display:block;max-width:540px;margin:0 auto}
@keyframes ecospin{to{transform:rotate(360deg)}}
@keyframes econode{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ecoseam{to{stroke-dashoffset:-16}}
.ecoloop .ring{transform-box:view-box;transform-origin:300px 300px;animation:ecospin 26s linear infinite}
.ecoloop .token{transform-box:view-box;transform-origin:300px 300px;animation:ecospin 9s linear infinite}
.ecoloop .hub{transform-box:view-box;transform-origin:300px 300px;animation:ecospin 16s linear infinite}
.ecoloop .mroll{transform-box:view-box;transform-origin:463px 300px;animation:ecospin 1.4s linear infinite}
.ecoloop .seam{animation:ecoseam .7s linear infinite}
.ecoloop .node-bg{transform-box:fill-box;transform-origin:center;animation:econode 9s ease-in-out infinite}
.ecoloop .n2 .node-bg{animation-delay:-2.25s}
.ecoloop .n3 .node-bg{animation-delay:-4.5s}
.ecoloop .n4 .node-bg{animation-delay:-6.75s}
/* footer */
footer{border-top:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:46px 20px;position:relative;z-index:1}
.foot{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;font-family:var(--mono);font-size:13px;max-width:1180px;margin:0 auto}
footer .fbrand{font-family:var(--display);font-size:24px;text-transform:uppercase}
footer a{color:#ffb38a;text-decoration:none}
footer a:hover{text-decoration:underline}
.flogo{height:50px;display:block;margin-bottom:12px}
.eco-pill{display:inline-block;border:2px solid var(--paper);padding:6px 12px;margin-top:12px;letter-spacing:1px;text-transform:uppercase}
.fcol{min-width:180px}
.fcol b{display:block;font-family:var(--display);text-transform:uppercase;margin-bottom:10px;font-size:14px}
.fcol a{display:block;margin-bottom:7px}
/* reveals */
.reveal{opacity:0;transform:translateY(28px)}
.reveal.seen{opacity:1;transform:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.9,.25,1)}
section{content-visibility:auto;contain-intrinsic-size:auto 620px}
@media (max-width:880px){
  .navlinks a{padding:0 10px;font-size:11.5px}
  .winder{position:static;translate:none;width:100%;max-width:480px;margin:40px auto 0;cursor:default}
  .loop-wrap{grid-template-columns:1fr}
  .drop{position:static;box-shadow:none;border-width:0 0 3px 0;min-width:0}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .hero h1 .row i{transform:none}
  .reveal{opacity:1;transform:none}
}
/* ===== Fluent Forms — Kraft Monolith skin (v2.0.4) ===== */
.fluentform{max-width:880px}
.fluentform .ff-el-group{margin-bottom:16px}
.fluentform .ff-el-input--label label{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--kraft-d);font-weight:700;margin-bottom:5px;display:inline-block}
.fluentform .ff-el-form-control,
.fluentform input[type=text],.fluentform input[type=email],.fluentform input[type=tel],
.fluentform input[type=number],.fluentform input[type=date],.fluentform input[type=url],
.fluentform select,.fluentform textarea{
  width:100%;background:#fff;border:2.5px solid var(--ink);border-radius:0;
  padding:12px 13px;font-family:var(--body);font-size:15px;color:var(--ink);box-shadow:none}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,.fluentform select:focus,.fluentform textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:4px 4px 0 rgba(232,60,0,.25)}
.fluentform textarea{min-height:110px}
.fluentform .ff-btn-submit,.fluentform button[type=submit]{
  font-family:var(--display);text-transform:uppercase;font-size:15px;letter-spacing:1px;
  padding:16px 32px;border:3px solid var(--ink);background:var(--orange);color:#fff;
  cursor:pointer;box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s;border-radius:0}
.fluentform .ff-btn-submit:hover,.fluentform button[type=submit]:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.fluentform .ff-btn-submit:active,.fluentform button[type=submit]:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.fluentform .ff-message-success{border:3px solid var(--green);background:rgba(31,107,58,.08);color:var(--green);font-weight:600;padding:16px 18px;margin-top:18px}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:#c0392b}
.fluentform .error,.fluentform .ff-el-is-error .error{font-family:var(--mono);font-size:12px;color:#c0392b}
.fluentform .ff_ar_wrap, .fluentform .ff-el-progress{border:2.5px solid var(--ink)}
/* two-column rows where Fluent Forms uses container classes */
.fluentform .ff-t-container{gap:14px}
/* drawer-scoped (dark) variant */
.drawer .fluentform .ff-el-input--label label{color:#cfc4ab}
.drawer .fluentform .ff-el-form-control,
.drawer .fluentform input,.drawer .fluentform select,.drawer .fluentform textarea{
  background:#241f17;border:2px solid #4a4234;color:var(--paper)}
.drawer .fluentform .ff-el-form-control:focus,
.drawer .fluentform input:focus,.drawer .fluentform select:focus,.drawer .fluentform textarea:focus{
  border-color:var(--orange);box-shadow:none}
.drawer .fluentform .ff-btn-submit{width:100%}
/* ===== TRY BEFORE YOU BUY badge (v2.0.8) ===== */
.trycard{position:relative;background:#fdfaf3;border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(18,16,12,.45);transform:rotate(-2.5deg);padding:22px 18px 14px;margin:18px 6px 24px;text-align:center;transition:transform .25s}
.trycard:hover{transform:rotate(1deg) scale(1.02)}
.trycard-inner{font-family:var(--display);font-size:clamp(26px,4vw,34px);line-height:1.02;letter-spacing:1px;color:var(--orange);-webkit-text-stroke:1px rgba(138,98,56,.35);text-transform:uppercase}
.trycard-sub{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--kraft-d);margin-top:10px;text-transform:uppercase}
.trycard .tape{position:absolute;width:84px;height:24px;background:rgba(181,137,90,.55);border-left:1px dashed rgba(18,16,12,.25);border-right:1px dashed rgba(18,16,12,.25)}
.trycard .tape.t1{top:-13px;left:-26px;transform:rotate(-38deg)}
.trycard .tape.t2{bottom:-13px;right:-26px;transform:rotate(-38deg)}
.drawer .trycard{box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.drawer-diagram{margin:0 0 18px;border:2px solid #4a4234;padding:12px;background:#241f17}