/* ==========================================================================
   Kryus Ventures — Packaged Solutions pages
   File: solutions.css
   Loads AFTER theme style.css + custom.css. Every class is prefixed `ps-`
   so nothing here can collide with existing theme blocks.
   Reuses theme tokens: --kv-primary, --kv-primary-dark, --kv-accent,
   --kv-gradient-hero, --kv-container-max, --kv-h2, --kv-h3.
   ========================================================================== */

:root {
    --ps-gold: #f0a500;
    --ps-gold-soft: #fff4db;
    --ps-red: #9f1717;
    --ps-red-soft: #fbeceb;
    --ps-ink: #211919;
    --ps-muted: #756d6d;
    --ps-line: #ebe6e4;
    --ps-paper: #f7f5f3;
    --ps-card: #ffffff;
    --ps-radius: 18px;
    --ps-radius-sm: 12px;
    --ps-gold-gradient: linear-gradient(135deg, hsl(40 85% 55%), hsl(28 85% 47%));
    --ps-dark: radial-gradient(900px 420px at 88% -10%, rgba(176, 40, 24, .38), transparent 65%),
               linear-gradient(180deg, #211211, #150b0a);
}

/* ---------- Generic building blocks ---------- */
.ps-section { padding: 5rem 0; }
.ps-section--paper, .ps-bg-paper { background: var(--ps-paper); }
.ps-bg-tint { background: #f2efed; }
.ps-bg-white { background: #fff; }
/* the closing dark panel sits flush under a soft-grey section; after any other section it gets its own breathing room */
.ps-cta-section { padding: 4rem 0 5rem; }
.ps-prose p { margin: 0 0 1rem; color: var(--ps-muted); font-size: 1rem; line-height: 1.75; max-width: 58ch; }
.ps-section--tight { padding: 3.5rem 0; }

.ps-eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    margin: 0 0 1rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ps-red);
}
.ps-eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--ps-gold); }
.ps-eyebrow--gold { color: var(--ps-gold); }
.ps-eyebrow--plain::before { display: none; }

.ps-h2 {
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    line-height: 1.1; letter-spacing: -.02em;
    color: var(--ps-ink); margin: 0 0 .85rem;
}
.ps-lead { color: var(--ps-muted); font-size: 1rem; line-height: 1.75; max-width: 58ch; margin: 0 0 1rem; }
.ps-on-dark .ps-h2 { color: #fff; }
.ps-on-dark .ps-lead { color: rgba(255, 255, 255, .72); }

.ps-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .875rem; font-weight: 600; color: var(--ps-red);
}
.ps-link svg { width: 14px; height: 14px; transition: transform .25s ease; }
a:hover > .ps-link svg, a.ps-link:hover svg { transform: translateX(3px); }

/* Gold button variant used on dark surfaces (matches the approved design) */
.btn.ps-btn-gold { background: var(--ps-gold-gradient); color: #fff; border: 0; }
.btn.ps-btn-gold:hover { box-shadow: 0 6px 18px rgba(217, 122, 12, .38); background: var(--ps-gold-gradient); }

/* Active item in the main nav */
.menu-item.is-current > a::after { width: 100%; }

:focus-visible { outline: 2px solid var(--ps-gold); outline-offset: 3px; }

/* ---------- Hero (extends theme .hero-section.hero-dark) ---------- */
.ps-hero { min-height: 78vh; padding-top: 72px; }
.ps-hero .hero-content { width: 100%; margin-top: 0; }
.ps-hero .hero-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    max-width: 17ch; text-wrap: balance;
}
.ps-hero .hero-description { max-width: 46ch; font-size: 1.0625rem; }
.ps-hero__accent { color: var(--ps-gold); }
.ps-hero .hero-bg-overlay {
    background: linear-gradient(90deg, rgba(8, 5, 5, .82) 0%, rgba(8, 5, 5, .45) 55%, rgba(8, 5, 5, .25) 100%),
                linear-gradient(0deg, rgba(8, 5, 5, .55), transparent 40%);
}

/* Hero with the 3-fact bar pinned to the bottom edge */
.ps-hero--facts .hero-title { max-width: 22ch; }
.ps-hero--facts { flex-direction: column; align-items: stretch; justify-content: space-between; padding-top: 0; min-height: 88vh; }
.ps-hero--facts .ps-hero__main { flex: 1; display: flex; align-items: center; padding: 8rem 0 4rem; position: relative; z-index: 2; }
.ps-facts {
    position: relative; z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(10, 6, 6, .58);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ps-facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ps-fact { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem 1.5rem 1.25rem 0; color: #fff; }
.ps-fact + .ps-fact { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 1.5rem; }
.ps-fact svg { flex: none; width: 16px; height: 16px; margin-top: .25rem; color: var(--ps-gold); }
.ps-fact small { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-gold); }
.ps-fact strong { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.4; }

/* ---------- Solutions overview: the four cards ---------- */
.ps-sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ps-sol-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    transition: transform .25s ease, box-shadow .25s ease;
}
a.ps-sol-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(33, 25, 25, .1); }
.ps-sol-card__media {
    position: relative; isolation: isolate; min-height: 200px;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.25rem 1.5rem; color: #fff;
    background-color: #2a1a18;
}
.ps-sol-card__media::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(15, 8, 8, .05) 15%, rgba(15, 8, 8, .85));
}
.ps-sol-card__tag { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-gold); margin-bottom: .25rem; }
.ps-sol-card__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.ps-sol-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.ps-sol-card__body p { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--ps-muted); }
.ps-sol-card__body .ps-link { margin-top: auto; }

