/* Services page: four chapters (Ads, Websites, Social, Systems) showing real work. */
.svc .cinematic-intro h2{text-transform:none}
/* Two doors: the visitor picks their problem, each leads into its chapters */
.svc .cinematic-intro nav.svc-doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;padding:0;border:0}
.svc .cinematic-intro nav .svc-door{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:22px 22px 20px 60px;border:1px solid #c1a17455;border-radius:14px;background:#0f1822;color:inherit;text-decoration:none;font:inherit;letter-spacing:normal;transition:border-color .2s,background .2s}
.svc-door:hover,.svc-door:focus-visible{border-color:#c1a174;background:#142130}
.svc-door-n{position:absolute;left:20px;top:22px;width:26px;height:26px;border:1px solid #c1a174;border-radius:50%;display:grid;place-items:center;font:11px/1 monospace;color:#e1c69d}
.svc-door b{font:400 clamp(19px,1.8vw,23px)/1.3 Georgia,serif;color:#f0e8d9}
.svc-door small{font-size:13px;line-height:1.6;color:#c0c8cf}
.svc-door-go{margin-top:4px;font:11px/1.4 monospace;letter-spacing:.06em;text-transform:uppercase;color:#e1c69d}
.svc-chapter{border-top:1px solid #c1a17433;padding:72px 0 80px;scroll-margin-top:90px}
.svc-chapter .container{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:56px;align-items:start}
.svc-copy{position:sticky;top:110px}
.svc-copy>.section-kicker{font-size:11px;color:#d2b688}
.svc-copy h3{font:400 clamp(30px,3vw,44px)/1.1 Georgia,serif;letter-spacing:-.03em;text-transform:none;margin:16px 0 20px;color:#f0e8d9}
.svc-copy>p{font-size:14px;line-height:1.8;max-width:44ch;color:#c0c8cf;margin:0}
.svc-copy ul{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.svc-copy li{font:11px/1 monospace;letter-spacing:.06em;text-transform:uppercase;color:#e1c69d;border:1px solid #c1a17455;border-radius:999px;padding:8px 12px}
.svc-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.svc-links a{color:#e1c69d;font-size:13px;text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.svc-media{display:grid;gap:16px;margin:0}
.svc-media figure{margin:0}
.svc-media img,.svc-media video{display:block;width:100%;height:auto;border-radius:10px;background:#111a24}
.svc-cap,.svc-media figcaption{font:11px/1.6 monospace;letter-spacing:.04em;color:#9fa9b3;margin-top:10px}
.svc-cap span,.svc-media figcaption span{color:#cfb286}
.svc-tag{display:block;font:10px/1 monospace;letter-spacing:.08em;text-transform:uppercase;color:#d2b688;margin:0 0 8px}

/* Ads: film on top, three stills below */
.svc-stills{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* Websites: one large site, two smaller */
.svc-sites{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-sites a:first-child{grid-column:1/-1}
.svc-sites a{display:block;color:inherit;text-decoration:none}
.svc-sites a:hover img,.svc-sites a:focus-visible img{outline:1px solid #c1a174;outline-offset:3px}
.svc-sites b{display:block;font:400 18px/1.3 Georgia,serif;color:#f0e8d9;margin-top:10px}
.svc-sites small{display:block;font-size:12px;line-height:1.6;color:#9fa9b3}

/* Social: tall 9:16 film beside the other formats */
.svc-formats{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;align-items:start}
.svc-formats-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-formats-side figure:first-child{grid-column:1/-1}

/* Systems: the live assistant docks here, and the real Pendeli app runs on demand */
.svc-assistant{max-width:420px}
.svc-assistant [data-mvtj-assist-dock] img{border-radius:10px}
.svc-split{row-gap:72px}
.svc-split .svc-copy{position:static}
.svc-device{aspect-ratio:16/10;border:10px solid #1c2733;border-radius:22px;background:#f5efe4;overflow:hidden;box-shadow:0 24px 60px #0008}
.svc-try-start{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.svc-try-start img{width:100%;height:100%;object-fit:cover;border-radius:0}
.svc-try-cta{position:absolute;left:16px;top:16px;white-space:nowrap;background:#0a1017e6;color:#f0e8d9;border:1px solid #c1a174;border-radius:999px;padding:12px 20px;font:12px/1 monospace;letter-spacing:.06em;text-transform:uppercase}
.svc-try-start:hover .svc-try-cta,.svc-try-start:focus-visible .svc-try-cta{background:#c1a174;color:#0a1017}
.svc-device{position:relative}
.svc-try-frame{position:absolute;top:0;left:0;border:0;background:#f5efe4;transform-origin:0 0}
.svc-try-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;margin-top:12px}
.svc-try-foot p{font-size:13px;line-height:1.7;color:#c0c8cf;margin:0;max-width:52ch}
.svc-try-foot strong{color:#f0e8d9;font-weight:500}
.svc-try-foot a{color:#e1c69d;font-size:13px;text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}

@media (max-width:900px){
  .svc-chapter{padding:52px 0 60px}
  .svc-chapter .container{grid-template-columns:1fr;gap:32px}
  .svc-copy{position:static}
  .svc-formats{grid-template-columns:1fr}
  .svc .cinematic-intro nav.svc-doors{grid-template-columns:1fr}
  .svc-device{aspect-ratio:3/4;border-width:7px;border-radius:16px}
  .svc-try-cta{top:auto;bottom:14px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.4}
}
@media (max-width:520px){
  .svc.cinematic-services .cinematic-intro h2{font-size:clamp(2rem,10vw,3rem)}
  .svc.cinematic-services .cinematic-intro h2:lang(el){font-size:8vw}
  .svc-stills{grid-template-columns:1fr 1fr}
  .svc-stills figure:last-child{display:none}
  .svc-sites{grid-template-columns:1fr}
}
/* Three doors (A Starter, B The MVTJ Plan, C Front Desk): side by side on wide screens; in two columns the third spans the row. */
.svc .cinematic-intro nav.svc-doors .svc-door:nth-child(3):last-child{grid-column:1/-1}
@media (min-width:1100px){.svc .cinematic-intro nav.svc-doors{grid-template-columns:repeat(3,1fr)}.svc .cinematic-intro nav.svc-doors .svc-door:nth-child(3):last-child{grid-column:auto}}

/* Front Desk film above the live assistant */
.svc-film{margin:0 0 28px}
.svc-film video{display:block;width:100%;height:auto;border:1px solid #c1a17440}
.svc-film figcaption span a{color:inherit}