/* Pixel Jar pattern styles. Colors come from theme.json tokens only. */

.pj-eyebrow {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-alt);
}

/* Dark teal disappears on navy, and bright teal fails on navy-deep, so eyebrows go light. */
:is(.has-main-background-color, .has-navy-deep-background-color) .pj-eyebrow {
    color: var(--wp--preset--color--main-accent);
}

.pj-eyebrow:empty {
    display: none;
}

/* An eyebrow after a heading starts a new group, so it gets the same space as one after a paragraph. */
.wp-block-heading + .pj-eyebrow {
    margin-top: var(--wp--preset--spacing--large);
}

/* Outline buttons read navy on light surfaces and white on navy. */
:is(.pj-ctas, .pj-tool__ctas, .pj-tier__cta) .is-style-outline > .wp-block-button__link:not(.has-text-color) {
    border: 2px solid currentColor;
    color: var(--wp--preset--color--main);
    /* The fill button's padding minus the 2px border, so the pair lines up at the same size. */
    padding: calc(0.75em - 2px) calc(1.25em - 2px);
}

/* The calculators print their button row without core's flex layout, so give it the same row and gap. */
.pj-tool__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--style--block-gap);
}

/* Below 900px the call button shrinks (style.css); shrink its outline partner to match. */
@media (max-width: 899px) {
    :is(.pj-ctas, .pj-tool__ctas, .pj-tier__cta) .is-style-outline > .wp-block-button__link:not(.has-text-color) {
        font-size: var(--wp--preset--font-size--x-small);
        padding: calc(0.6em - 2px) calc(0.9em - 2px);
    }
}

:is(.has-main-background-color, .has-navy-deep-background-color) :is(.pj-ctas, .pj-tool__ctas, .pj-tier__cta) .is-style-outline > .wp-block-button__link:not(.has-text-color) {
    color: var(--wp--preset--color--base);
}

.pj-call-band h2 {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    text-wrap: balance;
}

.pj-call-band__text {
    flex: 1 1 24rem;
}

.pj-call-band__text p {
    margin: 0.4em 0 0;
    max-width: 36rem;
}

.pj-answer {
    max-width: 44rem;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--main);
}

/* Constrained layouts center anything narrower than the 1260px band; line the answer up with its heading instead. */
.is-layout-constrained > .pj-answer {
    margin-left: max(0px, calc((100% - 1260px) / 2)) !important;
}

.pj-price {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 800;
    color: var(--wp--preset--color--main);
}

/* Word prices like "Per project" wrap at the number size; set them one step smaller. */
.pj-price--text {
    font-size: var(--wp--preset--font-size--medium);
}

:root {
    /* The four-color pixel strip, the one accent that replaces every single-color edge (spec 3.1). */
    --pj-strip: linear-gradient(90deg, var(--wp--preset--color--primary) 0 25%, var(--wp--preset--color--teal-bright) 25% 50%, var(--wp--preset--color--main) 50% 75%, var(--wp--preset--color--main-accent) 75%);
    --pj-keyline: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
    --pj-keyline-navy: 1px solid color-mix(in srgb, var(--wp--preset--color--main) 14%, transparent);
    --pj-peach: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--primary-accent));
    --pj-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* Lifted (decided 2026-10-20, after the 2026-10-14 quarterly): a square card whose bottom-right corner steps out in three
   pixels, with one orange pixel left in the notch, and a soft shadow that follows the step. The fill is drawn as background
   rectangles rather than a clip-path, because a clip would cut the shadow off; the drop-shadow filter then traces the
   painted shape, and the opaque fill hides it from the card's own text. */
.pj-card {
    --pj-fill: var(--wp--preset--color--base);
    --pj-notch: var(--wp--preset--color--primary);
    position: relative;
    padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) calc(var(--wp--preset--spacing--medium) + 12px);
    color: var(--wp--preset--color--secondary);
    background:
        linear-gradient(var(--pj-notch), var(--pj-notch)) right bottom / 12px 12px no-repeat,
        linear-gradient(var(--pj-fill), var(--pj-fill)) left top / 100% calc(100% - 36px) no-repeat,
        linear-gradient(var(--pj-fill), var(--pj-fill)) left bottom 24px / calc(100% - 12px) 12px no-repeat,
        linear-gradient(var(--pj-fill), var(--pj-fill)) left bottom 12px / calc(100% - 24px) 12px no-repeat,
        linear-gradient(var(--pj-fill), var(--pj-fill)) left bottom / calc(100% - 36px) 12px no-repeat;
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--wp--preset--color--main) 8%, transparent)) drop-shadow(0 8px 16px color-mix(in srgb, var(--wp--preset--color--main) 10%, transparent));
}