/* ---------- Dark band + finder ---------- */
.ps-dark { background: var(--ps-dark); color: #fff; }
.ps-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem 0; }
.ps-band h2 { margin: 0 0 .35rem; font-size: clamp(1.375rem, 2.4vw, 1.75rem); color: #fff; }
.ps-band p { margin: 0; color: rgba(255, 255, 255, .7); font-size: .9375rem; }

.ps-finder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; }

/* progress: one segment per step; each fills with a short animation */
.ps-progress { display: flex; gap: .5rem; margin-top: 2rem; }
/* Lovable: three equal segments (h-1.5), colour fades in over 0.5 s as the visitor moves on */
.ps-progress span { flex: 1; height: 6px; border-radius: 999px; background: #e9e6e2; transition: background-color .5s ease; }
.ps-progress span.is-done { background: #8c1717; }
.ps-finder__side { margin-top: 1.25rem; min-height: 1.5rem; }
.ps-finder__restart { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .875rem; color: var(--ps-muted); transition: color .2s; }
.ps-finder__restart svg { width: 14px; height: 14px; }
.ps-finder__restart:hover { color: var(--ps-red); }

.ps-finder__step-label { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #d97a0c; margin: 0 0 .75rem; }
.ps-finder__question { font-family: var(--ps-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--ps-ink); margin: 0 0 1.5rem; }
.ps-finder__question:focus { outline: none; }
.ps-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ps-option {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; text-align: left; cursor: pointer;
    font: inherit; font-size: .875rem; line-height: 1.43; color: rgba(37, 24, 24, .9);
    background: #fff; border: 1px solid #e9e6e2; border-radius: 12px;
    transition: border-color .2s ease, background-color .2s ease;
}
.ps-option__text strong { display: block; font-weight: 600; }
.ps-option__text small { display: block; margin-top: .125rem; font-size: .75rem; line-height: 1.33; color: var(--ps-muted); }
a.ps-option { text-decoration: none; }
.ps-option svg { flex: none; width: 16px; height: 16px; color: #8c1717; transition: transform .2s ease; }
.ps-option:hover { border-color: rgba(140, 23, 23, .4); background: #f0edea; }
.ps-option:hover svg { transform: translateX(3px); }
.ps-finder__back { margin-top: 1.25rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .875rem; color: var(--ps-muted); }
.ps-finder__back:hover { color: var(--ps-red); }

/* the recommendation card */
.ps-result { background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); overflow: hidden; box-shadow: 0 18px 40px rgba(33, 25, 25, .08); }
.ps-result__media {
    position: relative; isolation: isolate; min-height: 10rem; padding: 1.5rem; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-color: #1d1110; background-image: var(--ps-img); background-size: cover; background-position: center;
}
.ps-result__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 8, 8, .18), rgba(15, 8, 8, .88)); }
.ps-result__label { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ps-gold); }
.ps-result h3 { margin: 0; font-family: var(--ps-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
.ps-result h3:focus { outline: none; }
.ps-result__body { padding: 1.5rem; }
.ps-result__why { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.65; color: #3a2f2d; }
.ps-result__checks { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; }
.ps-result__checks li { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .9rem; color: var(--ps-muted); }
.ps-result__checks svg { flex: none; width: 14px; height: 14px; color: var(--ps-red); }
.ps-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ps-result__contact { font-size: .875rem; font-weight: 600; color: var(--ps-red); text-decoration: none; }
.ps-result__contact:hover { text-decoration: underline; }
.ps-result__meta { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--ps-muted); }
.ps-result__meta svg { width: 14px; height: 14px; }

/* ---------- Why packaged ---------- */
.ps-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; }
.ps-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ps-feature { background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: 1.5rem; }
.ps-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 10px; background: var(--ps-red-soft); color: var(--ps-red); margin-bottom: 1rem; }
.ps-icon svg { width: 18px; height: 18px; }
.ps-feature h3 { font-size: 1rem; margin: 0 0 .35rem; color: var(--ps-ink); }
.ps-feature p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--ps-muted); }

/* ---------- Individual services ---------- */
.ps-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.ps-svc { background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: 1.5rem 1.5rem .5rem; }
.ps-svc__title { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; padding-bottom: .9rem; border-bottom: 2px solid var(--ps-gold); color: var(--ps-ink); }
.ps-svc__item { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ps-line); }
.ps-svc__item:last-child { border-bottom: 0; }
.ps-svc__item > svg:first-child { width: 16px; height: 16px; margin-top: .2rem; color: var(--ps-red); }
.ps-svc__item strong { display: block; font-size: .9375rem; color: var(--ps-ink); }
.ps-svc__item span { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.6; color: var(--ps-muted); }
.ps-svc__item > svg:last-child { width: 14px; height: 14px; margin-top: .3rem; color: #a99f9c; transition: color .2s, transform .2s; }
a.ps-svc__item:hover strong { color: var(--ps-red); }
a.ps-svc__item:hover > svg:last-child { color: var(--ps-red); transform: translate(2px, -2px); }

/* ---------- CTA box ---------- */
.ps-cta { border-radius: 22px; padding: 3rem; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; align-items: center; }
.ps-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 .75rem; }
.ps-cta p:not(.ps-eyebrow) { margin: 0; color: rgba(255, 255, 255, .7); font-size: .9375rem; max-width: 46ch; }
.ps-cta ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.ps-cta li { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: rgba(255, 255, 255, .9); }
.ps-cta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-gold); flex: none; }

