/* ---------------- brand font ----------------
   Declared by the plugin so the quiz never depends on the theme having loaded
   it. The face is a single static weight, but it is declared across the full
   100-900 range: every weight the quiz asks for then resolves to this exact
   file, so the browser has no missing weight to fake. That, with synthesis
   switched off below, is what keeps the glyphs even.
   Primary source is the main site; the same-origin theme copy is listed after
   it so the font still resolves on staging domains where a cross-origin font
   request may be refused. */
@font-face {
    font-family: 'PQPJohnston';
    src: url('https://www.pharmaaccess.net/wp-content/uploads/2026/09/Johnston-ITC-Regular.woff2') format('woff2'),
         url('https://www.pharmaaccess.net/wp-content/uploads/2026/09/Johnston-ITC-Regular.woff2') format('woff2'),
         url('https://www.pharmaaccess.net/wp-content/uploads/2026/09/Johnston-ITC-Regular.woff2') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   Pharma Quiz - Full-Page Enquiry Flow   v2.9.2
   Content first. Slim accent art. One viewport, no page scroll.
   ================================================================ */

/* Neutralise the theme's GSAP ScrollSmoother on this page */
.ScrollSmoother-wrapper, #smooth-wrapper,
.ScrollSmoother-content, #smooth-content {
    position: static !important; inset: auto !important; transform: none !important;
    width: auto !important; height: auto !important; overflow: visible !important;
}

