/* Elevation 6 - Services page. Loaded after styles.css on /services only.
   The card layout and tones are the version 18 service styles. */

/* Service tones (.tone-1 to .tone-4) are in styles.css, shared with the home page. */

/* Status colours for the risk animations. Red and amber are the site's
   existing status tokens; green is Aurora Green. */
.svc-list{--rag-red:var(--status-critical);--rag-amber:var(--status-warning);--rag-green:var(--e6-green);--node-grey:var(--e6-grey-600)}


/* Card list: one column, two from 900px */
.svc-list{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px;align-items:start}
@media(min-width:900px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}


/* Card */
.svc{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;scroll-margin-top:88px;padding:24px;color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-hairline);background:linear-gradient(160deg,color-mix(in oklab,var(--c) 9%,var(--surface-card)) 0%,var(--surface-card) 58%);border:1px solid color-mix(in oklab,var(--c) 22%,var(--border-hairline));border-radius:var(--radius-md);transition:var(--transition-base)}
@media(min-width:768px){.svc{padding:32px}}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--c),transparent 78%)}
.svc.is-expandable{cursor:pointer}
.svc:hover{border-color:color-mix(in oklab,var(--c) 46%,var(--border-hairline));background:linear-gradient(160deg,color-mix(in oklab,var(--c) 15%,var(--surface-card)) 0%,var(--surface-card) 58%)}
.svc.open{cursor:auto}

.svc-head{align-self:stretch}
.svc-name{font-size:clamp(24px,3vw,30px);letter-spacing:-.01em;line-height:1.1;color:var(--text-primary)}
.svc-sub{margin-top:18px;font-size:clamp(17px,2vw,19px);font-weight:var(--weight-bold);line-height:1.3;letter-spacing:0;color:var(--c)}

.svc-actions{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:22px}
.svc-toggle{-webkit-appearance:none;appearance:none;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--tint-ice-06);border:1px solid var(--border-strong);color:var(--accent-primary);background:color-mix(in oklab,var(--accent-primary) 12%,transparent);border:1px solid color-mix(in oklab,var(--accent-primary) 45%,transparent);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:15px;font-weight:var(--weight-bold);letter-spacing:0;color:color-mix(in oklab,var(--accent-primary) 80%,var(--e6-ice));cursor:pointer;transition:var(--transition-base)}
.svc-toggle:hover{background:color-mix(in oklab,var(--accent-primary) 20%,transparent);border-color:var(--accent-primary)}
.svc-toggle svg{width:18px;height:18px;flex:none;stroke-width:2.8;transition:transform var(--dur-slow) var(--ease-standard)}
.svc.open .svc-toggle svg{transform:rotate(180deg)}

/* Open state: body copy, tick boxes and the contact button */
.svc-body{align-self:stretch;margin-top:28px;padding-top:28px;border-top:1px solid color-mix(in oklab,var(--c) 26%,var(--border-hairline));display:flex;flex-direction:column;gap:16px;cursor:auto}
.svc-body[hidden]{display:none}
.svc-body p{font-size:16px;line-height:var(--leading-loose);color:var(--text-body);max-width:68ch}
.svc-body .svc-out{font-size:17px;font-weight:var(--weight-bold);line-height:var(--leading-body);color:var(--text-primary)}

.svc-opts{margin:8px 0 0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:4px}
.svc-opts legend{float:left;width:100%;margin:0 0 8px;padding:0;font-size:12px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c)}
.svc-opt{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-size:16px;line-height:var(--leading-body);color:var(--text-primary);cursor:pointer}
.svc-opt input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;background:var(--surface-inset);border:1.5px solid var(--e6-grey-500);border:1.5px solid color-mix(in oklab,var(--c) 70%,var(--e6-grey-500));border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-base)}
.svc-opt input:hover{border-color:var(--c)}
.svc-opt input:checked{background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23050A0F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--c)}
.svc-opt input:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.svc .btn{align-self:flex-start;margin-top:8px;gap:10px}


/* Animation panel ----------------------------------------------------------
   Every element's resting style is the final frame. services.js adds
   .svc-motion to <html> when motion is allowed, which parks each animation
   on its first frame. .is-playing runs it while the card is on screen. At the
   end it holds, fades out and starts again. Without JavaScript, with reduced
   motion, or in print, the final frame shows and nothing moves.
   Timings in the markup (--t) are design seconds; --k scales them all. */
.svc-anim{--k:1.25;align-self:stretch;margin-top:24px}
.svc-anim svg{display:block;width:100%;max-width:460px;height:auto;overflow:hidden}
@media(max-width:767px){.svc-anim{margin-left:-16px;margin-right:-16px}.svc-anim svg{max-width:none}}

