/* XtraFreshhh dashboard: only how this dashboard lays its pages out. Every part's look (glass, pills, tags, fields,
   switches, rows, tiles, sheets) is the core's, in the six core styles; nothing here sets a colour of its own, only
   the core's tokens. No style attributes anywhere (strict CSP): run-time values go through the core's data-sv. */
[data-page] > .p3-sec + .p3-sec, [data-page] > .xf-cards + .p3-sec, [data-page] > .p3-rows + .p3-sec { margin-top: 26px; }
.dash .p3-sec { margin-top: 4px; }
.xf-d10 { --d: .10s; } .xf-d14 { --d: .14s; } .xf-d18 { --d: .18s; } .xf-d22 { --d: .22s; } .xf-d26 { --d: .26s; }
.p3-rows.xf-pad8 { padding: 8px; }
.dash-bar-wrap > .p3-vbar.xf-bar-v { height: 100%; }

.xf-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 2px 18px; }
.xf-bar .field { margin: 0; }
.xf-grow { flex: 1 1 240px; min-width: 0; }
.xf-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.xf-inline { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-text); color: var(--ink2); }
.xf-inline select { width: auto; min-width: 150px; }
.xf-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.xf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.xf-form { display: flex; flex-direction: column; gap: 12px; }
.xf-form .field { margin: 0; }
.xf-err:empty { display: none; }
.xf-err { color: var(--red); }
.xf-box { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.xf-box > fieldset { width: 100%; }

/* cards: requests, cleaners, connections */
.xf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.xf-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.xf-card h3 { margin: 0; font: 600 18px/1.25 var(--font-head); overflow-wrap: anywhere; }
.xf-card p { margin: 0; }
.xf-card .xf-line { margin-top: 4px; }
.xf-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14.5px; }
.xf-kv dt { color: var(--ink2); }
.xf-kv dd { margin: 0; overflow-wrap: anywhere; }
.xf-price { font: 600 22px/1.2 var(--font-head); }
.xf-slot { padding: 10px 12px; border-radius: 14px; background: rgba(var(--tint), .35); box-shadow: inset 0 0 0 1px var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.xf-slot b { font-weight: 600; }
.xf-alts { display: flex; flex-direction: column; gap: 8px; }
.xf-alts .xf-slot { cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; }
.xf-alts .xf-slot[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--deep); }

