/* Card-V public profile — modern premium system, user-driven palette (--c-* vars).
   Mobile-first. Class names unchanged. v7 — landing-page design language. */

:root {
    --c-primary: #0e7c8b;
    --c-accent2: var(--c-primary);
    --c-bg: #ffffff;
    --c-bg2: #f3f6f8;
    --c-text: #14202b;
    --c-btn-text: #ffffff;
    --c-social: #0e7c8b;
    --font-scale: 1;
    --font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --pf-radius: 18px;
    --pf-display: "Bricolage Grotesque", var(--font-family);
    --pf-ease: cubic-bezier(.16, 1, .3, 1);
    --pf-spring: cubic-bezier(.22, 1.2, .36, 1);

    /* derived surfaces — a "panel over a tinted field" like a real product page */
    --pf-line:  color-mix(in srgb, var(--c-text) 12%, transparent);
    --pf-line2: color-mix(in srgb, var(--c-text) 20%, transparent);
    --pf-card:  color-mix(in srgb, var(--c-bg) 92%, var(--c-bg2));
    --pf-glow:  color-mix(in srgb, var(--c-primary) 26%, transparent);
    --pf-shadow: 0 30px 80px -32px color-mix(in srgb, var(--c-text) 40%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body.pf {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-family);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: 108px;
    overflow-x: hidden;
}

a { color: var(--c-primary); text-decoration: none; }
img { max-width: 100%; display: block; }

.pf-preview-flag {
    background: #b4232f; color: #fff; text-align: center;
    font-size: 13px; padding: 7px; position: sticky; top: 0; z-index: 30;
    letter-spacing: .02em;
}

.pf-wrap {
    position: relative;
    max-width: 580px; margin: 0 auto; padding: 0 20px 40px;
}

/* ---- cover + ambient hero glow ---- */
.pf-cover {
    position: relative;
    margin: 0 -20px 0;
    overflow: hidden;
    max-height: 260px;
}
.pf-cover img {
    width: 100%; max-height: 260px; object-fit: cover;
    animation: pf-cover-in 1000ms var(--pf-ease) both;
}
.pf-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, var(--c-bg) 99%);
}
@keyframes pf-cover-in { from { transform: scale(1.09); opacity: .35; } to { transform: scale(1); opacity: 1; } }

.pf-head {
    position: relative; text-align: center; padding-top: 34px;
    animation: pf-head-in 680ms var(--pf-ease) both;
}
/* tinted wash + glow behind the identity block — reads on light and dark */
.pf-head::before {
    content: ""; position: absolute; z-index: -1;
    inset: -60px -32% auto -32%; height: 340px;
    background:
        radial-gradient(50% 62% at 50% 26%, var(--pf-glow), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 9%, transparent), transparent 78%);
    filter: blur(10px); opacity: 1; pointer-events: none;
}
.pf-head--overlap { margin-top: -66px; }
@keyframes pf-head-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pf-avatar {
    width: 124px; height: 124px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 18px;
    border: 4px solid var(--c-bg);
    box-shadow:
        0 0 0 1px var(--pf-line),
        0 0 0 6px color-mix(in srgb, var(--c-primary) 14%, transparent),
        0 18px 44px -16px color-mix(in srgb, var(--c-text) 55%, transparent);
    animation: pf-avatar-in 680ms var(--pf-spring) 90ms both;
}
@keyframes pf-avatar-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
.pf-avatar--square { border-radius: var(--pf-radius); }
.pf-avatar--lg { width: 140px; height: 140px; }
.pf-avatar--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--c-primary), var(--c-accent2));
    color: var(--c-btn-text);
    font-size: 46px; font-weight: 800; text-transform: uppercase;
    font-family: var(--pf-display); line-height: 1;
    box-shadow:
        0 0 0 4px var(--c-bg),
        0 0 0 5px var(--pf-line2),
        0 18px 44px -16px color-mix(in srgb, var(--c-primary) 55%, transparent);
}

.pf-name {
    margin: 0 0 6px;
    font-family: var(--pf-display);
    font-size: calc(1.95rem * var(--font-scale));
    font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
    text-wrap: balance;
}
.pf-name--display { font-size: calc(2.4rem * var(--font-scale)); }
.pf-role { margin: 0 0 2px; opacity: .9; font-weight: 600; }
.pf-company { margin: 0 0 2px; opacity: .66; }
.pf-loc { margin: 8px 0 0; opacity: .66; font-size: .9em; }
.pf-loc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pf-bio { margin: 18px 0 0; opacity: .9; }
.pf-bio--lead { text-align: center; font-size: 1.05em; max-width: 42ch; margin-inline: auto; }

/* scroll-reveal wrapper (JS adds .is-in) */
.pf-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--pf-ease), transform .6s var(--pf-ease); }
.pf-reveal.is-in { opacity: 1; transform: none; }

/* ---- social ---- */
.pf-social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 24px 0 0; }
.pf-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    color: var(--c-social);
    transition: transform .22s var(--pf-spring), background .18s ease, color .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.pf-social a:hover {
    background: var(--c-social); color: var(--c-btn-text); border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--c-social) 65%, transparent);
}
.pf-social svg, .pf-social img { width: 20px; height: 20px; }

/* ---- links ---- */
.pf-links { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; }
.pf-link {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 17px 44px 17px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent2));
    color: var(--c-btn-text);
    font-weight: 700; letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--c-primary) 78%, transparent);
    transition: transform .2s var(--pf-spring), box-shadow .24s var(--pf-ease), filter .15s ease;
}
.pf-link::after {
    content: "→";
    position: absolute; inset-inline-end: 20px;
    opacity: .6; transition: transform .22s var(--pf-spring), opacity .15s ease;
}
.is-rtl .pf-link::after { content: "←"; }
.pf-link:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--c-primary) 65%, transparent); }
.pf-link:hover::after { transform: translateX(5px); opacity: 1; }
.is-rtl .pf-link:hover::after { transform: translateX(-5px); }
.pf-link:active { transform: translateY(0) scale(.99); }

.pf--btn-outline .pf-link { background: transparent; color: var(--c-primary); border: 1.5px solid var(--pf-line2); box-shadow: none; }
.pf--btn-outline .pf-link:hover { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.pf--btn-pill .pf-link { border-radius: 999px; }
.pf--btn-soft .pf-link { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); box-shadow: none; }

/* ---- sections ---- */
.pf-sec { margin: 40px 0 0; }
.pf-sec h2 {
    font-family: var(--pf-display);
    font-size: calc(.82rem * var(--font-scale));
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-primary);
    margin: 0 0 16px;
    display: flex; align-items: center; gap: 12px;
}
.pf-sec h2::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--pf-line), transparent);
}
.is-rtl .pf-sec h2::after { background: linear-gradient(270deg, var(--pf-line), transparent); }
.pf-sec--text .pf-prose { font-size: 1.04em; }
.pf-prose { opacity: .9; }

.pf-hours {
    display: grid; gap: 2px; margin: 0;
    background: var(--pf-card); border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius); padding: 6px 16px;
}
.pf-hours > div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--pf-line); }
.pf-hours > div:last-child { border-bottom: 0; }
.pf-hours dt { font-weight: 600; margin: 0; }
.pf-hours dd { margin: 0; opacity: .72; font-variant-numeric: tabular-nums; }

.pf-embed { position: relative; padding-top: 56%; border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-card); border: 1px solid var(--pf-line); }
.pf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ banner / slider ============
   One image is a banner. Several become a slider the visitor swipes, with a
   dot per slide — scroll snapping does the work, so it stays smooth with no
   script and keeps working when JavaScript is off. */
