/* Knight Shot — Technical / Services (/services/). Reuses ks.css tokens + classes.
   Own hero (real install photo), the "level" signature, bento services + real proof. v2 07.11.2026. */

/* ---------- HERO (own subpage hero, not the home aim) ---------- */
.svc-hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.svc-hero-bg{position:absolute;inset:0;z-index:-2}
.svc-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.svc-hero-grad{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(52% 44% at 80% 6%,rgba(240,215,154,.17),transparent 62%),
  linear-gradient(100deg,rgba(7,12,9,.93) 0%,rgba(7,12,9,.56) 30%,rgba(7,12,9,.12) 56%,transparent 70%),
  linear-gradient(180deg,transparent 42%,rgba(7,12,9,.42) 76%,rgba(7,12,9,.8) 100%)}
.svc-hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--mx) clamp(42px,8vh,100px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.svc-hero-copy{max-width:44ch}
.svc-hero .idx{display:block;margin-bottom:16px;color:var(--brass)}
.svc-hero h1{font-family:var(--font-d);font-weight:720;line-height:1.0;letter-spacing:-.02em;
  font-variation-settings:"FLAR" 40;font-size:clamp(2.1rem,4.4vw,3.6rem);margin:0 0 18px;max-width:15ch}
.svc-hero h1 .brass-word{color:var(--brass)}
.svc-hero .lead{margin-bottom:24px;max-width:50ch}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.svc-trust-line{margin-top:22px;font-size:.8rem;letter-spacing:.04em;color:var(--fg-dim);
  display:block;line-height:1.6;padding-top:14px;border-top:1px solid var(--line)}
.svc-trust-line b{color:var(--brass);font-weight:700}
.svc-trust-line span{opacity:.5}

/* the "level" signature — the craft from the photo, made interactive:
   drag to tilt the slate bed, release → our technicians bring it back to dead level */
.lvl{position:relative;z-index:4;width:min(328px,86vw);align-self:end;
  background:linear-gradient(180deg,rgba(14,22,16,.84),rgba(9,16,12,.86));
  border:1px solid var(--line);border-radius:14px;padding:15px 17px 14px;touch-action:none;
  box-shadow:0 18px 44px -24px #000}
.lvl.level{animation:lvl-flash .6s var(--ease)}
@keyframes lvl-flash{0%{box-shadow:0 0 0 2px rgba(240,215,154,.65),0 18px 44px -24px #000}
  100%{box-shadow:0 0 0 2px rgba(240,215,154,0),0 18px 44px -24px #000}}
.lvl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.lvl-lab{font-family:var(--font-u);font-weight:600;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.lvl-val{font-family:var(--font-u);font-weight:700;font-size:.9rem;color:var(--brass);font-variant-numeric:tabular-nums;transition:color var(--dur-ui);white-space:nowrap}
.lvl-val.ok{color:var(--brass-hi)}
.lvl-val.ok::after{content:" ✓";color:var(--brass-hi)}

/* the slate bed you tilt (the actual thing a technician levels) */
.lvl-slate{position:relative;height:30px;margin-bottom:13px;border-radius:5px;overflow:hidden;
  transform-origin:50% 50%;border:1px solid var(--line);
  transition:transform var(--dur-big) var(--ease);will-change:transform}
.lvl-slate.drag{transition:none}
.lvl-felt{position:absolute;inset:0;background:linear-gradient(180deg,var(--felt-2),var(--felt));
  box-shadow:inset 0 3px 9px rgba(0,0,0,.5)}
.lvl-vial{position:absolute;left:9%;right:9%;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(240,215,154,.55),transparent)}
.lvl-track{position:relative;height:32px;border-radius:999px;cursor:grab;touch-action:none;
  background:linear-gradient(90deg,rgba(203,162,83,.08),rgba(203,162,83,.2),rgba(203,162,83,.08));
  border:1px solid var(--line)}
.lvl-track:active{cursor:grabbing}
.lvl-track::before,.lvl-track::after{content:"";position:absolute;top:6px;bottom:6px;width:1.5px;background:var(--brass);opacity:.65}
.lvl-track::before{left:calc(50% - 15px)}
.lvl-track::after{left:calc(50% + 14px)}
.lvl-bub{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--brass-hi),var(--brass) 72%);
  box-shadow:0 0 12px rgba(240,215,154,.6),inset 0 1px 1px rgba(255,255,255,.55);will-change:left}
.lvl-bub.settle{transition:left var(--dur-big) var(--ease)}
.lvl-hint{margin-top:9px;font-size:.75rem;color:var(--fg-dim)}

/* ---------- SIX SERVICES (bento, real photos + concrete text) ---------- */
.svc-sec{position:relative;padding:clamp(64px,10vh,128px) 0;background:var(--ink);overflow:hidden}
.svc-sec::before{content:"";position:absolute;top:-8%;right:-14%;width:62%;height:72%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(240,215,154,.13),transparent 60%)}
.svc-sec .wrap{position:relative;z-index:1}
.svc-sec h2{margin:0 0 10px}
.svc-sec .lead{margin-bottom:clamp(28px,4vw,46px)}
.svc-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.sv{position:relative;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--glass-edge);
  background:linear-gradient(165deg,var(--felt-2),var(--felt) 80%);padding:24px;min-height:198px;
  box-shadow:0 24px 50px -36px #000;
  display:flex;flex-direction:column;transition:transform var(--dur-ui) var(--ease),border-color var(--dur-ui)}
.sv:hover{transform:translateY(-4px);border-color:var(--line)}
.sv-no{font-family:var(--font-u);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--brass);font-variant-numeric:tabular-nums}
.sv h3{font-family:var(--font-d);font-weight:700;font-size:clamp(1.18rem,1.7vw,1.5rem);letter-spacing:-.01em;margin:16px 0 7px}
.sv p{color:var(--fg-dim);font-size:.93rem;line-height:1.5}
.sv p b{color:var(--fg);font-weight:600}
.sv .ql{margin-top:16px;align-self:flex-start}
.sv-txt{grid-column:span 2}
.sv-wide{grid-column:span 3}
.sv-photo{grid-column:span 3;min-height:300px;padding:0;color:var(--fg)}
.sv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease)}
.sv-photo:hover img{transform:scale(1.04)}
.sv-photo .sv-sh{position:absolute;inset:0;z-index:1;
  background:linear-gradient(197deg,rgba(9,16,12,.1) 16%,rgba(9,16,12,.66) 54%,rgba(5,9,7,.96))}