/* A card inside a query loop item fills the item, so the stepped corner sits at the row's foot on every card (Phase 8 Review Focus 1). */
.wp-block-post-template > .wp-block-post > .pj-card {
    height: 100%;
}

.pj-card__link a {
    font-weight: 700;
}

/* A card's link sits at the card's foot, so links line up across a row. */
.wp-block-group.pj-card:has(> .pj-card__link) {
    display: flex;
    flex-direction: column;
}

.wp-block-group.pj-card > .pj-card__link {
    margin-top: auto;
    padding-top: var(--wp--style--block-gap, 1.2rem);
}

.pj-badge {
    width: fit-content;
    margin: 0;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    background-color: var(--wp--preset--color--main);
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
}

.pj-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    width: fit-content;
    margin: 0;
    padding: 0.5em 1em;
    border-radius: 999px;
    background-color: var(--wp--preset--color--base);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--main) 8%, transparent);
    color: var(--wp--preset--color--main);
    font-size: var(--wp--preset--font-size--small);
}

/* The star token is tested on white only, and the pill is always white. */
.pj-stars__icons {
    color: var(--wp--preset--color--star);
    letter-spacing: 0.1em;
}

/* Proof strip (spec 3.5): the page color, hairlines, the year large, the names in the display face. */
/* Core's preset background class carries !important, so this does too. */
.wp-block-group.pj-proof.has-base-background-color {
    background-color: var(--wp--preset--color--primary-accent) !important;
}

/* On service pages the stars pill sits first, with a hairline divider before the label (spec 3.5). */
.pj-proof > .pj-stars + .has-small-font-size {
    padding-left: 1.5rem;
    border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--main) 15%, transparent);
}

@media (max-width: 599px) {
    .pj-proof > .pj-stars + .has-small-font-size {
        padding-left: 0;
        border-left: 0;
    }
}

.pj-proof {
    border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--main) 12%, transparent);
    align-items: center;
    row-gap: var(--wp--preset--spacing--small);
}

/* "trusted by" steps up from small to base (quarterly 2026-10-14). Core's preset font-size class carries !important,
   so this does too. */
.pj-proof > .has-small-font-size {
    display: grid;
    grid-template-columns: 28px auto;
    column-gap: 0.6rem;
    align-items: center;
    margin: 0;
    color: var(--wp--preset--color--secondary);
    font-size: var(--wp--preset--font-size--base) !important;
}

.pj-proof > .has-small-font-size::before {
    content: "";
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><rect x='0' y='14' width='14' height='14' fill='%23cc4700'/><rect x='14' y='0' width='14' height='14' fill='%232e94b2'/><rect x='14' y='14' width='14' height='14' fill='%2300213f' opacity='.25'/></svg>");
}

.pj-proof > .has-small-font-size > strong {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--main);
    font-variant-numeric: tabular-nums;
}

.pj-proof__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--medium);
    row-gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--wp--preset--color--main);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pj-proof__logos > li {
    margin-block: 0;
}

/* Client logos in one navy tone (quarterly follow-up, 2026-10-20), so no brand's colors fight the page. The filter tints
   rather than fills, so detailed marks keep their shading. Full color on hover. */
.pj-client-logo {
    display: block;
    width: auto;
    height: 2.25rem;
    filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(2.4) brightness(0.42);
    transition: filter 150ms ease;
}

.pj-proof__logos > li:hover .pj-client-logo {
    filter: none;
}

.pj-steps {
    display: grid;
    gap: var(--wp--preset--spacing--medium);
}

/* Three across only where the longest step heading still fits beside its number on one line. */
@media (min-width: 1200px) {
    .pj-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* These rows space their items with grid gap; the flow layout's top margin would push items 2+ out of line. */
.wp-block-group.pj-steps > *,
.wp-block-group.pj-cycle__cards > *,
.wp-block-group.pj-problem-grid > *,
.wp-block-group.pj-testimonial-row > * {
    margin-block-start: 0;
}

.pj-step > * {
    margin-block: 0 0.6em;
}

/* The step's heading sits beside its number (Jeff, 2026-10-27); the You and Us boxes span the card below. */
.wp-block-group.pj-step {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 0.75rem;
    align-items: center;
    /* Equal-height cards in a row: keep each card's content at the top instead of spreading it down the card. */
    align-content: start;
}

.wp-block-group.pj-step > :not(.pj-step__number, .wp-block-heading) {
    grid-column: 1 / -1;
}

/* Smaller than the medium preset so the longest heading fits beside its number; the preset class is !important. */
.pj-step .wp-block-heading.has-medium-font-size {
    font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem) !important;
}