/* the Calendar week */
.xf-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.xf-day { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 140px; }
.xf-day h3 { margin: 0 2px; font: 600 13px/1.3 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.xf-day.today h3 { color: var(--at); }
.xf-job { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(var(--tint), .4); box-shadow: inset 0 0 0 1px var(--line-soft); text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.xf-job b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.xf-job span { font-size: 12.5px; color: var(--ink2); overflow-wrap: anywhere; }
.xf-job.done { opacity: .72; }
.xf-job.cancelled { opacity: .5; text-decoration: line-through; }
.xf-job.none { box-shadow: inset 0 0 0 1.5px var(--amber, var(--late)); }
.xf-hol { font-size: 12.5px; color: var(--ink2); padding: 4px 8px; }
@media (max-width: 1099px) { .xf-week { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .xf-day { min-height: 0; } }

/* the customer panel and settings */
.xf-panel { display: flex; flex-direction: column; gap: 18px; }
.xf-panel fieldset { width: 100%; }
.xf-tabs { margin: 0 0 18px; }
.xf-set { display: flex; flex-direction: column; gap: 18px; }
.xf-set fieldset { display: flex; flex-direction: column; gap: 12px; }
.xf-set .p3-switch { align-self: flex-start; }
.xf-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.xf-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.xf-tpl button { padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 6px; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 18px; }
.xf-tpl button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--deep); }
.xf-tpl-mini { height: 96px; border-radius: 10px; background: rgba(var(--tint), .5); box-shadow: inset 0 0 0 1px var(--line-soft); display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.xf-tpl-mini i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.xf-tpl-mini i.w60 { width: 60%; } .xf-tpl-mini i.w40 { width: 40%; } .xf-tpl-mini i.hd { height: 12px; width: 50%; background: var(--deep); }
.xf-tpl-mini.fresh i.hd { width: 100%; height: 18px; } .xf-tpl-mini.compact { gap: 3px; } .xf-tpl-mini.compact i { height: 4px; }
.xf-frame { width: 100%; height: 560px; border: 0; border-radius: 14px; background: var(--solid); box-shadow: inset 0 0 0 1px var(--line-soft); }
@media (max-width: 599px) { .xf-frame { height: 480px; } .xf-two { grid-template-columns: minmax(0, 1fr); } }
.xf-note { font-size: 14px; color: var(--ink2); }
.xf-out { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.xf-avail { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.xf-avail input { min-width: 0; }
.xf-avail .p3-tick { margin: 0; }
.xf-msgs { display: flex; flex-direction: column; gap: 14px; }
.xf-msg { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.xf-msg:last-child { border-bottom: 0; padding-bottom: 0; }
.xf-msg .field { max-width: 180px; margin: 0; }
.xf-msg .p3-switch { align-self: flex-start; }
a.dash-day { text-decoration: none; }
.xf-barbox { padding: 12px 14px; border-radius: 22px; }
.xf-wide { flex: 1 0 100%; margin: 0; }

/* 1.1.0: the pages on the core's parts. A list page (the core's listPage) fills its host; what comes after it (quotes,
   the "please check" list, the invoice tools) sits under it with P3's section spacing. */
.xf-listhost { min-width: 0; }
.xf-after { margin-top: 26px; }
.xf-checks .p3-row-tx b .p3-chip.count { margin-left: 6px; vertical-align: 1px; }
.xf-more { margin-top: 12px; }
.xf-card.xf-bare { padding: 0; }
.xf-panel .p3-sec { margin-top: 6px; }
/* Night: words that stood straight on the moving light get a ground under them (contrast over the light, AA) */
html[data-theme="dark"] .ap-cal .cal-date.today { background: color-mix(in srgb, var(--ground) 94%, transparent); }
html[data-theme="dark"] .ap-cal .cal-date.today .w { color: var(--ink); }
.xf-notebox { margin: 0; padding: 12px 16px; border-radius: 18px; }
/* Settings cards as P3 draws them: 18 px all round at every width (P3's html[data-ui] .card wins over its 20 px 22 px;
   the core 2.1.0 copied the 20 px 22 px rule: a core fix to make) */
html[data-ui] .p3-page .card.set-card { padding: 18px; }

/* core 2.1.1, the de-AI rules (A19), on her own pages, as the core fixed its own:
   - no card inside a card: a pane inside a card keeps its tint without an edge of its own (the best slot on a request
     card; the small drawing of each invoice template inside the Settings card);
   - nested corners: an element in its parent's corner takes the parent's radius minus the padding (the template
     choices in the Settings card: 24 − 18 = 6 px), or the parent's corner clears it (a Connections card at 20 px, so
     its icon, 21 px in from the card's edge, sits outside the corner, as the core did for Today's side cards). */
.glass.xf-card .xf-slot { box-shadow: none; }
#conList .xf-card { border-radius: var(--r-card-sm); }
html[data-ui] .p3-page .set-card .set-tpl-i { border-radius: var(--r-2xs); }
.set-card .set-tpl-mini { box-shadow: none; }
/* online booking (1.2.0): the payment line on a confirmed request, its history */
.xf-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; }
.xf-hist summary { cursor: pointer; font-size: 14px; color: var(--ink2); padding: 4px 0; }
.xf-hist ul { margin: 6px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* 1.4.0: a page tour's step: the core's glass popover (.p3-pop), placed beside the part it is about (layout only) */
.p3-pop.xf-tour { position: fixed; z-index: 70; left: var(--xf-tx, 16px); top: var(--xf-ty, 16px); width: min(340px, calc(100vw - 32px)); }
.p3-pop.xf-tour p { margin: 0; }
@media (max-width: 759px) { .p3-pop.xf-tour { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(104px + env(safe-area-inset-bottom)); } }
/* 1.6.0: the email editor's preview, at phone or desktop width; locked lines greyed (muted words, still AA) */
.xf-em-frame { display: flex; justify-content: center; }
.xf-em-frame[data-w="phone"] .xf-frame { width: 390px; max-width: 100%; }
.xf-em-frame[data-w="desktop"] .xf-frame { width: 100%; }
.xf-em-text { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; max-height: 560px; overflow: auto; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-soft); background: var(--solid); color: var(--ink); width: 100%; }
.xf-locked .p3-row-in { background: var(--line-soft); border-radius: 10px; }
.xf-em .xf-form { min-width: 0; }
/* 2.4.0: "Add the day" (Customers, under Please check) and its list in the import's preview */
.xf-addday .p3-row > form { display: grid; gap: 8px; padding: 12px 14px; width: 100%; }
.xf-addday .p3-row > form > .small { display: block; }
ul.xf-addday:not(.p3-rows) { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
#impFiles p { margin: 4px 0 0; }
/* 2.4.1 (contrast over the light): Try it yourself's lead line sits on the card's glass with its five steps, not on
   the moving light; her Gmail state tag on Messages (at Night) and every amber tag get the glass's own tint under their colour (as the core's
   calendar does for its markers), so the light never shows through it */
.xf-tryit-lead { margin: 4px 10px 6px; }
html[data-ui] .tag.amber, html[data-ui][data-theme="dark"] [data-msg-bar] .tag { background: linear-gradient(var(--amberbg), var(--amberbg)), rgba(var(--tint), .9); }
html[data-ui][data-theme="dark"] [data-msg-bar] .tag.green { background: linear-gradient(var(--greenbg), var(--greenbg)), rgba(var(--tint), calc(var(--ga) + .12)); }
/* 2.4.1: Business, Payments and Accounts: labelled bars and month columns (the core's tokens only) */
.xf-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.xf-bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.xf-bars-l { font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.xf-bars-t { height: 10px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.xf-bars-t i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--ink); }
.xf-bars-v { font-size: 13px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.xf-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; }
.xf-months li { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.xf-months-c { height: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.xf-months-c i { display: block; width: 70%; max-width: 28px; border-radius: var(--r-2xs) var(--r-2xs) 0 0; background: var(--ink); }
.xf-months-m { font-size: 12px; color: var(--ink2); }
.xf-months-v { font-size: 11px; font-weight: 700; color: var(--ink2); writing-mode: vertical-rl; transform: rotate(180deg); max-height: 64px; }
.xf-grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.xf-ring { font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1; }
.xf-ck-room { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
@media (max-width: 520px) { .xf-months-v { display: none; } .xf-bars li { grid-template-columns: minmax(0, 1fr) auto; } .xf-bars-t { grid-column: 1 / -1; grid-row: 2; } }
/* 2.4.1: Messages' channel row: a little room under it, and it scrolls sideways on a phone rather than squeezing */
[data-channels] { margin-bottom: 16px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
[data-channels] .rec-tab { flex: 0 0 auto; }
/* 2.4.1: a row that is a button (Checklists, Customer portal) reads as a row: the page's own text colour and type */
button.p3-row-in { color: inherit; font: inherit; background: none; border: 0; width: 100%; text-align: inherit; cursor: pointer; }
/* 2.4.1: Today's Connections list: its second lines in the core's ink (they sit where the light is brightest at 390) */
[data-conns] .p3-row-tx > span { color: var(--ink); }
/* core 2.4.0 took the Night veil off quiet buttons beside a section's title (no box behind words at Night); the two that
   stand where the light is brightest (a section head's own button, Today's What needs doing link) get the core's halo
   round their letters, as its titles have: still no box */
html[data-ui][data-theme="dark"] :is(.p3-sec-head .pill:not(.primary), .nhead > .btn:not(.primary)) { text-shadow: var(--halo); }
/* round 13b: Price it (/price/), as her demo's (quote-v2.css): the service pictures as tiles, the rooms or hours, how
   often and the extras; the price on the right (it stays in view on a wide screen while the left scrolls); then the
   quotes with the open one beside them. On the core's glass, ink and buttons, Day and Night. */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; margin-top: 6px; }
.pr-calc, .pr-out { padding: 18px; border-radius: 26px; min-width: 0; }
.pr-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pr-svc { position: relative; display: block; padding: 0; border: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; cursor: pointer; background: color-mix(in srgb, var(--ink) 8%, transparent); color: #fff; font: inherit; text-align: left; transition: transform .25s var(--ease-out), box-shadow .25s; }
.pr-svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.pr-svc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 36, .05) 30%, rgba(10, 30, 36, .88)); }
/* the name on its own dark backing, so it reads AA over any part of the picture */
.pr-svc-n { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); z-index: 1; padding: 4px 8px; border-radius: 10px; background: rgba(8, 24, 28, .84); font-weight: 700; font-size: 14px; line-height: 1.2; color: #fff; }
.pr-svc:hover { transform: translateY(-2px); } .pr-svc:hover img { transform: scale(1.04); }
.pr-svc.on { box-shadow: 0 0 0 3px var(--btn), 0 10px 24px rgba(18, 48, 58, .22); }
.pr-svc:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pr-ins { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-bottom: 16px; }
.pr-step { display: flex; align-items: center; gap: 10px; }
.pr-sl { font-weight: 600; }
.pr-sc { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pr-sb { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btnInk); cursor: pointer; transition: transform .15s; }
.pr-sb:active { transform: scale(.92); } .pr-sb:disabled { opacity: .35; cursor: default; }
.pr-sb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pr-sv { min-width: 52px; text-align: center; font-weight: 700; font-size: 19px; }
.pr-often { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.pr-often .pill.on, .pr-chip.on { background: var(--btn); color: var(--btnInk); border-color: transparent; }
.pr-xl { margin: 0 0 8px; font-weight: 600; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.pr-chip small { font-size: 13px; white-space: nowrap; }
.pr-chip span { text-align: left; }
.pr-chip:active { transform: scale(.96); }
.pr-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pr-out { position: sticky; top: calc(var(--topbar-h, 84px) + 12px); }
.pr-oh { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pr-oh img { width: 64px; height: 80px; object-fit: cover; border-radius: 12px; flex: none; }
.pr-oh p { margin: 0; }
.pr-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 8px; }
.pr-price { font-weight: 600; font-size: clamp(38px, 5vw, 52px); line-height: 1; letter-spacing: -.01em; }
.pr-per { color: var(--ink2); font-size: 14px; }
.pr-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.pr-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.pr-lines li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pr-lines .money { white-space: nowrap; }
.pr-lines .was { color: var(--ink2); }
.pr-lines .tot { border-bottom: 0; font-weight: 700; font-size: 16px; }
.pr-own .field { margin-bottom: 8px; }
.pr-ownrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-ownrow input { flex: 1 1 120px; min-width: 0; max-width: 180px; }
.pr-pound { font-weight: 700; }
.pr-warn { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pr-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-qs { margin-top: 26px; }
.pr-qh { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.pr-srch { flex: 0 1 380px; display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 2px 14px; }
.pr-srch input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; }
.pr-srch:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.pr-qsplit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pr-qsplit.open { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.pr-qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; }
.pr-qsplit.open .pr-qlist { grid-template-columns: minmax(0, 1fr); }
.pr-qc { display: grid; gap: 4px; padding: 14px 16px; border: 0; border-radius: 20px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s; min-width: 0; }
.pr-qc:hover { transform: translateY(-2px); }
.pr-qc.sel { box-shadow: inset 0 0 0 2px var(--btn); }
.pr-qc:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pr-qt { display: flex; justify-content: space-between; gap: 10px; } .pr-qt b { min-width: 0; overflow-wrap: anywhere; } .pr-qt .money { font-weight: 700; white-space: nowrap; }
.pr-qtags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-qopen { padding: 18px; border-radius: 24px; min-width: 0; }
.pr-oq-hd { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pr-oq-hd h3 { margin: 2px 0; font-size: 22px; font-weight: 600; }
.pr-oq-hd .eyebrow, .pr-oq-hd p { margin: 0; overflow-wrap: anywhere; }
.pr-note { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pr-to { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.pr-linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pr-people { margin: 0 0 12px; }
@media (max-width: 1100px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } .pr-out { position: static; } }
@media (max-width: 899px) { .pr-qsplit.open { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pr-calc, .pr-out, .pr-qopen { padding: 14px; border-radius: 20px; }
  .pr-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pr-svc { aspect-ratio: 16 / 10; }
  .pr-svc-n { font-size: 13px; }
  .pr-step { width: 100%; justify-content: space-between; }
  .pr-srch { flex: 1 1 100%; }
  .pr-acts .pill { flex: 1 1 auto; justify-content: center; text-align: center; }
}
html[data-motion="reduced"] .pr-svc, html[data-motion="reduced"] .pr-svc img, html[data-motion="reduced"] .pr-qc { transition: none; }