/* ==========================================================================
   Performance Assessment page
   ========================================================================== */

/* Overview */
.ps-overview { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; align-items: start; }
.ps-points { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1.75rem; position: relative; display: grid; gap: 1.5rem; }
.ps-points::before { content: ""; position: absolute; left: 4px; top: .6rem; bottom: .6rem; width: 1px; background: #e0d6d3; }
.ps-points li { position: relative; margin: 0; font-size: .9375rem; line-height: 1.75; color: var(--ps-muted); }
.ps-points li::before { content: ""; position: absolute; left: -1.75rem; top: .55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--ps-red); }
.ps-fit { background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: 1.75rem; }
.ps-fit h3 { font-size: 1rem; margin: 0 0 1.25rem; }
.ps-fit ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ps-fit li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem; font-size: .875rem; line-height: 1.6; color: #4a4242; margin: 0; }
.ps-fit li b { font-size: .75rem; font-weight: 700; color: var(--ps-gold); padding-top: .15rem; }

/* Services included — glass panel over image */
.ps-included { position: relative; isolation: isolate; padding: 5rem 0; background-color: #120a09; background-image: var(--ps-img); background-size: cover; background-position: center; color: #fff; }
.ps-included::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 7, 6, .78); }
.ps-glass { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding: 2.5rem; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(24, 14, 13, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ps-glass h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.ps-glass p:not(.ps-eyebrow) { color: rgba(255, 255, 255, .72); font-size: .9375rem; line-height: 1.75; }
.ps-incl-list { list-style: none; margin: 0; padding: 0; }
.ps-incl { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: .5rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.ps-incl:first-child { padding-top: 0; }
.ps-incl b { font-size: .8125rem; color: var(--ps-gold); padding-top: .2rem; }
.ps-incl strong { display: block; font-size: 1rem; }
.ps-incl span { display: block; font-size: .8125rem; color: rgba(255, 255, 255, .62); margin-top: .15rem; }
.ps-incl > svg { width: 14px; height: 14px; margin-top: .35rem; color: rgba(255, 255, 255, .5); transition: transform .2s, color .2s; }
.ps-incl[href]:hover svg { color: var(--ps-gold); transform: translateX(3px); }

/* What we assess */
.ps-assess-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ps-assess { position: relative; overflow: hidden; background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: 1.5rem 1.5rem 2.75rem; }
.ps-assess__n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--ps-gold-soft); color: #c98700; font-size: .75rem; font-weight: 700; margin-bottom: 1rem; }
.ps-assess h3 { font-size: 1rem; margin: 0 0 .4rem; color: var(--ps-ink); }
.ps-assess p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--ps-muted); position: relative; z-index: 1; }
.ps-assess__ghost { position: absolute; right: .75rem; bottom: -.9rem; font-size: 5rem; font-weight: 800; line-height: 1; color: #f5f0ee; z-index: 0; pointer-events: none; user-select: none; }

/* Engagement steps */
.ps-step h3 { font-size: 1rem; margin: 1rem 0 .4rem; color: var(--ps-ink); }

/* Deliverables & outcomes */
.ps-deliver { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.ps-docs { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ps-docs li { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .9375rem; color: rgba(255, 255, 255, .88); margin: 0; }
.ps-docs svg { flex: none; width: 16px; height: 16px; margin-top: .25rem; color: var(--ps-gold); }
.ps-outcomes { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 1.25rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--ps-radius); background: rgba(255, 255, 255, .05); overflow: hidden; }
.ps-outcome { padding: 1.25rem 1.5rem 1.5rem; border-right: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); font-weight: 600; font-size: .9375rem; }
.ps-outcome::before { content: ""; display: block; width: 1.25rem; height: 2px; background: var(--ps-gold); margin-bottom: .75rem; }
.ps-outcome:nth-child(2n) { border-right: 0; }
.ps-outcome:nth-last-child(-n+2) { border-bottom: 0; }

/* Case study */
.ps-case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: center; }
.ps-doc { position: relative; max-width: 17rem; margin: 0 auto; }
.ps-doc::before { content: ""; position: absolute; inset: .75rem -.75rem -.75rem .75rem; background: #7a4a12; border-radius: 12px; }
.ps-doc__page { position: relative; min-height: 18rem; background: #fff; border-radius: 12px; padding: 1.5rem; color: var(--ps-ink); display: flex; flex-direction: column; }
.ps-doc__page svg { width: 18px; height: 18px; color: var(--ps-red); margin-bottom: 1rem; }
.ps-doc__page small { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d97a0c; }
.ps-doc__page strong { font-size: 1.0625rem; line-height: 1.3; margin-top: .35rem; }
.ps-doc__page i { display: block; height: 6px; border-radius: 3px; background: #ece7e5; margin-top: auto; }
.ps-doc__page i + i { margin-top: .5rem; width: 80%; }
.ps-doc__page i:nth-of-type(1) { margin-top: auto; }
.ps-case ul { list-style: none; margin: 1rem 0 1.75rem; padding: 0; display: grid; gap: .6rem; }
.ps-case li { display: flex; gap: .75rem; align-items: center; font-size: .9375rem; color: rgba(255, 255, 255, .88); margin: 0; }
.ps-case li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-gold); flex: none; }
.ps-case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.ps-case__actions .ps-link { color: var(--ps-gold); }

/* Theme FAQ buttons fall back to the browser font; keep Inter */
.faq-question { font-family: inherit; }

/* ---------- Scroll reveal ----------
   Uses the theme's .animate-on-scroll (fade up) + main.js, with .stagger > * delays.
   `.ps-anim` is ours: it protects reduced-motion / no-JS users and keeps card hover snappy. */
.ps-sol-card.ps-anim { transition: opacity .6s ease, transform .6s ease, box-shadow .25s ease; transition-delay: calc(var(--i, 0) * 0.1s); }   /* keep the reveal, the stagger AND the hover effect */
.ps-anim.ps-revealed { transition-delay: 0s; }                                                       /* stagger only applies to the first reveal */
.ps-sol-card.ps-revealed { transition: transform .25s ease, box-shadow .25s ease; }
.ps-finder__stage > * { animation: ps-step-in .35s ease both; }                                      /* each finder step fades in */
@keyframes ps-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ps-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .ps-assess-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .ps-finder, .ps-why, .ps-overview, .ps-deliver, .ps-case, .ps-glass, .ps-cta { grid-template-columns: 1fr; gap: 2.5rem; }
    .ps-band { flex-direction: column; align-items: flex-start; }
    .ps-cta { padding: 2rem; }
    .ps-glass { padding: 1.75rem; }
}
@media (max-width: 768px) {
    .ps-section { padding: 3.5rem 0; }
    .ps-sol-grid, .ps-svc-grid, .ps-assess-grid, .ps-feature-grid { grid-template-columns: 1fr; }
    .ps-facts__grid { grid-template-columns: 1fr; }
    .ps-fact, .ps-fact + .ps-fact { padding: 1rem 0; border-left: 0; }
    .ps-fact + .ps-fact { border-top: 1px solid rgba(255, 255, 255, .14); }
    .ps-hero--facts .ps-hero__main { padding: 7rem 0 2.5rem; }
    .ps-outcomes { grid-template-columns: 1fr; }
    .ps-outcome { border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; }
    .ps-outcome:last-child { border-bottom: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ps-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ps-finder__stage > * { animation: none; }
    .ps-sol-card, .ps-link svg, .ps-option, .ps-option svg, .ps-incl svg { transition: none; }
    a.ps-sol-card:hover { transform: none; }
}

/* ==========================================================================
   Design system — measured from the approved Lovable design
   Headings: DM Sans 700, tight tracking · body: Inter · buttons 48px / 12px radius
   ========================================================================== */
:root { --ps-display: "DM Sans", "Inter", system-ui, sans-serif; --ps-ink: #251818; --ps-gold-gradient: linear-gradient(135deg, #e7a523, #e27a12); }

.ps-hero .hero-title, .ps-h2, .ps-band h2, .ps-cta h2, .ps-glass h2, .ps-sol-card__title, .ps-sol-tile__title, .ps-feature h3, .ps-svc__title,
.ps-assess h3, .ps-step h3, .ps-fit h3, .ps-doc__page strong, .ps-svc__item strong, .ps-incl strong,
body.page-template-page-packaged-solutions-php .faq-section h2, body.page-template-page-packaged-solutions-php .faq-question,
body.page-template-page-packaged-solutions-php .section-header h2 { font-family: var(--ps-display); letter-spacing: -.03em; }

/* section rhythm: 80px on phones, 112 / 96 / 80 on desktop */
.ps-section { padding: 5rem 0; }
@media (min-width: 768px) { .ps-section { padding: 7rem 0; } .ps-section.ps-pad-md { padding: 6rem 0; } .ps-section.ps-pad-sm { padding: 5rem 0; } }
.ps-section.ps-cta-section { padding: 5rem 0; }
.ps-band { padding: 3.5rem 0; }

/* type scale */
.ps-h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.11; font-weight: 700; color: var(--ps-ink); margin: 0 0 1rem; }
.ps-lead { font-size: 1.0625rem; }
.ps-band h2 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 700; }
.ps-cta h2 { font-weight: 700; }
.ps-fit h3 { font-size: 1.25rem; font-weight: 700; }

