/* ObliqueTech service detail page.
   Taller hero, stats as a section of their own, 200px rhythm between sections,
   capability cards that link on, an auto-scrolling stage rail and animated technology layers.
   Everything is scoped to .ot-sd so the Services index and the blog keep their own spacing. */

/* ---- Hero: 980px tall on desktop, content centred ---- */
.ot-sd .ot-sv-hero{padding-block:3.5rem 4rem}
@media(min-width:1024px){
	.ot-sd .ot-sv-hero{display:grid;align-content:center;min-height:980px;padding-block:100px}
	.ot-sd .ot-sd-hero__grid{gap:4rem}
}
.ot-sd .ot-sv-hero .ot-sv-lead{max-width:none}
.ot-sd .ot-sv-hero__visual{max-width:34rem}

/* ---- 100px top + 100px bottom leaves 200px between two sections ---- */
.ot-sd .ot-sv-sec{padding-block:clamp(3.5rem,9vw,100px)}
@media(min-width:1024px){.ot-sd .ot-sv-sec{padding-block:100px}}
.ot-sd .ot-sv-sec>.ot-sv__wrap{gap:2.5rem}

/* ---- Section intro runs the full width instead of wrapping early ---- */
.ot-sd .ot-sv-head__text,
.ot-sd .ot-sv-head--split .ot-sv-head__text{max-width:none}
.ot-sd .ot-sd-head--center .ot-sv-head__text{margin-inline:auto}
.ot-sd .ot-sv-head--split{align-items:flex-start}
@media(min-width:768px){.ot-sd .ot-sv-head--split{flex-direction:column}}

/* ---- Stats band ---- */
.ot-sd-stats__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ot-sd-stat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.625rem;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid var(--ot-line);border-radius:.75rem;background:var(--ot-card);box-shadow:0 10px 15px -3px rgba(0,0,0,.35)}
.ot-sd-stat:hover{border-color:var(--ot-line-hover)}
.ot-sd-stat strong{font-size:clamp(2.5rem,5vw,3.75rem);line-height:1;font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.ot-sd-stat__cap{font-size:14px;line-height:1.6;color:var(--ot-muted-2)}
.ot-sd-stat__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:scaleX(0);transform-origin:0 50%}
.ot-sd-stat.is-shown .ot-sd-stat__bar{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 120ms)}
.ot-sv-anim .ot-sd-stat{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms),border-color .2s}
.ot-sv-anim .ot-sd-stat.is-shown{opacity:1;transform:none}

/* ---- Capability cards: no spec number, a link instead of a tag ---- */
.ot-sd-cap{position:relative}
.ot-sd-cap .ot-sv-card__top{justify-content:flex-start}
.ot-sd .ot-sd-cap__cta{margin-top:auto;padding-top:1.25rem}
.ot-sd .ot-sd-cap .ot-sd-cap__link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.ot-sd-cap:focus-within{border-color:var(--ot-line-hover)}

/* ---- Stage rail: four at a time, scrolls on its own ---- */
.ot-sd-rail{position:relative;display:flex;flex-direction:column;gap:1.25rem}
.ot-sd-rail__track{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.ot-sd-rail__track::-webkit-scrollbar{width:0;height:0;display:none}
.ot-sd-rail__track:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:.5rem}
.ot-sd .ot-sv-pipe{min-width:0;gap:1rem;padding-top:.25rem}
.ot-sd .ot-sv-stage{flex:0 0 calc((100% - 3rem) / 4);padding:1.5rem;border-radius:.75rem;scroll-snap-align:start}
@media(max-width:1023px){.ot-sd .ot-sv-stage{flex-basis:calc((100% - 1rem) / 2)}}
@media(max-width:639px){.ot-sd .ot-sv-stage{flex-basis:86%}}
.ot-sd-rail__bar{position:relative;height:2px;border-radius:2px;background:var(--ot-line);overflow:hidden}
.ot-sd-rail__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.35),#fff);transform:scaleX(.25);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}