.fpq {
    --fpq-hdr: 88px;
    --fpq-hdr-gap: 18px;
    --t: #1F9E91;
    --t-dk: #17796F;
    --o: #F08900;
    --navy: #16274B;
    --ink: #3E4C63;
    --line: #E3E8EF;
    --soft: #F4FBFA;
    /* wider side gutters keep the quiz visually centred on large screens */
    --gut: clamp(20px, 6vw, 120px);
    --fpq-font: 'PQPJohnston', "johnston_itc_medium-webfont", "Johnston ITC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-family: var(--fpq-font);
    color: var(--ink);
    background: #fff;
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* The brand webfont ships a single weight. Browsers fake the missing
       bold/semibold weights, which is what made "Project Country" and the
       country-list matches look uneven. Disable synthesis so every glyph
       renders from the real outlines - consistent on all devices. */
    font-synthesis: none;
    -webkit-font-synthesis: none;
    position: relative;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Content gets the room; art is a slim accent strip. */
.fpq-shell {
    display: grid;
    grid-template-columns: 1fr 0;         /* no art by default (steps 0 & 1) */
    /* --fpq-h is measured by JS = viewport minus whatever sits above the quiz
       (theme header etc). Falls back to 100dvh before JS runs. */
    /* the page header sits above, so the shell takes the remainder */
    min-height: calc(var(--fpq-h, 100dvh) - var(--fpq-hdr) - var(--fpq-hdr-gap));
    height: calc(var(--fpq-h, 100dvh) - var(--fpq-hdr) - var(--fpq-hdr-gap));
    max-height: calc(var(--fpq-h, 100dvh) - var(--fpq-hdr) - var(--fpq-hdr-gap));
    overflow: hidden;   /* nothing escapes the viewport box */
    transition: grid-template-columns .45s cubic-bezier(.4, 0, .2, 1);
}
.fpq.fpq-art-on .fpq-shell { grid-template-columns: 1fr clamp(300px, 34vw, 520px); }
/* map step: content goes edge to edge */
.fpq.fpq-map-on .fpq-shell { grid-template-columns: 1fr 0; }

/* ---------------- left column ---------------- */
.fpq-col-form {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    padding: clamp(14px, 2.4vh, 26px) var(--gut) clamp(18px, 3vh, 34px);
    position: relative; z-index: 2;
}
.fpq.fpq-map-on .fpq-col-form { padding: 0; }

/* top bar: logo + progress */
/* ---------------- page header (all steps) ----------------
   A header of its own for this page, spanning the full width with the logo
   centred. Height lives in --fpq-hdr so the shell below can subtract it. */
.fpq-header {
    flex: none; height: var(--fpq-hdr); display: flex;
    align-items: center; justify-content: center;
    background: #fff; border-bottom: 1px solid var(--line);
    position: relative; z-index: 7;
    margin-bottom: var(--fpq-hdr-gap);
}
.fpq-logo {
    height: 58px !important; width: auto !important; max-width: 290px !important;
    display: block; flex: none; object-fit: contain;
    transition: opacity .3s ease;
}
.fpq-topbar { flex: none; display: flex; align-items: center; gap: 18px; margin-bottom: clamp(10px, 2vh, 20px); }
.fpq.fpq-map-on .fpq-topbar { display: none; }

.fpq-progress-wrap { flex: 1 1 auto; max-width: 420px; }
.fpq-step-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--t); margin-bottom: 5px; }
.fpq-progress { height: 3px; background: #E9EEF2; border-radius: 3px; overflow: hidden; }
.fpq-progress-bar { height: 100%; width: 12%; border-radius: 3px; background: linear-gradient(90deg, var(--t), var(--o)); transition: width .45s cubic-bezier(.4, 0, .2, 1); }

/* ---------------- slides ---------------- */
.fpq-slides { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.fpq-slide { display: none; flex-direction: column; width: 100%; min-height: 0; }
.fpq-slide.fpq-active { display: flex; }
/* content area scrolls inside the panel so the PAGE never scrolls */
.fpq-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
    display: flex; flex-direction: column; justify-content: center;   /* balance short steps */
}
/* steps whose content is tall start at the top instead of centring */
.fpq-slide[data-step="6"] .fpq-body,
.fpq-slide[data-step="8"] .fpq-body { justify-content: flex-start; }
.fpq-body::-webkit-scrollbar { width: 5px; }
.fpq-body::-webkit-scrollbar-thumb { background: #D6E4E2; border-radius: 3px; }

.fpq-in-r { animation: fpqInR .36s cubic-bezier(.22, .9, .3, 1) both; }
.fpq-in-l { animation: fpqInL .36s cubic-bezier(.22, .9, .3, 1) both; }
.fpq-out-l { animation: fpqOutL .18s ease-in both; }
.fpq-out-r { animation: fpqOutR .18s ease-in both; }
@keyframes fpqInR { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes fpqInL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes fpqOutL { from { opacity: 1; } to { opacity: 0; transform: translateX(-16px); } }
@keyframes fpqOutR { from { opacity: 1; } to { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .fpq-in-r, .fpq-in-l, .fpq-out-l, .fpq-out-r { animation: none; } }

.fpq-eyebrow { display: block; font-size: 12px; font-weight: 600; color: var(--t); margin-bottom: 6px; }
.fpq-question { font-size: clamp(22px, 2.7vw, 38px); line-height: 1.14; font-weight: 700; color: var(--navy); margin: 0 0 8px; letter-spacing: -.015em; }
.fpq-desc { font-size: clamp(13px, 1.02vw, 15px); line-height: 1.5; color: #6B7789; margin: 0 0 clamp(12px, 2vh, 20px); max-width: 62ch; }

.fpq-usp { list-style: none; display: flex; gap: clamp(18px, 3.4vw, 44px); padding: 0; margin: 8px 0 0; }
.fpq-usp li { font-size: 12px; color: #7A8699; display: flex; flex-direction: column; gap: 2px; }
.fpq-usp span { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--t); }

/* ---------------- option cards ---------------- */
.fpq-options { display: grid; gap: clamp(8px, 1.2vh, 12px); }
.fpq-2col { grid-template-columns: 1fr 1fr; }
.fpq-1col { grid-template-columns: 1fr; }

.fpq-card {
    position: relative; display: flex; align-items: center; gap: 13px;
    padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1vw, 18px);
    border: 1.6px solid var(--line); border-radius: 13px; background: #fff;
    cursor: pointer; overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.fpq-card input { position: absolute; opacity: 0; pointer-events: none; }
.fpq-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--t), var(--o));
    transform: scaleY(0); transform-origin: top; transition: transform .28s ease;
}
.fpq-card:hover { border-color: #A9DBD4; box-shadow: 0 8px 24px rgba(31, 158, 145, .13); transform: translateY(-3px); }
.fpq-card:hover::before { transform: scaleY(1); }
.fpq-card.fpq-sel { border-color: var(--t); background: linear-gradient(135deg, rgba(31, 158, 145, .07), rgba(240, 137, 0, .04)); }
.fpq-card.fpq-sel::before { transform: scaleY(1); }

/* bigger icons (Q2 / Q3) */
.fpq-ci { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; transition: background .22s ease, transform .22s ease; }
.fpq-ci svg { width: 25px; height: 25px; fill: none; stroke: var(--t); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fpq-card:hover .fpq-ci { background: #DFF1EE; transform: scale(1.06); }
.fpq-card.fpq-sel .fpq-ci { background: #DFF1EE; }
.fpq-big .fpq-ci { width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px); }
.fpq-big .fpq-ci svg { width: clamp(24px, 2.2vw, 30px); height: clamp(24px, 2.2vw, 30px); }

.fpq-ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; justify-content: center; }
.fpq-ct b { font-size: clamp(14.5px, 1.16vw, 17px); font-weight: 500; color: var(--navy); line-height: 1.3; }
.fpq-ct i { font-style: normal; font-size: clamp(11px, .84vw, 12.8px); color: #8A94A6; line-height: 1.38; }

/* radio dot for single-column lists */
.fpq-1col .fpq-card { padding-left: 46px; }
.fpq-1col .fpq-card::after {
    content: ''; position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; border-radius: 50%; border: 2px solid #CBD5E1; transition: all .2s ease;
}
.fpq-1col .fpq-card.fpq-sel::after { border-color: var(--t); background: radial-gradient(circle, var(--t) 0 42%, #fff 45%); }

/* ---------------- tiles with icons ---------------- */
.fpq-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(7px, 1vh, 11px); }
.fpq-tile { position: relative; cursor: pointer; }
.fpq-tile input { position: absolute; opacity: 0; pointer-events: none; }
.fpq-tile-in {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    text-align: center; height: 100%; min-height: clamp(92px, 13vh, 126px); padding: clamp(8px, 1.1vh, 12px) 8px;
    border: 1.6px solid var(--line); border-radius: 12px; background: #fff;
    transition: all .22s ease;
}
.fpq-tile-ico { display: grid; place-items: center; }
.fpq-tile-img {
    width: clamp(46px, 5vw, 68px); height: clamp(46px, 5vw, 68px);
    object-fit: contain; display: block; user-select: none; -webkit-user-drag: none;
}
.fpq-tile-svg { display: none; place-items: center; }
.fpq-tile-ico svg { width: clamp(42px, 4.6vw, 60px); height: clamp(42px, 4.6vw, 60px); fill: none; stroke: var(--t); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.fpq-tile-tx { font-size: clamp(10.5px, .8vw, 12.4px); font-weight: 500; color: var(--navy); line-height: 1.28; }
.fpq-tile:hover .fpq-tile-in { border-color: #A9DBD4; box-shadow: 0 7px 20px rgba(31, 158, 145, .12); transform: translateY(-3px); }
.fpq-tile.fpq-sel .fpq-tile-in { border-color: var(--t); background: linear-gradient(135deg, rgba(31, 158, 145, .09), rgba(240, 137, 0, .05)); }
.fpq-tile.fpq-sel .fpq-tile-tx { color: var(--t-dk); font-weight: 600; }

/* ---------------- chips ---------------- */
.fpq-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fpq-chip { position: relative; cursor: pointer; }
.fpq-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fpq-chip span {
    display: inline-flex; align-items: center; padding: 8px 14px 8px 30px; position: relative;
    border: 1.5px solid var(--line); border-radius: 9px; background: #fff;
    font-size: 12.5px; color: var(--navy); transition: all .2s ease;
}
.fpq-chip span::before {
    content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; border-radius: 50%; border: 2px solid #CBD5E1; transition: all .2s ease;
}
.fpq-chip:hover span { border-color: #A9DBD4; }
.fpq-chip.fpq-sel span { border-color: var(--t); background: rgba(31, 158, 145, .06); font-weight: 600; }
.fpq-chip.fpq-sel span::before { border-color: var(--t); background: radial-gradient(circle, var(--t) 0 40%, #fff 44%); }
.fpq-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fpq-count { position: absolute; right: 12px; bottom: 9px; font-size: 11px; color: #A6B0C0; pointer-events: none; }
.fpq-phone { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }

.fpq-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .32s ease, opacity .25s ease, margin .25s ease; margin: 0; }
.fpq-reveal.fpq-open { max-height: 260px; opacity: 1; margin: 11px 0 0; }

/* area + unit switch */
.fpq-area { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.fpq-area input {
    width: 100%; box-sizing: border-box; padding: 9px 14px; min-height: 44px; font-size: 14px;
    font-family: inherit; border: 1.6px solid var(--line); border-radius: 10px; color: var(--navy); background: #fff;
}
.fpq-area input:focus { outline: none; border-color: var(--t); box-shadow: 0 0 0 3px rgba(31, 158, 145, .12); }
.fpq-unit { display: flex; border: 1.6px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.fpq-unit-btn {
    border: 0; background: #fff !important; padding: 0 17px; min-height: 44px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #6B7789 !important;
    transition: background .2s ease, color .2s ease;
}
.fpq-unit-btn:hover { background: #F2F7F7 !important; color: var(--t-dk) !important; }
.fpq-unit-btn.fpq-unit-on { background: var(--t) !important; color: #fff !important; }
.fpq-conv { font-size: 11.5px; color: #A6B0C0; margin: 7px 0 0; }

.fpq-warn { margin: 8px 0 0; font-size: 12.5px; color: #C0392B; font-weight: 500; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .2s ease, max-height .2s ease; }
.fpq-warn.fpq-warn-on { opacity: 1; max-height: 40px; }

.fpq-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: #8A94A6; margin: 12px 0 0; }
.fpq-consent-ico { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: var(--t); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fpq-consent a { color: var(--t); text-decoration: underline; }

.fpq-done { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--t), #34C4B4); display: grid; place-items: center; margin-bottom: 14px; }
.fpq-done svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- typography normalisation ----------------
   The theme and page builder apply their own font-family, weight and style to
   headings, labels, links and buttons inside the shortcode. Whenever they ask
   for a weight or a slant that the single-weight brand font doesn't ship, the
   browser fakes it - which is why glyphs came out smeared or slightly tilted.
   Pin the real face across the whole quiz and switch synthesis off. */
.fpq, .fpq h1, .fpq h2, .fpq h3, .fpq h4, .fpq p, .fpq span, .fpq label,
.fpq b, .fpq strong, .fpq i, .fpq em, .fpq small, .fpq li, .fpq a,
.fpq button, .fpq input, .fpq select, .fpq textarea,
.fpq .paloc26-panel, .fpq .paloc26-panel *, .fpq .paloc26-cb-opt, .fpq .paloc26-cb-opt * {
    font-family: var(--fpq-font) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    font-synthesis-weight: none !important;
    font-synthesis-style: none !important;
    -webkit-font-synthesis: none !important;
    font-variant: normal !important;
    text-transform: none !important;
}
/* headings keep their intended emphasis via size/colour, not a faked weight */
.fpq .fpq-question, .fpq .fpq-map-title { font-weight: 700; }

/* ---------------- buttons ---------------- */
.fpq-btn-row { flex: none; display: flex; gap: 12px; align-items: center; padding-top: clamp(12px, 2vh, 20px); }

.fpq-cta, .fpq-cta-ghost, .fpq-btn-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 28px; min-height: 48px; border-radius: 30px; border: none;
    font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
    text-decoration: none; line-height: 1.2; position: relative; overflow: hidden; transition: all .3s ease;
}
/* Back: clearly visible outlined pill */
.fpq-btn-back {
    flex: none; background: #fff !important; background-image: none !important;
    color: var(--t) !important; border: 1.6px solid #BFE3DE !important; padding: 12px 22px;
    text-shadow: none !important;
}
.fpq-btn-back span, .fpq-btn-back svg { color: var(--t) !important; stroke: var(--t) !important; opacity: 1 !important; }
.fpq-btn-back:hover { background: #EAF7F5 !important; border-color: var(--t) !important; transform: translateX(-2px); }
.fpq-btn-back:hover span, .fpq-btn-back:hover svg { color: var(--t-dk) !important; stroke: var(--t-dk) !important; }
.fpq-btn-back:active { transform: scale(.98); }

.fpq-cta { flex: 0 1 320px; background: linear-gradient(90deg, var(--t) 0%, var(--o) 100%); color: #fff !important; }
.fpq-cta::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--t); transition: width .4s ease; z-index: 0; }
.fpq-cta:hover:not(:disabled)::before { width: 100%; }
.fpq-cta > * { position: relative; z-index: 2; }
/* Button typography — the theme styles buttons with a weight the brand font
   doesn't ship, so the browser faux-bolds the glyphs and they render uneven.
   Restate the real face at high specificity and block weight synthesis. */
.fpq .fpq-cta, .fpq .fpq-cta-ghost, .fpq .fpq-btn-back,
.fpq .fpq-cta span, .fpq .fpq-cta-ghost span, .fpq .fpq-btn-back span,
.fpq a.fpq-cta, .fpq button.fpq-cta, .fpq button.fpq-btn-back, .fpq a.fpq-cta-ghost {
    font-family: var(--fpq-font) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-stretch: normal !important;
    font-synthesis: none !important;
    font-synthesis-weight: none !important;
    -webkit-font-synthesis: none !important;
    letter-spacing: .015em !important;
    word-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fpq-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 158, 145, .3); color: #fff !important; }
.fpq-cta:active { transform: scale(.98); }
.fpq-cta:disabled { opacity: .5; cursor: not-allowed; }

.fpq-cta-ghost { flex: 0 1 260px; background: #fff; color: var(--t) !important; border: 1.6px solid var(--t); }
.fpq-cta-ghost:hover { background: rgba(31, 158, 145, .07); transform: translateY(-2px); }

.fpq-ico-r, .fpq-ico-l { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- right accent art ---------------- */
.fpq-col-art {
    position: relative; overflow: hidden; min-width: 0;
    background: linear-gradient(150deg, #FFFFFF 0%, #F3FAF9 45%, #EAF6F4 100%);
    display: grid; place-items: center;
    opacity: 0; transition: opacity .4s ease .1s;
}
.fpq.fpq-art-on .fpq-col-art { opacity: 1; }
.fpq-col-art::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 90px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); z-index: 3; pointer-events: none;
}
.fpq-art-deco { position: absolute; inset: 0; pointer-events: none; }
.fpq-deco-waves { position: absolute; top: 3%; left: -10%; width: 90%; height: 70px; }
.fpq-deco-dots { position: absolute; right: 9%; top: 9%; width: 44px; opacity: .85; }
.fpq-deco-swoosh { position: absolute; right: -4%; bottom: -2%; width: 78%; height: 130px; }

.fpq-art { position: absolute; inset: 0; display: none; place-items: center; padding: clamp(12px, 7%, 26px); }
/* Support + facility-size steps: let the illustration fill the strip */
/* steps that carry a full illustration get the whole strip */
.fpq-art { padding: clamp(4px, 2%, 14px); }
.fpq-art[data-art="0"], .fpq-art[data-art="5"], .fpq-art[data-art="8"] { padding: clamp(2px, 1%, 8px); }
/* steps 2 and 4 carry tall artwork - give it room so nothing is cropped */
.fpq-art[data-art="2"], .fpq-art[data-art="6"] { padding: clamp(10px, 4%, 30px); }
.fpq-art[data-art="0"] .fpq-art-img,
.fpq-art[data-art="5"] .fpq-art-img,
.fpq-art[data-art="8"] .fpq-art-img { max-height: 90%; transform: scale(1.18); transform-origin: center; }
.fpq-art[data-art="2"] .fpq-art-img,
.fpq-art[data-art="6"] .fpq-art-img {
    max-height: 86%; width: auto; max-width: 100%; transform: none; object-fit: contain;
}
/* every other panel still fills its strip generously */
.fpq-art-img { width: 100%; }
.fpq-art.fpq-art-on { display: grid; animation: fpqArtIn .5s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes fpqArtIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.fpq-art-svg { width: 100%; height: auto; max-height: 74vh; }
/* SVG fallback layer — revealed only when the step's image can't be fetched */
.fpq-art-fallback { width: 100%; display: block; }
.fpq-art-fallback[hidden] { display: none; }
.fpq-art-t { font: 600 9.5px/1 sans-serif; fill: #1F9E91; }
.fpq-art-t.fpq-art-o { fill: #F08900; }
.fpq-art-s { font: 400 7.6px/1 sans-serif; fill: #8A94A6; }
.fpq-art-n { font: 700 10px/1 sans-serif; fill: #1F9E91; text-anchor: middle; }
.fpq-art-q { font: 700 22px/1 sans-serif; fill: #BFE3DE; text-anchor: middle; }

/* ---------------- map step (full bleed) ---------------- */
.fpq-slide[data-step="1"] { padding: 0; }
.fpq-map-host { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.fpq .paloc26-wrap { position: absolute; inset: 0; height: 100% !important; width: 100%; font-family: inherit !important; }
.fpq #paloc26-map { position: absolute; inset: 0; }
.fpq .paloc26-panel {
    position: absolute; top: clamp(14px, 3vh, 30px); left: clamp(14px, 3vw, 34px);
    width: min(340px, calc(100% - 28px)); padding: clamp(16px, 2vw, 22px);
    box-shadow: 0 14px 38px rgba(22, 39, 75, .16); z-index: 900;
}
.fpq-map-title { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0 0 14px; line-height: 1.2; }
.fpq-map-title span { color: inherit; } /* "&" matches "Project Location" text colour */
.fpq .paloc26-actions { display: none !important; }   /* replaced by the form's own buttons */
.fpq-map-btns { padding-top: 14px; }
.fpq-map-btns .fpq-cta { flex: 1 1 auto; min-height: 44px; padding: 11px 18px; font-size: 14px; }
.fpq-map-btns .fpq-btn-back { padding: 11px 16px; min-height: 44px; }
/* keep the viewfinder square centred on the visible map */
.fpq .paloc26-finder { width: clamp(200px, 34vmin, 360px); height: clamp(200px, 34vmin, 360px); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1200px) { .fpq-tiles { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) {
    .fpq-shell, .fpq.fpq-art-on .fpq-shell, .fpq.fpq-map-on .fpq-shell {
        grid-template-columns: 1fr; grid-template-rows: 1fr;
        height: calc(var(--fpq-h, 100dvh) - var(--fpq-hdr) - var(--fpq-hdr-gap));
    }
    .fpq-col-art { display: none; }          /* art is decoration - drop it on small screens */
    .fpq-col-form { padding: 14px 18px 22px; }
    .fpq-question { font-size: clamp(20px, 5.4vw, 26px); }
    .fpq-desc { font-size: 13.5px; margin-bottom: 12px; }
    .fpq .paloc26-panel { top: 10px; left: 10px; right: 10px; width: auto; padding: 14px; }
    .fpq-map-title { font-size: 16px; margin-bottom: 10px; }
}

@media (max-width: 620px) {
    .fpq-2col { grid-template-columns: 1fr; }
    .fpq-tiles { grid-template-columns: repeat(2, 1fr); }
    .fpq-row2 { grid-template-columns: 1fr; }
    .fpq-usp { gap: 16px; }
    .fpq-usp span { font-size: 20px; }
    .fpq-ci, .fpq-big .fpq-ci { width: 42px; height: 42px; }
    .fpq-ci svg, .fpq-big .fpq-ci svg { width: 23px; height: 23px; }
    .fpq-btn-row { gap: 8px; }
    .fpq-cta { flex: 1 1 auto; padding: 12px 16px; font-size: 13.5px; }
    .fpq-btn-back { padding: 12px 14px; }
    .fpq-btn-back span { display: none; }     /* arrow-only Back on narrow screens */
    .fpq-cta-ghost { flex: 1 1 auto; }
    .fpq-phone { grid-template-columns: 88px 1fr; }
    .fpq-chip span { font-size: 11.5px; padding: 7px 11px 7px 27px; }
    .fpq-tile-in { min-height: 68px; }
}

/* short desktop screens - compress so it still fits one viewport */
@media (min-width: 901px) and (max-height: 800px) {
    .fpq-question { font-size: clamp(19px, 2vw, 27px); }
    .fpq-desc { margin-bottom: 10px; font-size: 13px; }
    .fpq-card { padding: 9px 13px; }
    .fpq-big .fpq-ci { width: 42px; height: 42px; }
    .fpq-big .fpq-ci svg { width: 23px; height: 23px; }
    .fpq-tile-in { min-height: 70px; }
    .fpq-usp { margin-top: 4px; }
    .fpq-cta, .fpq-btn-back, .fpq-cta-ghost { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

/* ================================================================
   Page chrome: hide footer / stray page padding on the quiz page.
   Add the [pqp_form_page] shortcode page and this kicks in via the
   body class added by the plugin.
   ================================================================ */
body.pqp-form-page footer,
body.pqp-form-page .site-footer,
body.pqp-form-page .footer,
body.pqp-form-page #colophon,
body.pqp-form-page .elementor-location-footer,
body.pqp-form-page .whatsapp-float,
body.pqp-form-page .wa-float { display: none !important; }

body.pqp-form-page { overflow-x: hidden; overflow-x: clip; max-width: 100vw; }
body.pqp-form-page #page, body.pqp-form-page #content { overflow-x: clip; }
body.pqp-form-page .site-content,
body.pqp-form-page .entry-content,
body.pqp-form-page .content-area,
body.pqp-form-page main { margin: 0 !important; padding: 0 !important; max-width: none !important; }

/* map panel internals inherit the form's field styling */
.fpq .paloc26-panel label { font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 5px; display: block; }
.fpq .paloc26-cb-input { min-height: 44px; font-family: inherit; font-size: 14px; }
.fpq .paloc26-hint { font-size: 11.5px; color: #8A94A6; margin: 8px 0 0; }


/* ---------------- step art images ---------------- */
.fpq-art-img {
    width: 100%; height: auto; max-height: 76vh; object-fit: contain; display: block;
    border-radius: 14px; user-select: none; -webkit-user-drag: none;
    filter: drop-shadow(0 10px 26px rgba(22, 39, 75, .08));
}

/* ================================================================
   Centred, balanced composition
   ================================================================ */
.fpq-col-form { align-items: center; }              /* centre the column contents */
.fpq-topbar, .fpq-slides { width: 100%; max-width: 1080px; }
.fpq.fpq-art-on .fpq-topbar,
.fpq.fpq-art-on .fpq-slides { max-width: 900px; }

/* Facility-size step: the yes/no mode boxes read better at a compact width
   instead of stretching across the whole desktop viewport. */
.fpq-slide[data-step="8"] .fpq-options.fpq-1col .fpq-card { max-width: 660px; width: 100%; }
.fpq-slide[data-step="8"] .fpq-reveal .fpq-area,
.fpq-slide[data-step="8"] .fpq-reveal .fpq-conv { max-width: 660px; }
/* the size step carries fewer elements than the others - give it the same
   visual weight rather than letting it read as a smaller screen */
.fpq-slide[data-step="8"] .fpq-options.fpq-1col .fpq-card { padding: clamp(13px, 2vh, 19px) 20px clamp(13px, 2vh, 19px) 50px; }
.fpq-slide[data-step="8"] .fpq-ct b { font-size: clamp(15px, 1.22vw, 17.5px); }
.fpq-slide[data-step="8"] .fpq-options { gap: clamp(10px, 1.6vh, 16px); }
.fpq-slide[data-step="8"] .fpq-chip span { font-size: 13px; padding: 9px 14px 9px 30px; }
.fpq-slide[data-step="8"] .fpq-btn-row .fpq-cta,
.fpq-slide[data-step="8"] .fpq-btn-row .fpq-btn-back { min-height: 50px; padding-left: 30px; padding-right: 30px; }

/* sparse screens read better fully centred */
.fpq-slide[data-step="3"] .fpq-body,
.fpq-slide[data-step="4"] .fpq-body,
.fpq-slide[data-step="11"] .fpq-body { align-items: center; text-align: center; }

/* Job / Vendor terminal screens: content and CTA sit together as one centred
   block, vertically balanced with the artwork - no stretched-out spacing. */
.fpq-slide[data-step="3"],
.fpq-slide[data-step="4"] { justify-content: center; }
.fpq-slide[data-step="3"] .fpq-body,
.fpq-slide[data-step="4"] .fpq-body { flex: 0 0 auto; min-height: 0; }
.fpq-slide[data-step="3"] .fpq-eyebrow,
.fpq-slide[data-step="4"] .fpq-eyebrow { margin-bottom: 10px; }
.fpq-slide[data-step="3"] .fpq-desc,
.fpq-slide[data-step="4"] .fpq-desc { margin-bottom: 4px; max-width: 58ch; }
.fpq-slide[data-step="3"] .fpq-btn-row,
.fpq-slide[data-step="4"] .fpq-btn-row { padding-top: clamp(14px, 2.4vh, 22px); }

.fpq-slide[data-step="3"] .fpq-desc,
.fpq-slide[data-step="4"] .fpq-desc,
.fpq-slide[data-step="11"] .fpq-desc { margin-left: auto; margin-right: auto; }

.fpq-slide[data-step="3"] .fpq-btn-row,
.fpq-slide[data-step="4"] .fpq-btn-row,
.fpq-slide[data-step="11"] .fpq-btn-row { justify-content: center; }
.fpq-slide[data-step="11"] .fpq-done { margin-left: auto; margin-right: auto; }

/* ---------------- #1 single-viewport fit ----------------
   The shell is locked to the measured viewport height, so the page itself
   never scrolls. On desktop the vertical rhythm is compressed a little so a
   full step fits without the body needing to scroll internally; the internal
   scroll stays available as a safety valve for very short windows. */
@media (min-width: 1025px) {
    .fpq { --gut: clamp(24px, 5vw, 96px); }
    .fpq-col-form { padding: clamp(10px, 1.8vh, 20px) var(--gut) clamp(12px, 2vh, 24px); }
    .fpq-topbar { margin-bottom: clamp(8px, 1.4vh, 14px); }
    .fpq-question { margin-bottom: clamp(4px, .8vh, 10px); }
    .fpq-desc { margin-bottom: clamp(8px, 1.4vh, 16px); }
    .fpq-options { gap: clamp(8px, 1.2vh, 14px); }
    .fpq-card { padding: clamp(10px, 1.5vh, 16px) 16px; }
    .fpq-btn-row { padding-top: clamp(10px, 1.6vh, 20px); }
    .fpq-body { overflow-y: auto; }
}
/* short desktop windows (laptops at 125-150% scaling): tighten further */
@media (min-width: 1025px) and (max-height: 780px) {
    .fpq-question { font-size: clamp(20px, 2.2vw, 28px); }
    .fpq-card { padding: 9px 14px; }
    .fpq-options { gap: 8px; }
    .fpq-usp span { font-size: 22px; }
    .fpq-cta, .fpq-cta-ghost, .fpq-btn-back { min-height: 42px; padding: 9px 22px; }
}

/* ---------------- #9 mobile pass ----------------
   The shell is height-locked on desktop; on phones the address bar changes
   height mid-scroll, so use the measured value there too and let the body
   scroll internally rather than the page. */
@media (max-width: 900px) {
    .fpq-shell, .fpq.fpq-art-on .fpq-shell, .fpq.fpq-map-on .fpq-shell {
        height: calc(var(--fpq-h, 100dvh) - var(--fpq-hdr) - var(--fpq-hdr-gap));
        max-height: calc(var(--fpq-h, 100dvh) - var(--fpq-hdr) - var(--fpq-hdr-gap));
    }
    .fpq-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
    /* contact step: single column, full-width controls */
    .fpq-slide[data-step="10"] .fpq-body { max-width: 100%; }
}
@media (max-width: 620px) {
    .fpq-usp { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
    .fpq-usp li { flex: 0 0 auto; min-width: 88px; text-align: center; align-items: center; }
    .fpq-chips { gap: 7px; }
    .fpq-area { grid-template-columns: 1fr; gap: 8px; }
    .fpq-consent { font-size: 11.5px; }
    /* terminal screens: keep the CTA on one line */
    .fpq-slide[data-step="3"] .fpq-cta,
    .fpq-slide[data-step="4"] .fpq-cta { white-space: nowrap; }
}
/* very narrow phones */
@media (max-width: 380px) {
    .fpq-tiles { grid-template-columns: 1fr; }
    .fpq-question { font-size: 19px; }
    .fpq-phone { grid-template-columns: 78px 1fr; }
}




/* ---------------- step 4: 12 tiles, one viewport ----------------
   Three rows of four. The icon carries the tile, so the gaps and label
   sizing flex with the window rather than the tiles growing past the fold. */
.fpq-slide[data-step="6"] .fpq-tiles { gap: 9px; }
.fpq-slide[data-step="6"] .fpq-tile-in { min-height: 112px; gap: 7px; padding: 10px 8px; }
.fpq-slide[data-step="6"] .fpq-tile-img,
.fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 60px; height: 60px; }
.fpq-slide[data-step="6"] .fpq-tile-tx { font-size: 12px; }
/* sized against the space the quiz actually has */
.fpq.fpq-h-lg .fpq-slide[data-step="6"] .fpq-tile-in { min-height: 134px; }
.fpq.fpq-h-lg .fpq-slide[data-step="6"] .fpq-tile-img,
.fpq.fpq-h-lg .fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 76px; height: 76px; }
.fpq.fpq-h-lg .fpq-slide[data-step="6"] .fpq-tile-tx { font-size: 12.8px; }
.fpq.fpq-h-md .fpq-slide[data-step="6"] .fpq-tile-in { min-height: 120px; }
.fpq.fpq-h-md .fpq-slide[data-step="6"] .fpq-tile-img,
.fpq.fpq-h-md .fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 66px; height: 66px; }
.fpq.fpq-h-sm .fpq-slide[data-step="6"] .fpq-tile-in { min-height: 100px; }
.fpq.fpq-h-sm .fpq-slide[data-step="6"] .fpq-tile-img,
.fpq.fpq-h-sm .fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 54px; height: 54px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-in { min-height: 84px; gap: 5px; padding: 7px 6px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-img,
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 44px; height: 44px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-tx { font-size: 10.6px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-desc { margin-bottom: 8px; }

/* ================================================================
   OPENING SCREEN (step 0) - single authoritative block
   ----------------------------------------------------------------
   Sized to fit one viewport without internal scrolling. Values are
   set per height band rather than by fluid clamps, because the
   screen has a fixed stack (logo, title, copy, rule, 3 fields,
   consent, CTA, stats) and must land inside the measured shell.
   ================================================================ */

/* the logo now lives in the page header above, so the opening screen just
   hides its (empty) progress bar and starts at the normal padding */
.fpq.fpq-step-0 .fpq-topbar { display: none; }

/* --- 60 / 40 split ----------------------------------------------- */
.fpq.fpq-step-0.fpq-art-on .fpq-shell { grid-template-columns: 60% 40%; }

/* --- the stack ---------------------------------------------------
   The opening screen scrolls as ONE column. Scrolling only the body
   left the heading clipped above and the button row overlapping the
   consent line below, because those sit outside the body. */
.fpq-slide[data-step="0"] {
    justify-content: flex-start;
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 6px;
}
.fpq-slide[data-step="0"] .fpq-body {
    flex: 0 0 auto; min-height: 0; overflow: visible;
    display: flex; flex-direction: column; align-items: stretch; text-align: left;
}
.fpq-slide[data-step="0"] .fpq-btn-row,
.fpq-slide[data-step="0"] .fpq-usp-foot { flex: 0 0 auto; }
/* Fields, labels and inputs inherit the standard styling used by every other
   step - only the supporting copy and consent line are a notch smaller. */
.fpq-slide[data-step="0"] .fpq-question { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.16; margin: 0 0 8px; }
.fpq-desc-sm { font-size: 14px !important; line-height: 1.55; margin: 0 0 6px; max-width: 60ch; }
.fpq-consent-sm { font-size: 12px !important; line-height: 1.5; margin: 14px 0 0; }
.fpq-consent-sm .fpq-consent-ico { width: 16px; height: 16px; }
.fpq-slide[data-step="0"] .fpq-btn-row { display: block; padding-top: 18px; }
.fpq-cta-wide { width: 100%; justify-content: center; min-height: 50px; }
/* two-column row, as on the contact step */
.fpq-slide[data-step="0"] .fpq-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* "A few quick details to get started" rule */
.fpq-rule {
    display: flex; align-items: center; gap: 12px; margin: 16px 0 18px;
    color: #8A94A6; font-size: 12.5px;
}
.fpq-rule::before { content: ""; height: 1px; background: var(--line); flex: 0 0 34px; }
.fpq-rule::after  { content: ""; height: 1px; background: var(--line); flex: 1 1 auto; max-width: 120px; }
.fpq-rule span { white-space: nowrap; }

/* inputs with a leading icon */
.fpq-ico-field { position: relative; }
.fpq-ico-field > .fpq-fi, .fpq-phone-in > .fpq-fi {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; pointer-events: none; z-index: 2; color: #9AA5B5;
}
.fpq-ico-field > .fpq-fi { top: calc(50% + 11px); }   /* offset for the label above */
.fpq-ico-field > .fpq-fi svg, .fpq-phone-in > .fpq-fi svg {
    width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.fpq-ico-field > input { padding-left: 40px !important; }
.fpq-phone-in { position: relative; display: block; }
.fpq-phone-in input { padding-left: 40px !important; width: 100%; box-sizing: border-box; }
.fpq-ico-field input:focus ~ .fpq-fi, .fpq-phone-in input:focus ~ .fpq-fi { color: var(--t); }

/* stats strip */
.fpq-usp-foot {
    flex: none; display: flex; list-style: none;
    margin: 20px 0 0; padding: 16px 0 0; gap: 0; border-top: 1px solid var(--line);
}
.fpq-usp-foot li { flex: 1 1 0; text-align: center; align-items: center; border-right: 1px solid var(--line); }
.fpq-usp-foot li:last-child { border-right: 0; }
.fpq-usp-foot span { font-size: 24px; }

/* --- height bands: compress only as the window gets shorter ------- */

/* --- mobile ------------------------------------------------------- */
@media (max-width: 900px) {
    .fpq.fpq-step-0.fpq-art-on .fpq-shell { grid-template-columns: 1fr; }
    .fpq-slide[data-step="0"] .fpq-body { overflow: visible; }
    .fpq-slide[data-step="0"] { padding-bottom: 14px; }
    .fpq-slide[data-step="0"] .fpq-question { font-size: 23px; }
    .fpq-slide[data-step="0"] .fpq-row2 { gap: 0; }
    .fpq-slide[data-step="0"] .fpq-field input,
    .fpq-slide[data-step="0"] .fpq-field select,
    .fpq-slide[data-step="0"] .fpq-phone input { min-height: 46px; font-size: 16px; }
    .fpq-usp-foot span { font-size: 19px; }
}
@media (max-width: 380px) {
    .fpq-usp-foot li { font-size: 10.5px; }
    .fpq-usp-foot span { font-size: 17px; }
}

/* 14-inch laptops (roughly 560-700px of usable height): trim enough that the
   whole screen still lands without scrolling. */
.fpq.fpq-h-sm { --fpq-hdr: 78px; --fpq-hdr-gap: 12px; }
.fpq.fpq-h-sm .fpq-logo { height: 50px !important; }
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-question { font-size: 26px; margin-bottom: 5px; }
.fpq.fpq-h-sm .fpq-desc-sm { font-size: 13px !important; margin-bottom: 4px; }
.fpq.fpq-h-sm .fpq-rule { margin: 10px 0 12px; }
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-row2 { gap: 14px; }
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-field { margin-bottom: 10px; }
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-field input,
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-field select,
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-phone input { min-height: 42px; }
.fpq.fpq-h-sm .fpq-field-gap { margin-top: 12px; }
.fpq.fpq-h-sm .fpq-consent-sm { margin-top: 10px; font-size: 11.5px !important; }
.fpq.fpq-h-sm .fpq-slide[data-step="0"] .fpq-btn-row { padding-top: 12px; }
.fpq.fpq-h-sm .fpq-cta-wide { min-height: 46px; }
.fpq.fpq-h-sm .fpq-usp-foot { margin-top: 12px; padding-top: 10px; }
.fpq.fpq-h-sm .fpq-usp-foot span { font-size: 21px; }

/* Only the tightest band trims further - with Name and Email sharing
   a row the stack fits comfortably everywhere else. */
.fpq.fpq-h-xs .fpq-slide[data-step="0"] .fpq-question { font-size: 23px; }
.fpq.fpq-h-xs .fpq-desc-sm { font-size: 12.5px !important; }
.fpq.fpq-h-xs .fpq-rule { margin: 10px 0 12px; }
.fpq.fpq-h-xs .fpq-slide[data-step="0"] .fpq-row2 { gap: 14px; }
.fpq.fpq-h-xs .fpq-consent-sm { margin-top: 10px; font-size: 11px !important; }
.fpq.fpq-h-xs .fpq-slide[data-step="0"] .fpq-btn-row { padding-top: 12px; }
.fpq.fpq-h-xs .fpq-cta-wide { min-height: 44px; }
.fpq.fpq-h-xs .fpq-usp-foot { margin-top: 12px; padding-top: 10px; }
.fpq.fpq-h-xs .fpq-usp-foot span { font-size: 20px; }

@media (max-width: 620px) {
    .fpq-slide[data-step="0"] .fpq-row2 { grid-template-columns: 1fr; gap: 0; }
}

/* a little more breathing room above Phone / WhatsApp */
.fpq-field-gap { margin-top: 14px; }
.fpq.fpq-h-lg .fpq-field-gap, .fpq.fpq-h-md .fpq-field-gap { margin-top: 20px; }

/* header scales down with the available space and on phones */
.fpq.fpq-h-xs { --fpq-hdr: 72px; --fpq-hdr-gap: 10px; }
.fpq.fpq-h-xs .fpq-logo { height: 46px !important; }
@media (max-width: 900px) {
    .fpq { --fpq-hdr: 74px; --fpq-hdr-gap: 10px; }
    .fpq-logo { height: 48px !important; max-width: 220px !important; }
}

/* ---------------- steps 2-5: balance content against the artwork ----------
   A wider strip and a larger illustration close the empty gap that sat
   between the option cards and the image. */
.fpq.fpq-art-on .fpq-slide[data-step="2"] .fpq-body,
.fpq.fpq-art-on .fpq-slide[data-step="5"] .fpq-body,
.fpq.fpq-art-on .fpq-slide[data-step="6"] .fpq-body,
.fpq.fpq-art-on .fpq-slide[data-step="8"] .fpq-body { max-width: 100%; }

/* step 5 (facility size): the short option list is centred in the column,
   the way the fuller support step reads */
.fpq-slide[data-step="8"] { justify-content: center; }
.fpq-slide[data-step="8"] .fpq-body { flex: 0 1 auto; justify-content: center; align-items: flex-start; text-align: left; }
.fpq-slide[data-step="8"] .fpq-options.fpq-1col { margin-left: 0; margin-right: auto; width: 100%; }
.fpq-slide[data-step="8"] .fpq-question,
.fpq-slide[data-step="8"] .fpq-desc { text-align: left; }
.fpq-slide[data-step="8"] .fpq-reveal .fpq-area,
.fpq-slide[data-step="8"] .fpq-reveal .fpq-conv,
.fpq-slide[data-step="8"] .fpq-chips { margin-left: 0; margin-right: auto; }

/* ---------------- confirmation: full width, art above the heading -------- */
.fpq.fpq-step-11 .fpq-shell,
.fpq.fpq-step-11.fpq-art-on .fpq-shell { grid-template-columns: 1fr; }
.fpq.fpq-step-11 .fpq-col-art { display: none; }
.fpq-slide[data-step="11"] .fpq-body { max-width: 780px; margin-left: auto; margin-right: auto; }
.fpq-done-art { display: grid; place-items: center; margin: 0 auto clamp(10px, 2vh, 20px); }
.fpq-done-img {
    width: auto; max-width: min(560px, 74vw);
    max-height: clamp(210px, 40vh, 380px);
    object-fit: contain; display: block;
}
.fpq-slide[data-step="11"] .fpq-btn-row { justify-content: center; }

/* ---------------- mobile: no dead band above the logo -------------------- */
@media (max-width: 900px) {
    .fpq.fpq-art-on .fpq-shell { grid-template-columns: 1fr; }
    .fpq-header { height: var(--fpq-hdr); padding: 0; }
    .fpq-done-img { max-width: 82vw; max-height: 32vh; }
    .fpq-slide[data-step="8"] { justify-content: flex-start; }
}

/* ---------------- confirmation screen tweaks ---------------- */
/* no progress bar once the flow is done */
.fpq.fpq-step-11 .fpq-topbar { display: none; }
/* the body copy reads better as two lines */
.fpq-slide[data-step="11"] .fpq-desc { max-width: 700px; margin-left: auto; margin-right: auto; }

/* step 2 artwork sits high in its panel so the base is never clipped */
.fpq-art[data-art="2"] { align-items: start; padding-top: clamp(6px, 2%, 18px); }
.fpq-art[data-art="2"] .fpq-art-img { max-height: 78%; }

/* ================================================================
   Step 4 - two panes (Product type, then Dosage form)
   ----------------------------------------------------------------
   Only one group shows at a time, so tiles can use the same type
   scale as the option cards on every other step.
   ================================================================ */
.fpq-sub { display: none; }
.fpq-sub.fpq-sub-on { display: block; animation: fpqSubIn .32s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes fpqSubIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fpq-sub.fpq-sub-on { animation: none; } }

/* group heading */
.fpq-tgroup { margin-bottom: 0; }
.fpq-tgroup-head { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 clamp(10px, 1.8vh, 18px); }
.fpq-tgroup-no {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; margin-top: 1px;
    background: var(--t); color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
}
.fpq-tgroup-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fpq-tgroup-tx strong { font-size: clamp(15px, 1.2vw, 17.5px); font-weight: 600; color: var(--navy); line-height: 1.25; }
.fpq-tgroup-tx em { font-style: normal; font-size: clamp(12px, .95vw, 13.5px); color: #8A94A6; line-height: 1.4; }

/* grids */
.fpq-tiles-3 { grid-template-columns: repeat(3, 1fr); }
.fpq-tiles-4 { grid-template-columns: repeat(4, 1fr); }
/* 7 tiles as 4 + 3: a 12-column track lets each row fill the width evenly,
   which keeps the group to two rows so nothing scrolls */
.fpq-tiles-43 { grid-template-columns: repeat(12, 1fr); }
.fpq-tiles-43 > .fpq-tile { grid-column: span 3; }
.fpq-tiles-43 > .fpq-tile:nth-child(n+5) { grid-column: span 4; }
.fpq-slide[data-step="6"] .fpq-tiles { gap: clamp(9px, 1.3vh, 14px); }

/* tiles - same type scale as the option cards elsewhere */
.fpq-slide[data-step="6"] .fpq-tile-in {
    min-height: 0; gap: 8px; padding: clamp(13px, 1.9vh, 20px) 10px; justify-content: flex-start;
}
.fpq-slide[data-step="6"] .fpq-tile-img,
.fpq-slide[data-step="6"] .fpq-tile-ico svg { width: clamp(46px, 5.4vh, 64px); height: clamp(46px, 5.4vh, 64px); }
.fpq-slide[data-step="6"] .fpq-tile-tx {
    font-size: clamp(14px, 1.12vw, 16px); font-weight: 500; line-height: 1.28;
}
.fpq-tile-sub {
    font-size: clamp(11px, .88vw, 12.5px); color: #97A1B0; line-height: 1.35; display: block; margin-top: 2px;
}
.fpq-tile.fpq-sel .fpq-tile-sub { color: #7C8899; }

/* tighter only where the window genuinely is */
.fpq.fpq-h-sm .fpq-slide[data-step="6"] .fpq-tile-in { padding: 11px 9px; gap: 6px; }
.fpq.fpq-h-sm .fpq-slide[data-step="6"] .fpq-tile-tx { font-size: 13.4px; }
.fpq.fpq-h-sm .fpq-tile-sub { font-size: 11px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-in { padding: 9px 7px; gap: 5px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-img,
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 40px; height: 40px; }
.fpq.fpq-h-xs .fpq-slide[data-step="6"] .fpq-tile-tx { font-size: 12.6px; }
.fpq.fpq-h-xs .fpq-tile-sub { font-size: 10.4px; }
.fpq.fpq-h-xs .fpq-tgroup-head { margin-bottom: 9px; }

/* narrower screens */
@media (max-width: 1200px) {
    .fpq-tiles-3, .fpq-tiles-4 { grid-template-columns: repeat(3, 1fr); }
    .fpq-tiles-43 > .fpq-tile,
    .fpq-tiles-43 > .fpq-tile:nth-child(n+5) { grid-column: span 4; }   /* 3 per row */
}
@media (max-width: 900px) {
    .fpq-tiles-3, .fpq-tiles-4 { grid-template-columns: repeat(2, 1fr); }
    .fpq-tiles-43 > .fpq-tile,
    .fpq-tiles-43 > .fpq-tile:nth-child(n+5) { grid-column: span 6; }   /* 2 per row */
    .fpq-slide[data-step="6"] .fpq-tile-img,
    .fpq-slide[data-step="6"] .fpq-tile-ico svg { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
    .fpq-tiles-3, .fpq-tiles-4 { grid-template-columns: 1fr; }
    .fpq-tiles-43 > .fpq-tile,
    .fpq-tiles-43 > .fpq-tile:nth-child(n+5) { grid-column: span 12; }  /* 1 per row */
}