/* heroes: 70vh on the overview, full screen on the solution pages */
.ps-hero { min-height: 70vh; }
.ps-hero--facts { min-height: 100vh; }
.ps-hero .hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.05; max-width: 56rem; margin-bottom: 1.5rem; text-wrap: balance; }
.ps-hero--facts .hero-title { font-size: clamp(2.25rem, 4.4vw, 4rem); }
.ps-hero .hero-description { font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .75); max-width: 42rem; margin-bottom: 2rem; }

/* buttons */
.btn.ps-btn-gold { background: var(--ps-gold-gradient); box-shadow: 0 6px 18px rgba(226, 122, 18, .28); }
.btn.ps-btn-gold:hover { background: var(--ps-gold-gradient); box-shadow: 0 8px 22px rgba(226, 122, 18, .38); }
.ps-hero .btn, .ps-band .btn, .ps-cta .btn, .ps-case .btn, .ps-result .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: 0 1.75rem; border-radius: 12px; font-size: .875rem; font-weight: 600;
}

@media (max-width: 900px) {
    .ps-result__checks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ps-result__meta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ps-progress span { transition: none; }
}

/* ---- measured proportions: services-included panel, CTA panel, case study ---- */
.ps-included { padding: 5rem 0; }
@media (min-width: 768px) { .ps-included { padding: 7rem 0; } }
.ps-glass { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; padding: 3rem; border-radius: 16px; background: rgba(37, 24, 24, .3); border-color: rgba(255, 255, 255, .15); }
.ps-glass h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.11; margin-bottom: 1.5rem; }
.ps-glass p:not(.ps-eyebrow) { font-size: 1.125rem; line-height: 1.625; color: rgba(255, 255, 255, .7); }
.ps-incl { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 1rem; padding: 1.25rem 0; }
.ps-incl:first-child { padding-top: 1.25rem; }
.ps-incl-list li:last-child .ps-incl { border-bottom: 0; }

