/* About page design layer — /company/about-us.
 *
 * The presentation layer for the `webpages` row whose slug is 'company/about-us'.
 * That row holds every word on the page and is rendered by ContentPage.razor's
 * /{*Slug} catch-all — there is no component for this URL and this redesign does
 * not add one. Nothing in here is content: no text, no links, no image URLs, no
 * numbers. See docs/company-about-us-redesign.sql for the markup this styles and
 * docs/company-about-us.page_html.backup.html for what it replaced.
 *
 * Global CSS, linked from App.razor, so the two rules every sibling page sheet
 * calls out apply here too:
 *
 * 1. Nothing confines these rules to this page, so every selector is qab-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global as well, hence the prefix on those — they must
 *    not collide with the compiled Tailwind bundle or with the qh-, qp-, qct-,
 *    qco-, qcp-, qps-, qsm- and qfh- animations the other page sheets declare.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is why the page can be styled entirely
 * from here rather than from utility classes in the CMS textarea: the bundle the
 * site serves is a prebuilt Next.js artefact, so it contains only the utilities
 * that build emitted, and a class invented in the textarea would not exist at
 * runtime. The page this replaces was authored against those utilities and was
 * already paying for it — `py-18` on its closing band is one of the classes that
 * never existed, which is why that band's padding never matched its neighbour's.
 *
 * `boxed-container` IS from the bundle and is used deliberately: it is the site's
 * own container (max-width and gutters stepping 1200 → 1400 → 1600px), so this
 * page's content column lines up with the header, the footer and every other
 * page. Do not replace it with a max-width of this sheet's own.
 *
 * THE BUTTONS IN THE CLOSING BAND ARE NOT STYLED HERE. They are `.qh-btn` and
 * `.qh-btn-ghost` from css/pages/home.css, which App.razor links on every page —
 * the site's primary call-to-action pair, copied from the payroll-services hero
 * exactly as /company/contact's closing band copies it. This sheet only centres
 * the pair and undoes the CMS wrapper's inherited line-height and underline;
 * restyling .qh-btn here would change the home page too.
 *
 * The hero's Events button is the exception and is styled here in full, under
 * .qab-hero__btn. It is a plain <a> rather than one of the shared classes, for
 * the reason set out above that rule.
 *
 * PALETTE. The logo ramp the pricing, payroll, careers, CPCM, contact and
 * site-map sheets already share — #4f46e5 (indigo, primary) → #7c3aed (violet) →
 * #a22dea (magenta-violet). Exactly one surface is dark, the closing band; the
 * hero is a pale violet wash and everything between alternates white against a
 * very light tint so the eight sections read as a rhythm rather than as eight
 * differently-coloured pages stacked up.
 *
 * WHAT HAPPENED TO THE COLOURS. The old page gave nearly every card its own
 * pastel gradient — six hues in "Why Companies Choose QHRM", six more in the
 * numbers strip, five in the values row, four coloured left rails under
 * "Trusted by" — which made lists of equal-weight items read as lists of
 * different kinds of thing, and left no colour spare to mark what actually
 * matters. Here the hue survives only as a small tinted tile and a hairline on an
 * otherwise white card, driven by one modifier class per hue (.qab-hue--*) that
 * sets four custom properties. Adding a seventh card means adding a class to the
 * markup, not a rule to this sheet.
 */

/* ── page shell ─────────────────────────────────────────────────────────
 *
 * ContentPage wraps every stored page in a div carrying
 * `style="color:#1a1a1a;line-height:1.8"` inline. Every CMS page depends on that
 * pair and it would otherwise cascade into every heading, stat and card here.
 * Both are re-declared on .qab-page so this page's type inherits from the page
 * root down rather than from the wrapper. Do not remove them. */
.qab-page {
    color: #14103a;
    line-height: 1.6;
    background: #fbfbfe;
}

