/* GBH Motion: Service requirements page (/service-requirements). Page-only classes use the sr- prefix so they never clash with gbh_motion.css. */
#finder,#sheet{scroll-margin-top:90px}
/* Layout: GBH Motion. Full-width colour bands in a 1200px column: hero → service finder (three drawn section scenes) → the open service sheet → consultation band. One fixed brand look by choice, same as gb-hub.com. */
.gx-sr{
  --purple:#773B82;--deep:#4E2456;--plum:#2B1630;--night:#1C0F20;--teal:#059EAB;--teal-ink:#03727C;--teal-lite:#7FD3DA;
  --tint:#F2EAF4;--teal-tint:#E3F2F2;--ink:#221A29;--muted:#6A6172;--line:#E6E0EA;--mist:#D9C7DE;--gold:#E2B970;
  --wait:#9A5B00;--wait-bg:#FDF1DC;--white:#FFFFFF;
  --disp:'Bricolage Grotesque','IBM Plex Sans Arabic','Arial Black',Arial,sans-serif;
  --body:'IBM Plex Sans','IBM Plex Sans Arabic',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
.gx-sr[dir=rtl]{--disp:'IBM Plex Sans Arabic',Arial,sans-serif;--body:'IBM Plex Sans Arabic',Arial,sans-serif}
.gx-sr{font-family:var(--body);color:var(--ink);font-size:18px;line-height:1.55;overflow-x:hidden;background:var(--white)}
.gx-sr *{box-sizing:border-box}
.gx-sr a{color:inherit}
.gx-band{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px);padding-left:max(16px,env(safe-area-inset-left,0px),4vw);padding-right:max(16px,env(safe-area-inset-right,0px),4vw)}
.gx-wrap{position:relative;max-width:1200px;margin:0 auto}
.gx-dark{background:var(--deep);color:var(--white)}
.gx-tint{background:var(--tint)}
.gx-white{background:var(--white)}
.gx-plum{background:radial-gradient(circle at 72% 45%,#773B82 0%,#4E2456 45%,#2B1630 100%);color:var(--white)}
.gx-eb{margin:0 0 14px;font:600 14px/1.3 var(--body);letter-spacing:2.5px;text-transform:uppercase;color:var(--teal-ink)}
.gx-dark .gx-eb,.gx-plum .gx-eb{color:var(--teal-lite)}
.gx-h{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.gx-sr[dir=rtl] .gx-h{letter-spacing:0;line-height:1.25;font-weight:700}
.gx-h1{font-size:clamp(40px,5.4vw,78px)}
.gx-h2{font-size:clamp(34px,5vw,66px);color:var(--purple)}
.gx-dark .gx-h2,.gx-plum .gx-h2{color:var(--white)}
.gx-hl{color:var(--teal-lite)}
.gx-white .gx-hl,.gx-tint .gx-hl{color:var(--teal-ink)}
.gx-lead{margin:20px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:58ch;color:var(--muted)}
.gx-dark .gx-lead,.gx-plum .gx-lead{color:var(--mist)}
.gx-line>span{display:block;overflow:hidden;padding-bottom:.1em}
.gx-line i{display:block;font-style:normal}
.gx-swipe{position:relative;display:inline-block;z-index:0;font-style:normal}
.gx-swipe::after{content:"";position:absolute;inset-inline:-.04em;bottom:.08em;height:.16em;background:var(--teal);z-index:-1;transform-origin:left}
.gx-sr[dir=rtl] .gx-swipe::after{transform-origin:right;bottom:0}
.gx-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.gx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:600 17px var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s}
.gx-btn:hover{transform:translateY(-2px)}
.gx-sr :focus-visible{outline:3px solid var(--teal-lite);outline-offset:3px;border-radius:10px}
.gx-sr .gx-white :focus-visible,.gx-tint :focus-visible{outline-color:var(--teal)}
.gx-btn-main{background:var(--teal);color:var(--white)}
.gx-btn-main:hover{background:var(--teal-ink)}
.gx-btn-ghost{border:2px solid currentColor;background:transparent;color:inherit}
.gx-panel{position:absolute;top:0;bottom:0;right:0;width:44%;background:var(--teal);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.gx-sr[dir=rtl] .gx-panel{right:auto;left:0;clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.gx-sr svg{max-width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.gx-sr svg text{font-family:var(--body)}
.gx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:center}

/* hero */
.sr-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sr-stat{display:inline-flex;align-items:baseline;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--mist);font-size:15px}
.sr-stat b{font:500 20px var(--mono);color:var(--white)}

/* finder */
.sr-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.sr-tab{all:unset;box-sizing:border-box;cursor:pointer;background:var(--white);border-radius:20px;padding:16px 18px 18px;border:2px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;gap:6px}
.sr-tab:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(78,36,86,.5)}
.sr-tab[aria-selected="true"]{border-color:var(--purple);box-shadow:0 22px 40px -26px rgba(78,36,86,.7)}
.sr-tab:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.sr-tab svg{width:100%;border-radius:14px;background:var(--teal-tint)}
.sr-tab b{font:700 21px/1.2 var(--disp);color:var(--ink)}
.sr-tab span{font-size:15px;color:var(--muted)}
.sr-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px}
.sr-chipbtn{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 16px;border-radius:999px;font:600 15px var(--body);background:var(--white);color:var(--purple);border:1.5px solid var(--mist)}
.sr-chipbtn[aria-pressed="true"]{background:var(--purple);color:var(--white);border-color:var(--purple)}
.sr-chipbtn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.sr-search{margin-inline-start:auto;min-width:0;flex:0 1 280px;font:400 16px var(--body);padding:10px 16px;border-radius:999px;border:1.5px solid var(--mist);background:var(--white);color:var(--ink)}
.sr-search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(5,158,171,.18)}
.sr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;margin-top:34px}
.sr-doc{position:relative;display:block;text-decoration:none;background:var(--white);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:6px 16px 16px 16px;padding:18px 20px 16px;transition:transform .2s,box-shadow .2s;color:var(--ink)}
.gx-sr[dir=rtl] .sr-doc{border-radius:16px 6px 16px 16px}
.sr-doc::before{content:"";position:absolute;inset-inline-start:-1px;top:-14px;width:64px;height:10px;background:var(--c);border-radius:6px 6px 0 0}
.sr-doc:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(78,36,86,.5)}
.sr-doc[aria-current="true"]{box-shadow:0 0 0 3px var(--c),0 18px 30px -22px rgba(78,36,86,.5)}
.sr-doc h3{margin:0 0 6px;font:700 19px/1.25 var(--disp)}
.sr-doc .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:600 12px var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--teal-ink)}
.sr-doc .meta .dl{color:var(--purple)}
.gx-sr[dir=rtl] .sr-doc .meta,.gx-sr[dir=rtl] .gx-eb{letter-spacing:0}
.sr-empty{margin:30px 0 0;color:var(--muted)}

