/* ============================================================
   Contractor Support LLC — homepage graphics layer
   Loaded after css/home-v2.css. Drafting / job-site accents:
   blueprint hero, redline callouts, caution-stripe dividers,
   lumber-grade section stamps, tape-measure scroll ruler,
   door-frame cards, lead-to-estimate sequence.
   Photos (as-is, pre-cropped) live in assets/mj/:
     hero-tailgate.jpg      -> .gfx-hero background
     door-*.jpg             -> <img> door leaves (loading="lazy")
     texture-blueprint.jpg  -> .gfx-texture::before (#bids, #quote)
   Motion lives in js/home-gfx.js; everything has a static,
   fully-visible fallback (no JS / prefers-reduced-motion).
   ============================================================ */

/* ---------- 1. BLUEPRINT HERO ---------- */
.gfx-hero{
  isolation:isolate;
  background-color:var(--navy-deep);
  background-image:
    linear-gradient(90deg,rgba(14,24,40,.96) 0%,rgba(14,24,40,.9) 32%,rgba(14,24,40,.55) 60%,rgba(14,24,40,.38) 100%),
    linear-gradient(0deg,rgba(14,24,40,.7) 0%,rgba(14,24,40,0) 40%),
    linear-gradient(rgba(22,36,59,.35),rgba(22,36,59,.35)),
    url(../assets/mj/hero-tailgate.jpg);
  background-size:auto,auto,auto,cover;
  background-position:0 0,0 0,0 0,60% 85%;
  background-repeat:no-repeat;
  background-blend-mode:normal,normal,color,normal;
}
/* drafting grid: fine 12px lines + amber major lines every 60px */
.gfx-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(244,163,0,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,163,0,.10) 1px,transparent 1px),
    linear-gradient(rgba(201,209,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,209,220,.045) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;
  background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
}
.gfx-hero > .wrap{position:relative;z-index:1}
/* title-block mark in the hero corner, like a sheet's drawing number */
.gfx-hero::after{
  content:"SHEET A-1 \00B7  CONTRACTOR SUPPORT LLC";
  position:absolute;right:28px;bottom:16px;z-index:1;
  font:600 10px/1 'Inter',sans-serif;letter-spacing:.24em;color:rgba(201,209,220,.45);
}

/* room under the product screen for the drafting callouts */
.v2-showcase{position:relative}
.gfx-anno-on .v2-showcase{padding:34px 0 78px}
.gfx-anno{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:3}
.gfx-anno .ld{fill:none;stroke:var(--amber);stroke-width:1.25;stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}
.gfx-anno .ext{stroke:rgba(201,209,220,.55);stroke-width:1}
.gfx-anno .dimln{stroke:rgba(201,209,220,.75);stroke-width:1;fill:none}
.gfx-anno .tk{stroke:rgba(201,209,220,.9);stroke-width:1.6}
.gfx-anno .pt{fill:var(--navy-deep);stroke:var(--amber);stroke-width:1.5;opacity:0}
.gfx-anno .dot{fill:var(--amber);opacity:0}
.gfx-anno text{
  font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;fill:#F4F1E8;opacity:0;
}
.gfx-anno text.amb{fill:var(--amber)}
.gfx-anno text.dimt{fill:rgba(201,209,220,.85);font-size:10px;letter-spacing:.22em;opacity:1}
.gfx-anno .lbl-bg{fill:var(--navy-deep)}

/* each panel's callouts follow the same 15s cycle as the crossfading screens */
.gfx-anno .grp{opacity:0;animation:gfxgrp 15s linear infinite}
.gfx-anno .grp.p2{animation-delay:5s}
.gfx-anno .grp.p3{animation-delay:10s}
@keyframes gfxgrp{0%,29%{opacity:1}32%,100%{opacity:0}}
.gfx-anno .grp .ld{animation:gfxdraw 15s linear infinite;animation-delay:inherit}
.gfx-anno .grp .pt,.gfx-anno .grp .dot{animation:gfxpop 15s linear infinite;animation-delay:inherit}
.gfx-anno .grp text{animation:gfxtxt 15s linear infinite;animation-delay:inherit}
.gfx-anno .grp .c2 .ld{animation-name:gfxdraw2}
.gfx-anno .grp .c2 .pt,.gfx-anno .grp .c2 .dot{animation-name:gfxpop2}
.gfx-anno .grp .c2 text{animation-name:gfxtxt2}
@keyframes gfxpop {0%{opacity:0}2%,100%{opacity:1}}
@keyframes gfxdraw{0%,2%{stroke-dashoffset:var(--len)}8%,100%{stroke-dashoffset:0}}
@keyframes gfxtxt {0%,7%{opacity:0}10%,100%{opacity:1}}
@keyframes gfxpop2 {0%,5%{opacity:0}7%,100%{opacity:1}}
@keyframes gfxdraw2{0%,7%{stroke-dashoffset:var(--len)}13%,100%{stroke-dashoffset:0}}
@keyframes gfxtxt2 {0%,12%{opacity:0}15%,100%{opacity:1}}
/* dimension string under the screen draws once */
.gfx-anno .dim .dimln{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);animation:gfxdimin 1.2s .4s ease-out forwards}
.gfx-anno .dim .tk,.gfx-anno .dim .ext,.gfx-anno .dim text{opacity:0;animation:gfxfade .5s 1.2s ease-out forwards}
@keyframes gfxdimin{to{stroke-dashoffset:0}}
@keyframes gfxfade{to{opacity:1}}