/* Visually hidden, still read out. */
.qab-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── shared section furniture ───────────────────────────────────────────
 *
 * Eight sections, each with a heading and most with a lede under it. One rule
 * each rather than eight near-copies with drifting sizes — which is what the
 * page had: four different `text-2xl md:text-3xl` variants, two of them also
 * carrying `lg:text-4xl` and two not, so section headings changed size down the
 * page for no reason a reader could see. */
.qab-section {
    position: relative;
    padding: 84px 0;
}

/* The tint alternates with white so consecutive sections separate without a
 * rule between them. */
.qab-section--tint {
    background:
        radial-gradient(760px 460px at 6% 0%, rgba(79, 70, 229, .07), transparent 62%),
        radial-gradient(700px 440px at 94% 100%, rgba(162, 45, 234, .06), transparent 60%),
        #f8f7fe;
}

.qab-section--plain {
    background: #fff;
}

.qab-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

/* Left-aligned heading block, for the two-column story section. */
.qab-head--left {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.qab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e7e4fb;
    box-shadow: 0 10px 26px -20px rgba(79, 70, 229, .55);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .01em;
    color: #4f46e5;
    line-height: 1;
}

.qab-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #4f46e5, #a22dea);
    animation: qab-pulse 2.4s ease-in-out infinite;
}

@keyframes qab-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .45; transform: scale(.82); }
}

.qab-title {
    margin: 18px 0 0;
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.022em;
    color: #14103a;
}

/* The one heading allowed to carry the ramp: the story section's, which opens
 * the page's argument. Using it on all eight would make none of them lead. */
.qab-title--accent {
    background: linear-gradient(100deg, #4f46e5, #7c3aed 46%, #a22dea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qab-lede {
    margin: 16px 0 0;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.7;
    color: #5b5673;
}

.qab-head .qab-lede {
    margin-left: auto;
    margin-right: auto;
}

/* ── hero ───────────────────────────────────────────────────────────────
 *
 * The banner image, and nothing else — that is all this section has ever held.
 * It used to sit alone in a `min-h-[80vh]` flex box, so on a laptop it opened the
 * page with roughly half a screen of empty white above and below a centred
 * photograph.
 *
 * FULL BLEED, SQUARE CORNERS, NO FRAME. The image runs the whole width of the
 * viewport and out past `boxed-container`'s gutters, so it is not wrapped in one
 * — the <img> is a direct child of the section. No border-radius, no padding, no
 * card behind it and no glow: anything of that kind puts an edge back on a banner
 * that is meant not to have one. The aspect ratio is the file's own (16:9), so
 * the banner is as tall as the window is wide ÷ 1.78 and nothing is ever cropped.
 *
 * There is no wash behind it either, because none of it would be visible. */
.qab-hero {
    position: relative;
    overflow: hidden;
    background: #f7f5ff;
}

/* A hairline of the ramp closing the band off from the section below it. */
.qab-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .28) 30%, rgba(162, 45, 234, .28) 70%, transparent);
}

.qab-hero__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* ── the hero's Events button ───────────────────────────────────────────
 *
 * Overlaid on the banner rather than placed under it, which is what keeps the
 * image full-bleed: a button in its own band below would reintroduce the
 * letterbox of white the old `min-h-[80vh]` hero had.
 *
 * IT IS STYLED HERE RATHER THAN REUSING .qh-btn, which is what the closing band
 * does. The two are not the same kind of thing: .qh-btn is the site's primary
 * conversion CTA, the pair that appears on the home page, the payroll hero and
 * the contact band, all pointing at a trial or a demo. This is a navigation link
 * to /events. Giving it the same class would make it indistinguishable from
 * those to anything selecting on it — GTM conversion triggers included. The look
 * below is a deliberate match for the compiled bundle's `.startFreeTrial` pill,
 * so the page still reads as one design; only the class differs. */
.qab-hero__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(18px, 5vw, 56px);
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

/* Matching .startFreeTrial from the compiled bundle: same radius, padding,
 * weight, border and gradient, so the two are the same object in two places. */
.qab-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 100%;
    padding: 1rem 1.75rem;
    border: 1px solid #c0b5ec;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, .35), 0 4px 6px -2px rgba(79, 70, 229, .2);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.qab-hero__btn:hover,