/* sheet */
.sr-sheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sr-chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 14px;font:600 14px var(--body);white-space:nowrap;background:var(--tint);color:var(--purple)}
.sr-chip.t{background:var(--teal-tint);color:var(--teal-ink)}
.sr-chip.w{background:var(--wait-bg);color:var(--wait)}
.sr-auth{margin:14px 0 0;color:var(--muted);font-size:17px}
.sr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:34px}
.sr-fact{background:var(--tint);border-radius:18px;padding:18px 20px;min-width:0}
.sr-fact dt{font:600 12px var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--teal-ink);margin-bottom:6px}
.gx-sr[dir=rtl] .sr-fact dt{letter-spacing:0;font-size:14px}
.sr-fact dd{margin:0;white-space:pre-line;font-size:16px;line-height:1.5}
.sr-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:44px}
.sr-sub{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:800 28px/1.15 var(--disp);color:var(--ink)}
.gx-sr[dir=rtl] .sr-sub{font-weight:700}
.sr-sub .prog{margin-inline-start:auto;font:500 14px var(--mono);color:var(--teal-ink);white-space:nowrap}
.sr-meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:-4px 0 12px}
.sr-meter i{display:block;height:100%;background:var(--teal);width:0;transition:width .4s}
.sr-check{list-style:none;margin:0;padding:0}
.sr-check li{border-top:1px solid var(--line)}
.sr-check li:first-child{border-top:0}
.sr-check label{display:flex;gap:14px;align-items:flex-start;padding:12px 0;cursor:pointer;font-size:17px}
.sr-check input{position:absolute;opacity:0;width:1px;height:1px}
.sr-box{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--mist);display:grid;place-items:center;transition:background .2s,border-color .2s;margin-top:1px}
.sr-box svg{width:14px;opacity:0;transition:opacity .2s}
.sr-check input:checked+.sr-box{background:var(--teal);border-color:var(--teal)}
.sr-check input:checked+.sr-box svg{opacity:1}
.sr-check input:focus-visible+.sr-box{outline:3px solid var(--teal);outline-offset:2px}
.sr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sr-steps li{display:flex;gap:16px;align-items:flex-start;padding:10px 14px;border-radius:12px;background:var(--white)}
.sr-steps .n{flex:none;font:500 20px/1.3 var(--mono);color:var(--teal-ink);width:24px}
.sr-steps li span{font-size:17px}
.sr-forms{margin-top:52px;background:var(--tint);border-radius:24px;padding:clamp(20px,3vw,34px)}
.sr-flist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sr-form{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;background:var(--white);border-radius:16px;padding:16px 18px}
.sr-file{width:48px;height:58px;position:relative}
.sr-file svg{width:48px;height:58px}
.sr-fname{font:700 17px/1.3 var(--disp);overflow-wrap:anywhere}
.gx-sr[dir=rtl] .sr-fname{font-weight:600}
.sr-fkind{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.sr-form .gx-btn{grid-column:1/-1;justify-content:center;padding:11px 18px;font-size:15px}
.sr-none{margin:0;color:var(--muted);font-size:17px}
.sr-foot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:15px;color:var(--muted)}
.sr-foot a{color:var(--teal-ink);font-weight:600}
.sr-note{margin-top:30px;font-size:15px;color:var(--muted);max-width:75ch}

