/* ============================================================
   Pageforge — Front-End Landing Page Styles (classic preset)

   v2.0.4 — SELF-CONTAINED. Every design token (colors, fonts, sizes,
   button styles, icons) is declared inside the `.pf-page` block at the
   top of this file. No external `<style id="pf-design-vars">` block is
   required for the preset to render correctly.

   Why .pf-page scope (not :root)?
     - Higher specificity than :root, so a self-contained preset wins
       over any inline `:root { --pf-* }` injection emitted for legacy
       Design Settings — no cascade ambiguity.
     - Tokens stay isolated to Pageforge pages; they cannot leak into
       host theme styling.

   Custom presets follow the same pattern: declare ALL design tokens
   inside `.pf-page { ... }` at the top of the preset CSS.
   ============================================================ */

.pf-page {
    /* ---- Colors ---- */
    --pf-primary:       #1a73e8;
    --pf-primary-dark:  #1558b0;
    --pf-accent:        #f4a124;
    --pf-text:          #222222;
    --pf-text-muted:    #666666;
    --pf-text-soft:     #999999;
    --pf-text-on-dark:  #ffffff;
    --pf-light-bg:      #f9f9f9;
    --pf-dark-bg:       #1a1a2e;

    /* ---- Typography ---- */
    --pf-font-heading:   'Inter', sans-serif;
    --pf-font-body:      'Inter', sans-serif;
    --pf-size-h1:        52px;
    --pf-size-h2:        36px;
    --pf-size-h3:        24px;
    --pf-size-body:      16px;
    --pf-weight-heading: 700;
    --pf-weight-body:    400;
    --pf-lh-heading:     1.2;
    --pf-lh-body:        1.7;

    /* ---- Buttons & CTAs ---- */
    --pf-btn-radius:         8px;
    --pf-btn-padding:        14px 28px;
    --pf-btn-font-weight:    600;
    --pf-btn-font-size:      16px;
    --pf-btn-letter-spacing: 0;
    --pf-btn-outline-width:  2px;

    /* ---- Icons (Heroicons-style filled paths, data-URI SVG) ---------------
       Scoped to .pf-page so they only apply inside Pageforge content. Each
       preset can swap them by redeclaring the same vars in its own block.
       Icons inherit text color via `background-color: currentColor` plus
       `mask-image`, so hover color shifts apply automatically. */

    /* v2.0.0-alpha.2 set */
    --pf-icon-arrow:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/></svg>");
    --pf-icon-chevron:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
    --pf-icon-phone:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19.23 15.26l-2.54-.29c-.61-.07-1.22.14-1.66.58l-1.84 1.84a15.045 15.045 0 0 1-6.59-6.59l1.85-1.85c.44-.44.65-1.05.58-1.66l-.29-2.52a1.998 1.998 0 0 0-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.72c.01-1.01-.75-1.86-1.76-1.98z'/></svg>");
    --pf-icon-mail:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
    --pf-icon-pin:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
    --pf-icon-clock:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/></svg>");

    /* v2.0.2-alpha.1 — list bullet + status indicators */
    --pf-icon-check:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/></svg>");
    --pf-icon-x:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 11 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    --pf-icon-warning:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");

    /* v2.0.2-alpha.1 — card-grid decorative icons (cycled by Renderer::render_section_card_grid) */
    --pf-icon-trophy:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0 0 11 14.9V17H7v2h10v-2h-4v-2.1a5.01 5.01 0 0 0 3.61-2.96C19.08 11.63 21 9.55 21 7V6c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/></svg>");
    --pf-icon-cog:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4a.488.488 0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.488.488 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98L2.46 14.63a.5.5 0 0 0-.12.64l2 3.46c.13.24.43.34.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65zM12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5z'/></svg>");
    --pf-icon-target:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>");
    --pf-icon-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/></svg>");
    --pf-icon-lock:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>");
    --pf-icon-star:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");

    /* v2.0.2-alpha.1 — resource card icons (Australia Post mailbox, Wikipedia globe) */
    --pf-icon-mailbox:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 6H10c-2.21 0-4 1.79-4 4v8H4V8H2v12h17v-2h-7v-2h2c2.21 0 4-1.79 4-4v-2h2v8h2V8c0-1.1-.9-2-2-2zm-9 7H8v-3h3v3z'/></svg>");
    --pf-icon-globe:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'/></svg>");
}

html { scroll-behavior: smooth; }

.pf-page,
.pf-page *,
.pf-page *::before,
.pf-page *::after {
    box-sizing: border-box;
}
.pf-page * { margin: 0; padding: 0; }

.pf-page {
    font-family: var( --pf-font-body, 'Inter', sans-serif ) !important;
    font-size: var( --pf-size-body, 16px );
    font-weight: var( --pf-weight-body, 400 );
    line-height: var( --pf-lh-body, 1.7 );
    color: var( --pf-text, #222 );
}
/* Ensure heading classes always carry the heading font/weight even when
   a host theme styles raw <h1>/<h2>/<h3> with !important. */
body #pf-page-main .pf-section-title,
body #pf-page-main .pf-hero__title,
body #pf-page-main .pf-cta__title,
body #pf-page-main .pf-services__subtitle,
body #pf-page-main .pf-why__title,
body #pf-page-main .pf-areas__group-title {
    font-family: var( --pf-font-heading, 'Inter', sans-serif ) !important;
    font-weight: var( --pf-weight-heading, 700 ) !important;
}