.qab-hero__btn:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    background: linear-gradient(135deg, #4338ca, #6d28d9);
    box-shadow: 0 16px 32px -4px rgba(79, 70, 229, .4), 0 6px 10px -2px rgba(79, 70, 229, .25);
}

.qab-hero__btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 3px;
}

.qab-hero__btn i {
    font-size: .95em;
    transition: transform .2s;
}

.qab-hero__btn:hover i {
    transform: translateX(3px);
}

/* ── our story ──────────────────────────────────────────────────────────
 *
 * Copy on one side, the photograph on the other. The photograph leads on a
 * phone, which is the order the old markup asked for with its order-1/order-2
 * pair, and is kept here. */
.qab-story__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
}

.qab-story__media {
    order: 1;
}

.qab-story__copy {
    order: 2;
}

.qab-story__frame {
    position: relative;
    border-radius: 24px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ece9fc;
    box-shadow: 0 44px 90px -58px rgba(52, 32, 120, .65);
}

.qab-story__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.qab-story__body {
    margin-top: 22px;
}

.qab-story__body p {
    margin: 0 0 16px;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.78;
    color: #5b5673;
}

.qab-story__body p:last-child {
    margin-bottom: 0;
}

/* The one phrase the copy marks out for itself. It was a tinted inline pill and
 * still is; only the tint and the radius changed. */
.qab-mark {
    /* The phrase is long enough to wrap on a phone. Without this the tint and
     * the rounding are drawn once around the whole run, so the second line
     * loses its left radius and the first loses its right. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 2px 7px;
    border-radius: 7px;
    font-weight: 700;
    color: #4f46e5;
    background: rgba(79, 70, 229, .1);
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .16);
}

/* ── the numbers strip ──────────────────────────────────────────────────
 *
 * Six figures. auto-fit rather than the old six explicit breakpoint columns, so
 * the row reflows 6 → 3 → 2 → 1 on its own and there is no width at which one
 * orphan sits on its own line. */
.qab-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 18px;
}

.qab-stat {
    position: relative;
    overflow: hidden;
    padding: 26px 20px 24px;
    border-radius: 18px;
    text-align: center;
    background: #fff;
    border: 1px solid #eceafb;
    box-shadow: 0 22px 48px -42px rgba(52, 32, 120, .6);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.qab-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qab-a, #4f46e5), var(--qab-b, #a22dea));
    opacity: .85;
}

.qab-stat:hover {
    transform: translateY(-3px);
    border-color: var(--qab-edge, rgba(79, 70, 229, .3));
    box-shadow: 0 34px 62px -40px var(--qab-glow, rgba(79, 70, 229, .55));
}

.qab-stat__value {
    margin: 0;
    font-size: clamp(28px, 2.8vw, 36px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--qab-a, #4f46e5);
    font-variant-numeric: tabular-nums;
}

.qab-stat__label {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.5;
    color: #78738f;
}

/* ── the card grid ──────────────────────────────────────────────────────
 *
 * One card and one grid, shared by "Why Companies Choose QHRM" (six), "Our
 * Values" (five) and "A Complete HR Partner" (four). They were three separate
 * card designs with three different paddings, three type scales and, between
 * them, seventeen pastel gradients. They are lists of equal-weight items and now
 * look like it. */
.qab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Four cards, not six or five. Left on the shared 3-up grid the fourth card
 * lands alone on a second row with two thirds of the row empty beside it, so
 * this variant skips the 3-up step and goes 2 → 4. */
.qab-grid--4 {
    grid-template-columns: 1fr;
}

.qab-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 28px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eceafb;
    box-shadow: 0 22px 48px -42px rgba(52, 32, 120, .6);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.qab-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qab-a, #4f46e5), var(--qab-b, #a22dea));
    opacity: 0;
    transition: opacity .28s;
}

.qab-card:hover {
    transform: translateY(-4px);
    border-color: var(--qab-edge, rgba(79, 70, 229, .3));
    box-shadow: 0 36px 66px -40px var(--qab-glow, rgba(79, 70, 229, .55));
}