/* motion: plays once when a band scrolls into view */
.gx-js .gx-s:not(.on) .up,.gx-js .gx-s:not(.on) .fade,.gx-js .gx-s:not(.on) .pop,.gx-js .gx-s:not(.on) .left,.gx-js .gx-s:not(.on) .right,.gx-js .gx-s:not(.on) .stamp,.gx-js .gx-s:not(.on) .drop{opacity:0}
.gx-js .gx-s:not(.on) .gx-line i{transform:translateY(110%)}
.gx-js .gx-s:not(.on) .grow{opacity:0}
.gx-swipe::after{transform:scaleX(1)}
.gx-js .gx-s .gx-swipe::after{transform:scaleX(0)}
.on .up{animation:gxUp .8s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .fade{animation:gxFade .8s var(--d,0s) both}
.on .pop{transform-box:fill-box;transform-origin:center;animation:gxPop .55s var(--d,0s) cubic-bezier(.3,1.6,.5,1) both}
.on .left{animation:gxLeft .8s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .right{animation:gxRight .9s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .gx-line i{animation:gxLine .9s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.on .stamp{animation:gxStamp .5s var(--d,0s) cubic-bezier(.3,1.5,.5,1) both}
.on .drop{animation:gxDrop .7s var(--d,0s) cubic-bezier(.3,1.4,.5,1) both}
.on .grow{transform-box:fill-box;transform-origin:bottom;animation:gxGrow .9s var(--d,0s) cubic-bezier(.3,1.4,.5,1) both}
.on .gx-swipe::after{animation:gxSwipe .6s var(--d,0s) cubic-bezier(.7,0,.2,1) forwards}
.on .bob{animation:gxBob 3.6s var(--d,0s) ease-in-out infinite}
.on .spin{transform-box:fill-box;transform-origin:center;animation:gxSpin 22s linear infinite}
.on .sr-blink{animation:gxBlink 1.2s steps(2,start) infinite}
.on .sr-fall{animation:gxFall 2.8s var(--d,1.6s) ease-in infinite}
.on .sr-wave{transform-box:fill-box;transform-origin:50% 100%;animation:gxWave 1.4s ease-in-out infinite}
.on .sr-raise{animation:gxRaise 1.6s 1s cubic-bezier(.3,1.2,.5,1) forwards}
.sr-raise{transform:translateY(90px)}
.gx-js .gx-s:not(.on) .sr-fall{opacity:0}
@keyframes gxUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
@keyframes gxFade{from{opacity:0}to{opacity:1}}
@keyframes gxPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes gxLeft{from{opacity:0;translate:-100px 0}to{opacity:1;translate:0 0}}
@keyframes gxRight{from{opacity:0;translate:120px 0}to{opacity:1;translate:0 0}}
@keyframes gxLine{from{transform:translateY(110%)}to{transform:none}}
@keyframes gxStamp{from{opacity:0;transform:scale(2.4) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes gxDrop{from{opacity:0;translate:0 -160px;rotate:-12deg}to{opacity:1;translate:0 0}}
@keyframes gxGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gxSwipe{to{transform:scaleX(1)}}
@keyframes gxBob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes gxSpin{to{transform:rotate(360deg)}}
@keyframes gxBlink{to{opacity:.15}}
@keyframes gxFall{0%{opacity:0;translate:0 -40px}15%{opacity:1}70%{opacity:1;translate:0 70px}85%,100%{opacity:0;translate:0 80px}}
@keyframes gxWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(10deg)}}
@keyframes gxRaise{to{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.gx-sr *,.gx-sr *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}}

@media (max-width:980px){.sr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sr-flist{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .gx-grid2,.sr-cols,.sr-sheet-head{grid-template-columns:minmax(0,1fr)}
  .gx-panel{display:none}
  .sr-hero-art{max-width:520px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .gx-sr{font-size:17px}
  .sr-tabs{grid-template-columns:minmax(0,1fr);gap:12px}
  .sr-tab{flex-direction:row;align-items:center;gap:14px;padding:12px}
  .sr-tab svg{width:96px;flex:none}
  .sr-cards{grid-template-columns:minmax(0,1fr)}
  .sr-search{flex:1 1 100%;margin-inline-start:0}
}

/* What GBH does for you (19.0.1.11.2) */
.gx-sr .sr-does{margin-top:40px;background:var(--deep);color:var(--white);border-radius:24px;padding:clamp(22px,3vw,34px)}
.gx-sr .sr-does .sr-sub{color:var(--white)}
.gx-sr .sr-dlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.gx-sr .sr-dlist li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:var(--mist)}
.gx-sr .sr-dtick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin-top:1px}
.gx-sr .sr-dtick svg{width:14px}
.gx-sr .sr-reqnote{margin:-6px 0 14px;font-size:15px;color:var(--muted)}
@media (max-width:640px){.gx-sr .sr-dlist{grid-template-columns:minmax(0,1fr)}}
