body[data-page="services"] #topbar nav a.on{background:var(--tang);color:var(--ink)}
body[data-page="services"] #topbar nav a.on .pop-kecil{color:var(--paper)}
body[data-page="services"] #fcount{bottom:auto;top:calc(var(--hh) + 14px);left:auto;right:var(--pad)}

#page-services{padding-bottom:170px}

.svc-hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;margin:5vh 0 7vh}
.svc-h{font-size:clamp(46px,7.6vw,128px)}
.svc-lead{margin:3vh 0 2vh;max-width:26ch}
.svc-intro{font-size:13px;letter-spacing:.03em;max-width:52ch}
.svc-jump{display:flex;flex-wrap:wrap;gap:12px;margin-top:4vh}
.btn-tang,.btn-line{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 18px;border:var(--bw) solid var(--ink);transition:transform .2s var(--e),box-shadow .2s var(--e),background .2s,color .2s}
.btn-tang{background:var(--tang);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-tang:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.svc-bigframe img{aspect-ratio:4/3;height:auto}
#page-services img{height:auto}
#page-services .fcell img{height:160px}

.svc-sheet{display:flex;gap:16px;overflow-x:auto;padding:20px 4px 30px;scroll-snap-type:x proximity;scrollbar-width:thin;touch-action:pan-x pan-y}
.svc-sheet.drag{scroll-snap-type:none;cursor:grabbing}

.svc-sec{margin-top:11vh;scroll-margin-top:calc(var(--hh) + 24px)}

.sleeves{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start}
.sleeve{position:relative;background:var(--ink);color:var(--paper);padding:0 14px;outline:var(--bw2) solid transparent;outline-offset:6px;transition:outline-color .25s,transform .35s var(--e)}
.sleeve:nth-child(1){transform:rotate(-1deg)}
.sleeve:nth-child(3){transform:rotate(.8deg)}
.sleeve.in:hover{transform:translateY(-6px) rotate(0)}
.sleeve.is-on{outline-color:var(--tang);transform:rotate(0)}
.sleeve::before,.sleeve::after{content:"";display:block;height:14px;opacity:.85;
  background:repeating-linear-gradient(90deg,transparent 0 8px,var(--paper) 8px 17px,transparent 17px 25px)}
.sleeve::before{margin-top:12px}
.sleeve::after{margin-bottom:12px}
.edge{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.24em;color:var(--tang);padding:8px 2px}
.edge-b{padding-top:6px}
.sleeve-ph{position:relative;overflow:hidden;background:var(--dark)}
.sleeve-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--e),filter .4s}
.sleeve:hover .sleeve-ph img{transform:scale(1.05)}
.sleeve-ph::before,.sleeve-ph::after{content:"";position:absolute;z-index:2;width:28px;height:28px;pointer-events:none;border:0 solid var(--paper)}
.sleeve-ph::before{left:12px;top:12px;border-left-width:3px;border-top-width:3px}
.sleeve-ph::after{right:12px;bottom:12px;border-right-width:3px;border-bottom-width:3px}
.loaded{position:absolute;z-index:3;right:14px;top:18px;background:var(--tang);color:var(--ink);border:var(--bw) solid var(--ink);
  font-family:var(--fd);font-size:22px;text-transform:uppercase;padding:4px 14px;transform:rotate(6deg) scale(.6);opacity:0;transition:opacity .2s,transform .35s var(--e)}
.sleeve.is-on .loaded{opacity:1;transform:rotate(6deg) scale(1)}
.sleeve-body{padding:16px 2px 6px}
.sleeve-body h3{font-family:var(--fd);font-weight:400;font-size:clamp(24px,2.3vw,34px);text-transform:uppercase;line-height:1}
.price{font-family:var(--fd);font-size:clamp(28px,2.8vw,42px);color:var(--tang);line-height:1.1;margin-top:6px}
.sleeve-line{font-family:var(--fs);font-style:italic;font-size:19px;line-height:1.3;margin:10px 0 14px;opacity:.9}