.pf-banner {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-radius: var(--pf-radius);
}
.pf-banner::-webkit-scrollbar { display: none; }
.pf-banner--s { --pf-ban-h: 130px; }
.pf-banner--m { --pf-ban-h: 190px; }
.pf-banner--l { --pf-ban-h: 260px; }
.pf-slide {
    margin: 0; position: relative; scroll-snap-align: center;
    border-radius: var(--pf-radius); overflow: hidden; min-width: 0;
}
.pf-slide a { display: block; color: inherit; text-decoration: none; }
.pf-slide img {
    display: block; width: 100%; height: var(--pf-ban-h, 190px);
    object-fit: cover; border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
}
.pf-slide figcaption {
    position: absolute; inset-inline: 0; inset-block-end: 0;
    padding: 26px 14px 12px; font-size: .92rem; font-weight: 600; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    border-end-start-radius: var(--pf-radius); border-end-end-radius: var(--pf-radius);
}
.pf-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.pf-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: color-mix(in srgb, var(--c-text) 28%, transparent);
    transition: background .2s ease, transform .2s ease;
}
.pf-dot:hover, .pf-dot:focus-visible { background: var(--c-primary); transform: scale(1.25); }
@media (min-width: 620px) {
    .pf-banner--s { --pf-ban-h: 170px; }
    .pf-banner--m { --pf-ban-h: 250px; }
    .pf-banner--l { --pf-ban-h: 340px; }
}

/* ============ a background per row ============
   The owner can put a tint, a colour, a gradient or a photo behind any block.
   The row bleeds slightly past the card's gutter so it reads as a band. */
.pf-row {
    position: relative;
    margin-inline: -14px;
    padding-inline: 14px;
    background: var(--row-c);
}
.pf-row--pad-s { padding-block: 10px; }
.pf-row--pad-m { padding-block: 22px; }
.pf-row--pad-l { padding-block: 38px; }
.pf-row--round { border-radius: 22px; }
.pf-row--tint { background: color-mix(in srgb, var(--row-c) 45%, transparent); }
.pf-row--gradient { background: linear-gradient(160deg, var(--row-c), var(--row-c2)); }
.pf-row--image {
    background-image: var(--row-img);
    background-size: cover; background-position: center;
    isolation: isolate;
}
/* the wash that keeps words readable over a photo */
.pf-row--image::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: rgba(0, 0, 0, var(--row-veil, .35));
    z-index: 0;
}
.pf-row > * { position: relative; z-index: 1; }
.pf-row--image, .pf-row--light { color: #fff; }
.pf-row--image h2, .pf-row--light h2, .pf-row--image h3, .pf-row--light h3 { color: inherit; }
.pf-row--dark { color: var(--c-text); }
.pf-row + .pf-row { margin-top: 0; }

.pf-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pf-gallery__cell { margin: 0; padding: 0; display: block; position: relative; min-width: 0; }
.pf-gallery img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px;
    border: 1px solid var(--pf-line);
    transition: transform .4s var(--pf-ease), box-shadow .3s ease;
}
.pf-gallery img:hover { transform: scale(1.02); box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--c-text) 50%, transparent); }

.pf-cards { display: grid; gap: 12px; }
.pf-card-item {
    display: flex; gap: 0;
    background: linear-gradient(180deg, var(--pf-card), color-mix(in srgb, var(--c-bg2) 60%, var(--c-bg)));
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius); overflow: hidden;
    transition: transform .24s var(--pf-ease), border-color .2s ease, box-shadow .28s ease;
}
.pf-card-item:hover {
    transform: translateY(-3px); border-color: var(--pf-line2);
    box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--c-text) 45%, transparent);
}
.pf-card-item__media { width: 112px; flex: none; align-self: stretch; background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.pf-card-item__media img,
.pf-card-item__media video { width: 100%; height: 100%; min-height: 112px; object-fit: cover; display: block; }
.pf-card-item__media .pf-embed { padding-top: 100%; border-radius: 0; border: 0; height: 100%; }
.pf-card-item__body { padding: 14px 16px; }
.pf-card-item__body h3 { margin: 0 0 3px; font-size: 1.02em; font-family: var(--pf-display); font-weight: 700; letter-spacing: -.01em; }
.pf-price { font-weight: 700; color: var(--c-primary); }
.pf-card-item__body p { margin: 6px 0 0; opacity: .74; font-size: .92em; }

/* ---- portfolio ---- */
.pf-portfolio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pf-work {
    display: flex; flex-direction: column;
    background: var(--pf-card); border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius); overflow: hidden;
    color: inherit; text-decoration: none;
    transition: transform .24s var(--pf-ease), border-color .2s ease, box-shadow .28s ease;
}
.pf-work:hover {
    transform: translateY(-4px); border-color: var(--pf-line2);
    box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--c-text) 45%, transparent);
}
.pf-work__media { aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.pf-work__media img,
.pf-work__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-work__media .pf-embed { padding-top: 62.5%; border-radius: 0; border: 0; }
.pf-work__body { padding: 14px 16px; }
.pf-work__body h3 { margin: 0 0 3px; font-size: 1.02em; font-family: var(--pf-display); font-weight: 700; }
.pf-work__body p { margin: 6px 0 0; opacity: .74; font-size: .92em; }
.pf-work__cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-weight: 700; font-size: .82em; color: var(--c-primary); }
.pf-work__cta::after { content: "→"; transition: transform .2s var(--pf-spring); }
.pf-work:hover .pf-work__cta::after { transform: translateX(4px); }
@media (max-width: 560px) { .pf-portfolio { grid-template-columns: 1fr; } }

.pf-quotes { display: grid; gap: 12px; }
.pf-quote {
    margin: 0; padding: 20px 22px;
    background: var(--pf-card); border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius); position: relative;
}
.pf-quote::before {
    content: "\201C"; position: absolute; top: 2px; inset-inline-start: 14px;
    font-family: var(--pf-display); font-size: 3rem; line-height: 1; opacity: .18; color: var(--c-primary);
}
.pf-quote p { margin: 0 0 10px; font-size: 1.02em; }
.pf-quote cite { font-style: normal; font-weight: 700; opacity: .9; }
.pf-quote cite span { font-weight: 400; opacity: .65; }
/* optional author portrait — only present when the card actually uploaded one */
.pf-quote__face {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    flex: none; vertical-align: middle; margin-inline-end: 10px;
    border: 1px solid var(--pf-line);
}

