/* ═══════════════════════════════════════════════════════════════
   GRAPHIC CANNON — SERVICES PAGE
   hero with rotating word + photo mosaic · sticky service index + chapters · timeline · bento add-ons
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── HERO (black, halftone smoke · scramble title · live clock · WebGL curved carousel) ─────────────── */
.sv-hero{position:relative;overflow:hidden;isolation:isolate;background:#000;min-height:1055px;padding:200px 0 20px}
.sv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;display:block}
.sv-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:3}
.sv-hero-in{display:flex;flex-direction:column;align-items:center;gap:33px;position:relative;z-index:1;padding-top:98px}
.sv-bar{align-self:flex-start;margin-top:49px;display:flex;align-items:center;gap:clamp(40px,7vw,100px);font-size:16px;line-height:1;color:#fff}
.sv-bar .sv-clock{display:inline-flex;align-items:center;gap:40px}
.sv-bar [data-tz]{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.sv-bar [data-clock]{font-family:var(--f-d);font-variant-numeric:tabular-nums;font-weight:500}
.sv-title{font-family:var(--f-d);font-weight:500;font-size:clamp(44px,6.4vw,104px);line-height:1;letter-spacing:-.03em;text-align:center;max-width:1180px;margin:0;color:#fff}
.sv-title em{font-style:normal;color:var(--lime)}
.sv-title .w{display:inline-block;white-space:nowrap}
body:has(.sv-hero) .fx-orb{display:none}
.sv-title.scr-wait{opacity:0;animation:svReveal 10ms linear 4s 1 forwards}
@keyframes svReveal{to{opacity:1}}
.sv-car{position:relative;z-index:2;width:100%;height:614px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sv-car canvas{display:block;transition:opacity .4s}
.sv-strip{list-style:none;margin:0;padding:0 5% 8px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%;align-items:center}
.sv-strip::-webkit-scrollbar{display:none}
.sv-strip li{flex:0 0 min(78%,640px);scroll-snap-align:center}
.sv-strip img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#111}
.sv-car.gl .sv-strip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:-1px;white-space:nowrap}
@media(max-width:809px){
  .sv-hero{min-height:0;padding-top:140px}
  .sv-hero-in{align-items:flex-start;padding-top:60px}
  .sv-title{text-align:left;font-size:clamp(38px,11.4vw,58px)}
  .sv-bar{font-size:14px;gap:24px;margin-top:30px}.sv-bar .sv-clock{gap:16px}
  .sv-car{height:auto;min-height:260px}
  .sv-hero::after{height:90px}
}
@media(prefers-reduced-motion:reduce){.sv-title.scr-wait{animation:none;opacity:1}}

/* ─────────────── SERVICES DIAL: half-circle watch dial on the left, cards stacked in the centre ─────────────── */
.dl{--dl-R:clamp(230px,41vh,410px);--a0:0deg;position:relative;background:var(--bg)}
/* base (no JS / reduced motion): a plain stacked list */
.dl-cards{display:flex;flex-direction:column;gap:clamp(22px,3vw,40px);width:min(calc(100% - 2 * var(--pad,24px)),1080px);margin:0 auto;padding:clamp(50px,7vw,90px) 0}
.dl-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,2.4vw,36px);align-items:center;
  padding:clamp(14px,1.6vw,22px);border-radius:28px;border:1px solid var(--brd);background:linear-gradient(160deg,#16171a,#0b0b0d);
  box-shadow:0 40px 90px -50px #000;overflow:hidden}
.dl-media{position:relative;border-radius:18px;overflow:hidden;align-self:stretch;min-height:200px}
.dl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl-num{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:99px;font-family:var(--f-d);font-weight:600;font-size:13px;letter-spacing:.1em;line-height:1;color:#080808;background:var(--lime);box-shadow:0 6px 20px rgba(0,0,0,.45)}
.dl-copy{padding:clamp(4px,1vw,14px) clamp(4px,1vw,14px) clamp(4px,1vw,14px) 0}
.dl-copy h2{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,2.5vw,40px);line-height:1.05;letter-spacing:-.02em;margin:0 0 10px}
.dl-sum{color:var(--ink-2);font-size:clamp(13.5px,1vw,15.5px);line-height:1.65;margin:0 0 14px}
.dl-get{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px;margin:0 0 14px;padding:0;list-style:none}
.dl-get li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink);line-height:1.4}
.dl-get li::before{content:'';position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;background:var(--lime-soft);border:1px solid rgba(200,255,0,.45)}
.dl-get li::after{content:'';position:absolute;left:5px;top:5px;width:3px;height:6px;border:solid var(--lime);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.dl-hl{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dl-hl span{padding:6px 12px;border-radius:99px;border:1px solid rgba(200,255,0,.55);background:rgba(200,255,0,.1);color:var(--lime);font-size:12px;font-weight:600;letter-spacing:.02em;box-shadow:0 0 18px -6px var(--lime-glow)}
.dl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.dl-tags span{padding:4px 10px;border-radius:99px;border:1px solid var(--brd);font-size:11px;letter-spacing:.06em;color:var(--mute)}
.dl-act{display:flex;flex-wrap:wrap;gap:10px}
.dl-ui,.dl-dial{display:none}

/* pinned mode */
.dl-js .dl-stick{position:sticky;top:0;height:100vh;overflow:hidden}
.dl-js .dl-cards{position:absolute;display:block;width:auto;padding:0;margin:0;
  left:calc(var(--dl-R) + clamp(26px,3.2vw,60px));right:clamp(20px,3vw,50px);top:calc(var(--nav-h) + 5vh);height:min(61vh,560px)}
.dl-js .dl-card{position:absolute;left:0;right:0;top:0;height:100%;width:min(100%,980px);margin-inline:auto;will-change:transform,opacity;transform-origin:50% 50%}
.dl-js .dl-card{pointer-events:none}.dl-js .dl-card.on{pointer-events:auto}
.dl-js .dl-ui{display:flex}.dl-js .dl-dial{display:block}
.dl-js .dl-media{min-height:0}
.dl-js .dl-copy{display:flex;flex-direction:column;justify-content:center;height:100%;padding-right:clamp(6px,1.2vw,20px)}

/* the dial (centre sits on the left edge, so only the right half shows) */
.dl-dial{position:absolute;z-index:70;width:calc(var(--dl-R) * 2);height:calc(var(--dl-R) * 2);left:calc(var(--dl-R) * -1);top:50%;margin-top:calc(var(--dl-R) * -1);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0f1011 0%,#0b0b0c 62%,#09090a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 90px -10px rgba(200,255,0,.13),inset 0 0 70px rgba(0,0,0,.65)}
.dl-ring{position:absolute;inset:0;transform:rotate(calc(var(--s,0) * -28deg));will-change:transform}
.dl-ring svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.dl-c0{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.2}
.dl-c1{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1;stroke-dasharray:3 9}
.dl-tk{stroke:rgba(255,255,255,.22);stroke-width:1.3}
.dl-tk.M{stroke:rgba(255,255,255,.62);stroke-width:2.2}
.dl-n{position:absolute;left:50%;top:50%;width:0;height:0;padding:0;border:0;background:none;color:rgba(255,255,255,.5);cursor:pointer;
  transform:rotate(calc(var(--a0) + var(--a))) translateX(calc(var(--dl-R) * .77))}
.dl-n i{position:absolute;left:0;top:0;font-style:normal;font-family:var(--f-d);font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap;
  font-size:calc(17px + var(--k,0) * 25px);opacity:calc(.32 + var(--k,0) * .68);
  transform:translate(-50%,-50%) rotate(calc(var(--s,0) * 28deg - var(--a) - var(--a0)));transition:color .25s}
.dl-n:hover i{color:#fff}.dl-n.on i{color:var(--lime);text-shadow:0 0 22px var(--lime-glow)}
.dl-n:focus-visible i{outline:2px solid var(--lime);outline-offset:6px;border-radius:6px}
/* pointer at 3 o'clock */
.dl-ptr{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a0)) translateX(calc(var(--dl-R) + 3px))}
.dl-ptr::before{content:'';position:absolute;left:-2px;top:-11px;border:11px solid transparent;border-right-color:var(--lime);border-left-width:0;filter:drop-shadow(0 0 10px var(--lime-glow))}
.dl-ptr::after{content:'';position:absolute;left:8px;top:-1px;width:clamp(16px,2.2vw,34px);height:2px;background:linear-gradient(90deg,var(--lime),transparent);opacity:.9}

/* counter + sound */
.dl-ui{position:absolute;z-index:6;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:clamp(14px,3vh,34px);align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.dl-cnt{display:flex;align-items:baseline;gap:8px;font-family:var(--f-d);color:var(--mute);pointer-events:none}
.dl-cnt b{font-size:clamp(26px,2.6vw,38px);font-weight:600;color:var(--lime);letter-spacing:-.02em;line-height:1}
.dl-cnt span{font-size:13px;letter-spacing:.14em}
.dl-cnt em{font-style:normal;font-family:var(--f-b);font-size:13px;letter-spacing:.04em;color:var(--ink-2);margin-left:10px}
.dl-snd{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:99px;border:1px solid var(--brd-2);background:rgba(12,12,14,.7);color:var(--ink-2);font-size:12px;letter-spacing:.06em;cursor:pointer;transition:border-color .3s,color .3s,background .3s;-webkit-tap-highlight-color:transparent}
.dl-snd:hover{border-color:rgba(200,255,0,.5);color:var(--ink)}
.dl-snd svg{width:17px;height:17px;flex:none}
.dl-snd .x{display:none}.dl-snd.off .w{display:none}.dl-snd.off .x{display:block}
.dl-snd.off{color:var(--faint)}

@media(max-width:1100px){.dl-card{grid-template-columns:1fr}.dl-media{min-height:240px}}
@media(max-width:900px){
  .dl{--dl-R:clamp(150px,40vw,230px);--a0:-90deg}
  .dl-js .dl-dial{left:50%;margin-left:calc(var(--dl-R) * -1);top:auto;margin-top:0;bottom:calc(var(--dl-R) * -1)}
  .dl-js .dl-cards{left:16px;right:16px;top:calc(var(--nav-h) + 58px);height:calc(100svh - var(--nav-h) - var(--dl-R) - 92px)}
  .dl-js .dl-card{grid-template-columns:1fr;grid-template-rows:minmax(0,34%) minmax(0,1fr);gap:12px;padding:12px;border-radius:22px}
  .dl-js .dl-media{border-radius:14px}
  .dl-js .dl-copy{justify-content:flex-start;padding:2px 4px;overflow:hidden}
  .dl-js .dl-copy h2{font-size:clamp(19px,5.4vw,25px);margin-bottom:6px}
  .dl-js .dl-sum{font-size:12.5px;line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .dl-js .dl-tags{display:none}
  .dl-js .dl-get{grid-template-columns:1fr;gap:5px;margin-bottom:8px}.dl-js .dl-get li{font-size:12.5px}
  .dl-js .dl-card:has(.dl-hl) .dl-get{display:none}
  .dl-js .dl-hl{margin-bottom:8px}.dl-js .dl-hl span{padding:4px 9px;font-size:11px}
  .dl-js .dl-act{margin-top:auto;gap:8px}.dl-js .dl-act .btn{padding:10px 16px;font-size:13px}
  .dl-js .dl-ui{top:calc(var(--nav-h) + 6px);bottom:auto;left:16px;right:16px}
  .dl-js .dl-n i{font-size:calc(14px + var(--k,0) * 18px)}
  .dl-js .dl-ptr::after{display:none}
  .dl-ptr{transform:rotate(var(--a0)) translateX(calc(var(--dl-R) + 3px))}
  .dl-ptr::before{left:-2px;top:-11px;border:11px solid transparent;border-right-color:var(--lime);border-left-width:0;transform:rotate(0)}
}
@media(max-width:560px){.dl-get{grid-template-columns:1fr}}

/* ─────────────── PROCESS TIMELINE ─────────────── */
.sv-steps{--g:clamp(16px,2vw,30px);--col:calc((100% - 3 * var(--g)) / 4);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.sv-steps::before{content:'';position:absolute;left:28px;right:calc(var(--col) - 28px);top:27px;height:2px;background:var(--brd)}
.sv-steps::after{content:'';position:absolute;left:28px;top:27px;height:2px;width:0;background:linear-gradient(90deg,var(--lime),#22d3ee);box-shadow:0 0 14px var(--lime-glow);transition:width 2.2s var(--ease)}
.sv-steps.in::after{width:calc(100% - var(--col))}
.sv-step{position:relative;z-index:1}
.sv-dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;background:#0d0e10;border:1px solid var(--brd-2);color:var(--lime);transition:background .5s,color .5s,box-shadow .5s}
.sv-dot svg{width:22px;height:22px}
.sv-steps.in .sv-step:nth-child(1) .sv-dot{transition-delay:.1s}.sv-steps.in .sv-step:nth-child(2) .sv-dot{transition-delay:.7s}
.sv-steps.in .sv-step:nth-child(3) .sv-dot{transition-delay:1.3s}.sv-steps.in .sv-step:nth-child(4) .sv-dot{transition-delay:1.9s}
.sv-steps.in .sv-dot{background:var(--lime);color:#080808;box-shadow:0 0 0 6px rgba(200,255,0,.12),0 0 30px var(--lime-glow)}
.sv-step small{display:block;font-family:var(--f-d);font-size:12px;letter-spacing:.14em;color:var(--lime);margin-bottom:6px}
.sv-step h3{font-family:var(--f-d);font-weight:600;font-size:clamp(20px,1.8vw,26px);margin:0 0 8px}
.sv-step p{font-size:14px;line-height:1.65;color:var(--ink-2)}
@media(max-width:900px){
  .sv-steps{grid-template-columns:1fr;gap:28px;padding-left:76px}
  .sv-steps::before,.sv-steps::after{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .sv-steps::after{height:0;bottom:auto;transition:height 2.2s var(--ease)}
  .sv-steps.in::after{width:2px;height:calc(100% - 56px)}
  .sv-dot{position:absolute;left:-76px;top:0;margin:0}
}

/* ─────────────── ADD-ONS BENTO (photo on top, text below — icon sits on the photo) ─────────────── */
.sv-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-b{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--brd);background:#0f1012;color:inherit;transition:border-color .4s,transform .5s var(--ease),box-shadow .5s}
.sv-b:hover{border-color:rgba(200,255,0,.45);transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.sv-b.wide{grid-column:span 2}
.sv-b img{display:block;width:100%;flex:1 1 auto;height:0;min-height:210px;object-fit:cover;filter:saturate(.95) brightness(.9);transition:transform 1s var(--ease),filter .5s}
.sv-b.wide img{min-height:250px}
.sv-b:hover img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.sv-b .ico{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(6,6,7,.72);border:1px solid rgba(200,255,0,.45);color:var(--lime);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sv-b .ico svg{width:20px;height:20px}
.sv-b-t{padding:18px 20px 22px;flex:none}
.sv-b h3{font-family:var(--f-d);font-weight:600;font-size:clamp(18px,1.5vw,22px);margin:0 0 6px}
.sv-b p{font-size:14px;color:var(--ink-2);line-height:1.6}
.sv-b.hl{border-color:rgba(200,255,0,.4);background:linear-gradient(160deg,rgba(200,255,0,.12),#0f1012 55%)}
.sv-b.hl h3{color:var(--lime)}
/* lime call-to-action tile that closes the grid */
.sv-b-cta{justify-content:space-between;gap:14px;padding:26px;background:var(--lime);border-color:var(--lime);color:#080808}
.sv-b-cta:hover{border-color:var(--lime);box-shadow:0 30px 60px -24px rgba(200,255,0,.45)}
.sv-b-k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.sv-b-cta b{font-family:var(--f-d);font-weight:700;font-size:clamp(28px,2.8vw,42px);line-height:1}
.sv-b-go{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;font-size:14px;font-weight:500;line-height:1.5}
.sv-b-go svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;background:#080808;color:var(--lime);transition:transform .45s var(--ease)}
.sv-b-cta:hover .sv-b-go svg{transform:rotate(45deg)}
@media(max-width:1000px){.sv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-b.wide,.sv-b-cta{grid-column:span 2}}
@media(max-width:560px){.sv-bento{grid-template-columns:minmax(0,1fr)}.sv-b.wide,.sv-b-cta{grid-column:auto}.sv-b.wide img{min-height:210px}}

@media(prefers-reduced-motion:reduce){.sv-rot span{transition:none}.sv-steps::after{transition:none}}

/* ── premium dial + cards ── */
.dl-dial::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from calc(var(--a0) + 90deg - 18deg),rgba(200,255,0,.30),rgba(200,255,0,.06) 18deg,rgba(200,255,0,0) 36deg,transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 59%,#000 100%);mask:radial-gradient(circle,transparent 58%,#000 59%,#000 100%)}
.dl-dial::after{content:'';position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from calc(var(--a0) + 90deg - 40deg),transparent,rgba(200,255,0,.9) 40deg,transparent 80deg);
  -webkit-mask:radial-gradient(circle,transparent 99%,#000 99.6%);mask:radial-gradient(circle,transparent calc(100% - 3px),#000 calc(100% - 2px));filter:drop-shadow(0 0 8px var(--lime-glow))}
.dl-tk.M{stroke:rgba(200,255,0,.55)}
.dl-js .dl-card{border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(90% 70% at 0% 0%,rgba(200,255,0,.07),transparent 60%),linear-gradient(160deg,#17181b,#0b0b0d);
  box-shadow:0 50px 110px -50px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.dl-js .dl-card.on{border-color:rgba(200,255,0,.32);box-shadow:0 50px 110px -50px #000,0 0 0 1px rgba(200,255,0,.08),0 0 80px -30px var(--lime-glow),inset 0 1px 0 rgba(255,255,255,.08)}
.dl-js .dl-card.on .dl-media img{animation:dlZoom 6s ease-out both}
@keyframes dlZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.dl-js .dl-card.on .dl-copy h2{background:linear-gradient(90deg,#fff 0%,#fff 55%,var(--lime) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dl-snd{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dl-cnt b{text-shadow:0 0 24px var(--lime-glow)}
@media(max-width:900px){
  .dl-js .dl-card{grid-template-rows:minmax(0,40%) minmax(0,1fr)}
  .dl-js .dl-tags{display:flex;flex-wrap:nowrap;overflow:hidden;margin-bottom:10px;-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent)}
  .dl-js .dl-tags span{flex:none}
}
@media(min-width:901px){.dl-js .dl-card{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.dl-js .dl-media{min-height:0}}