/* ===== Services list (relevn-style hover marquee rows) ===== */
.sv-list{border-top:1px solid #2a2f36;border-inline:1px solid #1d2126}
.sv-row{position:relative;display:block;height:120px;border-bottom:1px solid #2a2f36;overflow:hidden;background:#000;transition:background .35s ease}
.sv-title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 20px;
  font-size:clamp(22px,2.7vw,38px);font-weight:700;letter-spacing:-.035em;text-transform:uppercase;color:#f2f0eb;transition:opacity .25s,transform .45s var(--ease)}
.sv-marquee{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;opacity:0;transition:opacity .3s}
.sv-track{display:flex;align-items:center;gap:56px;padding-left:56px;width:max-content;animation:svScroll 14s linear infinite;animation-play-state:paused}
.sv-pill{width:150px;height:66px;border-radius:999px;overflow:hidden;flex:none;background:#ddd}
.sv-pill img{width:100%;height:100%;object-fit:cover;object-position:top left;filter:saturate(.9)}
.sv-txt{font-size:clamp(22px,2.6vw,36px);font-weight:400;letter-spacing:-.01em;text-transform:uppercase;color:#0a0a0a;white-space:nowrap}
.sv-row:hover,.sv-row:focus-visible{background:#f7f7f5}
.sv-row:hover .sv-title,.sv-row:focus-visible .sv-title{opacity:0;transform:translateY(-30%)}
.sv-row:hover .sv-marquee,.sv-row:focus-visible .sv-marquee{opacity:1}
.sv-row:hover .sv-track,.sv-row:focus-visible .sv-track{animation-play-state:running}
@keyframes svScroll{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .sv-row{height:88px}
  .sv-pill{width:96px;height:44px}
  .sv-track{gap:28px;padding-left:28px}
  .sv-title{font-size:20px}
}
@media (hover:none){
  /* touch: show the strip on tap (focus) — titles stay readable by default */
  .sv-row:active{background:#f7f7f5}
}

/* ===== SVG-style mask reveal statement ===== */
.mask-sec{padding:120px 0 40px}
.mask-box{--x:50%;--y:50%;--s:0px;position:relative;width:min(1240px,100% - 40px);margin-inline:auto;height:clamp(420px,42vw,600px);
  border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#050505;display:grid;place-items:center;cursor:none}
.mask-base,.mask-reveal p{max-width:980px;padding:0 40px;text-align:center;font-size:clamp(28px,4vw,56px);font-weight:600;line-height:1.12;letter-spacing:-.035em}
.mask-base{color:#3c3c3c}
.mask-base span{color:#6a6a6a}
.mask-reveal{position:absolute;inset:0;display:grid;place-items:center;background:var(--accent);color:#0a0a0a;
  -webkit-mask-image:radial-gradient(circle var(--s) at var(--x) var(--y),#000 99%,transparent 100%);
          mask-image:radial-gradient(circle var(--s) at var(--x) var(--y),#000 99%,transparent 100%)}
.mask-reveal b{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:900}
.mask-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#555;transition:opacity .4s}
.mask-box.active .mask-hint{opacity:0}
@media (hover:none){.mask-box{cursor:auto}.mask-hint{content:"Tap & drag to reveal"}}
@media (max-width:760px){.mask-sec{padding:80px 0 20px}.mask-box{height:440px;border-radius:22px}.mask-base,.mask-reveal p{padding:0 22px;font-size:27px}}

/* ===== Following pointer (vanilla port of Aceternity FollowerPointerCard) ===== */
@media (hover:hover) and (pointer:fine){ [data-pointer], [data-pointer] *{cursor:none!important} }
.fp{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0) scale(.6);transition:opacity .2s}
.fp.on{opacity:1}
.fp svg{width:22px;height:22px;display:block;transform:rotate(-70deg) translate(-2px,-2px);color:var(--fp,#0ea5e9);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.fp-label{position:absolute;left:16px;top:16px;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--fp,#0ea5e9);color:#fff;
  font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.35);transform-origin:0 0;transform:scale(.5);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.fp.on .fp-label{transform:scale(1);opacity:1}
.fp.dark-text .fp-label{color:#0a0a0a}

/* ===== Crossed tape marquees ===== */
.tapes{position:relative;height:clamp(220px,22vw,320px);margin:40px 0 0;overflow:hidden}
.tape{position:absolute;left:-10%;width:120%;top:50%;padding:clamp(10px,1.2vw,18px) 0;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.tape-a{background:#f4f3ef;transform:translateY(-50%) rotate(-4.5deg)}
.tape-b{background:var(--accent);transform:translateY(-50%) rotate(4.5deg)}
.tape-track{display:flex;align-items:center;gap:clamp(28px,3.4vw,56px);width:max-content;will-change:transform;animation:tapeL 50s linear infinite}
.tape-b .tape-track{animation-name:tapeR;animation-duration:44s}
.tape-track span{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:900;font-variation-settings:"opsz" 144,"WONK" 1;
  font-size:clamp(30px,3.8vw,60px);line-height:1.1;color:#0a0a0a;white-space:nowrap}
.tp-star{width:clamp(26px,2.8vw,44px);height:auto;fill:#0a0a0a;flex:none}
.tapes:hover .tape-track{animation-play-state:paused}
@keyframes tapeL{to{transform:translateX(-33.333%)}}
@keyframes tapeR{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.tape-track{animation:none}}
@media (max-width:760px){
  .tapes{height:200px;margin-top:10px}
  .tape-a{transform:translateY(-50%) rotate(-9deg)}
  .tape-b{transform:translateY(-50%) rotate(9deg)}
  .tape-track span{font-size:24px}
  .tp-star{width:20px}
}