/* ---- contact ---- */
.pf-contact__list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.pf-contact__list a {
    color: inherit; text-decoration: none; padding: 14px 16px;
    background: var(--pf-card); border: 1px solid var(--pf-line);
    border-radius: 14px; display: block; font-weight: 500;
    transition: transform .18s var(--pf-ease), background .18s ease, border-color .18s ease;
}
.pf-contact__list a:hover {
    transform: translateX(4px); border-color: var(--pf-line2);
    background: color-mix(in srgb, var(--c-primary) 8%, var(--pf-card));
}
.is-rtl .pf-contact__list a:hover { transform: translateX(-4px); }
.pf-form { display: grid; gap: 13px; }
.pf-form label { display: grid; gap: 5px; font-size: .85em; }
.pf-form input, .pf-form textarea {
    font: inherit; padding: 12px 14px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
    background: var(--c-bg); color: var(--c-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pf-form input:focus, .pf-form textarea:focus {
    outline: none; border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 24%, transparent);
}
.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pf-btn { font: inherit; font-weight: 600; padding: 13px 20px; border-radius: 12px; border: none; cursor: pointer; transition: transform .16s var(--pf-spring), filter .15s ease; }
.pf-btn:active { transform: scale(.98); }
.pf-btn--primary { background: var(--c-primary); color: var(--c-btn-text); }
.pf-formmsg { padding: 13px 15px; border-radius: 12px; font-size: .92em; }
.pf-formmsg--ok { background: color-mix(in srgb, #12805c 16%, transparent); color: #12805c; }
.pf-formmsg--err { background: color-mix(in srgb, #bd4436 16%, transparent); color: #bd4436; }

/* ---- action bar — floating pill group ---- */
.pf-actionbar {
    position: fixed; left: 50%; transform: translateX(-50%);
    inset-block-end: calc(16px + env(safe-area-inset-bottom));
    display: flex; gap: 8px;
    padding: 8px;
    width: calc(100% - 32px); max-width: 460px;
    background: color-mix(in srgb, var(--c-bg) 78%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--c-text) 55%, transparent);
    z-index: 20;
    animation: pf-bar-in 700ms var(--pf-spring) 450ms both;
}
@keyframes pf-bar-in { from { transform: translate(-50%, 130%); } to { transform: translate(-50%, 0); } }
.pf-actionbar__btn {
    flex: 1; text-align: center;
    padding: 12px 10px; border-radius: 999px;
    font: inherit; font-weight: 700; font-size: .9em;
    text-decoration: none;
    border: 1px solid var(--pf-line2);
    background: transparent; color: var(--c-text);
    cursor: pointer;
    transition: transform .16s var(--pf-spring), background .16s ease, color .16s ease, border-color .16s ease;
}
.pf-actionbar__btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pf-actionbar__btn:active { transform: scale(.96); }
.pf-actionbar__btn--primary {
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent2));
    color: var(--c-btn-text); border-color: transparent;
}
.pf-actionbar__btn--primary:hover { color: var(--c-btn-text); filter: brightness(1.05); }

/* ---- QR modal ---- */
.pf-qr-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 40; padding: 24px;
    animation: pf-fade .2s ease;
}
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
.pf-qr-modal__inner {
    background: #fff; padding: 22px; border-radius: 20px; text-align: center;
    animation: pf-pop .34s var(--pf-spring);
}
@keyframes pf-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.pf-qr-modal__inner img { width: 240px; height: 240px; }
.pf-qr-modal__inner button {
    margin-top: 14px; font: inherit; padding: 9px 18px; border-radius: 10px;
    border: 1px solid #ddd; background: #f5f5f5; cursor: pointer;
}

.pf-footer { text-align: center; padding: 32px 16px 8px; font-size: 12px; opacity: .5; }
.pf-footer a { color: inherit; }

/* ==========================================================================
   Desktop — the profile becomes a floating "card" on a tinted field, the way
   a real product page frames it. Mobile stays edge-to-edge.
   ========================================================================== */
@media (min-width: 600px) {
    /* The field always sits a step away from the card, whatever the palette —
       lighter for dark cards, subtly darker for light ones — so the card lifts. */
    body.pf {
        background:
            radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent 70%),
            color-mix(in srgb, var(--c-bg) 78%, color-mix(in srgb, var(--c-text) 60%, #8a8a8a));
        padding-top: 56px; padding-bottom: 150px;
        min-height: 100vh;
    }
    body.pf::before { opacity: .4; }
    .pf-wrap {
        max-width: 604px;
        background: color-mix(in srgb, var(--c-bg) 96%, #ffffff);
        border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
        border-radius: 28px;
        box-shadow:
            0 1px 0 color-mix(in srgb, #ffffff 30%, transparent) inset,
            0 2px 8px color-mix(in srgb, var(--c-text) 12%, transparent),
            0 40px 90px -36px color-mix(in srgb, var(--c-text) 55%, transparent);
        padding: 0 34px 48px;
        overflow: hidden;
    }
    .pf-cover { margin: 0 -34px; border-radius: 27px 27px 0 0; }
    .pf-head::before { inset: -40px -22% auto -22%; }
    .pf-head { padding-top: 40px; }
}
@media (min-width: 900px) {
    .pf-wrap { max-width: 620px; }
}

/* ==========================================================================
   Template identities — palette (--c-*), display face (--pf-display) and the
   body pattern class come from the renderer. Everything below is styling only.
   ========================================================================== */

/* ---- background patterns (very low contrast, sit behind everything) ---- */
body.pf::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--c-bg);
}
.pf-pat-dots-soft::before {
    background-image: radial-gradient(color-mix(in srgb, var(--c-text) 7%, transparent) 1px, transparent 1.4px);
    background-size: 22px 22px;
}
.pf-pat-dots-bold::before {
    background-image: radial-gradient(color-mix(in srgb, var(--c-accent2) 16%, transparent) 2px, transparent 2.5px);
    background-size: 26px 26px;
}
.pf-pat-grid-fine::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--c-text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--c-text) 5%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
}
.pf-pat-plus-grid::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--c-primary) 10%, transparent) 2px, transparent 2px),
        linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 10%, transparent) 2px, transparent 2px);
    background-size: 44px 44px; background-position: center;
    -webkit-mask-image: radial-gradient(circle at center, #000 2px, transparent 3px);
    mask-image: radial-gradient(circle at center, #000 2px, transparent 3px);
    -webkit-mask-size: 44px 44px; mask-size: 44px 44px;
}
.pf-pat-lines-diag::before {
    background-image: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--c-accent2) 8%, transparent) 0 1px,
        transparent 1px 12px);
}
.pf-pat-blob-glow::before {
    background-image:
        radial-gradient(38% 30% at 12% 8%, color-mix(in srgb, var(--c-primary) 26%, transparent), transparent 70%),
        radial-gradient(42% 34% at 92% 22%, color-mix(in srgb, var(--c-accent2) 22%, transparent), transparent 72%);
}
.pf-pat-menu-rule::before {
    background-image: repeating-linear-gradient(0deg,
        transparent 0 39px,
        color-mix(in srgb, var(--c-accent2) 7%, transparent) 39px 40px);
}

/* ---- STANDARD — friendly, rounded ---- */
.pf-tpl-standard .pf-name { letter-spacing: -.02em; }
.pf-tpl-standard .pf-link { border-radius: 16px; }

/* details strip (professional renderer) */
.pf-strip {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92em;
}
.pf-strip li { position: relative; opacity: .82; }
.pf-strip li + li::before {
    content: "·"; position: absolute; inset-inline-start: -11px; opacity: .5;
}
.pf-strip a { color: inherit; }

/* ---- PROFESSIONAL — structured, cool ---- */
.pf-tpl-professional .pf-pro-head { border-bottom: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); padding-bottom: 18px; }
.pf-tpl-professional .pf-name { letter-spacing: -.03em; }
.pf-tpl-professional .pf-name::after {
    content: ""; display: block; width: 44px; height: 3px; margin: 12px auto 0;
    background: var(--c-primary); border-radius: 2px;
}
.pf-tpl-professional .pf-pro-id .pf-name::after { margin-inline: 0; }
.pf-tpl-professional .pf-strip { justify-content: center; }
.pf-tpl-professional .pf-sec h2 { text-transform: uppercase; letter-spacing: .08em; font-size: calc(.86rem * var(--font-scale)); opacity: .75; }