/* How it works: tinted rounded panels, flat, no stepped corner (kept as they were when the cards went Lifted). The You/Us
   boxes go white inside them (spec 3.5). */
.pj-card.pj-step {
    padding-bottom: var(--wp--preset--spacing--medium);
    border-radius: 16px;
    background-image: none;
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--primary-accent));
    filter: none;
}

.pj-steps > .pj-step:nth-child(2) {
    background-color: var(--wp--preset--color--primary-alt-accent);
}

.pj-steps > .pj-step:nth-child(3) {
    background-color: var(--wp--preset--color--main-accent);
}

.pj-step .pj-step__you,
.pj-step .pj-step__us {
    background-color: var(--wp--preset--color--base);
}

.pj-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-weight: 800;
}

.pj-step__you,
.pj-step__us {
    padding: 0.6em 0.8em;
    border-radius: 10px;
    background-color: var(--wp--preset--color--tertiary);
    color: var(--wp--preset--color--main);
}

.pj-step__you strong,
.pj-step__us strong {
    display: flex;
    align-items: center;
    gap: 0.45em;
    color: var(--wp--preset--color--primary-alt);
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* "You" and "Us" were easy to miss (Jeff, 2026-10-27): a person for the visitor, the Pixel Jar mark for us. */
.pj-step__you strong::before,
.pj-step__us strong::before {
    content: "";
    flex: none;
    width: 1.6em;
    height: 1.6em;
}

.pj-step__you strong::before {
    background-color: currentColor;
    -webkit-mask: url("../images/icon-person.svg") center / contain no-repeat;
    mask: url("../images/icon-person.svg") center / contain no-repeat;
}

.pj-step__us strong::before {
    background: url("../images/pj-mark.svg") center / contain no-repeat;
}

/* Pricing tiers (spec 3.5): the pricing tile's shape. */
.pj-card.pj-tier {
    padding-bottom: calc(var(--wp--preset--spacing--medium) + 12px);
}

.pj-tier .pj-price {
    padding-bottom: 0.75rem;
}

/* Each tier carries its own call button; the orange hairline sits under it, between the ask and the list (spec 3.5). */
.pj-tier > .pj-tier__cta {
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
}

/* The featured tier lifts a little higher, in a warm shadow. */
.pj-card.pj-tier--featured {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent)) drop-shadow(0 12px 22px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent));
}

.pj-tier--featured > * {
    position: relative;
}

/* The badge sits on the featured tier's top edge, out of the flow, so every tier's name, price and button line up. */
.pj-tier--featured > .pj-badge {
    position: absolute;
    top: 0;
    left: var(--wp--preset--spacing--medium);
    z-index: 1;
    translate: 0 -50%;
}

/* The badge is still the first child, so the heading after it would take the flow gap; it starts flush like every tier's heading. */
.pj-tier--featured > .pj-badge + * {
    margin-block-start: 0;
}

/* FAQ (spec 3.5): hairline rows, a circled plus that turns to an orange cross while open. */
.pj-faq .wp-block-details {
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--main) 15%, transparent);
}

.pj-faq details[open] {
    border-bottom-color: var(--wp--preset--color--primary);
}

.pj-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    color: var(--wp--preset--color--main);
    font-weight: 700;
}

.pj-faq summary::-webkit-details-marker {
    display: none;
}

.pj-faq summary::after {
    content: "";
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--wp--preset--color--main);
    border-radius: 50%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3v10M3 8h10' stroke='%2300213f' stroke-width='2' stroke-linecap='round'/></svg>") center / 60% no-repeat;
    transition: transform 150ms ease;
}

