/* Machine Mutiny, September 2026: original art, brief reactions, steady contact. */
/* Fine screen-print grain stays on display type and fields, away from contact copy. */
@supports (background-clip:text){
  .hero h1,.services h2{
    background-image:radial-gradient(circle,rgba(223,229,231,.11) .45px,transparent .85px),linear-gradient(var(--ink),var(--ink));
    background-size:4px 4px,100% 100%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
  }
}
.services{background-image:radial-gradient(rgba(7,30,53,.065) .65px,transparent .85px);background-size:7px 7px}
.hero-stage:before{content:'';position:absolute;inset:28% 14% 10%;background-image:radial-gradient(var(--blue) .75px,transparent 1px);background-size:5px 5px;opacity:.17;mask-image:radial-gradient(ellipse,#000 5%,transparent 70%);pointer-events:none}
.equipment-art{filter:drop-shadow(2px 4px 0 rgba(7,30,53,.08))}
@media(forced-colors:active){.hero h1,.services h2{background:none;color:CanvasText}.hero-stage:before{display:none}}
.machine-scene{transform:none;transition:none;touch-action:manipulation}
.machine-scene:hover{transform:none}
.machine-visual{display:block;position:relative;aspect-ratio:3/2;isolation:isolate}
.machine-unit{position:absolute;inset:0;pointer-events:none;will-change:auto}
.mower-unit{transform-origin:38% 87%}
.generator-unit{transform-origin:83% 84%}
.machine-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.mower-layer{clip-path:inset(0 33.2% 0 0)}
.generator-layer{clip-path:inset(0 0 0 66.8%)}
.blink-layer{opacity:0}
.mower-blink{clip-path:polygon(29% 55%,54% 55%,54% 66.5%,29% 66.5%)}
.generator-blink{clip-path:polygon(70% 63%,86% 63%,86% 70%,70% 70%)}
.mower-unit.is-blinking .blink-layer,.generator-unit.is-blinking .blink-layer{opacity:1}
.exhaust{position:absolute;width:19%;aspect-ratio:1;pointer-events:none}
.exhaust-mower{left:12%;top:42%;--drift:-55px;--twist:-20deg}
.exhaust-generator{left:84%;top:48%;--drift:36px;--twist:18deg}
.puff{position:absolute;inset:0;background-image:url('assets/exhaust-puffs.webp');background-repeat:no-repeat;opacity:0;transform-origin:50% 85%}
.puff-one{background-size:506.3% auto;background-position:0 62%}
.puff-two{background-size:425.88% auto;background-position:25.81% 62%}
.puff-three{background-size:360.8% auto;background-position:59.81% 62%}
.comic-sound{position:absolute;left:8%;top:38%;font-family:Caveat,cursive;font-size:clamp(1.3rem,3vw,2.6rem);font-weight:700;line-height:1;rotate:-13deg;opacity:0;pointer-events:none}
.machine-scene .speech{min-width:17%;max-width:40%;right:3%;top:24%;font-size:clamp(1.3rem,2.8vw,2rem);z-index:4}
.machine-scene .break-sign{left:22%;top:20%;transform-origin:50% 0;rotate:0deg;transition:none}
.machine-scene:hover .break-sign{rotate:0deg}
.scene-controls{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:0 auto 4px;position:relative;z-index:4}
.scene-hint{font-family:Caveat,cursive;font-size:1.25rem;font-weight:700}
.motion-toggle{font-size:.75rem;line-height:1.2;font-weight:700;min-height:44px;background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;padding:8px 3px}
.motion-toggle[hidden]{display:none}
.hero-bottom .button-yellow{box-shadow:3px 4px 0 var(--ink)}
.hero-bottom .button-yellow:hover{box-shadow:4px 5px 0 var(--ink)}
.header-phone{border:1.5px solid var(--ink);border-radius:99px;padding:10px 18px;box-shadow:2px 3px 0 var(--ink)}
.option-art{width:100%;aspect-ratio:1.1;background-image:url('assets/service-scenes.webp');background-repeat:no-repeat;margin:0 auto 20px}
.option-shop{background-size:335.185% auto;background-position:0 50%}
.option-mobile{background-size:285.789% auto;background-position:45.892% 50%}
.option-pickup{background-size:284.293% auto;background-position:100% 50%}
.option{padding-top:12px}
.option h3{font-size:1.6rem}
.option-tag{font-weight:800}
.service-options .options-heading h2{max-width:650px}
.service-item h3{font-weight:900}

/* The gag is a sequence of small physical beats, never a moving call button. */
@keyframes mower-sputter{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(-3px,1px) rotate(-.7deg)}24%{transform:translate(3px,-2px) rotate(.6deg)}36%{transform:translate(-2px,0) rotate(-.4deg)}48%{transform:translate(2px,-1px) rotate(.3deg)}63%{transform:translate(-1px,0)}80%{transform:translate(1px,0)}}
@keyframes generator-cough{0%,100%{transform:translate(0,0) rotate(0)}18%{transform:translate(0,-4px) rotate(1deg)}34%{transform:translate(-2px,1px) rotate(-.8deg)}50%{transform:translate(2px,-2px) rotate(.6deg)}74%{transform:translate(-1px,0) rotate(-.3deg)}}
@keyframes sign-rattle{0%,100%{rotate:0deg}20%{rotate:8deg}42%{rotate:-6deg}65%{rotate:3deg}84%{rotate:-1deg}}
@keyframes exhaust-drift{0%{opacity:0;transform:translate(0,8px) scale(.2) rotate(0)}18%{opacity:.9}65%{opacity:.65}100%{opacity:0;transform:translate(var(--drift),-48px) scale(1.05) rotate(var(--twist))}}
@keyframes comic-pop{0%,100%{opacity:0;transform:scale(.8) translateY(5px)}20%,75%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes reply-pop{0%{scale:.94;rotate:-2deg}60%{scale:1.035;rotate:1deg}100%{scale:1;rotate:0deg}}
@media(prefers-reduced-motion:no-preference){
  .mower-unit.is-sputtering{animation:mower-sputter 620ms ease-out}
  .mower-unit.is-sputtering .break-sign{animation:sign-rattle 780ms ease-out}
  .generator-unit.is-sputtering{animation:generator-cough 540ms ease-out}
  .machine-unit.is-sputtering .puff{animation:exhaust-drift 1150ms ease-out both}
  .machine-unit.is-sputtering .puff-two{animation-delay:140ms}
  .machine-unit.is-sputtering .puff-three{animation-delay:310ms}
  .machine-scene.is-reacting .comic-sound{animation:comic-pop 850ms ease-out both}
  .machine-scene.is-answering .speech{animation:reply-pop 300ms ease-out}
}
@media(min-width:801px){
  .option-art{height:clamp(210px,23vw,300px);max-width:330px;aspect-ratio:auto}
  .hero{padding-top:18px}
  .hero h1{font-size:clamp(3.6rem,6.35vw,6.1rem);line-height:1.03}
  .hero-stage{margin-top:-35px;margin-bottom:-40px}
  .machine-scene{width:min(830px,75%);margin:0 auto}
  .hero-bottom{padding-top:0}
  .note-left{left:1%;top:43%;font-size:1.65rem;max-width:130px}
  .hero-location{right:1%;top:30%;width:115px}
  .hero-location img{height:115px}
  .hero-location .hand-note{font-size:1.35rem}
  .explore-link{margin-top:0}
}
@media(min-width:1200px) and (max-height:900px){
  .hero h1{font-size:clamp(3.8rem,5.7vw,5.2rem)}
  .machine-scene{width:min(735px,70%)}
  .hero-stage{margin-top:-38px;margin-bottom:-40px}
  .hero-bottom p{font-size:1.0625rem;margin:6px 0 13px}
  .scene-controls{margin-top:-2px}
}
@media(max-width:1100px) and (min-width:801px){
  .desktop-nav{gap:17px}
  .header-phone{padding:8px 12px}
  .note-left{font-size:1.3rem;max-width:85px;left:0}
  .hero-location{width:95px;right:0}
  .hero-location .hand-note{font-size:1.15rem}
  .hero-stage{margin-bottom:-35px}
}
@media(max-width:800px){
  .hero-stage{margin-top:-4px;margin-bottom:-12px}
  .machine-scene{width:min(600px,95%);margin:0 auto}
  .machine-scene .speech{font-size:1.45rem;padding:11px 15px}
  .scene-controls{gap:12px;margin-top:-3px}
  .scene-hint{font-size:1.125rem}
  .motion-toggle{font-size:.6875rem}
  .option,.option+.option{padding:28px 0;display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);column-gap:25px;align-items:start}
  .option-art{grid-column:1;grid-row:1 / 4;align-self:center;margin:0;aspect-ratio:1.1}
  .option h3,.option p,.option .option-tag{grid-column:2}
  .option h3{font-size:1.4rem}
  .option p{font-size:1.0625rem;margin-top:9px}
  .option .option-tag{margin-top:12px;font-size:.625rem}
}
@media(max-width:600px){
  .service-grid{grid-template-columns:1fr;row-gap:0;margin-top:25px}
  .service-item,.service-item:nth-child(n+3){display:grid;grid-template-columns:minmax(115px,44%) minmax(0,1fr);column-gap:18px;align-content:center;min-height:205px;padding:25px 0;border-left:0;border-top:1px solid var(--line);text-align:left}
  .service-item .equipment-art{grid-column:1;grid-row:1 / 4;margin:0;align-self:center;width:100%;max-width:none}
  .service-item h3,.service-item p,.service-item .service-quip{grid-column:2}
  .service-item h3{font-size:1.25rem;line-height:1.1;margin:8px 0}
  .service-item p{font-size:1rem;line-height:1.35}
  .service-item .service-quip{font-size:1.22rem;line-height:1.12;margin-top:11px}
  .service-item .service-number,.service-item:nth-child(n+3) .service-number{top:16px;left:0}
  .service-item p br{display:none}
  .other-equipment{margin-top:0;padding-top:24px}
  .options-heading{margin-bottom:18px}
}
@media(max-width:480px){
  .hero{padding-top:17px}
  .hero h1{font-size:clamp(1.7rem,7.1vw,2.13rem);line-height:1.1}
  .machine-scene{width:100%}
  .machine-scene .speech{font-size:1.3rem;right:4%;top:22%;padding:10px 13px;max-width:40%}
  .machine-scene .break-sign{font-size:1.35rem;left:21%;top:17%;padding:6px 9px}
  .hero-stage{margin-top:-2px;margin-bottom:-17px}
  .hero-bottom p{margin:9px 0 15px}
  .hero-bottom{padding-bottom:9px}
  .explore-link{margin-top:0}
  .scene-controls{gap:14px}
  .option,.option+.option{column-gap:18px;grid-template-columns:minmax(100px,37%) minmax(0,1fr)}
  .option h3{font-size:1.25rem}
  .option p{font-size:1rem;line-height:1.4}
  .mobile-contact a:first-child{background:var(--ink);color:var(--yellow)}
  .mobile-contact a:last-child{background:var(--yellow);color:var(--ink)}
}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation:none!important;transition:none!important}
html.motion-paused .reveal{opacity:1;translate:none}
html.motion-paused .blink-layer,html.motion-paused .puff,html.motion-paused .comic-sound{opacity:0!important}
html.motion-paused .machine-unit{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .machine-unit{transform:none!important}
  .blink-layer,.puff,.comic-sound{opacity:0!important}
  .scene-hint{display:none}
}