.qab-card:hover::before {
    opacity: .9;
}

/* The tinted tile is the whole of the card's colour. It carries a Font Awesome
 * glyph from the sheet App.razor already loads site-wide — no new request. */
.qab-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--qab-a, #4f46e5);
    background: var(--qab-wash, rgba(79, 70, 229, .1));
    border: 1px solid var(--qab-edge, rgba(79, 70, 229, .18));
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.qab-card:hover .qab-card__icon {
    transform: translateY(-2px) scale(1.06);
}

.qab-card__title {
    margin: 18px 0 0;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #14103a;
}

.qab-card__text {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: #5b5673;
}

/* ── mission and vision ─────────────────────────────────────────────────
 *
 * The two statements that head the values section. Larger than a value card and
 * on the tint's opposite surface, so the pair reads as a preamble to the five
 * rather than as two more of them. */
.qab-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 64px;
}

.qab-pillar {
    position: relative;
    overflow: hidden;
    padding: 34px 30px 36px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e9e5fb;
    box-shadow: 0 34px 72px -50px rgba(52, 32, 120, .65);
}

.qab-pillar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--qab-a, #4f46e5), var(--qab-b, #a22dea));
}

.qab-pillar__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--qab-a, #4f46e5), var(--qab-b, #a22dea));
    box-shadow: 0 14px 26px -14px var(--qab-glow, rgba(79, 70, 229, .8));
}

.qab-pillar__title {
    margin: 18px 0 0;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.018em;
    color: #14103a;
}

.qab-pillar__text {
    margin: 12px 0 0;
    font-size: 15.5px;
    line-height: 1.72;
    color: #5b5673;
}

/* ── clients ────────────────────────────────────────────────────────────
 *
 * Four named organisations under their sector. The sector was the loud line and
 * the organisation the quiet one, which is backwards — the organisation is the
 * proof. The two have swapped weight. */
.qab-clients {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.qab-client {
    position: relative;
    padding: 22px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eceafb;
    box-shadow: 0 20px 44px -42px rgba(52, 32, 120, .6);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s, box-shadow .28s;
}

.qab-client:hover {
    transform: translateY(-3px);
    border-color: var(--qab-edge, rgba(79, 70, 229, .3));
    box-shadow: 0 30px 56px -40px var(--qab-glow, rgba(79, 70, 229, .5));
}

.qab-client__sector {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--qab-a, #4f46e5);
    background: var(--qab-wash, rgba(79, 70, 229, .1));
}

.qab-client__name {
    margin: 12px 0 0;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.014em;
    color: #14103a;
}

/* The "and 330+ more" line. A footnote to the four above it, so it is centred,
 * small and grey — not a fifth card. */
.qab-note {
    margin: 26px 0 0;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #8a84a6;
}

/* ── industries ─────────────────────────────────────────────────────────
 *
 * Nine of them, so these are the lightest cards on the page: a tinted panel with
 * a hairline, no shadow and no lift. Giving them the same weight as the six
 * "why choose us" cards would make the page's longest list its loudest. */
.qab-industries {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.qab-industry {
    padding: 18px 20px;
    border-radius: 14px;
    background: #faf9fe;
    border: 1px solid #eeecfa;
    transition: background .24s, border-color .24s;
}

.qab-industry:hover {
    background: #fff;
    border-color: rgba(79, 70, 229, .26);
}

.qab-industry__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #14103a;
}

/* A small ramp dot standing in for nine icons nobody would read. */
.qab-industry__name::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #4f46e5, #a22dea);
}

.qab-industry__text {
    margin: 8px 0 0 18px;
    font-size: 13.5px;
    line-height: 1.62;
    color: #6d6889;
}

/* ── faq ────────────────────────────────────────────────────────────────
 *
 * Eight questions, still numbered, still all open. Left as static cards rather
 * than an accordion on purpose: this page is statically server-rendered with no
 * render mode, so a <details> accordion would hide two thirds of the page's
 * answer text behind a click for a crawler that does index it today. */