/* ---------- 2. JOB-SITE DIVIDERS + GRADE STAMPS ---------- */
.gfx-stripe{
  height:10px;position:relative;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 12px,var(--navy-deep) 12px 24px);
  border-top:2px solid var(--navy-deep);border-bottom:2px solid var(--navy-deep);
}

/* lumber grade stamp: "01 | WEBSITE" in a stamped box */
.gfx-stamp{
  align-self:flex-start;display:inline-flex;align-items:stretch;
  border:2px solid var(--navy);color:var(--navy);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  transform:rotate(-1.2deg);transform-origin:left center;
  box-shadow:inset 0 0 0 1px rgba(22,36,59,.18);
}
.gfx-stamp b{
  font-family:'Oswald','Arial Narrow',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;
  padding:6px 9px;background:var(--navy);color:var(--paper);display:flex;align-items:center;
}
.gfx-stamp span{padding:7px 11px 6px;display:flex;align-items:center}
.gfx-stamp.on-dark{border-color:var(--amber);color:var(--amber);box-shadow:none}
.gfx-stamp.on-dark b{background:var(--amber);color:var(--navy-deep)}
.gfx-stamp.sm{transform:none;font-size:11px;letter-spacing:.18em;border-width:1.5px}
.gfx-stamp.sm b{font-size:13px;padding:4px 7px}
.gfx-stamp.sm span{padding:5px 9px 4px}

/* tape-measure scroll ruler along the bottom edge of the sticky header */
body.v2 header.gfx-has-tape{border-bottom:0}
.gfx-tape{
  position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;overflow:hidden;
  background-color:#2B3A52;
  background-image:
    linear-gradient(90deg,rgba(201,209,220,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,209,220,.3) 1px,transparent 1px);
  background-size:64px 6px,8px 3px;background-repeat:repeat-x;background-position:0 0,0 0;
}
.gfx-tape i{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
  background-color:var(--amber);
  background-image:
    linear-gradient(90deg,var(--navy-deep) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,24,40,.7) 1px,transparent 1px);
  background-size:64px 6px,8px 3px;background-repeat:repeat-x;
}

/* blueprint paper texture on two navy sections (kept to the edges, away from copy) */
.gfx-texture{position:relative;isolation:isolate}
.gfx-texture::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/mj/texture-blueprint.jpg) center/cover no-repeat;
  opacity:.16;mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 85%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 85%);
}
body.v2 #quote.gfx-texture{position:relative}