.pj-faq details[open] summary::after {
    transform: rotate(45deg);
    border-color: var(--wp--preset--color--primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3v10M3 8h10' stroke='%23cc4700' stroke-width='2' stroke-linecap='round'/></svg>");
}

.pj-faq .wp-block-details > p {
    max-width: 60ch;
    padding-bottom: 1.25rem;
}

/* Quotes (spec 3.5): tinted, no edge, the quote mark carries it. */
.wp-block-quote.pj-testimonial {
    position: relative;
    margin: 0;
    padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) calc(var(--wp--preset--spacing--medium) + 1.4rem);
    border: 0;
    border-radius: 16px;
    background-color: var(--pj-peach);
    box-shadow: none;
    color: var(--wp--preset--color--main);
    font-weight: 600;
}

.wp-block-quote.pj-testimonial::before {
    content: "\201C";
    position: absolute;
    left: 0.9rem;
    top: 0.5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--wp--preset--color--primary);
}

.pj-testimonial-row > .pj-testimonial:nth-child(2) {
    background-color: var(--wp--preset--color--primary-alt-accent);
}

.pj-testimonial-row > .pj-testimonial:nth-child(3) {
    background-color: var(--wp--preset--color--main-accent);
}

.is-style-pj-glow + .wp-block-quote.pj-testimonial,
.is-style-pj-gradient + .wp-block-quote.pj-testimonial {
    margin-top: var(--wp--preset--spacing--large);
}

.wp-block-heading + .wp-block-quote.pj-testimonial {
    margin-top: var(--wp--preset--spacing--medium);
}

/* A quote after a section's paragraph keeps a gap; the quote's margin reset would otherwise override the block gap. */
.wp-block-post-content > section.wp-block-group > p + .wp-block-quote.pj-testimonial {
    margin-top: var(--wp--preset--spacing--large);
}

.wp-block-post-content > .wp-block-quote.pj-testimonial:last-child {
    margin-bottom: var(--wp--preset--spacing--large);
}

.wp-block-quote.pj-testimonial cite {
    display: block;
    margin-top: 0.75em;
    color: var(--wp--preset--color--main);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 700;
}

.pj-cycle__loop-image img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-inline: auto;
}

.pj-cycle__cards {
    display: grid;
    gap: var(--wp--preset--spacing--small);
}

.pj-cycle__card > * {
    margin-block: 0 0.4em;
}

/* The accent serif (spec 3.3): the loop line, the hero small line, the case study lead. */
/* The loop line sits on the warm cloud band, where orange is 4.29:1, so it is navy (spec 3.2). */
.pj-cycle__loop {
    color: var(--wp--preset--color--main);
    font-family: var(--pj-serif);
    font-style: italic;
    font-size: 1.1em;
}

.pj-cycle__loop a {
    font-family: var(--wp--preset--font-family--primary);
    font-style: normal;
    font-weight: 700;
}

.is-style-pj-glow > .pj-price + .has-small-font-size {
    color: var(--wp--preset--color--primary);
    font-family: var(--pj-serif);
    font-style: italic;
    font-size: var(--wp--preset--font-size--base);
}

.pj-team__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
}

/* Owner photos (spec decision 17): the photo takes the cards' Lifted corner, with a teal pixel in the notch, and the name
   sits as a pill over its foot. The photo is clipped, so the shadow goes on the figure around it. David's and Paxton's
   smaller photos take the same corner at half the step (Jeff, 2026-10-27). */
.pj-team__owners .pj-team__photo,
.pj-team__pm .pj-team__photo {
    --pj-photo-step: 12px;
    position: relative;
    margin: 0;
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--wp--preset--color--main) 8%, transparent)) drop-shadow(0 8px 16px color-mix(in srgb, var(--wp--preset--color--main) 10%, transparent));
}

.pj-team__owners .pj-team__photo img,
.pj-team__pm .pj-team__photo img {
    --s: var(--pj-photo-step);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3 * var(--s)), calc(100% - var(--s)) calc(100% - 3 * var(--s)), calc(100% - var(--s)) calc(100% - 2 * var(--s)), calc(100% - 2 * var(--s)) calc(100% - 2 * var(--s)), calc(100% - 2 * var(--s)) calc(100% - var(--s)), calc(100% - 3 * var(--s)) calc(100% - var(--s)), calc(100% - 3 * var(--s)) 100%, 0 100%);
}

.pj-team__owners .pj-team__photo::after,
.pj-team__pm .pj-team__photo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--pj-photo-step);
    height: var(--pj-photo-step);
    background: var(--wp--preset--color--teal-bright);
}