.qab-faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.qab-faq__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eceafb;
    box-shadow: 0 22px 48px -44px rgba(52, 32, 120, .6);
    transition: border-color .28s, box-shadow .28s;
}

.qab-faq__item:hover {
    border-color: rgba(79, 70, 229, .28);
    box-shadow: 0 30px 58px -42px rgba(79, 70, 229, .45);
}

.qab-faq__num {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 750;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 12px 24px -14px rgba(79, 70, 229, .85);
    font-variant-numeric: tabular-nums;
}

.qab-faq__body {
    min-width: 0;
}

.qab-faq__q {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #14103a;
}

.qab-faq__a {
    margin: 9px 0 0;
    font-size: 14.5px;
    line-height: 1.72;
    color: #5b5673;
}

/* ── closing band ───────────────────────────────────────────────────────
 *
 * The one dark surface on the page.
 *
 * THE BAND IS DARK BECAUSE THE BUTTONS ON IT ARE. It carries `.qh-btn` and
 * `.qh-btn-ghost` from css/pages/home.css, and .qh-btn is a #4f46e5 → #7c3aed
 * gradient. The band this replaces ran indigo-500 → indigo-600 → purple-600,
 * which is the same violet at the same lightness — the primary button sat on it
 * and disappeared, readable only by its shadow. The ramp is taken down into
 * near-navy so the button's own violet is the lightest thing in the area and
 * reads as a raised object. The hue is unchanged; only the lightness moved. This
 * matches what css/pages/contact.css does with the same pair, for the same
 * reason. If this band is ever lightened again, the buttons have to be
 * reconsidered with it. */
.qab-cta {
    position: relative;
    overflow: hidden;
    padding: 86px 0 92px;
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, #16123f 0%, #241a5c 46%, #3c1c6b 100%);
}

.qab-cta__orb {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    filter: blur(70px);
    pointer-events: none;
}

.qab-cta__orb--a { top: -180px; left: 12%; }
.qab-cta__orb--b { bottom: -200px; right: 10%; }

.qab-cta__inner {
    position: relative;
    z-index: 1;
}

.qab-cta__title {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: #fff;
}

.qab-cta__lede {
    margin: 18px auto 0;
    max-width: 660px;
    font-size: clamp(15px, 1.1vw, 17.5px);
    line-height: 1.68;
    color: rgba(255, 255, 255, .84);
}

/* The band's buttons are the home page's, copied verbatim from the
 * /company/payroll-services hero exactly as /company/contact's closing band
 * copies them. `qh-hero__actions` lays them out left-aligned, which is right in
 * a hero and wrong in a centred band, so the centring is the one thing
 * overridden — scoped under .qab-cta so the home page keeps its own alignment.
 * Nothing else about .qh-btn or .qh-btn-ghost is touched anywhere in this sheet;
 * restyling them here would change the home page too. */
.qab-cta .qh-hero__actions {
    justify-content: center;
    margin-top: 34px;
}

/* Defensive, and the only other claim this sheet makes on the pair: the CMS
 * wrapper's inline line-height:1.8 would otherwise stretch them, and the
 * bundle's link styling would underline them inside an <article>. Scoped under
 * .qab-page so no other page is touched. */
.qab-page .qh-btn,
.qab-page .qh-btn-ghost {
    line-height: 1.2;
    text-decoration: none;
}

/* ── columns ────────────────────────────────────────────────────────────
 *
 * Three steps. 640px gets the two-up grids, 900px the story's two columns and
 * the three-up card grid, 1200px the four-up rows. Everything narrower is one
 * column, which is what the single-column defaults above already say. */
