/* ══════════════════════════════════════════════════════════════
   QCS PILANI — SERVICE PAGE BLOCKS
   Card-based layout system for the CMS-rendered service pages
   (/page/:slug — 9 pillars + 45 cluster pages).

   Design approach: plain white sections, with all content carried
   in cards — tinted, dark, or bordered — over subtle CSS-drawn
   patterns. Palette and type come from qcs_theme.css so these
   pages stay part of the same brand as the rest of the site.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Card surfaces — dark cards match the nav/footer black */
    --pb-ink: #111111;
    --pb-ink-soft: #1c1c1c;

    /* Tints, used to separate one card from the next without
       resorting to full-width grey/white banding */
    --pb-tint-primary: #fdf1f7;
    --pb-tint-accent: #eef3fb;
    --pb-tint-neutral: #f5f5f5;

    --pb-line: #e6e6e6;
    --pb-line-strong: #d1d1d1;

    /* Kept close to the theme's sharp-cornered corporate look —
       enough radius to read as a card, not enough to feel foreign */
    --pb-radius: 4px;
    --pb-gap: 20px;
}

/* ══════════════════════════════════════
   SECTION SHELL
   ══════════════════════════════════════ */
.pbk-section {
    padding: 84px 5%;
    position: relative;
    background: #ffffff;
}
/* Consecutive sections would otherwise stack two full paddings of
   dead space between two cards. */
.pbk-section + .pbk-section { padding-top: 0; }

/* The gutter lives on the section, never on the block itself — a card
   that carries its own horizontal padding would paint its background
   and border out into the gutter instead of hugging its content. */
.pbk-section > * {
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
}

/* Shared decorative patterns, drawn in CSS so the pages stay
   asset-free and the pattern inherits each card's colour. */
.pbk-dots-light {
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}
.pbk-dots-ink {
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}

/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */
.pbk-hero {
    position: relative;
    padding: 170px 0 96px;
    text-align: left;
    color: #fff;
    background: var(--pb-ink);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.pbk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(10, 10, 10, 0.94) 0%,
        rgba(10, 10, 10, 0.82) 42%,
        rgba(10, 10, 10, 0.45) 100%);
}
/* No cover image supplied — carry the hero on brand colour instead
   of a washed-out grey rectangle. */
.pbk-hero:not([style*="background-image"])::before {
    background:
        radial-gradient(1000px 460px at 8% 0%, rgba(226, 19, 108, 0.26) 0%, transparent 62%),
        linear-gradient(180deg, #141414 0%, #0b0b0b 100%);
}

.pbk-hero .pbk-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 5%;
}

.pbk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--primary);
    padding: 7px 14px;
    border-radius: var(--pb-radius);
    margin-bottom: 26px;
}

.pbk-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    line-height: 1.08;
    color: #ffffff;
    max-width: 17ch;
    margin-bottom: 22px;
}
.pbk-hero h1 .gradient-text { color: var(--primary-light); }

.pbk-hero p {
    font-size: 1.08rem;
    line-height: 1.65;
    color: #c8c8c8;
    max-width: 56ch;
    margin-bottom: 36px;
}

.pbk-hero .btn-primary {
    display: inline-block;
    padding: 15px 34px;
    font-size: 0.95rem;
    font-weight: 700;
}

/* ══════════════════════════════════════
   RICH TEXT — the workhorse block
   ══════════════════════════════════════ */
.pbk-richtext {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* Section heading with the small rotated brand marker above it */
.pbk-richtext h2 {
    position: relative;
    font-size: clamp(1.7rem, 2.9vw, 2.3rem);
    line-height: 1.15;
    color: var(--text);
    margin: 56px 0 20px;
    padding-top: 26px;
    max-width: 22ch;
}
.pbk-richtext h2:first-child { margin-top: 0; }

/* Prose-only blocks (an "Overview"-style heading plus paragraphs) put the
   heading across the top and set the copy in two columns beneath it, so the
   section fills its width. Heading beside the copy was the obvious
   alternative, but every one of these intros is a two-or-three word heading
   against a short body, which stranded the heading next to a large empty
   block. Blocks carrying a card grid or phase grid stay stacked. */
.pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
}
.pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) > h2,
.pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) > h3,
.pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) > blockquote {
    grid-column: 1 / -1;
}
.pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) > h2 {
    margin-bottom: 24px;
}
/* Each column is already a comfortable measure — the prose cap would only
   pull the second column narrower than the first. */
.pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) > p {
    max-width: none;
}
.pbk-richtext h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--primary);
    transform: rotate(45deg);
}

.pbk-richtext h3 {
    font-size: 1.22rem;
    color: var(--text);
    margin: 34px 0 12px;
}

.pbk-richtext p {
    margin-bottom: 18px;
    max-width: 74ch;
}
.pbk-richtext p:last-child { margin-bottom: 0; }

.pbk-richtext strong { color: var(--text); font-weight: 700; }

/* Some pages open with a headingless intro block. Give its first
   paragraph a little more presence so the page doesn't start flat. */
.pbk-richtext:not(:has(h2)):not(:has(ul)):not(:has(.phase-grid)) > p:first-child {
    font-size: 1.15rem;
    line-height: 1.68;
    color: var(--text-secondary);
}

.pbk-richtext a {
    color: var(--primary);
    font-weight: 600;
    transition: color 0.2s;
}
.pbk-richtext a:hover { color: var(--primary-dark); }

.pbk-richtext img {
    width: 100%;
    height: auto;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    margin: 24px 0;
}

.pbk-richtext blockquote {
    margin: 28px 0;
    padding: 22px 26px;
    background: var(--pb-tint-neutral);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--pb-radius) var(--pb-radius) 0;
    font-size: 1.05rem;
    color: var(--text);
}

/* Ordinary bullet / numbered lists (non-link) */
.pbk-richtext ul,
.pbk-richtext ol {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
    max-width: 74ch;
}
.pbk-richtext ol { counter-reset: pbk-ol; }
.pbk-richtext ul li,
.pbk-richtext ol li {
    position: relative;
    padding: 6px 0 6px 26px;
}
.pbk-richtext ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 15px;
    width: 7px;
    height: 7px;
    background: var(--primary);
    transform: rotate(45deg);
}
.pbk-richtext ol li::before {
    counter-increment: pbk-ol;
    content: counter(pbk-ol, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary);
}

/* ── Link lists → navigable card grid ──
   The "Explore <pillar> Services" and "Explore Our Other Services"
   lists are the main path between the 54 pages, so they get card
   treatment rather than sitting as plain bullets. Scoped with :has()
   so a genuine prose bullet list keeps the simple marker above. */
.pbk-richtext ul:has(> li > a) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--pb-gap);
    max-width: none;
    margin-top: 28px;
}
.pbk-richtext ul:has(> li > a) > li {
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.pbk-richtext ul:has(> li > a) > li::before { display: none; }
.pbk-richtext ul:has(> li > a) > li:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.pbk-richtext ul:has(> li > a) > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}
.pbk-richtext ul:has(> li > a) > li > a strong { font-weight: 700; }
.pbk-richtext ul:has(> li > a) > li > a::after {
    content: '→';
    flex-shrink: 0;
    font-size: 1.05rem;
    color: var(--primary);
    transition: transform 0.2s var(--ease);
}
.pbk-richtext ul:has(> li > a) > li:hover > a { color: var(--primary); }
.pbk-richtext ul:has(> li > a) > li:hover > a::after { transform: translateX(4px); }

/* ── Process phases → numbered cards ── */
.pbk-richtext .phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: var(--pb-gap);
    max-width: none;
    margin-top: 30px;
}
.pbk-richtext .phase-item {
    position: relative;
    overflow: hidden;
    padding: 30px 26px;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    border-left: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pbk-richtext .phase-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}
/* No decorative step numeral here on purpose — the phase titles in
   this content already read "Phase 1:", "Phase 2:", so a numbered
   corner would just repeat the same information twice. */
.pbk-richtext .phase-item strong {
    position: relative;
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 10px;
    padding-bottom: 14px;
}
.pbk-richtext .phase-item strong::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--primary);
}
.pbk-richtext .phase-item p,
.pbk-richtext .phase-item span {
    display: block;
    font-size: 0.93rem;
    line-height: 1.62;
    color: var(--muted);
    margin: 0;
    max-width: none;
}

/* Legacy label helpers kept so older page content keeps rendering */
.pbk-richtext .sec-badge,
.pbk-richtext .section-label,
.pbk-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}
.pbk-richtext .sec-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--primary);
    transform: rotate(45deg);
}