.pj-team__owners .pj-team__photo + h3 {
    position: relative;
    display: block;
    width: fit-content;
    margin-top: -1.6em;
    margin-left: 1rem;
    transform: translateY(-1.25rem);
    padding: 0.35em 0.9em;
    border-radius: 999px;
    background-color: var(--wp--preset--color--base);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--main) 12%, transparent);
    font-size: var(--wp--preset--font-size--base);
}

.pj-team__pm .pj-team__photo {
    --pj-photo-step: 6px;
    flex: none;
    width: 96px;
}

.pj-team__role {
    margin: 0;
    color: var(--wp--preset--color--primary-alt);
    font-weight: 700;
}

.pj-result-badge {
    align-items: baseline;
}

.pj-result-badge__value {
    margin: 0;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pj-result-badge__label {
    margin: 0;
    flex: 1 1 10rem;
    min-width: 0;
    color: var(--wp--preset--color--main);
    font-weight: 700;
    text-wrap: balance;
}

.pj-result-badge:has(.pj-result-badge__value:empty) {
    display: none;
}

.pj-author-box {
    padding: var(--wp--preset--spacing--medium);
    border: var(--pj-keyline-navy);
    border-radius: 16px;
    background-color: var(--wp--preset--color--base);
    box-shadow: none;
}

.pj-author-box .wp-block-avatar {
    position: relative;
    flex-shrink: 0;
    padding-bottom: 12px;
}

/* The pixel rule under the avatar (spec decision 17). */
.pj-author-box .wp-block-avatar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--pj-strip);
}

.pj-author-box .wp-block-avatar img {
    border-radius: 50%;
}

/* On phones the photo takes 30% of the box so the bio gets room; capped at its desktop size. */
@media (max-width: 781px) {
    .pj-author-box .wp-block-avatar {
        flex-basis: 30%;
        max-width: 96px;
    }

    .pj-author-box .wp-block-avatar img {
        width: 100%;
        height: auto;
    }
}

/* On phones the author box stacks, so the bio keeps a readable line. */
@media (max-width: 600px) {
    .pj-author-box {
        flex-direction: column;
    }

    .pj-author-box .wp-block-avatar {
        flex-basis: auto;
        width: 96px;
    }
}

.pj-author-box__name {
    color: var(--wp--preset--color--main);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 800;
}

.pj-more-link .wp-block-button__link,
.pj-more-link .wp-block-button__link:hover {
    padding: 0;
    background: none;
    color: var(--wp--preset--color--primary-alt);
    font-weight: 700;
    text-decoration: underline;
}

.pj-more-link .wp-block-button__link:hover {
    color: var(--wp--preset--color--main);
}

.pj-more-link .wp-block-button__link::after {
    content: " \2192" / "";
}

.pj-author-header img {
    border-radius: 50%;
}

/* The author archive header gets the same pixel rule under the avatar as the author box. */
.pj-author-header .wp-block-image {
    position: relative;
    padding-bottom: 12px;
}

.pj-author-header .wp-block-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--pj-strip);
}

.pj-author-header p {
    max-width: 40rem;
}

.pj-author-header p:empty {
    display: none;
}

.pj-post-card .wp-block-post-title {
    font-size: var(--wp--preset--font-size--medium);
}

.pj-post-card .wp-block-post-title a {
    color: var(--wp--preset--color--main);
    text-decoration: none;
}

.pj-post-card .wp-block-post-title a:hover {
    text-decoration: underline;
}

.pj-eyebrow-row .pj-eyebrow {
    display: inline;
}

.pj-eyebrow-row .pj-eyebrow + .pj-eyebrow:not(:empty)::before {
    content: "\00B7\00A0" / "";
}

.pj-tag {
    width: fit-content;
    margin: 0;
    padding: 0.3em 0.8em;
    border: 1px solid var(--wp--preset--color--border-dark);
    border-radius: 999px;
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--main);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
}

.pj-tag:empty {
    display: none;
}

/* Stat tiles (spec 3.5): keyline, no shadow, the strip at the foot. */
.pj-stats > .pj-stat {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(var(--wp--preset--spacing--medium) + 6px);
    border: var(--pj-keyline-navy);
    box-shadow: none;
}

.pj-stats > .pj-stat::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: var(--pj-strip);
}

.pj-stats > .pj-stat:first-child .pj-stat__value {
    color: var(--wp--preset--color--primary);
}

