/* ============ PAGE STYLES: services.html ============ */

/* Accordion (FAQ) */
.accordion{display:grid;gap:12px}
.acc-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:box-shadow var(--t),border-color var(--t)}
.acc-item:hover{border-color:var(--blue-500);box-shadow:var(--shadow-sm)}
.acc-item h3{margin:0;font-size:1.05rem}
.acc-item button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;padding:20px 22px;cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--navy-900)}
.acc-item button:focus-visible{outline:3px solid var(--orange-500);border-radius:var(--radius)}
.acc-item .n{font-size:.85rem;color:var(--orange-500)}
.acc-item .pm{margin-left:auto;position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist-2);transition:background var(--t),transform var(--t) var(--ease)}
.acc-item .pm::before,.acc-item .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--blue-700);transition:transform var(--t)}
.acc-item .pm::after{transform:rotate(90deg)}
.acc-item button[aria-expanded="true"] .pm{background:var(--orange-500);transform:rotate(180deg)}
.acc-item button[aria-expanded="true"] .pm::before,.acc-item button[aria-expanded="true"] .pm::after{background:#fff}
.acc-item button[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--t) var(--ease)}
.acc-panel p{padding:0 22px 22px 66px;margin:0;color:var(--ink-2)}

.svc-goggles{right:4%;top:22%;width:260px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;padding-bottom:10px}
.step .media{border-radius:var(--radius);aspect-ratio:4/3;margin:0 0 18px}
.step-n{position:absolute;top:14px;left:14px;font-family:var(--font-display);font-weight:700;background:#fff;color:var(--orange-500);padding:.2em .6em;border-radius:12px;box-shadow:var(--shadow-sm)}
.step p{color:var(--ink-2)}
.step:hover .media img{transform:scale(1.07)}
.step::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:30%;background:var(--grad-brand);border-radius:3px;transition:width var(--t-slow) var(--ease)}
.step:hover::after{width:100%}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.split-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,70px);align-items:center}
.split-grid.reverse{grid-template-columns:1.1fr .9fr}
.split-media{position:relative}
.split-media .media{border-radius:var(--radius-lg);aspect-ratio:4/5;margin:0}
.split-ring{left:-90px;bottom:-40px;width:280px;opacity:.6}
.split-eyes{right:-20px;top:-30px;width:150px}
.split-magnifier{left:-30px;bottom:-20px;width:120px}
.split .feature{padding:22px}
@media (max-width:900px){.split-grid,.split-grid.reverse{grid-template-columns:1fr}.split-media .media{aspect-ratio:16/10}}
.sec-antenna{right:5%;top:40px;width:70px}
.sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.sectors li{padding:.75em 1.3em;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:700;transition:all var(--t) var(--ease)}
.sectors li:hover{background:var(--grad-orange);border-color:transparent;transform:translateY(-3px) rotate(-1deg)}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}
.cta-feet{right:7%;bottom:30px;width:150px}