.sv-photo .sv-in{position:relative;z-index:2;padding:24px;display:flex;flex-direction:column;height:100%;justify-content:flex-end}
.sv-photo h3{margin-top:0;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.sv-photo p{text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* feature card: scale jump + a panel that floats over the photo (depth/overlap) */
.sv-feat{min-height:340px}
.sv-feat .sv-in{height:auto;margin:auto 14px 14px;padding:16px 18px;border-radius:12px;
  background:linear-gradient(180deg,rgba(9,16,12,.42),rgba(5,9,7,.9));border:1px solid var(--glass-edge)}
.sv-feat img{transform:scale(1.03)}

/* ---------- PROOF (bento, real projects) ---------- */
.proof2{padding:clamp(64px,10vh,128px) 0;background:var(--ink);border-top:1px solid var(--felt-line)}
.proof2 h2{margin:0 0 8px}
.proof2 .lead{margin-bottom:clamp(26px,4vw,40px)}
.proof2-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.pz{position:relative;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--glass-edge);min-height:220px;background:var(--felt)}
.pz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz .pzs{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,16,12,.92),transparent 60%)}
.pz .pzc{position:absolute;inset:auto 0 0;z-index:2;padding:18px;display:flex;flex-direction:column;gap:3px}
.pz .pk{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-variant-numeric:tabular-nums}
.pz .ph{font-family:var(--font-d);font-weight:700;font-size:1.12rem;line-height:1.1}
.pz .pt{font-size:.85rem;color:var(--fg-dim)}
.pz-5{grid-column:span 5}.pz-4{grid-column:span 4}.pz-3{grid-column:span 3}.pz-8{grid-column:span 8}
.pz-stat{background:linear-gradient(160deg,var(--felt-2),var(--felt));display:flex;flex-direction:column;justify-content:center;padding:24px;gap:14px}
.pz-stat .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--felt-line);padding-bottom:12px}
.pz-stat .row:last-child{border:0;padding:0}
.pz-stat .n{font-family:var(--font-d);font-weight:720;font-size:1.3rem;line-height:1}
.pz-stat .l{font-size:.78rem;color:var(--fg-dim);text-align:right}
.pz-open img{object-position:center top}

