/* /services/find/: "Find the right service" (markup site/services/find/index.html, behavior find.js).
   Layout only; every color, size, radius and shadow comes from ka.css tokens.

   The page follows /book/: one hero holds the title, the quiz card and a side column ("How it
   decides"). From 1120px the title runs across the top, the subtitle and the side column sit on the
   left and the card (up to 724px) on the right; narrower screens stack title, card, side. The card
   shows one question at a time: progress, the question, big options (one column, two from a 600px
   card), Back and Next. The result replaces the question in the same card.

   GSAP moves the stage's children (transform and opacity, parked with .ka-tw); the CSS here moves
   only background-size, colors, borders, scale and the check's stroke. */

/* ---------- hero and grid ---------- */
.hero.page.find-hero{padding:116px 0 clamp(56px,7vw,96px)}
.find-hero>.gridbg{bottom:auto;height:640px}
.find-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kick" "head" "sub" "card" "side"}
.find-head{display:contents}
.find-hero .kicker{grid-area:kick}
.find-hero h1{grid-area:head;margin-bottom:14px}
.find-hero .sub{grid-area:sub;max-width:46ch;margin-bottom:28px}
.find-card{grid-area:card;min-width:0;align-self:start}
.find-side{grid-area:side;min-width:0;margin-top:40px}
@media (min-width:1120px){
  .find-grid{grid-template-columns:minmax(0,1fr) minmax(0,724px);grid-template-areas:"kick kick" "head head" "sub card" "side card";grid-template-rows:auto auto auto 1fr;column-gap:56px}
  .find-hero h1{margin-bottom:30px}
  .find-hero .sub{margin:-4px 0 30px;font-size:var(--fs-lg)}
  .find-side{align-self:start;margin-top:0}
}
@media (min-width:1120px) and (min-height:760px){.find-side{position:sticky;top:calc(var(--hdr-h) + 20px)}}
@media (max-width:640px){
  .hero.page.find-hero{padding:100px 0 48px}
  .find-hero .sub{margin-bottom:22px}
  .find-side{margin-top:32px}
}
/* without JS the questions can't run: the page is the list below */
html:not(.js) .find-card,html:not(.js) .find-side{display:none}
html.js .find-list:not(.is-shown){display:none}
.find-card[hidden],.find-side[hidden]{display:none}