.ps-cta { padding: 3rem; border-radius: 24px; gap: 2rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ps-cta h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; margin: 0 0 .75rem; }
.ps-cta ul { gap: .25rem; margin: 0 0 1.25rem; }

.ps-case { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3rem; }
.ps-doc { width: 100%; max-width: 16rem; }
.ps-doc__page { min-height: 20rem; padding: 1.5rem; }

/* ---- the theme's FAQ block, tuned to the design — on the Solutions template only ---- */
body.page-template-page-packaged-solutions-php .faq-section { padding: 5rem 0; background: var(--ps-paper); border-top: 0; }
body.page-template-page-packaged-solutions-php .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; }
body.page-template-page-packaged-solutions-php .faq-left h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.11; color: var(--ps-ink); }
body.page-template-page-packaged-solutions-php .faq-label { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ps-red); }
body.page-template-page-packaged-solutions-php .faq-label::before { content: ""; width: 2rem; height: 1px; background: var(--ps-gold); }
body.page-template-page-packaged-solutions-php .faq-question { padding: 1.25rem 0; font-size: 1rem; font-weight: 600; color: var(--ps-ink); }
@media (min-width: 768px) { body.page-template-page-packaged-solutions-php .faq-section { padding: 7rem 0; } }
@media (max-width: 900px) {
    body.page-template-page-packaged-solutions-php .faq-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .ps-glass, .ps-cta, .ps-case { grid-template-columns: 1fr; }
    .ps-cta { padding: 2rem; }
    .ps-glass { padding: 1.75rem; }
}

/* ---- text rhythm: the design uses line-height 1.5 (the theme's body is 1.7) ---- */
.ps-section, .ps-band, .ps-included, .ps-hero, .ps-cta, .ps-dark { line-height: 1.5; }
.ps-cta { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.ps-cta p:not(.ps-eyebrow) { max-width: none; font-size: 1rem; line-height: 1.5; }
.ps-cta li { font-size: .9375rem; line-height: 1.5; }
.ps-eyebrow { line-height: 1.4; }

/* finder: the left column is narrow in the design, so the heading wraps after "starting" */
.ps-finder .ps-h2 { max-width: 11em; }
.ps-finder .ps-lead { max-width: 24rem; }
.ps-fit { background: rgba(255, 255, 255, .55); }

/* ==========================================================================
   Pixel pass against the approved design (measured on the live Lovable pages at 1440 px)
   Column proportions use a 12-column grid with 48px gaps; cards 16px radius; soft 2-layer shadows.
   ========================================================================== */
:root { --ps-radius: 16px; --ps-card-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .06); }
.ps-feature, .ps-svc { border: 0; box-shadow: var(--ps-card-shadow); }
.ps-fit { padding: 2rem; }
.ps-assess { padding: 1.75rem 1.75rem 2.5rem; }
.ps-step h3 { font-size: 1.125rem; }
.ps-hero--facts .hero-title { font-size: clamp(2.25rem, 4.45vw, 4rem); }
.ps-result { box-shadow: 0 12px 28px -6px rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .08); }