/* ---- CREATIVE — bold, glow, gradient accents ---- */
.pf-tpl-creative .pf-name--display { font-size: calc(2.4rem * var(--font-scale)); letter-spacing: -.03em; }
.pf-tpl-creative .pf-link {
    background: linear-gradient(120deg, var(--c-primary), var(--c-accent2));
    box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--c-primary) 70%, transparent);
}
.pf-tpl-creative .pf-sec h2 {
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pf-tpl-creative .pf-social a { border-radius: 14px; }

/* PHOTOGRAPHER — its styles live in their own isolated stylesheet,
   public/assets/css/templates/photographer.css, which CardRenderer links
   only for that template key. That file is also what the ZIP template
   package ships, so the design travels with the template. */


/* ---- DOCTOR / CLINIC — calm, airy, trustworthy ---- */
.pf-tpl-doctor .pf-wrap { max-width: 600px; }
.pf-tpl-doctor .pf-pro-head { text-align: center; border: 0; }
.pf-tpl-doctor .pf-pro-id { flex-direction: column; align-items: center; gap: 10px; }
.pf-tpl-doctor .pf-avatar--square { border-radius: 50%; }
.pf-tpl-doctor .pf-name::after { display: none; }
.pf-tpl-doctor .pf-strip { list-style: none; flex-direction: column; align-items: center; gap: 6px; margin: 16px 0 0; border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent); border-radius: 14px; padding: 14px; background: var(--c-bg2); }
.pf-tpl-doctor .pf-strip li { list-style: none; }
.pf-tpl-doctor .pf-strip li + li::before { content: none; }
.pf-tpl-doctor .pf-sec { background: var(--c-bg2); border-radius: 16px; padding: 20px; margin-top: 16px; }
.pf-tpl-doctor .pf-sec h2 { text-transform: none; letter-spacing: -.01em; opacity: 1; font-size: calc(1.15rem * var(--font-scale)); }
.pf-tpl-doctor .pf-hours > div { border-color: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.pf-tpl-doctor .pf-link { border-radius: 12px; }

/* ---- REAL ESTATE — navy + brass, refined serif ---- */
.pf-tpl-realestate .pf-name { letter-spacing: 0; font-weight: 500; }
.pf-tpl-realestate .pf-pro-head { border-bottom: 2px solid var(--c-accent2); padding-bottom: 16px; }
.pf-tpl-realestate .pf-name::after { background: var(--c-accent2); width: 56px; height: 2px; }
.pf-tpl-realestate .pf-sec h2 { color: var(--c-primary); text-transform: uppercase; letter-spacing: .12em; font-size: calc(.82rem * var(--font-scale)); }
.pf-tpl-realestate .pf-sec h2::before {
    content: ""; display: inline-block; width: 22px; height: 2px; background: var(--c-accent2);
    vertical-align: middle; margin-inline-end: 10px;
}
.pf-tpl-realestate .pf-portfolio { grid-template-columns: 1fr; }
.pf-tpl-realestate .pf-work { border: 1px solid color-mix(in srgb, var(--c-primary) 14%, transparent); border-radius: 4px; }
.pf-tpl-realestate .pf-link { border-radius: 2px; background: var(--c-primary); }
.pf-tpl-realestate .pf-actionbar__btn--primary { background: var(--c-accent2); color: #1b1811; border-color: var(--c-accent2); }

/* ---- RESTAURANT / CAFÉ — warm, menu-forward ---- */
.pf-resto { max-width: 580px; }
.pf-cover--resto { margin: 0 -18px; max-height: 240px; position: relative; }
.pf-cover--resto img { max-height: 240px; }
.pf-cover--resto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 30%, transparent) 0%, transparent 30%, var(--c-bg) 97%);
}
.pf-resto-id { text-align: center; padding-top: 24px; position: relative; }
.pf-resto-id.has-cover { margin-top: -40px; }
.pf-resto-id.has-cover .pf-name,
.pf-resto-id.has-cover .pf-role { text-shadow: 0 2px 14px color-mix(in srgb, var(--c-bg) 80%, transparent); }
.pf-avatar--ring { border-radius: 50%; border: 3px solid var(--c-accent2); }
.pf-resto .pf-name--display { font-weight: 500; letter-spacing: 0; }
.pf-resto-tag { margin: 10px auto 0; max-width: 34ch; opacity: .8; font-style: italic; }
.pf-resto-find {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0;
}
.pf-resto-find__item {
    padding: 9px 16px; border-radius: 999px; font-size: .88em; font-weight: 500;
    background: color-mix(in srgb, var(--c-accent2) 14%, transparent);
    color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-accent2) 30%, transparent);
}
.pf-resto-find__item--call { background: var(--c-accent2); color: #1a130a; }
.pf-tpl-restaurant .pf-sec h2 {
    text-align: center; text-transform: uppercase; letter-spacing: .18em;
    font-size: calc(.86rem * var(--font-scale));
}
.pf-tpl-restaurant .pf-sec h2::after {
    content: ""; display: block; width: 40px; height: 2px; background: var(--c-accent2); margin: 10px auto 0;
}
/* services rendered as a menu list with a dotted leader */
.pf-tpl-restaurant .pf-cards { gap: 2px; }
.pf-tpl-restaurant .pf-card-item {
    background: transparent; border-radius: 0; flex-wrap: wrap; align-items: baseline;
    padding: 12px 0; border-bottom: 1px dashed color-mix(in srgb, var(--c-text) 22%, transparent);
}
.pf-tpl-restaurant .pf-card-item__media { display: none; }
.pf-tpl-restaurant .pf-card-item__body { padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; }
.pf-tpl-restaurant .pf-card-item__body h3 { font-size: 1.02em; flex: 1 1 auto; }
.pf-tpl-restaurant .pf-price { order: 2; font-family: var(--pf-display); color: var(--c-accent2); }
.pf-tpl-restaurant .pf-card-item__body p { flex-basis: 100%; margin: 2px 0 0; font-size: .88em; }
.pf-tpl-restaurant .pf-link { background: var(--c-accent2); color: #1a130a; }

/* ---- FREELANCER — bright, punchy, indigo↔cyan ---- */
.pf-tpl-freelancer .pf-name { letter-spacing: -.03em; }
.pf-tpl-freelancer .pf-head::after {
    content: ""; display: block; width: 60px; height: 4px; margin: 14px auto 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent2));
}
.pf-tpl-freelancer .pf-sec h2::before {
    content: "// "; color: var(--c-accent2); font-weight: 700;
}
.pf-tpl-freelancer .pf-link {
    background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary);
    box-shadow: none; border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
}
.pf-tpl-freelancer .pf-link:hover { background: var(--c-primary); color: var(--c-btn-text); }

/* dark-template polish — softer separators, richer cards */
.pf-tpl-creative .pf-card-item,
.pf-tpl-restaurant  .pf-quote,
.pf-tpl-creative .pf-quote { background: color-mix(in srgb, var(--c-text) 6%, var(--c-bg2)); }

