/* Service pages (/services/ hub + one page per service). Loaded after styles.css and insights.css. */

/* ---------- Hero ---------- */
.svc-hero { position: relative; overflow: hidden; padding: clamp(8rem, 14vw, 10.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid var(--line); }
.svc-hero .hero__grid { opacity: .55; mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 75%); }
.svc-hero__glow { position: absolute; width: 60rem; height: 60rem; left: -18rem; top: -26rem; border-radius: 50%; background: radial-gradient(circle, rgba(200, 240, 45, .16), transparent 62%); pointer-events: none; }
.svc-hero__mark { position: absolute; right: -6rem; bottom: -9rem; width: clamp(22rem, 42vw, 40rem); height: auto; aspect-ratio: 1; color: var(--lime); opacity: .045; pointer-events: none; animation: svc-float 14s ease-in-out infinite; }
@keyframes svc-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2rem) rotate(4deg); } }
.svc-hero .container { position: relative; display: grid; gap: 2.75rem; align-items: end; }
@media (min-width: 1024px) { .svc-hero .container { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4.5rem; } }
.svc-hero .crumbs { margin-bottom: 1.6rem; }
.svc-hero__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: .98; letter-spacing: -.045em; margin: 1.2rem 0 1.5rem; text-wrap: balance; }
.svc-hero__lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: rgba(243, 244, 236, .82); max-width: 40rem; }
.svc-hero__lead strong { color: var(--paper); font-weight: 600; }
.svc-hero .hero__ctas { margin-top: 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; color: rgba(243, 244, 236, .82); background: rgba(255, 255, 255, .02); }
.chips li::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(200, 240, 45, .7); }

/* "At a glance": the short, quotable summary AI answers and featured snippets pick up */
.glance { position: relative; border-radius: 1.5rem; border: 1px solid rgba(200, 240, 45, .28); background: linear-gradient(155deg, rgba(200, 240, 45, .1), transparent 50%), #111312; padding: 1.6rem 1.6rem 1.2rem; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.glance::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(200, 240, 45, .9) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glance-spin 6s linear infinite; pointer-events: none; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes glance-spin { to { --ang: 360deg; } }
.glance__tag { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.glance__summary { margin: .8rem 0 1.1rem; font-size: 1rem; line-height: 1.6; color: rgba(243, 244, 236, .9); }
.glance dl { display: grid; border-top: 1px solid var(--line); }
.glance dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.glance dl div:last-child { border-bottom: 0; }
.glance dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fog); padding-top: .15rem; }
.glance dd { font-size: .95rem; color: var(--paper); line-height: 1.45; }
@media (max-width: 480px) { .glance dl div { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- Body layout tweaks on service pages ---------- */
.svc-body { padding-top: clamp(3rem, 6vw, 4.5rem); }
.svc-updated { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fog); margin-bottom: 1.75rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.svc-updated b { color: var(--paper); font-weight: 500; }

/* Answer-first paragraph under each H2 */
.prose p.answer { font-size: 1.14rem; line-height: 1.7; color: var(--paper); padding-left: 1.1rem; border-left: 2px solid var(--lime); }

/* Feature cards */
.prose .feature-grid { display: grid; gap: .9rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .prose .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.feature { position: relative; overflow: hidden; padding: 1.35rem 1.35rem 1.25rem; border-radius: 1.15rem; border: 1px solid var(--line); background: #111312; transition: border-color .4s var(--ease), transform .5s var(--ease), background-color .4s; }
.feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), rgba(200, 240, 45, .11), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.feature:hover { border-color: rgba(200, 240, 45, .4); transform: translateY(-3px); }
.feature:hover::before { opacity: 1; }
.feature__n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(200, 240, 45, .12); color: var(--lime); font-family: var(--f-mono); font-size: .75rem; margin-bottom: .85rem; }
.prose .feature h3 { margin: 0 0 .45rem; font-size: 1.12rem; }
.prose .feature p { margin: 0; font-size: .96rem; line-height: 1.6; color: rgba(243, 244, 236, .74); }

/* Process timeline */
.prose ol.process { list-style: none; padding: 0; margin-top: 1.6rem; counter-reset: step; display: grid; gap: 0; }
.prose ol.process > li { position: relative; padding: 0 0 1.75rem 3.6rem; counter-increment: step; }
.prose ol.process > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -.15rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .78rem; color: var(--ink); background: var(--lime); box-shadow: 0 0 0 6px rgba(200, 240, 45, .12); }
.prose ol.process > li::after { content: ""; position: absolute; left: 1.22rem; top: 2.6rem; bottom: .3rem; width: 1px; background: linear-gradient(var(--lime), rgba(200, 240, 45, .05)); }
.prose ol.process > li:last-child { padding-bottom: 0; }
.prose ol.process > li:last-child::after { display: none; }
.prose ol.process strong { display: block; font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .25rem; }
.prose ol.process span.when { display: inline-block; margin-left: .5rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); vertical-align: middle; }

