/* V&H Fire Group — dark, red and ember, after the business card.
   Headings: Barlow Condensed, heavy and upper case (signage authority). Text: Barlow. Wordmark only: the card's Montserrat (13-glyph subset). */
@font-face{font-family:"Barlow";src:url(/assets/Barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/Barlow-600.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/BarlowCondensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/BarlowCondensed-800.woff2) format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:"VH Logo";src:url(/assets/vh-logo.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --coal:#131112;--soot:#1b181a;--char:#252124;--line:#383237;--smoke:#aea6aa;--fog:#ece7e9;--white:#fff;
  --red:#e21b1b;--red-hi:#ff4f45;--red-deep:#8d0e13;--ember:#ff6a13;--flame:#ffb627;--exit:#14b86a;--ink:#0b090a;
  --f:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h:"Barlow Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --wrap:75rem;--gut:clamp(1.125rem,4vw,2.75rem);--r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--coal);color:var(--fog);font:400 1.0875rem/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* the card's grain */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-color:var(--red-hi);text-decoration-thickness:.09em;text-underline-offset:.2em}
a:hover{color:var(--white);text-decoration-color:var(--ember)}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--h);color:var(--white);margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.5rem,5.4vw,4.7rem);line-height:.95;letter-spacing:.004em;text-transform:uppercase}
h2{font-weight:800;font-size:clamp(2rem,3.9vw,3.1rem);line-height:.98;letter-spacing:.006em;text-transform:uppercase}
h3{font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:.005em}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.lede{font-size:clamp(1.14rem,1.6vw,1.3rem);line-height:1.5;color:var(--fog);max-width:36rem}
.muted{color:var(--smoke)}
.skip{position:absolute;left:-999px;top:0;background:var(--flame);color:var(--ink);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* buttons: chunky, pressable */
.btn{--b:var(--red);--s:var(--red-deep);--t:#fff;display:inline-flex;align-items:center;gap:.55rem;font:700 1.12rem/1 var(--h);letter-spacing:.045em;text-transform:uppercase;color:var(--t);background:var(--b);border:2.5px solid var(--ink);border-radius:14px;padding:.92rem 1.25rem;text-decoration:none;box-shadow:0 5px 0 var(--s),0 5px 0 2.5px var(--ink);transform:translateY(0);transition:transform .08s,box-shadow .08s;cursor:pointer;white-space:nowrap}
.btn:hover{color:var(--t);transform:translateY(1px);box-shadow:0 4px 0 var(--s),0 4px 0 2.5px var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--s),0 0 0 2.5px var(--ink)}
.btn.alt{--b:var(--char);--s:#0c0a0b;--t:#fff}
.btn.pale{--b:#fff;--s:#c9c1c4;--t:var(--ink)}
.btn.tag{--b:var(--flame);--s:#b87a08;--t:var(--ink)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn.sm{font-size:1.02rem;padding:.7rem 1rem;border-radius:12px}

/* header */
/* the blur sits on a pseudo-element: a backdrop-filter on the header itself would trap the fixed phone menu inside it */
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(19,17,18,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.logo svg{width:2.35rem;height:auto;overflow:visible;transition:rotate .2s}
.logo:hover svg{rotate:-6deg}
.logo .drop{transform-box:fill-box;transform-origin:50% 100%;animation:flick 2.4s steps(1,end) infinite}
@keyframes flick{0%{transform:none}12%{transform:scale(1.06,1.14)}25%{transform:scale(.96,.92)}38%{transform:scale(1.04,1.1) skewX(-4deg)}52%{transform:scale(.98,1)}66%{transform:scale(1.07,1.16) skewX(3deg)}80%{transform:scale(.95,.94)}90%{transform:scale(1.02,1.06)}}
.logo b{display:block;font:900 1.45rem/0.9 "VH Logo",var(--h);color:var(--red);letter-spacing:-.02em}
.logo span{display:block;font:700 .98rem/1 "VH Logo",var(--h);color:#fff;margin-top:.14rem;letter-spacing:-.01em}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav>a,.nav .dd>button{font:600 1.1rem/1 var(--h);letter-spacing:.05em;text-transform:uppercase;color:var(--fog);text-decoration:none;padding:.7rem .8rem;border-radius:10px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.nav>a:hover,.nav .dd>button:hover,.nav>a[aria-current]{color:#fff;background:var(--char)}
.nav>a.btn,.nav>a.btn:hover{background:var(--b);color:var(--t)}
.nav .dd{position:relative}
.nav .dd>button::after{content:"";width:.42em;height:.42em;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translateY(-2px)}
.nav .menu{position:absolute;top:calc(100% + .35rem);left:0;min-width:15rem;background:var(--soot);border:1px solid var(--line);border-radius:14px;padding:.45rem;display:none;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.nav .dd.open .menu,.nav .dd:focus-within .menu{display:block}
@media (hover:hover){.nav .dd:hover .menu{display:block}.nav .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:.5rem}}
.nav .menu a{display:block;padding:.62rem .8rem;border-radius:9px;text-decoration:none;font-weight:600}
.nav .menu a:hover{background:var(--char)}
.nav .call{margin-left:.6rem}
.burger{display:none;margin-left:auto;width:2.9rem;height:2.9rem;border-radius:12px;border:1px solid var(--line);background:var(--soot);color:#fff;cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:1.25rem;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
.burger[aria-expanded=true] i{background:none;box-shadow:none;position:relative}
.burger[aria-expanded=true] i::before,.burger[aria-expanded=true] i::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;rotate:45deg}
.burger[aria-expanded=true] i::after{rotate:-45deg}
.menu-open .callbar{display:none}
@media (max-width:1020px){
  .burger{display:grid}
  .nav{position:fixed;inset:calc(4.5rem + 1px) 0 0;background:var(--coal);flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--gut) 7rem;overflow-y:auto;overscroll-behavior:contain;display:none;margin:0}
  .nav.open{display:flex}
  .nav>a,.nav .dd>button{font-size:1.3rem;padding:1rem .25rem;border-bottom:1px solid var(--line);border-radius:0;width:100%;justify-content:space-between}
  .nav .dd>button{pointer-events:none;color:var(--flame);font-size:1.02rem;padding:1.1rem .25rem .2rem;border:0}.nav .dd>button::after{display:none}
  .nav .menu{display:block;position:static;border:0;background:none;box-shadow:none;padding:0 0 .5rem}
  .nav .menu a{font-size:1.18rem;padding:.72rem .25rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav>a{font-size:1.3rem;padding:.85rem .25rem}
  .nav .call{margin:1.6rem 0 0;align-self:stretch;justify-content:center;width:auto;font-size:1.3rem;padding:1rem;border:2.5px solid var(--ink);border-radius:14px}
}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:clamp(600px,calc(100svh - 4.5rem),860px)}
.hero::before{content:"";position:absolute;z-index:-1;right:-10%;top:-10%;width:75%;height:120%;background:radial-gradient(closest-side,rgba(226,27,27,.17),rgba(226,27,27,0) 70%);pointer-events:none}
.rig-view{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.rig-on .rig-view{opacity:1}
.rig-off .rig-view{display:none}
.rig-view canvas{width:100%;height:100%;touch-action:pan-y}
.rig-hot{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hot{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;border-radius:50%;will-change:transform}
.hot i{position:absolute;inset:10px;border-radius:50%;background:var(--flame);border:2.5px solid var(--ink);box-shadow:0 0 0 0 rgba(255,182,39,.6);animation:ping 2.4s infinite}
.hot i::before,.hot i::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:2px;translate:-50% -50%}
.hot i::before{width:9px;height:2.5px}.hot i::after{width:2.5px;height:9px}
.hot:hover i,.hot:focus-visible i{background:#fff;animation:none}
.hot.busy i{animation:none;background:#fff}
.hot.done i{background:var(--exit);animation:none}
.hot.done i::before{width:10px;height:5.5px;background:none;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;border-radius:0;translate:-50% -68%;rotate:-45deg}
.hot.done i::after{display:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,182,39,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,182,39,0)}}
.hero-in{position:relative;z-index:2;pointer-events:none;padding-block:2.6rem 0}
.hero-in>*{pointer-events:auto;max-width:min(39rem,45vw)}
.hero h1{font-size:clamp(2.3rem,4.7vw,4.3rem)}
.hero h1 .ln{display:block}
.tagwrap{position:relative;z-index:3;pointer-events:none;padding-bottom:3rem}
.tagwrap .tagcard{pointer-events:auto}
.hero h1 .k{display:block;font:600 clamp(1rem,1.35vw,1.15rem)/1.3 var(--f);letter-spacing:0;text-transform:none;color:var(--flame);margin-bottom:1rem}
.hero .lede{margin:1.4rem 0 1.7rem;max-width:33rem}
.cta{display:flex;flex-wrap:wrap;gap:.9rem 1rem}
.poster{display:none}
.rig-off .poster{display:block;position:absolute;right:max(2%,calc((100% - var(--wrap))/2 - 3rem));top:50%;translate:0 -50%;width:min(44%,620px);height:auto;z-index:0}

/* the service tag: checklist for the rig */
.tagcard{visibility:hidden;margin-top:2.1rem;max-width:min(30.5rem,44vw);background:var(--flame);color:var(--ink);border:2.5px solid var(--ink);border-radius:14px 14px 14px 14px;padding:.95rem 1.1rem 1rem 3.1rem;position:relative;rotate:-1.2deg;box-shadow:6px 7px 0 rgba(0,0,0,.55)}
.rig-on .tagcard{visibility:visible}
.rig-off .tagcard{display:none}
.tagcard::before{content:"";position:absolute;left:1rem;top:1.05rem;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--coal);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 3px #d99a16}
.tagcard h2{font:800 1.3rem/1 var(--h);color:var(--ink);letter-spacing:.03em;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.tagcard h2 span{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.1rem}
.tagcard ol{list-style:none;margin:.6rem 0 .55rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .4rem}
.tagcard li{font:600 .86rem/1 var(--f);padding:.36rem .55rem .36rem 1.55rem;border:2px solid var(--ink);border-radius:999px;position:relative;background:rgba(255,255,255,.28)}
.tagcard li::before{content:"";position:absolute;left:.5rem;top:50%;width:.62rem;height:.62rem;border:2px solid var(--ink);border-radius:50%;translate:0 -50%}
.tagcard li.done{background:var(--ink);color:var(--flame)}
.tagcard li.done::before{border-color:var(--flame);background:var(--flame)}
.tagcard p{margin:0;font-size:.98rem;line-height:1.35;min-height:2.6em}
.tagcard .stamp{display:none}
.is-clear .tagcard .stamp{display:inline-flex;margin-top:.55rem}

/* swoosh off the card */
.swoosh{display:block;width:100%;height:clamp(48px,7vw,104px);margin-top:-1px;position:relative;z-index:2}
.swoosh.flip{transform:scaleY(-1)}

/* sections */
.sec{padding-block:clamp(3.6rem,8vw,6.6rem)}
.sec.soot{background:var(--soot)}
.sec-h{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3.2rem);max-width:46rem}
.sec-h p{margin:0;color:var(--smoke);font-size:1.15rem;max-width:38rem}
.sec-h .more{justify-self:start}
.after{margin-top:1.8rem}

/* services */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.svc a{display:grid;grid-template-columns:clamp(104px,15vw,172px) 1fr;gap:clamp(.9rem,2vw,1.6rem);align-items:center;background:var(--soot);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,2.2vw,1.8rem);text-decoration:none;position:relative;overflow:hidden}
.sec.soot .svc a{background:var(--coal)}
.svc a::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--red),var(--ember))}
.svc img{transition:rotate .25s,scale .25s}
.svc a:hover{border-color:var(--red)}
.svc a:hover img{rotate:-5deg;scale:1.06}
.svc h3{font-size:1.7rem;font-weight:700}
.svc p{margin:.45rem 0 .7rem;color:var(--smoke);font-size:1.05rem;line-height:1.5}
.more{font-weight:600;color:var(--flame);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.22em}
@media (max-width:820px){.svc{grid-template-columns:1fr}}

/* the chain: devices hanging off a red pipe */
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:c}
.chain::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;border-radius:9px;background:var(--red);border:2.5px solid var(--ink);box-shadow:inset 0 -5px 0 rgba(0,0,0,.22)}
.chain li{position:relative;padding:0 clamp(.6rem,1.6vw,1.4rem);counter-increment:c;text-align:left}
.chain li::before{content:"";position:absolute;left:50%;top:-5px;width:30px;height:26px;translate:-50% 0;border-radius:7px;background:var(--red-deep);border:2.5px solid var(--ink)}
.chain li::after{content:"";position:absolute;left:50%;top:18px;width:8px;height:34px;translate:-50% 0;background:var(--red);border:2.5px solid var(--ink);border-top:0}
.chain img{width:min(100%,190px);margin:46px auto .4rem}
.chain h3{font-size:1.65rem;font-weight:700}
.chain h3::before{content:counter(c) ". ";color:var(--ember)}
.chain p{margin:.4rem 0 0;color:var(--smoke);font-size:1.04rem;line-height:1.5}
@media (max-width:860px){.chain{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}.chain::before{display:none}.chain li::before,.chain li::after{display:none}.chain img{margin-top:0;width:min(100%,150px);margin-inline:0}}