@media (min-width: 901px) {
    .ps-finder  { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem; }
    .ps-finder > :first-child { grid-column: span 2; }
    .ps-finder > .ps-finder__stage { grid-column: span 3; }
    .ps-why     { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
    .ps-why > :first-child { grid-column: span 4; }
    .ps-why > :last-child  { grid-column: span 8; }
    .ps-overview { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
    .ps-overview > :first-child { grid-column: span 7; }
    .ps-overview > :last-child  { grid-column: span 5; }
    .ps-case    { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem; }
    .ps-case > :first-child { grid-column: span 2; }
    .ps-case > :last-child  { grid-column: span 3; }
    .ps-deliver { gap: 3.5rem; }
    /* FAQ (existing theme block): 4 / 8 split like the design */
    body.page-template-page-packaged-solutions-php .faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
    body.page-template-page-packaged-solutions-php .faq-left  { grid-column: span 4; }
    body.page-template-page-packaged-solutions-php .faq-right { grid-column: span 8; }
}

/* Testimonials (existing theme block) restyled to the design: 48px heading, 16px cards */
body.page-template-page-packaged-solutions-php .section-header h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; }
body.page-template-page-packaged-solutions-php .testimonial-card { border-radius: 16px; padding: 1.75rem; }
.ps-glass h2 { font-size: clamp(1.75rem, 3vw, 2.125rem); }
.ps-step h3 { line-height: 1.55; }
.ps-assess { padding-bottom: 2.25rem; }


/* ==========================================================================
   Hover + scroll effects (matched to the approved design)
   ========================================================================== */

/* ---------- Approach timeline: the line draws, steps appear in turn, numbers pop ----------
   JS adds .is-drawn when the timeline scrolls into view (assets/js/solutions.js). */
.ps-bg-paper { --ps-dot-bg: #f7f5f3; } .ps-bg-tint { --ps-dot-bg: #f2efed; } .ps-bg-white { --ps-dot-bg: #fff; }
.ps-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--ps-cols, 4), minmax(0, 1fr)); gap: 1.5rem; }
.ps-steps::before, .ps-steps::after { content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 1px; background: #e0d8d4; }
.ps-steps::after {                                                  /* the gradient "progress" line */
    height: 2px; margin-top: -.5px; background: linear-gradient(90deg, #8c1717, #e7a523); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform 1.9s cubic-bezier(.45, .05, .2, 1) .3s;
}
.ps-steps.is-drawn::after { transform: scaleX(1); }
.ps-step { position: relative; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.25s + var(--f, 0) * 1.5s); }
.ps-steps.is-drawn .ps-step { opacity: 1; transform: none; }
.ps-step__dot {
    position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem;
    border-radius: 50%; border: 2px solid #8c1717; background: var(--ps-dot-bg, #f2efed); color: #8c1717; font-size: .875rem; font-weight: 700;
}
.ps-steps.is-drawn .ps-step__dot { animation: ps-dot-pop 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--f, 0) * 1.5s); }
@keyframes ps-dot-pop {
    0%   { transform: scale(.55); background: #8c1717; color: #fff; box-shadow: 0 0 0 0 rgba(140, 23, 23, .4); }
    50%  { transform: scale(1.2); background: #8c1717; color: #fff; box-shadow: 0 0 0 12px rgba(140, 23, 23, 0); }
    100% { transform: scale(1);   background: var(--ps-dot-bg, #f2efed); color: #8c1717; box-shadow: 0 0 0 0 rgba(140, 23, 23, 0); }
}
.ps-step h3 { font-size: 1.125rem; line-height: 1.55; margin: 0 0 .5rem; color: var(--ps-ink); }
.ps-step p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--ps-muted); max-width: 30ch; }
@media (max-width: 767px) {                                         /* phones: vertical timeline, the line draws downwards */
    .ps-steps { grid-template-columns: 1fr; gap: 2.25rem; }
    .ps-steps::before, .ps-steps::after { top: 20px; bottom: 20px; left: 19px; right: auto; width: 1px; height: auto; margin: 0; }
    .ps-steps::after { width: 2px; left: 18.5px; background: linear-gradient(180deg, #8c1717, #e7a523); transform: scaleY(0); transform-origin: top; }
    .ps-steps.is-drawn::after { transform: scaleY(1); }
    .ps-step { padding-left: 3.75rem; }
    .ps-step__dot { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- Hover: cards that lift with a gold border (“Is this right for you?”, “Services included”) ---------- */
.ps-fit, .ps-glass { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .45s cubic-bezier(.2, .8, .2, 1); }
.ps-fit.ps-anim, .ps-glass.ps-anim, .ps-assess.ps-anim { transition: opacity .6s ease, transform .6s ease, box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .1s); }
.ps-fit.ps-revealed, .ps-glass.ps-revealed, .ps-assess.ps-revealed { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .45s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }

/* ---------- Hover: “What we assess” cards ---------- */
.ps-assess { border-color: #e9e6e2; }
.ps-assess::before {                                                /* top line that draws from start to end */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, #8c1717, #e7a523); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.ps-assess__n { border: 1px solid rgba(231, 165, 35, .3); background: rgba(231, 165, 35, .1); color: #e7a523; border-radius: 12px; width: 2.5rem; height: 2.5rem; transition: background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.ps-assess__ghost { right: -.5rem; bottom: -1.5rem; font-size: 6rem; color: rgba(140, 23, 23, .04); transform-origin: bottom right; transition: color .3s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Hover: “Outcomes we target” tiles ---------- */
.ps-outcome { transition: background-color .4s ease; }
.ps-outcome::before { width: 1.5rem; margin-bottom: 1rem; background: var(--ps-gold-gradient); border-radius: 2px; transition: width .7s cubic-bezier(.4, 0, .2, 1), box-shadow .5s ease; }

/* ---------- Hover: FAQ rows (same language: gradient line draws under the row, question turns brand red) ---------- */
body.page-template-page-packaged-solutions-php .faq-item { position: relative; }
body.page-template-page-packaged-solutions-php .faq-item::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, #8c1717, #e7a523); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
body.page-template-page-packaged-solutions-php .faq-question { transition: color .3s ease; }
body.page-template-page-packaged-solutions-php .faq-icon { color: #816a6a; transition: color .3s ease; }
body.page-template-page-packaged-solutions-php .faq-item.active::after { transform: scaleX(1); }
body.page-template-page-packaged-solutions-php .faq-item.active .faq-question { color: #8c1717; }
body.page-template-page-packaged-solutions-php .faq-item.active .faq-icon { color: #e7a523; }
body.page-template-page-packaged-solutions-php .faq-question:focus-visible { outline: 2px solid #e7a523; outline-offset: 2px; border-radius: 4px; }

/* hover effects only on devices that really hover (so nothing "sticks" on touch screens) */
@media (hover: hover) and (pointer: fine) {
    .ps-fit.is-visible:hover, .ps-glass.is-visible:hover, .ps-fit:hover, .ps-glass:hover {
        transform: translateY(-4px); border-color: rgba(231, 165, 35, .45);
        box-shadow: 0 24px 48px -20px rgba(82, 20, 20, .35), 0 0 0 1px rgba(231, 165, 35, .15);
    }
    .ps-assess.is-visible:hover, .ps-assess:hover {
        transform: translateY(-4px) scale(1.02); border-color: rgba(231, 165, 35, .5);
        box-shadow: 0 12px 28px -6px rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .08);
    }
    .ps-assess:hover::before { transform: scaleX(1); }
    .ps-assess:hover .ps-assess__n { background: #e7a523; color: #fff; transform: scale(1.1); }
    .ps-assess:hover .ps-assess__ghost { color: rgba(140, 23, 23, .09); transform: translate(-4px, -6px) scale(1.07); }
    .ps-outcome:hover { background: rgba(255, 255, 255, .06); }
    .ps-outcome:hover::before { width: 100%; box-shadow: 0 0 12px rgba(231, 165, 35, .55); }
    body.page-template-page-packaged-solutions-php .faq-item:hover::after { transform: scaleX(1); }
    body.page-template-page-packaged-solutions-php .faq-item:hover .faq-question { color: #8c1717; }
    body.page-template-page-packaged-solutions-php .faq-item:hover .faq-icon { color: #e7a523; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-step { opacity: 1; transform: none; transition: none; }
    .ps-steps::after { transform: none; transition: none; }
    .ps-steps.is-drawn .ps-step__dot { animation: none; }
    .ps-assess::before, .ps-outcome::before, body.page-template-page-packaged-solutions-php .faq-item::after { transition: none; }
    .ps-assess:hover, .ps-fit:hover, .ps-glass:hover { transform: none; }
}
.ps-assess { padding: 1.75rem; }


/* ==========================================================================
   Card hover: photo zoom + lift (Packaged solutions), lift for Why packaged / services cards
   Values measured on the approved design: lift 4px, gold 45% border, photo scale 1.05 over .7s.
   ========================================================================== */
.ps-sol-card__media { overflow: hidden; }
.ps-sol-card__media::after {                                         /* the photo, so it can zoom without moving the text */
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: var(--ps-img) var(--ps-pos, center) / cover no-repeat;
    transform: scale(1); transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.ps-sol-card, .ps-feature, .ps-svc { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .45s cubic-bezier(.2, .8, .2, 1); }
.ps-sol-card.ps-anim, .ps-feature.ps-anim, .ps-svc.ps-anim { transition: opacity .6s ease, transform .6s ease, box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .1s); }
.ps-sol-card.ps-revealed, .ps-feature.ps-revealed, .ps-svc.ps-revealed { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .45s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }

@media (hover: hover) and (pointer: fine) {
    a.ps-sol-card.is-visible:hover, a.ps-sol-card:hover {
        transform: translateY(-4px); border-color: rgba(231, 165, 35, .45);
        box-shadow: 0 24px 48px -20px rgba(82, 20, 20, .35), 0 0 0 1px rgba(231, 165, 35, .15);
    }
    a.ps-sol-card:hover .ps-sol-card__media::after { transform: scale(1.05); }
    .ps-feature.is-visible:hover, .ps-feature:hover, .ps-svc.is-visible:hover, .ps-svc:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 48px -20px rgba(82, 20, 20, .35), 0 0 0 1px rgba(231, 165, 35, .45);
    }
    .ps-feature:hover .ps-icon { background: rgba(231, 165, 35, .16); color: #c98700; }
}
.ps-feature .ps-icon { transition: background-color .3s ease, color .3s ease; }

@media (prefers-reduced-motion: reduce) {
    .ps-sol-card__media::after { transition: none; }
    a.ps-sol-card:hover, .ps-feature:hover, .ps-svc:hover { transform: none; }
    a.ps-sol-card:hover .ps-sol-card__media::after { transform: none; }
}

/* ==========================================================================
   Five solutions: a lone last card spans the row; solutions without a photo get a branded gradient
   ========================================================================== */
@media (min-width: 768px) {
    .ps-sol-grid > .ps-sol-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ps-sol-grid > .ps-sol-card:last-child:nth-child(odd) .ps-sol-card__media { min-height: 230px; }
}
.ps-sol-card__media { background: linear-gradient(135deg, #3a1414 0%, #1c1010 55%, #5a2c0c 100%); }
.ps-result__media { background-image: var(--ps-img, linear-gradient(135deg, #3a1414 0%, #1c1010 55%, #5a2c0c 100%)); }

/* ==========================================================================
   Text block (question-and-answer sections), multi-paragraph intros
   ========================================================================== */
.ps-textblock { display: grid; gap: 1.25rem 4rem; align-items: start; }
@media (min-width: 900px) { .ps-textblock { grid-template-columns: repeat(12, minmax(0, 1fr)); } .ps-textblock > .ps-h2 { grid-column: span 5; margin: 0; } .ps-textblock__body { grid-column: span 7; } }
.ps-textblock .ps-h2 { margin-bottom: 0; }
.ps-textblock__body .ps-prose p { margin: 0 0 1rem; color: var(--ps-muted); font-size: 1.0625rem; line-height: 1.75; }
.ps-textblock__body .ps-prose p:last-child { margin-bottom: 0; }
.ps-textblock__lead { margin: 1.25rem 0 .75rem; font-weight: 600; color: var(--ps-ink); }
.ps-bullets { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.ps-bullets li { position: relative; padding-left: 1.5rem; color: var(--ps-muted); font-size: 1.0625rem; line-height: 1.65; }
.ps-bullets li::before { content: ""; position: absolute; left: .125rem; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ps-red, #8c1717); }
.ps-bullets li strong, .ps-bullets li b { color: var(--ps-ink); }
.ps-lead--multi { max-width: 62ch; }
.ps-lead--multi p { margin: 0 0 .75rem; }
.ps-lead--multi p:last-child { margin-bottom: 0; }
.ps-case .ps-prose p { color: rgba(255, 255, 255, .78); margin: 0 0 1.25rem; line-height: 1.7; }

/* ==========================================================================
   Solution finder: labelled progress steps, one or two result cards
   ========================================================================== */
.ps-progress.has-labels { margin-bottom: 1.5rem; }
.ps-progress.has-labels span { position: relative; }
.ps-progress.has-labels span::after {
    content: attr(data-label); position: absolute; left: 0; top: 14px; white-space: nowrap;
    font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ps-muted); transition: color .5s ease;
}
.ps-progress.has-labels span.is-done::after { color: #8c1717; }
.ps-progress.has-labels { margin-bottom: 2.5rem; }

/* ==========================================================================
   Mobile pass (phones and small tablets)
   Placed LAST on purpose: a later, unconditional rule (.ps-cta { grid-template-columns: 1.65fr 1fr }) was overriding the
   earlier "stack on small screens" rule, so the call-to-action stayed in two cramped columns on phones.
   ========================================================================== */
@media (max-width: 900px) {
    .ps-cta { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 2.5rem 2rem; }
    .ps-cta > * { min-width: 0; }
    .ps-cta p:not(.ps-eyebrow) { max-width: none; }
    .ps-cta ul { margin-bottom: 1.5rem; }
    .ps-cta .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; min-height: 52px; }
    .ps-case .ps-case__actions .btn, .ps-band .btn { max-width: 100%; }
}
@media (max-width: 767px) {
    .ps-cta { padding: 2rem 1.5rem; border-radius: 20px; }
    .ps-cta h2 { font-size: clamp(1.5rem, 6.5vw, 1.75rem); line-height: 1.2; }
    .ps-result__actions { gap: .5rem 1rem; }
    .ps-result__actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 900px) {
    /* small print kept readable, and comfortable touch targets (44 px), on phones and tablets */
    .ps-sol-card__tag, .ps-fact small, .ps-progress.has-labels span::after { font-size: .75rem; }
    .ps-link, .ps-result__contact, .ps-finder__restart, .ps-finder__back { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   Dark tile in the card grid ("Not sure which solution fits?") — sits in the last cell, next to the last card
   ========================================================================== */
.ps-sol-tile {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.25rem;
    padding: 2.5rem 2.25rem; border-radius: var(--ps-radius, 16px); min-height: 100%;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .35);
}
.ps-sol-tile__title { margin: 0; max-width: 9em; font-size: clamp(2rem, 2.5vw, 3rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.ps-sol-tile__text { margin: 0; color: rgba(255, 255, 255, .72); font-size: 1.0625rem; line-height: 1.5; }
.ps-sol-tile .btn { margin-top: .25rem; }
@media (max-width: 900px) { .ps-sol-tile { padding: 2rem 1.5rem; } .ps-sol-tile__title { max-width: none; font-size: clamp(1.75rem, 6vw, 2.25rem); } .ps-sol-tile .btn { width: 100%; justify-content: center; } }

.ps-results { display: grid; gap: 1.25rem; }
.ps-result-note { margin: 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #c98700; }
.ps-results.is-multi .ps-result__why { font-size: 1rem; }