.pf-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Generic section wrappers ---------- */
.pf-section { padding: 90px 0; }
.pf-section--dark  { background: var( --pf-dark-bg, #1a1a2e ); color: var( --pf-text-on-dark, #ffffff ); }
.pf-section--light { background: var( --pf-light-bg, #f9f9f9 ); }
.pf-section--white { background: #ffffff; }

.pf-section-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var( --pf-primary, #1a73e8 );
    margin-bottom: 14px;
}

.pf-section-title {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h2, 36px );
    font-weight: var( --pf-weight-heading, 700 );
    line-height: var( --pf-lh-heading, 1.2 );
    color: var( --pf-text, #222 );
    margin-bottom: 16px;
}

.pf-section-desc {
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
    color: var( --pf-text-muted, #666666 );
    max-width: 660px;
}

.pf-section-header {
    text-align: center;
    margin-bottom: 60px;
}
.pf-section-header .pf-section-desc { margin: 0 auto; }

/*
 * ---------- Buttons ----------
 * v2.0.3-alpha.1 — button radius / padding / font size / weight /
 * letter-spacing are now driven by Design Settings → Buttons & CTAs
 * via --pf-btn-* custom properties. Each property has a fallback so
 * pages still render correctly if the inline :root injection is missing.
 *
 * The :hover effect (translateY / box-shadow / filter) is *not* a var
 * here — Design_Settings::root_style_block() emits a per-page :hover
 * rule directly, since a CSS var can't expand into "property: value;".
 */
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var( --pf-btn-padding, 14px 28px );
    background: var( --pf-primary, #1a73e8 );
    color: #ffffff;
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-btn-font-size, 16px );
    font-weight: var( --pf-btn-font-weight, 600 );
    letter-spacing: var( --pf-btn-letter-spacing, 0 );
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var( --pf-btn-radius, 8px );
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.pf-btn:hover,
.pf-btn:focus {
    background: var( --pf-primary-dark, #1558b0 );
    color: #ffffff;
    /* Default lift — overridden per-site by the inline-style hover-effect
       rule emitted from Design_Settings::root_style_block(). */
    transform: translateY( -2px );
    box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.15 );
}
.pf-btn--accent {
    background: var( --pf-accent, #f4a124 );
}
.pf-btn--accent:hover,
.pf-btn--accent:focus {
    background: var( --pf-accent, #f4a124 );
    filter: brightness( 0.92 );
    color: #ffffff;
}

/*
 * Right-arrow icon AFTER primary CTA buttons (.pf-btn--accent — the class
 * the renderer emits for 👉 CTAs). v2.0.0-alpha.2 replaces the literal
 * emoji-in-text approach with an SVG mask icon that inherits text color
 * via currentColor and slides on hover. Outline variant keeps a clean
 * "no decoration" look — see the negation below.
 */
.pf-btn--accent::after {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    background-color: currentColor;
    -webkit-mask-image: var( --pf-icon-arrow );
            mask-image: var( --pf-icon-arrow );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transition: transform 0.2s ease;
}
.pf-btn--accent:hover::after,
.pf-btn--accent:focus::after {
    transform: translateX( 3px );
}
.pf-btn--outline {
    background: transparent;
    border-color: currentColor;
    color: var( --pf-primary, #1a73e8 );
}
.pf-btn--outline:hover,
.pf-btn--outline:focus {
    background: var( --pf-primary, #1a73e8 );
    color: #ffffff;
}

/* ---------- Animations ---------- */
.pf-animate {
    opacity: 0;
    transform: translateY( 30px );
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.pf-animate.pf-visible {
    opacity: 1;
    transform: translateY( 0 );
}
.pf-why__card.pf-animate:nth-child( 2 ) { transition-delay: 0.1s; }
.pf-why__card.pf-animate:nth-child( 3 ) { transition-delay: 0.2s; }
.pf-why__card.pf-animate:nth-child( 4 ) { transition-delay: 0.3s; }
.pf-why__card.pf-animate:nth-child( 5 ) { transition-delay: 0.4s; }
.pf-why__card.pf-animate:nth-child( 6 ) { transition-delay: 0.5s; }

/* ============================================================
   1. HERO
   ============================================================ */
.pf-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* v1.4.5 — dark-bg base text color so any nested element without an
     * explicit color inherits Text-on-Dark instead of falling back to the
     * page-wide --pf-text (which authors set for light-bg body copy). */
    color: var( --pf-text-on-dark, #ffffff );
}
.pf-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var( --pf-dark-bg, #1a1a2e );
    transform: scale( 1.05 );
    transition: transform 8s ease;
}
.pf-hero:hover .pf-hero__bg { transform: scale( 1.0 ); }
.pf-hero__overlay {
    position: absolute;
    inset: 0;
    /* Modern browsers: derive the gradient stops from --pf-dark-bg so the hero
       overlay tints match the configured dark background. Older browsers fall
       back to the static rgba stops below (declared first via the supports query). */
    background: linear-gradient(
        135deg,
        rgba( 10, 10, 20, 0.82 ) 0%,
        rgba( 10, 10, 20, 0.55 ) 60%,
        rgba( 10, 10, 20, 0.35 ) 100%
    );
}
@supports ( background: color-mix( in srgb, red, blue ) ) {
    .pf-hero__overlay {
        background: linear-gradient(
            135deg,
            color-mix( in srgb, var( --pf-dark-bg, #1a1a2e ) 82%, transparent ) 0%,
            color-mix( in srgb, var( --pf-dark-bg, #1a1a2e ) 55%, transparent ) 60%,
            color-mix( in srgb, var( --pf-dark-bg, #1a1a2e ) 35%, transparent ) 100%
        );
    }
}
.pf-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 120px 0 80px;
}
/*
 * Hero eyebrow — small uppercase label above the headline.
 * Accent-line + uppercase text treatment. NO pill border.
 * The pill style is deliberately avoided — it's a common AI-generated
 * landing page tell. This treatment is cleaner and matches editorial /
 * agency design conventions.
 */
.pf-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var( --pf-accent, #f4a124 );
    margin-bottom: 28px;
    /* Reset the v1.x pill chrome — explicit so any host-theme reset doesn't
       leave a ghost border. */
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

/* Horizontal accent line to the LEFT of the eyebrow text. */
.pf-hero__label::before {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var( --pf-accent, #f4a124 );
    flex-shrink: 0;
}
.pf-hero__title {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h1, 52px );
    font-weight: var( --pf-weight-heading, 700 );
    line-height: 1.08;
    color: var( --pf-text-on-dark, #ffffff );
    margin-bottom: 16px;
    max-width: 800px;
}
.pf-hero__tagline {
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: 20px;
    font-weight: 400;
    color: rgba( 255, 255, 255, 0.75 );
    margin-bottom: 28px;
    max-width: 640px;
    line-height: 1.4;
}
.pf-hero__text {
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
    color: rgba( 255, 255, 255, 0.68 );
    max-width: 620px;
    margin-bottom: 40px;
}
.pf-hero__text p { margin-bottom: 12px; }
.pf-hero__text p:last-child { margin-bottom: 0; }
.pf-hero__text strong { color: var( --pf-text-on-dark, #ffffff ); font-weight: 700; }
.pf-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================================
   2. WHY CHOOSE US
   ============================================================ */
.pf-why__intro {
    margin: 16px auto 0;
    text-align: center;
}
.pf-why__grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
    gap: 28px;
    margin-top: 48px;
}
.pf-why__card {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    padding: 36px 28px;
    border-top: 4px solid var( --pf-primary, #1a73e8 );
    box-shadow: 0 2px 16px rgba( 0, 0, 0, 0.06 );
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pf-why__card:hover {
    transform: translateY( -6px );
    box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.12 );
}
/*
 * Why-card icon — v2.0.2-alpha.1 replaced the literal 🏆 ⚙️ 🎯 📅 🔂 ⭐
 * cycling emoji that the renderer used to print inside this <div>. Each card
 * now carries a modifier class (pf-why__icon--trophy / --cog / --target /
 * --calendar / --lock / --star); a ::before pseudo paints the SVG via
 * mask-image of the matching --pf-icon-* custom property.
 */
.pf-why__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(
        135deg,
        rgba( 26, 115, 232, 0.12 ),
        rgba( 26, 115, 232, 0.06 )
    );
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: var( --pf-primary, #1a73e8 );
}
.pf-why__icon::before {
    content: '';
    width: 26px;
    height: 26px;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.pf-why__icon--trophy::before   { -webkit-mask-image: var( --pf-icon-trophy );   mask-image: var( --pf-icon-trophy );   }
.pf-why__icon--cog::before      { -webkit-mask-image: var( --pf-icon-cog );      mask-image: var( --pf-icon-cog );      }
.pf-why__icon--target::before   { -webkit-mask-image: var( --pf-icon-target );   mask-image: var( --pf-icon-target );   }
.pf-why__icon--calendar::before { -webkit-mask-image: var( --pf-icon-calendar ); mask-image: var( --pf-icon-calendar ); }
.pf-why__icon--lock::before     { -webkit-mask-image: var( --pf-icon-lock );     mask-image: var( --pf-icon-lock );     }
.pf-why__icon--star::before     { -webkit-mask-image: var( --pf-icon-star );     mask-image: var( --pf-icon-star );     }
.pf-why__title {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h3, 24px );
    font-weight: var( --pf-weight-heading, 700 );
    color: var( --pf-text, #222 );
    margin-bottom: 12px;
    line-height: 1.3;
}
.pf-why__desc {
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-size-body, 16px );
    color: var( --pf-text-muted, #666666 );
    line-height: var( --pf-lh-body, 1.7 );
}

/* ============================================================
   3. SERVICES
   ============================================================ */
.pf-services__intro {
    max-width: 860px;
    margin: 0 auto 70px;
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
    color: var( --pf-text, #222 );
}
.pf-services__intro p { margin-bottom: 16px; }
.pf-services__intro p:last-child { margin-bottom: 0; }
.pf-services__intro h2,
.pf-services__intro h3 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-weight: var( --pf-weight-heading, 700 );
    line-height: var( --pf-lh-heading, 1.2 );
    color: var( --pf-text, #222 );
    margin: 24px 0 14px;
}
.pf-services__intro h2 { font-size: var( --pf-size-h2, 36px ); }
.pf-services__intro h3 { font-size: var( --pf-size-h3, 24px ); }
.pf-services__intro ul {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
}
.pf-services__intro li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: var( --pf-text, #222 );
    line-height: var( --pf-lh-body, 1.7 );
}
/*
 * v2.0.2-alpha.1 — list bullet checkmarks now use SVG via mask-image.
 * The previous `content: "✓"` (U+2713 Heavy Check Mark) renders with
 * different weights across fonts; the SVG keeps a uniform look.
 */
.pf-services__intro li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc( 0.85em + 4px );
    width: 14px;
    height: 14px;
    background-color: var( --pf-primary, #1a73e8 );
    -webkit-mask-image: var( --pf-icon-check );
            mask-image: var( --pf-icon-check );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

.pf-services__rows {
    display: block;
}
.pf-services__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    margin-bottom: 90px;
}
.pf-services__row:last-of-type { margin-bottom: 0; }
.pf-services__row--reverse { direction: rtl; }
.pf-services__row--reverse > * { direction: ltr; }

.pf-services__col-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pf-services__subtitle {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h3, 24px );
    font-weight: var( --pf-weight-heading, 700 );
    color: var( --pf-text, #222 );
    margin-bottom: 20px;
    padding-left: 18px;
    border-left: 4px solid var( --pf-primary, #1a73e8 );
    line-height: 1.3;
}
.pf-services__text {
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
    color: var( --pf-text-muted, #555555 );
}
.pf-services__text p { margin-bottom: 14px; }
.pf-services__text p:last-child { margin-bottom: 0; }
.pf-services__text ul {
    list-style: none;
    padding: 0;
}
.pf-services__text li {
    padding: 8px 0 8px 26px;
    position: relative;
}
.pf-services__text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc( 0.85em + 2px );
    width: 14px;
    height: 14px;
    background-color: var( --pf-primary, #1a73e8 );
    -webkit-mask-image: var( --pf-icon-check );
            mask-image: var( --pf-icon-check );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.pf-services__text strong {
    color: var( --pf-text, #222 );
    font-weight: 700;
}
.pf-services__text h3 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h3, 24px );
    font-weight: var( --pf-weight-heading, 700 );
    color: var( --pf-text, #222 );
    margin: 18px 0 10px;
    line-height: 1.3;
}

.pf-services__col-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.14 );
    aspect-ratio: 4 / 3;
}
.pf-services__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.pf-services__col-image:hover .pf-services__img { transform: scale( 1.04 ); }

.pf-services__footer {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #eeeeee;
}
.pf-services__footer h2 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h2, 36px );
    font-weight: var( --pf-weight-heading, 700 );
    color: var( --pf-text, #222 );
    margin-bottom: 20px;
    line-height: var( --pf-lh-heading, 1.2 );
}
.pf-services__footer h3 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h3, 24px );
    font-weight: var( --pf-weight-heading, 700 );
    color: var( --pf-text, #222 );
    margin: 32px 0 14px;
    line-height: 1.3;
}
.pf-services__footer p {
    margin-bottom: 16px;
    color: var( --pf-text-muted, #555555 );
    line-height: var( --pf-lh-body, 1.7 );
    font-size: var( --pf-size-body, 16px );
}
.pf-services__footer ul {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
}
.pf-services__footer li {
    padding: 8px 0 8px 26px;
    position: relative;
    color: var( --pf-text-muted, #555555 );
}
.pf-services__footer li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc( 0.85em + 2px );
    width: 14px;
    height: 14px;
    background-color: var( --pf-primary, #1a73e8 );
    -webkit-mask-image: var( --pf-icon-check );
            mask-image: var( --pf-icon-check );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* ============================================================
   4. CTA BANNER
   ============================================================ */
.pf-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
}
.pf-cta__decoration {
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(
        circle,
        rgba( 255, 255, 255, 0.04 ) 0%,
        transparent 70%
    );
    border-radius: 50%;
    top: -200px;
    right: -150px;
    pointer-events: none;
}
.pf-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.pf-cta__title {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h2, 36px );
    font-weight: var( --pf-weight-heading, 700 );
    color: var( --pf-text-on-dark, #ffffff );
    margin-bottom: 20px;
    line-height: var( --pf-lh-heading, 1.2 );
}
.pf-cta__text {
    color: rgba( 255, 255, 255, 0.70 );
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
    margin-bottom: 36px;
}
.pf-cta__text p { margin-bottom: 12px; }
.pf-cta__text p:last-child { margin-bottom: 0; }
.pf-cta__text strong { color: var( --pf-text-on-dark, #ffffff ); }

/* ============================================================
   5. SERVICE AREAS
   ============================================================ */
.pf-areas__grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
    gap: 24px;
}
.pf-areas__card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.06 );
}
.pf-areas__group-title {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: 15px;
    font-weight: 700;
    color: var( --pf-primary, #1a73e8 );
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var( --pf-light-bg, #f9f9f9 );
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pf-areas__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pf-areas__pill {
    background: var( --pf-light-bg, #f9f9f9 );
    color: var( --pf-text, #222 );
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
    cursor: default;
}
.pf-areas__pill:hover {
    background: var( --pf-primary, #1a73e8 );
    color: #ffffff;
    border-color: var( --pf-primary, #1a73e8 );
}
.pf-areas__footer {
    margin: 48px auto 0;
    text-align: center;
    max-width: 760px;
    color: var( --pf-text-muted, #666666 );
    line-height: var( --pf-lh-body, 1.7 );
    font-size: var( --pf-size-body, 16px );
}
.pf-areas__footer p { margin-bottom: 12px; }
.pf-areas__footer p:last-child { margin-bottom: 0; }

/* ============================================================
   6. FAQS
   ============================================================ */
.pf-faq__list {
    max-width: 820px;
    margin: 0 auto;
}
.pf-faq__item {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.pf-faq__item.is-open {
    border-color: var( --pf-primary, #1a73e8 );
    box-shadow: 0 4px 20px rgba( 26, 115, 232, 0.10 );
}
.pf-faq__question {
    width: 100%;
    background: none;
    border: none;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-size-body, 16px );
    font-weight: 600;
    color: var( --pf-text, #222 );
    text-align: left;
    transition: color 0.2s ease;
}
.pf-faq__item.is-open .pf-faq__question {
    color: var( --pf-primary, #1a73e8 );
}
.pf-faq__icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: var( --pf-light-bg, #f9f9f9 );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 300;
    color: var( --pf-primary, #1a73e8 );
    line-height: 1;
    transition: transform 0.35s ease, background 0.2s ease, color 0.2s ease;
}
.pf-faq__item.is-open .pf-faq__icon {
    transform: rotate( 45deg );
    background: var( --pf-primary, #1a73e8 );
    color: #ffffff;
}
.pf-faq__answer {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.pf-faq__item.is-open .pf-faq__answer {
    max-height: 600px;
    padding: 0 24px 24px;
}
.pf-faq__answer p {
    color: var( --pf-text-muted, #555555 );
    line-height: var( --pf-lh-body, 1.7 );
    font-size: var( --pf-size-body, 16px );
}

/* ============================================================
   7. FIND US
   ============================================================ */
.pf-findus__inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 48px;
    align-items: start;
}
.pf-findus__details {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.07 );
}
.pf-findus__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #f0f0f0;
}
.pf-findus__item:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/*
 * Contact-detail icons — v2.0.0-alpha.2 replaced the literal 📞 ✉️ 📍 🕒
 * emoji that the renderer used to print inside this <div>. Each contact
 * field carries a modifier class (pf-findus__icon--phone / --email /
 * --address / --hours) that selects the right SVG via the mask-image
 * variables defined on .pf-page at the top of this file.
 */
.pf-findus__icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: linear-gradient(
        135deg,
        rgba( 26, 115, 232, 0.12 ),
        rgba( 26, 115, 232, 0.06 )
    );
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* SVG glyph drawn inside the tinted square. Sized to ~22px (about
       half the 46px container). Uses currentColor so each preset can
       hue-shift via the .pf-findus__icon{ color: ... } property. */
    color: var( --pf-primary, #1a73e8 );
    position: relative;
}
.pf-findus__icon::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.pf-findus__icon--phone::before   { -webkit-mask-image: var( --pf-icon-phone ); mask-image: var( --pf-icon-phone ); }
.pf-findus__icon--email::before   { -webkit-mask-image: var( --pf-icon-mail );  mask-image: var( --pf-icon-mail );  }
.pf-findus__icon--address::before { -webkit-mask-image: var( --pf-icon-pin );   mask-image: var( --pf-icon-pin );   }
.pf-findus__icon--hours::before   { -webkit-mask-image: var( --pf-icon-clock ); mask-image: var( --pf-icon-clock ); }
.pf-findus__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var( --pf-text-soft, #999999 );
    margin-bottom: 4px;
}
.pf-findus__value {
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: var( --pf-size-body, 16px );
    color: var( --pf-text, #222 );
    font-weight: 500;
    line-height: 1.5;
}
/* !important guards against host-theme `.entry-content a { ... }` styles
   that win on equal specificity by virtue of loading later. */
.pf-findus__value a {
    color: var( --pf-text, #222 ) !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.pf-findus__value a:hover,
.pf-findus__value a:focus {
    color: var( --pf-primary, #1a73e8 ) !important;
    text-decoration: none !important;
}
.pf-findus__contact-desc {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #f0f0f0;
    color: var( --pf-text-muted, #666666 );
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
}
.pf-findus__contact-desc p { margin-bottom: 12px; }
.pf-findus__contact-desc p:last-child { margin-bottom: 0; }

/* Each local resource (Australia Post / Wikipedia) is a clickable card.
   Two are rendered as two visually-separated blocks under the contact desc. */
.pf-findus__details > .pf-findus__resource:first-of-type {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #f0f0f0;
    border-radius: 12px;
}
.pf-findus__resource {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 12px;
    text-decoration: none !important;
    color: var( --pf-text, #222 ) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pf-findus__resource:hover,
.pf-findus__resource:focus {
    transform: translateY( -2px );
    border-color: var( --pf-primary, #1a73e8 );
    box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.08 );
    text-decoration: none !important;
}
/*
 * Resource-card icons — v2.0.2-alpha.1 replaced the literal 📮 (Australia
 * Post) and 📖 (Wikipedia) emoji that the renderer used to print here.
 * Modifier classes select between mailbox / globe glyphs via mask-image.
 */
.pf-findus__resource-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        rgba( 26, 115, 232, 0.14 ),
        rgba( 26, 115, 232, 0.06 )
    );
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var( --pf-primary, #1a73e8 );
}
.pf-findus__resource-icon::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.pf-findus__resource-icon--mailbox::before { -webkit-mask-image: var( --pf-icon-mailbox ); mask-image: var( --pf-icon-mailbox ); }
.pf-findus__resource-icon--globe::before   { -webkit-mask-image: var( --pf-icon-globe );   mask-image: var( --pf-icon-globe );   }
.pf-findus__resource-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pf-findus__resource-eyebrow {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var( --pf-primary, #1a73e8 );
}
.pf-findus__resource-text {
    font-family: var( --pf-font-body, 'Inter', sans-serif );
    font-size: 14px;
    font-weight: 500;
    color: var( --pf-text, #222 );
    line-height: 1.4;
}
/*
 * Resource-card arrow — v2.0.2-alpha.1 replaced the literal &rarr; (→) glyph
 * that the renderer used to emit. The renderer now outputs an empty span
 * carrying this class; CSS paints the SVG arrow via mask-image.
 */
.pf-findus__resource-arrow {
    flex: none;
    width: 18px;
    height: 18px;
    background-color: var( --pf-primary, #1a73e8 );
    -webkit-mask-image: var( --pf-icon-arrow );
            mask-image: var( --pf-icon-arrow );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transition: transform 0.2s ease;
}
.pf-findus__resource:hover .pf-findus__resource-arrow {
    transform: translateX( 4px );
}

.pf-findus__map {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.12 );
    min-height: 460px;
    background: #f0f0f0;
}
.pf-findus__map iframe {
    width: 100%;
    height: 100%;
    min-height: 460px;
    border: none;
    display: block;
}
.pf-findus__map-placeholder {
    width: 100%;
    min-height: 460px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --pf-text-soft, #999999 );
    font-size: 16px;
    border-radius: 16px;
}

/* ============================================================
   Responsive — 768px and below
   ============================================================ */
@media ( max-width: 768px ) {
    .pf-section { padding: 60px 0; }

    .pf-hero__title { font-size: 36px; }
    .pf-hero__tagline { font-size: 17px; }
    .pf-hero__content { padding: 100px 0 60px; }
    .pf-hero__actions .pf-btn {
        width: 100%;
        justify-content: center;
    }

    .pf-why__grid { grid-template-columns: 1fr; }

    .pf-services__row {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 56px;
    }
    .pf-services__row--reverse { direction: ltr; }
    .pf-services__col-image { order: -1; }

    .pf-areas__grid { grid-template-columns: 1fr; }

    .pf-findus__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pf-findus__map { order: -1; min-height: 300px; }
    .pf-findus__map iframe { min-height: 300px; }
    .pf-findus__map-placeholder { min-height: 300px; }
}

/* ============================================================
   FORCE-OVERRIDE LAYER (v1.2.0)

   Selector pattern: `body #pf-page-main ...`
   ID specificity (1,1,n) beats every theme selector that targets
   `body.single .entry-content h1 { ...!important }` (specificity 1,2,n)
   ONLY when our rule also uses !important — which it does. This is
   the strongest practical override short of inline styles.

   Every design token from Design Settings reaches the rendered
   element regardless of host theme. Bumped from `.pf-page ...`
   in v1.1.9 because some themes (e.g. Astra-derivatives) use
   `.entry-content h2 { font-family: !important }` at equal specificity
   and lost the cascade by load order.
   ============================================================ */

/* Headings — heading font, weight, line-height (not color, since
   sections like hero / cta deliberately use white). */
body #pf-page-main h1,
body #pf-page-main h2,
body #pf-page-main h3,
body #pf-page-main h4,
body #pf-page-main h5,
body #pf-page-main h6 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif ) !important;
    font-weight: var( --pf-weight-heading, 700 ) !important;
    line-height: var( --pf-lh-heading, 1.2 ) !important;
    letter-spacing: normal !important;
}

/* Specific heading sizes (override theme blanket sizes) */
body #pf-page-main .pf-hero__title       { font-size: clamp( 28px, 6vw, var( --pf-size-h1, 52px ) ) !important; line-height: 1.08 !important; }
body #pf-page-main .pf-section-title,
body #pf-page-main .pf-cta__title         { font-size: var( --pf-size-h2, 36px ) !important; }
body #pf-page-main .pf-services__subtitle,
body #pf-page-main .pf-why__title,
body #pf-page-main .pf-services__intro h3,
body #pf-page-main .pf-services__footer h3,
body #pf-page-main .pf-services__text h3 { font-size: var( --pf-size-h3, 24px ) !important; }
body #pf-page-main .pf-areas__group-title { font-size: 15px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }
body #pf-page-main .pf-findus__label      { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; line-height: 1.4 !important; }
body #pf-page-main .pf-section-label      { letter-spacing: 5px !important; text-transform: uppercase !important; line-height: 1.4 !important; }
/* v2.0.0-alpha.2 — hero eyebrow uses tighter spacing now that the pill is gone. */
body #pf-page-main .pf-hero__label        { letter-spacing: 0.2em !important; text-transform: uppercase !important; line-height: 1.4 !important; }

/* Body / paragraphs / list items — body font + line-height */
body #pf-page-main p,
body #pf-page-main li,
body #pf-page-main span,
body #pf-page-main label,
body #pf-page-main input,
body #pf-page-main textarea,
body #pf-page-main button,
body #pf-page-main a {
    font-family: var( --pf-font-body, 'Inter', sans-serif ) !important;
}
body #pf-page-main p,
body #pf-page-main li {
    line-height: var( --pf-lh-body, 1.7 ) !important;
    font-weight: var( --pf-weight-body, 400 ) !important;
}
body #pf-page-main p { font-size: var( --pf-size-body, 16px ) !important; }

/* Specific text-color overrides (only for sections that intentionally
   carry their own foreground — guards against theme blanket rules). */
body #pf-page-main .pf-hero__title,
body #pf-page-main .pf-hero__tagline,
body #pf-page-main .pf-hero__text,
body #pf-page-main .pf-hero__text *,
body #pf-page-main .pf-hero__label,
body #pf-page-main .pf-cta__title,
body #pf-page-main .pf-cta__text,
body #pf-page-main .pf-cta__text *      { color: inherit !important; }
body #pf-page-main .pf-hero__title       { color: #ffffff !important; }
body #pf-page-main .pf-cta__title        { color: #ffffff !important; }
/* v2.0.0-alpha.2 — hero eyebrow takes accent color (the inherit-force above
   would otherwise turn it the same white as the hero text and erase the
   accent-line treatment). */
body #pf-page-main .pf-hero__label       { color: var( --pf-accent, #f4a124 ) !important; }
body #pf-page-main .pf-hero__label::before { background: var( --pf-accent, #f4a124 ) !important; }

/* Section title color: ensure it follows --pf-text in light/white sections. */
body #pf-page-main .pf-section--white .pf-section-title,
body #pf-page-main .pf-section--light .pf-section-title { color: var( --pf-text, #222 ) !important; }

/* Link colors — neutral inheritance inside detail card so theme
   defaults don't leak. */
body #pf-page-main .pf-findus__details a    { color: var( --pf-text, #222 ) !important; text-decoration: none !important; }
body #pf-page-main .pf-findus__details a:hover,
body #pf-page-main .pf-findus__details a:focus { color: var( --pf-primary, #1a73e8 ) !important; }
body #pf-page-main .pf-findus__resource     { color: var( --pf-text, #222 ) !important; }

/* Button overrides — guarantee primary fill regardless of theme. */
body #pf-page-main .pf-btn,
body #pf-page-main a.pf-btn,
body #pf-page-main button.pf-btn {
    background: var( --pf-primary, #1a73e8 ) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    text-decoration: none !important;
    font-family: var( --pf-font-body, 'Inter', sans-serif ) !important;
    /* v2.0.3 — wired into Design Settings → Buttons & CTAs */
    padding: var( --pf-btn-padding, 14px 28px ) !important;
    border-radius: var( --pf-btn-radius, 8px ) !important;
    font-size: var( --pf-btn-font-size, 16px ) !important;
    font-weight: var( --pf-btn-font-weight, 600 ) !important;
    letter-spacing: var( --pf-btn-letter-spacing, 0 ) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.10 );
}
body #pf-page-main .pf-btn:hover,
body #pf-page-main .pf-btn:focus,
body #pf-page-main a.pf-btn:hover,
body #pf-page-main a.pf-btn:focus {
    background: var( --pf-primary-dark, #1558b0 ) !important;
    color: #ffffff !important;
    transform: translateY( -2px );
    box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.14 );
}
body #pf-page-main .pf-btn--accent,
body #pf-page-main a.pf-btn--accent {
    background: var( --pf-accent, #f4a124 ) !important;
    color: #2c2105 !important;
}
body #pf-page-main .pf-btn--accent:hover,
body #pf-page-main a.pf-btn--accent:hover {
    background: var( --pf-accent, #f4a124 ) !important;
    filter: brightness( 0.92 );
    color: #2c2105 !important;
}

/* Strong / em retain weight semantics under our font. */
body #pf-page-main strong { font-weight: 700 !important; }
body #pf-page-main em { font-style: italic !important; }

/* ============================================================
   MODERN VISUAL TOUCHES (v1.1.9)
   Subtle polish: numbered Why cards, hero label refinement,
   services image hover, button shine. No structural changes.
   ============================================================ */

/* v2.0.0-alpha.2 — the v1.x "refined pill" reinforcement was removed.
   The hero eyebrow now uses the accent-line treatment defined in the
   primary .pf-hero__label rule above. */

/* Why card — numbered indicator (01 / 02 / 03 / …) */
.pf-why__card { position: relative; padding-top: 44px; }
.pf-why__num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba( 26, 115, 232, 0.20 );
    letter-spacing: -1px;
    pointer-events: none;
    user-select: none;
    transition: -webkit-text-stroke-color 0.3s ease, color 0.3s ease;
}
.pf-why__card:hover .pf-why__num {
    -webkit-text-stroke-color: rgba( 26, 115, 232, 0.45 );
}

/* Services image — primary-tint overlay on hover */
.pf-services__col-image {
    position: relative;
    isolation: isolate;
}
.pf-services__col-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba( 26, 115, 232, 0.0 ) 0%,
        rgba( 26, 115, 232, 0.0 ) 60%,
        rgba( 26, 115, 232, 0.18 ) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}
.pf-services__col-image:hover::after { opacity: 1; }

/* Areas pill — softer shadow on hover */
.pf-areas__pill { box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.02 ); }

/* FAQ icon — switch + → × on open (line treatment cleaner than rotation) */
.pf-faq__item.is-open .pf-faq__icon { transform: rotate( 45deg ); }

/* Button shine on hover */
.pf-btn { position: relative; overflow: hidden; }
.pf-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient( 120deg, rgba( 255, 255, 255, 0 ) 30%, rgba( 255, 255, 255, 0.18 ) 50%, rgba( 255, 255, 255, 0 ) 70% );
    transform: translateX( -100% );
    transition: transform 0.6s ease;
    pointer-events: none;
}
.pf-btn:hover::before { transform: translateX( 100% ); }

/* Section title — modern accent underline beneath the eyebrow label */
.pf-section-header { padding-bottom: 6px; }
.pf-section-header .pf-section-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var( --pf-primary, #1a73e8 );
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Hero overlay vignette for added depth */
.pf-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        transparent 50%,
        rgba( 0, 0, 0, 0.25 ) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Smoother card-row entrances when scroll-revealed */
.pf-why__card,
.pf-services__row,
.pf-areas__card,
.pf-faq__item,
.pf-findus__details,
.pf-findus__map { will-change: transform; }

/* ============================================================
   NATURAL-FORMAT CONTENT (v1.2.0)

   Classes emitted by Content_Parser::render_body() — every generic
   H2 section now wraps its body in .pf-section-body. Inline
   markdown structures use .pf-h3, .pf-list, .pf-link,
   .pf-cta-line, .pf-phone-line.
   ============================================================ */

.pf-section-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.pf-section-body {
    max-width: 860px;
    margin: 0 auto;
    color: var( --pf-text, #222 );
}
.pf-section-body p {
    color: var( --pf-text-muted, #555 );
    margin-bottom: 18px;
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
}
.pf-section-body p:last-child { margin-bottom: 0; }
.pf-section-body strong {
    color: var( --pf-text, #222 );
    font-weight: var( --pf-weight-heading, 700 );
}

.pf-section-body .pf-h3,
body #pf-page-main .pf-section-body .pf-h3 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h3, 24px );
    font-weight: var( --pf-weight-heading, 700 );
    line-height: 1.3;
    color: var( --pf-text, #222 );
    margin: 32px 0 14px;
    padding-left: 16px;
    border-left: 4px solid var( --pf-primary, #1a73e8 );
}

.pf-section-body .pf-list,
.pf-section-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.pf-section-body .pf-list li,
.pf-section-body ul li {
    position: relative;
    padding: 10px 0 10px 30px;
    color: var( --pf-text-muted, #555 );
    line-height: var( --pf-lh-body, 1.7 );
    font-size: var( --pf-size-body, 16px );
}
.pf-section-body .pf-list li::before,
.pf-section-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc( 10px + 0.5em - 7px );
    width: 14px;
    height: 14px;
    background-color: var( --pf-primary, #1a73e8 );
    -webkit-mask-image: var( --pf-icon-check );
            mask-image: var( --pf-icon-check );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.pf-section-body .pf-list li strong,
.pf-section-body ul li strong {
    color: var( --pf-text, #222 );
    font-weight: var( --pf-weight-heading, 700 );
    margin-right: 4px;
}

.pf-section-body .pf-link,
body #pf-page-main .pf-section-body .pf-link {
    color: var( --pf-primary, #1a73e8 );
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.pf-section-body .pf-link:hover,
.pf-section-body .pf-link:focus {
    color: var( --pf-primary-dark, #1558b0 );
    border-bottom-color: currentColor;
}

.pf-section-body .pf-cta-line {
    margin: 26px 0 12px;
    text-align: left;
}
.pf-section-body .pf-phone-line {
    margin: 8px 0 18px;
}
.pf-section-body .pf-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var( --pf-text, #222 );
    text-decoration: none;
    font-weight: var( --pf-weight-heading, 700 );
    border-bottom: 1px dashed var( --pf-text-soft, #999 );
    transition: color 0.2s ease, border-color 0.2s ease;
}
/*
 * Inline phone icon — v2.0.0-alpha.2 replaces the literal "📞 " prefix
 * the parser used to emit. Uses the same currentColor mask technique as
 * the button-style phone CTAs so hover color shifts the icon too.
 */
.pf-section-body .pf-phone::before {
    content: '';
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    background-color: currentColor;
    -webkit-mask-image: var( --pf-icon-phone );
            mask-image: var( --pf-icon-phone );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    flex-shrink: 0;
}
.pf-section-body .pf-phone:hover {
    color: var( --pf-primary, #1a73e8 );
    border-bottom-color: var( --pf-primary, #1a73e8 );
}

/* Hero / CTA inverted variants — keep readable text on dark backgrounds. */
.pf-hero__text .pf-link,
.pf-cta__text .pf-link {
    color: #ffffff;
    border-bottom-color: rgba( 255, 255, 255, 0.4 );
}
.pf-hero__text .pf-list li,
.pf-cta__text .pf-list li,
.pf-hero__text ul li,
.pf-cta__text ul li {
    color: rgba( 255, 255, 255, 0.85 );
}
.pf-hero__text .pf-list li::before,
.pf-cta__text .pf-list li::before,
.pf-hero__text ul li::before,
.pf-cta__text ul li::before {
    color: var( --pf-accent, #f4a124 );
}

/* ====================================================================
 *  Phone CTA — secondary outline button (v1.4.4)
 *  ────────────────────────────────────────────────────────────────────
 *  Renders 📞 calls to action as bordered buttons that visually pair
 *  with the primary 👉 button rather than as underlined text. The
 *  ::before adds the phone icon so the renderer can drop the literal
 *  emoji from the label (Renderer::format_phone_label strips it).
 *
 *  Three contexts:
 *    .pf-hero__phone     — on hero (dark bg → white border)
 *    .pf-cta__phone      — on dark final-CTA banner (white border)
 *    .pf-section-phone   — on light section bg (primary color border)
 * ==================================================================== */
body #pf-page-main .pf-hero__phone,
body #pf-page-main .pf-section-phone,
body #pf-page-main .pf-cta__phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    /* v2.0.3 — phone CTAs share the primary --pf-btn-* family so a single
       Buttons & CTAs pass shapes the entire button system consistently. */
    padding: var( --pf-btn-padding, 13px 26px ) !important;
    border-radius: var( --pf-btn-radius, 8px ) !important;
    font-weight: var( --pf-btn-font-weight, 600 ) !important;
    font-size: var( --pf-btn-font-size, 16px ) !important;
    letter-spacing: var( --pf-btn-letter-spacing, 0 ) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    border: var( --pf-btn-outline-width, 2px ) solid !important;
    background: transparent !important;
}
/*
 * Phone icon — SVG via mask-image. v2.0.0-alpha.2 replaced the literal
 * 📞 emoji with a Heroicons-style SVG so the glyph (a) doesn't render
 * differently on every OS, (b) inherits the button's text color via
 * currentColor (so it shifts with the text on hover), and (c) doesn't
 * look like an AI-generated landing page.
 */
body #pf-page-main .pf-hero__phone::before,
body #pf-page-main .pf-section-phone::before,
body #pf-page-main .pf-cta__phone::before {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    background-color: currentColor;
    -webkit-mask-image: var( --pf-icon-phone );
            mask-image: var( --pf-icon-phone );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    line-height: 1;
}

/* Hero (dark hero bg) — uses Text-on-Dark for border + label. v1.4.5 routes
 * the previously hardcoded #ffffff through the new variable so authors
 * can override the dark-context text colour without touching the hero CSS. */
body #pf-page-main .pf-hero__phone {
    color: var( --pf-text-on-dark, #ffffff ) !important;
    border-color: var( --pf-text-on-dark, #ffffff ) !important;
    /* Slight transparency on the border keeps it from screaming on bright photos. */
    border-color: color-mix( in srgb, var( --pf-text-on-dark, #ffffff ) 85%, transparent ) !important;
}
body #pf-page-main .pf-hero__phone:hover {
    background: var( --pf-text-on-dark, #ffffff ) !important;
    color: var( --pf-primary, #1a73e8 ) !important;
    border-color: var( --pf-text-on-dark, #ffffff ) !important;
    transform: translateY( -1px );
}

/* Final CTA banner — same treatment as hero, on the dark CTA bg. */
body #pf-page-main .pf-cta__phone {
    color: var( --pf-text-on-dark, #ffffff ) !important;
    border-color: color-mix( in srgb, var( --pf-text-on-dark, #ffffff ) 85%, transparent ) !important;
}
body #pf-page-main .pf-cta__phone:hover {
    background: var( --pf-text-on-dark, #ffffff ) !important;
    color: var( --pf-primary, #1a73e8 ) !important;
    border-color: var( --pf-text-on-dark, #ffffff ) !important;
    transform: translateY( -1px );
}

/* Section actions (light bg) — primary-colour border, primary-colour text. */
body #pf-page-main .pf-section-phone {
    color: var( --pf-primary, #1a73e8 ) !important;
    border-color: var( --pf-primary, #1a73e8 ) !important;
}
body #pf-page-main .pf-section-phone:hover {
    background: var( --pf-primary, #1a73e8 ) !important;
    color: #ffffff !important;
    transform: translateY( -1px );
}

/* Buttons-pair wrappers: keep primary + phone side by side, stack on mobile. */
body #pf-page-main .pf-hero__actions,
body #pf-page-main .pf-section-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
}
body #pf-page-main .pf-section-actions { justify-content: center !important; }

@media ( max-width: 480px ) {
    body #pf-page-main .pf-hero__actions,
    body #pf-page-main .pf-section-actions { flex-direction: column !important; align-items: stretch !important; }
    body #pf-page-main .pf-hero__actions > a,
    body #pf-page-main .pf-section-actions > a { width: 100% !important; justify-content: center !important; }
}

.pf-section-actions {
    text-align: center;
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}
.pf-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.pf-section-desc {
    color: var( --pf-text-muted, #555 );
    font-size: var( --pf-size-body, 16px );
    line-height: var( --pf-lh-body, 1.7 );
    margin-top: 14px;
}
.pf-section-desc p { margin-bottom: 14px; }
.pf-section-desc p:last-child { margin-bottom: 0; }

/* ============================================================
   v1.2.1 — Render-failure fallback page

   Used by templates/base-layout.php when the renderer catches an
   exception. Stays close to the pf-page baseline so the failure
   doesn't look completely out-of-place — just a clean centered
   message with optional admin-only details.
   ============================================================ */
.pf-page--error {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: var( --pf-light-bg, #f9f9f9 );
}
.pf-page--error .pf-container {
    max-width: 720px;
    text-align: center;
    background: #fff;
    padding: 40px 36px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.06 );
    border: 1px solid #ececec;
}
.pf-page--error h1 {
    font-family: var( --pf-font-heading, 'Inter', sans-serif );
    font-size: var( --pf-size-h2, 32px );
    margin: 0 0 14px;
    color: var( --pf-text, #222 );
}
.pf-page--error p {
    color: var( --pf-text-muted, #666 );
    line-height: var( --pf-lh-body, 1.7 );
    margin: 0;
}
.pf-error-details {
    margin: 28px auto 0;
    max-width: 600px;
    text-align: left;
    background: #1d2327;
    color: #e8e9ea;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 12px;
}
.pf-error-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #f4a124;
    user-select: none;
}
.pf-error-details pre {
    margin: 12px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
}

/* ============================================================
   v1.2.2 — Pattern-detected layouts + visual polish
   ============================================================ */

/* ---- Hero scroll indicator (CSS-only bouncing chevron) ---- */
.pf-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX( -50% );
    z-index: 3;
    pointer-events: none;
    opacity: 0.7;
    animation: pf-bounce 2.4s ease-in-out infinite;
}
.pf-hero__scroll-chevron {
    display: block;
    width: 22px;
    height: 22px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate( 45deg );
    margin: 0 auto;
}
@keyframes pf-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate( -50%, 0 ); }
    40%                     { transform: translate( -50%, 8px ); }
    60%                     { transform: translate( -50%, 4px ); }
}
@media ( max-width: 768px ) {
    .pf-hero__scroll { display: none; }
}

/* ---- Inline figure (used by render_body when [IMG:] sits in non-image-rows layouts) ---- */
.pf-figure {
    margin: 24px auto;
    max-width: 100%;
    text-align: center;
}
.pf-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.10 );
}

/* ---- Services full-width image (image_rows layout, image with no H3) ---- */
.pf-services__figure {
    margin: 0 auto 56px;
    max-width: 1140px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.14 );
}
.pf-services__figure img {
    display: block;
    width: 100%;
    height: auto;
}
.pf-services__intro-row {
    max-width: 860px;
    margin: 0 auto 56px;
    text-align: center;
    color: var( --pf-text-muted, #555 );
    line-height: var( --pf-lh-body, 1.7 );
}

/* ---- Generic section action strip (CTAs beneath card_grid / image_rows / pill_groups) ---- */
.pf-section-actions {
    margin-top: 40px;
    text-align: center;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.pf-section-outro {
    max-width: 760px;
    margin: 36px auto 0;
    text-align: center;
    color: var( --pf-text-muted, #555 );
    line-height: var( --pf-lh-body, 1.7 );
}

/* ---- Prose-with-H3: small accent bar above each H3 ---- */
.pf-section--prose-h3 .pf-section-body h3,
.pf-section--prose-h3 .pf-section-body .pf-h3 {
    position: relative;
    padding-top: 14px;
    margin-top: 36px;
}
.pf-section--prose-h3 .pf-section-body h3::before,
.pf-section--prose-h3 .pf-section-body .pf-h3::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var( --pf-primary, #1a73e8 );
}
.pf-section--prose-h3 .pf-section-body .pf-h3 {
    /* Override the default border-left treatment for this layout. */
    border-left: 0;
    padding-left: 0;
}

/* ---- Contact section: 3-row layout (top: details+map / mid: intro / bottom: resource cards) ---- */
.pf-findus__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: stretch;
}
.pf-findus__details,
.pf-findus__map {
    min-height: 360px;
}
.pf-findus__map {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba( 0, 0, 0, 0.10 );
    background: #f0f0f1;
    position: relative;
}
.pf-findus__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}
.pf-findus__map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --pf-text-soft, #999 );
    font-style: italic;
}
.pf-findus__intro {
    margin: 48px auto 0;
    text-align: center;
}
.pf-findus__intro-inner {
    max-width: 720px;
    margin: 0 auto;
    color: var( --pf-text-muted, #555 );
    line-height: var( --pf-lh-body, 1.7 );
}
.pf-findus__intro-inner p {
    margin: 0 0 14px;
}
.pf-findus__intro-inner p:last-child {
    margin: 0;
}
.pf-findus__resources {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
    gap: 20px;
    margin-top: 32px;
}
@media ( max-width: 768px ) {
    .pf-findus__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pf-findus__details,
    .pf-findus__map,
    .pf-findus__map iframe,
    .pf-findus__map-placeholder {
        min-height: 0;
    }
    .pf-findus__map iframe,
    .pf-findus__map-placeholder {
        min-height: 280px;
    }
    .pf-findus__intro {
        margin-top: 32px;
    }
    .pf-findus__resources {
        margin-top: 24px;
    }
}

/* ---- Final CTA: side-by-side buttons + accent decoration ---- */
.pf-cta {
    position: relative;
    overflow: hidden;
}
.pf-cta__decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 88% 92%,
            rgba( 244, 161, 36, 0.18 ) 0%,
            rgba( 244, 161, 36, 0.06 ) 28%,
            transparent 55%
        ),
        radial-gradient(
            circle at 6% 8%,
            rgba( 255, 255, 255, 0.04 ) 0%,
            transparent 30%
        );
}
.pf-cta__buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 28px;
}
@media ( max-width: 540px ) {
    .pf-cta__buttons .pf-btn { width: 100%; }
}

/* ---- Outline button variant (used by the phone CTA on the dark CTA banner) ---- */
.pf-btn--outline,
body #pf-page-main .pf-btn--outline,
body #pf-page-main a.pf-btn--outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba( 255, 255, 255, 0.5 ) !important;
    box-shadow: none !important;
}
body #pf-page-main .pf-btn--outline:hover,
body #pf-page-main .pf-btn--outline:focus,
body #pf-page-main a.pf-btn--outline:hover,
body #pf-page-main a.pf-btn--outline:focus {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY( -2px );
}
.pf-btn--outline span:first-child {
    margin-right: 4px;
    font-size: 17px;
}


/* ======================================================================
 *  v1.4.0 — Cross-link section (.pf-xlinks)
 *  Two-column grid on desktop, stacked on mobile.
 * ====================================================================== */
body #pf-page-main .pf-xlinks {
    background: var(--pf-light-bg, #f9f9f9) !important;
    padding: 60px 20px !important;
    border-top: 1px solid rgba( 0, 0, 0, 0.06 ) !important;
}
body #pf-page-main .pf-xlinks__grid {
    display: grid !important;
    grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ) !important;
    gap: 36px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}
body #pf-page-main .pf-xlinks__group { padding: 0 !important; }
body #pf-page-main .pf-xlinks__heading {
    color: var(--pf-text, #222) !important;
    font-family: var(--pf-font-heading, 'Inter'), sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 0 0 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--pf-primary, #1a73e8) !important;
    display: inline-block !important;
}
body #pf-page-main .pf-xlinks__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
}
body #pf-page-main .pf-xlinks__list li { margin: 0 !important; }
body #pf-page-main .pf-xlinks__list a {
    color: var(--pf-text, #222) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
    border-bottom: 1px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}
/*
 * Cross-link list marker — v2.0.0-alpha.2 replaced the literal "→" glyph
 * with an SVG chevron via mask-image. The character renders inconsistently
 * across fonts (Helvetica's → is wide, Inter's is narrow, Times serifs
 * leak into the design) and counts as an "AI tell" alongside emoji.
 */
body #pf-page-main .pf-xlinks__list a::before {
    content: '';
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    background-color: var(--pf-primary, #1a73e8);
    -webkit-mask-image: var( --pf-icon-chevron );
            mask-image: var( --pf-icon-chevron );
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    flex-shrink: 0;
}
body #pf-page-main .pf-xlinks__list a:hover {
    color: var(--pf-primary, #1a73e8) !important;
    border-bottom-color: var(--pf-primary, #1a73e8) !important;
}