.svc-anim text{font-family:var(--font-sans);font-size:11px;fill:var(--text-secondary)}
.svc-anim .t-hub{font-size:12px;font-weight:var(--weight-bold);fill:var(--text-primary)}
.svc-anim .t-arrow,.svc-anim .t-wall{font-size:12px;font-weight:var(--weight-bold);fill:var(--c)}
.svc-anim .ln{fill:none;stroke:var(--c);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:3 6;opacity:.85}
.svc-anim .ln-threat{stroke:var(--rag-red);opacity:1}
.svc-anim .dot{fill:var(--c)}
.svc-anim .grey{fill:var(--node-grey)}
.svc-anim .hub{fill:var(--surface-card);fill:color-mix(in oklab,var(--c) 18%,var(--surface-card));stroke:var(--c);stroke-width:1.5}
.svc-anim .wall{fill:var(--c)}
.svc-anim .arrow{fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-anim .bracket{fill:none;stroke:var(--rag-red);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* Ratings: colour plus shape. Green is solid, amber is a ring with a centre
   dot, red is solid with a halo. */
.svc-anim .rag-g{fill:var(--rag-green)}
.svc-anim .rag-a{fill:var(--rag-amber)}
.svc-anim .rag-a-ring{fill:none;stroke:var(--rag-amber);stroke-width:2}
.svc-anim .rag-r{fill:var(--rag-red)}
.svc-anim .rag-r-halo{fill:none;stroke:var(--rag-red);stroke-width:1.2;opacity:.6}
.svc-anim .ghost{opacity:0}

/* Motion */
@keyframes svc-in{from{opacity:0;transform:translateY(5px)}}
@keyframes svc-fade{from{opacity:0}}
@keyframes svc-pop{from{opacity:0;transform:scale(.4)}}
@keyframes svc-rise{from{opacity:0;transform:scaleY(0)}}
@keyframes svc-move{from{transform:translate(var(--dx),var(--dy))}}
@keyframes svc-flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes svc-on{from{opacity:0}to{opacity:1}}
@keyframes svc-off{from{opacity:1}to{opacity:0}}
@keyframes svc-dim{from{opacity:.85}to{opacity:.2}}
@keyframes svc-undim{from{opacity:.2}to{opacity:.85}}
@keyframes svc-slide{from{opacity:0;transform:translateX(-10px)}}
@keyframes svc-pulse{50%{opacity:.3}}
@keyframes svc-hush{30%,70%{opacity:.25}}
@keyframes svc-reach{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px)}} /* a line reaching out, left to right */
@keyframes svc-reach-back{from{clip-path:inset(-4px -4px -4px 100%)}to{clip-path:inset(-4px)}} /* right to left */
@keyframes svc-veil{0%,76%{opacity:1}100%{opacity:0}}