/* the run: stops from south to north */
.run{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.run a{display:block;background:var(--coal);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem;text-decoration:none}
.run a:hover{border-color:var(--red)}
.run h3{font-size:1.65rem;font-weight:700;margin-bottom:.5rem}
.run p{margin:0 0 .8rem;color:var(--smoke);font-size:1.04rem;line-height:1.5}
.route{margin:0 0 2rem;padding:0;list-style:none;display:flex;justify-content:space-between;position:relative;font:600 .98rem/1.2 var(--f);color:var(--smoke)}
.route::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;background:linear-gradient(90deg,var(--red),var(--ember));border-radius:2px}
.route li{position:relative;padding-top:1.5rem;flex:1;text-align:center}
.route li:first-child{text-align:left}.route li:last-child{text-align:right}
.route li::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:18px;height:18px;border-radius:50%;background:var(--coal);border:4px solid var(--flame)}
.route li:first-child::before{left:0;translate:0 0}.route li:last-child::before{left:auto;right:0;translate:0 0}
.route li.big{color:#fff}
@media (max-width:820px){.run{grid-template-columns:1fr}.route li:not(.big){display:none}}

/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.post{display:flex;flex-direction:column;background:var(--soot);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none}
.sec.soot .post{background:var(--coal)}
.post:hover{border-color:var(--red)}
.post .pic{background:radial-gradient(closest-side,rgba(255,106,19,.22),rgba(255,106,19,0)) center/70% 120% no-repeat,var(--char);display:grid;place-items:center;height:11.5rem}
.post .pic img{height:9rem;width:auto;transition:rotate .25s}
.post:hover .pic img{rotate:-5deg}
.post .tx{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post h3{font-size:1.4rem}
.post p{margin:0;color:var(--smoke);font-size:1.02rem;line-height:1.5}
.post time{margin-top:auto;padding-top:.5rem;font-size:.88rem;color:var(--smoke)}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.posts{grid-template-columns:1fr}}

/* call band */
.band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-4%;bottom:-38%;width:min(46%,430px);aspect-ratio:100/120;background:url(/assets/flame-mono.svg) center/contain no-repeat;opacity:.16;pointer-events:none}
.band .wrap{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:center;padding-block:clamp(2.6rem,6vw,4.4rem);position:relative;z-index:1}
.band h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.band p{margin:.7rem 0 0;font-size:1.2rem;max-width:34rem;color:#fff}
.band .tel{font:800 clamp(2.5rem,5.2vw,3.8rem)/1 var(--h);letter-spacing:.01em;color:#fff;text-decoration:none;display:block;margin-bottom:.9rem;white-space:nowrap}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}

/* footer */
.foot{background:#0d0b0c;border-top:1px solid var(--line);padding-block:3.2rem 2rem;font-size:1.02rem;color:var(--smoke)}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.foot h2{font:700 1.12rem/1.2 var(--h);color:#fff;letter-spacing:.07em;margin-bottom:.8rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{text-decoration:none;color:var(--fog)}.foot a:hover{color:#fff;text-decoration:underline}
.foot .logo{margin-bottom:1rem}
.foot .fine{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.9rem}
.foot .ooo{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:600}
.foot .ooo b{background:var(--red);border-radius:8px;padding:.18rem .5rem;font-weight:800}
@media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}

/* sticky call bar on phones */
.callbar{display:none}
@media (max-width:700px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));background:rgba(13,11,12,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .callbar .btn{justify-content:center;box-shadow:0 3px 0 var(--s),0 3px 0 2.5px var(--ink);padding:.8rem .6rem}
  body{padding-bottom:4.6rem}
}

/* inner page head */
.head{background:var(--soot);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.head::before{content:"";position:absolute;right:-8%;top:-30%;width:60%;height:160%;background:radial-gradient(closest-side,rgba(226,27,27,.2),rgba(226,27,27,0) 70%);pointer-events:none}
.head .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,30vw,400px);gap:2rem;align-items:center;padding-block:clamp(2.2rem,5vw,4rem);position:relative}
.head h1{font-size:clamp(2.2rem,4.8vw,3.9rem)}
.head .lede{margin:1.1rem 0 1.6rem}
.crumbs{font-size:.92rem;color:var(--smoke);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs a{color:var(--smoke)}.crumbs span::before{content:"/";margin-right:.4rem;color:var(--line)}
.prop3d{position:relative;aspect-ratio:1;width:100%}
.prop3d canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s;cursor:pointer}
.prop3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s}
.prop3d.prop-on canvas{opacity:1}.prop3d.prop-on img{opacity:0}
@media (max-width:760px){.head .wrap{grid-template-columns:1fr;gap:.6rem}.prop3d{width:min(50%,200px);margin:-.4rem 0 -1rem}.crumbs span[aria-current]{display:none}}