/* ---------- 4. DOOR CARDS (casing, jambs, threshold, hinged leaf) ---------- */
.gfx-door{border:1px solid var(--line);border-top:4px solid var(--navy)}
.gfx-door.mid{border-top-color:var(--amber)}
.gfx-door-open{
  position:relative;margin:18px 18px 0;height:210px;
  /* the opening behind the leaf: dark room with work-light spill */
  background:
    radial-gradient(120% 90% at 85% 55%,rgba(244,163,0,.55),rgba(244,163,0,0) 60%),
    linear-gradient(180deg,#0E1828,#16243B);
  /* head + jambs = casing */
  border:9px solid var(--navy);border-bottom:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 1px var(--line);
  perspective:1100px;
}
.gfx-door.mid .gfx-door-open{border-color:#1E2C44}
/* threshold / sill */
.gfx-door-open::after{
  content:"";position:absolute;left:-15px;right:-15px;bottom:-8px;height:8px;
  background:linear-gradient(180deg,var(--amber) 0 3px,var(--amber-deep) 3px 100%);
  box-shadow:0 2px 0 rgba(14,24,40,.25);
}
.gfx-leaf{
  position:absolute;inset:0;transform-origin:0 50%;
  transform:rotateY(0deg);transition:transform .7s cubic-bezier(.3,.7,.2,1),box-shadow .7s;
  box-shadow:0 0 0 rgba(0,0,0,0);background:var(--navy);overflow:hidden;
}
.gfx-leaf img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.02)}
/* navy/amber grade over the photo */
.gfx-leaf::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(14,24,40,.05) 0%,rgba(14,24,40,.35) 100%),
    linear-gradient(120deg,rgba(22,36,59,.45),rgba(22,36,59,0) 55%,rgba(244,163,0,.14));
  mix-blend-mode:normal;
}
/* recessed door panels drawn over the photo */
.gfx-leaf::after{
  content:"";position:absolute;inset:12px 14px;z-index:1;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(14,24,40,.25);
}
.gfx-door:nth-child(1) .gfx-leaf img{object-position:70% 42%}
.gfx-door:nth-child(2) .gfx-leaf img{object-position:50% 62%}
.gfx-door:nth-child(3) .gfx-leaf img{object-position:40% 45%}
.gfx-hinge{position:absolute;left:0;top:22px;z-index:2;width:5px;height:22px;background:#C9CED6;border:1px solid #5B6577;border-left:0}
.gfx-hinge.b{top:auto;bottom:22px}
.gfx-knob{
  position:absolute;right:16px;top:50%;z-index:2;width:11px;height:11px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFE2A0,var(--amber) 45%,#9A6200);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.gfx-door:hover .gfx-leaf,.gfx-door:focus-within .gfx-leaf{
  transform:rotateY(-28deg);box-shadow:14px 0 28px rgba(0,0,0,.45);
}
.gfx-door .v2-door-top{padding-top:22px}
.gfx-door a:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.gfx-door .btn-amber:focus-visible{outline-color:var(--navy)}

/* ---------- 3. LEAD-TO-ESTIMATE ---------- */
.gfx-together .v2-flow-grid{grid-template-columns:1fr;gap:36px}
.gfx-together .v2-head{max-width:820px}
.gfx-l2e{min-width:0}
.gfx-st-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.gfx-st{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.gfx-st:not(:last-child)::after{
  content:"";position:absolute;right:-36px;top:154px;width:28px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7h24M18 1l7 6-7 6' fill='none' stroke='%23D98A00' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center;
}
.gfx-st-h{display:flex;flex-direction:column;gap:2px;border-top:4px solid var(--navy);padding-top:10px}
.gfx-st.st-crm .gfx-st-h{border-top-color:var(--amber)}
.gfx-st-h .n{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.gfx-st-h strong{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;font-size:21px;text-transform:uppercase;color:var(--navy);line-height:1.1}
.gfx-st > p{margin:0;font-size:14px;color:var(--steel);line-height:1.45}
.gfx-st-box{
  position:relative;height:236px;background:var(--navy);border:1px solid #0E1828;overflow:hidden;
  background-image:linear-gradient(rgba(244,163,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,163,0,.06) 1px,transparent 1px);
  background-size:20px 20px;
}
/* website frame */
.gfx-browser{position:absolute;left:16px;right:16px;top:16px;bottom:16px;background:#1E2C44;border:1px solid #2B3A52}
.gfx-browser .bar{height:18px;display:flex;gap:5px;align-items:center;padding:0 8px;background:#0E1828}
.gfx-browser .bar i{width:6px;height:6px;border-radius:50%;background:#5B6577}
.gfx-browser .pg{padding:10px;display:flex;flex-direction:column;gap:10px}
.gfx-browser .row{display:flex;justify-content:space-between;align-items:center}
.gfx-browser .row b{display:block;width:70px;height:7px;background:#3A4B66}
.gfx-browser .call{font:600 9px/1 'Inter',sans-serif;letter-spacing:.14em;color:var(--navy-deep);background:var(--amber);padding:4px 6px}
.gfx-browser .form{display:flex;flex-direction:column;gap:6px;width:62%}
.gfx-browser .form i{display:block;height:12px;background:#2B3A52;border:1px solid #3A4B66}
.gfx-browser .send{align-self:flex-start;font:700 9px/1 'Inter',sans-serif;letter-spacing:.14em;color:var(--navy-deep);background:var(--amber);padding:6px 8px}
/* the lead card */
.gfx-lead{
  background:#fff;color:var(--ink);padding:9px 11px;border-left:4px solid var(--amber);
  box-shadow:0 10px 22px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.3;
}
.gfx-lead small{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);display:grid}
.gfx-lead small span{grid-area:1/1}
.gfx-lead small .b{color:var(--navy);opacity:0}
.gfx-lead b{font-family:'Oswald','Arial Narrow',sans-serif;font-size:16px;text-transform:uppercase;font-weight:600;color:var(--navy)}
.gfx-lead > span{color:var(--steel)}
.gfx-lead.l1{position:absolute;left:30px;right:30px;bottom:24px}
/* CRM column */
.gfx-col{position:absolute;inset:16px;display:flex;flex-direction:column;gap:8px}
.gfx-col .col-h{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:flex;justify-content:space-between}
.gfx-col .col-h em{font-style:normal;color:#C9D1DC}
.gfx-slot{min-height:78px;border:1px dashed #3A4B66}
.gfx-slot .gfx-lead{box-shadow:none}
.gfx-job{background:#1E2C44;border:1px solid #2B3A52;padding:9px 11px;color:#E7ECF3;font-size:12px;line-height:1.3}
.gfx-job span{display:block;color:var(--steel-light);font-size:11px;margin-top:3px}
/* estimate sheet */
.gfx-sheet{position:absolute;inset:16px;background:#fff;color:var(--ink);padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.gfx-sheet .h{font-family:'Oswald','Arial Narrow',sans-serif;text-transform:uppercase;font-size:14px;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:5px}
.gfx-sheet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.gfx-sheet li{display:flex;justify-content:space-between;gap:8px}
.gfx-sheet li span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.gfx-sheet li.more{color:var(--steel)}
.gfx-sheet .tot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:6px 8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.gfx-sheet .tot b{font-family:'Oswald','Arial Narrow',sans-serif;font-size:20px;letter-spacing:.02em;color:var(--amber);font-variant-numeric:tabular-nums}
/* rubber stamp */
.gfx-approved{
  position:absolute;right:26px;bottom:62px;z-index:2;
  font-family:'Oswald','Arial Narrow',sans-serif;font-weight:700;font-size:24px;letter-spacing:.12em;text-transform:uppercase;
  color:#B3261E;border:3px solid #B3261E;padding:2px 12px;transform:rotate(-12deg);
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.82) 75%,#000 100%);
}
.gfx-l2e-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--steel)}
.gfx-replay{
  min-height:44px;padding:0 16px;background:transparent;border:1.5px solid var(--navy);color:var(--navy);cursor:pointer;
  font-family:'Oswald','Arial Narrow',sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
}
.gfx-replay:hover,.gfx-replay:focus-visible{background:var(--navy);color:#fff;outline:none}

/* --- sequence states (JS adds .gfx-armed, then .is-run). No JS = end frame. --- */
.gfx-armed .gfx-lead.l1,
.gfx-armed .gfx-lead.l2,
.gfx-armed .gfx-sheet li,
.gfx-armed .gfx-sheet .tot,
.gfx-armed .gfx-approved{opacity:0}
.gfx-armed .gfx-lead.l1{transform:translateY(-150px)}
.gfx-armed .gfx-lead.l2{transform:translateX(-46px)}
.gfx-armed .gfx-approved{transform:rotate(-12deg) scale(1.9)}
.gfx-armed:not(.is-run) .gfx-lead small .a{opacity:1}

.is-run .gfx-browser .send{animation:gfxpress .35s .2s ease-out both}
.is-run .gfx-lead.l1{animation:gfxdrop 1.35s .35s cubic-bezier(.25,.8,.3,1) both}
.is-run .gfx-lead.l2{animation:gfxslidein .55s 1.4s cubic-bezier(.2,.8,.2,1) both}
.is-run .gfx-lead.l2 small .a{animation:gfxout .3s 2s ease both}
.is-run .gfx-lead.l2 small .b{animation:gfxin .3s 2s ease both}
.is-run .gfx-sheet li{animation:gfxrow .35s ease-out both}
.is-run .gfx-sheet li:nth-child(1){animation-delay:2.15s}
.is-run .gfx-sheet li:nth-child(2){animation-delay:2.3s}
.is-run .gfx-sheet li:nth-child(3){animation-delay:2.45s}
.is-run .gfx-sheet li:nth-child(4){animation-delay:2.6s}
.is-run .gfx-sheet li:nth-child(5){animation-delay:2.75s}
.is-run .gfx-sheet .tot{animation:gfxin .3s 2.9s ease both}
.is-run .gfx-approved{animation:gfxstamp .38s 3.55s cubic-bezier(.5,0,.75,0) both}
.is-run .st-brp .gfx-st-box{animation:gfxthud .3s 3.93s ease-out both}
@keyframes gfxpress{50%{transform:scale(.9);filter:brightness(1.2)}}
@keyframes gfxdrop{
  0%{opacity:0;transform:translateY(-150px)}
  30%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(70px)}
}
@keyframes gfxslidein{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes gfxin{from{opacity:0}to{opacity:1}}
@keyframes gfxout{to{opacity:0}}
@keyframes gfxrow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gfxstamp{from{opacity:0;transform:rotate(-12deg) scale(1.9)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes gfxthud{30%{transform:translate(1px,2px)}60%{transform:translate(-1px,-1px)}}

/* end frame (after the run, or reduced motion): lead stays in the CRM column, stamp on */
.is-done .gfx-lead.l1{opacity:0}
.is-done .gfx-lead.l2,.is-done .gfx-sheet li,.is-done .gfx-sheet .tot,.is-done .gfx-approved{opacity:1;transform:none;animation:none}
.is-done .gfx-approved{transform:rotate(-12deg)}
.is-done .gfx-lead.l2 small .a{opacity:0;animation:none}
.is-done .gfx-lead.l2 small .b{opacity:1;animation:none}
/* without JS the website frame still shows the lead card */
html:not(.gfx-js) .gfx-lead.l2 small .a{opacity:0}
html:not(.gfx-js) .gfx-lead.l2 small .b{opacity:1}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .gfx-st-list{gap:36px}
  .gfx-st:not(:last-child)::after{right:-32px}
}
@media(max-width:980px){
  .gfx-anno-on .v2-showcase{padding:0}
  .gfx-hero{background-position:0 0,0 0,0 0,70% 80%}
  .gfx-hero{
    background-image:
      linear-gradient(90deg,rgba(14,24,40,.95) 0%,rgba(14,24,40,.86) 60%,rgba(14,24,40,.72) 100%),
      linear-gradient(0deg,rgba(14,24,40,.55) 0%,rgba(14,24,40,0) 45%),
      linear-gradient(rgba(22,36,59,.55),rgba(22,36,59,.55)),
      url(../assets/mj/hero-tailgate.jpg);
  }
  .gfx-door-open{height:230px}
}
@media(max-width:820px){
  .gfx-st-list{grid-template-columns:1fr;gap:40px;max-width:460px}
  .gfx-st:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-32px;margin-left:-14px;transform:rotate(90deg)}
}
@media(max-width:600px){
  .gfx-hero::after{display:none}
  .gfx-hero{background-position:0 0,0 0,0 0,72% 100%}
  .gfx-hero{
    background-image:
      linear-gradient(180deg,rgba(14,24,40,.93) 0%,rgba(14,24,40,.86) 55%,rgba(14,24,40,.62) 100%),
      linear-gradient(0deg,rgba(14,24,40,0),rgba(14,24,40,0)),
      linear-gradient(rgba(22,36,59,.55),rgba(22,36,59,.55)),
      url(../assets/mj/hero-tailgate.jpg);
  }
  .gfx-hero::before{background-size:48px 48px,48px 48px,12px 12px,12px 12px}
  .gfx-stamp{font-size:12px;letter-spacing:.14em}
  .gfx-stamp.sm{font-size:12px;letter-spacing:.14em}
  .gfx-door-open{margin:14px 14px 0;height:170px;border-width:7px}
  .gfx-door-open::after{left:-12px;right:-12px}
  .gfx-door .v2-door-top{padding-top:20px}
  .gfx-st-h .n,.gfx-l2e-foot,.gfx-st > p{font-size:14px}
  .gfx-l2e-foot{flex-wrap:wrap}
  .gfx-stripe{height:8px}
  .gfx-approved{font-size:20px;right:18px;bottom:58px;padding:2px 9px}
}
@media(prefers-reduced-motion:reduce){
  .gfx-leaf{transition:none}
  .gfx-door:hover .gfx-leaf,.gfx-door:focus-within .gfx-leaf{transform:rotateY(-14deg)}
  .gfx-anno .grp,.gfx-anno .grp *,.gfx-anno .dim *{animation:none!important}
  .gfx-anno .grp.p1{opacity:1}
  .gfx-anno .ld,.gfx-anno .dimln{stroke-dashoffset:0!important}
  .gfx-anno .pt,.gfx-anno .dot,.gfx-anno text,.gfx-anno .dim *{opacity:1!important}
  .gfx-tape i{transition:none}
}