/* Optional two-column section header */
.pbk-section-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 36px;
}
.pbk-section-header h2 {
    font-size: clamp(1.7rem, 2.9vw, 2.3rem);
    max-width: 16ch;
}
.pbk-section-header p {
    color: var(--muted);
    font-size: 1rem;
    max-width: 46ch;
}

/* ══════════════════════════════════════
   FEATURE BLOCK — .srv-detail-item inside customHtml
   Scoped here so the shared pattern on static pages is untouched.
   ══════════════════════════════════════ */
.pbk-custom-html .srv-detail-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    align-items: stretch;
    margin-bottom: var(--pb-gap);
    background: var(--pb-tint-neutral);
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    overflow: hidden;
}
.pbk-custom-html .srv-detail-item:last-child { margin-bottom: 0; }

.pbk-custom-html .srv-content {
    padding: 46px 44px;
    background-image: radial-gradient(rgba(0, 0, 0, 0.045) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}
.pbk-custom-html .srv-content h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.18;
    color: var(--text);
    margin-bottom: 16px;
    max-width: 22ch;
}
.pbk-custom-html .srv-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 26px;
}

.pbk-custom-html .srv-list { list-style: none; }
.pbk-custom-html .srv-list li {
    position: relative;
    padding: 13px 0 13px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.pbk-custom-html .srv-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pbk-custom-html .srv-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 21px;
    width: 8px;
    height: 8px;
    background: var(--primary);
    transform: rotate(45deg);
}
.pbk-custom-html .srv-list li strong { color: var(--text); font-weight: 700; }

/* Image fills its half of the card, edge to edge */
.pbk-custom-html .srv-img-wrap {
    position: relative;
    min-height: 100%;
}
.pbk-custom-html .srv-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
    display: block;
}

.pbk-custom-html iframe {
    width: 100%;
    border: 0;
    border-radius: var(--pb-radius);
}

/* ══════════════════════════════════════
   "IS THIS RIGHT FOR YOU?" — audience fit
   ══════════════════════════════════════ */
.pbk-custom-html .svc-fit {
    padding: 44px 42px;
    background: var(--pb-tint-primary);
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
}
.pbk-custom-html .svc-fit h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.18;
    color: var(--text);
    margin-bottom: 12px;
    max-width: 24ch;
}
.pbk-custom-html .svc-fit > p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 26px;
    max-width: 66ch;
}
.pbk-custom-html .svc-fit-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.pbk-custom-html .svc-fit-list li {
    position: relative;
    padding: 18px 20px 18px 42px;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.pbk-custom-html .svc-fit-list li::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 25px;
    width: 8px;
    height: 8px;
    background: var(--primary);
    transform: rotate(45deg);
}

/* ══════════════════════════════════════
   DEEP DIVE — long-form sub-topics
   ══════════════════════════════════════ */
.pbk-custom-html .svc-deep > h2 {
    position: relative;
    font-size: clamp(1.7rem, 2.9vw, 2.3rem);
    line-height: 1.15;
    color: var(--text);
    padding-top: 26px;
    margin-bottom: 30px;
    max-width: 24ch;
}
.pbk-custom-html .svc-deep > h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--primary);
    transform: rotate(45deg);
}
.pbk-custom-html .svc-deep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 34px var(--pb-gap);
}
.pbk-custom-html .svc-deep-item h3 {
    position: relative;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 14px;
    padding-bottom: 14px;
}
.pbk-custom-html .svc-deep-item h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--primary);
}
.pbk-custom-html .svc-deep-item p {
    font-size: 0.97rem;
    line-height: 1.72;
    color: var(--muted);
    margin: 0;
}

/* ══════════════════════════════════════
   "COMMON MISTAKES WE SEE" — cautionary list
   ══════════════════════════════════════ */
.pbk-custom-html .svc-pitfalls {
    padding: 44px 42px;
    background: var(--pb-tint-neutral);
    border: 1px solid var(--pb-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--pb-radius);
}
.pbk-custom-html .svc-pitfalls h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.18;
    color: var(--text);
    margin-bottom: 12px;
}
.pbk-custom-html .svc-pitfalls > p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 24px;
    max-width: 66ch;
}
.pbk-custom-html .svc-pitfalls-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.pbk-custom-html .svc-pitfalls-list li {
    position: relative;
    padding: 16px 18px 16px 46px;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
/* A cross, drawn from two rotated bars — this list is things to avoid, so it
   should not carry the same marker as the "what you get" lists. */
.pbk-custom-html .svc-pitfalls-list li::before,
.pbk-custom-html .svc-pitfalls-list li::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 25px;
    width: 13px;
    height: 2px;
    background: var(--primary);
}
.pbk-custom-html .svc-pitfalls-list li::before { transform: rotate(45deg); }
.pbk-custom-html .svc-pitfalls-list li::after { transform: rotate(-45deg); }