/* Results band (case study numbers) */
.results { position: relative; overflow: hidden; margin-top: 1.6rem; padding: 1.6rem; border-radius: 1.4rem; border: 1px solid rgba(200, 240, 45, .25); background: radial-gradient(30rem circle at 100% 0, rgba(200, 240, 45, .12), transparent 60%), #0f1110; }
.results__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: baseline; }
.results__tag { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.results__where { font-size: .85rem; color: var(--fog); }
.results__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.2rem; }
@media (min-width: 640px) { .results__grid { grid-template-columns: repeat(4, 1fr); } }
.results__kpi { padding: 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.results__num { display: block; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.04em; color: var(--lime); line-height: 1; }
.results__lab { display: block; margin-top: .45rem; font-size: .84rem; line-height: 1.35; color: rgba(243, 244, 236, .75); }
.prose .results p { margin-top: 1.1rem; font-size: .95rem; color: rgba(243, 244, 236, .78); }

/* Honest note / callout reuse */
.prose .note { padding: 1.1rem 1.25rem; border-radius: 1rem; border: 1px dashed rgba(243, 244, 236, .22); font-size: .98rem; color: rgba(243, 244, 236, .82); }
.prose .note strong { color: var(--lime); }

/* Open FAQ (not an accordion: every answer visible to people and crawlers) */
.faq-open { margin-top: clamp(3rem, 6vw, 4.5rem); }
.faq-open > h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.03em; line-height: 1.1; scroll-margin-top: 7rem; }
.faq-open__list { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.faq-item { padding: 1.4rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .6rem; }
@media (min-width: 768px) { .faq-item { grid-template-columns: 2.25rem 1fr; column-gap: 1rem; } .faq-item > * { grid-column: 2; } .faq-item::before { grid-column: 1; grid-row: 1; } }
.faq-item::before { content: "Q"; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .75rem; color: var(--ink); background: var(--lime); }
.faq-item h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing: -.02em; line-height: 1.25; }
.faq-item p { color: rgba(243, 244, 236, .8); line-height: 1.7; }
.faq-item a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* Related services (reuses the home page .svc-list rows) */
.svc-related { border-top: 1px solid var(--line); }
.svc-related .svc-list { margin-top: 1rem; }

/* ---------- Hub: service cards ---------- */
.svc-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.svc-group:first-child { margin-top: 0; }
.svc-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.svc-group__head h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; }
.svc-group__head p { color: var(--fog); font-size: .95rem; }
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 680px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.svc-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 19rem; padding: 1.75rem; border-radius: 1.5rem; border: 1px solid var(--line); background: #111312; transition: border-color .45s var(--ease), transform .6s var(--ease); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(22rem circle at var(--mx, 80%) var(--my, 0%), rgba(200, 240, 45, .16), transparent 60%); opacity: .35; transition: opacity .45s; }
.svc-card:hover { border-color: rgba(200, 240, 45, .5); transform: translateY(-5px); }
.svc-card:hover::before { opacity: 1; }
.svc-card__mark { position: absolute; right: -2.5rem; bottom: -3rem; width: 11rem; height: 11rem; color: var(--lime); opacity: .05; transition: opacity .5s, transform .8s var(--ease); z-index: -1; }
.svc-card:hover .svc-card__mark { opacity: .12; transform: rotate(-8deg) scale(1.08); }
.svc-card__top { display: flex; justify-content: space-between; align-items: center; }
.svc-card__n { font-family: var(--f-mono); font-size: .75rem; color: var(--fog); letter-spacing: .1em; }
.svc-card__go { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background-color .4s, color .4s, transform .5s var(--ease), border-color .4s; }
.svc-card__go svg { width: 1rem; height: 1rem; }
.svc-card:hover .svc-card__go { background: var(--lime); color: var(--ink); border-color: var(--lime); transform: rotate(45deg); }
.svc-card h3 { margin-top: auto; padding-top: 2.2rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.45rem, 2.2vw, 1.8rem); letter-spacing: -.03em; line-height: 1.08; }
.svc-card p { margin-top: .7rem; color: rgba(243, 244, 236, .74); line-height: 1.55; font-size: .98rem; }
.svc-card__for { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; list-style: none; }
.svc-card__for li { font-size: .75rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); color: rgba(243, 244, 236, .7); }

/* ---------- Hub: "Which service do you need?" selector ---------- */
.needs { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 900px) { .needs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; } }
.needs__list { display: grid; gap: .5rem; }
.need-btn { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.2rem; border-radius: 1rem; border: 1px solid var(--line); background: #111312; font-size: 1rem; color: rgba(243, 244, 236, .82); transition: border-color .3s, background-color .3s, color .3s; }
.need-btn::after { content: ""; flex-shrink: 0; width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--fog); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.need-btn:hover { border-color: rgba(200, 240, 45, .35); color: var(--paper); }
.need-btn[aria-selected="true"] { border-color: var(--lime); background: linear-gradient(120deg, rgba(200, 240, 45, .12), transparent 70%), #111312; color: var(--paper); }
.need-btn[aria-selected="true"]::after { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 12px rgba(200, 240, 45, .8); }
.needs__panels { position: relative; }
@media (min-width: 900px) { .needs__panels { position: sticky; top: 7rem; } }
.need-panel { padding: 1.8rem; border-radius: 1.5rem; border: 1px solid rgba(200, 240, 45, .3); background: radial-gradient(26rem circle at 100% 0, rgba(200, 240, 45, .13), transparent 60%), #0f1110; }
.need-panel[hidden] { display: none; }
.need-panel__tag { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.need-panel h3 { margin-top: .7rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.1; }
.need-panel p { margin-top: .8rem; color: rgba(243, 244, 236, .8); line-height: 1.65; }
.need-panel ul { list-style: none; margin-top: 1rem; display: grid; gap: .5rem; }
.need-panel li { position: relative; padding-left: 1.4rem; color: rgba(243, 244, 236, .85); }
.need-panel li::before { content: "→"; position: absolute; left: 0; color: var(--lime); }
.need-panel .btn { margin-top: 1.4rem; }

/* Hub intro + why section */
.hub-why { border-top: 1px solid var(--line); }
.hub-why .steps { margin-top: 2rem; }
.hub-proof { margin-top: 2rem; }