@media (min-width: 600px) {
    .pf-gallery { grid-template-columns: repeat(3, 1fr); }
    .pf-tpl-realestate .pf-portfolio { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Category motifs — each template gets a signature heading glyph and one or
   two profession-specific structural touches. Glyphs are masked SVG tinted
   with the card's own --c-primary.
   ========================================================================== */

/* shared: a glyph slot on section headings (base h2 is display:flex) */
.pf-tpl-professional .pf-sec h2::before,
.pf-tpl-creative     .pf-sec h2::before,
.pf-tpl-doctor       .pf-sec h2::before,
.pf-tpl-realestate   .pf-sec h2::before,
.pf-tpl-restaurant   .pf-sec h2::before,
.pf-tpl-freelancer   .pf-sec h2::before {
    content: ""; flex: none; width: 17px; height: 17px;
    background: var(--c-primary);
    -webkit-mask: var(--pf-glyph) center / contain no-repeat;
            mask: var(--pf-glyph) center / contain no-repeat;
}

.pf-tpl-professional { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 19v-7M12 19V6M19 19v-5'/%3E%3C/svg%3E"); }
.pf-tpl-creative     { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3'/%3E%3C/svg%3E"); }
.pf-tpl-doctor       { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h5l2-6 3 12 2-6h8'/%3E%3C/svg%3E"); }
.pf-tpl-realestate   { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.pf-tpl-restaurant   { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v18M5 3v5a2 2 0 0 0 4 0V3'/%3E%3Cpath d='M17 3c-2 1.4-3 4-3 7 0 2 1 3 3 3.2V21'/%3E%3C/svg%3E"); }
.pf-tpl-freelancer   { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); }

/* freelancer: drop the old text prefix now that there's a glyph */
.pf-tpl-freelancer .pf-sec h2::before { content: ""; }

/* centered-heading templates: no flex rule, keep their own underline */
.pf-tpl-restaurant .pf-sec h2 { justify-content: center; }
.pf-tpl-restaurant .pf-sec h2::after { flex: none; height: 2px; width: 40px; background: var(--c-accent2); }
/* (photographer heading + gallery treatment now live in its consolidated block above) */

/* ---- DOCTOR — appointment-card contact + EKG divider ---- */
.pf-tpl-doctor .pf-contact__list a {
    border-inline-start: 3px solid var(--c-primary);
    border-radius: 4px 14px 14px 4px;
}
.pf-tpl-doctor .pf-sec + .pf-sec::before {
    content: ""; display: block; height: 16px; margin: 0 0 20px;
    background: var(--c-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 8h90l6-6 8 12 6-6h124'/%3E%3C/svg%3E") left center / auto 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 8h90l6-6 8 12 6-6h124'/%3E%3C/svg%3E") left center / auto 100% no-repeat;
    opacity: .5;
}

/* ---- REAL ESTATE — listing cards ---- */
.pf-tpl-realestate .pf-work { position: relative; border-top: 3px solid var(--c-accent2); }
.pf-tpl-realestate .pf-work::after {
    content: ""; position: absolute; top: 0; inset-inline-end: 0;
    border-width: 0 26px 26px 0; border-style: solid;
    border-color: transparent var(--c-accent2) transparent transparent;
}
.pf-tpl-realestate .pf-work__body p { font-variant-numeric: tabular-nums; opacity: .8; }

/* ---- RESTAURANT — a "check" divider closes the menu ---- */
.pf-tpl-restaurant .pf-cards { position: relative; padding-bottom: 22px; }
.pf-tpl-restaurant .pf-cards::after {
    content: "• • •"; position: absolute; left: 0; right: 0; bottom: 0;
    text-align: center; letter-spacing: .5em; font-size: .7em;
    color: color-mix(in srgb, var(--c-accent2) 70%, transparent);
}

/* ---- CREATIVE — splash behind the avatar ---- */
.pf-tpl-creative .pf-head::after {
    content: ""; position: absolute; z-index: -1;
    width: 260px; height: 260px; top: -20px; left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    background: linear-gradient(120deg, var(--c-primary), var(--c-accent2));
    border-radius: 42% 58% 63% 37% / 45% 45% 55% 55%;
    filter: blur(26px); opacity: .28;
}

/* ==========================================================================
   Industry families — a lighter identity layer keyed off the template's
   category (body.pf-fam-<category>), so every profession template in the
   catalogue reads as *designed for its trade*, not just recoloured.

   Scoped with :where() so the hand-built .pf-tpl-* templates (professional,
   doctor, creative, restaurant, photographer, realestate, freelancer) always
   keep their own richer treatment — this only fills in the ~40 others.
   ========================================================================== */

/* glyph slot on section headings (base h2 is already display:flex) */
:where(.pf-fam-corporate, .pf-fam-legal, .pf-fam-beauty, .pf-fam-medical,
       .pf-fam-hospitality, .pf-fam-retail, .pf-fam-property, .pf-fam-community)
    .pf-sec h2::before {
    content: ""; flex: none; width: 16px; height: 16px;
    background: var(--c-primary);
    -webkit-mask: var(--pf-glyph, none) center / contain no-repeat;
            mask: var(--pf-glyph, none) center / contain no-repeat;
}

/* ---- CORPORATE — precise, restrained, a keyline on every card ---- */
:where(.pf-fam-corporate) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 19v-7M12 19V6M19 19v-5'/%3E%3C/svg%3E"); }
:where(.pf-fam-corporate) .pf-sec h2 { letter-spacing: .12em; }
:where(.pf-fam-corporate) .pf-card-item,
:where(.pf-fam-corporate) .pf-work { border-radius: 8px; border-inline-start: 3px solid color-mix(in srgb, var(--c-primary) 60%, transparent); }
:where(.pf-fam-corporate) .pf-link { border-radius: 8px; }
:where(.pf-fam-corporate) .pf-name { letter-spacing: -.03em; }

/* ---- LEGAL — serif authority, gold hairline, centred headings ---- */
:where(.pf-fam-legal) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M12 6 5 9m7-3 7 3M5 9a3 3 0 0 0 6 0M12 9l7-3m0 3a3 3 0 0 0 6 0'/%3E%3C/svg%3E"); }
:where(.pf-fam-legal) .pf-sec h2 { font-family: var(--pf-display); text-transform: none; letter-spacing: .01em; font-size: calc(1.16rem * var(--font-scale)); justify-content: center; }
:where(.pf-fam-legal) .pf-sec h2::after { flex: none; width: 44px; height: 2px; background: var(--c-accent2); }
:where(.pf-fam-legal) .pf-sec h2::before { order: -1; }
:where(.pf-fam-legal) .pf-card-item,
:where(.pf-fam-legal) .pf-work { border-radius: 3px; border-top: 2px solid var(--c-accent2); background: var(--pf-card); }
:where(.pf-fam-legal) .pf-link { border-radius: 3px; }
:where(.pf-fam-legal) .pf-prose::first-letter { font-family: var(--pf-display); font-size: 2.6em; float: inline-start; line-height: .8; padding: 6px 8px 0 0; color: var(--c-primary); }

/* ==========================================================================
   LAWYER — bespoke law-firm renderer (.pf-lawyer / .pf-tpl-lawyer).
   Letterhead header, double rule, roman-numeral practice areas. Sits on top
   of the .pf-fam-legal identity layer above.
   ========================================================================== */
.pf-lawyer .pf-lawyer-head { text-align: center; padding-top: 8px; }
.pf-lawyer .pf-avatar--square {
    width: 96px; height: 96px; border-radius: 4px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent2) 45%, transparent),
                0 0 0 5px color-mix(in srgb, var(--c-primary) 10%, transparent);
}
.pf-lawyer-firm {
    margin: 16px 0 4px; text-transform: uppercase; letter-spacing: .34em;
    font-size: calc(.66rem * var(--font-scale)); font-weight: 600; color: var(--c-accent2); opacity: .9;
}
.pf-lawyer .pf-name--display {
    font-family: var(--pf-display); font-weight: 500; letter-spacing: -.01em;
    font-size: clamp(1.9rem, 6vw, 2.5rem); line-height: 1.06; margin: 0 0 4px;
}
.pf-lawyer .pf-role {
    margin: 2px 0 0; font-style: italic; opacity: .8;
    font-size: calc(.98rem * var(--font-scale));
}
/* letterhead double rule */
.pf-lawyer-rule { height: 4px; width: min(240px, 62%); margin: 18px auto 0; position: relative; }
.pf-lawyer-rule::before, .pf-lawyer-rule::after {
    content: ""; position: absolute; inset-inline: 0; height: 1px;
    background: color-mix(in srgb, var(--c-accent2) 60%, transparent);
}
.pf-lawyer-rule::before { top: 0; }
.pf-lawyer-rule::after { top: 3px; }
.pf-lawyer .pf-loc { margin-top: 12px; opacity: .66; font-size: .88em; }
.pf-lawyer .pf-bio--lead { margin-top: 16px; opacity: .82; max-width: 46ch; margin-inline: auto; }

/* consultation actions — quiet, small-caps, squared */
.pf-cta-row--lawyer { justify-content: center; margin-top: 22px; }
.pf-cta-row--lawyer .pf-cta {
    flex: 0 1 auto; min-width: 0; padding: 11px 22px; border-radius: 2px;
    text-transform: uppercase; letter-spacing: .14em; font-size: .72em;
}

/* practice areas: services list as I. II. III. */
.pf-lawyer .pf-cards { counter-reset: pf-practice; gap: 0; }
.pf-lawyer .pf-card-item {
    background: transparent; border: 0; border-radius: 0;
    border-block-end: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
    flex-direction: row; align-items: baseline; gap: 14px;
}
.pf-lawyer .pf-card-item:first-child { border-block-start: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.pf-lawyer .pf-card-item:hover { transform: none; box-shadow: none; }
.pf-lawyer .pf-card-item__media { display: none; }
.pf-lawyer .pf-card-item::before {
    counter-increment: pf-practice; content: counter(pf-practice, upper-roman) ".";
    flex: none; width: 2.2em; text-align: end;
    font-family: var(--pf-display); color: var(--c-accent2);
    font-variant-numeric: normal; padding-top: 16px;
}
.pf-lawyer .pf-card-item__body { padding: 16px 0; flex: 1; }
.pf-lawyer .pf-card-item__body h3 { font-family: var(--pf-display); font-weight: 500; margin: 0; }
.pf-lawyer .pf-card-item__body p { margin: 4px 0 0; opacity: .66; font-size: .9em; }
.pf-lawyer .pf-price { font-family: var(--pf-display); color: var(--c-accent2); }

/* client words: centred, ruled */
.pf-lawyer .pf-quotes { max-width: 52ch; margin-inline: auto; }
.pf-lawyer .pf-quote {
    background: transparent; border: 0; border-radius: 0; text-align: center; padding: 8px 0;
}
.pf-lawyer .pf-quote::before { content: none; }
.pf-lawyer .pf-quote p { font-family: var(--pf-display); font-style: italic; font-size: 1.06em; opacity: .92; }
.pf-lawyer .pf-quote cite { display: block; margin-top: 8px; font-size: .78em; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }

/* office hours + contact rows squared to match */
.pf-lawyer .pf-hours { border-radius: 3px; border-color: color-mix(in srgb, var(--c-accent2) 30%, var(--pf-line)); }
.pf-lawyer .pf-contact__list a { border-radius: 3px; }
.pf-lawyer .pf-social { justify-content: center; }

/* ==========================================================================
   CONSULTANT — corporate cover-photo hero with a start-aligned identity
   overlap (avatar sits on the seam between photo and card, not centred),
   an accent pill CTA row, filled-circle socials, then quick contacts →
   gallery → services (with descriptions) → hours → the rest → full contact.
   ========================================================================== */
.pf-consultant-hero { position: relative; margin: 0 -34px; }
@media (max-width: 599px) { .pf-consultant-hero { margin: 0 -20px; } }
.pf-consultant-hero__img { position: relative; }
.pf-consultant-hero__img img {
    width: 100%; height: clamp(200px, 42vw, 320px); object-fit: cover;
    animation: pf-cover-in 1000ms var(--pf-ease) both;
}
.pf-consultant--plain .pf-consultant-hero {
    height: 64px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 22%, var(--c-bg)), var(--c-bg) 70%);
}
.pf-consultant-id {
    position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 16px;
    padding: 0 6px; margin-top: -46px;
}
.pf-consultant--plain .pf-consultant-id { margin-top: -30px; }
.pf-consultant-id .pf-avatar--ring {
    width: 92px; height: 92px; flex: none; margin: 0;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.5), 0 0 0 4px var(--c-bg);
}
.pf-consultant-id__text { padding-bottom: 6px; min-width: 0; }
.pf-consultant .pf-name { margin: 0; font-size: calc(1.5rem * var(--font-scale)); letter-spacing: -.02em; }
.pf-consultant-co { margin: 2px 0 0; font-weight: 700; color: var(--c-primary); font-size: .92em; }
.pf-consultant .pf-role { margin: 1px 0 0; opacity: .72; font-size: .88em; }

.pf-cta-row--consultant { justify-content: center; margin: 22px 0 0; }
.pf--btn-solid .pf-cta-row--consultant .pf-cta { border-radius: 999px; }
.pf-cta-row--consultant .pf-cta--primary { flex: 1 1 auto; }

.pf-social--consultant { margin-top: 18px; }
.pf-social--consultant a {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--pf-card); color: var(--c-primary);
    display: grid; place-items: center;
}
.pf-social--consultant svg { width: 17px; height: 17px; }

.pf-consultant-quick { text-align: start; }
.pf-consultant-quick .pf-contact__list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); display: grid; gap: 8px; }