/* prose */
.body{padding-block:clamp(2.6rem,6vw,4.6rem)}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:980px){.cols2{grid-template-columns:1fr}}
.prose{max-width:44rem}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(1.6rem,2.9vw,2.15rem);margin:2.4rem 0 .9rem}
.prose h3{margin:1.8rem 0 .5rem}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--ember);font-weight:700}
.prose strong{color:#fff;font-weight:600}
.prose a{color:#fff}
.prose ul.incl{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.prose ul.incl li{margin:0;background:var(--soot);border:1px solid var(--line);border-radius:14px;padding:.95rem 1rem .95rem 2.7rem;position:relative;font-size:1rem;line-height:1.48;color:var(--smoke)}
.prose ul.incl li::before{content:"";position:absolute;left:1rem;top:1.22rem;width:.85rem;height:.45rem;border-left:3px solid var(--ember);border-bottom:3px solid var(--ember);rotate:-45deg}
.prose ul.incl strong{display:block;color:#fff}
.prose ol.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:.9rem}
.prose ol.steps li{counter-increment:s;margin:0;padding:.2rem 0 .2rem 3.6rem;position:relative;min-height:2.8rem}
.prose ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--red);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--red-deep);font:800 1.4rem/1 var(--h);color:#fff}
.prose ol.steps strong{display:block}
@media (max-width:620px){.prose ul.incl{grid-template-columns:1fr}}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.05rem 2.4rem 1.05rem 0;font:600 1.15rem/1.35 var(--f);color:#fff;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.6rem;height:.6rem;border-right:2.5px solid var(--ember);border-bottom:2.5px solid var(--ember);rotate:45deg;translate:0 -70%;transition:rotate .15s}
.qa details[open] summary::after{rotate:-135deg;translate:0 -20%}
.qa details>div{padding:0 0 1.1rem;color:var(--fog);max-width:40rem}
.qa details>div p:last-child{margin:0}
.side{position:sticky;top:6rem;display:grid;gap:1rem}
.card{background:var(--soot);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.card h2{font-size:1.4rem;letter-spacing:.03em;margin-bottom:.6rem}
.card p{color:var(--smoke);font-size:1.02rem;margin-bottom:1rem}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.card ul a{display:block;padding:.5rem 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.card ul li:last-child a{border:0}
.card ul a[aria-current]{color:var(--flame)}
.card .btn{width:100%;justify-content:center;margin-top:.2rem}
.card .btn+.btn{margin-top:.9rem}
.meta{color:var(--smoke);font-size:.95rem;display:flex;gap:.5rem 1.2rem;flex-wrap:wrap;margin-top:1rem}
.ooo-note{margin-top:2.4rem;padding:1rem 1.15rem;border-left:5px solid var(--red);background:var(--soot);border-radius:0 12px 12px 0;color:var(--fog);font-size:1rem}

/* contact */
.ways{display:grid;gap:.9rem;margin-bottom:1.5rem}
.way{display:grid;grid-template-columns:3rem 1fr;gap:.9rem;align-items:center;background:var(--soot);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none}
a.way:hover{border-color:var(--red)}
.way i{width:3rem;height:3rem;border-radius:50%;background:var(--red);border:2.5px solid var(--ink);display:grid;place-items:center;color:#fff}
.way i svg{width:1.35rem;height:1.35rem}
.way b{display:block;color:#fff;font:700 1.5rem/1.1 var(--h);letter-spacing:.01em;overflow-wrap:anywhere}
.way span{color:var(--smoke);font-size:.95rem}
form.cf{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--soot);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,3vw,1.8rem)}
form.cf .full{grid-column:1/-1}
form.cf label{display:grid;gap:.35rem;font-weight:600;color:#fff;font-size:1.02rem}
form.cf label small{font-weight:400;color:var(--smoke)}
form.cf input,form.cf select,form.cf textarea{font:400 1.05rem/1.4 var(--f);color:#fff;background:var(--coal);border:1.5px solid var(--line);border-radius:12px;padding:.8rem .9rem;width:100%}
form.cf textarea{min-height:9rem;resize:vertical}
form.cf input:focus,form.cf select:focus,form.cf textarea:focus{outline:3px solid var(--flame);outline-offset:1px;border-color:var(--flame)}
form.cf .hp{position:absolute;left:-9999px}
form.cf .msg{margin:0;font-weight:600}
form.cf .msg.ok{color:var(--exit)}form.cf .msg.err{color:var(--red-hi)}
altcha-widget{--altcha-border-radius:12px;--altcha-color-border:var(--line);--altcha-color-base:var(--coal);--altcha-color-text:#fff;--altcha-max-width:100%;color-scheme:dark}
@media (max-width:620px){form.cf{grid-template-columns:1fr}}

/* hero on small screens: text, then the rig, then the tag */
@media (max-width:899px),(orientation:portrait){
  .hero{min-height:0;justify-content:flex-start}
  .hero-in{padding-block:2.2rem 0;order:1}
  .hero-in>*{max-width:none}
  .hero h1{font-size:min(9.6vw,4.3rem)}
  .rig-view{position:relative;inset:auto;height:min(104vw,560px);margin-top:.5rem;order:2}
  .hot i{inset:12px}.hot i::before{width:8px}.hot i::after{height:8px}
  .tagwrap{order:3;padding-bottom:0}
  .tagcard{margin:0 0 2.4rem;max-width:none;rotate:-.8deg}
  .rig-off .poster{position:static;translate:none;width:min(92%,480px);margin:1rem auto 2rem;order:2}
}
@media (min-width:900px) and (max-height:790px) and (orientation:landscape){
  .hero h1{font-size:clamp(2.4rem,4.9vw,3.9rem)}
  .hero h1 .k{margin-bottom:.7rem}
  .hero .lede{margin:1rem 0 1.2rem;font-size:1.15rem}
  .hero-in{padding-top:1.6rem}.tagcard{margin-top:1.5rem}.tagwrap{padding-bottom:1.8rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hot i,.logo .drop{animation:none}*{transition:none!important}}
@media print{.top,.callbar,.rig-view,.band,.foot .cols{display:none}body{background:#fff;color:#000}}