/* 04. services — taped note card + cassette shelf (ref: image 42 / mobile ref) */
#services{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}
#services .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--stage-w);height:var(--stage-h);z-index:2}
#services .stage > *{position:absolute}
#gl-services{inset:0;width:100%;height:100%;z-index:3;opacity:0;transition:opacity .9s ease .1s;touch-action:pan-y}
#gl-services.ready{opacity:1}
#services.hot #gl-services{cursor:pointer}

#services .eyebrow{left:calc(150 * var(--u));top:calc(160 * var(--u));z-index:6}

/* the card is HTML so every service can be swapped in place */
#services .card{left:calc(150 * var(--u));top:calc(250 * var(--u));
  width:calc(498 * var(--u));height:calc(490 * var(--u));z-index:4;
  border-radius:calc(13 * var(--u));
  background:linear-gradient(162deg,#F6EBDB 0%,#F2E4D0 55%,#EEDDC6 100%);
  box-shadow:calc(7 * var(--u)) calc(9 * var(--u)) calc(14 * var(--u)) rgba(120,84,48,.22),
             calc(1 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)) rgba(120,84,48,.18),
             inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.35)}
#services .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.35'/></svg>")}
#services .tape{position:absolute;left:calc(319 * var(--u));top:calc(-36 * var(--u));
  width:calc(120 * var(--u));height:calc(50 * var(--u));transform:rotate(11.5deg);z-index:2;
  background:linear-gradient(180deg,rgba(204,148,106,.92),rgba(190,132,92,.9));
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(110,70,36,.18);
  clip-path:polygon(0 4%,3% 0,97% 2%,100% 8%,98% 100%,2% 96%)}
#services .card-in > *{position:absolute;left:calc(51 * var(--u))}
#services .card-in{transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
#services .card.swap .card-in{opacity:0;transform:translateX(calc(-10 * var(--u)))}
#services .num{top:calc(30 * var(--u));font-family:var(--serif);font-weight:700;
  font-size:calc(36 * var(--u));line-height:1;color:#B13A1C;letter-spacing:-.01em}
#services .title{top:calc(74 * var(--u));font-family:var(--serif);font-weight:700;
  font-size:calc(51 * var(--u));line-height:1;color:#1E1712;text-transform:uppercase;
  letter-spacing:-.005em;transform:scaleX(.88);transform-origin:0 0;white-space:nowrap}
#services .rule{top:calc(155 * var(--u));width:calc(26 * var(--u));height:calc(1.6 * var(--u));background:#2A2118}
#services .body{top:calc(183 * var(--u));width:calc(382 * var(--u));font-family:var(--mono);font-weight:400;
  font-size:max(var(--mt,0px), calc(15 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(25.5 * var(--u)));color:#3D3226}
#services .list{top:calc(344 * var(--u));list-style:none;font-family:var(--mono);font-weight:400;
  font-size:max(var(--mt,0px), calc(14.5 * var(--u)));line-height:calc(26 * var(--u));letter-spacing:.03em;
  text-transform:uppercase;color:#2A2018}
#services .next{position:absolute;left:calc(383 * var(--u));top:calc(428 * var(--u));
  width:calc(70 * var(--u));height:calc(70 * var(--u));border:0;background:none;border-radius:50%;
  color:#B13A1C;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.3,1),background-color .3s ease,color .3s ease}
#services .next svg{width:100%;height:100%;display:block}
@media (hover:hover) and (pointer:fine){ #services .next:hover{background:#B13A1C;color:#F6EBDB} }
#services .next:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

#services .shine{left:0;top:0;width:calc(90 * var(--u));height:calc(60 * var(--u));z-index:5;
  stroke:#5A4A3A;stroke-width:2.6;opacity:0;transition:opacity .4s ease}
#services .shine.on{opacity:1}

#services .note-a,#services .note-b,#services .arrow-a,#services .under-b{display:none}

/* ================= mobile: 530 x 941 ================= */
@media (max-width:860px){
  #services .eyebrow{left:calc(48 * var(--u));top:calc(92 * var(--u))}
  #services .card{left:calc(48 * var(--u));top:calc(140 * var(--u));
    width:calc(434 * var(--u));height:calc(298 * var(--u));border-radius:calc(8 * var(--u))}
  #services .tape{left:calc(300 * var(--u));top:calc(-24 * var(--u));width:calc(76 * var(--u));
    height:calc(30 * var(--u));transform:rotate(12deg);background:rgba(222,196,156,.86)}
  #services .card-in > *{left:calc(31 * var(--u))}
  #services .num{top:calc(25 * var(--u));font-size:calc(22 * var(--u))}
  #services .title{top:calc(52 * var(--u));font-size:calc(33 * var(--u))}
  #services .rule{top:calc(100 * var(--u));width:calc(20 * var(--u));height:calc(1.3 * var(--u))}
  #services .body{top:calc(121 * var(--u));width:calc(372 * var(--u));font-weight:400;
    font-size:max(var(--mt,0px), calc(11.4 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(17.5 * var(--u)))}
  #services .list{top:calc(196 * var(--u));font-size:max(var(--mt,0px), calc(10.6 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(18 * var(--u)))}
  #services .next{left:calc(222 * var(--u));top:calc(274 * var(--u));width:calc(42 * var(--u));height:calc(42 * var(--u))}

  #services .note-a,#services .note-b,#services .arrow-a,#services .under-b{display:block}
  #services .note-a{left:calc(402 * var(--u));top:calc(488 * var(--u));font-size:max(var(--mt,0px), calc(15 * var(--u)));
    line-height:1.1;transform:rotate(-11deg);transform-origin:0 0}
  #services .arrow-a{left:calc(408 * var(--u));top:calc(548 * var(--u));width:calc(40 * var(--u));height:calc(48 * var(--u))}
  #services .note-b{left:calc(48 * var(--u));top:calc(676 * var(--u));font-size:max(var(--mt,0px), calc(15 * var(--u)));
    line-height:1.08;transform:rotate(-14deg);transform-origin:0 0}
  #services .under-b{left:calc(54 * var(--u));top:calc(730 * var(--u));width:calc(30 * var(--u));height:calc(8 * var(--u))}
  #services .shine{width:calc(50 * var(--u));height:calc(34 * var(--u));stroke-width:2.2}
}