/* ═══════════════════════════════════════════════════════════════════
   pages.css — styles for the inner pages (/services, /about, /contact).
   Loaded AFTER styles.css and only on those pages; the homepage stays
   untouched. Reuses the tokens and patterns from styles.css: same
   grounds, type scale, chip/card language, reveal/stagger hooks.
   Built from the 8/19 MASRI_NewBrand_AllPages handoff, with the 8/13
   conventions applied (DM Mono body, accessible accent pairs on light
   grounds, sections never split across a ground change).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page hero (shared by /services and /about) ─────────────────── */
.page-hero{position:relative;padding-top:var(--header-h);color:var(--white);background:linear-gradient(180deg,#252d3d 0%,#2e374c 46%,#3a4458 78%,#46505f 100%)}
/* Dot-grid overlay from the design (deck p.58 grid language) — same
   pattern as the homepage's pillars overlay, faded out toward the base. */
.page-hero__grid-overlay{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,currentColor 1px,transparent 1.4px);background-size:76px 76px;color:#ffffff24;mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 96%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 96%)}
/* Misty fade into the light band below — the design's masri00008 wash. */
.page-hero--fog::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(170px,24vw,360px);background:url(/assets/img/tex-fog-1600.240d3e8d.webp) center bottom/cover no-repeat;mask-image:linear-gradient(180deg,transparent,#000 76%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 76%);pointer-events:none}
.page-hero--fog .page-hero__inner{position:relative;z-index:1}
.page-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,3.6vw,60px);padding-block:clamp(32px,3vw,46px) clamp(28px,2.8vw,42px)}
.page-hero__title{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,4.35vw,63px);line-height:1.26;letter-spacing:var(--track-tight);color:var(--white);margin-bottom:clamp(14px,2vw,28px);text-wrap:balance}
.page-hero__lede{font-size:clamp(15px,1.25vw,18px);line-height:1.75;color:#dfe7f9;max-width:52ch;margin-bottom:clamp(22px,2.6vw,38px)}
.page-hero__art{position:relative;max-width:min(45vw,655px);width:100%;justify-self:center;mask-image:radial-gradient(closest-side,#000 52%,transparent 98%);-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 98%)}
.page-hero__art img{display:block;width:100%;height:auto}
.page-hero--about{overflow:hidden}
.page-hero--about .page-hero__inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;min-height:min(56vh,600px);align-content:center;z-index:1}
.page-hero--about .page-hero__title{max-width:24ch;margin-inline:auto}
/* Glass sculpture bleeding in from both edges, per the fig (Img_Web_25 at
   x=-310 and x=1301 of 1728). Radial masks feather the art's dark backdrop
   into the hero so no panel edges show. */
.page-hero__bleed{position:absolute;pointer-events:none;background:url(/assets/img/about-hero-1430.91043390.webp) center/contain no-repeat;mask-image:radial-gradient(58% 58% at 50% 50%,#000 18%,rgba(0,0,0,.5) 50%,transparent 84%);-webkit-mask-image:radial-gradient(58% 58% at 50% 50%,#000 18%,rgba(0,0,0,.5) 50%,transparent 84%)}
.page-hero__bleed--left{left:-16vw;top:14%;width:46vw;aspect-ratio:1430/1099}
.page-hero__bleed--right{right:-24vw;top:-4%;width:58vw;aspect-ratio:1430/1099}
.page-hero--about .page-hero__art{display:none}
@media (max-width:1000px){
  .page-hero__bleed{display:none}
  .page-hero--about .page-hero__art{display:block;max-width:440px;margin-top:clamp(10px,1.6vw,24px)}
  .page-hero--about .page-hero__art img{border-radius:22px}
}
@media (max-width:1000px){
  .page-hero__inner{grid-template-columns:1fr}
  .page-hero__art{max-width:440px}
}

/* ── Eyebrow label above section headings ───────────────────────── */
.eyebrow{display:block;font-family:var(--font-mono);font-size:clamp(12px,1vw,15px);font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:clamp(10px,1.4vw,18px)}
.band-light .eyebrow{color:var(--sage-ink)}
.band-ink .eyebrow{color:var(--mint)}

/* ── Alternating service bands ──────────────────────────────────── */
.band-light{position:relative;overflow:hidden;background:linear-gradient(180deg,#ebefeb 0%,#e2e9e5 55%,#dfe7e3 100%);color:var(--ink)}
.band-light>.shell,.band-ink>.shell{position:relative;z-index:1}
/* Misty ground transitions (the fig's masri000xx washes). A section marked
   melt-from-dark opens with the fog settling out of the dark band above it;
   melt-from-light is the same wash flipped. */
.melt-from-dark::before,.melt-from-light::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(160px,20vw,320px);pointer-events:none;background:url(/assets/img/tex-fog-1600.240d3e8d.webp) center top no-repeat;background-size:100% 100%}
.melt-from-dark::before{background-image:linear-gradient(180deg,#0000 34%,#e6ebe7 96%),url(/assets/img/tex-fog-1600.240d3e8d.webp);background-size:100% 100%,100% 100%}
.melt-from-light::before{transform:scaleY(-1);background-image:linear-gradient(180deg,#0000 34%,#252d3d 96%),url(/assets/img/tex-fog-1600.240d3e8d.webp);background-size:100% 100%,100% 100%}
.band-ink{position:relative;overflow:hidden;background:linear-gradient(180deg,#252d3d 0%,#2e374c 52%,#2a3345 100%);color:var(--mint)}
.svc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,72px);padding-block:clamp(26px,3.2vw,48px)}
.svc--media-right{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.svc__media{position:relative;width:100%;max-width:650px;margin-inline:auto}
.svc__media img{display:block;width:100%;height:auto}
/* Feather every media slot and melt baked backgrounds into the band. */
.svc__media{mask-image:radial-gradient(closest-side,#000 48%,transparent 97%);-webkit-mask-image:radial-gradient(closest-side,#000 48%,transparent 97%)}
.band-light .svc__media img{mix-blend-mode:multiply}
.band-ink .svc__media img{mix-blend-mode:lighten}
.svc__title{font-family:var(--font-mono);font-weight:300;font-size:clamp(23px,2.35vw,34px);line-height:1.38;letter-spacing:var(--track-tight);text-wrap:balance;margin-bottom:clamp(14px,1.8vw,24px)}
.band-light .svc__title{color:var(--ink)}
.band-ink .svc__title{color:var(--lavender)}
#vision .svc__title{color:var(--mint)}
.svc__body p{font-size:clamp(14px,1.1vw,16.5px);line-height:1.8;max-width:62ch}
.svc__body p+p{margin-top:1em}
.band-light .svc__body p{color:var(--muted)}
.band-ink .svc__body p{color:var(--mint)}
@media (max-width:1000px){
  .svc,.svc--media-right{grid-template-columns:1fr}
  .svc__media{max-width:420px}
  .svc__body{order:-1}
}

/* ── Capability chip rows (5-up under each service section) ─────── */
.cap-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);padding-bottom:clamp(36px,4.4vw,64px);list-style:none;margin:0}
.cap-chips li{display:grid;place-items:center;text-align:center;min-height:clamp(64px,5.6vw,88px);padding:14px 12px;font-family:var(--font-mono);font-size:clamp(12px,.95vw,15px);line-height:1.45;border-radius:14px}
.band-light .cap-chips li{color:var(--mint);background:var(--ink-deep);border:1px solid rgba(37,45,61,.25)}
.band-ink .cap-chips li{color:var(--mint);background:var(--ink-deep);border:1px solid rgba(255,255,255,.14)}
@media (max-width:1000px){.cap-chips{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:52px}}
@media (max-width:520px){.cap-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.cap-chips li{min-height:76px;font-size:12px;padding:10px 8px;overflow-wrap:anywhere}}

/* ── How it works ───────────────────────────────────────────────── */
.how{padding-block:clamp(36px,4.6vw,76px)}
.how__title{margin-bottom:clamp(24px,3vw,44px)}
.how__list{display:grid;gap:clamp(24px,3vw,44px);max-width:1080px;margin-inline:auto;list-style:none;padding:0}
.how-step{display:grid;grid-template-columns:minmax(0,clamp(240px,20vw,300px)) minmax(0,1fr);align-items:center;gap:clamp(20px,2.6vw,38px)}
.how-step__media img{display:block;width:100%;height:auto}
.how-step__title{font-family:var(--font-mono);font-weight:300;font-size:clamp(17px,1.5vw,22px);letter-spacing:var(--track-tight);color:var(--ink);margin-bottom:10px}
.how-step__body{font-size:clamp(14px,1.1vw,16px);line-height:1.75;color:var(--muted);max-width:66ch}
@media (max-width:800px){.how-step{grid-template-columns:1fr}.how-step__media{max-width:340px;margin-inline:auto}}

/* ── About: mission / vision (reuse svc grid) — MOPS cards ──────── */
.mops{padding-block:clamp(36px,4.6vw,76px)}
.mops__title{margin-bottom:clamp(24px,3vw,42px)}
.band-ink .mops__title{color:var(--lavender)}
.mops__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2vw,30px);list-style:none;margin:0;padding:0}
.mops-card{flex:0 1 clamp(320px,22vw,400px);min-height:200px;padding:clamp(22px,2.4vw,36px) clamp(22px,2.4vw,34px);background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:18px}
.mops-card__title{font-family:var(--font-mono);font-weight:300;font-size:clamp(16px,1.3vw,20px);letter-spacing:var(--track-tight);color:var(--lavender);margin-bottom:12px}
.mops-card p{font-size:clamp(13px,1.05vw,15px);line-height:1.7;color:var(--sage)}

/* ── Founder ────────────────────────────────────────────────────── */
.founder{padding-block:clamp(36px,4.6vw,76px)}
.founder__grid{display:grid;grid-template-columns:minmax(0,clamp(340px,28vw,420px)) minmax(0,1fr);gap:clamp(26px,3.6vw,60px);align-items:center;max-width:1180px;margin-inline:auto}
.founder__portrait{position:relative;aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(160deg,#2e374c,#252d3d 70%);border-radius:20px;overflow:hidden}
.founder__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder__portrait-mark{width:62%;color:#5b6277;opacity:.9}
.founder__title{margin-bottom:clamp(18px,2.2vw,30px)}
.founder__name{font-family:var(--font-mono);font-weight:300;font-size:clamp(20px,1.8vw,27px);letter-spacing:var(--track-tight);color:var(--ink)}
.founder__role{font-family:var(--font-mono);font-style:italic;font-weight:400;font-size:clamp(15px,1.4vw,20px);color:var(--muted);margin:4px 0 clamp(16px,1.8vw,26px)}
.founder__bio{font-size:clamp(14px,1.15vw,17px);line-height:1.8;color:var(--muted);max-width:62ch}
.founder__bio p+p{margin-top:1em}
@media (max-width:900px){.founder__grid{grid-template-columns:1fr}.founder__portrait{max-width:380px;margin-inline:auto}}

/* ── Contact page ───────────────────────────────────────────────── */
/* The design's masri00005 light sweep, tinted so mint text keeps contrast. */
.contact-page{position:relative;padding-top:var(--header-h);background:linear-gradient(180deg,#252d3dd9 0%,#2e374cd9 44%,#39445ae0 78%,#4b5568e6 100%),url(/assets/img/tex-sweep-1600.50889b0c.webp) center/cover no-repeat,#2e374c}
.contact-page__inner{position:relative;z-index:1;padding-block:clamp(32px,4.4vw,64px) clamp(40px,5.4vw,88px)}
.contact-page__title{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,2.8vw,40px);line-height:1.28;letter-spacing:var(--track-tight);color:var(--mint);margin-bottom:clamp(10px,1.4vw,18px);text-wrap:balance}
.contact-page__lede{font-size:clamp(14px,1.2vw,18px);line-height:1.75;color:#dfe7f9;max-width:56ch;margin-bottom:clamp(26px,3.4vw,52px)}
.contact-page .contact__grid{margin-top:0;margin-inline:0;max-width:1120px}
.contact-page .contact__line{color:var(--mint)}
.contact-page .contact__addr{color:#dfe7f9}
.contact-page .field__input{background:var(--mint);border-color:rgba(255,255,255,.35);color:var(--ink)}
.contact-page .field__input::placeholder{color:#1f1d2cb3}
.contact-page .field__input:focus{background:var(--mint-light)}
.contact-page .btn--dark{--btn-bg: var(--ink-deep);--btn-fg: #dde4dd}
.contact-page .form__status.is-ok{color:var(--mint)}
.contact-page .form__status.is-error{color:#ffb3ad}
.contact-page .form__turnstile{justify-self:start}
.contact-page .form__privacy{color:#dfe7f9cc}
.contact-page .form__privacy a:hover{color:var(--mint)}
.contact-page .field__error{color:#ffb3ad}
.contact-page .field__input[aria-invalid=true]{border-color:#e07a72;background:#ffecea}

/* ── Ambient video slots on inner pages (same pattern as home) ──── */
.amb-slot{position:relative;overflow:hidden}
.amb-slot .amb__video{border-radius:0}

/* ── Small shared bits ──────────────────────────────────────────── */
.page-cta{margin-top:clamp(20px,2.4vw,34px)}
/* Thin section rule from the design (the 1423px "Vector 1" hairlines). */
.section-rule{border:0;height:1px;margin:0 auto;max-width:calc(var(--shell) - 2*var(--gutter));background:currentColor;opacity:.16}
.band-light .section-rule{color:var(--ink)}
.band-ink .section-rule,.band-dark .section-rule{color:var(--mint)}
.nav__link[aria-current=page],.mobile-nav__link[aria-current=page]{text-decoration:underline;text-underline-offset:6px}


/* Footer on a dark page (contact): start from the page ground, not mint. */
.site-footer--on-dark{background:linear-gradient(180deg,#4b5568,#3f4855 28%,#323a46 58%,#22252a)}

/* Content clears the mist zone at melted section tops. */
.melt-from-light .svc,.melt-from-dark .svc{padding-top:clamp(96px,12vw,176px)}
.melt-from-dark.founder{padding-top:clamp(120px,14vw,208px)}

/* ── Ambient motion: artwork drifts gently, like the homepage loops ── */
@media (prefers-reduced-motion: no-preference){
  .svc__media img{animation:amb-drift 11s ease-in-out infinite alternate}
  .svc--media-right .svc__media img{animation-duration:14s;animation-delay:1.2s}
  .page-hero__art img{animation:amb-drift 12s ease-in-out infinite alternate}
  .how-step__media img{animation:amb-drift 13s ease-in-out infinite alternate}
}
@keyframes amb-drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}

/* ═══════════ Tech motion pass (8/19): signal, scan, type, draw ═══════════ */
@media (prefers-reduced-motion: no-preference){
  /* Terminal type-on caret for hero headlines (DM Mono asks for it) */
  .type-caret{display:inline-block;width:.5em;height:.92em;margin-left:.06em;background:var(--mint);vertical-align:-.06em;animation:caret-blink .85s steps(1) infinite}
  .type-caret.is-done{animation:caret-blink .85s steps(1) 4,caret-out .4s ease .35s forwards}
  /* A signal pulse sweeping across the hero dot grid (kin to the header mark's 9s pulse) */
  .page-hero__grid-overlay::after,.contact-page .page-hero__grid-overlay::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#bddcd9 1.2px,transparent 1.7px);background-size:76px 76px;opacity:.85;mask:radial-gradient(300px 300px at center,#000,transparent 72%) no-repeat;-webkit-mask:radial-gradient(300px 300px at center,#000,transparent 72%) no-repeat;mask-size:44% 44%;-webkit-mask-size:44% 44%;animation:grid-scan 17s ease-in-out infinite alternate}
  /* Capability chips: lift + sheen scan on hover */
  .cap-chips li{position:relative;overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
  .cap-chips li::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,#bddcd924 50%,transparent 68%);transform:translateX(-130%);transition:transform .65s var(--ease)}
  .cap-chips li:hover{transform:translateY(-5px);border-color:#bddcd95c;box-shadow:0 16px 34px #0d13204a}
  .cap-chips li:hover::before{transform:translateX(130%)}
  /* How it Works: process line draws in, nodes light up */
  .how__list{position:relative;padding-left:clamp(28px,3.2vw,48px)}
  .how__list::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--sage-ink),#5f6cbb);box-shadow:0 0 12px #5f6cbb59;transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease)}
  .how__list.is-drawn::before{transform:scaleY(1)}
  .how-step{position:relative}
  .how-step::before{content:"";position:absolute;left:calc(-1*clamp(28px,3.2vw,48px) + 2px);top:16px;width:15px;height:15px;border-radius:50%;background:var(--sage-ink);border:3px solid #eef1ee;box-shadow:0 0 0 5px #4d6d5f2e,0 0 14px #5f6cbb66;opacity:0;transform:scale(.4);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .how__list.is-drawn .how-step:nth-child(1)::before{transition-delay:.35s}
  .how__list.is-drawn .how-step:nth-child(2)::before{transition-delay:.85s}
  .how__list.is-drawn .how-step:nth-child(3)::before{transition-delay:1.35s}
  .how__list.is-drawn .how-step::before{opacity:1;transform:scale(1)}
  /* MOPS cards: cursor spotlight + lift */
  .mops-card{position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease)}
  .mops-card::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#adbaf522,transparent 66%)}
  .mops-card:hover{transform:translateY(-4px);border-color:#adbaf54a}
  .mops-card:hover::after{opacity:1}
  /* Scroll signal bar */
  .scroll-signal{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;background:linear-gradient(90deg,var(--mint),#adbaf5);transform-origin:left;transform:scaleX(0)}
}
@keyframes caret-blink{50%{opacity:0}}
@keyframes caret-out{to{opacity:0;width:0}}
@keyframes grid-scan{0%{mask-position:4% 12%;-webkit-mask-position:4% 12%}30%{mask-position:82% 26%;-webkit-mask-position:82% 26%}60%{mask-position:28% 78%;-webkit-mask-position:28% 78%}100%{mask-position:92% 64%;-webkit-mask-position:92% 64%}}

/* ═══════════ Signature layer (8/20): pixel-scale identity moments ═══════════ */
/* Bracketed pixel page tag above hero headlines */
.page-tag{font-family:var(--font-pixel);font-size:clamp(12px,1vw,15px);letter-spacing:.22em;color:var(--mint);margin-bottom:clamp(14px,1.8vw,24px)}
.page-hero--about .page-tag{text-align:center}
/* Oversized Bitcount section indices watermarked behind each service */
.svc{position:relative}
.svc-num{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-pixel);font-size:clamp(12px,.9vw,13px);letter-spacing:.2em;margin-bottom:10px}
.svc-num::after{content:"";width:34px;height:1px;background:currentColor;opacity:.5}
.band-light .svc-num{color:var(--sage-ink)}
.band-ink .svc-num{color:var(--mint)}
/* Capability ticker under the services hero (marquee, kin to the logo strip) */
.ticker{position:relative;z-index:1;overflow:hidden;padding-block:clamp(14px,1.6vw,22px);border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14;background:#1d2433a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__inner{display:flex;width:max-content}
.ticker__track{display:flex;gap:0;list-style:none;margin:0;padding:0}
.ticker__track li{white-space:nowrap;font-family:var(--font-mono);font-size:clamp(12px,.9vw,14px);letter-spacing:.18em;text-transform:uppercase;color:#bddcd9b8;padding-right:3.2em}
.ticker__track li::before{content:"//";color:#5f6cbb;margin-right:3.2em}
@media (prefers-reduced-motion: no-preference){.ticker__inner{animation:ticker-run 46s linear infinite}}
@keyframes ticker-run{to{transform:translateX(-50%)}}
/* Giant MOPS watermark */
.mops{position:relative;overflow:hidden}
.mops__mark{position:absolute;top:clamp(-12px,-.8vw,-22px);left:50%;transform:translateX(-50%);font-family:var(--font-pixel);font-size:clamp(72px,11vw,150px);line-height:1;color:#adbaf50a;pointer-events:none;user-select:none}
.mops .shell{position:relative;z-index:1}
.mops__mark{z-index:0}
.mops__title,.mops__grid{position:relative;z-index:1}

/* ── Services timeline rail: frosted capsule, fills as you scroll ── */
.svc-rail{position:fixed;left:clamp(10px,1.6vw,28px);top:50%;transform:translateY(-50%);z-index:40;height:min(300px,42vh);width:44px;border-radius:999px;background:#141a2657;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #ffffff1c;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.svc-rail.is-active{opacity:1;pointer-events:auto}
.svc-rail__track{position:absolute;left:50%;top:18px;bottom:18px;width:2px;margin-left:-1px;background:#ffffff26;border-radius:2px}
.svc-rail__fill{position:absolute;left:50%;top:18px;width:2px;margin-left:-1px;height:calc(100% - 36px);background:linear-gradient(180deg,var(--mint),#adbaf5);border-radius:2px;transform:scaleY(0);transform-origin:top}
.svc-rail__node{position:absolute;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:none;cursor:pointer;padding:0}
.svc-rail__node::before{content:"";width:9px;height:9px;border-radius:50%;background:#ffffff59;transition:background .3s,box-shadow .3s}
.svc-rail__node.is-here::before{background:var(--mint);box-shadow:0 0 10px #bddcd9aa}
.svc-rail__node span{position:absolute;left:36px;font-family:var(--font-pixel);font-size:11px;letter-spacing:.16em;color:#e6ecf2;background:#141a2699;padding:3px 8px;border-radius:8px;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap}
.svc-rail__node:hover span{opacity:1;transform:none}
@media (max-width:1199px){.svc-rail{display:none}}

/* ═══ CALM PASS (2026-08-24) ═══
   Matches the styles.css homepage calming: entrance animation and hover
   states stay; infinite ambient loops go. Retires the media drift
   (svc/hero/how-step images) and the grid-scan pulse — the same family
   as the retired homepage bob/drifts and header mark pulse. */
@media (prefers-reduced-motion: no-preference){
  .svc__media img,
  .page-hero__art img,
  .how-step__media img{animation:none}
  .page-hero__grid-overlay::after,
  .contact-page .page-hero__grid-overlay::after{animation:none}
}

/* Audit 2026-08-27: desktop min-height:200px left two short MOPS cards with
   ~73px of dead space in the mobile single-column stack. */
@media (max-width: 520px) {
  .mops-card { min-height: 0; }
}