/* ---- Technology layers ---- */
.ot-sd-layer{overflow:hidden}
.ot-sd-layer .ot-sd-tech li{position:relative}
.ot-sd-layer .ot-sd-tech li::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,0))}
.ot-sd-layer.is-shown .ot-sd-tech li::after{width:100%;transition:width .7s cubic-bezier(.2,.7,.2,1) calc(var(--k,0) * 90ms + 200ms)}
.ot-sd-layer .ot-sd-tech strong{transition:color .2s,transform .2s}
.ot-sd-layer .ot-sd-tech li:hover strong{color:#fff;transform:translateX(3px)}
.ot-sv-anim .ot-sd-layer .ot-sd-tech li{opacity:0;transform:translateX(-12px)}
.ot-sv-anim .ot-sd-layer.is-shown .ot-sd-tech li{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1) calc(var(--k,0) * 90ms),transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--k,0) * 90ms)}
.ot-sd .ot-sd-layer .ot-sd-layer__sheen{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);transform:translateX(-120%)}
.ot-sd-layer.is-shown .ot-sd-layer__sheen{animation:ot-sd-sheen 1.6s cubic-bezier(.2,.7,.2,1) .25s 1}
@keyframes ot-sd-sheen{to{transform:translateX(120%)}}

@media(prefers-reduced-motion:reduce){
	.ot-sd-stat,.ot-sd-layer .ot-sd-tech li{opacity:1!important;transform:none!important}
	.ot-sd-stat__bar{transform:scaleX(1)}
	.ot-sd-layer__sheen{display:none}
	.ot-sd-rail__track{scroll-snap-type:none}
}

/* ======================================================================
   13-section layout: problem, scope, why choose, case studies, comparison, pricing, industries
   ====================================================================== */