/* WordPress emits auto-fill for the stat grid, which leaves an empty track beside three tiles; auto-fit fills the row. */
.wp-block-group.pj-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.pj-stat__value {
    margin: 0;
    color: var(--wp--preset--color--main);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pj-stat__label {
    margin: 0;
    color: var(--wp--preset--color--secondary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    text-wrap: balance;
}

/* A case study with fewer than three stats shows only the ones it has. */
.pj-stat:has(.pj-stat__value:empty) {
    display: none;
}

.pj-lead {
    color: var(--wp--preset--color--primary);
    font-family: var(--pj-serif);
    font-style: italic;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
}

.wp-block-post-content {
    counter-reset: pj-section;
}

.pj-numbered {
    display: flex;
    align-items: center;
    gap: 0.6em;
    counter-increment: pj-section;
}

.pj-numbered::before {
    content: counter(pj-section);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 6px;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--primary);
    font-size: 0.6em;
}

.wp-block-post-content .pj-pull-quote.alignwide {
    max-width: min(100%, 52rem);
    padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium);
    border-radius: 16px;
}

/* The quote mark is decoration; the orange-on-navy pair is only tested as non-text (3.47). */
.pj-pull-quote::before {
    content: "\201C" / "";
    display: block;
    height: 0.5em;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 5rem;
    line-height: 1;
}

.pj-pull-quote p {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 800;
    line-height: 1.25;
}

.pj-pull-quote:has(p:empty) {
    display: none;
}

.pj-case-card .wp-block-read-more {
    font-weight: 700;
}

/* The read-more link sits at the card's foot, so links line up across a row, and takes the underline every card link has. */
.wp-block-group.pj-case-card:has(> .wp-block-read-more) {
    display: flex;
    flex-direction: column;
}

.wp-block-group.pj-case-card > .wp-block-read-more {
    margin-top: auto;
    padding-top: var(--wp--style--block-gap, 1.2rem);
    align-self: flex-start;
    text-decoration: underline;
}

/* One orange figure per row (gamut stat tiles): the first card's number is orange, the rest are navy. */
.wp-block-post-template > .wp-block-post:not(:first-child) .pj-result-badge__value {
    color: var(--wp--preset--color--main);
}

.pj-answer + .pj-stars {
    margin-top: var(--wp--preset--spacing--medium);
}

.pj-problem-grid {
    display: grid;
    gap: var(--wp--preset--spacing--medium);
}

@media (min-width: 600px) {
    .pj-problem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pj-problem-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* A pixel glyph in place of an icon, one per card by position. */
.pj-problem-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    margin-bottom: 0.75rem;
    background-repeat: no-repeat;
}

.pj-problem-grid > .pj-problem-card:nth-child(1)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect x='0' y='24' width='12' height='12' fill='%23cc4700'/><rect x='12' y='12' width='12' height='12' fill='%232e94b2'/><rect x='24' y='0' width='12' height='12' fill='%2300213f'/><rect x='12' y='24' width='12' height='12' fill='%23cc4700' opacity='.35'/></svg>");
}

.pj-problem-grid > .pj-problem-card:nth-child(2)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect x='0' y='0' width='12' height='12' fill='%232e94b2'/><rect x='12' y='0' width='12' height='12' fill='%232e94b2' opacity='.4'/><rect x='0' y='12' width='12' height='12' fill='%2300213f'/><rect x='24' y='24' width='12' height='12' fill='%23cc4700'/></svg>");
}

.pj-problem-grid > .pj-problem-card:nth-child(3)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect x='12' y='12' width='12' height='12' fill='%2300213f'/><rect x='0' y='0' width='12' height='12' fill='%23cc4700' opacity='.5'/><rect x='24' y='0' width='12' height='12' fill='%232e94b2' opacity='.5'/><rect x='0' y='24' width='12' height='12' fill='%232e94b2' opacity='.5'/><rect x='24' y='24' width='12' height='12' fill='%23cc4700' opacity='.5'/></svg>");
}

.pj-problem-grid > .pj-problem-card:nth-child(4)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect x='0' y='0' width='12' height='12' fill='%2300213f'/><rect x='12' y='0' width='12' height='12' fill='%232e94b2'/><rect x='24' y='0' width='12' height='12' fill='%23cc4700'/><rect x='0' y='12' width='12' height='12' fill='%23cc4700' opacity='.25'/><rect x='0' y='24' width='12' height='12' fill='%232e94b2' opacity='.25'/></svg>");
}