/* ══════════════════════════════════════
   "WHY WORK WITH US" — dark differentiator cards
   ══════════════════════════════════════ */
.pbk-custom-html .svc-why h2 {
    position: relative;
    font-size: clamp(1.7rem, 2.9vw, 2.3rem);
    line-height: 1.15;
    color: var(--text);
    padding-top: 26px;
    margin-bottom: 28px;
}
.pbk-custom-html .svc-why h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--primary);
    transform: rotate(45deg);
}
/* 340px min keeps this at three columns on desktop, so the six cards land as
   two even rows rather than four plus a stranded two. */
.pbk-custom-html .svc-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--pb-gap);
}
.pbk-custom-html .svc-why-item {
    padding: 28px 26px;
    background: var(--pb-ink);
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    border-radius: var(--pb-radius);
    transition: background-color 0.25s var(--ease);
}
.pbk-custom-html .svc-why-item:hover { background-color: var(--pb-ink-soft); }
.pbk-custom-html .svc-why-item strong {
    position: relative;
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    padding-bottom: 12px;
}
.pbk-custom-html .svc-why-item strong::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    background: var(--primary);
}
.pbk-custom-html .svc-why-item p {
    font-size: 0.93rem;
    line-height: 1.62;
    color: #a8a8a8;
    margin: 0;
}

/* ══════════════════════════════════════
   IMAGE + TEXT
   ══════════════════════════════════════ */
.pbk-image-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    background: var(--pb-tint-neutral);
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    overflow: hidden;
}
.pbk-image-text.reverse { direction: rtl; }
.pbk-image-text.reverse > * { direction: ltr; }
.pbk-image-text .pbk-img { min-height: 100%; }
.pbk-image-text .pbk-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pbk-image-text .pbk-text { padding: 46px 44px; }
.pbk-image-text h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.18;
    margin-bottom: 16px;
    max-width: 22ch;
}
.pbk-image-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
}

/* ══════════════════════════════════════
   STATS — one dark card, not a full-bleed band
   ══════════════════════════════════════ */
.pbk-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    /* Ink, not a light divider colour: when the stat count doesn't divide
       evenly into the column count the trailing cells of the last row are
       empty, and a light wrapper would punch visible holes in the card. */
    background: var(--pb-ink);
    border-radius: var(--pb-radius);
    overflow: hidden;
}
.pbk-stats-grid > div {
    padding: 44px 26px;
    text-align: center;
    background: var(--pb-ink);
    background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    /* Hairline drawn per filled cell so it never outlines an empty one */
    outline: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.25s var(--ease);
}
.pbk-stats-grid > div:hover { background-color: var(--pb-ink-soft); }

.pbk-stat-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 10px;
}
.pbk-stat-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #a8a8a8;
}

/* ══════════════════════════════════════
   FAQ
   ══════════════════════════════════════ */
.pbk-faq {
    display: grid;
    gap: 12px;
}
.pbk-faq-item {
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pbk-faq-item:hover { border-color: var(--pb-line-strong); }
.pbk-faq-item[open] {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.pbk-faq-item summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 22px 58px 22px 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    transition: color 0.2s;
}
.pbk-faq-item summary::-webkit-details-marker { display: none; }
.pbk-faq-item summary:hover { color: var(--primary); }
.pbk-faq-item summary::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6px;
    background:
        linear-gradient(var(--primary), var(--primary)) center/13px 2px no-repeat,
        linear-gradient(var(--primary), var(--primary)) center/2px 13px no-repeat;
    transition: transform 0.25s var(--ease);
}
.pbk-faq-item[open] summary::after { transform: rotate(135deg); }
.pbk-faq-item p {
    padding: 0 58px 24px 24px;
    font-size: 0.97rem;
    line-height: 1.72;
    color: var(--muted);
    margin: 0;
    max-width: 92ch; /* answers span the full card otherwise — too long to read */
}

/* ══════════════════════════════════════
   CTA BANNER — dark card
   ══════════════════════════════════════ */