/* ---------- PROCESS + FUNNEL ---------- */
.cta2{position:relative;background:linear-gradient(170deg,var(--felt-2),var(--felt) 58%,#071a12);overflow:hidden;padding:clamp(64px,10vh,128px) 0}
.cta2::before{content:"";position:absolute;top:-30%;right:-8%;width:56%;height:120%;z-index:0;
  background:radial-gradient(circle,rgba(240,215,154,.18),transparent 62%)}
.cta2 .wrap{position:relative;z-index:1}
.cta2-head{text-align:center;max-width:680px;margin:0 auto clamp(30px,5vw,48px)}
.cta2-head h2{margin:14px 0 12px}
.cta2-head .lead{margin:0 auto;color:var(--fg)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 30px}
.step{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-s);padding:22px 22px 20px}
.step .sn{font-family:var(--font-d);font-weight:740;font-size:1.5rem;color:var(--brass);font-variant-numeric:tabular-nums}
.step h4{font-family:var(--font-d);font-weight:700;font-size:1.06rem;margin:10px 0 5px;letter-spacing:-.01em}
.step p{font-size:.9rem;color:var(--fg-dim);line-height:1.5}
.cta2-act{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn-call{display:inline-flex;align-items:center;gap:9px}
.btn-call svg{width:18px;height:18px}
.cta2 .place{text-align:center;margin-top:20px;font-size:.82rem;color:var(--fg-dim)}
.svc-ar{text-align:center;margin-top:16px;direction:rtl;
  font-family:"IBM Plex Sans Arabic",var(--font-u);font-weight:500;font-size:1.02rem;color:var(--fg)}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .svc-bento{grid-template-columns:repeat(2,1fr)}
  .sv-txt,.sv-wide,.sv-photo{grid-column:span 1}
  .sv-photo{min-height:260px}
  .proof2-grid{grid-template-columns:repeat(6,1fr)}
  .pz-5,.pz-8{grid-column:span 6}.pz-4{grid-column:span 3}.pz-3{grid-column:span 3}
  .steps{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:860px){
  .svc-hero{min-height:94svh;padding-top:62px}
  .svc-hero-bg img{object-position:50% 50%;transform:translateY(-12%) scale(1.22);transform-origin:50% 50%}
  .svc-hero-in{grid-template-columns:1fr;gap:16px;align-items:start}
  .svc-hero h1{font-size:clamp(2rem,8vw,2.8rem);max-width:none;margin-bottom:14px}
  .svc-hero .lead{margin-bottom:16px}
  .lead-more{display:none}          /* cut the mobile subcopy wall → float the level card up */
  .svc-trust-line{display:none}
  .svc-hero-cta{gap:10px}
  .lvl{width:100%}
}
@media (max-width:620px){
  body{font-size:16px}
  .svc-bento{grid-template-columns:1fr;gap:14px}
  .sv-feat{min-height:360px}           /* scale jump against the compact text cards = depth */
  .sv-photo{min-height:290px}
  .proof2-grid{grid-template-columns:1fr 1fr}
  .pz-5,.pz-8,.pz-4,.pz-3{grid-column:span 2}
  .pz-5,.pz-8{min-height:260px}        /* let the real photos carry across the grid */
  .pz-stat{grid-column:span 2}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .lvl-bub,.lvl-slate{transition:none!important}
  .lvl.level{animation:none!important}
}

/* ---- Welle r5 08.11.2026: phone page length <= 6 screens. Only <= 620 px, desktop untouched.
   The seven service cards, the proof tiles and the three steps become scroll-snap rails with a peek. ---- */
@media (max-width:620px){
  .svc-sec,.proof2,.cta2{padding:52px 0}
  .svc-sec .op,.proof2 .op{margin-bottom:18px}
  .svc-sec .lead,.proof2 .lead{margin-bottom:20px}
  .svc-bento,.proof2-grid,.steps{
    display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--mx)*-1);padding:4px var(--mx) 6px;scroll-padding-inline:var(--mx);scrollbar-width:none}
  .svc-bento::-webkit-scrollbar,.proof2-grid::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .svc-bento>*,.proof2-grid>*{flex:0 0 82%;scroll-snap-align:start}
  .svc-bento .rv,.proof2-grid .rv,.steps .rv{opacity:1;transform:none}
  .proof2-grid>*:focus-visible{outline-offset:-3px}
  .sv,.sv-feat,.sv-photo{min-height:340px}
  .sv-txt,.sv-wide{padding:22px}
  .sv-txt .ql,.sv-wide .ql{margin-top:auto}
  .sv-txt h3,.sv-wide h3{margin-top:12px}
  .pz{min-height:0;height:300px}
  .pz-stat{height:auto}
  .cta2-head{margin-bottom:22px}
  .cta2-head h2{margin:12px 0 10px}
  .steps{margin-bottom:22px}
  .steps>.step{flex:0 0 78%;scroll-snap-align:start;padding:18px}
  .svc-ar{margin-top:14px}
  .cta2 .place{margin-top:14px}
}