/* A shared pixel vocabulary for the portfolio, built with native SVG and CSS. */

.brand-avatar{position:relative;width:56px;height:56px;border:1px solid #c8b693;background:var(--cream);box-shadow:0 0 0 3px rgba(242,231,209,.07)}
.brand-avatar .avatar-torso{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.brand-avatar img{position:absolute;left:10.15625%;top:7.03125%;width:79.96%;height:82.66%;object-fit:contain;padding:0;z-index:1}
.site-header:after{content:'';position:absolute;bottom:-1px;left:0;height:2px;width:var(--scroll-width,0%);max-width:100%;background:repeating-linear-gradient(90deg,var(--amber) 0 6px,transparent 6px 8px);pointer-events:none}
.main-nav>a[aria-current='location']{color:var(--amber)}
.main-nav>a[aria-current='location']:after{transform:scaleX(1)}

/* The work is presented as open files in the same night-studio interface. */
.project-image{display:block;width:100%;border:1px solid #403b32;box-shadow:4px 4px 0 rgba(33,33,33,.14);transition:box-shadow .2s,border-color .2s}
.project-image.corner-frame:before,.project-image.corner-frame:after{display:none}
.project-window-bar{display:flex;align-items:center;gap:9px;height:31px;padding:0 11px;background:#292722;color:var(--cream);font:500 12px/1 var(--pixel);letter-spacing:.25px;text-align:left}
.project-window-bar>svg{width:17px;height:14px;color:var(--amber);flex:none;shape-rendering:crispEdges}
.project-media-count{margin-left:auto;color:#c7bdab;font:400 10px/1 var(--body);letter-spacing:0}
.project-image:hover,.project-image:focus-visible{border-color:#ad7b21;box-shadow:4px 4px 0 #bf8d2d}
.project-image img{width:100%;display:block}
.news-card .news-image{border:1px solid rgba(33,33,33,.3)}

/* Equal slots and optical compensation keep every full logo recognizable. */
.brands-inner{gap:30px;min-height:152px;padding-block:34px}
.brands-track{align-items:center;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:5px}
.brand-mark{display:flex;align-items:center;justify-content:center;flex:1 0 142px;height:64px;scroll-snap-align:start}
.brands-track .brand-mark img{width:var(--brand-width)!important;height:54px!important;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(.6) contrast(100);mix-blend-mode:multiply;opacity:.84}
.brand-honda{--brand-width:144px}.brand-yamaha{--brand-width:103px}.brand-fdc{--brand-width:148px}.brand-dislub-equador{--brand-width:96px}.brand-vanguarda{--brand-width:70px}

/* Shallow, isolated notches connect backgrounds without framing every section. */
.pixel-edge{position:relative;isolation:isolate}
.pixel-edge:before{content:'';position:absolute;inset:-11px 0 auto;height:12px;background:var(--edge-fill);pointer-events:none;z-index:0;clip-path:polygon(0 10px,16% 10px,16% 6px,18% 6px,18% 2px,23% 2px,23% 6px,25% 6px,25% 10px,100% 10px,100% 12px,0 12px)}
.pixel-edge:after{display:none}
.edge-paper{--edge-fill:var(--paper);--edge-pixel:#c78920}
.edge-dark{--edge-fill:var(--ink);--edge-pixel:var(--amber)}
.services:before,.contact:before{transform:scaleX(-1)}
.news-section:before{clip-path:polygon(0 10px,66% 10px,66% 6px,73% 6px,73% 10px,100% 10px,100% 12px,0 12px)}
.brand-strip.pixel-edge:before,.about.pixel-edge:before{inset-block-start:-2px;height:3px;clip-path:polygon(0 2px,22% 2px,22% 0,26% 0,26% 2px,100% 2px,100% 3px,0 3px);transform:none}
.pixel-edge>.container{position:relative;z-index:2}

/* A moving pixel follows the three illuminated stages. */
.process-path{margin-bottom:30px;gap:8px}
.process-path:before{top:25px;left:16.6667%;right:16.6667%;height:2px;background:#665331}
.process-path:after{content:'';position:absolute;top:23px;left:var(--process-position,16.6667%);width:6px;height:6px;background:var(--amber);box-shadow:-8px 0 0 #a16d19;transition:left 1.1s linear;transform:translateX(-3px);opacity:0;pointer-events:none;z-index:1}
.process-path.is-running:after{opacity:1}
.process-path li+li:before{display:none}
.process-path .step-number{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:2;width:90px;height:52px;padding:7px;background:var(--ink);border-color:#74613d;color:#c0a572;font-size:26px;line-height:1;margin-bottom:13px;transition:color .25s,background .25s,border-color .25s}
.process-icon{width:26px;height:26px;flex:none;overflow:visible;shape-rendering:crispEdges}
.process-path strong{font-size:14px;color:var(--cream);transition:color .25s}
.process-path small{font-size:10px;line-height:1.6;color:#c9c0b1}
.process-path li.is-active .step-number{background:#362e20;color:var(--amber);border-color:var(--amber)}
.process-path li.is-active strong{color:var(--amber)}
.process-path.is-running li.is-active .process-icon{animation:process-gesture 1.8s steps(5,end) both}
@keyframes process-gesture{0%,100%{transform:translateY(0)}25%{transform:translateY(-3px)}50%{transform:translateY(0)}65%{transform:translateY(-1px)}}

/* Illustrated services use larger type and clear descriptions. */
.services{background-color:var(--ink);background-image:linear-gradient(90deg,rgba(242,231,209,.018) 1px,transparent 1px),linear-gradient(rgba(242,231,209,.018) 1px,transparent 1px);background-size:32px 32px}
.services-heading{margin-bottom:32px;align-items:flex-end}
.services-heading .section-intro{color:#d2c9ba;font-size:16px;margin-bottom:0}
.service-buggy{width:116px;margin-right:18px}
.service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border:0}
.service,.service:nth-child(4n+1),.service:nth-child(2n+1){display:flex;flex-direction:column;gap:21px;padding:25px 23px;min-height:224px;border:1px solid #4b4438;background:#252422;position:relative;transition:background .2s,border-color .2s}
.service:before{content:'';position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:2px solid #9f7c36;border-left:2px solid #9f7c36;pointer-events:none}
.service:after,.service:not(:nth-child(4n)):after,.service:not(:nth-child(2n)):after{display:none}
.service .service-topline{display:flex;align-items:center;gap:15px;width:100%;height:43px;line-height:1}
.service-icon{display:block;width:48px;height:48px;flex:none;color:var(--amber);shape-rendering:crispEdges;overflow:visible;transition:transform .2s}
.service .service-number{color:#a69b88;font:500 14px/1 var(--pixel)}
.service .service-arrow{position:absolute;right:21px;top:24px;font:400 20px/1 var(--pixel);color:#a69b88}
.service h3{font-size:18px;line-height:1.35;margin:0 0 10px;letter-spacing:-.02em;color:var(--cream)}
.service p{font-size:14px;line-height:1.75;color:#d4cbbb;max-width:250px;margin:0}
.service:hover,.service:focus-visible{background:#2e2a22;border-color:#b58b39}
.service:hover>span{transform:none}
.service:hover .service-icon,.service:focus-visible .service-icon{transform:translateY(-3px)}
.service:hover .service-arrow,.service:focus-visible .service-arrow{color:var(--amber)}

@media(max-width:1150px){
  .brands-inner{gap:23px}
  .brand-mark{flex-basis:137px}
  .brands-track{gap:18px}
  .brands-next.icon-button{display:flex;flex:none}
  .service-grid{gap:12px}
  .service,.service:nth-child(4n+1),.service:nth-child(2n+1){padding:23px 18px;min-height:240px}
  .service h3{font-size:17px}
  .service p{font-size:13px}
}
@media(max-width:900px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service,.service:nth-child(4n+1),.service:nth-child(2n+1){min-height:201px}
  .process-path .step-number{width:78px;gap:5px;font-size:23px}
  .process-icon{width:23px;height:23px}
}
@media(max-width:740px){
  .brand-avatar{width:46px;height:46px}
  .brand-avatar img{padding:0}
  .brands-inner{padding-block:28px 30px;min-height:0}
  .brands-inner h2{margin-bottom:10px;font-size:9px}
  .brands-track{gap:16px;padding:0 24px 0 0;min-height:64px}
  .brand-mark{flex:0 0 144px;height:64px}
  .brands-next.icon-button{bottom:30px;right:-6px}
  .brand-strip{margin-bottom:0}
  .pixel-edge:before{inset-block-start:-7px;height:8px;clip-path:polygon(0 6px,16% 6px,16% 2px,26% 2px,26% 6px,100% 6px,100% 8px,0 8px)}
  .process-path{margin-bottom:27px;gap:4px}
  .process-path .step-number{width:80px;height:49px;font-size:24px;gap:7px;margin-bottom:13px}
  .process-path:before{top:24px}
  .process-path:after{top:22px}
  .process-path strong{font-size:13px}
  .process-path small{font-size:10px;max-width:105px;margin:5px auto 0}
  .services-heading{margin-bottom:25px;gap:15px}
  .services-heading .section-intro{font-size:14px}
  .service-buggy{width:78px;margin:0 0 3px}
  .service-grid{gap:11px}
  .service,.service:nth-child(4n+1),.service:nth-child(2n+1){padding:20px 16px;gap:17px;min-height:208px}
  .service .service-topline{height:34px;gap:11px}
  .service-icon{width:36px;height:36px}
  .service .service-number{font-size:12px}
  .service .service-arrow{right:13px;top:18px;font-size:18px}
  .service h3{font-size:16px;margin-bottom:8px;line-height:1.35}
  .service p{font-size:13px;line-height:1.65}
}
@media(max-width:370px){
  .brand-avatar{width:42px;height:42px}
  .process-path .step-number{width:72px;font-size:22px;gap:6px}
  .process-icon{width:21px;height:21px}
  .process-path small{font-size:9px}
  .service,.service:nth-child(4n+1),.service:nth-child(2n+1){padding:18px 13px;min-height:218px}
  .service-icon{width:32px;height:32px}
  .service .service-topline{gap:8px}
  .service h3{font-size:15px}
  .service p{font-size:12px}
  .service .service-arrow{display:none}
  .service-buggy{width:65px}
}
@media(prefers-reduced-motion:reduce){
  .process-path:after,.process-path .step-number,.process-path strong,.service-icon{transition:none}
  .process-path .process-icon{animation:none!important}
}