/* ==========================================================================
   SERVICE DETAIL PAGES — varied, image-rich, multi-layout landing pages
   Shared system; per-service identity comes from imagery + content.
   ========================================================================== */

/* ---------- HERO (text-left + image-right) ---------- */
.svc-hero{ padding-top:calc(var(--nav-h) + clamp(40px,6vw,80px)); padding-bottom:clamp(36px,5vw,68px); position:relative; overflow:hidden; }
.svc-hero::after{
  content:""; position:absolute; right:-12%; top:-35%; width:min(640px,62vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(0,180,255,.13), transparent 62%);
  filter:blur(12px); pointer-events:none; z-index:0;
}
.svc-hero > .wrap{ position:relative; z-index:1; }
.svc-hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,4vw,64px); align-items:center; }
@media(max-width:920px){ .svc-hero-grid{ grid-template-columns:1fr; gap:34px; } }
.svc-hero h1{ font-size:clamp(2.5rem,5.6vw,4.4rem); line-height:.98; margin:14px 0 0; }
.sh-tag{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.sh-tag .sn{ opacity:.6; }
.svc-hero .lead{ margin-top:22px; max-width:46ch; }
.svc-cta-row{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.svc-hero-img{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-3); aspect-ratio:5/4; }
.svc-hero-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease); }
.svc-hero-img:hover img{ transform:scale(1.05); }
.svc-hero-img .shi-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,13,8,.05) 40%, rgba(15,13,8,.6)); pointer-events:none; }
.svc-hero-img .shi-code{ position:absolute; top:14px; right:14px; background:rgba(255,255,255,.94); color:var(--ink); padding:.4em .85em; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(6px); }
.svc-hero-img .shi-chip{ position:absolute; left:16px; bottom:16px; right:16px; background:rgba(255,255,255,.95); border-radius:var(--r-md); padding:13px 16px; display:flex; gap:18px; align-items:center; box-shadow:var(--sh-1); }
.svc-hero-img .shi-chip b{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1; }
.svc-hero-img .shi-chip small{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-top:5px; }
.svc-hero-img .shi-chip .sep{ width:1px; align-self:stretch; background:var(--line); }

/* ---------- STAT STRIP ---------- */
.svc-stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media(max-width:680px){ .svc-stat-strip{ grid-template-columns:1fr; } }
.svc-stat-strip .s{ background:var(--bg-2); padding:clamp(22px,2vw,32px); }
.svc-stat-strip .s .v{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1; color:var(--accent-ink); }
.svc-stat-strip .s .l{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* ---------- SPLIT: image + text (alternating via .flip) ---------- */
.svc-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,60px); align-items:center; }
@media(max-width:900px){ .svc-split{ grid-template-columns:1fr; gap:26px; } .svc-split.flip .ss-img{ order:0; } }
.svc-split .ss-img{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-2); aspect-ratio:4/3; }
.svc-split .ss-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.svc-split .ss-img:hover img{ transform:scale(1.05); }
.svc-split .ss-img .cap{ position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.94); padding:.45em .9em; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.svc-statement{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.svc-quote{ border-left:3px solid var(--accent); padding-left:clamp(18px,2vw,28px); }
.svc-quote q{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.22; letter-spacing:-.02em; color:var(--ink-2); quotes:none; }

/* ---------- FEATURE CARDS (2-col) ---------- */
.svc-features{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ .svc-features{ grid-template-columns:1fr; } }
.svc-feature{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.svc-feature:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.svc-feature .sf-ic{ width:46px; height:46px; border-radius:12px; background:rgba(0,180,255,.09); color:var(--accent-ink); display:grid; place-items:center; flex:none; }
.svc-feature .sf-k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:5px; }
.svc-feature h4{ font-size:1.08rem; margin-bottom:4px; }
.svc-feature p{ color:var(--muted); font-size:.92rem; line-height:1.5; }

/* ---------- FULL-WIDTH VISUAL ---------- */
.svc-visual{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-2); aspect-ratio:21/9; }
.svc-visual img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease); }
.svc-visual:hover img{ transform:scale(1.04); }
.svc-visual .sv-tag{ position:absolute; left:20px; bottom:18px; background:rgba(255,255,255,.94); padding:.5em 1em; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
@media(max-width:760px){ .svc-visual{ aspect-ratio:4/3; } }

/* ---------- BENEFITS (3-col) ---------- */
.svc-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:860px){ .svc-benefits{ grid-template-columns:1fr; } }
.svc-benefit{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px); }
.svc-benefit .sb-ic{ width:42px; height:42px; border-radius:12px; background:rgba(0,180,255,.09); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:14px; }
.svc-benefit h4{ font-size:1.05rem; margin-bottom:6px; }
.svc-benefit p{ color:var(--muted); font-size:.9rem; line-height:1.5; }

/* ---------- PROOF GALLERY ---------- */
.svc-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:820px){ .svc-gallery{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .svc-gallery{ grid-template-columns:1fr; } }
.svc-gallery .gi{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--bg-3); }
.svc-gallery .gi img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.svc-gallery .gi:hover img{ transform:scale(1.06); }
.svc-gallery .gi .gc{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(15,13,8,.82)); opacity:0; transition:opacity .4s; display:flex; align-items:flex-end; padding:16px; }
.svc-gallery .gi:hover .gc{ opacity:1; }
.svc-gallery .gi .gc span{ color:#fff; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; }

.accent-text{ color:var(--accent-ink); }