.pf-consultant .pf-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pf-consultant .pf-card-item__body h3 { font-size: 1em; }
.pf-consultant .pf-card-item__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- BEAUTY — soft luxe, blush panels, everything rounded ---- */
:where(.pf-fam-beauty) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.4L18 9l-4.2 1.6L12 15l-1.8-4.4L6 9l4.2-1.6zM18 15l.9 2.2 2.1.8-2.1.8L18 21l-.9-2.2-2.1-.8 2.1-.8z'/%3E%3C/svg%3E"); }
:where(.pf-fam-beauty) .pf-sec { background: color-mix(in srgb, var(--c-primary) 5%, var(--c-bg)); border-radius: 22px; padding: 22px; margin-top: 18px; }
:where(.pf-fam-beauty) .pf-sec h2 { text-transform: none; letter-spacing: .02em; font-family: var(--pf-display); }
:where(.pf-fam-beauty) .pf-sec h2::after { opacity: .5; }
:where(.pf-fam-beauty) .pf-card-item,
:where(.pf-fam-beauty) .pf-work,
:where(.pf-fam-beauty) .pf-quote { border-radius: 20px; }
:where(.pf-fam-beauty) .pf-gallery img { border-radius: 18px; }
:where(.pf-fam-beauty) .pf-link { border-radius: 999px; }

/* ---- MEDICAL — clinical calm, appointment-style rows ---- */
:where(.pf-fam-medical) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h5l2-6 3 12 2-6h8'/%3E%3C/svg%3E"); }
:where(.pf-fam-medical) .pf-sec { background: var(--c-bg2); border-radius: 16px; padding: 20px; margin-top: 16px; }
:where(.pf-fam-medical) .pf-sec h2 { text-transform: none; letter-spacing: -.01em; opacity: 1; font-size: calc(1.12rem * var(--font-scale)); }
:where(.pf-fam-medical) .pf-contact__list a { border-inline-start: 3px solid var(--c-primary); border-radius: 4px 14px 14px 4px; }
:where(.pf-fam-medical) .pf-hours > div { border-color: color-mix(in srgb, var(--c-primary) 14%, transparent); }
:where(.pf-fam-medical) .pf-link { border-radius: 12px; }

/* ---- HOSPITALITY — warm editorial, headings flanked by rules ---- */
:where(.pf-fam-hospitality) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M11 11l9 9M17 17l2-2M14 14l2-2'/%3E%3C/svg%3E"); }
:where(.pf-fam-hospitality) .pf-sec h2 { justify-content: center; text-transform: none; font-family: var(--pf-display); letter-spacing: .02em; font-size: calc(1.14rem * var(--font-scale)); }
:where(.pf-fam-hospitality) .pf-sec h2::before { order: -1; }
:where(.pf-fam-hospitality) .pf-sec h2::after { flex: none; width: 40px; height: 1px; background: var(--c-accent2); }
:where(.pf-fam-hospitality) .pf-hours { border-color: color-mix(in srgb, var(--c-accent2) 40%, var(--pf-line)); }
:where(.pf-fam-hospitality) .pf-hours dt { color: var(--c-primary); }
:where(.pf-fam-hospitality) .pf-link { border-radius: 6px; }

/* ---- RETAIL — product-forward, prices carry weight ---- */
:where(.pf-fam-retail) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.4 11a2 2 0 0 1-2 1.8H7.4a2 2 0 0 1-2-1.8zM8.5 8a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); }
:where(.pf-fam-retail) .pf-sec h2 { letter-spacing: .1em; }
:where(.pf-fam-retail) .pf-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
:where(.pf-fam-retail) .pf-card-item { flex-direction: column; }
:where(.pf-fam-retail) .pf-card-item__media { width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
:where(.pf-fam-retail) .pf-price {
    display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary);
    font-family: var(--pf-display); font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) { :where(.pf-fam-retail) .pf-cards { grid-template-columns: 1fr; } }