.drawer{border-top:var(--bw) solid var(--paper);border-bottom:var(--bw) solid var(--paper)}
.drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";font-family:var(--fd);font-size:22px;line-height:1;transition:transform .3s var(--e)}
.drawer[open] summary::after{transform:rotate(45deg);color:var(--tang)}
.drawer summary:focus-visible{outline:3px solid var(--tang);outline-offset:2px}
.drawer ul{padding:4px 0 14px}
.drawer li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:12px;letter-spacing:.03em;padding:7px 0;border-top:1px dashed rgba(242,236,226,.25)}
.drawer li::before{content:"";width:8px;height:8px;margin-top:6px;background:var(--tang)}
.drawer li:first-child{border-top:0}
.drawer[open] ul{animation:pull .45s var(--e)}
@keyframes pull{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.pick{width:100%;margin:14px 0 4px;background:var(--paper);color:var(--ink);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px;transition:background .2s,color .2s}
.pick:hover{background:var(--tang)}
.pick[aria-pressed="true"]{background:var(--tang);color:var(--ink)}
.svc-note{margin-top:28px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.addon-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:var(--gap);align-items:start}
.addon-fig{position:sticky;top:calc(var(--hh) + 28px)}
.addon-fig img{aspect-ratio:4/5}
.addon-list .blk-h{margin-top:0}
.addon-list .blk-h ~ .blk-h{margin-top:6vh}
.addon{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;border-top:var(--bw) solid var(--ink);padding:16px 4px}
.addon:has(+ .blk-h),.addon:last-child{border-bottom:var(--bw) solid var(--ink)}
.addon-name b{display:block;font-weight:400;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.addon-name span{display:block;font-family:var(--fs);font-style:italic;font-size:17px;opacity:.8;margin-top:2px}
.addon-price{font-family:var(--fd);font-size:20px;text-align:right;white-space:nowrap}
.addon-price small{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.addon.has-qty{background:linear-gradient(90deg,var(--tang) 0 6px,transparent 6px)}
.addon.has-qty .addon-name{padding-left:12px}
.stepper{display:flex;align-items:stretch;border:var(--bw) solid var(--ink)}
.stepper button{width:42px;height:42px;font-family:var(--fd);font-size:22px;line-height:1;transition:background .2s,color .2s}
.stepper button:hover{background:var(--ink);color:var(--paper)}
.stepper button:disabled{opacity:.3;pointer-events:none}
.stepper output{min-width:42px;display:grid;place-items:center;font-size:15px;font-weight:700;border-inline:var(--bw) solid var(--ink)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.steps .stat span{display:block;margin-top:10px}
.steps .stat p{font-family:var(--fs);font-style:italic;font-size:18px;line-height:1.3;margin-top:8px}

.svc-reel{margin-top:9vh;border-color:var(--ink)}
.svc-reel .open-roll{font-family:var(--fd);font-size:clamp(18px,2vw,26px);text-transform:uppercase;background:var(--tang);color:var(--ink);padding:14px 22px;transition:transform .2s}
.svc-reel .open-roll:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}
.svc-small{margin-top:4vh;font-size:11px;letter-spacing:.1em;text-transform:uppercase;max-width:70ch;opacity:.75}

.rollbar{position:fixed;left:var(--pad);bottom:16px;z-index:65;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);
  border:var(--bw) solid var(--ink);padding:8px 8px 8px 14px;max-width:calc(100vw - 2 * var(--pad));transform:translateY(calc(100% + 30px));transition:border-color .25s,transform .45s var(--e)}
.rollbar.show,.rollbar.has{transform:none}
.rollbar.has{border-color:var(--tang)}
.rb-can{width:26px;height:34px;border:var(--bw) solid var(--paper);position:relative;flex:0 0 auto}
.rb-can::before{content:"";position:absolute;left:4px;right:4px;top:-8px;height:5px;background:var(--paper)}
.rb-can i{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--tang);transition:height .4s var(--e)}
.rb-text{display:flex;flex-direction:column;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;min-width:0}
.rb-text b{font-weight:400}
.rb-text span{color:var(--tang);white-space:nowrap}
.rb-go{background:var(--tang);color:var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:13px 16px;white-space:nowrap}
.rb-go:hover{background:var(--paper)}
.rollbar.bump{animation:bump .5s var(--e)}
@keyframes bump{30%{transform:translateY(-8px)}}

.roll{margin:auto;padding:0;border:var(--bw2) solid var(--ink);background:var(--paper);color:var(--ink);width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
.roll::backdrop{background:rgba(21,16,9,.88)}
.roll,.roll *{cursor:auto!important}
.roll button,.roll select,.roll label{cursor:pointer!important}
.roll input,.roll textarea{cursor:text!important}
.roll[open]{animation:rollIn .45s var(--e)}
@keyframes rollIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.roll-in{padding:clamp(18px,3.4vw,36px)}
.roll-top{display:flex;justify-content:space-between;align-items:start;gap:16px}
.roll-top h2{font-family:var(--fd);font-weight:400;font-size:clamp(40px,6vw,72px);text-transform:uppercase;line-height:.9}
.roll-x{background:var(--ink);color:var(--paper);font-family:var(--fd);font-size:16px;text-transform:uppercase;padding:10px 14px}
.roll-x:hover{background:var(--tang);color:var(--ink)}
.roll-strip{height:14px;margin:18px 0 6px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 17px)}
.roll-items li{display:grid;grid-template-columns:52px 1fr auto auto;gap:12px;align-items:center;border-top:var(--bw) solid var(--ink);padding:12px 2px}
.roll-items li:last-child{border-bottom:var(--bw) solid var(--ink)}
.roll-items .fr{font-family:var(--fd);color:var(--tang);font-size:18px}
.roll-items .nm{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.roll-items .nm small{display:block;font-family:var(--fs);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;opacity:.75}
.roll-items .am{font-family:var(--fd);font-size:18px;white-space:nowrap}
.roll-items .rm{border:var(--bw) solid var(--ink);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px}
.roll-items .rm:hover{background:var(--ink);color:var(--paper)}
.roll-empty{font-family:var(--fs);font-style:italic;font-size:20px;padding:14px 0}
.roll-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16px 0 4px;background:var(--ink);color:var(--paper);padding:12px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.roll-total b{font-family:var(--fd);font-weight:400;font-size:clamp(24px,3.4vw,36px);color:var(--tang);letter-spacing:.02em}
.roll-warn{font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-left:var(--bw2) solid var(--tang);padding:6px 10px;margin-top:10px}

.roll-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:22px}
.f{display:flex;flex-direction:column;gap:6px}
.f span{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.f-wide{grid-column:1 / -1}
.f input,.f select,.f textarea{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:var(--bw) solid var(--ink);padding:11px 12px;width:100%;appearance:none;-webkit-appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--tang);box-shadow:4px 4px 0 var(--ink)}
.f input[aria-invalid="true"]{border-color:var(--tang);background:rgba(241,74,0,.08)}
.roll-error{font-size:12px;letter-spacing:.06em;background:var(--tang);color:var(--ink);padding:10px 12px}
.roll-send{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.roll-send button{font-family:var(--fd);font-size:clamp(17px,2vw,22px);text-transform:uppercase;padding:16px 12px;border:var(--bw) solid var(--ink);transition:transform .2s var(--e),box-shadow .2s var(--e)}
.send-wa{background:var(--tang);color:var(--ink)}
.send-mail{background:var(--ink);color:var(--paper)}
.roll-send button:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.send-mail:hover{box-shadow:5px 5px 0 var(--tang)}
.roll-fine{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}

@media (max-width:1100px){
  .sleeves{grid-template-columns:1fr 1fr}
  .sleeve:nth-child(3){grid-column:1 / -1;max-width:calc(50% - var(--gap) / 2)}
}
@media (max-width:960px){
  .svc-hero,.addon-grid{grid-template-columns:1fr}
  .addon-fig{position:static;max-width:420px}
  .steps{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sleeves{grid-template-columns:1fr}
  .sleeve:nth-child(3){max-width:none}
  .sleeve:nth-child(n){transform:none}
  .addon{grid-template-columns:1fr auto;row-gap:10px}
  .addon-name{grid-column:1 / -1}
  .addon-price{text-align:left}
  body[data-page="services"] #fcount{display:none}
  .addon-fig{display:none}
  .rollbar{left:10px;right:80px;bottom:10px;max-width:none;gap:10px;padding:6px 6px 6px 10px}
  .rb-can{width:20px;height:28px}
  .rb-text{flex:1;font-size:10px;letter-spacing:.06em}
  .rb-text span{white-space:normal}
  .rb-go{padding:12px 10px;font-size:10px;letter-spacing:.08em;white-space:normal;max-width:84px;line-height:1.3}
  .roll-form,.roll-send{grid-template-columns:1fr}
  .roll-items li{grid-template-columns:40px 1fr auto;row-gap:6px}
  .roll-items .rm{grid-column:3}
  .roll-items .am{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .sleeve,.sleeve:nth-child(n){transform:none!important}
  .loaded{transform:rotate(6deg)!important}
}