.pbk-cta-banner {
    position: relative;
    overflow: hidden;
    padding: 60px 56px;
    background: var(--pb-ink);
    border-radius: var(--pb-radius);
}
/* Persuasion on the left, the actual enquiry form on the right */
.pbk-cta-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start;
}
.pbk-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 320px at 50% 0%, rgba(226, 19, 108, 0.26) 0%, transparent 66%),
        radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px);
    background-size: auto, 18px 18px;
    pointer-events: none;
}
.pbk-cta-banner h2 {
    font-size: clamp(1.6rem, 2.9vw, 2.3rem);
    line-height: 1.15;
    color: #ffffff;
    max-width: 18ch;
    margin: 0 0 14px;
}
.pbk-cta-banner p {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #bdbdbd;
    max-width: 46ch;
    margin: 0 0 30px;
}

/* Contact details — a visitor who would rather phone or email than
   fill in a form still gets what they need without leaving the page */
.pbk-cta-contact { margin-bottom: 26px; }
.pbk-cta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.93rem;
}
.pbk-cta-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.pbk-cta-row > span:first-child { color: #8d8d8d; }
.pbk-cta-row a,
.pbk-cta-row > span:last-child { color: #ffffff; font-weight: 600; }
.pbk-cta-row a:hover { color: var(--primary-light); }

.pbk-cta-alt {
    display: inline-block;
    font-size: 0.93rem;
    font-weight: 700;
    color: #ffffff;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--primary);
    transition: color 0.2s;
}
.pbk-cta-alt:hover { color: var(--primary-light); }

/* ── Form inside the dark card ── */
.pbk-cta-form {
    display: grid;
    gap: 12px;
    padding: 30px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--pb-radius);
}
.pbk-cta-form-ttl {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}
.pbk-cta-banner .pbk-cta-form input,
.pbk-cta-banner .pbk-cta-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--pb-radius);
    font-family: inherit;
    font-size: 0.93rem;
    color: #ffffff;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.pbk-cta-banner .pbk-cta-form input::placeholder,
.pbk-cta-banner .pbk-cta-form textarea::placeholder { color: #8d8d8d; }
.pbk-cta-banner .pbk-cta-form input:focus,
.pbk-cta-banner .pbk-cta-form textarea:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
}
.pbk-cta-banner .pbk-cta-form textarea { resize: vertical; }
.pbk-cta-banner .pbk-cta-form .btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 0.97rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}
/* The shared success message is blue on light backgrounds — unreadable here */
.pbk-cta-form .pbk-form-ok {
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}

/* ══════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════ */
.pbk-testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--pb-gap);
}
.pbk-testi-card {
    position: relative;
    padding: 34px 30px;
    background: var(--pb-tint-primary);
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.pbk-testi-card::before {
    content: '”';
    position: absolute;
    top: 8px;
    right: 22px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 4.4rem;
    line-height: 1;
    color: var(--primary);
    opacity: 0.16;
}
.pbk-testi-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.pbk-testi-card .pbk-quote {
    position: relative;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--text-secondary);
    margin-bottom: 26px;
}
.pbk-testi-who { display: flex; align-items: center; gap: 13px; }
.pbk-testi-who img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pbk-testi-avatar-placeholder {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
}
.pbk-testi-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--text);
}
.pbk-testi-role { font-size: 0.85rem; color: var(--muted2); }

/* ══════════════════════════════════════
   TEAM
   ══════════════════════════════════════ */
.pbk-section .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pb-gap);
}
.pbk-section .team-card {
    text-align: center;
    padding: 32px 24px;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.pbk-section .team-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.pbk-section .team-av {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pb-tint-primary);
}
.pbk-section .team-av img { width: 100%; height: 100%; object-fit: cover; }
.pbk-section .team-card h4 {
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 5px;
}
.pbk-section .team-role {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
}

/* ══════════════════════════════════════
   GALLERY
   ══════════════════════════════════════ */
.pbk-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--pb-gap);
}
.pbk-gallery-item {
    display: block;
    overflow: hidden;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    aspect-ratio: 4 / 3;
}
.pbk-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease);
}
.pbk-gallery-item:hover img { transform: scale(1.05); }

/* ══════════════════════════════════════
   VIDEO
   ══════════════════════════════════════ */
.pbk-video-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
}
.pbk-video-wrap::before { content: ''; display: block; padding-top: 56.25%; }
.pbk-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.pbk-video-caption {
    max-width: var(--max-w);
    margin: 14px auto 0;
    padding: 0 5%;
    font-size: 0.88rem;
    color: var(--muted2);
    text-align: center;
}