/* ---- PROPERTY — structural, listing cards with an accent cap ---- */
:where(.pf-fam-property) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
:where(.pf-fam-property) .pf-sec h2 { color: var(--c-primary); letter-spacing: .12em; }
:where(.pf-fam-property) .pf-work,
:where(.pf-fam-property) .pf-card-item { border-radius: 4px; border-top: 3px solid var(--c-accent2); }
:where(.pf-fam-property) .pf-work__body p { font-variant-numeric: tabular-nums; }
:where(.pf-fam-property) .pf-link { border-radius: 3px; }

/* ---- COMMUNITY — friendly, generous, warm tint ---- */
:where(.pf-fam-community) { --pf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.3-7-9.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 7 3.6C19 15.7 12 20 12 20z'/%3E%3C/svg%3E"); }
:where(.pf-fam-community) .pf-sec { background: color-mix(in srgb, var(--c-primary) 5%, var(--c-bg)); border-radius: 18px; padding: 20px; margin-top: 16px; }
:where(.pf-fam-community) .pf-sec h2 { text-transform: none; letter-spacing: .01em; font-family: var(--pf-display); }
:where(.pf-fam-community) .pf-card-item,
:where(.pf-fam-community) .pf-work,
:where(.pf-fam-community) .pf-quote { border-radius: 16px; }
:where(.pf-fam-community) .pf-link { border-radius: 14px; }

/* ==========================================================================
   Booking & catalogue layouts — used by the appointment trades (salon, clinic,
   trainer, planner, hotel, travel) and product retail. A shared action row
   under the hero, plus a couple of layout promotions.
   ========================================================================== */

.pf-cta-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 22px 0 4px;
}
.pf-cta {
    flex: 1 1 auto; min-width: 132px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 18px; border-radius: 12px;
    font-weight: 700; font-size: .96em; text-decoration: none;
    color: var(--c-text);
    background: var(--pf-card); border: 1.5px solid var(--pf-line2);
    transition: transform .18s var(--pf-spring), border-color .18s ease, background .18s ease;
}
.pf-cta:hover { transform: translateY(-2px); border-color: var(--c-primary); }
.pf-cta--primary {
    color: var(--c-btn-text);
    background: var(--c-primary); border-color: var(--c-primary);
    box-shadow: 0 14px 30px -14px var(--pf-glow);
}
.pf-cta--primary:hover { border-color: var(--c-primary); filter: brightness(1.04); }
.pf--btn-pill .pf-cta { border-radius: 999px; }

/* Booking: opening hours reads as the headline block */
.pf-booking .pf-hours {
    border-color: color-mix(in srgb, var(--c-primary) 30%, var(--pf-line));
    border-inline-start: 3px solid var(--c-primary);
}
.pf-booking .pf-hours dt { font-weight: 700; }
.pf-booking .pf-cards .pf-price { font-family: var(--pf-display); color: var(--c-primary); }

/* Catalogue: products lead, always a two-up card grid with the image on top */
.pf-catalogue .pf-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pf-catalogue .pf-card-item { flex-direction: column; }
.pf-catalogue .pf-card-item__media { width: 100%; aspect-ratio: 4 / 3; min-height: 0; align-self: auto; }
.pf-catalogue .pf-card-item__media img,
.pf-catalogue .pf-card-item__media video { min-height: 0; }
.pf-catalogue .pf-price {
    display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary);
    font-family: var(--pf-display); font-variant-numeric: tabular-nums;
}
@media (max-width: 460px) { .pf-catalogue .pf-cards { grid-template-columns: 1fr; } }
@media (min-width: 700px) { .pf-catalogue .pf-cards { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .pf-cover img, .pf-head, .pf-avatar, .pf-actionbar { animation: none; }
    .pf-reveal { opacity: 1; transform: none; transition: none; }
    .pf-cta { transition: none; }
}


/* ============ builder blocks ============
   The small pieces the page builder drags in: a heading, a button, one
   picture, a video, space, a rule, a feature list. They are ordinary sections,
   so everything above (row backgrounds, spacing, colour) already applies. */

/* ---- how wide a block sits ----
   Two halves (or three thirds) share a line on a wide screen and stack on a
   phone. Only blocks that are direct children of the card column can share a
   line: templates that group blocks into their own bands keep them full width,
   which is why the rule is scoped rather than global. */
.pf-wrap::after { content: ""; display: block; clear: both; }

@media (min-width: 620px) {
    .pf-wrap > .pf-sec--w-half,
    .pf-wrap > .pf-sec--w-third { float: left; box-sizing: border-box; }
    .pf-wrap > .pf-sec--w-half { width: calc(50% - 5px); }
    .pf-wrap > .pf-sec--w-third { width: calc(33.333% - 6.67px); }
    .pf-wrap > .pf-sec--w-half + .pf-sec--w-half,
    .pf-wrap > .pf-sec--w-third + .pf-sec--w-third { margin-inline-start: 10px; }
    .is-rtl .pf-wrap > .pf-sec--w-half,
    .is-rtl .pf-wrap > .pf-sec--w-third { float: right; }
    /* a full-width block always starts a new line */
    .pf-wrap > .pf-sec:not(.pf-sec--w-half):not(.pf-sec--w-third) { clear: both; }
    /* a narrowed row keeps its own edges instead of bleeding past the card */
    .pf-wrap > .pf-row.pf-sec--w-half,
    .pf-wrap > .pf-row.pf-sec--w-third { margin-inline: 0; }
}

/* ---- alignment, shared by heading and button ----
   Two classes deep so a block's own alignment beats the row's, even when
   both classes sit on the same element (a block with no background). */
.pf-sec.pf-al-start { text-align: start; }
.pf-sec.pf-al-center { text-align: center; }
.pf-sec.pf-al-end { text-align: end; }

/* ---- heading ----
   A composed heading, not a section label: no uppercase tracking, no rule. */
.pf-sec--heading { margin-top: 28px; }
/* A composed heading, NOT a section label: the selectors are deliberately
   stronger than ".pf-sec h2" and the per-template glyph rules, which would
   otherwise make it uppercase, tracked, and give it an icon and a rule. */
.pf-sec.pf-sec--heading .pf-heading {
    font-family: var(--pf-display);
    font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    color: var(--c-text); margin: 0;
    text-transform: none; display: block;
}
.pf-sec.pf-sec--heading .pf-heading::before,
.pf-sec.pf-sec--heading .pf-heading::after { content: none; }
.pf-sec.pf-sec--heading .pf-heading--s { font-size: calc(1.05rem * var(--font-scale)); }
.pf-sec.pf-sec--heading .pf-heading--m { font-size: calc(1.45rem * var(--font-scale)); }
.pf-sec.pf-sec--heading .pf-heading--l { font-size: calc(2rem * var(--font-scale)); }

/* ---- button ---- */
.pf-sec--button { margin-top: 20px; }
.pf-cbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 999px;
    font-weight: 600; font-size: calc(.95rem * var(--font-scale));
    text-decoration: none; line-height: 1.2;
    border: 1.5px solid var(--c-primary);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf--btn-square .pf-cbtn { border-radius: 10px; }
.pf-cbtn svg { width: 18px; height: 18px; flex: none; }
.pf-cbtn--solid { background: var(--c-primary); color: var(--c-btn-text); }
.pf-cbtn--outline { background: transparent; color: var(--c-primary); }
.pf-cbtn--ghost { background: transparent; color: var(--c-primary); border-color: transparent; }
.pf-cbtn--full { display: flex; width: 100%; }
.pf-cbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--c-primary); }
.pf-cbtn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* ---- one picture ---- */
.pf-sec--image { margin-top: 26px; }
.pf-pic { margin: 0; }
.pf-pic img { display: block; width: 100%; height: auto; border-radius: 14px; }
.pf-pic--round img { border-radius: 22px; }
.pf-pic--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.pf-pic--square img { aspect-ratio: 1; object-fit: cover; }
.pf-pic--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.pf-pic figcaption {
    margin-top: 8px; font-size: calc(.82rem * var(--font-scale));
    opacity: .72; text-align: center;
}