/* ---- 2. Problem ---- */
.ot-sd-pain{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.ot-sd-pain__item{border-left:2px solid rgba(255,255,255,.22)}
.ot-sd-pain__item h3{color:#fff}

/* ---- 4. Scope of work ---- */
.ot-sd-scope{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){
	.ot-sd-scope{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
	.ot-sd-scope--single{grid-template-columns:minmax(0,1fr)}
}
.ot-sd-scope__list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.ot-sd-out{border-style:dashed}
.ot-sd-out ul{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}
.ot-sd-out li{display:flex;align-items:flex-start;gap:.75rem;font-size:14px;line-height:1.55;color:var(--ot-muted-2)}
.ot-sd-out__x{position:relative;flex:0 0 .75rem;height:.75rem;margin-top:.4rem}
.ot-sd-out__x::before,.ot-sd-out__x::after{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ot-muted)}
.ot-sd-out__x::before{transform:rotate(45deg)}
.ot-sd-out__x::after{transform:rotate(-45deg)}

/* ---- 6. Why choose ---- */
.ot-sd-why{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ot-sd .ot-sd-why__note{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;padding:1rem 1.25rem;border:1px solid var(--ot-line);border-radius:.5rem;background:var(--ot-card)}
.ot-sd-why__note strong{font-size:15px;color:#fff;font-weight:600}

/* ---- 7. Case studies ---- */
.ot-sd-cases{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.ot-sd-case__result{display:flex;flex-direction:column;gap:.25rem;padding-block:1rem;border-block:1px solid var(--ot-line)}
.ot-sd-case__result strong{font-size:clamp(2rem,4vw,2.75rem);line-height:1;font-weight:700;letter-spacing:-.03em;color:#fff}
.ot-sd-case__result span{font-size:14px;line-height:1.5;color:var(--ot-muted-2)}
.ot-sd-case .ot-sv-card__text strong{color:#fff;font-weight:600}
.ot-sd-empty{align-items:flex-start;border-style:dashed;max-width:40rem;margin-inline:auto}

/* ---- 8. Comparison table ---- */
.ot-sd-cmp{padding:0;overflow:hidden}
.ot-sd-cmp__scroll{overflow-x:auto}
.ot-sd-cmp__scroll:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.ot-sd-cmp table{width:100%;min-width:42rem;border-collapse:collapse;text-align:left}
.ot-sd-cmp th,.ot-sd-cmp td{padding:1rem 1.25rem;border-bottom:1px solid var(--ot-line);font-size:14px;line-height:1.5;vertical-align:top}
.ot-sd-cmp thead th{font-family:var(--ot-mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ot-muted)}
.ot-sd-cmp tbody th{font-weight:600;color:#fff;white-space:nowrap}
.ot-sd-cmp td{color:var(--ot-muted-2)}
.ot-sd-cmp tbody tr:last-child th,.ot-sd-cmp tbody tr:last-child td{border-bottom:0}
.ot-sd-cmp .is-us{background:rgba(255,255,255,.05);color:#fff}
.ot-sd-cmp tbody td.is-us{font-weight:600}
.ot-sd-cmp tbody tr{transition:background .2s}
.ot-sd-cmp tbody tr:hover{background:rgba(255,255,255,.025)}

/* ---- 9. Pricing ---- */
.ot-sd-pricing{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);align-items:stretch}
@media(min-width:900px){.ot-sd-pricing{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ot-sd-price{padding:clamp(1.5rem,3vw,2rem)}
.ot-sd-price.is-featured{border-color:rgba(255,255,255,.4);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),var(--ot-card)}
.ot-sd-price__list{display:flex;flex-direction:column;gap:.75rem;margin-block:.5rem 1rem}
.ot-sd-price__list li{display:flex;gap:.75rem;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--ot-muted-2)}
.ot-sd-price__list .ot-sd-dot{flex:0 0 6px;width:6px;height:6px;margin-top:.5rem;border-radius:50%;background:#fff}
.ot-sd-price .ot-sv-btn{margin-top:auto;width:100%}
.ot-sd-price__note{text-align:center;font-size:14px;line-height:1.6;color:var(--ot-muted-2)}

/* ---- 10. Industries and use cases ---- */
.ot-sd-ind{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}

/* ---- 11. Stats now sits mid-page with its own heading ---- */
.ot-sd-stats .ot-sd-stats__grid{margin-top:.5rem}
/* ===== Titanium Obsidian design (Stitch SERVICE-detail): Space Grotesk / Manrope / JetBrains Mono, violet-cobalt, graphite surfaces ===== */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/spacegrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body.single-ot_service{background:#111318}
.ot-sd{--ot-bg:#111318;--ot-bg-alt:#1a1b21;--ot-card:#1e2025;--ot-card-2:#1a1b21;--ot-ink:#e2e2e9;--ot-muted:#908fa0;--ot-muted-2:#c7c4d7;--ot-line:rgba(255,255,255,.06);--ot-line-2:rgba(255,255,255,.08);--ot-line-hover:rgba(192,193,255,.4);--ot-accent:#c0c1ff;--ot-accent-hover:#e1e0ff;--ot-cta:#494bd6;--ot-cta-hover:#5b5de8;--ot-font:'Manrope',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--ot-head:'Space Grotesk','Manrope',system-ui,sans-serif;--ot-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;background:#111318;color:#e2e2e9;font-family:var(--ot-font)}
.ot-sd h1,.ot-sd h2,.ot-sd h3,.ot-sd h4{font-family:var(--ot-head);color:#e2e2e9}
.ot-sd p,.ot-sd li{font-size:15px;line-height:24px;letter-spacing:-.005em}
.ot-sd .ot-sv-lead{font-size:18px;line-height:28px;letter-spacing:-.01em;color:#c7c4d7}
.ot-sd .ot-sv-head__text,.ot-sd .ot-sv-card__text{color:#c7c4d7}
.ot-sd .ot-sv-sec{background:#111318}
.ot-sd .ot-sv-sec--alt{background:#1a1b21}
/* hero */
.ot-sd .ot-sv-hero{background:#0c0e13}
.ot-sd .ot-sv-hero h1{font-weight:700;font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.03em}
.ot-sd .ot-sv__accent{background:linear-gradient(90deg,#c0c1ff,#adc6ff,#c0c1ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ot-sd .ot-sv-orb--1{background:rgba(192,193,255,.1)!important}
.ot-sd .ot-sv-orb--2{background:rgba(5,102,217,.15)!important}
.ot-sd .ot-sv-hero__lines{background-image:linear-gradient(rgba(192,193,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(192,193,255,.05) 1px,transparent 1px)}
.ot-sd .ot-sd-crumb,.ot-sd .ot-sd-crumb a{font-family:var(--ot-mono);font-size:12px;letter-spacing:.04em;color:#908fa0}
.ot-sd .ot-sd-crumb__here{color:#e2e2e9;font-weight:600}
/* labels */
.ot-sd .ot-sv-eyebrow,.ot-sd .ot-sv-label{font-family:var(--ot-mono);font-size:12px;line-height:16px;letter-spacing:.06em;color:#c0c1ff;font-weight:500}
.ot-sd .ot-sv-head h2{font-weight:600;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.2;letter-spacing:-.025em}
/* buttons */
.ot-sd .ot-sv-btn{border-radius:.75rem;padding:1rem 1.5rem}
.ot-sd .ot-sv-btn--primary{background:linear-gradient(90deg,#494bd6,#0566d9);color:#fff;font-family:var(--ot-head);font-size:18px;font-weight:600;box-shadow:0 0 24px -4px rgba(99,102,241,.45);border:0}
.ot-sd .ot-sv-btn--primary:hover{background:linear-gradient(90deg,#5b5de8,#1a7aef);box-shadow:0 0 32px rgba(99,102,241,.6)}
.ot-sd .ot-sv-btn--ghost{background:#1e2025;color:#e2e2e9}
.ot-sd .ot-sv-btn--ghost:hover{background:#37393f}
/* cards and panels: tonal, no hairline */
.ot-sd .ot-sv-card,.ot-sd .ot-sd-cap,.ot-sd .ot-sd-price,.ot-sd .ot-sd-stat,.ot-sd .ot-sd-scope__item,.ot-sd .ot-sd-why__item,.ot-sd .ot-sd-ind__item,.ot-sd .ot-sv-stage,.ot-sd .ot-sd-out{background:#1e2025;border-color:transparent;border-radius:1rem;box-shadow:none}
.ot-sd .ot-sv-card:hover,.ot-sd .ot-sd-cap:hover,.ot-sd .ot-sv-stage:hover,.ot-sd .ot-sd-why__item:hover,.ot-sd .ot-sd-ind__item:hover{background:#37393f;border-color:transparent}
.ot-sd .ot-sv-sec--alt .ot-sv-card,.ot-sd .ot-sv-sec--alt .ot-sd-cap,.ot-sd .ot-sv-sec--alt .ot-sd-stat{background:#1e2025}
.ot-sd .ot-sv-stage{border-radius:.75rem}
.ot-sd .ot-sv-console{background:rgba(26,27,33,.85);border:0;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.ot-sd .ot-sv-icon{background:rgba(192,193,255,.1);color:#c0c1ff;border-radius:.75rem}
.ot-sd .ot-sv-link,.ot-sd .ot-sd-cap__cta{color:#c0c1ff}
.ot-sd .ot-sd-stat strong{font-family:var(--ot-head);color:#e2e2e9}
.ot-sd .ot-sd-stat__bar{background:linear-gradient(90deg,#c0c1ff,rgba(192,193,255,0))}
.ot-sd .ot-sd-price.is-featured{background:#282a2f;box-shadow:0 0 20px -3px rgba(99,102,241,.35)}
.ot-sd .ot-sd-cmp th.is-us,.ot-sd .ot-sd-cmp td.is-us{background:rgba(192,193,255,.08)}
/* FAQ and CTA */
.ot-sd .ot-sd-faq__list>*{background:#1e2025;border-radius:.75rem;border-color:transparent}
.ot-sd .ot-sv-cta__panel{background:linear-gradient(135deg,#282a2f,#1e2025 50%,#0c0e13);border-radius:1.5rem;border-color:transparent;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.ot-sd .ot-sv-cta h2{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.ot-sd a.ot-sv-btn--primary,.ot-sd a.ot-sv-btn--primary:hover{color:#fff;background-image:linear-gradient(90deg,#494bd6,#0566d9)}
.ot-sd a.ot-sv-btn--primary:hover{background-image:linear-gradient(90deg,#5b5de8,#1a7aef)}

.ot-sd .ot-sd-price .ot-sv-btn,.ot-sd .ot-sd-cap .ot-sv-btn{font-size:14px;max-width:100%;white-space:normal;text-align:center;padding:.875rem 1rem}
@media(max-width:600px){.ot-sd .ot-sv-btn--primary{font-size:16px}}