.svc-motion .svc-anim .a-in{animation:svc-in calc(.5s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-fade{animation:svc-fade calc(.5s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-pop{transform-box:fill-box;transform-origin:center;animation:svc-pop calc(.5s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-rise{transform-box:fill-box;transform-origin:center;animation:svc-rise calc(.5s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-reach{animation:svc-reach calc(.6s*var(--k)) linear calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-reach-back{animation:svc-reach-back calc(.6s*var(--k)) linear calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-move{animation:svc-move calc(1.2s*var(--k)) var(--ease-in-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-flow{animation:svc-flow calc(.6s*var(--k)) linear calc(var(--t,0s)*var(--k)) var(--n,4) both}
.svc-motion .svc-anim .a-on{animation:svc-on calc(.35s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-off{animation:svc-off calc(.35s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both}
.svc-motion .svc-anim .a-hush{animation:svc-hush calc(1.2s*var(--k)) ease-in-out calc(var(--t,0s)*var(--k))} /* labels fade while they re-sort */
/* Hidden between --t1 and --t2 (resting state visible) */
.svc-motion .svc-anim .a-offon{animation:svc-off calc(.35s*var(--k)) var(--ease-out) calc(var(--t1)*var(--k)) forwards,svc-on calc(.35s*var(--k)) var(--ease-out) calc(var(--t2)*var(--k)) forwards}
/* Shown between --t1 and --t2 (resting state hidden) */
.svc-motion .svc-anim .a-onoff{animation:svc-on calc(.35s*var(--k)) var(--ease-out) calc(var(--t1)*var(--k)) forwards,svc-off calc(.35s*var(--k)) var(--ease-out) calc(var(--t2)*var(--k)) forwards}
/* A line that pulses, stops and dims at --t1, then recovers at --t2 */
.svc-motion .svc-anim .a-break{animation:svc-flow calc(.6s*var(--k)) linear calc(var(--t,0s)*var(--k)) var(--n,2),svc-dim calc(.3s*var(--k)) var(--ease-out) calc(var(--t1)*var(--k)) forwards,svc-undim calc(.3s*var(--k)) var(--ease-out) calc(var(--t2)*var(--k)) forwards,svc-flow calc(.6s*var(--k)) linear calc(var(--t2)*var(--k)) var(--n2,4)}
.svc-motion .svc-anim .a-arrow{animation:svc-slide calc(.5s*var(--k)) var(--ease-out) calc(var(--t,0s)*var(--k)) both,svc-pulse calc(.8s*var(--k)) ease-in-out calc((var(--t,0s) + .5s)*var(--k)) 3}
/* Loop: hold the final frame, fade out, then services.js restarts the card.
   services.js sets --end to the time the last element finishes. */
.svc-motion .svc-anim svg{animation:svc-veil calc(2.64s*var(--k)) linear var(--end,9999s) forwards}

/* Parked until the card is on screen (more specific than the rules above) */
.svc-motion .svc-anim:not(.is-playing) svg,.svc-motion .svc-anim:not(.is-playing) svg *{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){.svc-anim svg,.svc-anim svg *{animation:none!important}}
@media print{.svc-anim svg,.svc-anim svg *{animation:none!important}}

/* Night sky skin for the service animations (svg.night). Stars, aurora light, a moonlit ridge. */
.svc-anim svg.night .sky-star{fill:#EEF2F5;opacity:.55}
.svc-anim svg.night .sky-wash{opacity:1}
.svc-anim svg.night .mtn{opacity:1}
.svc-anim svg.night .mtn-far{fill:#1A2B3E;opacity:.55}
.svc-anim svg.night .mtn-snow{fill:#DDE6EE;opacity:.32}
.svc-anim svg.night .mtn-crest{fill:none;stroke:#DDE6EE;stroke-width:.9;stroke-linejoin:round;opacity:.45}
.svc-anim svg.night .halo-w{fill:#EEF2F5;opacity:.28}
.svc-anim svg.night .core{fill:#FFFFFF}
.svc-anim svg.night .glow{fill:var(--c);opacity:.22}
.svc-anim svg.night .glow-w{fill:#EEF2F5;opacity:.12}
.svc-anim svg.night .glow-g{fill:var(--rag-green);opacity:.25}
.svc-anim svg.night .glow-r{fill:var(--rag-red);opacity:.22}
.svc-anim svg.night .user{fill:var(--rag-green)}
.svc-anim svg.night .const{fill:none;stroke:#C8D3DD;stroke-width:.7;stroke-dasharray:1.5 3;opacity:.45}
.svc-anim svg.night .ln{stroke-width:1.4;opacity:.95}
.svc-anim svg.night .ln-threat{stroke:var(--rag-red)}
.svc-anim svg.night .beam,.svc-anim svg.night .ribbon,.svc-anim svg.night .arrow-glow,.svc-anim svg.night .bracket-glow{fill:none;stroke-linecap:round;opacity:.55}
.svc-anim svg.night .beam{stroke-width:4}
.svc-anim svg.night .ribbon{stroke-width:9;opacity:.5}
.svc-anim svg.night .ribbon-core{fill:none;stroke-width:2.6;stroke-linecap:round;opacity:.85}
.svc-anim svg.night .arrow-glow{stroke-width:5}
.svc-anim svg.night .bracket-glow{stroke-width:4;stroke-linejoin:round}
.svc-anim svg.night .bracket{stroke-width:1.5}
.svc-anim svg.night .arrow{stroke-width:1.6}
.svc-anim svg.night .trail{fill:none;stroke:var(--rag-red);stroke-width:5;stroke-linecap:round;opacity:.16}
.svc-anim svg.night .halo{fill:var(--c);opacity:.32}
.svc-anim svg.night .orbit{fill:none;stroke:var(--c);stroke-width:1;stroke-dasharray:2 4;opacity:.55}
.svc-anim svg.night .hub{fill:#0B1824;stroke:var(--c);stroke-width:1.5}
.svc-anim svg.night .curtain-glow{opacity:.7}
.svc-anim svg.night .curtain-ray{opacity:.8}
.svc-anim svg.night .wall{opacity:1}

@keyframes svc-twinkle{0%,100%{opacity:.55}50%{opacity:.12}}
@keyframes svc-shimmer{0%,100%{opacity:1}35%{opacity:.45}70%{opacity:.85}}
.svc-motion .svc-anim .a-twinkle{animation:svc-twinkle calc(1.8s*var(--k)) ease-in-out calc(var(--t,0s)*var(--k)) 3}
.svc-motion .svc-anim .a-shimmer{animation:svc-shimmer calc(1.6s*var(--k)) ease-in-out calc(var(--t,0s)*var(--k)) 3}