/* ============================================================================
   subtitling.css, Screens service page (Subtitling)
   Reuses tokens, nav, buttons + footer from home.css / home-sections.css.
   Only page-specific sections live here.
   ========================================================================= */

/* reveal-on-scroll (self-contained) ------------------------------------- */
.s-rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.s-rv.in{opacity:1; transform:none;}
.s-rv.d1{transition-delay:.08s;} .s-rv.d2{transition-delay:.16s;} .s-rv.d3{transition-delay:.24s;} .s-rv.d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){ .s-rv{opacity:1; transform:none; transition:none;} }

.mono{font-family:'DM Sans', ui-monospace, monospace; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;}
.svc-section{padding:110px 0;}
.svc-section .wrap{max-width:min(1360px,92vw);}
.svc-head{max-width:760px; margin:0 auto 64px; text-align:center;}
.svc-head .mono{color:var(--blue); display:block; margin-bottom:16px;}
.svc-head h2{font-size:clamp(32px,3.6vw,52px); font-weight:800; line-height:1.06;}
.svc-head p{margin-top:20px; font-size:18px; line-height:1.6; color:var(--muted);}
.soft-bg{background:var(--soft);}

/* ── HERO (dark) ────────────────────────────────────────────────────────── */
.svc-hero{position:relative; overflow:hidden; color:#fff;
  margin-top:calc(-1 * var(--nav-h)); padding:calc(var(--nav-h) + 72px) 0 96px;
  background:radial-gradient(120% 120% at 82% 30%, #12244a 0%, #0A152D 46%, #060d1c 100%);}
.svc-hero::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(127,178,255,.10) 1px, transparent 1px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(70% 70% at 70% 30%, #000, transparent 78%);
  mask-image:radial-gradient(70% 70% at 70% 30%, #000, transparent 78%); opacity:.8; pointer-events:none;}

/* ── folded client-constellation rings (subtle hero background) ─────────── */
.svc-hero::after{content:""; position:absolute; z-index:1; pointer-events:none;
  width:min(880px,84%); aspect-ratio:1/1; inset-inline-end:-12%; top:50%; translate:0 -50%;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20600%20600'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgb(127%2C178%2C255)'%20stroke-opacity%3D'0.22'%20stroke-width%3D'1'%20stroke-dasharray%3D'2%207'%3E%3Ccircle%20cx%3D'300'%20cy%3D'300'%20r%3D'150'%2F%3E%3Ccircle%20cx%3D'300'%20cy%3D'300'%20r%3D'212'%2F%3E%3Ccircle%20cx%3D'300'%20cy%3D'300'%20r%3D'276'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'rgb(91%2C163%2C255)'%3E%3Ccircle%20cx%3D'430'%20cy%3D'375'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'195'%20cy%3D'482'%20r%3D'2.4'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'42'%20cy%3D'206'%20r%3D'3.4'%2F%3E%3Ccircle%20cx%3D'249'%20cy%3D'159'%20r%3D'2'%20opacity%3D'0.6'%2F%3E%3Ccircle%20cx%3D'511'%20cy%3D'123'%20r%3D'2.6'%20opacity%3D'0.8'%2F%3E%3Ccircle%20cx%3D'372'%20cy%3D'497'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'118'%20cy%3D'360'%20r%3D'2'%20opacity%3D'0.6'%2F%3E%3Ccircle%20cx%3D'486'%20cy%3D'404'%20r%3D'2.4'%20opacity%3D'0.75'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.55;
  -webkit-mask-image:radial-gradient(58% 58% at 56% 50%, #000 50%, transparent 80%);
  mask-image:radial-gradient(58% 58% at 56% 50%, #000 50%, transparent 80%);}
@media (prefers-reduced-motion: no-preference){
  .svc-hero::after{animation:svcRingsSpin 140s linear infinite;}
  @keyframes svcRingsSpin{to{transform:rotate(360deg);}}
}

.svc-hero .wrap{position:relative; z-index:2;}
.svc-hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center;}

.crumb{display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(224,231,242,.6); margin-bottom:26px;}
.crumb a{color:rgba(224,231,242,.72); text-decoration:none; transition:color .18s;}
.crumb a:hover{color:#fff;}
.crumb .sep{opacity:.4;}
.crumb .cur{color:#fff;}

.svc-eyebrow{display:inline-flex; align-items:center; gap:9px; color:var(--blue-light); margin-bottom:22px;}
.svc-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-light); box-shadow:0 0 0 4px rgba(91,163,255,.18);}
.svc-hero h1{font-size:clamp(48px,6vw,84px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#F4F7FC;}
.svc-hero .tag{margin-top:16px; font-size:clamp(19px,1.7vw,24px); font-weight:600; color:var(--blue-light); letter-spacing:-.01em;}
.svc-hero .lead{margin-top:24px; max-width:60ch; font-size:17px; line-height:1.68; color:rgba(224,231,242,.76);}
.svc-hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.btn-lg{display:inline-flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  border-radius:999px; padding:16px 30px; text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;}
.btn-lg svg{width:17px; height:17px; transition:transform .2s ease;}
.btn-lg:hover svg{transform:translateX(3px);}
.btn-fill{background:var(--blue); color:#fff;}
.btn-fill:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(47,107,255,.4);}
.btn-line{background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.24);}
.btn-line:hover{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12);}

/* hero image with subtitle-bar motif */
.svc-hero-media{position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); aspect-ratio:4/3.1;}
.svc-hero-media img{width:100%; height:100%; object-fit:cover;}
.svc-hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(6,13,28,.78) 100%);}
.sub-bar{position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:26px; z-index:2; display:flex; justify-content:center; padding:0 24px;}
.sub-bar span{font-family:'DM Sans',sans-serif; font-weight:600; font-size:clamp(15px,1.5vw,19px); color:#fff;
  background:rgba(4,8,18,.62); padding:9px 18px; border-radius:8px; backdrop-filter:blur(3px); text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4); text-shadow:0 1px 3px rgba(0,0,0,.6);}
.sub-bar span b{color:var(--blue-light); font-weight:700;}

/* stat row */
.svc-stats{position:relative; z-index:2; margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden;}
.svc-stat{background:rgba(9,17,37,.5); padding:30px 28px;}
.svc-stat .n{font-family:'DM Sans',sans-serif; font-size:clamp(30px,3.4vw,44px); font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1;}
.svc-stat .n b{color:var(--blue-light); font-weight:800;}
.svc-stat .l{margin-top:10px; font-size:13.5px; color:rgba(224,231,242,.62); line-height:1.4;}

/* ── PILLARS ────────────────────────────────────────────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.pillar{background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 30px; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s, background .3s ease;}
.pillar .ico, .pillar h3, .pillar p{transition:color .3s ease, background .3s ease;}
.pillar::after{content:"↗"; position:absolute; top:20px; right:22px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:700; color:var(--muted-2); background:var(--soft-2); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s, background .25s, color .25s;}
.pillar:hover{transform:translateY(-5px); box-shadow:0 26px 55px -22px rgba(30,58,138,.6); border-color:transparent; background:linear-gradient(145deg,#5BA3FF 0%,#2F6BFF 52%,#1E3A8A 100%);}
.pillar:hover .ico{background:rgba(255,255,255,.2); color:#fff;}
.pillar:hover h3{color:#fff;}
.pillar:hover p{color:rgba(255,255,255,.9);}
.pillar:hover::after{opacity:1; transform:none; background:rgba(255,255,255,.22); color:#fff;}
.pillar:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
.pillar .ico{width:46px; height:46px; border-radius:12px; background:var(--soft-2); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.pillar .ico svg{width:23px; height:23px;}
.pillar h3{font-size:18px; font-family:'DM Sans',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); line-height:1.3;}
.pillar p{margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted);}

/* ── PILLAR DETAIL MODAL ─────────────────────────────────────────────── */
.pmodal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px;}
.pmodal[hidden]{display:none;}
.pmodal-backdrop{position:absolute; inset:0; background:rgba(10,21,45,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.pmodal-card{position:relative; z-index:1; width:min(560px,94vw); max-height:88vh; overflow-y:auto; background:#fff; border-radius:22px; padding:42px 42px 38px; box-shadow:0 50px 130px rgba(10,21,45,.42); animation:pmIn .32s cubic-bezier(.2,.8,.2,1);}
@keyframes pmIn{from{opacity:0; transform:translateY(16px) scale(.98);}to{opacity:1; transform:none;}}
.pmodal-x{position:absolute; top:18px; inset-inline-end:18px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; transition:background .2s, transform .2s;}
.pmodal-x:hover{background:var(--soft-2); transform:rotate(90deg);}
.pmodal-x svg{width:17px; height:17px;}
.pmc{display:none;}
.pmc.active{display:block;}
.pmc .pm-ico{width:54px; height:54px; border-radius:14px; background:linear-gradient(145deg,#5BA3FF,#2F6BFF 60%,#1E3A8A); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.pmc .pm-ico svg{width:27px; height:27px;}
.pm-eyebrow{font-family:'DM Sans',ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);}
.pmc h3{font-family:'DM Sans',system-ui,sans-serif; font-size:25px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:10px 0 16px; line-height:1.15;}
.pmc > p{font-size:15.5px; line-height:1.7; color:var(--muted);}
.pmc h4{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin:26px 0 13px;}
.pm-list{display:flex; flex-direction:column; gap:11px; padding:0; margin:0;}
.pm-list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--muted); list-style:none;}
.pm-list li svg{flex:none; width:18px; height:18px; color:var(--blue); margin-top:2px;}

/* ── CAPABILITIES ───────────────────────────────────────────────────────── */
.caps{display:grid; grid-template-columns:repeat(6,1fr); gap:24px;}
.cap{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); cursor:pointer; display:flex; flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease;}
.cap:hover{transform:translateY(-5px); box-shadow:0 30px 64px -26px rgba(30,58,138,.55);}
.cap:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
.cap-media{position:relative; aspect-ratio:16/10; overflow:hidden; flex:1 0 auto;}
.cap-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease;}
.cap:hover .cap-media img{transform:scale(1.06);}
/* caption bar below each card, full width, WHITE with dark text (matches featured) */
.cap-caption{background:#fff; padding:16px 24px; color:#0C1428; border-top:1px solid rgba(15,30,60,.08); display:flex; align-items:center; justify-content:space-between; gap:22px;}
.cap-caption .cap-caption-text{min-width:0;}
.cap-caption .cap-label{display:inline-block; font-family:'DM Sans',ui-monospace,monospace; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#2F6BFF;}
.cap-caption .cap-title{font-family:'DM Sans',system-ui,sans-serif; font-size:21px; font-weight:800; letter-spacing:-.01em; line-height:1.22; color:#0C1428; margin-top:4px;}
.cap-caption .cap-sub{margin-top:4px; font-size:14px; line-height:1.5; color:#5A6678;}
.cap-caption .cap-more{display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; background:#2F6BFF; color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; flex-shrink:0; white-space:nowrap; transition:background .2s ease;}
.cap-more svg{width:14px; height:14px; transition:transform .2s ease;}
.cap:hover .cap-more{background:#1E3A8A;}
.cap:hover .cap-more svg{transform:translateX(3px);}
/* featured spans full width as a wide tile (display:block overrides a global .feat{display:grid}) */
.cap.feat{grid-column:1 / -1; display:block;}
.cap.feat .cap-media{aspect-ratio:2.7/1;}
.cap.feat .cap-label{font-size:12.5px;}
.cap.feat .cap-title{font-size:clamp(21px,1.9vw,26px);}
/* featured: slim WHITE horizontal strip, text left, Learn more pinned right */
.cap.feat .cap-caption{background:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:16px 30px 16px 28px; border-top:1px solid rgba(15,30,60,.08);}
.cap.feat .cap-caption-text{min-width:0;}
.cap.feat .cap-caption .cap-label{color:#2F6BFF;}
.cap.feat .cap-caption .cap-title{color:#0C1428; margin-top:3px;}
.cap.feat .cap-caption .cap-sub{color:#5A6678; margin-top:3px;}
.cap.feat .cap-caption .cap-more{color:#fff; margin-top:0; white-space:nowrap; flex-shrink:0;}
.cap.span3{grid-column:span 3;}
.cap.span2{grid-column:span 2;}

/* ── PROCESS ────────────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0;}
.step{position:relative; padding:0 22px;}
.step:not(:last-child)::after{content:""; position:absolute; top:23px; inset-inline-start:calc(50% + 26px); inset-inline-end:calc(-50% + 26px); height:2px;
  background:linear-gradient(to right,var(--blue-light),rgba(91,163,255,.25)); }
.step .num{position:relative; width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--blue); color:var(--blue);
  font-family:'DM Sans',sans-serif; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; z-index:2;}
.step h4{margin-top:22px; font-size:17px; font-weight:700; letter-spacing:-.01em;}
.step p{margin-top:9px; font-size:14px; line-height:1.55; color:var(--muted);}

/* ── LANGUAGES ──────────────────────────────────────────────────────────── */
.lang-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
.lang-copy .mono{color:var(--blue); display:block; margin-bottom:16px;}
.lang-copy h2{font-size:clamp(30px,3.2vw,46px); font-weight:800; line-height:1.08;}
.lang-copy p{margin-top:20px; font-size:16.5px; line-height:1.68; color:var(--muted);}
.lang-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.lang-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s;}
.lang-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#CFE0FF;}
.lang-card .en{font-size:16px; font-weight:700; color:var(--ink);}
.lang-card .nat{margin-top:5px; font-size:14px; color:var(--muted);}
.lang-more{grid-column:span 3; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px;
  border:1px solid var(--line-2); border-radius:14px; color:var(--muted); font-size:14px; font-weight:600;}

/* ── FINAL CTA headline tweak inherits home-sections.css ─────────────────── */

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .svc-hero-grid{grid-template-columns:1fr; gap:44px;}
  .svc-hero-media{max-width:560px;}
  .caps{grid-template-columns:repeat(4,1fr);}
  .cap.span3{grid-column:span 2;}
  .cap.span2{grid-column:span 2;}
  .lang-split{grid-template-columns:1fr; gap:40px;}
}
@media (max-width:820px){
  .svc-section{padding:78px 0;}
  .svc-stats{grid-template-columns:repeat(2,1fr);}
  .pillars{grid-template-columns:1fr 1fr;}
  .cap.feat{flex-direction:column;}
  .cap.feat .cap-media{flex:none; aspect-ratio:16/10;}
  .cap.feat .cap-body{padding:28px 26px 32px;}
  .steps{grid-template-columns:1fr 1fr; gap:36px 0;}
  .step::after{display:none !important;}
}
@media (max-width:560px){
  .svc-hero{padding:calc(var(--nav-h) + 44px) 0 68px;}
  .svc-stats{grid-template-columns:1fr 1fr;}
  .pillars{display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad)); padding:4px var(--pad) 10px;}
  .pillars::-webkit-scrollbar{display:none;}
  .pillar{flex:0 0 82%; min-width:0; scroll-snap-align:center;}
  .caps{display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad)); padding:4px var(--pad) 10px;}
  .caps::-webkit-scrollbar{display:none;}
  .cap, .cap.feat, .cap.span3, .cap.span2{flex:0 0 82%; min-width:0; scroll-snap-align:center; grid-column:auto;}
  .cap-caption{flex-direction:column; align-items:center; text-align:center; gap:14px; padding:18px 20px 22px;}
  .cap-caption .cap-more{align-self:center;}
  .lang-grid{grid-template-columns:1fr 1fr;}
  .lang-more{grid-column:span 2;}
  .steps{grid-template-columns:1fr;}
}