/* ---- video ---- */
.pf-video { display: block; width: 100%; border-radius: 14px; background: #000; }

/* ---- space and rules ---- */
.pf-sec--spacer { margin: 0; }
.pf-spacer--s { height: 12px; }
.pf-spacer--m { height: 28px; }
.pf-spacer--l { height: 52px; }
.pf-spacer--xl { height: 84px; }
.pf-sec--divider { margin-top: 26px; }
.pf-rule {
    border: 0; border-top: 1px solid var(--pf-line);
    margin: 0 auto; opacity: .9;
}
.pf-rule--dashed { border-top-style: dashed; }
.pf-rule--dotted { border-top-style: dotted; }
.pf-rule--s { width: 56px; border-top-width: 2px; border-color: var(--c-primary); opacity: 1; }
.pf-rule--m { width: 50%; }
.pf-rule--full { width: 100%; }

/* ---- feature list ---- */
.pf-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pf-feat { display: flex; gap: 12px; align-items: flex-start; }
.pf-feat__ic {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
}
.pf-feat__ic svg { width: 19px; height: 19px; }
.pf-feat__txt { display: grid; gap: 3px; min-width: 0; }
.pf-feat__txt strong { font-weight: 650; }
.pf-feat__txt span { opacity: .82; font-size: calc(.92rem * var(--font-scale)); }

@media (prefers-reduced-motion: reduce) {
    .pf-cbtn { transition: none; }
    .pf-cbtn:hover { transform: none; }
}


/* ---- type for one row ----
   The builder can give a single block its own face, size and alignment. Each
   one is opt-in: a block the owner never touched carries no class here and
   keeps the card's own settings. */
.pf-ty-display, .pf-ty-display :where(h2, h3, h4, p, dt, dd, li, blockquote, cite, strong) { font-family: var(--pf-display); }
.pf-ty-body, .pf-ty-body :where(h2, h3, h4, p, dt, dd, li, blockquote, cite, strong) { font-family: var(--font-family); }
.pf-tsz-s { font-size: .9em; }
.pf-tsz-m { font-size: 1.06em; }
.pf-tsz-l { font-size: 1.22em; }
.pf-row-al-start { text-align: start; }
.pf-row-al-center { text-align: center; }
.pf-row-al-end { text-align: end; }
/* a centred row centres its own heading rule and its buttons too */
.pf-row-al-center :where(h2, h3) { justify-content: center; }
.pf-row-al-end :where(h2, h3) { justify-content: flex-end; }
.pf-row-al-center :where(h2, h3)::after, .pf-row-al-end :where(h2, h3)::after { content: none; }


/* ============ how the social icons are dressed ============
   One choice for the whole card. "soft" is the look every card has always had,
   so a card that never picked one is untouched. */
.pf-ico-circle .pf-social a { border-radius: 50%; }
.pf-ico-square .pf-social a { border-radius: 4px; }
.pf-ico-outline .pf-social a {
    background: transparent;
    border-color: color-mix(in srgb, var(--c-social) 55%, transparent);
}
.pf-ico-plain .pf-social a {
    background: transparent; border-color: transparent;
    width: 40px; height: 40px;
}
.pf-ico-plain .pf-social a:hover {
    background: transparent; color: var(--c-social);
    box-shadow: none; transform: translateY(-3px);
}
.pf-ico-plain .pf-social svg, .pf-ico-plain .pf-social img { width: 24px; height: 24px; }


/* ============ how the card's heading is arranged ============
   The same name, role, company, details and bio — laid out the way the
   different templates lay them out. Nothing is added or hidden except the
   avatar in "minimal", which is a layout that deliberately has none.

   These apply to the heading the Professional renderer draws (the one the
   builder works on, shared with Doctor and Reporter). "stack" is the look
   every card already has, so it needs no rules of its own. */

/* ---- centred ---- */
.pf-head-center .pf-pro-head { text-align: center; }
.pf-head-center .pf-pro-id { display: grid; justify-items: center; gap: 12px; }
.pf-head-center .pf-pro-id .pf-name::after { margin-inline: auto; }
.pf-head-center .pf-strip { justify-content: center; }
.pf-head-center .pf-bio { margin-inline: auto; max-width: 46ch; }

/* ---- avatar beside the words ---- */
.pf-head-side .pf-pro-id {
    display: flex; align-items: center; gap: 16px; text-align: start;
}
.pf-head-side .pf-pro-id > div { min-width: 0; }
.pf-head-side .pf-avatar { width: 96px; height: 96px; flex: none; margin: 0; }
.pf-head-side .pf-pro-id .pf-name::after { margin-inline: 0; }
.pf-head-side .pf-strip { justify-content: flex-start; }

/* ---- compact: a small avatar, one tight line of identity ---- */
.pf-head-compact .pf-pro-head { padding-bottom: 12px; }
.pf-head-compact .pf-pro-id {
    display: flex; align-items: center; gap: 12px; text-align: start;
}
.pf-head-compact .pf-avatar { width: 62px; height: 62px; flex: none; margin: 0; }
.pf-head-compact .pf-name { font-size: calc(1.45rem * var(--font-scale)); }
.pf-head-compact .pf-pro-id .pf-name::after { content: none; }
.pf-head-compact .pf-role, .pf-head-compact .pf-company { font-size: calc(.92rem * var(--font-scale)); }
.pf-head-compact .pf-strip { justify-content: flex-start; margin-top: 10px; }
.pf-head-compact .pf-bio { margin-top: 10px; }

/* ---- minimal: the name carries it, with no portrait at all ---- */
.pf-head-minimal .pf-pro-id .pf-avatar { display: none; }
.pf-head-minimal .pf-pro-head { text-align: center; }
.pf-head-minimal .pf-pro-id { display: block; }
.pf-head-minimal .pf-name {
    font-size: calc(2.3rem * var(--font-scale)); letter-spacing: -.03em;
}
.pf-head-minimal .pf-pro-id .pf-name::after { margin-inline: auto; }
.pf-head-minimal .pf-strip { justify-content: center; }
.pf-head-minimal .pf-bio { margin-inline: auto; max-width: 44ch; }

@media (max-width: 420px) {
    /* a phone is narrow: side-by-side headings stack rather than squeeze */
    .pf-head-side .pf-pro-id { display: grid; justify-items: start; gap: 12px; }
    .pf-head-side .pf-avatar { width: 84px; height: 84px; }
}

/* ---- The business's loyalty cards and games (resources/card-templates/_promos.php) ---- */
.pf-promos__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf-promo {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    color: inherit; text-decoration: none; border-radius: 14px;
    background: color-mix(in srgb, var(--c-primary) 7%, var(--pf-card));
    border: 1px solid color-mix(in srgb, var(--c-primary) 22%, var(--pf-line));
    transition: transform .18s var(--pf-ease), border-color .18s ease, background .18s ease;
}
.pf-promo:hover { transform: translateY(-2px); border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, var(--pf-card)); }
.pf-promo:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pf-promo__icon {
    flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--c-primary); color: var(--c-btn-text);
}
.pf-promo__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pf-promo__label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); }
.pf-promo__name { font-family: var(--pf-display); font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.pf-promo__blurb { font-size: .88rem; opacity: .75; overflow-wrap: anywhere; }
.pf-promo__go { flex: none; font-size: 1.6rem; line-height: 1; color: var(--c-primary); }
.is-rtl .pf-promo__go { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .pf-promo { transition: none; } .pf-promo:hover { transform: none; } }