/* Innova storefront: Synaxia's one-page layout in innova-rec.com's look (colours, square uppercase buttons, white and
   light-grey sections with the wave art, a dark header and footer). Values from Innova's own CSS (spec section 3). */
:root { --gutter: clamp(16px, 3vw, 64px);
  --ink: #141e24; --ink-2: #434b50; --ink-3: #6b7479; --dark: #141e24; --dark-2: #00051d; --dark-3: #2a2e42;
  --orange: #ff6d00; --orange-hover: #f50; --light: #f5f8fa; --white: #fff; --link: #1b85e7;
  --line: #e1e7eb; --error: #c62828; --orange-soft: #ff6d001a;
  --head: Outfit, ui-sans-serif, system-ui, sans-serif; --body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--ink); background: var(--white); min-height: 100vh; display: flex; flex-direction: column; font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
main { flex: 1; }
a { color: var(--link); }
[hidden] { display: none !important; }
body { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Fluid page (Jordan): as wide as the screen, minus one side gutter that every section shares; no max-width cap */
.wrap { margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, .hero-title, .section-title, .card-title, .q-title, .step-title, .value-title { font-family: var(--head); text-wrap: pretty; }

/* Header: dark, as innova-rec.com; logo (white wordmark), strapline, phone. No menu. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--dark); color: var(--white); }
.header-row { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.site-header .logo { height: 44px; width: auto; display: block; }
.brand-divider { width: 1px; height: 36px; background: rgba(255,255,255,.25); flex-shrink: 0; }
.brand-tag { font-family: var(--head); font-size: .95rem; font-weight: 500; letter-spacing: .02em; color: #e8ecef; text-wrap: pretty; }
.header-phone { color: var(--white); text-decoration: none; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.header-phone:hover { color: var(--orange); }

/* Hero: Innova's dark gradient with the bottom-right waves, as innova-rec.com's .section-gradient (position 100% 100%,
   size 40%). The lines leave by the right and bottom edges; the hero is never shorter than the image (1183 x 705, so
   its height is 0.596 of its width), so no line is cut off at the top. Capped at 640px wide on very wide screens. */
.hero { background-image: url("/waves-right.png"), linear-gradient(315deg, var(--dark-2), #070c24 12%, #3a405a); background-position: 100% 100%, 0 0; background-size: min(40%, 640px), auto; background-repeat: no-repeat; color: var(--white); text-align: center;
  min-height: min(24vw, 382px); display: flex; flex-direction: column; justify-content: center; }
.hero-inner { padding-top: 5.5rem; padding-bottom: 5.5rem; max-width: 56rem; }
/* The headline is always two lines, "Meet your next hire in" / "under 60 seconds." (Jordan): each line is a block that
   never wraps, and the size follows the screen width on phones so line 1 always fits. */
.hero-line { display: block; white-space: nowrap; }
/* Line 2 gets innova-rec.com's orange underline (their .subtitle-line, scaled up): solid #ff6d00, about 0.05em thick
   (never under 2px), about 0.08em below the letters, exactly the words' width, unbroken by descenders. */
.hero-underline { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: max(2px, .05em); text-underline-offset: .08em; text-decoration-skip-ink: none; }
.hero-title { font-size: clamp(1.5rem, 8.2vw, 3.625rem); line-height: 1.15; font-weight: 600; margin: 0 0 1.25rem; color: var(--white); }
.lead { font-size: 1.2rem; line-height: 1.6; margin: 0 0 2.25rem; text-wrap: pretty; }
.hero .lead { color: #dfe4e8; max-width: 42rem; margin-left: auto; margin-right: auto; }

/* Disciplines strip, in place of a stats strip */
.strip { background: var(--dark-3); color: #e8ecef; }
.strip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; padding-top: 1rem; padding-bottom: 1rem; font-family: var(--head); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.strip .sep { color: var(--orange); }

/* Buttons: square and uppercase, as Innova's */
.btn-primary, .btn-ghost, .btn-meet { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 0; font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border: 0; text-decoration: none; transition: background-color .2s, color .2s; }
.btn-primary { background: var(--orange); color: var(--white); padding: .875rem 1.5rem; }
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:disabled { opacity: .6; cursor: wait; }
.btn-lg { padding: 1.3rem 2rem; }
.hero .btn-primary:hover { background: var(--white); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid #c7d0d6; padding: .8rem 1.4rem; }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink); }
.btn-ghost:disabled { opacity: .4; cursor: default; }

/* Sections: white, and light grey with the waves bottom left, as innova-rec.com */
.section { padding: 4.5rem 0; }
.section-white { background: var(--white); }
/* Light grey with the same bottom-right waves as the hero (Jordan: lines run up and to the right, their ends never
   visible). They leave by the right and bottom edges; the section is never shorter than the image, so none is cut off. */
.section-light { background-color: var(--light); background-image: url("/waves-right.png"); background-position: 100% 100%; background-size: min(40%, 640px); background-repeat: no-repeat; min-height: min(24vw, 382px); }
.section-head { text-align: center; margin-bottom: 2.5rem; }
.subtitle-line { display: block; width: 3rem; height: 3px; background: var(--orange); margin: 0 auto 1rem; }
.section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; font-weight: 600; margin: 0 0 .75rem; color: var(--ink); }
.section-sub { color: var(--ink-2); margin: 0 auto 1.5rem; max-width: 44rem; text-wrap: pretty; }

/* Why Innova: the three core values */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.value { text-align: center; padding: 0 .5rem; }
/* Each value has its own icon, as on innova-rec.com (dots, long-term planning, smile), painted orange through a mask */
.value-icon { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; background: var(--orange); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-dots { --icon: url("/dots.svg"); }
.icon-long-game { --icon: url("/long-term-planning.svg"); }
.icon-smile { --icon: url("/smile.svg"); }
.value-title { font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; }
.value p { color: var(--ink-2); margin: 0; text-wrap: pretty; }

/* What our clients say: Innova's dark gradient, white cards moving slowly right to left in a seamless loop. The track
   holds the six reviews twice; each set ends with the same gap it has between cards, so moving the track by exactly
   half its width lands the second set where the first began. Paused on hover and keyboard focus. */
.section-dark { background-image: linear-gradient(315deg, var(--dark-2), #070c24 12%, #3a405a); color: var(--white); }
.section-dark .section-title { color: var(--white); }
.section-dark .section-sub { color: #dfe4e8; max-width: 44rem; margin-left: auto; margin-right: auto; }
.orange { color: var(--orange); }
.reviews { overflow: hidden; }
.reviews .section-head { margin-bottom: 2rem; }
.reviews-viewport { overflow: hidden; }
.reviews-track { display: flex; width: max-content; animation: reviews-scroll 70s linear infinite; }
.reviews:hover .reviews-track, .reviews:focus-within .reviews-track { animation-play-state: paused; }
.reviews-set { display: flex; gap: 1.5rem; padding: 0 1.5rem 0 0; margin: 0; list-style: none; }
.review { width: 22rem; flex-shrink: 0; background: var(--white); color: var(--ink); padding: 1.75rem 1.5rem 1.5rem; border-top: 3px solid var(--orange); display: flex; flex-direction: column; }
.review:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.review-mark { font-family: var(--head); font-size: 3.5rem; line-height: .8; height: 2rem; color: var(--orange); font-weight: 700; }
.review-text { margin: .5rem 0 1.25rem; color: var(--ink-2); line-height: 1.55; flex: 1; text-wrap: pretty; }
.review-name { margin: 0; font-weight: 700; color: var(--ink); }
.review-role { margin: 0; font-size: .9rem; color: var(--ink-3); }
@keyframes reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .review { width: calc(100vw - 2rem); } /* one card wide on phones, still moving */
  .reviews-set { gap: 1rem; padding-right: 1rem; }
  .reviews-track { animation-duration: 60s; }
}
/* Reduced motion: no movement; the six reviews in a row the visitor swipes, and no second copy */
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; width: auto; }
  .reviews-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 1.5rem .75rem; }
  .reviews-set[aria-hidden="true"] { display: none; }
  .review { scroll-snap-align: start; }
}

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.step { display: flex; align-items: center; gap: 1rem; background: var(--white); padding: 1.5rem; border-left: 3px solid var(--orange); box-shadow: 0 1px 3px rgba(20,30,36,.08); }
.step-num { flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--orange); color: var(--white); font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.step-title { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }

/* Cards */
.card { background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(20,30,36,.08); }
.card-title { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 .25rem; line-height: 1.3; }
.muted { color: var(--ink-2); margin: 0 0 1rem; }

/* The questionnaire's card: heading left, questions right; stacked on smaller screens */
#ask { scroll-margin-top: 5rem; }
.ask-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; padding: 2.5rem; }
.ask-text { position: sticky; top: 7rem; }
.ask-text .section-sub { margin: 0; }
.progress { height: 6px; background: #e8edf0; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--orange); transition: width .25s; }
.progress-label { font-size: .85rem; color: var(--ink-3); margin: .5rem 0 1rem; }
.q-title { font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 0 0 .25rem; line-height: 1.3; }
.q-hint { color: var(--ink-3); font-size: .9rem; margin: 0 0 .75rem; }
.q-part { font-weight: 600; font-size: .95rem; margin: 1.25rem 0 .25rem; }
.options { display: grid; gap: .5rem; margin-top: 1rem; }
.option { text-align: left; width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink); background: var(--white); border: 1px solid #c7d0d6; border-radius: 0; cursor: pointer; transition: border-color .15s, background-color .15s; }
.option:hover { border-color: var(--ink); }
.option[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chip { cursor: pointer; border: 1px solid #c7d0d6; background: var(--white); color: var(--ink); font: inherit; font-size: .9rem; padding: .45rem .85rem; border-radius: 0; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--white); }
.quiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.error { color: var(--error); font-size: .9rem; margin: .75rem 0 0; text-wrap: pretty; }
.bot-check { display: flex; justify-content: center; }
.bot-check iframe { margin-top: 1rem; }
.status { text-align: center; color: var(--ink-3); font-size: .9rem; margin: 1rem 0 0; }
.status:empty { margin: 0; }
.input { width: 100%; padding: .7rem .85rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid #c7d0d6; border-radius: 0; }
.input:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 2px var(--orange-soft); }
.label { display: block; margin-bottom: .375rem; font-size: .95rem; font-weight: 600; }
.req { color: var(--error); }

/* Fillability: a line and a bar under the question */
.fill { margin-top: 1.25rem; }
.fill-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .375rem; }
.fill-label { font-size: .85rem; color: var(--ink-3); }
.fill-level { font-family: var(--head); font-size: 1.15rem; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; }
.fill[data-empty="true"] .fill-level { color: var(--error); }
.fill-track { height: 10px; background: #e8edf0; overflow: hidden; }
.fill-bar { height: 100%; width: 0; background: var(--orange); transition: width .35s ease; }

/* Answers so far, on the left of the card */
.your-answers { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.answer-row { border: 1px solid var(--line); background: var(--light); padding: .5rem .85rem; max-width: 100%; }
.your-answers dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.your-answers dd { margin: .125rem 0 0; font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.link-btn { font: inherit; font-weight: 600; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.done-actions { margin-top: 1rem; }
/* Finished: the card becomes a one-row summary of the search */
.ask.is-done .ask-body { grid-template-columns: 1fr; padding: 1.5rem 2rem; }
.ask.is-done .ask-quiz { display: none; }
.ask.is-done .ask-text { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title answers" "action answers"; column-gap: 2rem; row-gap: .5rem; align-items: start; }
.ask.is-done .section-title { grid-area: title; font-size: 1.35rem; margin: 0; white-space: nowrap; }
.ask.is-done .your-answers { grid-area: answers; margin: 0; }
.ask.is-done .done-actions { grid-area: action; margin: 0; }

/* Type-ahead (region) and the country list */
.loc { position: relative; margin-top: 1rem; }
.loc-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--white); border: 1px solid #c7d0d6; box-shadow: 0 10px 30px rgba(20,30,36,.15); max-height: 16rem; overflow-y: auto; }
.loc-option { padding: .5rem .75rem; cursor: pointer; }
.loc-option[aria-selected="true"], .loc-option:hover { background: var(--orange-soft); }
.loc-empty { padding: .5rem .75rem; color: var(--ink-3); font-size: .9rem; }

/* Results */
/* After Confirm the quiz card's frame goes, so the CV cards sit on the same full-width grid as the results */
/* The questionnaire card stops at its 1440px-screen width on big monitors, centred (Jordan); smaller screens unchanged */
.ask { max-width: 85rem; margin-left: auto; margin-right: auto; }
.ask.is-done { max-width: none; } /* the "Your search" summary lines up with the results grid */
.ask:has(.ask-thanks:not([hidden])) { background: none; border: 0; box-shadow: none; max-width: none; }
.ask-body:has(> .ask-thanks:not([hidden])) { padding: 0; }
.results { scroll-margin-top: 5rem; }
.results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.selected-count { flex-shrink: 0; margin-top: .5rem; padding: .375rem .875rem; font-weight: 700; white-space: nowrap; color: var(--orange); background: var(--white); border: 1px solid var(--orange); }
/* As many columns as fit: each at least wide enough for a 10-word write-up line at 14px (1 on phones, 2 on iPad
   portrait, 3 at 1280-1440, 4 at 1920) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr)); gap: 1rem; margin-top: 1rem; align-items: stretch; }
.match-card { cursor: pointer; padding: 1.125rem .875rem; border: 2px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .15s; }
.match-card:hover { border-color: #c7d0d6; box-shadow: 0 6px 18px rgba(20,30,36,.1); }
.match-card.is-selected { border-color: var(--orange); }
.match-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.match-id { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.pick-tag { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .65rem; border: 1px solid #c7d0d6; color: var(--ink-2); }
.is-selected .pick-tag { background: var(--orange); border-color: var(--orange); color: var(--white); }
.match-lines { list-style: none; margin: .5rem 0 0; padding: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.45; display: grid; gap: .35rem; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: .75rem 0 0; }
.card-chip { font-size: .8rem; padding: 2px 9px; border: 1px solid #c7d0d6; color: var(--ink-2); background: var(--white); }
.card-chip.asked { border-color: var(--orange); background: var(--orange); color: var(--white); }
.no-matches { padding: 1.5rem; max-width: 40rem; }
/* The big floating button over the cards */
.meet-bar { position: sticky; bottom: 1.5rem; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 2rem; pointer-events: none; }
.btn-meet { pointer-events: auto; max-width: 100%; padding: 1.25rem 2.25rem; font-size: 1rem; color: var(--white); background: var(--orange); box-shadow: 0 10px 28px -8px rgba(255,109,0,.6); text-align: center; }
.btn-meet:hover { background: var(--dark); }
.meet-error { pointer-events: auto; margin: 0; padding: .4rem .9rem; background: var(--white); border: 1px solid var(--error); color: var(--error); font-size: .9rem; text-align: center; text-wrap: pretty; }

/* After Confirm: the card becomes the CVs */
.ask-thanks { grid-column: 1 / -1; text-align: center; padding: 1rem 0; }
.ask-thanks .lead { margin: 1.5rem 0 0; color: var(--ink-2); }
/* The selected candidates' cards again, each with "Open CV" (or "No longer available") centred at the bottom; the buttons line
   up across a row because each card is a column whose last item is pushed to the bottom */
.cv-cards { margin-top: 1.5rem; text-align: left; }
.cv-card { cursor: default; display: flex; flex-direction: column; }
.cv-card:hover { border-color: var(--line); box-shadow: 0 1px 3px rgba(20,30,36,.08); }
.cv-card .card-chips { margin-bottom: 1.25rem; }
.cv-open { margin-top: auto; align-self: center; }
.cv-missing { margin: auto 0 0; min-height: 3.125rem; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-3); font-weight: 600; }

/* Contact pop-up */
.contact { width: min(32rem, calc(100% - 2rem)); padding: 0; border: 0; border-top: 4px solid var(--orange); background: var(--white); color: var(--ink); box-shadow: 0 20px 60px rgba(0,5,29,.35); overflow: visible; }
.contact::backdrop { background: rgba(0,5,29,.65); }
.contact-body { padding: 1.75rem; }
.field { display: block; margin-top: 1rem; }
.field-error { color: var(--error); font-size: .85rem; margin: .375rem 0 0; text-wrap: pretty; }
.phone { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .5rem; }
.cc { position: relative; min-width: 0; }
.cc-button { text-align: left; cursor: pointer; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141e24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center; background-size: 12px 8px; }
.cc-list { max-height: 14rem; }
.small { font-size: .85rem; color: var(--ink-3); margin: 1rem 0 0; }
.keep { white-space: nowrap; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* Footer: dark, logo and the privacy link */
.site-footer { background: var(--dark); color: #c9d1d6; font-size: .9rem; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.site-footer .logo { height: 36px; width: auto; display: block; }
.site-footer a { color: #e8ecef; text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom .wrap { padding-top: .75rem; padding-bottom: .75rem; font-size: .8rem; color: #9aa5ab; }

@media (max-width: 900px) {
  .ask-body { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
  .ask-text { position: static; }
  .values, .steps { grid-template-columns: 1fr; }
  .values { gap: 2.25rem; }
  .ask.is-done .ask-text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "answers" "action"; }
}
@media (max-width: 640px) {
  .header-row { min-height: 4rem; }
  .site-header .logo { height: 32px; }
  .brand-divider, .brand-tag { display: none; }
  .hero-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .hero { background-size: 80%, auto; min-height: 48vw; }
  .section { padding: 3rem 0; }
  .section-light { background-size: 80%; min-height: 48vw; }
  .results-head { flex-direction: column; gap: 0; }
  .phone { grid-template-columns: 1fr; }
  .btn-meet { padding: 1.1rem 1.5rem; }
  /* step titles a little smaller on phones, so "Browse anonymous candidates" fits on one line (Jordan); all three match */
  /* each step only as wide as the widest of the three (all equal, so they line up), centred (Jordan) */
  .steps { grid-template-columns: fit-content(100%); justify-content: center; }
  .step { padding: 1.1rem 1.25rem; gap: .875rem; }
  .step-num { width: 2.25rem; height: 2.25rem; }
  .step-title { font-size: 1.02rem; }
  .contact-body { padding: 1.25rem; }
  .ask.is-done .section-title { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}