.pj-problem-card > * {
    margin-block: 0 0.5em;
}

.pj-problem-card__thought {
    color: var(--wp--preset--color--main);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    line-height: 1.3;
}

/* A featured quote, and a lone quote placed directly in the content, is the callout (spec 3.5). */
.wp-block-quote.pj-testimonial--featured,
.wp-block-post-content > .wp-block-quote.pj-testimonial,
.wp-block-post-content > section.wp-block-group > .wp-block-quote.pj-testimonial {
    padding: var(--wp--preset--spacing--large) clamp(1.5rem, 5vw, 4.5rem) var(--wp--preset--spacing--medium);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.4;
}

.wp-block-quote.pj-testimonial--featured::before,
.wp-block-post-content > .wp-block-quote.pj-testimonial::before,
.wp-block-post-content > section.wp-block-group > .wp-block-quote.pj-testimonial::before {
    left: 1rem;
    top: 0.25rem;
    font-size: 5rem;
}

.wp-block-quote.pj-testimonial--featured > p,
.wp-block-post-content > .wp-block-quote.pj-testimonial > p,
.wp-block-post-content > section.wp-block-group > .wp-block-quote.pj-testimonial > p {
    max-width: 44rem;
}

.pj-testimonial-row > .wp-block-quote.pj-testimonial {
    font-size: var(--wp--preset--font-size--base);
}

.pj-testimonial-row {
    display: grid;
    gap: var(--wp--preset--spacing--medium);
    margin-top: var(--wp--preset--spacing--medium);
}