/* ══════════════════════════════════════
   FORM EMBED
   ══════════════════════════════════════ */
.pbk-form-embed {
    max-width: 780px;
    padding: 48px 44px;
    background: var(--pb-tint-neutral);
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
}
.pbk-form-embed h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 26px;
    text-align: center;
}
.pbk-form-embed-form { display: grid; gap: 14px; }
.pbk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pbk-form-row input,
.pbk-form-embed-form textarea {
    width: 100%;
    padding: 13px 16px;
    background: #ffffff;
    border: 1px solid var(--border2);
    border-radius: var(--pb-radius);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}
.pbk-form-row input:focus,
.pbk-form-embed-form textarea:focus { border-color: var(--primary); }
.pbk-form-embed-form textarea { resize: vertical; }
.pbk-form-embed-form .btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}
.pbk-form-ok {
    text-align: center;
    color: var(--accent);
    font-weight: 600;
    padding: 14px 0;
}
.pbk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ══════════════════════════════════════
   SPACERS / DIVIDER
   ══════════════════════════════════════ */
.pbk-spacer-sm { height: 28px; }
.pbk-spacer-md { height: 56px; }
.pbk-spacer-lg { height: 104px; }

.pbk-divider-line {
    max-width: var(--max-w);
    margin: 40px auto;
    padding: 0 5%;
}
.pbk-divider-line::before {
    content: '';
    display: block;
    border-top: 1px solid var(--pb-line);
}

/* ══════════════════════════════════════
   SCROLL ANIMATION (contract with page.html)
   ══════════════════════════════════════ */
.pbk-fade-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pbk-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .pbk-fade-up { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 900px) {
    .pbk-section { padding: 62px 5%; }
    .pbk-hero { padding: 138px 0 72px; }

    .pbk-section-header { grid-template-columns: 1fr; gap: 16px; align-items: start; }

    /* Two-column prose collapses back to a single stacked column */
    .pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) {
        display: block;
    }
    .pbk-richtext:has(> h2):not(:has(ul)):not(:has(ol)):not(:has(.phase-grid)) > h2 {
        margin-bottom: 18px;
    }

    /* Feature/image cards stack, image first so the card still opens
       on something visual */
    .pbk-custom-html .srv-detail-item,
    .pbk-image-text {
        grid-template-columns: 1fr;
    }
    .pbk-image-text.reverse { direction: ltr; }
    .pbk-custom-html .srv-img-wrap,
    .pbk-image-text .pbk-img {
        order: -1;
        min-height: 220px;
        max-height: 300px;
    }
    .pbk-custom-html .srv-content,
    .pbk-image-text .pbk-text { padding: 34px 26px; }

    .pbk-custom-html .svc-fit,
    .pbk-custom-html .svc-pitfalls { padding: 32px 24px; }
    .pbk-custom-html .svc-fit h2,
    .pbk-custom-html .svc-deep > h2 { max-width: none; }

    /* Two even rows for the usual 3-4 stats, instead of 3 + a stranded one */
    .pbk-stats-grid { grid-template-columns: 1fr 1fr; }

    .pbk-cta-banner { padding: 48px 26px; }
    .pbk-cta-grid { grid-template-columns: 1fr; gap: 34px; }
    .pbk-cta-banner h2 { max-width: none; }
    .pbk-cta-banner p { max-width: none; }

    .pbk-form-embed { padding: 34px 24px; }
}

@media (max-width: 600px) {
    .pbk-section { padding: 50px 5%; }
    .pbk-hero { padding: 124px 0 60px; }
    .pbk-hero h1 { max-width: none; }

    .pbk-richtext h2 { margin-top: 40px; max-width: none; }
    .pbk-richtext p { max-width: none; }

    .pbk-richtext ul:has(> li > a) { grid-template-columns: 1fr; }
    .pbk-richtext .phase-grid { grid-template-columns: 1fr; }

    .pbk-stats-grid { grid-template-columns: 1fr 1fr; }
    .pbk-stats-grid > div { padding: 30px 16px; }

    .pbk-form-row { grid-template-columns: 1fr; }

    .pbk-faq-item summary { padding: 18px 48px 18px 18px; font-size: 0.97rem; }
    .pbk-faq-item p { padding: 0 48px 20px 18px; }
}