/* ---------- the card ---------- */
.find-card{container:fq/inline-size;padding:clamp(18px,3vw,30px);border-radius:var(--r-lg);scroll-margin-top:12px}
@media (min-width:961px){.hero.find-hero .find-card{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
.find-card.is-waiting{cursor:progress}

/* progress: the count, then six segments; the current one fills a third, answered ones fill whole */
.fq-top{display:grid;gap:10px;margin-bottom:6px}
.fq-count{margin:0;font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.fq-count b{color:var(--blue);font-weight:700}
.fq-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.fq-bar li{position:relative;height:5px;overflow:hidden;border-radius:3px;background:var(--line)}
.fq-bar li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);scale:0 1;transform-origin:0 50%;transition:scale var(--dur-sig) var(--ease-out)}
.fq-bar li.now::after{scale:.34 1}
.fq-bar li.on::after{scale:1 1}
.is-result .fq-count{color:var(--blue)}

/* ---------- a question ---------- */
.fq-stage{min-width:0}
.fq-part+.fq-part{margin-top:4px}
.fq-q{margin:18px 0 16px;font:700 var(--fs-2xl)/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.fq-q:focus{outline:none}
.fq-opts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@container fq (min-width:600px){.fq-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* an option: a big row; the tint wipes in from the left on hover, the check fills when chosen */
.fq-o{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:60px;margin:0;padding:13px 14px 13px 16px;
  border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(90deg,var(--tint-2),var(--tint) 60%) no-repeat 0 0/0% 100%,var(--surface);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-size var(--dur-ui) var(--ease-out),border-color var(--dur-hover) var(--ease-ui),box-shadow var(--dur-hover) var(--ease-ui),scale var(--dur-press) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.fq-o:hover{background-size:100% 100%,auto;border-color:var(--tint-line)}}
.fq-o:active{scale:.985}
.fq-o:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fq-o[aria-pressed=true]{background-size:100% 100%,auto;border-color:var(--blue2);box-shadow:inset 0 0 0 1px var(--blue2)}
.fq-ot{min-width:0}
.fq-on{display:block;font:600 16.5px/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.fq-od{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--mut);text-wrap:pretty}
.fq-tag{display:inline-block;margin:5px 0 1px;padding:2px 8px;border-radius:999px;background:var(--tint-2);font:600 11.5px/1.5 var(--sans);color:var(--blue)}
.fq-ck{display:grid;place-items:center;flex:none;width:26px;height:26px;border:1.5px solid var(--line-2);border-radius:50%;background:var(--surface);
  transition:background-color var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui)}
.fq-ck svg{width:16px;height:16px;fill:none;stroke:var(--surface);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 360ms var(--ease-out) 60ms}
.fq-o[aria-pressed=true] .fq-ck{border-color:transparent;background:var(--blue)}
.fq-o[aria-pressed=true] .fq-ck svg{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.fq-o,.fq-ck,.fq-ck svg,.fq-bar li::after{transition:none}}

/* the answered first part of a two-part question folds into one line */
.fq-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:16px 0 0;padding:6px 6px 6px 14px;max-width:none;border:1px solid var(--tint-line);border-radius:12px;background:var(--tint);font-size:var(--fs-ui)}
.fq-cl{font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.fq-chosen b{font:600 var(--fs-ui)/1.3 var(--disp);color:var(--ink)}
.fq-change{margin-left:auto;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--blue);font:600 var(--fs-sm)/1 var(--sans);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fq-change:hover{background:var(--tint-2)}

/* Back and Next */
.fq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;min-height:44px}
.fq-nav{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;margin:0 -10px;border:0;border-radius:10px;background:none;color:var(--blue);font:600 var(--fs-ui)/1 var(--sans);cursor:pointer}
.fq-nav:hover{background:var(--tint)}
.fq-nav[hidden]{display:none}
.fq-next{margin-left:auto}
.is-result .fq-foot{display:none}
/* the first question has neither Back nor Next: no empty row under it */
.fq-foot:not(:has(>.fq-nav:not([hidden]))){display:none}
/* find.js tweens the card's height from one screen's to the next; what sits past the moving edge is clipped */
.find-card.fq-sizing{overflow:clip}

/* ---------- the result ---------- */
.fr{display:grid;gap:18px;margin-top:16px}
.fr-note{margin:0;max-width:none;padding:14px 16px;border:1px solid var(--tint-line);border-left:3px solid var(--blue);border-radius:var(--r-sm);background:var(--tint);font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.fr-note b{color:var(--ink)}
.fr-pick{display:grid;gap:10px;align-content:start;min-width:0;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.fr-main{gap:12px;padding:clamp(18px,3vw,26px);border-color:var(--tint-line);background:linear-gradient(160deg,var(--tint) 0,var(--surface) 62%)}
.fr-tag{margin:0;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fr-name{margin:0;font:700 var(--fs-xl)/1.2 var(--disp);letter-spacing:-.02em;text-wrap:balance}
.fr-main .fr-name{font-size:var(--fs-2xl)}
.fr-name:focus{outline:none}
.fr-name a{color:var(--ink);text-decoration:none}
.fr-name a:hover{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;max-width:none}
.fr-pf{font-size:var(--fs-sm);color:var(--mut)}
.fr-pv{font:700 22px/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.fr-main .fr-pv{font-size:clamp(26px,3vw,32px)}
.fr-pm{flex-basis:100%;font-size:var(--fs-sm);color:var(--mut);font-variant-numeric:tabular-nums}
@container fq (min-width:520px){.fr-main .fr-pm{flex-basis:auto}}
.fr-line{margin:0;font-size:var(--fs-ui);line-height:1.55;color:var(--body);max-width:none}
.fr-why{display:grid;gap:9px;margin:2px 0 0;padding:0;list-style:none}
.fr-why li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:var(--fs-ui);line-height:1.5;color:var(--ink)}
.fr-why .fq-ck{width:22px;height:22px;margin-top:1px;border:0;background:var(--grad-btn)}
.fr-why .fq-ck svg{width:13px;height:13px;stroke-dashoffset:0;transition:none}
.fr-pick:not(.fr-main) .fr-why li{font-size:var(--fs-sm);color:var(--body)}
.fr-fig{display:grid;gap:4px 18px;margin:4px 0 0;padding-top:14px;border-top:1px solid var(--tint-line)}
@container fq (min-width:520px){.fr-fig{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.fr-fv{margin:0;font:700 clamp(26px,3.2vw,34px)/1.05 var(--disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;max-width:12ch}
.fr-fig figcaption{display:grid;gap:4px}
.fr-fc{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);max-width:none}
.fr-fs{margin:0;font-size:13px;line-height:1.45;color:var(--mut);max-width:none}
.fr-runs,.fr-ask{margin:0;max-width:none;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.fr-rl{display:block;margin-bottom:2px;font:700 11.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.fr-pick .more{justify-self:start;font-size:var(--fs-sm)}
.fr-write .more{font-size:var(--fs-ui)}
.fr-alts-w{display:grid;gap:10px;padding:0}  /* a <section>: ka.css pads every section */
.fr-alts-h{margin:4px 0 0;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.fr-alts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container fq (min-width:600px){.fr-alts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fr-ask{padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.fr-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
@container fq (max-width:479.98px){.fr-acts .btn{flex:1 1 100%;justify-content:center}}
.fr-dates{margin:-4px 0 0;font-size:13.5px;color:var(--mut);max-width:none}
.fr-tools{display:flex;flex-wrap:wrap;gap:0 18px;margin:-6px 0 0;padding-top:10px;border-top:1px solid var(--line);max-width:none}
.fr-t{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--blue);font:600 var(--fs-sm)/1.2 var(--sans);cursor:pointer;text-decoration:none}
.fr-t:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- the side: how it decides ---------- */
.fs-label{margin:0 0 14px;font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fs-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.fs-list li{position:relative;padding-left:22px;font-size:var(--fs-sm);line-height:1.55;color:var(--body);text-wrap:pretty}
.fs-list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 3px var(--tint-2)}
.fs-more{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--body)}
@media (min-width:761px) and (max-width:1119px){.fs-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* ---------- without JS: every service by organization type ---------- */
.find-list .h2{margin-bottom:18px}
.find-fail:not([hidden]),.find-nojs{margin:0 0 18px;padding:14px 16px;border:1px solid var(--tint-line);border-left:3px solid var(--blue);border-radius:var(--r-sm);background:var(--tint);font-size:var(--fs-ui);color:var(--body);max-width:none}
.find-segs{display:grid;gap:10px}
.find-seg{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh)}
.find-seg>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-height:56px;padding:14px 18px;cursor:pointer;list-style:none}
.find-seg>summary::-webkit-details-marker{display:none}
.find-seg>summary::after{content:"";width:8px;height:14px;margin-left:auto;align-self:center;background:var(--blue);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;rotate:90deg;transition:rotate var(--dur-ui) var(--ease-out)}
.find-seg[open]>summary::after{rotate:-90deg}
.fsg-n{font:600 var(--fs-lg)/1.3 var(--disp);color:var(--ink)}
.fsg-c{font-size:var(--fs-sm);color:var(--mut)}
.fsg-who{margin:0 18px 12px;font-size:var(--fs-sm);color:var(--mut)}
.find-seg .ways{margin:0 10px 10px;box-shadow:none}