@media (min-width: 782px) {
    .pj-testimonial-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The GHL calendar iframe starts at 0px and grows once it loads, which pushed the rest of /book/ down. Reserve a little
   under its loaded height at each of its layout steps (measured 2026-10-05: 905, 963, 1077 and 785px). */
.pj-book-calendar {
    min-height: 900px;
}

@media (min-width: 600px) {
    .pj-book-calendar {
        min-height: 960px;
    }
}

@media (min-width: 800px) {
    .pj-book-calendar {
        min-height: 1070px;
    }
}

@media (min-width: 1100px) {
    .pj-book-calendar {
        min-height: 780px;
    }
}

/* MemberPress's login form ships a gray Log In button (about 3:1 on white) and no focus style on its links and
   password toggle. Use the site's own button colors and focus outline (theme.json elements.button) until members
   move to GHL after launch. */
.mp_login_form input[type="submit"] {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-weight: 700;
}

.mp_login_form input[type="submit"]:hover,
.mp_login_form input[type="submit"]:active {
    background: var(--wp--preset--color--main);
    border-color: var(--wp--preset--color--main);
    color: var(--wp--preset--color--base);
}

.mp_wrapper a:focus-visible,
.mp_wrapper button:focus-visible,
.mp_wrapper input:focus-visible,
.mp_login_form input[type="submit"]:focus-visible {
    outline: 3px solid var(--wp--preset--color--primary-alt);
    outline-offset: 3px;
}

/* Service hero (spec 3.5): the text holds a 44rem column on the left of the wide width. */
body.page-template-page-service .wp-block-post-content > .is-style-pj-glow:first-child:has(> .pj-price) > :is(h1, .pj-eyebrow, .pj-answer, .pj-price, .pj-price + .has-small-font-size) {
    max-width: 44rem;
    /* Core's constrained layout sets these margins with !important, as .is-layout-constrained > .pj-answer already works around. */
    margin-left: max(0px, calc((100% - 1260px) / 2)) !important;
    margin-right: auto !important;
}

/* The price is its own row under the answer, with the serif line attached to it (gamut 03). */
body.page-template-page-service .wp-block-post-content > .is-style-pj-glow:first-child:has(> .pj-price) > .pj-price {
    margin-block-start: 1.25rem;
}

body.page-template-page-service .wp-block-post-content > .is-style-pj-glow:first-child:has(> .pj-price) > .pj-price + .has-small-font-size {
    margin-block-start: 0.35rem;
}

/* A section's own intro paragraph wraps at 44rem but keeps its box, so it stays flush with the cards under it. The padding is
   worked from the section's capped width, and the proof label, the gradient band and the service hero's own paragraphs are left alone. */
.wp-block-post-content > section.wp-block-group:not(.pj-proof):not(.is-style-pj-gradient) > p:not(.pj-eyebrow):not(.has-text-align-center):not(.pj-answer):not(.pj-price):not(.pj-price + .has-small-font-size) {
    padding-inline-end: max(0px, min(100%, 1260px) - 44rem);
}

/* The gradient band's column is 860px, so its intro gets its own measure. */
.wp-block-post-content > section.wp-block-group.is-style-pj-gradient > p:not(.pj-eyebrow):not(.has-text-align-center) {
    padding-inline-end: max(0px, min(100%, 860px) - 44rem);
}

.pj-team__pm > .wp-block-group {
    max-width: 40rem;
}

/* Name, role and bio read as one unit, one even step apart (Jeff, 2026-10-27); the block gap put 32px before the bio only. */
.pj-team__pm > .wp-block-group > * {
    margin-block: 0;
}

.pj-team__pm > .wp-block-group > * + * {
    margin-block-start: 0.4rem;
}

/* On phones the project manager rows wrap, so each bio gets the full width under its photo. */
@media (max-width: 599px) {
    .wp-block-group.pj-team__pm {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

/* Body copy on posts, case studies and default-template pages is capped at 60ch on the column's left edge (decision P4). WordPress gives every paragraph and list a class, so the plain block classes are matched too. Home and section groups keep their own measure. */
body:is(.single-post, .single-pj_case_study, .page-template-default:not(.home)) :is(.wp-block-post-content, .wp-block-post-content > .wp-block-group.is-layout-constrained:not(section)) > :is(p, ul, ol):is(:not([class]), [class="wp-block-paragraph"], [class="wp-block-list"]) {
    max-width: 60ch;
    margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* Post and legal-page subheads (two posts carry bare h2 tags with no block class) balance their lines, and an H2 that opens a later section takes the large step above it
   (the gamut gives a heading more air above than below). An H2 wrapped as a group's first child moves with its group. */
body:is(.single-post, .page-template-default:not(.home)) :is(.wp-block-post-content, .wp-block-post-content > .wp-block-group.is-layout-constrained:not(section)) > :is(h2, h3, h4) {
    text-wrap: balance;
}

body:is(.single-post, .page-template-default:not(.home)) :is(.wp-block-post-content, .wp-block-post-content > .wp-block-group.is-layout-constrained:not(section)) > h2:not(:first-child),
body.page-template-default:not(.home) .wp-block-post-content > .wp-block-group.is-layout-constrained:not(section):not(:first-child):has(> h2:first-child) {
    margin-block-start: var(--wp--preset--spacing--large);
}

/* Privacy stores one table as three table blocks; they read as one box with one header row. */
body.page-template-default .wp-block-post-content > .wp-block-table + .wp-block-table {
    margin-block-start: 0;
}

body.page-template-default .wp-block-post-content > .wp-block-table:has(+ .wp-block-table) table {
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

body.page-template-default .wp-block-post-content > .wp-block-table + .wp-block-table table {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

/* At phone width the fixed-layout table breaks words at hyphenation points, not mid-word. */
@media (max-width: 599px) {
    body.page-template-default .wp-block-post-content .wp-block-table :is(td, th) {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        padding-inline: 0.6em;
    }
}

/* Calculator help, math and result lines hold the 44rem card measure (spec 3.3); the ch cap keeps the small lines near 70 characters. */
.pj-tool :is(.pj-tool__result p, .pj-tool__help, .pj-tool__math) {
    max-width: min(44rem, 70ch);
}

/* The FAQ sits in the 740px column, on the title band's edge (decision P4). */
.wp-block-post-content > section.wp-block-group:has(> .pj-faq) > * {
    max-width: var(--wp--style--global--content-size);
}

/* Photos are 16px (spec 3.4), chips sit on the 6px step. */
.wp-block-post-featured-image img {
    border-radius: 16px;
}

.wp-block-query-pagination a {
    border-radius: 6px;
}

/* Gravity Forms runs without its own framework here, so its submit button takes the theme's button look (Contact page,
   Jeff 2026-10-27). */
.gform_wrapper .gform_button {
    padding: 0.75em 1.25em;
    border: 0;
    border-radius: var(--wp--preset--border-radius--full);
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.gform_wrapper .gform_button:hover {
    background-color: var(--wp--preset--color--main);
}

.gform_wrapper .gform_button:focus-visible {
    outline: 3px solid var(--wp--preset--color--primary-alt);
    outline-offset: 3px;
}