/* Point Pumps — shared by every page (resources/views/layouts/site.blade.php links it).
   Base links, the header (desktop nav, mega panels, phone menu) and the CTA pill.
   Page-specific CSS stays in each page view's @section('styles'). */

body { margin: 0; background: #ffffff }
a { color: #8f2027; text-decoration: none }
a:hover { color: #6d181e }
/* the phone menu rows and the CTA rise in with it */
@keyframes pp-up { from { opacity: 0; transform: translateY(18px) } }

/* ═══ Header — the home page header, plus a menu button below 960px ═ */
        .pp-nav > a:not(.btn) { padding-block: 6px }
        .pp-nav > a:not(.btn), .pp-nav > span { background: linear-gradient(#8f2027, #8f2027) 0 100% / 0 1.5px no-repeat; transition: background-size .3s cubic-bezier(.3, .8, .3, 1) }
        .pp-nav > a:not(.btn):hover, .pp-nav > span:hover, .pp-nav > a[aria-current="page"], .pp-nav > span[aria-current="page"] { background-size: 100% 1.5px }
        .pp-nav > a[aria-current="page"], .pp-nav > span[aria-current="page"] { color: #8f2027 !important }
        .pp-burger { display: none; position: relative; flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--color-divider); border-radius: 999px; background: transparent; cursor: pointer; transition: border-color .25s, background-color .25s }
        .pp-burger:hover { border-color: #8f2027 }
        .pp-burger i { position: absolute; left: 14px; right: 14px; height: 1.5px; background: #1d1f20; transition: transform .35s cubic-bezier(.3, .8, .3, 1), opacity .2s, background-color .25s }
        .pp-burger i:nth-child(1) { top: 16px }
        .pp-burger i:nth-child(2) { top: 22px }
        .pp-burger i:nth-child(3) { top: 28px }
        .pp-burger.is-open { background: #1d1f20; border-color: #1d1f20 }
        .pp-burger.is-open i { background: #fff }
        .pp-burger.is-open i:nth-child(1) { transform: translateY(6px) rotate(45deg) }
        .pp-burger.is-open i:nth-child(2) { opacity: 0 }
        .pp-burger.is-open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
        /* Overlay off the header bar, not a block that pushes the page down; in max-height 100% = the header's height */
        .pp-mnav { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; box-sizing: border-box; border-top: 1px solid var(--color-divider); background: #fff; padding: 4px 20px 24px; max-height: calc(100svh - 100%); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 40px -24px color-mix(in srgb, #1d1f20 45%, transparent) }
        .pp-mnav nav { display: flex; flex-direction: column }
        /* Rows: a plain link carries no arrow — the chevron is reserved for rows that open a submenu */
        .pp-mnav nav > a, .pp-msub-t { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 2px; border: 0; border-bottom: 1px solid var(--color-divider); background: none; font: inherit; font-family: var(--font-heading); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: #1d1f20; cursor: pointer }
        .pp-mnav nav > * { animation: pp-up .45s cubic-bezier(.2, .8, .2, 1) backwards }
        .pp-mnav nav > a:hover, .pp-mnav nav > a[aria-current="page"], .pp-msub-t:hover, .pp-msub.is-open .pp-msub-t, .pp-msub-t[aria-current="page"] { color: #8f2027 }
        /* Submenus: the desktop mega panels' groups, opened in place; the chevron points down and flips up while open */
        .pp-msub-t::after { content: ""; flex: none; width: 8px; height: 8px; margin: -5px 6px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s cubic-bezier(.3, .8, .3, 1), margin .3s }
        .pp-msub.is-open .pp-msub-t::after { margin-top: 5px; transform: rotate(-135deg) }
        /* 0fr → 1fr animates to the list's natural height; visibility keeps folded links out of the tab order, flipping only once the fold ends */
        .pp-msub-p { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s cubic-bezier(.3, .8, .3, 1), visibility 0s .35s }
        .pp-msub.is-open .pp-msub-p { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s cubic-bezier(.3, .8, .3, 1) }
        /* the inset shadow is the closing divider — nothing to paint at zero height, so it rides the edge as the list folds */
        .pp-msub-in { display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-shadow: inset 0 -1px 0 var(--color-divider) }
        .pp-msub-in a { padding: 9px 2px 9px 14px; font-size: 16px; line-height: 1.35; color: #1d1f20 }
        .pp-msub-in a:first-child { margin-top: 8px }
        .pp-msub-in a:last-child { margin-bottom: 14px }
        .pp-msub-in a:hover { color: #8f2027 }
        .pp-msub-in .pp-msub-lead { font-family: var(--font-heading); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #8f2027 }
        /* A grouped menu's headings (Biogas: Biogas equipment, Portable, Customized), quiet like the panel's */
        .pp-msub-in .pp-msub-h { margin-top: 10px; padding: 8px 2px 2px 14px; font-family: var(--font-heading); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, #1d1f20 60%, transparent) }
        @media (prefers-reduced-motion: reduce) { .pp-msub-p, .pp-msub.is-open .pp-msub-p, .pp-msub-t::after { transition: none } }
        .pp-mnav nav > :nth-child(2) { animation-delay: .03s }
        .pp-mnav nav > :nth-child(3) { animation-delay: .06s }
        .pp-mnav nav > :nth-child(4) { animation-delay: .09s }
        .pp-mnav nav > :nth-child(5) { animation-delay: .12s }
        .pp-mnav nav > :nth-child(6) { animation-delay: .15s }
        .pp-mnav nav > :nth-child(7) { animation-delay: .18s }
        .pp-mnav nav > :nth-child(8) { animation-delay: .21s }
        .pp-mnav nav > :nth-child(9) { animation-delay: .24s }
        .pp-mnav .pp-cta { width: 100%; justify-content: center; margin-top: 20px; animation: pp-up .45s cubic-bezier(.2, .8, .2, 1) .24s backwards }
        /* Motion only — a stalled pp-up must not leave an item invisible */
        .pp-mnav nav > *, .pp-mnav .pp-cta { opacity: 1 !important }
        /* Overlay, not a block: in flow these sticky-header children shove the page down on hover */
        header .pp-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; max-height: calc(100svh - 100%); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 40px -24px color-mix(in srgb, #1d1f20 45%, transparent) }
        /* Header logo: size and the built-in logo's padding-cancelling margins come in as variables
           (SiteSettings::headerLogo), set from Header & footer in the admin */
        .pp-logo { height: var(--logo-h, 70px); width: auto; margin: var(--logo-mt, -18px) var(--logo-mr, -12px) var(--logo-mb, -19px) var(--logo-ml, -12px); background: transparent; padding: 0 }
        .pp-mega-title { font-family: var(--font-heading); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, #1d1f20 60%, transparent); margin-bottom: var(--space-4) }
        /* A grouped panel: the groups' headings in a row with a rule under it, and the products of whichever one
           is pointed at below (partials/header, the grp… bindings in partials/site-script) */
        .pp-mega-tabs { min-width: 0 }
        .pp-mega-groups { display: flex; flex-wrap: wrap; gap: 0 var(--space-8); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-4) }
        .pp-mega-group { position: relative; padding: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, #1d1f20 60%, transparent); cursor: default; transition: color .2s }
        .pp-mega-group:hover, .pp-mega-group:focus-visible, .pp-mega-group.is-on { color: #8f2027; outline: none }
        /* The open group's heading is underlined in maroon, sitting on the rule */
        .pp-mega-group::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #8f2027; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.3, .8, .3, 1) }
        .pp-mega-group.is-on::after { transform: scaleX(1) }
        /* Every list in the same cell, the others hidden: the panel keeps the longest one's height */
        .pp-mega-panes { display: grid }
        .pp-mega-pane { grid-area: 1 / 1; align-content: start }
        .pp-mega-pane:not(.is-on) { visibility: hidden }
        /* A dropdown's links answer the pointer the way the menu row does: maroon, with the underline sweeping in
           from the left. As wide as their words (fit-content), or a grid cell's link would underline the whole
           cell; !important on the colour because each link writes its own on the element. */
        .pp-mega a { width: fit-content; background: linear-gradient(#8f2027, #8f2027) 0 100% / 0 1.5px no-repeat; transition: color .2s ease, background-size .3s cubic-bezier(.3, .8, .3, 1) }
        .pp-mega a:hover, .pp-mega a:focus-visible { color: #8f2027 !important; background-size: 100% 1.5px }
        /* A panel's lead link — the range's own page ("Explore Biogas"): an outlined maroon button that fills on
           hover (M2 on /demo-header, 2026-10-08), with an arrow that steps on as you point at it, so it reads as
           the way in rather than as a heading. The arrow is drawn here, not typed into the menu text, so Header &
           footer's "Lead link text" stays plain words. */
        .pp-mega a.pp-mega-lead { display: inline-flex; align-items: center; padding: 12px 20px; border: 1.5px solid #8f2027; background: none; font-family: var(--font-heading); font-size: 15px; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: #8f2027; transition: background-color .25s, color .25s }
        .pp-mega a.pp-mega-lead:hover, .pp-mega a.pp-mega-lead:focus-visible { background: #8f2027; color: #fff !important }
        .pp-mega-lead::after, .pp-msub-in .pp-msub-lead::after { content: "→"; display: inline-block; margin-left: .35em; transition: translate .3s cubic-bezier(.3, .8, .3, 1) }
        .pp-mega-lead:hover::after, .pp-mega-lead:focus-visible::after, .pp-msub-in .pp-msub-lead:hover::after { translate: 5px 0 }
        /* The product you're already on, inside its own range's panel */
        .pp-mega a[aria-current="page"], .pp-msub-p a[aria-current="page"] { color: #8f2027 !important; font-weight: 600 }
        @media (max-width: 960px) {
          .pp-nav, .pp-mega { display: none !important }
          /* The menu button takes the right edge on its own: the open menu ends in its own full-width Enquire
             (partials/header, .pp-mnav .pp-cta), so the header's button would only be a second one beside it —
             hidden on phones and tablets alike */
          .pp-burger { display: block; margin-left: auto }
          .pp-row .pp-enquire { display: none !important }
        }
        @media (min-width: 961px) { .pp-mnav { display: none !important } }
        /* Both bars keep the same gutter either side, so the tagline, the menu and the Enquire button all line
           up with each other (--pp-gutter is set on `header`, further down). The logo's maroon block runs
           through that gutter to the window edge (header.pp-plated, further down). */
        .pp-topbar { padding: var(--space-2) var(--pp-gutter) }
        .pp-enquire { padding: var(--space-3) var(--space-6) }

        /* The header's search box, between the menu and Enquire. It stays narrow so the eight menu items keep
           their room, and widens when someone is actually typing in it. */
        .pp-search { display: flex; flex: none; align-items: center; border: 1px solid var(--color-divider); background: #ffffff; transition: border-color .2s ease }
        .pp-search:focus-within { border-color: #8f2027 }
        .pp-search-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
        .pp-search-i { width: 120px; min-width: 0; border: 0; background: none; font-family: var(--font-body); font-size: 14px; padding: 7px 10px; color: #1d1f20; transition: width .25s cubic-bezier(.3, .8, .3, 1) }
        .pp-search-i::placeholder { color: color-mix(in srgb, #1d1f20 45%, transparent) }
        .pp-search-i:focus { outline: none; width: 190px }
        .pp-search-b { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; padding: 0; border: 0; background: none; color: #8f2027; cursor: pointer }
        .pp-search-b svg { width: 16px; height: 16px; display: block }
        .pp-search-b:focus-visible { outline: 2px solid #8f2027; outline-offset: -2px }
        /* No room for it beside the menu once things tighten, and none at all on a phone: the menu carries
           its own box there (partials/mnav). */
        @media (max-width: 1400px) { .pp-search-i { width: 96px } .pp-search-i:focus { width: 150px } }
        @media (max-width: 1080px) { .pp-search { display: none } }
        /* The same box inside the open phone menu, full width because it has the room there. */
        .pp-msearch { display: flex; align-items: center; border: 1px solid var(--color-divider); background: #ffffff; margin-bottom: 18px }
        .pp-msearch .pp-search-i { flex: 1 1 auto; width: auto; font-size: 16px; padding: 11px 12px }
        .pp-msearch .pp-search-i:focus { width: auto; outline: none }
        @media (min-width: 1081px) { .pp-msearch { display: none } }

        /* The side gutter both header bars breathe by: the top bar's tagline and email, and Enquire below it,
           line up on the same margin. A small fixed one — the home page's since 2026-10-01, when its header
           became every page's; the wide one that grew with the window, clamp(20px, 3.4vw, 72px), is gone.
           The 640px rule further down overrides it with a flat 16px on a phone. --pp-row-pad is the menu
           row's padding above and below (partials/header writes it on .pp-row), taller on desktop; below
           961px the row holds the menu button and is already that tall.
           Set on the header rather than on each bar, so anything else added to it inherits the same number:
           a variable read where it was never defined makes the whole declaration invalid, and the element
           then has no padding at all. */
        header { --pp-gutter: var(--space-6); --pp-row-pad: var(--space-3) }
        @media (min-width: 961px) { header { --pp-row-pad: 16px } }
        /* Eight menu items with long labels (Industries We Serve, Food waste disposer) no longer fit on one
           row beside the logo and Enquire below ~1250px. The row used to wrap, dropping Enquire onto a line
           of its own under the middle of the menu. Keep the row in one line and let the nav tighten instead;
           the inline font-size is a clamp on the element, so these need !important to reach it. Below 961px
           the phone menu takes over and none of this applies. */
        .pp-row { flex-wrap: nowrap }
        @media (max-width: 1400px) and (min-width: 961px) {
          .pp-nav { font-size: 13px !important; gap: 8px 11px !important; letter-spacing: .06em !important }
          /* The Enquire button sits outside the nav, so it needs telling too, or it stays 18px beside a 13px menu */
          .pp-enquire { font-size: 13px !important; letter-spacing: .06em !important; padding: 10px 14px !important }        }
        @media (max-width: 640px) {
          .pp-tagline { display: none }
          .pp-topbar { gap: 16px !important; padding-inline: 16px !important; letter-spacing: .1em !important }
          .pp-row { padding-inline: 16px !important }
          /* The phone header runs the logo at 83% — scaled from whatever the admin set (--logo-* on the img) */
          .pp-logo { height: calc(var(--logo-h) * .83) !important; margin: calc(var(--logo-mt) * .83) calc(var(--logo-mr) * .83) calc(var(--logo-mb) * .83) calc(var(--logo-ml) * .83) !important }
        }
        /* No room for the top strip on a phone: the menu row alone, its number and email are in the menu */
        @media (max-width: 760px) { .pp-topbar { display: none !important } }

        /* Each dropdown's ▾ close up against its label. The arrow and the space before it are their own span
           (.pp-caret, partials/header); the space, widened by the menu's letter spacing, left the arrow nearly
           as far from its word as the next item. In em, so it holds at the smaller menu size too. */
        header .pp-nav .pp-caret { margin-left: -.3em }

        /* A clear gap between menu items, so each reads as its own link. Set per width from the room the row
           actually has (measured with the logo on its block at 48px), because the menu must stay on one line:
           the gap is the only thing that gives.
             1500px and up   the full-size menu; the gap grows with the window, 26px → 32px.
             1401–1499px     no room for a wider gap at full size, so the menu (and Enquire) drop to the
                             smaller size the rule above uses from 1400px.
             1200–1499px     smaller menu, 24px.
             961–1199px      smaller menu, 18px; the logo block's padding and the search box give a little
                             up to make the room, which is tightest just above 1080px.
           `header .pp-nav` and !important to beat the 1400px rule's own !important gap. */
        @media (min-width: 1500px) { header .pp-nav { column-gap: clamp(26px, 3.6vw - 28px, 32px) !important } }
        @media (min-width: 1401px) and (max-width: 1499px) {
          header .pp-nav { font-size: 13px !important; letter-spacing: .06em !important }
          header .pp-enquire { font-size: 13px !important; letter-spacing: .06em !important; padding: 10px 14px !important }
        }
        @media (min-width: 1200px) and (max-width: 1499px) { header .pp-nav { column-gap: 24px !important } }
        @media (min-width: 961px) and (max-width: 1199px) {
          header .pp-nav { column-gap: 18px !important }
          /* !important: the block's own padding is written further down, and would otherwise win */
          header.pp-plated .pp-row > a:first-child { padding: 0 18px !important }
          header .pp-search-i { width: 72px }
          /* still widens to type in, over the menu's spare room */
          header .pp-search-i:focus { width: 130px }
        }

        /* The logo on a maroon block (Header & footer → "Logo on a maroon block", header_logo_plate): the block
           is the logo's own link, the row's first child, filling the menu row and pulled through the row's
           padding to the window's left edge by negative margins that match it. One pixel further down than the
           padding, so it sits over the header's bottom rule instead of stopping on it. The logo is dark
           artwork, turned white by a filter rather than swapped for a second file, so whatever logo is
           uploaded follows along; its size is still the Size box's (--logo-h). */
        header.pp-plated .pp-row > a:first-child {
          align-self: stretch; background: #8f2027; padding: 0 var(--space-8);
          margin: calc(var(--pp-row-pad) * -1) 0 calc(var(--pp-row-pad) * -1 - 1px) calc(var(--pp-gutter) * -1)
        }
        header.pp-plated .pp-logo { filter: brightness(0) invert(1) }
        /* A phone's row has a flat 16px either side, not the gutter; the logo runs at two thirds (32px at the
           usual 48) rather than the 83% above, because the row must also hold Enquire and the menu button, and
           at 320px wide that is all that fits. */
        @media (max-width: 640px) {
          header.pp-plated .pp-row > a:first-child { margin-left: -16px; padding: 0 16px }
          header.pp-plated .pp-logo { height: calc(var(--logo-h) * .67) !important; margin: calc(var(--logo-mt) * .67) calc(var(--logo-mr) * .67) calc(var(--logo-mb) * .67) calc(var(--logo-ml) * .67) !important }
        }

/* ═══ CTA pill — the hero buttons from the home page ═══════════════
           The slab opens from the middle and collapses back on leave; the
           label and chevrons change colour as the slab reaches them. */
        .pp-cta { --flip: #1d1f20; position: relative; isolation: isolate; overflow: hidden; gap: 0; border: 1px solid transparent; border-radius: 999px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; padding: 15px 28px 15px 32px }
        .pp-cta::before { content: ""; position: absolute; inset: -1px; border-radius: 999px; z-index: 1; transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.4, 0, .2, 1) }
        .pp-cta:hover::before, .pp-cta:focus-visible::before { transform: scaleX(1); transition: transform .45s cubic-bezier(.3, .8, .3, 1) }
        .pp-cta .lbl { position: relative; z-index: 2; color: var(--fg0); transition: color .2s ease .12s }
        .pp-cta .chevs { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 1px; margin-left: 13px; color: var(--fg0); transition: color .2s ease 0s }
        .pp-cta:hover .lbl, .pp-cta:focus-visible .lbl { color: var(--fg1); transition-delay: .06s }
        .pp-cta:hover .chevs, .pp-cta:focus-visible .chevs { color: var(--fg1); transition-delay: .18s }
        .pp-cta .chevs svg { display: block; flex: none; width: 9px; height: 16px }
        .pp-cta.p { background: #8f2027; border-color: #8f2027; --fg0: #fff; --fg1: #fff }
        .pp-cta.p::before { background: var(--flip) }
        .pp-cta.s { background: transparent; border-color: color-mix(in srgb, #1d1f20 40%, transparent); --fg0: #1d1f20; --fg1: #fff }
        .pp-cta.s::before { background: #8f2027 }
        .pp-cta:focus-visible { outline: 2px solid var(--flip); outline-offset: 3px }
        @media (max-width: 480px) {
          .pp-cta { font-size: 14px; padding: 14px 22px 14px 26px }
          .pp-btns .pp-cta { flex: 1 1 auto; justify-content: center }
        }

/* ═══ Footer — design F1 from /demo-header, in white, social icons under the logo (sample B; partials/footer) ═══ */
        .pp-foot { padding: 64px 0 26px; background: #fff; border-top: 3px solid #8f2027; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: #1d1f20 }
        .pp-foot-in { max-width: 1320px; margin: 0 auto; padding: 0 40px; box-sizing: border-box }
        .pp-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px }
        /* The social accounts as round icons (partials/social-icons): the footer and the contact page's Social row */
        .pp-soc { display: flex; flex-wrap: wrap; gap: 10px }
        .pp-foot .pp-soc { margin-top: 22px }
        .pp-soc a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; color: color-mix(in srgb, #1d1f20 70%, transparent); transition: color .2s, background-color .2s, border-color .2s }
        .pp-soc a:hover { background: #8f2027; border-color: #8f2027; color: #fff }
        .pp-soc svg { display: block; width: 16px; height: 16px }
        .pp-foot-tag { margin: 16px 0 0; line-height: 1.7; color: color-mix(in srgb, #1d1f20 64%, transparent) }
        .pp-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px }
        .pp-foot-h { margin: 0 0 5px; font-family: var(--font-heading); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8f2027 }
        .pp-foot-col a { color: color-mix(in srgb, #1d1f20 78%, transparent); transition: color .2s }
        .pp-foot-col a:hover { color: #8f2027 }
        .pp-foot-line { display: flex; align-items: flex-start; gap: 10px }
        .pp-foot-line svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #8f2027 }
        .pp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--color-divider); font-size: 14px; color: color-mix(in srgb, #1d1f20 60%, transparent) }
        .pp-foot-bottom b { font-weight: 600; color: #1d1f20 }
        .pp-foot-bottom a { color: inherit; transition: color .2s }
        .pp-foot-bottom a:hover, .pp-foot-bottom a:hover b { color: #8f2027 }
        @media (max-width: 1080px) {
          .pp-foot-grid { grid-template-columns: repeat(2, 1fr) }
          .pp-foot-in { padding: 0 20px }
          .pp-foot-grid > :first-child { grid-column: 1 / -1 }
        }
        @media (max-width: 560px) {
          .pp-foot { padding-top: 48px }
          .pp-foot-line { word-break: break-word }
          .pp-foot-grid > :nth-child(n+4) { grid-column: 1 / -1 }
        }

/* ═══ Live map — "Show live map" on the home and contact pages' drawings (partials/live-map) ═══ */
        .pp-live-frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #f1eeee; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s }
        [data-live="on"] .pp-live-frame { opacity: 1; visibility: visible; transition: opacity .4s ease }
        .pp-live-btn { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: #8f2027; color: #fff; font-family: var(--font-heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(29, 31, 32, .6); transition: background-color .2s }
        .pp-live-btn:hover { background: #6d181e }
        .pp-live-btn:focus-visible { outline: 2px solid #1d1f20; outline-offset: 2px }
        /* button.… so it outranks a page's own svg rules (the contact page's map draws every svg full size) */
        button.pp-live-btn svg { display: block; flex: none; width: 15px; height: 15px }
        .pp-live-btn .on, [data-live="on"] .pp-live-btn .off { display: none }
        [data-live="on"] .pp-live-btn .on { display: inline }