@media (min-width: 640px) {
    .qab-grid,
    .qab-clients,
    .qab-industries,
    .qab-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .qab-section {
        padding: 96px 0;
    }

    .qab-story__grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 60px;
    }

    /* Copy leads on desktop, photograph follows — the reverse of the phone
     * order set above, and the order the old markup asked for. */
    .qab-story__media { order: 2; }
    .qab-story__copy  { order: 1; }

    .qab-grid,
    .qab-industries {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Stays 2-up through the 3-up step — see .qab-grid--4. */
    .qab-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qab-faq {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qab-pillar {
        padding: 40px 38px 42px;
    }
}

@media (min-width: 1200px) {
    .qab-clients,
    .qab-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The banner's height is the viewport width ÷ 1.78, so on a phone it is only
 * ~210–290px tall. The button has to come down with it or it sits across a
 * third of the photograph. 700px is where the full-size pill stops looking
 * proportionate to the image behind it. */
@media (max-width: 700px) {
    .qab-hero__btn {
        padding: .7rem 1.15rem;
        font-size: .875rem;
        border-radius: .8rem;
    }
}

/* Small phones: tighten the section rhythm and let the closing buttons stack
 * full-width rather than squeezing two onto a line. */
@media (max-width: 480px) {
    .qab-section {
        padding: 60px 0;
    }

    .qab-cta {
        padding: 62px 0 68px;
    }

    .qab-pillars {
        margin-bottom: 48px;
    }

    .qab-card,
    .qab-faq__item {
        padding: 22px 20px 24px;
    }

    .qab-faq__item {
        gap: 14px;
    }

    .qab-cta .qh-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .qab-page .qh-btn,
    .qab-page .qh-btn-ghost {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qab-eyebrow__dot {
        animation: none;
    }

    .qab-hero__btn,
    .qab-hero__btn i,
    .qab-card,
    .qab-card::before,
    .qab-card__icon,
    .qab-stat,
    .qab-client,
    .qab-faq__item,
    .qab-industry {
        transition: none;
    }

    .qab-card:hover,
    .qab-card:hover .qab-card__icon,
    .qab-stat:hover,
    .qab-client:hover,
    .qab-hero__btn:hover,
    .qab-hero__btn:hover i {
        transform: none;
    }
}

/* ── the hue set ────────────────────────────────────────────────────────
 *
 * Every tinted thing on the page — stat, card, pillar, client — reads its colour
 * from these four properties, so a card changes hue by changing one class and
 * nothing in this sheet has to know which section it is in. Six hues, all pulled
 * toward the logo ramp rather than taken raw from Tailwind's palette: the old
 * page mixed indigo, purple, green, blue, orange, pink, rose, teal, emerald and
 * grey, which is ten hues on one page and no relationship between any of them. */
.qab-hue--indigo {
    --qab-a: #4f46e5;
    --qab-b: #7c3aed;
    --qab-wash: rgba(79, 70, 229, .1);
    --qab-edge: rgba(79, 70, 229, .3);
    --qab-glow: rgba(79, 70, 229, .55);
}

.qab-hue--violet {
    --qab-a: #7c3aed;
    --qab-b: #a22dea;
    --qab-wash: rgba(124, 58, 237, .1);
    --qab-edge: rgba(124, 58, 237, .3);
    --qab-glow: rgba(124, 58, 237, .55);
}

.qab-hue--magenta {
    --qab-a: #a22dea;
    --qab-b: #d946ef;
    --qab-wash: rgba(162, 45, 234, .1);
    --qab-edge: rgba(162, 45, 234, .3);
    --qab-glow: rgba(162, 45, 234, .5);
}

.qab-hue--blue {
    --qab-a: #2563eb;
    --qab-b: #06b6d4;
    --qab-wash: rgba(37, 99, 235, .1);
    --qab-edge: rgba(37, 99, 235, .3);
    --qab-glow: rgba(37, 99, 235, .5);
}

.qab-hue--teal {
    --qab-a: #0d9488;
    --qab-b: #22c55e;
    --qab-wash: rgba(13, 148, 136, .1);
    --qab-edge: rgba(13, 148, 136, .3);
    --qab-glow: rgba(13, 148, 136, .45);
}

.qab-hue--amber {
    --qab-a: #d97706;
    --qab-b: #f59e0b;
    --qab-wash: rgba(217, 119, 6, .1);
    --qab-edge: rgba(217, 119, 6, .3);
    --qab-glow: rgba(217, 119, 6, .45);
}