/* Gutenberg wrapper resets - keep sections tight */
    .wp-block-template-part,
    header.wp-block-template-part,
    footer.wp-block-template-part,
    .wp-block-html,
    .wp-block-group.page-wrapper {
      margin: 0 !important;
      padding: 0 !important;
      background: transparent;
    }
    /* Sticky header needs overflow:visible on every ancestor */
    html, body, .wp-site-blocks,
    .wp-site-blocks > * {
      overflow: visible;
    }

    /* Kill Gutenberg's 24px default margin between blocks */
    .is-layout-flow > *,
    .is-layout-constrained > *,
    .wp-site-blocks > * {
      margin-block-start: 0 !important;
    }

    :root {
      --pe-orange: rgb(255, 150, 0);
      --pe-orange-dark: rgb(154, 87, 0);
      --pe-orange-soft: rgba(255, 150, 0, 0.08);
      --pe-purple: rgb(46, 32, 100);
      --pe-purple-2: rgb(67, 51, 132);
      --pe-ink: #181525;
      --pe-text: #3b3748;
      --pe-muted: #6f6a80;
      --pe-line: #e6e0f2;
      --pe-soft: #f7f5fb;
      --pe-soft-2: #fff9f1;
      --pe-white: #ffffff;
      --pe-shadow: 0 18px 40px rgba(27, 22, 45, 0.08);
      --pe-shadow-lg: 0 30px 60px rgba(27, 22, 45, 0.12);
      --pe-radius-sm: 16px;
      --pe-radius-md: 22px;
      --pe-radius-lg: 30px;
      --pe-container: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--pe-text);
      background: var(--pe-white);
      line-height: 1.6;
    }
    body.menu-open { overflow: hidden; }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }

    .page-wrapper {
      overflow-x: visible;
      background: var(--pe-white);
    }

    .container {
      width: min(var(--pe-container), calc(100% - 40px));
      margin: 0 auto;
    }

    .container--wide {
      width: min(1720px, calc(100% - 32px));
    }

    .section--wide-offer {
      padding-left: 0;
      padding-right: 0;
    }

    .section {
      padding: 108px 0;
      position: relative;
      scroll-margin-top: 170px;
    }

    .section--soft { background: var(--pe-soft); }
    .section--warm { background: var(--pe-soft-2); }
    .section--dark {
      background: var(--pe-purple);
      color: var(--pe-white);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--pe-orange-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 34px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
    }
    .section--dark .eyebrow { color: #ffbf63; }

    .eyebrow {
      display: none !important;
    }

    h1, h2, h3, h4 {
      margin: 0;
      color: var(--pe-ink);
      letter-spacing: -.018em;
      line-height: 1.04;
    }
    .section--dark h1,
    .section--dark h2,
    .section--dark h3,
    .section--dark h4 { color: var(--pe-white); }

    .display {
      font-size: clamp(38px, 5vw, 70px);
      max-width: 720px;
    }

    .title {
      font-size: clamp(30px, 3.5vw, 52px);
      max-width: 860px;
    }

    .lead {
      margin-top: 22px;
      max-width: 820px;
      font-size: clamp(19px, 1.55vw, 23px);
      color: var(--pe-muted);
      line-height: 1.78;
    }
    .section--dark .lead { color: rgba(255,255,255,0.78); }

    p,
    .card p,
    .usp-card p,
    .step p,
    .reference-card p,
    .about-copy p,
    .faq-answer p,
    .feature-split__lead,
    .offer-panel__lead {
      font-size: 18px;
      line-height: 1.82;
    }

    .list li,
    .bullet-list li,
    .offer-list-grid li {
      font-size: 16.5px;
      line-height: 1.72;
    }

    .section-head {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 52px;
    }

    .content-prose {
      display: grid;
      gap: 18px;
      max-width: 820px;
      margin-bottom: 36px;
    }
    .content-prose p {
      margin: 0;
      font-size: clamp(18px, 1.4vw, 21px);
      line-height: 1.78;
      color: var(--pe-text);
    }
    .section--dark .content-prose p {
      color: rgba(255, 255, 255, 0.86);
    }

    /* Gutenberg block style variants registered in functions.php.
       Sections use a single centered 1240px grid column so all children
       share the same left edge (heading, prose, list, buttons). Per-block
       max-widths (title 860px, prose 820px) cap content within the column. */
    .wp-block-group.is-style-pe-section,
    .wp-block-group.is-style-pe-section-soft,
    .wp-block-group.is-style-pe-section-warm,
    .wp-block-group.is-style-pe-section-dark {
      padding: 108px clamp(20px, 4vw, 48px);
      display: grid;
      grid-template-columns: minmax(0, 1240px);
      justify-content: center;
      position: relative;
      scroll-margin-top: 170px;
    }

    .wp-block-group.is-style-pe-section-soft { background: var(--pe-soft); }
    .wp-block-group.is-style-pe-section-warm { background: var(--pe-soft-2); }
    .wp-block-group.is-style-pe-section-dark {
      background: var(--pe-purple);
      color: var(--pe-white);
    }

    .wp-block-group.is-style-pe-section-dark h1,
    .wp-block-group.is-style-pe-section-dark h2,
    .wp-block-group.is-style-pe-section-dark h3,
    .wp-block-group.is-style-pe-section-dark h4 {
      color: var(--pe-white);
    }

    .wp-block-group.is-style-pe-section-dark p {
      color: rgba(255,255,255,0.78);
    }

    .wp-block-heading.is-style-pe-display {
      max-width: 720px;
      font-size: clamp(38px, 5vw, 70px);
      line-height: 1.04;
    }

    .wp-block-heading.is-style-pe-title {
      max-width: 860px;
      font-size: clamp(30px, 3.5vw, 52px);
      line-height: 1.04;
    }

    .wp-block-heading.is-style-pe-title-large {
      max-width: 1040px;
      font-size: clamp(42px, 4.7vw, 72px);
      line-height: .98;
    }

    .wp-block-paragraph.is-style-pe-lead,
    p.is-style-pe-lead {
      margin-top: 44px !important;
      max-width: 820px;
      font-size: clamp(19px, 1.55vw, 23px);
      color: var(--pe-muted);
      line-height: 1.78;
    }

    .wp-block-paragraph.is-style-pe-lead-large,
    p.is-style-pe-lead-large {
      margin-top: 8px;
      max-width: 820px;
      font-size: clamp(20px, 1.75vw, 26px);
      color: var(--pe-muted);
      line-height: 1.72;
    }

    .wp-block-group.is-style-pe-content-prose {
      display: grid;
      gap: 18px;
      max-width: 820px;
      margin-top: 52px !important;
      margin-bottom: 36px !important;
    }

    /* Legal pages (privacy / cookies): H1 + prose both left-aligned to
       the section's grid edge - overrides Gutenberg's auto-centering
       of is-layout-constrained children and strips has-global-padding
       horizontal padding so prose shares H1's left edge. Uses physical
       properties to ensure longhand override. */
    .is-style-pe-section > .wp-block-heading.is-style-pe-display {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .is-style-pe-section > .wp-block-group.is-style-pe-content-prose {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    /* Heading hierarchy: h2 gets ~40px above (18 gap + 22 margin),
       h3 gets ~28px above (18 gap + 10 margin). Paragraphs stay at 18px. */
    .is-style-pe-section > .wp-block-group.is-style-pe-content-prose > h2 {
      margin-top: 22px !important;
    }
    .is-style-pe-section > .wp-block-group.is-style-pe-content-prose > h3 {
      margin-top: 10px !important;
    }

    /* Buttons block needs breathing room above (used in dark CTA section). */
    .is-style-pe-section-dark .wp-block-buttons {
      margin-top: 36px !important;
    }

    .wp-block-group.is-style-pe-content-prose p {
      margin: 0;
      font-size: clamp(18px, 1.4vw, 21px);
      line-height: 1.78;
      color: var(--pe-text);
    }

    .wp-block-group.is-style-pe-card,
    .wp-block-group.is-style-pe-card-dark {
      height: 100%;
      padding: 28px;
      border-radius: var(--pe-radius-md);
      border: 1px solid rgba(46, 32, 100, 0.08);
      box-shadow: var(--pe-shadow);
    }

    .wp-block-group.is-style-pe-card {
      background: var(--pe-white);
    }

    .wp-block-group.is-style-pe-card-dark {
      background: var(--pe-purple);
      color: var(--pe-white);
      border-color: transparent;
    }

    .wp-block-group.is-style-pe-card-dark h1,
    .wp-block-group.is-style-pe-card-dark h2,
    .wp-block-group.is-style-pe-card-dark h3,
    .wp-block-group.is-style-pe-card-dark h4 {
      color: var(--pe-white);
    }

    .wp-block-group.is-style-pe-card p {
      color: var(--pe-muted);
    }

    .wp-block-group.is-style-pe-card-dark p {
      color: rgba(255,255,255,0.76);
    }

    .wp-block-button.is-style-pe-primary .wp-block-button__link,
    .wp-block-button.is-style-pe-secondary .wp-block-button__link,
    .wp-block-button.is-style-pe-ghost .wp-block-button__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 0 24px;
      border-radius: 18px;
      border: 1px solid transparent;
      font-size: 16px;
      font-weight: 800;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
    }

    .wp-block-button.is-style-pe-primary .wp-block-button__link {
      background: var(--pe-orange);
      color: var(--pe-ink);
      box-shadow: 0 14px 30px rgba(255, 150, 0, 0.18);
    }

    .wp-block-button.is-style-pe-secondary .wp-block-button__link {
      background: var(--pe-white);
      border-color: rgba(46, 32, 100, 0.14);
      color: var(--pe-purple);
      box-shadow: var(--pe-shadow);
    }

    .wp-block-button.is-style-pe-ghost .wp-block-button__link {
      background: transparent;
      border-color: rgba(255,255,255,0.22);
      color: var(--pe-white);
    }

    .wp-block-button.is-style-pe-primary .wp-block-button__link:hover,
    .wp-block-button.is-style-pe-secondary .wp-block-button__link:hover,
    .wp-block-button.is-style-pe-ghost .wp-block-button__link:hover {
      transform: translateY(-2px);
    }

    ul.wp-block-list.is-style-pe-bullet-list,
    ol.wp-block-list.is-style-pe-bullet-list,
    ul.is-style-pe-bullet-list,
    ol.is-style-pe-bullet-list {
      list-style: none;
      margin: 22px 0 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    ul.wp-block-list.is-style-pe-bullet-list li,
    ol.wp-block-list.is-style-pe-bullet-list li,
    ul.is-style-pe-bullet-list li,
    ol.is-style-pe-bullet-list li {
      position: relative;
      padding-left: 28px;
      color: var(--pe-text);
      font-size: 16.5px;
      line-height: 1.72;
    }

    ul.wp-block-list.is-style-pe-bullet-list li::before,
    ol.wp-block-list.is-style-pe-bullet-list li::before,
    ul.is-style-pe-bullet-list li::before,
    ol.is-style-pe-bullet-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--pe-orange);
      box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.1);
    }

    ul.wp-block-list.is-style-pe-checklist,
    ul.is-style-pe-checklist {
      list-style: none;
      margin: 28px 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    ul.wp-block-list.is-style-pe-checklist li,
    ul.is-style-pe-checklist li {
      position: relative;
      min-height: 100%;
      padding: 18px 18px 17px 48px;
      border-radius: 18px;
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      box-shadow: 0 14px 28px rgba(27, 22, 45, 0.06);
      color: var(--pe-text);
      font-size: 16.5px;
      line-height: 1.72;
    }

    ul.wp-block-list.is-style-pe-checklist li::before,
    ul.is-style-pe-checklist li::before {
      content: "";
      position: absolute;
      left: 20px;
      top: 27px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--pe-orange);
      box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.1);
    }

    /* Image-on-top variant for a single checklist card. Image spans full
       width of the card edge-to-edge; text drops into a padded inner
       container. Orange dot is suppressed for this variant. */
    ul.wp-block-list.is-style-pe-checklist li.checklist-card--with-image,
    ul.is-style-pe-checklist li.checklist-card--with-image {
      padding: 0;
      overflow: hidden;
    }
    ul.wp-block-list.is-style-pe-checklist li.checklist-card--with-image::before,
    ul.is-style-pe-checklist li.checklist-card--with-image::before {
      content: none;
    }
    .checklist-card__image {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    .checklist-card__text {
      padding: 20px 24px 22px;
    }

    .grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }


    .section--problem .section-head {
      max-width: 1060px;
      margin-bottom: 0;
      gap: 14px;
    }

    .title--problem {
      max-width: 1040px;
      font-size: clamp(42px, 4.7vw, 72px);
      line-height: .98;
      letter-spacing: -.028em;
      text-wrap: balance;
    }

    .title-accent {
      color: var(--pe-orange-dark);
    }

    .lead--problem {
      max-width: 820px;
      margin-top: 8px;
      margin-bottom: 0;
      font-size: clamp(20px, 1.75vw, 26px);
      line-height: 1.72;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
      align-items: stretch;
    }

    .problem-card {
      --problem-accent: var(--pe-orange);
      --problem-fill: rgba(255, 150, 0, 0.12);
      --problem-number-bg: rgba(46, 32, 100, 0.06);
      --problem-number-color: var(--pe-purple);
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 34px 34px 32px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: 28px;
      box-shadow: var(--pe-shadow);
      overflow: hidden;
      transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
      isolation: isolate;
    }

    .problem-card::after {
      content: "";
      position: absolute;
      right: -42px;
      top: -42px;
      width: 124px;
      height: 124px;
      border-radius: 999px;
      background: var(--problem-fill);
      z-index: 0;
      transform: scale(1);
      transform-origin: top right;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
    }

    .problem-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 60px rgba(46, 32, 100, 0.12);
      border-color: color-mix(in srgb, var(--problem-accent) 26%, rgba(46, 32, 100, 0.08));
    }

    .problem-card:hover::after {
      transform: scale(9);
      opacity: 1;
    }

    .problem-card__head,
    .problem-card > p {
      position: relative;
      z-index: 1;
    }

    .problem-card__head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 20px;
    }

    .problem-card__meta {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .problem-card__icon {
      display: grid;
      place-items: center;
      color: var(--problem-accent);
      transition: transform .32s ease, color .32s ease, opacity .32s ease;
    }

    .problem-card__icon svg {
      width: 54px;
      height: 54px;
      stroke: currentColor;
    }

    .problem-card__number {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-self: flex-start;
      align-items: center;
      justify-content: center;
      min-width: 52px;
      height: 40px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--problem-number-bg);
      color: var(--problem-number-color);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .08em;
      transition: background .32s ease, color .32s ease, transform .32s ease;
    }

    @media (hover: hover) and (min-width: 901px) {
      .problem-grid > .problem-card > .problem-card__number,
      .o-firmie-points__grid > .problem-card > .problem-card__number {
        position: absolute;
        right: 34px;
        top: calc(100% - 72px);
        z-index: 2;
        transition: top .46s cubic-bezier(.2,.8,.2,1), background .32s ease, color .32s ease, transform .32s ease;
      }

      .problem-grid > .problem-card:hover > .problem-card__number,
      .problem-grid > .problem-card.is-expanded > .problem-card__number {
        top: 34px;
      }
    }

    @media (max-width: 900px) {
      .problem-grid > .problem-card > .problem-card__number,
      .o-firmie-points__grid > .problem-card > .problem-card__number {
        position: absolute;
        right: 22px;
        bottom: 22px;
        left: auto;
      }

      .problem-card.has-reveal.is-expanded {
        padding-bottom: 84px;
      }
    }

    .problem-card h3 {
      margin: 0;
      font-size: clamp(26px, 2.2vw, 38px);
      line-height: 1.05;
      transition: color .32s ease;
    }

    .problem-card__divider {
      width: 72px;
      height: 3px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--problem-accent) 72%, white 28%);
      transition: background .32s ease, width .32s ease;
    }

    .problem-card p {
      margin: 0;
      color: var(--pe-text);
      font-size: 18px;
      line-height: 1.8;
      transition: color .32s ease;
    }

    /* Progressive disclosure for every problem card. The class is added by
       main.js, so descriptions remain fully visible when JavaScript is off. */
    .problem-card.has-reveal {
      min-height: 0;
    }

    .problem-card.has-reveal .problem-card__head {
      margin-bottom: 0;
    }

    .problem-card__toggle {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      margin-top: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--problem-accent);
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .problem-card__toggle::after {
      content: "↓";
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 16px;
      line-height: 1;
      transition: transform .28s ease, background-color .28s ease;
    }

    .problem-card__toggle:hover::after,
    .problem-card__toggle:focus-visible::after {
      background: color-mix(in srgb, currentColor 12%, transparent);
    }

    .problem-card__toggle:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--problem-accent) 36%, transparent);
      outline-offset: 5px;
      border-radius: 4px;
    }

    .problem-card.has-reveal > p {
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(12px);
      transition: max-height .42s ease, margin-top .32s ease, opacity .28s ease, transform .38s ease, color .32s ease;
    }

    .problem-card.has-reveal.is-expanded > p {
      max-height: 24rem;
      margin-top: 18px;
      opacity: 1;
      transform: translateY(0);
    }

    .problem-card.has-reveal.is-expanded .problem-card__toggle::after {
      transform: rotate(180deg);
    }

    @media (hover: hover) and (min-width: 901px) {
      .problem-card.has-reveal {
        height: 470px;
        min-height: 470px;
      }

      .problem-card.has-reveal .problem-card__head {
        position: absolute;
        top: 50%;
        right: 34px;
        left: 34px;
        transform: translateY(-50%);
        transition: top .46s cubic-bezier(.2,.8,.2,1), transform .46s cubic-bezier(.2,.8,.2,1);
      }

      .problem-card.has-reveal .problem-card__head .problem-card__icon {
        transform: none;
      }

      .problem-card.has-reveal .problem-card__head .problem-card__icon svg {
        width: 96px;
        height: 96px;
        transition: width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1);
      }

      .problem-card.has-reveal .problem-card__toggle {
        position: absolute;
        bottom: 32px;
        left: 34px;
        margin-top: auto;
      }

      .problem-card.has-reveal > p {
        position: absolute;
        top: 185px;
        right: 34px;
        left: 34px;
        font-size: 16.5px;
        line-height: 1.68;
      }

      .problem-card.has-reveal:hover .problem-card__head,
      .problem-card.has-reveal.is-expanded .problem-card__head {
        top: 34px;
        transform: translateY(0);
      }

      .problem-card.has-reveal:hover .problem-card__icon,
      .problem-card.has-reveal.is-expanded .problem-card__icon {
        transform: none;
      }

      .problem-card.has-reveal:hover .problem-card__icon svg,
      .problem-card.has-reveal.is-expanded .problem-card__icon svg {
        width: 54px;
        height: 54px;
      }

      .problem-card.has-reveal:hover > p,
      .problem-card.has-reveal.is-expanded > p {
        max-height: 24rem;
        margin-top: 18px;
        opacity: 1;
        transform: translateY(0);
      }

      .problem-card.has-reveal:hover .problem-card__toggle::after {
        transform: rotate(180deg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .problem-card,
      .problem-card::after,
      .problem-card__icon,
      .problem-card__icon svg,
      .problem-card__number,
      .problem-card__divider,
      .problem-card__toggle,
      .problem-card__toggle::after,
      .problem-card.has-reveal > p {
        transition: none;
      }
    }

    .problem-card--threat {
      --problem-accent: var(--pe-orange-dark);
      --problem-fill: rgba(255, 150, 0, 0.14);
      --problem-number-bg: rgba(255, 150, 0, 0.12);
      --problem-number-color: var(--pe-orange-dark);
    }

    .problem-card--solution {
      --problem-accent: #ffb44d;
      --problem-fill: rgba(255,255,255,0.1);
      --problem-number-bg: rgba(255,255,255,0.12);
      --problem-number-color: rgba(255,255,255,0.96);
      background: linear-gradient(180deg, rgba(46, 32, 100, 0.98) 0%, rgba(60, 44, 126, 0.98) 100%);
      border-color: transparent;
      box-shadow: 0 24px 54px rgba(46, 32, 100, 0.18);
    }

    .problem-card--solution,
    .problem-card--solution h3,
    .problem-card--solution p,
    .problem-card--solution p strong,
    .problem-card--solution p em,
    .problem-card--solution p a,
    .problem-card--solution p span,
    .problem-grid .problem-card.problem-card--solution h3,
    .problem-grid .problem-card.problem-card--solution p,
    .problem-grid .problem-card.problem-card--solution p strong,
    .problem-grid .problem-card.problem-card--solution p em,
    .problem-grid .problem-card.problem-card--solution p a,
    .problem-grid .problem-card.problem-card--solution p span {
      color: #ffffff !important;
    }

    .problem-card--opportunity {
      --problem-accent: var(--pe-purple);
      --problem-fill: rgba(46, 32, 100, 0.11);
      --problem-number-bg: rgba(46, 32, 100, 0.08);
      --problem-number-color: var(--pe-purple);
    }

    .problem-card:hover .problem-card__icon {
      transform: translateY(-3px) scale(1.06);
    }

    .problem-card:hover .problem-card__number {
      transform: translateY(-2px);
    }

    .problem-card:hover .problem-card__divider {
      width: 96px;
    }

    .o-firmie-points__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      align-items: stretch;
    }

    .o-firmie-points {
      padding-top: 24px;
    }

    .o-firmie-points .problem-card {
      padding: 30px 30px 28px;
    }

    .o-firmie-points .problem-card h3 {
      font-size: clamp(22px, 1.9vw, 32px);
      max-width: 18ch;
    }

    .o-firmie-points .problem-card p {
      font-size: 16px;
      line-height: 1.72;
    }

    .o-firmie-points .problem-card__icon svg {
      width: 48px;
      height: 48px;
    }

    .o-firmie-points .problem-card__number {
      min-width: 48px;
      height: 38px;
    }

    @media (hover: hover) and (min-width: 901px) {
      .o-firmie-points__grid > .problem-card > .problem-card__number {
        right: 30px;
        top: calc(100% - 66px);
      }

      .o-firmie-points__grid > .problem-card:hover > .problem-card__number,
      .o-firmie-points__grid > .problem-card.is-expanded > .problem-card__number {
        top: 30px;
      }

      .o-firmie-points .problem-card.has-reveal .problem-card__head .problem-card__icon svg {
        width: 144px;
        height: 144px;
      }

      .o-firmie-points .problem-card.has-reveal:hover .problem-card__icon svg,
      .o-firmie-points .problem-card.has-reveal.is-expanded .problem-card__icon svg {
        width: 54px;
        height: 54px;
      }

      .o-firmie-points .problem-card.has-reveal:hover > p,
      .o-firmie-points .problem-card.has-reveal.is-expanded > p {
        top: 218px;
      }
    }

    .problem-card--certified {
      --problem-accent: var(--pe-purple);
      --problem-fill: rgba(46, 32, 100, 0.11);
      --problem-number-bg: rgba(46, 32, 100, 0.08);
      --problem-number-color: var(--pe-purple);
    }


    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 24px;
      border-radius: 18px;
      border: 1px solid transparent;
      font-size: 16px;
      font-weight: 800;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
      cursor: pointer;
    }
    .btn:hover { transform: translateY(-2px); }

    .btn--primary {
      background: var(--pe-orange);
      color: var(--pe-ink);
      box-shadow: 0 14px 30px rgba(255, 150, 0, 0.18);
    }
    .btn--primary:hover { background: #ff9f13; }

    .btn--secondary {
      background: var(--pe-white);
      border-color: rgba(46, 32, 100, 0.14);
      color: var(--pe-purple);
      box-shadow: var(--pe-shadow);
    }

    .btn--ghost {
      color: var(--pe-white);
      border-color: rgba(255,255,255,0.22);
      background: transparent;
    }

    .header,
    .wp-site-blocks > header.wp-block-template-part {
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .wp-site-blocks > header.wp-block-template-part {
      background: transparent;
      border-bottom: 0;
      box-shadow: none;
      transition: none;
    }
    .header {
      background: rgba(255, 255, 255, 0.62);
      border-bottom: 1px solid rgba(46, 32, 100, 0.08);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
      transition: box-shadow .3s ease, background .3s ease, padding .3s ease, border-color .3s ease;
      will-change: background, box-shadow;
    }
    .header.is-scrolled {
      background: rgba(255, 255, 255, 0.82);
      border-bottom-color: rgba(46, 32, 100, 0.12);
      box-shadow: 0 10px 30px rgba(46, 32, 100, 0.10), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }
    .header.is-scrolled .nav {
      min-height: 64px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      min-height: 84px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      min-width: 165px;
      padding: 10px 16px;
    }
    .brand img {
      width: 120px;
      height: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-links a {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 14px;
      border-radius: 18px;
      color: var(--pe-text);
      font-size: 14px;
      font-weight: 700;
      transition: .2s ease;
    }
    .nav-links a:hover {
      background: var(--pe-soft);
      color: var(--pe-purple);
    }

    .nav-item--dropdown {
      position: relative;
    }

    .nav-dropdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 42px;
      padding: 0 14px;
      border: 0;
      border-radius: 18px;
      background: transparent;
      color: var(--pe-text);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color .2s ease, color .2s ease;
    }

    .nav-dropdown-toggle:hover,
    .nav-item--dropdown.is-open .nav-dropdown-toggle {
      background: var(--pe-soft);
      color: var(--pe-purple);
    }

    .nav-dropdown-toggle__icon {
      width: 14px;
      height: 14px;
      transition: transform .25s ease;
    }

    .nav-item--dropdown.is-open .nav-dropdown-toggle__icon {
      transform: rotate(180deg);
    }

    .nav-dropdown[hidden] {
      display: none;
    }

    .nav-dropdown {
      position: absolute;
      top: calc(100% + 16px);
      left: 50%;
      z-index: 20;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: min(820px, calc(100vw - 48px));
      padding: 16px;
      border: 1px solid rgba(46, 32, 100, 0.10);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 24px 70px rgba(27, 22, 45, 0.18);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      transform: translate(-50%, -8px);
      transform-origin: top center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }

    .nav-item--dropdown.is-open .nav-dropdown {
      transform: translate(-50%, 0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .nav-dropdown__item {
      position: relative;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 16px;
      color: var(--pe-ink);
      transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
    }

    .nav-dropdown__item:hover,
    .nav-dropdown__item:focus-visible {
      background: var(--pe-soft);
      border-color: rgba(46, 32, 100, 0.10);
      transform: translateY(-2px);
      outline: none;
    }

    .nav-dropdown__item img {
      width: 64px;
      height: 54px;
      border-radius: 12px;
      object-fit: cover;
    }

    .nav-dropdown__copy {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 1px;
    }

    .nav-dropdown__copy strong {
      overflow: hidden;
      font-family: var(--pe-font-display);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-dropdown__copy small {
      overflow: hidden;
      color: var(--pe-muted);
      font-size: 11px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-dropdown__arrow {
      align-self: center;
      color: var(--pe-orange-dark);
      font-size: 18px;
      line-height: 1;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-cta .btn {
      min-height: 48px;
      border-radius: 18px;
      padding: 0 22px;
    }

    .phone-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 800;
      color: var(--pe-purple);
      white-space: nowrap;
      padding: 9px 14px;
      border: 1px solid var(--pe-line);
      border-radius: 12px;
      transition: border-color .2s ease, background-color .2s ease;
    }
    .phone-link:hover {
      border-color: var(--pe-purple);
      background-color: rgba(46, 32, 100, 0.04);
    }
    .phone-link__icon {
      width: 19px;
      height: 19px;
      display: grid;
      place-items: center;
      color: var(--pe-orange-dark);
    }
    .phone-link__icon svg {
      width: 100%;
      height: 100%;
    }

    .burger {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--pe-line);
      background: var(--pe-white);
      border-radius: 14px;
      padding: 0;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .burger span,
    .burger span::before,
    .burger span::after {
      content: "";
      display: block;
      width: 18px;
      height: 2px;
      background: var(--pe-purple);
      border-radius: 999px;
      transition: .2s ease;
      position: relative;
    }
    .burger span::before { position: absolute; top: -6px; left: 0; }
    .burger span::after { position: absolute; top: 6px; left: 0; }
    .menu-open .burger span { background: transparent; }
    .menu-open .burger span::before { top: 0; transform: rotate(45deg); }
    .menu-open .burger span::after { top: 0; transform: rotate(-45deg); }

    .hero {
      padding: 0;
      background: var(--pe-soft);
    }

    .hero-stage {
      position: relative;
      width: 100%;
      min-height: 760px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(46, 32, 100, 0.92) 0%, rgba(46, 32, 100, 0.82) 28%, rgba(46, 32, 100, 0.48) 55%, rgba(46, 32, 100, 0.16) 100%),
        linear-gradient(0deg, rgba(10, 12, 22, 0.28), rgba(10, 12, 22, 0.28)),
        url("../img/biuro.webp") center/cover no-repeat;
    }

    .oferta-hero .hero-stage {
      background: var(--pe-purple);
    }

    .oferta-hero__background,
    .oferta-hero__slide {
      position: absolute;
      inset: 0;
    }

    .oferta-hero__background {
      z-index: 0;
      overflow: hidden;
      background: var(--pe-purple);
    }

    .oferta-hero__background::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(46, 32, 100, 0.92) 0%, rgba(46, 32, 100, 0.82) 28%, rgba(46, 32, 100, 0.48) 55%, rgba(46, 32, 100, 0.16) 100%),
        linear-gradient(0deg, rgba(10, 12, 22, 0.28), rgba(10, 12, 22, 0.28));
      pointer-events: none;
    }

    .oferta-hero__slide {
      z-index: 0;
      opacity: 0;
      background: center/cover no-repeat;
      transform: scale(1.04);
      transition: opacity 1.1s ease, transform 6s ease;
      will-change: opacity, transform;
    }

    .oferta-hero__slide.is-active {
      opacity: 1;
      transform: scale(1);
    }

    .oferta-hero__slide--pv {
      background-image: url("../img/pure-energy-2.webp");
    }

    .hero-stage::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 180px;
      background: linear-gradient(to top, rgba(16, 10, 37, 0.42), transparent);
      pointer-events: none;
    }

    .service-hero--pv-firm .hero-stage {
        background:
            linear-gradient(90deg, rgba(46, 32, 100, 0.92) 0%, rgba(46, 32, 100, 0.82) 28%, rgba(46, 32, 100, 0.48) 55%, rgba(46, 32, 100, 0.16) 100%),
            linear-gradient(0deg, rgba(10, 12, 22, 0.28), rgba(10, 12, 22, 0.28)),
            url("../img/pure-energy-2.webp") center/cover no-repeat;
    }

    .service-hero--carport .hero-stage {
        background:
            linear-gradient(90deg, rgba(46, 32, 100, 0.94) 0%, rgba(46, 32, 100, 0.84) 30%, rgba(46, 32, 100, 0.5) 57%, rgba(46, 32, 100, 0.16) 100%),
            linear-gradient(0deg, rgba(10, 12, 22, 0.2), rgba(10, 12, 22, 0.2)),
            url("../img/carporty-pv-hero.webp") center/cover no-repeat;
    }

    .service-hero--modernizacja .hero-stage {
        background:
            linear-gradient(90deg, rgba(46, 32, 100, 0.94) 0%, rgba(46, 32, 100, 0.84) 30%, rgba(46, 32, 100, 0.5) 57%, rgba(46, 32, 100, 0.16) 100%),
            linear-gradient(0deg, rgba(10, 12, 22, 0.24), rgba(10, 12, 22, 0.24)),
            url("../img/pure-energy-konstrukcje.webp") center/cover no-repeat;
    }

    .service-hero--bess .hero-stage {
      background:
        linear-gradient(90deg, rgba(46, 32, 100, 0.94) 0%, rgba(46, 32, 100, 0.84) 32%, rgba(46, 32, 100, 0.54) 60%, rgba(46, 32, 100, 0.2) 100%),
        linear-gradient(0deg, rgba(10, 12, 22, 0.3), rgba(10, 12, 22, 0.3)),
        url("../img/magazyny-energii-dla-firm.webp") 62% center/cover no-repeat;
    }

    .hero-copy {
      position: relative;
      z-index: 1;
      width: min(760px, 100%);
      padding: 118px 0 96px;
      color: var(--pe-white);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 760px;
    }

    .hero-copy .eyebrow { color: #ffbf63; }
    .hero-copy h1 { color: var(--pe-white); }

    .service-hero__badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin-bottom: 22px;
      padding: 8px 14px;
      border-radius: 18px;
      background: var(--pe-orange);
      color: var(--pe-white);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
      box-shadow: 0 14px 34px rgba(255, 150, 0, 0.24);
    }

    .hero-title {
      position: relative;
      display: inline-block;
      width: fit-content;
      max-width: 820px;
      padding: 0;
      overflow: visible;
    }

    .hero-title__line {
      position: relative;
      display: inline-block;
      width: fit-content;
      max-width: 100%;
      overflow: visible;
      padding-bottom: 0;
    }

    .hero-title__line + .hero-title__line {
      margin-top: -.09em;
    }

    .hero-title__line > span {
      position: relative;
      z-index: 2;
      display: inline-block;
      white-space: nowrap;
      transform: translateY(104%);
      opacity: 0;
      animation: heroTitleReveal .82s cubic-bezier(.2,.8,.2,1) both;
    }

    .hero-title__line:nth-child(2) > span {
      animation-delay: .12s;
    }

    .hero-title__line:nth-child(3) > span {
      animation-delay: .24s;
    }

    @keyframes heroTitleReveal {
      0% {
        transform: translateY(104%);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-title__line > span {
        animation: none;
        transform: none;
        opacity: 1;
      }
    }

    .hero-subtitle {
      margin: 14px 0 0;
      max-width: 760px;
      color: rgba(255,255,255,0.92);
      font-size: clamp(24px, 2.35vw, 38px);
      line-height: 1.14;
      letter-spacing: -.012em;
      font-weight: 700;
    }

    .hero-copy .lead {
      max-width: 660px;
      color: rgba(255,255,255,0.84);
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 22px;
      margin-top: 26px;
      padding: 0;
      list-style: none;
    }

    .hero-points li {
      position: relative;
      padding-left: 18px;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .hero-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--pe-orange);
    }

    .hero-note {
      margin-top: 16px;
      font-size: 13px;
      color: rgba(255,255,255,0.68);
    }

    .hero-marquee {
      position: relative;
      z-index: 2;
      width: 100%;
      overflow: hidden;
      background: var(--pe-purple);
      border-top: 1px solid rgba(255,255,255,0.12);
      border-bottom: 1px solid rgba(46, 32, 100, 0.14);
    }

    .hero-marquee::before,
    .hero-marquee::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 120px;
      z-index: 3;
      pointer-events: none;
    }

    .hero-marquee::before {
      left: 0;
      background: linear-gradient(to right, var(--pe-purple), rgba(46, 32, 100, 0));
    }

    .hero-marquee::after {
      right: 0;
      background: linear-gradient(to left, var(--pe-purple), rgba(46, 32, 100, 0));
    }

    .hero-marquee__track {
      display: flex;
      width: max-content;
      animation: peMarquee 34s linear infinite;
      will-change: transform;
    }

    .hero-marquee:hover .hero-marquee__track {
      animation-play-state: paused;
    }

    .hero-marquee__group {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .hero-marquee__item {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 62px;
      padding: 0 30px;
      color: rgba(255,255,255,0.92);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.01em;
      white-space: nowrap;
    }

    .hero-marquee__item::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-right: 14px;
      border-radius: 999px;
      background: var(--pe-orange);
      box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.13);
      flex: 0 0 auto;
    }

    @keyframes peMarquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .o-firmie-hero {
      padding: 0;
      background: var(--pe-soft);
    }

    /* Top-level Gutenberg section groups add constrained inner wrappers.
       On page content built from blocks, use the theme container width
       instead of the editor's default 820px content width. */
    .entry-content > section.wp-block-group.section > .container.is-layout-constrained {
      --wp--style--global--content-size: var(--pe-container);
      --wp--style--global--wide-size: var(--pe-container);
    }

    .o-firmie-hero__stage {
      position: relative;
      width: 100%;
      min-height: 760px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(22, 16, 50, 0.96) 0%, rgba(22, 16, 50, 0.88) 34%, rgba(22, 16, 50, 0.56) 62%, rgba(22, 16, 50, 0.18) 100%),
        linear-gradient(0deg, rgba(10, 12, 22, 0.18), rgba(10, 12, 22, 0.18)),
        url("../img/o-firmie-hero.webp") center 24%/cover no-repeat;
      background-size: cover;
      background-position: center 24%;
      background-repeat: no-repeat;
    }

    .o-firmie-hero__stage::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 180px;
      background: linear-gradient(to top, rgba(16, 10, 37, 0.42), transparent);
      pointer-events: none;
    }

    .o-firmie-hero__inner {
      position: relative;
      z-index: 1;
      width: min(var(--pe-container), calc(100% - 40px));
      max-width: none !important;
      margin: 0 auto;
    }

    .o-firmie-hero__content {
      width: min(760px, 100%);
      max-width: none !important;
      margin: 0 !important;
    }

    .o-firmie-hero__content.has-global-padding {
      padding-left: 0;
      padding-right: 0;
    }

    /* Gutenberg's constrained layout centers direct children with auto margins.
       In the about-page hero this creates a visible left indent on the lead.
       Reset those margins so every text element starts on the same left edge. */
    .o-firmie-hero__content > * {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .o-firmie-hero__copy,
    .o-firmie-hero__content {
      color: var(--pe-white);
      position: relative;
      z-index: 2;
    }

    .o-firmie-hero__copy h1,
    .o-firmie-hero__copy .hero-title,
    .o-firmie-hero__content h1,
    .o-firmie-hero__content .hero-title {
      color: var(--pe-white);
    }

    .o-firmie-hero .hero-title__line--subtle > span {
      font-size: .82em;
    }

    .o-firmie-hero__copy .lead,
    .o-firmie-hero__content .lead {
      margin-top: 34px;
      max-width: 660px;
      color: rgba(255,255,255,0.84);
      text-align: left;
    }

    .oze-story {
      position: relative;
      isolation: isolate;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0)),
        var(--pe-soft);
      overflow: visible;
    }

    .oze-story::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        radial-gradient(60% 50% at 18% 22%, rgba(255,255,255,0.55), transparent 70%),
        radial-gradient(70% 60% at 82% 78%, rgba(255,255,255,0.35), transparent 72%);
      background-color: rgba(46, 32, 100, 0.04);
      transition: background-color 0.9s ease;
    }

    .oze-story[data-story-active="01"]::before { background-color: rgba(46, 32, 100, 0.04); }
    .oze-story[data-story-active="02"]::before { background-color: rgba(58, 40, 120, 0.06); }
    .oze-story[data-story-active="03"]::before { background-color: rgba(96, 56, 150, 0.07); }
    .oze-story[data-story-active="04"]::before { background-color: rgba(214, 92, 42, 0.07); }
    .oze-story[data-story-active="05"]::before { background-color: rgba(255, 138, 0, 0.10); }

    .oze-story__intro {
      display: grid;
      justify-items: center;
      gap: 20px;
      margin: 0 auto clamp(34px, 5vw, 60px);
      text-align: center;
      max-width: 860px;
    }

    .oze-story__headline {
      margin: 0;
      max-width: 15ch;
      color: var(--pe-purple);
      font-size: clamp(36px, 4.6vw, 64px);
      line-height: 0.97;
      letter-spacing: -0.045em;
      text-wrap: balance;
    }

    .oze-story__scroll-cue {
      margin-top: 32px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      color: rgba(46, 32, 100, 0.68);
      animation: peScrollCueFloat 1.6s ease-in-out infinite;
    }

    .oze-story__scroll-mouse {
      position: relative;
      width: 46px;
      height: 74px;
      border: 2px solid currentColor;
      border-radius: 999px;
      animation: peScrollCuePulse 1.6s ease-out infinite;
    }

    .oze-story__scroll-mouse::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 999px;
      border: 2px solid currentColor;
      opacity: 0;
      animation: peScrollCueRing 1.6s ease-out infinite;
    }

    .oze-story__scroll-mouse i {
      position: absolute;
      left: 50%;
      top: 12px;
      width: 6px;
      height: 14px;
      border-radius: 999px;
      background: currentColor;
      transform: translateX(-50%);
      animation: peScrollCueWheel 1.4s cubic-bezier(.65,.05,.36,1) infinite;
    }

    .oze-story__scroll-arrow {
      width: 14px;
      height: 14px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      animation: peScrollCueArrow 1.6s ease-in-out infinite;
    }

    @keyframes peScrollCueFloat {
      0%,
      100% {
        transform: translateY(0);
        opacity: 0.7;
      }
      50% {
        transform: translateY(12px);
        opacity: 1;
      }
    }

    @keyframes peScrollCuePulse {
      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(46, 32, 100, 0.24);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(46, 32, 100, 0);
      }
    }

    @keyframes peScrollCueRing {
      0% {
        transform: scale(1);
        opacity: 0.55;
      }
      70%,
      100% {
        transform: scale(1.7);
        opacity: 0;
      }
    }

    @keyframes peScrollCueWheel {
      0% {
        transform: translate(-50%, 0);
        opacity: 0;
      }
      16% {
        opacity: 1;
      }
      72% {
        transform: translate(-50%, 36px);
        opacity: 0;
      }
      100% {
        transform: translate(-50%, 36px);
        opacity: 0;
      }
    }

    @keyframes peScrollCueArrow {
      0%,
      100% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0.6;
      }
      50% {
        transform: rotate(45deg) translate(4px, 4px);
        opacity: 1;
      }
    }

    .oze-story__scroller {
      position: relative;
      overflow: visible;
    }

    .oze-story__sticky {
      position: sticky;
      top: 132px;
      z-index: 2;
      min-height: calc(100vh - 160px);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .oze-story__sticky::before,
    .oze-story__sticky::after {
      position: absolute;
      left: 50%;
      pointer-events: none;
      transition: opacity 0.45s ease;
    }

    .oze-story__sticky::before {
      content: "Przewiń";
      bottom: calc(clamp(20px, 4vh, 44px) + 28px);
      transform: translateX(-50%);
      color: rgba(46, 32, 100, 0.62);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      white-space: nowrap;
      animation: peStoryHintFloat 1.8s ease-in-out infinite;
    }

    .oze-story__sticky::after {
      content: "";
      bottom: clamp(20px, 4vh, 44px);
      width: 22px;
      height: 22px;
      border-right: 2px solid rgba(46, 32, 100, 0.55);
      border-bottom: 2px solid rgba(46, 32, 100, 0.55);
      transform: translateX(-50%) rotate(45deg);
      animation: peStoryHintChevron 1.6s ease-in-out infinite;
    }

    @keyframes peStoryHintFloat {
      0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.5;
      }
      50% {
        transform: translateX(-50%) translateY(3px);
        opacity: 1;
      }
    }

    @keyframes peStoryHintChevron {
      0%, 100% {
        transform: translateX(-50%) rotate(45deg) translate(0, 0);
        opacity: 0.5;
      }
      50% {
        transform: translateX(-50%) rotate(45deg) translate(4px, 4px);
        opacity: 1;
      }
    }

    .oze-story[data-story-active="05"] .oze-story__sticky::before,
    .oze-story[data-story-active="05"] .oze-story__sticky::after {
      opacity: 0;
      animation: none;
    }

    .oze-story-stage {
      position: relative;
      isolation: isolate;
      width: min(100%, 980px);
      margin: 0 auto;
      padding: 0;
      border-radius: 34px;
      pointer-events: auto;
    }

    .oze-story-stage__panels {
      position: relative;
      z-index: 2;
      min-height: clamp(360px, 48vh, 520px);
    }

    .oze-story-stage__panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(28px, 4vw, 48px);
      opacity: 0;
      transform: translateY(18px);
      pointer-events: none;
      transition: opacity 0.48s ease, transform 0.58s cubic-bezier(.22,.72,.2,1);
    }

    .oze-story-stage__panel.is-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .oze-story-stage__title {
      margin: 0;
      max-width: 15ch;
      color: var(--pe-purple);
      font-size: clamp(34px, 3.7vw, 58px);
      line-height: 0.98;
      letter-spacing: -0.04em;
      text-wrap: balance;
    }

    .oze-story-stage__summary {
      margin: 24px 0 0;
      max-width: 46ch;
      color: var(--pe-text);
      font-size: clamp(19px, 1.6vw, 23px);
      line-height: 1.78;
    }

    .oze-story-stage__watermark {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 34px;
      pointer-events: none;
    }

    .oze-story-stage__watermark span {
      position: absolute;
      font-size: clamp(220px, 30vw, 440px);
      font-weight: 800;
      line-height: 0.82;
      letter-spacing: -0.08em;
      color: rgba(46, 32, 100, 0.06);
      opacity: 0;
      transform: translate3d(-30px, 0, 0) scale(0.88);
      transition: opacity 0.55s ease, transform 0.75s cubic-bezier(.22,.72,.2,1), color 0.75s ease;
      user-select: none;
    }

    .oze-story[data-story-active="01"] .oze-story-stage__watermark span:nth-child(1),
    .oze-story[data-story-active="02"] .oze-story-stage__watermark span:nth-child(2),
    .oze-story[data-story-active="03"] .oze-story-stage__watermark span:nth-child(3),
    .oze-story[data-story-active="04"] .oze-story-stage__watermark span:nth-child(4),
    .oze-story[data-story-active="05"] .oze-story-stage__watermark span:nth-child(5) {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    .oze-story[data-story-active="04"] .oze-story-stage__watermark span {
      color: rgba(214, 92, 42, 0.085);
    }

    .oze-story[data-story-active="05"] .oze-story-stage__watermark span {
      color: rgba(255, 138, 0, 0.11);
    }

    .oze-story__markers {
      margin-top: calc(-1 * (100vh - 160px));
      padding-top: calc(100vh - 160px);
    }

    .oze-story-marker {
      min-height: 88vh;
      display: flex;
      align-items: center;
    }

    .oze-story-marker__card {
      width: min(100%, 940px);
      max-height: 1px;
      margin: 0 auto;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .oze-story-marker__top {
      display: flex;
      align-items: center;
      margin-bottom: 22px;
    }

    .oze-story-marker__number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      height: 48px;
      padding: 0 16px;
      border-radius: 999px;
      background: rgba(46, 32, 100, 0.08);
      color: var(--pe-purple);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.1em;
      flex: 0 0 auto;
    }

    .oze-story-marker__title {
      margin: 0;
      max-width: 15ch;
      color: var(--pe-purple);
      font-size: clamp(34px, 3.7vw, 58px);
      line-height: 0.98;
      letter-spacing: -0.04em;
      text-wrap: balance;
    }

    .oze-story-marker__body {
      margin: 24px 0 0;
      max-width: 46ch;
      color: var(--pe-text);
      font-size: clamp(19px, 1.6vw, 23px);
      line-height: 1.78;
    }

    .o-firmie-band {
      background: var(--pe-white);
    }

    .wp-block-columns.o-firmie-band__layout {
      display: grid !important;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    }

    .o-firmie-band__layout {
      margin-bottom: 0;
      align-items: center;
      gap: clamp(24px, 3vw, 54px);
    }

    .o-firmie-construction__container {
      width: min(1480px, calc(100% - 40px));
    }

    .o-firmie-construction .o-firmie-band__layout {
      gap: clamp(20px, 2.6vw, 40px);
    }

    .o-firmie-construction .wp-block-columns.o-firmie-band__layout {
      grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    }

    .o-firmie-band__layout > .wp-block-column {
      min-width: 0;
    }

    .o-firmie-band__head {
      align-items: flex-start;
      margin-bottom: 28px;
      gap: 0;
      max-width: 760px;
    }

    .o-firmie-band__head > * {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .o-firmie-band__head .title {
      max-width: 15ch;
      text-wrap: balance;
    }

    .o-firmie-prose {
      justify-items: stretch;
      max-width: 760px;
      margin-bottom: 0;
    }

    .o-firmie-prose > * {
      width: 100%;
      max-width: none;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .o-firmie-prose p {
      text-align: left;
      color: var(--pe-text);
    }

    .o-firmie-media {
      position: relative;
      margin: 0;
      overflow: hidden;
      border-radius: 30px;
      background: transparent;
      box-shadow: 0 24px 48px rgba(27, 22, 45, 0.12);
      isolation: isolate;
    }

    .o-firmie-media::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255,255,255,0.36);
      border-radius: inherit;
      pointer-events: none;
    }

    .o-firmie-media img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 640px;
      object-fit: cover;
      aspect-ratio: 5 / 6;
    }

    .o-firmie-years,
    .o-firmie-years * {
      box-sizing: border-box;
    }

    .o-firmie-years {
      position: relative;
      min-height: 620px;
      display: grid;
      grid-template-rows: 1fr auto;
      align-items: center;
      padding: clamp(22px, 3vw, 34px);
      overflow: hidden;
      border-radius: 30px;
      isolation: isolate;
      background:
        radial-gradient(circle at 74% 32%, rgba(255, 191, 99, 0.18), transparent 28%),
        radial-gradient(circle at 26% 80%, rgba(255,255,255,0.08), transparent 24%),
        linear-gradient(180deg, #0b0e14, #121722 48%, #080b10);
      box-shadow: 0 32px 62px rgba(11, 12, 22, 0.26);
    }

    .o-firmie-years::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: inherit;
      pointer-events: none;
    }

    .o-firmie-years__ambient {
      position: absolute;
      inset: 0;
      z-index: -4;
      pointer-events: none;
      background:
        radial-gradient(circle at 66% 48%, rgba(255, 237, 202, 0.08), transparent 18%),
        radial-gradient(circle at 62% 58%, rgba(0,0,0,0.36), transparent 34%),
        radial-gradient(circle at 20% 18%, rgba(255,255,255,0.05), transparent 22%);
    }

    .o-firmie-years__grid {
      position: absolute;
      inset: 0;
      z-index: -5;
      opacity: 0.4;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 66% 50%, black, transparent 74%);
    }

    .o-firmie-years__dust {
      position: absolute;
      inset: -30%;
      z-index: -3;
      opacity: 0.18;
      filter: blur(.15px);
      pointer-events: none;
      background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.8) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 50%, rgba(255,255,255,0.45) 0 1px, transparent 1px),
        radial-gradient(circle at 30% 80%, rgba(255,255,255,0.55) 0 1px, transparent 1px),
        radial-gradient(circle at 85% 25%, rgba(255,255,255,0.35) 0 1px, transparent 1px);
      background-size: 33px 31px, 41px 43px, 57px 49px, 71px 61px;
      transform: rotate(4deg);
    }

    .o-firmie-years__stage {
      position: relative;
      z-index: 2;
      min-height: 500px;
      display: grid;
      place-items: center;
      perspective: 1900px;
      perspective-origin: 50% 34%;
    }

    .o-firmie-years__backlight {
      position: absolute;
      width: min(58vw, 640px);
      aspect-ratio: 1;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(213, 173, 104, 0.26), rgba(213, 173, 104, 0.07) 42%, transparent 69%);
      filter: blur(12px);
      transform: translateY(5%);
      pointer-events: none;
    }

    .o-firmie-years__desk {
      position: absolute;
      left: 50%;
      bottom: -4%;
      width: min(54vw, 600px);
      aspect-ratio: 1.5;
      transform: translateX(-50%) rotateX(74deg);
      border-radius: 34px;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04), transparent 14%, rgba(255,255,255,0.02) 38%, transparent 60%, rgba(0,0,0,0.12)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(3deg, rgba(15,9,6,0.16) 0 3px, rgba(86,56,34,0.04) 3px 15px),
        linear-gradient(180deg, #3a281b, #271a12 34%, #120d0a);
      box-shadow:
        0 50px 110px rgba(0,0,0,0.44),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -30px 70px rgba(0,0,0,0.28);
      opacity: 0.96;
      pointer-events: none;
    }

    .o-firmie-years__desk::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,0.08), transparent 18%),
        radial-gradient(circle at 74% 68%, rgba(255,255,255,0.05), transparent 20%),
        radial-gradient(circle at 58% 40%, rgba(0,0,0,0.16), transparent 34%);
      mix-blend-mode: screen;
      opacity: 0.65;
    }

    .o-firmie-years__floor-shadow {
      position: absolute;
      left: 50%;
      bottom: 7%;
      transform: translateX(-50%) rotateX(68deg);
      width: clamp(340px, 40vw, 520px);
      height: clamp(104px, 11vw, 150px);
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.62), rgba(0,0,0,0.26) 48%, transparent 72%);
      filter: blur(18px);
      pointer-events: none;
    }

    .o-firmie-years__stack {
      position: relative;
      width: clamp(300px, 32vw, 430px);
      aspect-ratio: 0.73;
      transform-style: preserve-3d;
    }

    .o-firmie-years__page {
      --curl: 0;
      position: absolute;
      inset: 0;
      border-radius: 24px 24px 30px 30px;
      transform-origin: 50% 6.2%;
      overflow: visible;
      backface-visibility: hidden;
      will-change: transform, opacity, filter;
      contain: layout paint;
    }

    .o-firmie-years__page-shadow {
      position: absolute;
      inset: 5% 5% 2% 5%;
      border-radius: 26px;
      background: radial-gradient(circle at 48% 50%, rgba(0,0,0,0.28), rgba(0,0,0,0.12) 44%, transparent 76%);
      transform: translateY(16px) scale(.98);
      filter: blur(16px);
      opacity: 0.9;
      pointer-events: none;
    }

    .o-firmie-years__page-paper {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 24px 24px 30px 30px;
      display: grid;
      grid-template-rows: 94px 1fr;
      background:
        linear-gradient(104deg, rgba(255,255,255,0.56), transparent 14%),
        radial-gradient(circle at 14% 18%, rgba(255,255,255,0.68), transparent 12%),
        radial-gradient(circle at 80% 10%, rgba(255,255,255,0.40), transparent 15%),
        repeating-linear-gradient(6deg, rgba(92,69,36,0.035) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(92deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 12px),
        linear-gradient(145deg, #fff8e8 0%, #f3ead7 30%, #eadcbf 74%, #d6c29a 100%);
      box-shadow:
        0 56px 110px rgba(0,0,0,0.42),
        0 24px 50px rgba(0,0,0,0.26),
        inset 0 1px 0 rgba(255,255,255,0.88),
        inset 0 -1px 0 rgba(89,66,33,0.18),
        inset 1px 0 0 rgba(255,255,255,0.38),
        inset -1px 0 0 rgba(89,66,33,0.16);
    }

    .o-firmie-years__page-paper::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 7;
      opacity: calc(.10 + var(--curl) * .92);
      pointer-events: none;
      background: linear-gradient(111deg, transparent 0%, transparent 41%, rgba(255,255,255,0.68) 47%, rgba(102,72,30,0.28) 52%, rgba(255,255,255,0.22) 58%, transparent 72%);
      transform: translateX(calc(var(--curl) * 28px)) skewX(calc(var(--curl) * -5deg));
      mix-blend-mode: multiply;
    }

    .o-firmie-years__page-paper::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.24), transparent 16%, transparent 76%, rgba(70,49,22,0.16)),
        linear-gradient(180deg, transparent 70%, rgba(72,52,22,0.14)),
        radial-gradient(circle at 82% 88%, rgba(76,51,18,0.18), transparent 24%);
    }

    .o-firmie-years__rings {
      position: absolute;
      top: -24px;
      left: 26%;
      right: 26%;
      height: 48px;
      z-index: 10;
      pointer-events: none;
    }

    .o-firmie-years__rings::before,
    .o-firmie-years__rings::after {
      content: "";
      position: absolute;
      top: 0;
      width: 20px;
      height: 52px;
      border: 4px solid rgba(204,177,124,0.78);
      border-bottom: 0;
      border-radius: 20px 20px 0 0;
      box-shadow: 0 5px 12px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.34);
      background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%);
    }

    .o-firmie-years__rings::before {
      left: -8px;
    }

    .o-firmie-years__rings::after {
      right: -8px;
    }

    .o-firmie-years__top {
      position: relative;
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,0.12), transparent 22%),
        linear-gradient(180deg, #21262e, #0c1015 74%, #090b0e);
      border-bottom: 1px solid rgba(75,56,30,0.20);
      color: #fff;
      box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 16px 24px rgba(0,0,0,0.18);
    }

    .o-firmie-years__top::before,
    .o-firmie-years__top::after {
      content: "";
      position: absolute;
      top: 30px;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.24), transparent 28%),
        #06080b;
      box-shadow:
        inset 0 3px 5px rgba(0,0,0,0.94),
        0 1px 0 rgba(255,255,255,0.14),
        0 0 0 7px rgba(255,255,255,0.042);
    }

    .o-firmie-years__top::before {
      left: 26.7%;
    }

    .o-firmie-years__top::after {
      right: 26.7%;
    }

    .o-firmie-years__strip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 7px;
      background: linear-gradient(90deg, #946725, #efcd83 48%, #9c6f2b);
      box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset;
    }

    .o-firmie-years__top-label {
      margin-top: 10px;
      color: rgba(255,255,255,0.74);
      font-size: 12px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .o-firmie-years__torn {
      position: absolute;
      top: 87px;
      left: -2px;
      right: -2px;
      height: 18px;
      z-index: 9;
      opacity: 0.68;
      pointer-events: none;
      background:
        radial-gradient(circle at 6px -1px, transparent 0 7px, rgba(84,60,28,0.18) 7px 8px, transparent 9px),
        radial-gradient(circle at 22px -1px, transparent 0 6px, rgba(255,255,255,0.38) 6px 7px, transparent 8px);
      background-size: 29px 16px, 34px 14px;
    }

    .o-firmie-years__body {
      position: relative;
      z-index: 8;
      display: grid;
      place-items: center;
      padding: 34px;
      text-align: center;
    }

    .o-firmie-years__paper-noise {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.26;
      pointer-events: none;
      background-image:
        linear-gradient(18deg, rgba(84,62,29,0.14) 0 1px, transparent 1px 14px),
        linear-gradient(95deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 16px),
        radial-gradient(circle at 20% 33%, rgba(99,71,34,0.14) 0 1px, transparent 1px),
        radial-gradient(circle at 68% 56%, rgba(99,71,34,0.12) 0 1px, transparent 1px),
        radial-gradient(circle at 83% 25%, rgba(255,255,255,0.15) 0 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 29px 33px, 41px 47px, 53px 59px;
      filter: blur(.1px);
    }

    .o-firmie-years__body-inner {
      position: relative;
      z-index: 2;
    }

    .o-firmie-years__year {
      position: relative;
      z-index: 2;
      display: block;
      color: #1a1611;
      font-size: clamp(90px, 11vw, 170px);
      line-height: 0.8;
      font-weight: 830;
      letter-spacing: -0.11em;
      text-shadow: 0 1px 0 rgba(255,255,255,0.52), 0 10px 18px rgba(75,48,17,0.10);
      transform: translateX(-0.03em);
    }

    .o-firmie-years__year::before {
      content: attr(data-year);
      position: absolute;
      inset: 0;
      z-index: -1;
      color: rgba(255,255,255,0.24);
      transform: translate(-1px, -1px);
      filter: blur(.4px);
      opacity: 0.5;
    }

    .o-firmie-years__caption {
      position: relative;
      z-index: 2;
      margin-top: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid rgba(34,27,16,0.13);
      color: rgba(28,22,14,0.45);
      background: rgba(255,255,255,0.18);
      box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset;
      font-size: 12px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .o-firmie-years__lines {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 30px;
      height: 58px;
      opacity: 0.44;
      background: repeating-linear-gradient(180deg, rgba(26,20,13,0.14) 0 1px, transparent 1px 14px);
      mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
    }

    .o-firmie-years__corner-fold {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 72px;
      height: 72px;
      z-index: 9;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(103,74,35,0.18), transparent 38%),
        linear-gradient(315deg, rgba(255,255,255,0.32), rgba(255,255,255,0.04));
      clip-path: polygon(100% 0, 0 100%, 100% 100%);
      opacity: 0.85;
      filter: drop-shadow(-6px -3px 8px rgba(0,0,0,0.10));
    }

    .o-firmie-years__sheet-edge {
      position: absolute;
      left: 4px;
      right: 4px;
      bottom: -3px;
      height: 10px;
      z-index: 3;
      border-radius: 0 0 18px 18px;
      background: linear-gradient(180deg, rgba(190,168,126,0.38), rgba(120,92,48,0.20));
      filter: blur(.3px);
      opacity: 0.72;
    }

    .o-firmie-years__footer {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      width: min(100%, 960px);
      justify-self: center;
      padding: 14px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.065);
      backdrop-filter: blur(18px);
      box-shadow: 0 22px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.76);
      font-size: 13px;
      font-weight: 680;
      line-height: 1.2;
    }

    .o-firmie-years__progress {
      position: relative;
      height: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.12);
    }

    .o-firmie-years__progress i {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #7d5a21, #efcf83);
      transition: width 0.06s linear;
      box-shadow: 0 0 16px rgba(239,207,131,0.22);
    }

    @media (prefers-reduced-motion: reduce) {
      .o-firmie-years__page {
        transition: none !important;
      }

      .oze-story-stage__panel {
        transition: none !important;
      }

      .oze-story::before,
      .oze-story-stage__watermark span {
        transition: none !important;
      }

      .oze-story__scroll-cue,
      .oze-story__scroll-cue *,
      .oze-story__scroll-cue *::before,
      .oze-story__sticky::before,
      .oze-story__sticky::after {
        animation: none !important;
      }
    }

    .o-firmie-rule-list {
      max-width: 780px;
      margin-top: 30px !important;
      gap: 14px !important;
    }

    .o-firmie-rule-list li {
      color: var(--pe-text);
    }

    .o-firmie-rule-list strong {
      color: var(--pe-ink);
    }

    .o-firmie-closing .final-cta__copy {
      max-width: 920px;
    }

    .o-firmie-closing .final-cta__copy > * {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .o-firmie-closing .wp-block-buttons {
      margin-top: 34px;
    }

    .icon-box {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 16px;
      background: var(--pe-orange-soft);
      color: var(--pe-orange-dark);
      border: 1px solid rgba(255, 150, 0, 0.16);
    }
    .icon-box svg { width: 20px; height: 20px; stroke: currentColor; }

    .card {
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: var(--pe-radius-md);
      padding: 28px;
      box-shadow: var(--pe-shadow);
      height: 100%;
    }
    .card--tall { padding: 34px; }
    .card--dark {
      background: var(--pe-purple);
      color: var(--pe-white);
      border-color: transparent;
    }
    .card--dark h3,
    .card--dark h4 { color: var(--pe-white); }

    .card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .card h3 {
      font-size: clamp(22px, 2vw, 30px);
      margin-bottom: 12px;
    }
    .card p { margin: 0; color: var(--pe-muted); }
    .card--dark p { color: rgba(255,255,255,0.76); }

    .list,
    .bullet-list {
      list-style: none;
      margin: 22px 0 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    .list li,
    .bullet-list li {
      position: relative;
      padding-left: 28px;
      color: var(--pe-text);
      font-size: 15px;
      line-height: 1.65;
    }
    .card--dark .list li,
    .card--dark .bullet-list li { color: rgba(255,255,255,0.86); }

    .list li::before,
    .bullet-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--pe-orange);
      box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.14);
    }

    .offer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px;
    }

    .sub-blocks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 22px;
    }

    .sub-block {
      padding: 18px;
      background: var(--pe-soft);
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: 18px;
    }
    .sub-block h4 {
      font-size: 17px;
      color: var(--pe-purple);
      margin-bottom: 8px;
    }
    .sub-block p {
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
    }

    .feature-split-wrap {
      display: grid;
      gap: 26px;
    }

    .offer-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
      gap: 34px;
      align-items: stretch;
    }

    .offer-system {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(320px, .42fr) minmax(0, .58fr);
      gap: 28px;
      padding: 42px 44px;
      border-radius: 30px;
      overflow: hidden;
      background: linear-gradient(120deg, rgba(234,208,161,0.98) 0%, rgba(255,150,0,0.94) 28%, rgba(113,84,223,0.96) 68%, rgba(46,32,100,0.98) 100%);
      box-shadow: var(--pe-shadow-lg);
      color: var(--pe-white);
      position: relative;
      isolation: isolate;
    }

    .offer-system::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.24), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,255,255,0.12), transparent 24%);
      pointer-events: none;
      z-index: 0;
    }

    .offer-system__intro,
    .offer-system__content {
      position: relative;
      z-index: 1;
    }

    .offer-system__intro {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 12px;
    }

    .offer-system__eyebrow {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 34px;
      padding: 0 14px;
      margin-bottom: 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
    }

    .offer-system__intro h3 {
      margin: 0 0 16px;
      max-width: 520px;
      font-size: clamp(34px, 3.2vw, 52px);
      line-height: 1.04;
      color: var(--pe-white);
    }

    .offer-system__intro p {
      margin: 0;
      max-width: 560px;
      color: rgba(255,255,255,0.88);
      font-size: 18px;
      line-height: 1.82;
    }

    .offer-system .offer-blocks {
      gap: 16px;
    }

    .offer-system .offer-block {
      min-height: 198px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.16);
      backdrop-filter: blur(4px);
    }

    .offer-system .offer-block strong {
      color: var(--pe-white);
    }

    .offer-system .offer-block span {
      color: rgba(255,255,255,0.84);
    }

    .offer-panel {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 340px 1fr;
      min-height: 820px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: var(--pe-shadow-lg);
      align-self: stretch;
    }

    .offer-panel--warm {
      background: #ead0a1;
      color: var(--pe-purple);
    }

    .offer-panel--purple {
      background: var(--pe-purple);
      color: var(--pe-white);
    }

    .offer-panel__media {
      position: relative;
      min-height: 340px;
      overflow: hidden;
      background-size: cover;
      background-position: center;
    }

    .offer-panel__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(255,255,255,.02), rgba(0,0,0,.08));
      pointer-events: none;
    }

    .offer-panel__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .offer-panel__content {
      padding: 42px 46px 44px;
      display: grid;
      grid-template-rows: minmax(408px, auto) auto;
      gap: 28px;
      align-items: start;
      align-content: start;
    }

    .offer-panel__intro {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 408px;
    }

    .offer-panel__content h3 {
      font-size: clamp(31px, 2.4vw, 44px);
      line-height: 1.08;
      margin: 0;
      color: inherit;
      max-width: 640px;
      min-height: 156px;
      display: flex;
      align-items: flex-start;
    }

    .offer-panel__lead {
      margin: 18px 0 0;
      max-width: 100%;
      font-size: 18px;
      line-height: 1.84;
      color: inherit;
      opacity: .92;
      align-self: start;
    }

    .offer-panel--purple .offer-panel__lead,
    .offer-panel--purple .offer-panel__content p,
    .offer-panel--purple .offer-list-grid li {
      color: rgba(255,255,255,0.86);
    }

    /* Homepage offer panels reveal their description only when explored. */
    @media (hover: hover) and (min-width: 1181px) {
      .offer-panel--interactive {
        height: clamp(1180px, calc(1900px - 42vw), 1400px);
        min-height: 0;
        grid-template-rows: 560px 1fr;
        transition: grid-template-rows .52s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, transform .32s ease;
      }

      .offer-panel--interactive .offer-panel__media {
        min-height: 0;
      }

      .offer-panel--interactive .offer-panel__content {
        position: relative;
        display: block;
      }

      .offer-panel--interactive .offer-panel__intro {
        position: absolute;
        top: 42px;
        right: 46px;
        left: 46px;
        min-height: 0;
      }

      .offer-panel--interactive .offer-panel__content h3 {
        min-height: 0;
      }

      .offer-panel--interactive .offer-panel__lead {
        max-height: 0;
        margin-top: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-12px);
        transition: max-height .52s cubic-bezier(.2,.8,.2,1), margin-top .36s ease, opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1);
      }

      .offer-panel--interactive .offer-checklist {
        position: absolute;
        right: 46px;
        bottom: 44px;
        left: 46px;
        width: auto;
      }

      .offer-panel--interactive:hover,
      .offer-panel--interactive:focus {
        grid-template-rows: 340px 1fr;
        box-shadow: 0 34px 68px rgba(27, 22, 45, 0.16);
        transform: translateY(-4px);
      }

      .offer-panel--interactive:hover .offer-panel__lead,
      .offer-panel--interactive:focus .offer-panel__lead {
        max-height: 24rem;
        margin-top: 18px;
        opacity: .92;
        transform: translateY(0);
      }

      .offer-panel--interactive:focus-visible {
        outline: 3px solid var(--pe-orange);
        outline-offset: 5px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .offer-panel--interactive,
      .offer-panel--interactive .offer-panel__lead {
        transition: none;
      }
    }

    .offer-list-grid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(240px, 1fr));
      gap: 14px 26px;
    }

    .offer-list-grid li {
      position: relative;
      padding-left: 24px;
      font-size: 16.5px;
      line-height: 1.72;
      color: rgba(46, 32, 100, 0.94);
    }

    .offer-list-grid li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--pe-orange);
      box-shadow: 0 0 0 5px rgba(255, 150, 0, 0.12);
    }


    .offer-benefits {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      align-self: start;
    }

    .offer-benefit {
      min-height: 132px;
      padding: 18px 18px 17px;
      border-radius: 18px;
      background: rgba(255,255,255,0.34);
      border: 1px solid rgba(46, 32, 100, 0.08);
    }

    .offer-panel--purple .offer-benefit {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.16);
    }

    .offer-benefit strong {
      display: flex;
      align-items: flex-start;
      min-height: 44px;
      margin-bottom: 8px;
      color: inherit;
      font-size: 17px;
      line-height: 1.28;
    }

    .offer-benefit span {
      display: block;
      color: inherit;
      opacity: .9;
      font-size: 15px;
      line-height: 1.62;
    }

    .offer-panel--purple .offer-benefit span {
      color: rgba(255,255,255,0.82);
    }


    .offer-blocks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
    }

    .offer-block {
      min-height: 190px;
      padding: 18px 18px 17px;
      border-radius: 18px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.16);
    }

    .offer-block strong {
      display: flex;
      align-items: flex-start;
      min-height: 48px;
      margin-bottom: 8px;
      color: inherit;
      font-size: 17px;
      line-height: 1.28;
    }

    .offer-block span {
      display: block;
      color: rgba(255,255,255,0.82);
      font-size: 15px;
      line-height: 1.62;
    }

    .offer-checklist {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      align-content: start;
      grid-auto-rows: 1fr;
    }

    .offer-checklist li {
      position: relative;
      min-height: 96px;
      height: 100%;
      display: flex;
      align-items: flex-start;
      padding: 18px 18px 17px 48px;
      border-radius: 18px;
      background: rgba(255,255,255,0.34);
      border: 1px solid rgba(46, 32, 100, 0.08);
      color: rgba(46, 32, 100, 0.94);
      font-size: 16px;
      line-height: 1.58;
      font-weight: 600;
    }

    .offer-checklist li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 23px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--pe-orange);
      box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.12);
    }

    .offer-panel--purple .offer-checklist li {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.86);
    }

    .offer-checklist--compact li {
      min-height: 84px;
    }


    .feature-split {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      align-items: center;
      min-height: 560px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: var(--pe-shadow-lg);
    }

    .feature-split--reverse {
      grid-template-columns: 1.05fr .95fr;
    }

    .feature-split--warm {
      background: #ead0a1;
      color: var(--pe-purple);
    }

    .feature-split--purple {
      background: var(--pe-purple);
      color: var(--pe-white);
    }

    .feature-split__media {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 36px;
    }

    .feature-split__content {
      padding: 56px 54px;
    }

    .feature-split__content h3,
    .feature-split__content h2 {
      font-size: clamp(30px, 3vw, 48px);
      line-height: 1.08;
      margin-bottom: 22px;
      color: inherit;
    }

    .feature-split__lead {
      margin: 0 0 20px;
      font-size: 17px;
      line-height: 1.8;
      color: inherit;
      opacity: .9;
    }

    .feature-split--purple .feature-split__lead,
    .feature-split--purple .feature-split__content .list li,
    .feature-split--purple .feature-split__content p {
      color: rgba(255,255,255,0.86);
    }

    .feature-split__content .list {
      gap: 10px;
      margin-top: 18px;
    }

    .feature-split__content .list li {
      color: rgba(46, 32, 100, 0.94);
    }

    .feature-split__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 8px;
      width: 100%;
    }

    .feature-chip {
      padding: 16px 16px 15px;
      border-radius: 18px;
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(6px);
    }

    .feature-chip strong {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      line-height: 1.25;
      color: inherit;
    }

    .feature-chip span {
      display: block;
      font-size: 14px;
      line-height: 1.55;
      color: inherit;
      opacity: .86;
    }

    .feature-split--warm .feature-chip {
      background: rgba(255,255,255,0.42);
      border-color: rgba(46, 32, 100, 0.08);
    }

    .feature-art {
      width: min(100%, 520px);
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-art img {
      width: 100%;
      height: 100%;
      max-height: 500px;
      object-fit: cover;
      border-radius: 24px;
      display: block;
      box-shadow: var(--pe-shadow);
    }

    .feature-note {
      margin-top: 20px;
      font-size: 15px;
      color: inherit;
      opacity: .88;
    }

    .section--usp .section-head {
      max-width: 980px;
      margin-bottom: 34px;
    }

    .section--usp .title {
      max-width: 820px;
      text-wrap: balance;
    }

    .usp-bento {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 22px;
      align-items: stretch;
      grid-auto-flow: dense;
    }

    .usp-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 30px;
      border-radius: 28px;
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      box-shadow: var(--pe-shadow);
      overflow: hidden;
      transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease, opacity .28s ease, filter .28s ease;
      isolation: isolate;
      color: var(--pe-purple);
    }

    .usp-card::before {
      content: "";
      position: absolute;
      inset: auto auto -46px -46px;
      width: 170px;
      height: 170px;
      border-radius: 999px;
      background: rgba(255, 150, 0, 0.08);
      transition: transform .45s ease, opacity .32s ease, background .32s ease;
      z-index: 0;
    }

    .usp-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 100%);
      opacity: 0;
      transition: opacity .32s ease;
      z-index: 0;
      pointer-events: none;
    }

    .usp-bento:hover .usp-card {
      opacity: .42;
      filter: grayscale(.18);
      transform: scale(.985);
    }

    .usp-bento:hover .usp-card:hover {
      opacity: 1;
      filter: none;
      transform: translateY(-8px);
      box-shadow: 0 28px 60px rgba(46, 32, 100, 0.14);
      z-index: 2;
    }

    .usp-card:hover::before {
      transform: scale(1.18);
    }

    .usp-card:hover::after {
      opacity: 1;
    }

    .usp-card__top,
    .usp-card h3,
    .usp-card p {
      position: relative;
      z-index: 1;
    }

    .usp-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }

    .usp-card__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: inherit;
      transition: transform .3s ease, color .3s ease;
      line-height: 0;
      flex: 0 0 auto;
    }

    .usp-card__icon svg {
      width: 66px;
      height: 66px;
      stroke: currentColor;
    }

    .usp-card:hover .usp-card__icon {
      transform: translateY(-3px) scale(1.04);
    }

    .usp-card__index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(46, 32, 100, 0.08);
      color: inherit;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      flex: 0 0 auto;
    }

    .usp-card h3 {
      margin: 0 0 14px;
      font-size: 28px;
      color: inherit;
      line-height: 1.08;
      text-wrap: balance;
      max-width: 34ch;
    }

    .usp-card p {
      margin: 0;
      font-size: 17px;
      line-height: 1.74;
      color: inherit;
      opacity: .92;
      max-width: 58ch;
    }

    .usp-card--hero {
      grid-column: span 5;
      background: #ead0a1;
    }

    .usp-card--hero h3 {
      font-size: 34px;
      max-width: 15ch;
    }

    .usp-card--hero p {
      max-width: 44ch;
      font-size: 18px;
    }

    .usp-card--purple {
      grid-column: span 3;
      background: var(--pe-purple);
      color: var(--pe-white);
      border-color: rgba(255,255,255,0.08);
      box-shadow: 0 22px 50px rgba(46, 32, 100, 0.18);
    }

    .usp-card--purple::before {
      background: rgba(255,255,255,0.09);
    }

    .usp-card--purple .usp-card__index {
      background: rgba(255,255,255,0.12);
    }

    .usp-card--medium {
      grid-column: span 4;
    }

    .usp-card--medium h3 {
      font-size: 26px;
      max-width: 16ch;
    }

    .usp-card--medium p {
      max-width: 36ch;
    }

    .usp-card--narrow {
      grid-column: span 3;
    }

    .usp-card--narrow h3 {
      font-size: 24px;
      max-width: 14ch;
    }

    .usp-card--narrow p {
      font-size: 16.5px;
      line-height: 1.7;
      max-width: 30ch;
    }

    .usp-card--service {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,248,239,1) 100%);
    }

    .usp-card--service h3 {
      font-size: 32px;
      max-width: 24ch;
    }

    .usp-card--service p {
      max-width: 92ch;
    }


    .process-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 28px;
      align-items: start;
      overflow: visible;
    }

    .process-intro {
      position: sticky;
      top: 152px;
      align-self: start;
      display: flex;
      flex-direction: column;
      padding: clamp(22px, 1.9vw, 28px);
      max-height: calc(100vh - 178px);
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: 26px;
      box-shadow: var(--pe-shadow);
    }
    .process-intro h3 {
      font-size: clamp(24px, 2vw, 32px);
      line-height: 1.12;
    }
    .process-intro .lead {
      margin-top: 14px;
      font-size: 17px;
      line-height: 1.62;
    }
    .process-intro img {
      margin-top: 20px;
      border-radius: 20px;
      width: 100%;
      height: clamp(140px, 22vh, 220px);
      object-fit: cover;
    }

    .process-intro--visual {
      padding: 0;
      overflow: hidden;
    }

    .process-intro--visual img {
      margin: 0;
      width: 100%;
      height: min(520px, calc(100vh - 178px));
      min-height: 420px;
      border-radius: 26px;
      object-fit: cover;
      object-position: center center;
      object-fit: cover;
      display: block;
    }

    .steps {
      display: grid;
      gap: 18px;
    }

    .step {
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 18px;
      align-items: start;
      padding: 26px;
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: 22px;
      box-shadow: var(--pe-shadow);
    }

    .step__number {
      width: 86px;
      height: 86px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      background: var(--pe-purple);
      color: var(--pe-white);
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -.04em;
    }
    .step h3 {
      font-size: 24px;
      color: var(--pe-purple);
      margin-bottom: 10px;
    }
    .step p {
      margin: 0;
      font-size: 18px;
      line-height: 1.78;
      color: var(--pe-text);
    }

    .references-scroll {
      position: relative;
      height: calc(var(--references-scroll-distance, 2200px) + var(--references-sticky-height, 720px));
      margin-top: 22px;
      overflow: visible;
      contain: layout;
    }

    .references-sticky {
      position: sticky;
      top: var(--references-sticky-top, 92px);
      height: var(--references-sticky-box-height, min(720px, calc(100vh - 108px)));
      min-height: min(560px, calc(100vh - 120px));
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding-inline: clamp(44px, 7vw, 140px);
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
    }

    .references-sticky::before,
    .references-sticky::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: clamp(120px, 14vw, 270px);
      z-index: 6;
      pointer-events: none;
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .references-sticky::before {
      left: 0;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.84) 24%, rgba(0,0,0,.44) 60%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.84) 24%, rgba(0,0,0,.44) 60%, transparent 100%);
    }

    .references-sticky::after {
      right: 0;
      mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.84) 24%, rgba(0,0,0,.44) 60%, transparent 100%);
      -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.84) 24%, rgba(0,0,0,.44) 60%, transparent 100%);
    }

    .references-sticky__blur {
      position: absolute;
      top: 0;
      bottom: 0;
      width: clamp(120px, 14vw, 270px);
      z-index: 5;
      pointer-events: none;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(7px) saturate(1.08);
      -webkit-backdrop-filter: blur(7px) saturate(1.08);
    }

    .references-sticky__blur--left {
      left: 0;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.60) 34%, rgba(0,0,0,.22) 72%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.60) 34%, rgba(0,0,0,.22) 72%, transparent 100%);
    }

    .references-sticky__blur--right {
      right: 0;
      mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.60) 34%, rgba(0,0,0,.22) 72%, transparent 100%);
      -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.60) 34%, rgba(0,0,0,.22) 72%, transparent 100%);
    }

    .references-track {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 28px;
      width: max-content;
      padding: 8px 0;
      will-change: transform;
      transform: translate3d(var(--references-x, 0px), 0, 0);
      transition: none;
    }

    .reference-card {
      flex: 0 0 auto;
      width: min(1360px, calc(100vw - clamp(220px, 19vw, 360px)));
      min-width: 1040px;
      min-height: 600px;
      display: grid;
      grid-template-columns: minmax(360px, .34fr) minmax(430px, .39fr) minmax(320px, .27fr);
      overflow: hidden;
      border-radius: 34px;
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      box-shadow: var(--pe-shadow-lg);
      isolation: isolate;
    }

    .reference-card__visual {
      position: relative;
      min-height: 100%;
      overflow: hidden;
      background: var(--pe-purple);
    }

    .reference-card__visual img {
      width: 100%;
      height: 100%;
      min-height: 600px;
      object-fit: cover;
      display: block;
      transform: scale(1.04);
      transition: transform .6s ease;
    }

    .reference-card:hover .reference-card__visual img {
      transform: scale(1.08);
    }

    .reference-card__visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(46,32,100,.78), rgba(46,32,100,.08) 58%);
    }

    .reference-card__stage {
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 26px;
      z-index: 1;
      display: grid;
      gap: 12px;
      color: var(--pe-white);
    }

    .reference-card__index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 42px;
      padding: 0 15px;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.18);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .reference-card__stage strong {
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.04;
      max-width: 380px;
    }

    .reference-card__body {
      padding: 46px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      min-height: 100%;
    }

    .reference-card__meta {
      display: none;
    }

    .reference-card__meta span {
      display: inline-flex;
      min-height: 36px;
      align-items: center;
      padding: 0 13px;
      border-radius: 999px;
      background: var(--pe-soft);
      color: var(--pe-purple);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .reference-card h3 {
      font-size: clamp(28px, 2.4vw, 42px);
      color: var(--pe-purple);
      line-height: 1.08;
      margin: 0;
      max-width: 680px;
    }

    .reference-card p {
      margin: 0;
      font-size: 18px;
      line-height: 1.78;
      color: var(--pe-text);
    }

    .reference-story {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 18px;
      align-items: start;
      padding: 22px 0;
      border-top: 1px solid rgba(46, 32, 100, 0.1);
      border-bottom: 1px solid rgba(46, 32, 100, 0.1);
    }

    .reference-story__label {
      color: var(--pe-orange-dark);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .reference-card__quote-panel {
      position: relative;
      display: flex;
      align-items: center;
      padding: 46px 44px;
      background:
        radial-gradient(circle at 90% 10%, rgba(255,150,0,.18), transparent 32%),
        linear-gradient(180deg, rgba(248,245,255,1) 0%, rgba(255,248,239,1) 100%);
      border-left: 1px solid rgba(46, 32, 100, 0.08);
    }

    .reference-card__quote-panel::before {
      content: "”";
      position: absolute;
      right: 28px;
      top: 20px;
      color: rgba(255, 150, 0, 0.22);
      font-size: 150px;
      line-height: .75;
      font-weight: 800;
      pointer-events: none;
    }

    .reference-quote {
      position: relative;
      z-index: 1;
      margin: 0;
      padding: 0;
      border-left: 0;
      border-radius: 0;
      background: transparent;
      color: var(--pe-text);
      font-size: 18px;
      line-height: 1.78;
    }

    .reference-quote strong {
      display: block;
      margin-bottom: 18px;
      color: var(--pe-purple);
      font-size: 14px;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .references-progress {
      position: absolute;
      left: clamp(44px, 7vw, 140px);
      right: clamp(44px, 7vw, 140px);
      bottom: 2px;
      height: 4px;
      border-radius: 999px;
      background: rgba(46, 32, 100, 0.12);
      overflow: hidden;
      z-index: 5;
    }

    .references-progress__bar {
      width: 100%;
      height: 100%;
      background: var(--pe-orange);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .08s linear;
    }

    .references-scroll--static {
      height: auto;
      margin-top: 22px;
      overflow: visible;
      contain: none;
    }

    .references-scroll--static .references-track {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
      transform: none !important;
      padding: 0;
      will-change: auto;
    }

    .references-scroll--static .reference-card {
      width: 100%;
      min-width: 0;
    }


    @media (max-width: 1180px) {
      .references-scroll {
        width: 100%;
        margin-left: 0;
        padding-inline: 0;
        overflow-x: visible;
        padding-bottom: 0;
      }

      .references-sticky {
        width: 100%;
      }

      .references-track {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        transform: none !important;
        padding: 0;
      }

      .reference-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        grid-template-columns: 1fr;
        scroll-snap-align: none;
      }

      .reference-card__visual img {
        min-height: 320px;
        height: 320px;
      }

      .reference-card__quote-panel {
        padding: 32px 34px 36px;
        border-left: 0;
        border-top: 1px solid rgba(46, 32, 100, 0.08);
      }

      .references-progress {
        display: none;
      }
    }

    @media (max-width: 700px) {
      .reference-card__body,
      .reference-card__quote-panel {
        padding: 26px 22px;
      }

      .reference-quote {
        font-size: 16.5px;
        line-height: 1.72;
      }

      .reference-story {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .reference-card__stage {
        left: 20px;
        right: 20px;
        bottom: 20px;
      }
    }

    .about-box {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 30px;
      align-items: stretch;
      background: var(--pe-white);
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: 30px;
      padding: 34px;
      box-shadow: var(--pe-shadow-lg);
    }

    .about-image {
      border-radius: 24px;
      overflow: hidden;
      min-height: 100%;
    }
    .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 420px;
    }

    .about-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .about-copy p {
      margin: 0 0 18px;
      color: var(--pe-text);
      font-size: 16px;
      line-height: 1.8;
    }
    .about-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }
    .about-tags span {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      padding: 0 16px;
      border-radius: 999px;
      background: var(--pe-soft);
      color: var(--pe-purple);
      font-size: 13px;
      font-weight: 800;
      border: 1px solid rgba(46, 32, 100, 0.08);
    }

    .section--about-immersive {
      padding: 0;
    }

    .section--about-immersive .container--wide {
      width: 100%;
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    .about-immersive {
      position: relative;
      width: 100%;
      min-height: 980px;
      padding: clamp(58px, 5.4vw, 92px) clamp(48px, 6vw, 96px);
      overflow: hidden;
      background: #f4c982;
      isolation: isolate;
    }

    .about-immersive::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,0.24), transparent 22%),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,0.18), transparent 25%),
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
      pointer-events: none;
      z-index: 0;
    }

    .about-immersive__gallery {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .about-photo {
      position: absolute;
      width: clamp(180px, 12vw, 260px);
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.52);
      box-shadow: 0 18px 40px rgba(46, 32, 100, 0.12);
      pointer-events: auto;
      transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
      background: rgba(255,255,255,0.16);
      opacity: .92;
    }

    .about-photo:hover {
      transform: translateY(-8px) rotate(0deg) !important;
      box-shadow: 0 26px 54px rgba(46, 32, 100, 0.18);
    }

    .about-photo img {
      width: 100%;
      height: auto;
      aspect-ratio: 5 / 4;
      object-fit: cover;
      display: block;
    }

    .about-photo--1 {
      top: 56px;
      left: 32px;
      transform: rotate(-6deg);
      animation: aboutFloatOne 8.6s ease-in-out infinite;
    }

    .about-photo--2 {
      top: 226px;
      left: 118px;
      transform: rotate(4deg);
      animation: aboutFloatTwo 10s ease-in-out infinite;
    }

    .about-photo--3 {
      bottom: 82px;
      left: 42px;
      transform: rotate(3deg);
      animation: aboutFloatThree 9.4s ease-in-out infinite;
    }

    .about-photo--4 {
      top: 54px;
      right: 34px;
      transform: rotate(5deg);
      animation: aboutFloatFour 8.8s ease-in-out infinite;
    }

    .about-photo--5 {
      top: 248px;
      right: 118px;
      transform: rotate(-4deg);
      animation: aboutFloatFive 10.4s ease-in-out infinite;
    }

    .about-photo--6 {
      bottom: 72px;
      right: 46px;
      transform: rotate(-5deg);
      animation: aboutFloatSix 9.2s ease-in-out infinite;
    }

    .about-photo--7 {
      top: 448px;
      left: 22px;
      transform: rotate(-3deg);
      animation: aboutFloatSeven 10.8s ease-in-out infinite;
    }

    .about-photo--8 {
      top: 468px;
      right: 28px;
      transform: rotate(3deg);
      animation: aboutFloatEight 9.8s ease-in-out infinite;
    }

    .about-photo--9 {
      bottom: 284px;
      left: 170px;
      transform: rotate(-4deg);
      animation: aboutFloatNine 11s ease-in-out infinite;
    }

    .about-photo--10 {
      bottom: 292px;
      right: 174px;
      transform: rotate(4deg);
      animation: aboutFloatTen 10.2s ease-in-out infinite;
    }

    .about-immersive__content {
      position: relative;
      z-index: 2;
      width: min(820px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 30px;
      color: var(--pe-purple);
      text-shadow: 0 1px 0 rgba(255,255,255,0.28);
    }

    .about-immersive__content .title {
      margin: 0;
      font-size: clamp(38px, 4vw, 60px);
      line-height: 1.02;
      max-width: 15ch;
      text-wrap: balance;
    }

    .about-immersive__copy {
      display: grid;
      gap: 20px;
    }

    .about-immersive__copy p,
    .about-immersive__copy .about-immersive__paragraph {
      margin: 0;
      font-size: clamp(19px, 1.55vw, 23px);
      line-height: 1.78;
      color: rgba(31, 20, 74, 0.96);
    }

    .about-immersive__facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding-top: 8px;
    }

    .about-immersive__fact {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 132px;
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.22);
      border: 1px solid rgba(255,255,255,0.48);
      color: var(--pe-purple);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.28;
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      box-shadow: 0 14px 28px rgba(46, 32, 100, 0.08);
    }

    .about-immersive__fact svg {
      width: 36px;
      height: 36px;
      margin-bottom: 18px;
      stroke: currentColor;
    }

    .about-immersive__fact span {
      display: block;
    }
    .about-immersive__fact span span {
      display: block;
    }

    .about-immersive__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 2px;
    }

    @keyframes aboutFloatOne {
      0%, 100% { transform: translateY(0) rotate(-6deg); }
      50% { transform: translateY(-14px) rotate(-4deg); }
    }

    @keyframes aboutFloatTwo {
      0%, 100% { transform: translateY(0) rotate(4deg); }
      50% { transform: translateY(-13px) rotate(6deg); }
    }

    @keyframes aboutFloatThree {
      0%, 100% { transform: translateY(0) rotate(3deg); }
      50% { transform: translateY(-16px) rotate(1deg); }
    }

    @keyframes aboutFloatFour {
      0%, 100% { transform: translateY(0) rotate(5deg); }
      50% { transform: translateY(-10px) rotate(3deg); }
    }

    @keyframes aboutFloatFive {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-15px) rotate(-2deg); }
    }

    @keyframes aboutFloatSix {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      50% { transform: translateY(-12px) rotate(-3deg); }
    }

    @keyframes aboutFloatSeven {
      0%, 100% { transform: translateY(0) rotate(-3deg); }
      50% { transform: translateY(-12px) rotate(-1deg); }
    }

    @keyframes aboutFloatEight {
      0%, 100% { transform: translateY(0) rotate(3deg); }
      50% { transform: translateY(-14px) rotate(5deg); }
    }

    @keyframes aboutFloatNine {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-10px) rotate(-2deg); }
    }

    @keyframes aboutFloatTen {
      0%, 100% { transform: translateY(0) rotate(4deg); }
      50% { transform: translateY(-13px) rotate(2deg); }
    }


    .cta-panel {
      background: var(--pe-purple);
      color: var(--pe-white);
      border-radius: 30px;
      padding: 52px;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 28px;
      align-items: center;
      box-shadow: var(--pe-shadow-lg);
    }
    .cta-panel h2 { color: var(--pe-white); }
    .cta-panel .lead { color: rgba(255,255,255,0.82); margin-top: 18px; }

    .cta-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 24px;
      padding: 28px;
    }
    .cta-card h3 {
      color: var(--pe-white);
      font-size: 22px;
      margin-bottom: 8px;
    }
    .cta-card p {
      margin: 0;
      color: rgba(255,255,255,0.76);
      font-size: 15px;
    }
    .cta-list {
      list-style: none;
      margin: 20px 0 26px;
      padding: 0;
      display: grid;
      gap: 10px;
    }
    .cta-list li {
      position: relative;
      padding-left: 24px;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
    }
    .cta-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--pe-orange);
    }

    .section--final-cta {
      padding: 118px 0;
      background: var(--pe-purple);
      color: var(--pe-white);
      overflow: hidden;
    }

    .final-cta {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(360px, .72fr);
      gap: clamp(34px, 5vw, 78px);
      align-items: center;
    }

    .final-cta__copy {
      max-width: 860px;
    }

    .final-cta__copy .title {
      color: var(--pe-white);
      font-size: clamp(42px, 5vw, 76px);
      line-height: .98;
      letter-spacing: -.03em;
      max-width: 900px;
      margin: 0;
      text-wrap: balance;
    }

    .final-cta__copy .lead {
      margin-top: 24px;
      max-width: 820px;
      color: rgba(255,255,255,0.82);
      font-size: clamp(19px, 1.5vw, 23px);
      line-height: 1.76;
    }

    /* Reviews marquee - minimalist social proof strip at the bottom of every
       form (final-cta) section. Pure CSS animation, pause on hover/focus.
       Mirrors the hero-marquee contract: two identical groups, translateX(-50%). */
    .pe-reviews-marquee {
        position: relative;
        margin-top: clamp(56px, 7vw, 88px);
        padding: 22px 0;
        overflow: hidden;
        overflow-x: clip;
        contain: paint;
    }

    .pe-reviews-marquee::before,
    .pe-reviews-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 96px;
        z-index: 3;
        pointer-events: none;
    }

    .pe-reviews-marquee::before {
        left: 0;
        background: linear-gradient(to right, var(--pe-purple), rgba(46, 32, 100, 0));
    }

    .pe-reviews-marquee::after {
        right: 0;
        background: linear-gradient(to left, var(--pe-purple), rgba(46, 32, 100, 0));
    }

    .pe-reviews-marquee__track {
        display: flex;
        width: max-content;
        animation: peReviewsMarquee 85s linear infinite;
        will-change: transform;
    }

    .pe-reviews-marquee:hover .pe-reviews-marquee__track,
    .pe-reviews-marquee:focus-within .pe-reviews-marquee__track {
        animation-play-state: paused;
    }

    .pe-reviews-marquee__group {
        display: flex;
        align-items: stretch;
        flex: 0 0 auto;
        padding: 0 12px;
        column-gap: 16px;
    }

    .pe-reviews-marquee__item {
        flex: 0 0 auto;
        width: 320px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    .pe-reviews-marquee__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 12px;
    }

    .pe-reviews-marquee__stars {
        color: var(--pe-orange);
        font-size: 13px;
        letter-spacing: 1.5px;
        line-height: 1;
    }

    .pe-reviews-marquee__text {
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-size: 14px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pe-reviews-marquee__author {
        color: var(--pe-white);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .pe-reviews-marquee__author::before {
        content: "- ";
        color: rgba(255, 255, 255, 0.5);
    }

    @keyframes peReviewsMarquee {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    @media (max-width: 768px) {
        .pe-reviews-marquee__item {
            width: 268px;
            padding: 14px 16px;
        }
        .pe-reviews-marquee__track {
            animation-duration: 60s;
        }
        .pe-reviews-marquee__text {
            font-size: 13px;
            -webkit-line-clamp: 5;
            line-clamp: 5;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .pe-reviews-marquee__track {
            animation: none;
        }
    }

    .final-cta__form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 26px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 24px;
      backdrop-filter: blur(10px);
      color: var(--pe-white);
    }

    .final-cta__form label {
      display: grid;
      gap: 7px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .final-cta__form .req {
      color: var(--pe-orange);
      font-weight: 800;
      margin-left: 2px;
    }

    .final-cta__form input,
    .final-cta__form textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 18px;
      padding: 16px 18px;
      background: rgba(255,255,255,0.1);
      color: var(--pe-white);
      font: inherit;
      outline: none;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .final-cta__form input {
      height: 58px;
      padding: 0 18px;
    }
    .final-cta__form textarea {
      resize: vertical;
      min-height: 88px;
      line-height: 1.5;
    }

    .final-cta__form input::placeholder,
    .final-cta__form textarea::placeholder {
      color: rgba(255,255,255,0.52);
    }

    .final-cta__form input:focus,
    .final-cta__form textarea:focus {
      border-color: rgba(255,150,0,0.9);
      background: rgba(255,255,255,0.14);
      box-shadow: 0 0 0 4px rgba(255,150,0,0.14);
    }

    .final-cta__form .pe-form-msg {
      margin: 0;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
    }
    .final-cta__form .pe-form-msg--ok {
      background: rgba(52, 211, 153, 0.16);
      color: #6ee7b7;
      border: 1px solid rgba(52, 211, 153, 0.4);
    }
    .final-cta__form .pe-form-msg--err {
      background: rgba(248, 113, 113, 0.16);
      color: #fca5a5;
      border: 1px solid rgba(248, 113, 113, 0.4);
    }

    .final-cta__form .btn {
      width: 100%;
      justify-content: center;
      margin-top: 8px;
      border: 0;
      cursor: pointer;
    }

    .final-cta__note {
      margin: 2px 0 0;
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }

    .final-cta__trust {
      list-style: none !important;
      margin: 18px 0 0;
      padding: 0 !important;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 24px;
      align-items: center;
    }
    .final-cta__trust li {
      list-style: none !important;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, 0.92);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
      white-space: nowrap;
    }
    .final-cta__trust li::before {
      content: none !important;
    }
    .final-cta__trust svg {
      flex: 0 0 auto;
      color: var(--pe-orange);
    }

    .footer {
      position: relative;
      padding: 0;
      background: #120c2c;
      color: var(--pe-white);
      overflow: hidden;
      isolation: isolate;
    }

    .footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,150,0,0.08) 0%, transparent 34%),
        linear-gradient(to bottom, rgba(255,255,255,0.03), transparent 48%);
      pointer-events: none;
      z-index: 0;
    }

    .footer::after {
      content: "PURE ENERGY";
      position: absolute;
      left: 50%;
      bottom: -34px;
      transform: translateX(-50%);
      width: max-content;
      color: rgba(255,255,255,0.028);
      font-size: clamp(96px, 14vw, 230px);
      line-height: .78;
      font-weight: 800;
      letter-spacing: -.045em;
      pointer-events: none;
      z-index: 0;
    }

    .footer .container {
      position: relative;
      z-index: 1;
    }

    .footer-top {
      display: block;
      padding: 76px 0 42px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .footer-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--pe-orange);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .footer-kicker::before {
      content: "";
      width: 42px;
      height: 2px;
      border-radius: 999px;
      background: var(--pe-orange);
    }

    .footer-headline {
      margin: 0;
      max-width: 980px;
      color: var(--pe-white);
      font-size: clamp(42px, 5vw, 84px);
      line-height: .92;
      letter-spacing: -.04em;
      text-wrap: balance;
    }

    .footer-main {
      display: grid;
      grid-template-columns: minmax(320px, 1.15fr) minmax(190px, .62fr) minmax(190px, .62fr) minmax(300px, .9fr);
      gap: clamp(28px, 4vw, 68px);
      padding: 46px 0 48px;
      align-items: start;
    }

    .footer-logo {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 0;
      background: transparent;
      border-radius: 0;
      margin-bottom: 24px;
      box-shadow: none;
    }

    .footer-logo img {
      width: 156px;
      height: auto;
      display: block;
      border-radius: 12px;
      background: var(--pe-white);
      padding: 8px 10px;
    }

    .footer-brand p {
      margin: 0;
      color: rgba(255,255,255,0.72);
      font-size: 16px;
      line-height: 1.82;
      max-width: 520px;
    }

    .footer-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-top: 24px;
      color: rgba(255,255,255,0.78);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .footer-proof span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .footer-proof span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--pe-orange);
      flex: 0 0 auto;
    }

    .footer-col h3,
    .footer-contact-title {
      margin: 0 0 18px;
      color: var(--pe-white);
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      color: rgba(255,255,255,0.70);
      font-size: 15px;
      line-height: 1.45;
      transition: color .2s ease, transform .2s ease;
    }

    .footer-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -3px;
      height: 1px;
      background: var(--pe-orange);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .2s ease;
    }

    .footer-links a:hover {
      color: var(--pe-white);
      transform: translateX(3px);
    }

    .footer-links a:hover::after {
      transform: scaleX(1);
    }

    .footer-contact {
      display: grid;
      gap: 16px;
    }

    .footer-contact__item {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 12px;
      align-items: start;
      color: rgba(255,255,255,0.72);
      font-size: 14px;
      line-height: 1.58;
      background: transparent;
      border: 0;
      padding: 0;
      border-radius: 0;
      transition: color .2s ease, transform .2s ease;
    }

    a.footer-contact__item:hover {
      color: rgba(255,255,255,0.92);
      transform: translateX(3px);
    }

    .footer-contact__item strong {
      display: block;
      color: var(--pe-white);
      font-size: 14px;
      margin-bottom: 2px;
    }

    .footer-contact__icon {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 0;
      background: transparent;
      color: var(--pe-orange);
      border: 0;
      margin-top: 2px;
    }

    .footer-contact__icon svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 18px;
      padding: 24px 0 30px;
      border-top: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.56);
      font-size: 13px;
    }

    .footer-bottom__links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    .footer-bottom a {
      color: rgba(255,255,255,0.64);
      transition: color .2s ease;
    }

    .footer-bottom a:hover {
      color: var(--pe-orange);
    }

    .faq {
      display: grid;
      gap: 14px;
      margin-top: 36px;
    }
    .faq-item {
      border: 1px solid rgba(46, 32, 100, 0.08);
      border-radius: 18px;
      background: var(--pe-white);
      overflow: hidden;
      box-shadow: var(--pe-shadow);
    }
    .faq-item button {
      width: 100%;
      text-align: left;
      padding: 20px 22px;
      border: 0;
      background: transparent;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      color: var(--pe-purple);
      font-size: 17px;
      font-weight: 800;
      cursor: pointer;
    }
    .faq-item button span:last-child {
      font-size: 24px;
      line-height: 1;
      transition: transform .2s ease;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .24s ease;
    }
    .faq-answer p {
      margin: 0;
      padding: 0 22px 22px;
      color: var(--pe-text);
      font-size: 18px;
      line-height: 1.78;
    }
    .faq-item.active button span:last-child {
      transform: rotate(45deg);
    }


    .btn,
    .nav-cta .btn,
    .cta-card .btn,
    .cta-panel .btn,
    .footer .btn,
    .footer a.btn {
      border-radius: 18px;
    }

    @media (max-width: 1300px) {
      .container--wide {
        width: min(1280px, calc(100% - 32px));
      }

      .problem-grid {
        grid-template-columns: 1fr;
      }

      .o-firmie-points__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .offer-showcase {
        grid-template-columns: 1fr;
      }

      .offer-system {
        grid-template-columns: 1fr;
        padding: 34px 30px;
      }

      .usp-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .usp-card--hero,
      .usp-card--service {
        grid-column: span 2;
      }

      .usp-card--medium,
      .usp-card--narrow,
      .usp-card--purple {
        grid-column: span 1;
      }

      .offer-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 320px auto;
      }

      .final-cta {
        grid-template-columns: 1fr;
      }

      .final-cta__form {
        max-width: 620px;
      }

      .footer-top {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .footer-main {
        grid-template-columns: 1fr 1fr;
      }

      .footer-panel--brand,
      .footer-panel--contact {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 1180px) {
      .feature-split,
      .feature-split--reverse,
      .offer-panel {
        grid-template-columns: 1fr;
      }

      .about-immersive {
        min-height: 0;
        padding: 34px;
      }

      .about-immersive__gallery {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 28px;
      }

      .about-photo,
      .about-photo--1,
      .about-photo--2,
      .about-photo--3,
      .about-photo--4,
      .about-photo--5,
      .about-photo--6,
      .about-photo--7,
      .about-photo--8,
      .about-photo--9,
      .about-photo--10 {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        transform: none;
        animation: none;
      }

      .about-immersive__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .about-immersive__content {
        width: 100%;
      }

      .offer-panel {
        grid-template-rows: 300px auto;
        min-height: unset;
      }

      .offer-panel__content {
        grid-template-rows: auto 1fr;
      }

      .offer-panel__intro {
        grid-template-rows: auto auto;
      }

      .offer-panel__content h3 {
        min-height: unset;
        display: block;
        margin-bottom: 18px;
      }

      .feature-split__media {
        padding: 32px 32px 12px;
      }

      .feature-split__content {
        padding: 24px 32px 38px;
      }

      .offer-panel__content {
        padding: 30px 32px 34px;
      }

      .offer-panel__media {
        min-height: 300px;
      }

      .feature-art {
        width: min(100%, 380px);
      }
    }

@media (max-width: 1180px) {
      .oze-story__intro {
        margin-bottom: 24px;
      }
      .oze-story__headline {
        max-width: 14ch;
      }
      .oze-story__sticky {
        display: none;
      }
      .oze-story__markers {
        margin-top: 0;
        padding-top: 0;
      }
      .oze-story-marker {
        min-height: auto;
        padding: 0;
      }
      .oze-story__markers {
        display: grid;
        gap: 18px;
      }
      .oze-story-marker__card {
        width: 100%;
        max-height: none;
        padding: clamp(24px, 2.6vw, 38px);
        border-radius: 30px;
        background: transparent;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
      }
      .oze-story-marker__top {
        margin-bottom: 20px;
      }
      .oze-story-marker__title,
      .oze-story-marker__body {
        max-width: none;
      }
      .grid-2,
      .process-layout,
      .about-box,
      .cta-panel { grid-template-columns: 1fr; }
      .offer-grid,
      .references-grid,
      .usp-grid,
      .grid-3,
      .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-stage { min-height: 680px; }
      .hero-copy { min-height: 680px; padding: 92px 0 76px; }
      .o-firmie-hero__stage { min-height: 680px; }
      .o-firmie-hero__inner {
        width: min(var(--pe-container), calc(100% - 40px));
      }
      .wp-block-columns.o-firmie-band__layout {
        grid-template-columns: 1fr;
      }
      .o-firmie-construction .wp-block-columns.o-firmie-band__layout {
        grid-template-columns: 1fr;
      }
      .o-firmie-band__layout {
        gap: 28px;
      }
      .o-firmie-media img {
        min-height: 420px;
        aspect-ratio: 5 / 4;
      }
      .o-firmie-years {
        min-height: 560px;
      }
      .o-firmie-years__stage {
        min-height: 430px;
      }
      .o-firmie-years__stack {
        width: min(100%, 380px);
      }
      .process-intro { position: static; }
    }

    @media (max-width: 900px) {
      .section { padding: 84px 0; }
      .wp-block-group.is-style-pe-section,
      .wp-block-group.is-style-pe-section-soft,
      .wp-block-group.is-style-pe-section-warm,
      .wp-block-group.is-style-pe-section-dark {
        padding: 84px clamp(20px, 4vw, 48px);
      }
      ul.wp-block-list.is-style-pe-checklist,
      ul.is-style-pe-checklist {
        grid-template-columns: 1fr;
      }
      .nav-links,
      .nav-cta .phone-link,
      .nav-cta .btn { display: none; }
      .burger { display: inline-flex; }
      .nav-links {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 92px;
        z-index: 80;
        background: var(--pe-white);
        border: 1px solid rgba(46, 32, 100, 0.08);
        border-radius: 24px;
        box-shadow: var(--pe-shadow-lg);
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: .22s ease;
      }
      .menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .nav-links li { width: 100%; }
      .nav-links a {
        justify-content: space-between;
        padding: 0 16px;
        min-height: 50px;
      }
      .nav-item--dropdown {
        width: 100%;
      }
      .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        min-height: 50px;
        padding: 0 16px;
        border-radius: 16px;
      }
      .nav-item--dropdown .nav-dropdown,
      .nav-item--dropdown.is-open .nav-dropdown {
        position: static;
        width: auto;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 4px;
        padding: 8px;
        border-radius: 16px;
        background: var(--pe-soft);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
      }
      .nav-dropdown__item {
        min-height: 64px;
        background: var(--pe-white);
      }
      .offer-grid,
      .references-grid,
      .usp-grid,
      .grid-3,
      .grid-4,
      .sub-blocks,
      .footer-main { grid-template-columns: 1fr; }
      .footer { padding-top: 58px; }
      .hero-stage { min-height: 560px; background-position: center right; }
      .hero-copy { min-height: 560px; padding: 72px 0 56px; }
      .title--problem {
        font-size: clamp(36px, 11vw, 54px);
        line-height: 1.02;
      }
      .lead--problem {
        font-size: 18px;
        line-height: 1.72;
      }
      .problem-grid { grid-template-columns: 1fr; gap: 18px; }
      .problem-card { padding: 24px 22px 24px; border-radius: 24px; }
      .problem-card__icon svg { width: 44px; height: 44px; }
      .problem-card h3 { font-size: 30px; }
      .problem-card p { font-size: 17px; line-height: 1.72; }
      .o-firmie-points__grid { grid-template-columns: 1fr; gap: 18px; }
      .feature-split,
      .feature-split--reverse,
      .offer-panel { border-radius: 24px; }
      .o-firmie-hero__inner {
        width: min(var(--pe-container), calc(100% - 40px));
      }
      .o-firmie-band__head {
        margin-bottom: 24px;
      }
      .oze-story-stage {
        border-radius: 26px;
      }
      .oze-story-marker__card {
        border-radius: 26px;
      }
      .oze-story-stage__title,
      .oze-story-marker__title {
        font-size: clamp(30px, 6vw, 42px);
      }
      .oze-story-stage__summary,
      .oze-story-marker__body {
        font-size: 20px;
      }
      .o-firmie-band__head::after {
        width: 82px;
        margin-top: 20px;
      }
      .o-firmie-band__head .title {
        max-width: none;
      }
      .o-firmie-prose {
        max-width: none;
      }
      .o-firmie-media {
        border-radius: 24px;
      }
      .o-firmie-media img {
        min-height: 0;
      }
      .o-firmie-years {
        min-height: 520px;
        padding: 24px 20px;
        border-radius: 24px;
      }
      .o-firmie-years__stage {
        min-height: 380px;
      }
      .o-firmie-years__stack {
        width: min(100%, 340px);
      }
      .o-firmie-years__year {
        font-size: clamp(92px, 23vw, 136px);
      }
      .o-firmie-years__footer {
        gap: 10px;
        padding: 12px 14px;
        font-size: 12px;
      }
      .o-firmie-rule-list {
        margin-top: 24px !important;
      }
      .feature-split__grid,
      .offer-list-grid,
      .offer-benefits,
      .offer-blocks,
      .offer-checklist { grid-template-columns: 1fr; }
      .feature-split__content { padding: 22px 22px 28px; }
      .feature-split__media { padding: 28px 20px 8px; }
      .offer-panel__content { padding: 24px 22px 28px; gap: 24px; grid-template-rows: auto auto; }
      .offer-panel__intro { min-height: unset; }
      .offer-panel__content h3 { min-height: unset; display: block; }
      .offer-panel__media { min-height: 220px; }
      .offer-panel { grid-template-rows: 220px auto; }
      .offer-system { padding: 26px 22px; border-radius: 24px; }
      .offer-system__eyebrow { margin-bottom: 14px; }
      .offer-system__intro h3 { font-size: 30px; }
      .offer-system__intro p { font-size: 17px; line-height: 1.72; }
      .usp-bento { grid-template-columns: 1fr; }
      .usp-card,
      .usp-card--hero,
      .usp-card--medium,
      .usp-card--narrow,
      .usp-card--purple,
      .usp-card--service { grid-column: span 1; }
      .usp-card { padding: 24px 22px; border-radius: 24px; }
      .usp-card__icon svg { width: 54px; height: 54px; }
      .usp-card h3,
      .usp-card--hero h3,
      .usp-card--service h3 { font-size: 28px; max-width: none; }
      .usp-card p,
      .usp-card--hero p,
      .usp-card--service p { font-size: 17px; line-height: 1.72; max-width: none; }
      .about-immersive { padding: 22px; }
      .about-immersive__gallery { grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
      .about-photo { border-radius: 22px; }
      .about-immersive__content .title { font-size: 32px; max-width: none; }
      .about-immersive__copy p,
      .about-immersive__copy .about-immersive__paragraph { font-size: 22px; line-height: 1.6; }
      .about-immersive__facts { grid-template-columns: 1fr; gap: 10px; }
      .about-immersive__fact { min-height: 104px; padding: 16px; font-size: 14px; }
      .about-immersive__fact svg { width: 32px; height: 32px; margin-bottom: 14px; }
      .offer-benefit,
      .offer-block,
      .offer-checklist li { min-height: auto; }
      .offer-benefit strong,
      .offer-block strong { min-height: auto; }
      .feature-art { width: min(100%, 290px); }
      .step { grid-template-columns: 1fr; }
      .step__number { width: 68px; height: 68px; border-radius: 18px; font-size: 24px; }
      .about-box,
      .cta-panel { padding: 24px; }
      .cta-panel { gap: 24px; }
    }

    @media (max-width: 640px) {
      .container,
      .container--wide { width: min(var(--pe-container), calc(100% - 24px)); }
      .wp-block-group.is-style-pe-section,
      .wp-block-group.is-style-pe-section-soft,
      .wp-block-group.is-style-pe-section-warm,
      .wp-block-group.is-style-pe-section-dark {
        padding: 68px 16px;
      }
      .wp-block-button.is-style-pe-primary,
      .wp-block-button.is-style-pe-secondary,
      .wp-block-button.is-style-pe-ghost,
      .wp-block-button.is-style-pe-primary .wp-block-button__link,
      .wp-block-button.is-style-pe-secondary .wp-block-button__link,
      .wp-block-button.is-style-pe-ghost .wp-block-button__link {
        width: 100%;
      }
      .hero { padding-top: 22px; }
      .o-firmie-hero__stage { min-height: auto; }
      .o-firmie-hero__inner {
        width: min(var(--pe-container), calc(100% - 24px));
      }
      .oze-story__headline {
        max-width: none;
        font-size: clamp(30px, 9vw, 40px);
      }
      .oze-story-marker__card {
        padding: 22px 18px;
        border-radius: 24px;
      }
      .oze-story-marker__top {
        margin-bottom: 18px;
      }
      .oze-story-marker__body {
        margin-top: 18px;
        font-size: 18px;
      }
      .o-firmie-band__layout {
        gap: 22px;
      }
      .o-firmie-band__head {
        margin-bottom: 20px;
      }
      .o-firmie-band__head::after {
        width: 72px;
        height: 4px;
        margin-top: 18px;
      }
      .o-firmie-media {
        border-radius: 22px;
      }
      .o-firmie-media img {
        aspect-ratio: 4 / 3;
      }
      .o-firmie-years {
        min-height: 460px;
        padding: 20px 16px;
        border-radius: 22px;
      }
      .o-firmie-years__stage {
        min-height: 320px;
      }
      .o-firmie-years__stack {
        width: min(100%, 292px);
      }
      .o-firmie-years__backlight {
        width: 92%;
      }
      .o-firmie-years__desk {
        width: 98%;
      }
      .o-firmie-years__body {
        padding: 24px;
      }
      .o-firmie-years__year {
        font-size: clamp(86px, 26vw, 122px);
      }
      .o-firmie-years__caption {
        margin-top: 18px;
      }
      .o-firmie-years__lines {
        left: 24px;
        right: 24px;
        bottom: 24px;
      }
      .o-firmie-years__footer {
        padding: 10px 12px;
      }
      .o-firmie-years__progress {
        height: 5px;
      }
      .o-firmie-closing {
        padding-top: 24px;
      }
      .o-firmie-closing::before {
        width: 84px;
      }
      .about-box,
      .cta-panel { border-radius: 24px; }
      .hero-marquee::before,
      .hero-marquee::after { width: 44px; }
      .hero-marquee__track { animation-duration: 26s; }
      .hero-marquee__item {
        min-height: 56px;
        padding: 0 22px;
        font-size: 13px;
      }
      .reference-card__body,
      .card,
      .usp-card,
      .step,
      .process-intro,
      .cta-card { padding: 22px; }
      .metric { padding: 12px; }
      .metric strong { font-size: 15px; }
    }

    /* RESPONSIVE QA PASS */
    html,
    body {
      max-width: 100%;
      overflow-x: visible;
      -webkit-text-size-adjust: 100%;
    }

    .page-wrapper {
      max-width: 100%;
      overflow-x: visible;
    }

    h1, h2, h3, h4, p, li, a, span, strong {
      overflow-wrap: break-word;
    }

    input, button, .btn {
      min-width: 0;
    }

    /* Wider desktop and smaller laptop refinement */
    @media (max-width: 1500px) and (min-width: 1181px) {
      .about-immersive {
        min-height: 940px;
      }

      .about-immersive__content {
        width: min(720px, 100%);
      }

      .about-photo {
        width: clamp(160px, 11vw, 220px);
      }

      .about-photo--2 { left: 84px; }
      .about-photo--5 { right: 84px; }
      .about-photo--9 { left: 28px; }
      .about-photo--10 { right: 28px; }
    }

    @media (max-width: 1300px) and (min-width: 1181px) {
      .about-immersive__content {
        width: min(680px, 100%);
      }

      .about-photo {
        width: 158px;
      }

      .about-photo--1 { left: 24px; }
      .about-photo--2 { left: 58px; }
      .about-photo--3 { left: 26px; }
      .about-photo--7 { left: 18px; }
      .about-photo--9 { left: 18px; }

      .about-photo--4 { right: 24px; }
      .about-photo--5 { right: 58px; }
      .about-photo--6 { right: 26px; }
      .about-photo--8 { right: 18px; }
      .about-photo--10 { right: 18px; }
    }

    @media (max-width: 1180px) {
      .section--about-immersive .container--wide {
        width: 100%;
      }

      .about-immersive {
        min-height: 0;
      }

      .about-photo img {
        aspect-ratio: 16 / 10;
      }

      .references-track {
        gap: 22px;
      }

      .reference-card {
        border-radius: 28px;
      }

      .footer-main {
        gap: 18px;
      }
    }

    @media (max-width: 900px) {
      .nav {
        min-height: 76px;
        gap: 12px;
      }

      .brand {
        min-width: 0;
      }

      .brand img {
        width: 136px;
      }

      .nav-links {
        display: flex;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
      }

      .hero-stage {
        min-height: 0;
        background:
          linear-gradient(90deg, rgba(46, 32, 100, 0.94) 0%, rgba(46, 32, 100, 0.82) 58%, rgba(46, 32, 100, 0.55) 100%),
          linear-gradient(0deg, rgba(10, 12, 22, 0.32), rgba(10, 12, 22, 0.32)),
          url("../img/biuro.webp") center/cover no-repeat;
      }

      .service-hero--bess .hero-stage {
        background:
          linear-gradient(90deg, rgba(46, 32, 100, 0.96) 0%, rgba(46, 32, 100, 0.86) 58%, rgba(46, 32, 100, 0.58) 100%),
          linear-gradient(0deg, rgba(10, 12, 22, 0.34), rgba(10, 12, 22, 0.34)),
          url("../img/magazyny-energii-dla-firm.webp") 62% center/cover no-repeat;
      }

      .service-hero--modernizacja .hero-stage {
        background:
          linear-gradient(90deg, rgba(46, 32, 100, 0.96) 0%, rgba(46, 32, 100, 0.86) 58%, rgba(46, 32, 100, 0.58) 100%),
          linear-gradient(0deg, rgba(10, 12, 22, 0.32), rgba(10, 12, 22, 0.32)),
          url("../img/pure-energy-konstrukcje.webp") center/cover no-repeat;
      }

      .hero-copy {
        width: 100%;
      }

      .hero-title {
        display: block;
        width: 100%;
        max-width: 100%;
      }

      .hero-title__line {
        display: block;
        width: 100%;
        max-width: 100%;
      }

      .hero-title__line > span {
        display: block;
        white-space: normal;
      }

      .hero-subtitle {
        max-width: 100%;
      }

      .btn-group {
        width: 100%;
      }

      .btn-group .btn {
        flex: 1 1 220px;
      }

      .section--about-immersive {
        padding: 0;
      }

      .section--about-immersive .container--wide {
        width: 100%;
      }

      .about-immersive {
        padding: 34px 20px 52px;
      }

      .about-immersive__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .about-immersive__content {
        width: min(720px, 100%);
      }

      .section--final-cta {
        padding: 82px 0;
      }

      .final-cta__form {
        max-width: 100%;
      }

      .footer {
        padding-top: 0;
      }

      .footer-top__cta {
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(var(--pe-container), calc(100% - 24px));
      }

      .section--about-immersive .container--wide {
        width: 100%;
      }

      .section {
        padding: 68px 0;
      }

      .section--about-immersive {
        padding: 0;
      }

      .section--final-cta {
        padding: 48px 0 0;
      }

      .display {
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1.02;
      }

      .title {
        font-size: clamp(30px, 9vw, 42px);
      }

      .lead {
        font-size: 17px;
        line-height: 1.72;
      }

      p,
      .card p,
      .usp-card p,
      .step p,
      .reference-card p,
      .about-copy p,
      .faq-answer p,
      .feature-split__lead,
      .offer-panel__lead {
        font-size: 17px;
        line-height: 1.72;
      }

      .hero-copy {
        min-height: auto;
        padding: 66px 0 52px;
      }

      .hero-title,
      .hero-title__line,
      .hero-title__line > span {
        width: 100%;
      }

      .hero-title__line > span {
        white-space: normal;
      }

      .o-firmie-hero .hero-title {
        font-size: clamp(29px, 8vw, 40px);
      }

      .o-firmie-hero .hero-title__line--subtle > span {
        font-size: .76em;
      }

      .hero-subtitle {
        font-size: 22px;
        line-height: 1.18;
      }

      .btn-group {
        gap: 10px;
      }

      .btn-group .btn,
      .final-cta__form .btn,
      .footer-top__cta {
        width: 100%;
        flex-basis: 100%;
      }

      .btn {
        min-height: 54px;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.2;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
      }

      .offer-panel__media,
      .reference-card__visual img {
        min-height: 220px;
        height: 220px;
      }

      .reference-card h3 {
        font-size: 28px;
      }

      .reference-card__stage strong {
        font-size: 26px;
      }

      .about-immersive {
        padding: 26px 16px 44px;
      }

      .about-immersive__gallery {
        grid-template-columns: 1fr;
      }

      .about-photo:nth-child(n+5) {
        display: none;
      }

      .about-immersive__content .title {
        font-size: 32px;
      }

      .about-immersive__facts {
        grid-template-columns: 1fr;
      }

      .final-cta__copy .title {
        font-size: 38px;
      }

      .final-cta__form input {
        height: 56px;
      }

      .footer-headline {
        font-size: 38px;
      }

      .footer-panel {
        padding: 22px;
        border-radius: 24px;
      }

      .footer-proof {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 390px) {
      .container {
        width: min(var(--pe-container), calc(100% - 20px));
      }

      .nav-links {
        left: 10px;
        right: 10px;
        top: 84px;
      }

      .brand img {
        width: 124px;
      }

      .display {
        font-size: 30px;
      }

      .o-firmie-hero .hero-title {
        font-size: 28px;
      }

      .o-firmie-hero .hero-title__line--subtle > span {
        font-size: .72em;
      }

      .hero-subtitle {
        font-size: 20px;
      }

      .problem-card h3,
      .offer-system__intro h3 {
        font-size: 28px;
      }

      .offer-panel__content h3 {
        font-size: 29px;
      }

      .footer-headline,
      .final-cta__copy .title {
        font-size: 34px;
      }
    }


    /* FOOTER MOBILE CENTERING PATCH */
    @media (max-width: 900px) {
      .footer-top {
        text-align: center;
      }

      .footer-headline {
        margin-inline: auto;
      }

      .footer-main {
        text-align: center;
        justify-items: center;
      }

      .footer-brand,
      .footer-col {
        width: 100%;
        max-width: 520px;
      }

      .footer-logo {
        margin-left: auto;
        margin-right: auto;
      }

      .footer-brand p {
        margin-left: auto;
        margin-right: auto;
      }

      .footer-links {
        justify-items: center;
      }

      .footer-links a {
        justify-content: center;
      }

      .footer-contact {
        justify-items: center;
      }

      .footer-contact__item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 8px;
      }

      .footer-contact__icon {
        margin: 0 auto 2px;
      }

      .footer-bottom {
        justify-content: center;
        text-align: center;
      }

      .footer-bottom__links {
        justify-content: center;
      }
    }

    @media (max-width: 640px) {
      .footer-main {
        gap: 34px;
      }

      .footer-col h3,
      .footer-contact-title {
        margin-bottom: 14px;
      }
    }






    @media (max-width: 1180px) {
      .references-scroll {
        height: auto !important;
        min-height: 0;
        margin-top: 28px;
        overflow: visible;
        contain: none;
      }

      .references-sticky {
        position: static;
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin-left: 0;
        padding-inline: 0;
        overflow: visible;
        display: block;
      }

      .references-sticky::before,
      .references-sticky::after,
      .references-sticky__blur,
      .references-progress {
        display: none;
      }

      .references-track {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 0;
        transform: none !important;
      }

      .reference-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        grid-template-columns: 1fr;
      }

      .reference-card__visual img {
        min-height: 320px;
        height: 320px;
      }

      .reference-card__quote-panel {
        padding: 32px 34px 36px;
        border-left: 0;
        border-top: 1px solid rgba(46, 32, 100, 0.08);
      }

      /* Oferta-proof variant - override desktop min-width/min-height that
         would otherwise cause horizontal overflow at ≤1180px. */
      .reference-card.oferta-proof-card {
        min-width: 0;
        min-height: 0;
        grid-template-columns: 1fr;
      }
      .oferta-proof-card .reference-card__body {
        padding: 32px 30px;
        gap: 18px;
      }
      .oferta-proof-card .reference-story {
        grid-template-columns: 90px 1fr;
      }
      .oferta-proof-card .reference-card__visual img {
        min-height: 280px;
        height: 280px;
      }
    }


    /* ============================================================
       OFERTA PAGE - service tiles, scenarios, references slider
       Composes with .hero, .final-cta, .references-scroll,
       is-style-pe-section/card/title/lead/button.
       Only additive layout tweaks live here.
       ============================================================ */

    /* Gutenberg's "constrained" layout centers each direct child with auto
       margins, so is-style-pe-title-large (max 1040px) and is-style-pe-content-prose
       (max 820px) end up at different x positions inside the 1240px grid column.
       Force every block to share the same left edge - same fix used for
       .realizacje-system-section. */
    .oferta-intro__left > .is-style-pe-title-large,
    .oferta-intro > .is-style-pe-content-prose,
    .oferta-tiles > .is-style-pe-title,
    .oferta-tiles > .is-style-pe-lead,
    .oferta-scenarios > .is-style-pe-title,
    .oferta-scenarios > .is-style-pe-lead {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .oferta-intro > .is-style-pe-content-prose {
        max-width: none !important;
    }
    .oferta-intro .is-style-pe-content-prose > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    /* Service subpage intro - single 1240px column with title-large +
       content-prose. Same left-edge alignment problem as .oferta-intro:
       Gutenberg's constrained layout centers each child with auto margins,
       so title-large (max 1040px) and prose (max 820px) end at different X.
       Force one shared left edge. */
    .service-intro > .is-style-pe-title-large,
    .service-intro > .is-style-pe-content-prose {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .service-intro > .is-style-pe-content-prose,
    .service-intro .is-style-pe-content-prose > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    /* Audience section in service subpages: align heading + lead to the
       grid's left edge (Gutenberg's constrained layout would otherwise
       center each child with auto margins). */
    .service-audience > .is-style-pe-title,
    .service-audience > .is-style-pe-lead,
    .service-references > .is-style-pe-title,
    .service-references > .is-style-pe-lead,
    .service-models > .is-style-pe-title-large,
    .service-steps > .is-style-pe-title,
    .service-steps > .is-style-pe-lead {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .service-audience > .is-style-pe-lead,
    .service-models > .is-style-pe-title-large {
        margin-bottom: 56px !important;
    }
    .service-references > .is-style-pe-title {
        margin-bottom: 24px !important;
    }
    .service-references > .is-style-pe-lead {
        margin-bottom: 48px !important;
    }
    .service-steps > .is-style-pe-title {
        margin-bottom: 24px !important;
    }
    .service-steps > .is-style-pe-lead {
        margin-bottom: 56px !important;
    }
    .service-steps .wp-block-columns .wp-block-column {
        margin-bottom: 56px !important;
    }
    /* Model cards on farmy-fotowoltaiczne: enlarge body copy to lead size. */
    .service-models .oferta-tile > p {
        font-size: clamp(19px, 1.55vw, 23px);
        line-height: 1.78;
    }

    /* Bento photo gallery - asymmetric grid of native wp:image blocks.
       Tile 1 (2x2) anchors the layout; tiles 2-5 fill the remaining
       4-col × 2-row grid as 1x1 cells. Editable in Gutenberg - each
       tile is a native image block, CSS handles layout via nth-child. */
    .bento-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
        gap: 16px;
        margin: 0 !important;
        padding: 0 !important;
    }
    .bento-gallery > figure,
    .bento-gallery > .wp-block-image {
        margin: 0 !important;
        overflow: hidden;
        border-radius: 14px;
        background: var(--pe-soft-2);
        position: relative;
    }
    .bento-gallery > figure img,
    .bento-gallery > .wp-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .bento-gallery > figure:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
    .service-intro > .modernization-gallery {
        margin-top: 52px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        position: relative;
        z-index: 1;
    }
    .bento-section {
        padding-top: 0 !important;
        padding-bottom: 108px !important;
    }
    /* Pull gallery closer to the model cards section above. */
    .service-models {
        padding-bottom: 52px !important;
    }
    @media (max-width: 900px) {
        .bento-gallery {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 180px;
        }
        .bento-gallery > figure:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }
    @media (max-width: 640px) {
        .bento-gallery {
            grid-template-columns: 1fr;
            grid-auto-rows: 220px;
        }
        .bento-gallery > figure:nth-child(1) {
            grid-column: span 1;
            grid-row: span 1;
        }
    }

    /* "Parameter" bento - 2 tiles in row 1, 3 tiles in row 2. Used in
       .service-scope on /magazyny-energii-dla-firm/ to break a flat <ul>
       of analysis inputs into a scannable grid. Each tile = icon at the
       top-left + one paragraph of text below. */
    .param-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
        margin-top: 44px !important;
        margin-bottom: 64px !important;
    }
    .param-grid > .param-cell:nth-child(-n+2) { grid-column: span 3; }
    .param-grid > .param-cell:nth-child(n+3)  { grid-column: span 2; }

    .param-cell {
        background: #ffffff;
        border-radius: 14px;
        padding: 28px;
        box-shadow: 0 6px 24px rgba(46, 32, 100, 0.06);
    }
    .param-cell > .param-icon {
        width: 44px;
        height: 44px;
        margin: 0 0 16px 0;
        color: var(--pe-orange);
    }
    .param-cell > .param-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .param-cell > p {
        margin: 0;
        color: var(--pe-ink);
        font-size: clamp(19px, 1.55vw, 23px);
        line-height: 1.78;
    }
    /* Lead-sized labels wrapping the param-grid ("Parametry…", "Efekt:…").
       Mirrors is-style-pe-lead typography without that class's top margin
       or muted color, so bold strong tags keep their visual weight. */
    .param-lead {
        font-size: clamp(19px, 1.55vw, 23px);
        line-height: 1.78;
    }

    @media (max-width: 900px) {
        .param-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .param-grid > .param-cell:nth-child(-n+2),
        .param-grid > .param-cell:nth-child(n+3) { grid-column: span 1; }
    }
    @media (max-width: 640px) {
        .param-grid { grid-template-columns: 1fr; }
    }

    /* 4-item variant - flat 2×2 grid (no row-size variation). Used in
       .service-safety on /magazyny-energii-dla-firm/. */
    .param-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .param-grid--four > .param-cell:nth-child(n) {
        grid-column: auto;
    }
    /* When the grid is the last child of its section (no "Efekt:" paragraph
       below), drop the extra bottom margin so the section doesn't breathe
       too much at its bottom edge. */
    .param-grid:last-child {
        margin-bottom: 0 !important;
    }

    /* Decorative background chart in .service-intro - simplified energy
       consumption curves. Centered at 2/3 of viewport width, cropped from
       bottom, fades in slowly. Sits behind prose (z-index 0). */
    .service-intro {
        position: relative;
    }

    .service-intro > .is-style-pe-title-large,
    .service-intro > .is-style-pe-content-prose,
    .service-intro .is-style-pe-content-prose > * {
        position: relative;
        z-index: 1;
    }

    .service-intro__chart {
        position: absolute;
        left: 0;
        bottom: -160px;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        height: auto;
        opacity: 0;
        animation: peServiceIntroChartIn 2s cubic-bezier(.22,.61,.36,1) 0.3s forwards;
        pointer-events: none;
        z-index: 0;
    }

    .service-intro__chart svg {
        width: 100%;
        height: auto;
        display: block;
    }

    @keyframes peServiceIntroChartIn {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 0.7; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .service-intro__chart {
            opacity: 0.7;
            animation: none;
        }
    }

    @media (max-width: 900px) {
        .service-intro__chart {
            bottom: -100px;
            opacity: 0.55;
            animation: none;
        }
    }

    /* "Efekt:" callout inside service-intro prose - bold, lifted onto its
       own line. No color or accent treatments - keeps it visually calm. */
    .service-intro__effect {
        margin-top: 8px !important;
        font-weight: 700;
    }

    /* Three side-by-side simplified consumption-profile charts under the
       service-intro prose. White cards on the warm cream section bg.
       Each card holds an SVG curve, an hour tick row, and a two-line
       caption. Sits between two prose blocks as a sibling - spans the
       full 1240px section grid column. Collapses to 1 col under 900px.

       max-width/margin reset is mandatory: Gutenberg's `.is-layout-constrained > *`
       caps direct section children at contentSize (820px from theme.json)
       and centers them. Without this override, charts render at 820px
       instead of the section's 1240px column. */
    .service-profiles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        margin-top: 8px;
        margin-bottom: 8px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        position: relative;
        z-index: 1;
    }
    /* Prose block immediately before charts: tighten its bottom margin
       (default is 36px) so charts sit closer to the lead-in paragraph. */
    .is-style-pe-content-prose:has(+ .service-profiles) {
        margin-bottom: 16px !important;
    }
    /* Prose block immediately after charts: tighten its top margin
       (default is 52px) so the follow-up paragraph isn't pushed too far. */
    .service-profiles + .is-style-pe-content-prose {
        margin-top: 32px !important;
    }
    /* Two-chart variant (e.g. PV production: south vs east-west). The
       base grid is 3 cols - this widens to 2 cols so each chart breathes. */
    .service-profiles--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* When two chart groups stack with no prose between them, give the
       second group visible separation (default 8+8=16px is too tight for
       two distinct chart families). */
    .service-profiles + .service-profiles {
        margin-top: 40px !important;
    }
    .service-profiles__chart {
        margin: 0;
        background: var(--pe-white);
        border-radius: 20px;
        padding: 22px 20px 20px;
        border: 1px solid var(--pe-line);
        box-shadow: 0 12px 30px rgba(27, 22, 45, 0.05);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .service-profiles__svg {
        width: 100%;
        aspect-ratio: 320 / 140;
        line-height: 0;
    }
    .service-profiles__svg svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }
    .service-profiles__hours {
        display: flex;
        justify-content: space-between;
        padding: 0 4px;
        margin-top: -4px;
        font-size: 11px;
        font-weight: 700;
        color: rgba(46, 32, 100, 0.5);
        letter-spacing: .04em;
        font-variant-numeric: tabular-nums;
    }
    .service-profiles__caption {
        margin: 0;
        padding-top: 14px;
        border-top: 1px solid var(--pe-line);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .service-profiles__caption strong {
        font-family: var(--pe-font-display);
        font-size: 16px;
        font-weight: 700;
        color: var(--pe-purple);
        letter-spacing: .01em;
    }
    .service-profiles__caption span {
        font-size: 13px;
        color: var(--pe-text);
        line-height: 1.5;
    }
    @media (max-width: 900px) {
        .service-profiles,
        .service-profiles--two { grid-template-columns: 1fr; }
    }

    /* Service subpage "scope" section - title + lead + 5 oferta-tiles.
       Same left-edge alignment rule as .service-intro, plus extra
       breathing room under the lead before the tile grid starts. */
    .service-scope > .is-style-pe-title,
    .service-scope > .is-style-pe-lead {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
    .service-scope > .is-style-pe-lead {
        margin-bottom: 48px !important;
    }
    .service-scope > p,
    .service-scope > .is-style-pe-checklist {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important;
    }
    /* Safety section on magazyny-energii-dla-firm: align heading + lead to
       the grid's left edge, like other service-* sections. */
    .service-safety__copy > .is-style-pe-title,
    .service-safety__copy > .is-style-pe-lead {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important;
    }
    .service-safety__copy > .is-style-pe-lead {
        margin-bottom: 0 !important;
    }
    .service-safety > .is-style-pe-checklist {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .service-safety > p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .service-safety__media {
        position: relative;
        height: clamp(460px, 32vw, 560px);
        min-height: 0;
        margin: 0;
        overflow: hidden;
        border-radius: 26px;
        background: var(--pe-purple);
        box-shadow: var(--pe-shadow);
    }

    .service-safety__media img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center top;
    }

    .service-safety__intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
        gap: 64px;
        width: 100%;
        align-items: start;
    }

    .service-safety__copy {
        min-width: 0;
    }

    @media (min-width: 901px) {
        .service-safety > .param-grid {
            margin-top: 64px !important;
        }
    }

    @media (max-width: 900px) {
        .service-safety__intro {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .service-safety__media {
            height: auto;
            min-height: 0;
            margin-top: 32px;
        }

        .service-safety__media img {
            height: clamp(360px, 70vw, 520px);
            min-height: 0;
        }
    }
    /* Gap between the two .wp-block-columns rows (3-tile + 2-tile).
       Inline blockGap only applies inside each row, not between them. */
    .service-scope .wp-block-columns + .wp-block-columns {
        margin-top: 40px !important;
    }

    /* Service subpage "benefits" - 4-card grid placed directly under the
       hero on the service pages. White cards on a white section
       background; orange eyebrow + icon provide the accent. Mirrors the
       .realizacje-system-card structure (eyebrow + icon + title + text)
       but adds an uppercase label above the icon and uses a 4-col grid
       that collapses to 2-col then 1-col at the project's standard
       breakpoints (1180 / 640). */
    .service-benefits {
        padding-top: clamp(72px, 7vw, 96px) !important;
        padding-bottom: clamp(64px, 6vw, 88px) !important;
    }
    .service-benefits__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        width: 100%;
    }
    .service-benefit-card {
        position: relative;
        background: var(--pe-white);
        border-radius: 24px;
        padding: 32px 26px 30px;
        border: 1px solid var(--pe-line);
        box-shadow: 0 12px 30px rgba(27, 22, 45, 0.06);
        display: flex;
        flex-direction: column;
        gap: 14px;
        overflow: hidden;
        isolation: isolate;
        transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
    }
    /* Soft orange blob in the top-right corner - bleeds outward on hover
       to wash the card with a warm tint. Z-indexed behind the content. */
    .service-benefit-card::after {
        content: "";
        position: absolute;
        right: -42px;
        top: -42px;
        width: 124px;
        height: 124px;
        border-radius: 999px;
        background: rgba(255, 150, 0, 0.14);
        z-index: 0;
        transform: scale(1);
        transform-origin: top right;
        transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
        pointer-events: none;
    }
    .service-benefit-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 60px rgba(46, 32, 100, 0.12);
        border-color: color-mix(in srgb, var(--pe-orange) 26%, rgba(46, 32, 100, 0.08));
    }
    .service-benefit-card:hover::after {
        transform: scale(9);
        opacity: 1;
    }
    .service-benefit-card__eyebrow,
    .service-benefit-card__icon,
    .service-benefit-card__title,
    .service-benefit-card__text {
        position: relative;
        z-index: 1;
    }
    .service-benefit-card__eyebrow {
        display: inline-block;
        margin: 0;
        font-family: var(--pe-font-display);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--pe-orange);
        line-height: 1.4;
    }
    .service-benefit-card__icon {
        display: block;
        color: var(--pe-purple);
        line-height: 0;
        transition: transform .32s ease, color .32s ease;
    }
    .service-benefit-card:hover .service-benefit-card__icon {
        transform: translateY(-3px) scale(1.06);
        color: var(--pe-orange);
    }
    .service-benefit-card__icon svg {
        display: block;
        width: 52px;
        height: 52px;
        stroke: currentColor;
    }
    .service-benefit-card__title {
        margin: 0;
        font-family: var(--pe-font-display);
        font-size: clamp(20px, 1.5vw, 24px);
        font-weight: 700;
        line-height: 1.18;
        color: var(--pe-purple);
        text-wrap: balance;
    }
    .service-benefit-card__text {
        margin: 0;
        font-size: 15.5px;
        line-height: 1.7;
        color: var(--pe-text);
    }
    @media (max-width: 1180px) {
        .service-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
        .service-benefits__grid { grid-template-columns: 1fr; }
    }

    /* Contextual icons inside oferta-tile - large SVG above the heading.
       Mirrors the .service-stats__icon convention (no background chip,
       plain orange glyph). Also reusable on other service subpages. */
    .oferta-tile__icon {
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--pe-orange);
        margin: 0 0 18px !important;
        line-height: 0;
    }
    .oferta-tile__icon svg {
        width: 100%;
        height: 100%;
        stroke: currentColor;
    }

    /* Large translucent ordinal number in the bottom-right corner of each
       oferta-tile - bleeds past the bottom edge (clipped by the card's
       overflow: hidden). Sits behind the content via z-index: 0.
       !important overrides the generic `.oferta-tile > * { position: relative }`
       reset that would otherwise keep this in flex flow. */
    .oferta-tile__index {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        right: 18px;
        bottom: -34px;
        font-family: var(--pe-font-display);
        font-size: clamp(96px, 9vw, 140px);
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.04em;
        color: var(--pe-purple);
        opacity: 0.07;
        pointer-events: none;
        user-select: none;
        z-index: 0 !important;
    }

    /* Two-column "Dlaczego..." layout: heading on the LEFT half, prose
       on the RIGHT half. Base .is-style-pe-section-warm is a single
       1240px centered column; override to two equal tracks (596 + 48 gap
       + 596 = 1240) at >=900px. Below 900px falls back to the single
       column stack. align-items: start keeps both columns top-aligned. */
    @media (min-width: 900px) {
        .oferta-intro {
            grid-template-columns: minmax(0, 596px) minmax(0, 596px) !important;
            column-gap: 48px;
            align-items: start;
        }
        .oferta-intro__left > .is-style-pe-title-large {
            max-width: none !important;
            font-size: clamp(34px, 3.4vw, 52px);
        }
        .oferta-intro > .is-style-pe-content-prose {
            margin-top: 0 !important;
        }
    }
    @media (min-width: 1181px) {
        .oferta-intro {
            column-gap: 64px;
            grid-template-columns: minmax(0, 588px) minmax(0, 588px) !important;
        }
    }

    /* Left column wrapper inside .oferta-intro - holds the heading and the
       energy-flow SVG so the diagram sits directly under the heading in the
       left half of the section (prose stays in the right half). Flex column
       stacks the two elements; gap controls breathing room between them. */
    .oferta-intro__left {
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    /* Energy-flow diagram - Sun → PV → Battery → Factory chain rendered as
       a single SVG inside the left column of .oferta-intro. Cables use
       stroke-dasharray + animated stroke-dashoffset to visualize current
       flowing along the chain. Honors prefers-reduced-motion. */
    .oferta-energy-flow {
        width: 100%;
        max-width: 460px;
    }
    .oferta-energy-flow svg {
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;
    }
    .pe-flow-cable {
        fill: none;
        stroke: var(--pe-orange);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 10 8;
        animation: pe-flow-dash 1s linear infinite;
    }
    @keyframes pe-flow-dash {
        to { stroke-dashoffset: -18; }
    }
    .pe-flow-icon {
        fill: var(--pe-white);
        stroke: var(--pe-purple);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .pe-flow-icon--sun circle {
        fill: var(--pe-orange);
        stroke: var(--pe-orange-dark);
    }
    .pe-flow-icon--sun line {
        stroke: var(--pe-orange-dark);
        stroke-width: 3;
    }
    .pe-flow-icon--pv rect {
        fill: var(--pe-soft);
    }
    .pe-flow-icon--battery rect {
        fill: var(--pe-soft);
    }
    .pe-flow-icon--factory path {
        fill: var(--pe-soft);
    }
    @media (prefers-reduced-motion: reduce) {
        .pe-flow-cable { animation: none; }
    }

    /* Tile media - image strip across the top of each service card.
       Negative margins bleed the image to the card's edges; the rounded
       top corners mirror the card's border-radius.
       Selector specificity (.oferta-tile > .oferta-tile__media) must beat
       the general `.oferta-tile > * { margin: 0 !important }` reset below,
       which would otherwise zero these negative margins. */
    .oferta-tile > .oferta-tile__media {
        margin: -32px -30px 4px !important;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--pe-soft);
    }
    .oferta-tile > .oferta-tile__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .oferta-tile__media-link {
        display: block;
        width: 100%;
        height: 100%;
    }
    .oferta-tile h3 a {
        color: inherit;
        text-decoration: none;
    }
    .oferta-tile {
        overflow: hidden;
    }

    .oferta-tiles .wp-block-columns,
    .oferta-scenarios .wp-block-columns {
        margin-top: 56px !important;
    }

    /* Keep the homepage tile rows visually separated after the sixth card
       is moved into its own row. */
    .oferta-tiles--homepage > .container > .wp-block-columns {
        column-gap: 28px;
    }

    .oferta-tiles--homepage > .container > .wp-block-columns + .wp-block-columns {
        margin-top: 28px !important;
    }

    /* The construction tile is a full-width, shorter banner on the
       homepage, matching its broader content role. */
    @media (min-width: 901px) and (hover: hover) {
        .oferta-tiles--homepage > .container > .wp-block-columns:last-child {
            grid-template-columns: minmax(0, 1fr);
        }

        .oferta-tiles--homepage > .container > .wp-block-columns:last-child .oferta-tile {
            --oferta-tile-media-height: 120px;
            height: 460px;
            min-height: 460px;
        }
    }

    .oferta-tile,
    .oferta-scenario {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 32px 30px 30px !important;
    }

    /* Hover effect - mirrors .usp-card from homepage "Dlaczego firmy
       wybierają Pure Energy?". The dimming uses :has() so it only
       triggers when a tile is actually hovered - hovering gaps between
       tiles or the surrounding section padding does nothing. The
       hovered tile lifts, gets a stronger shadow and a soft orange
       glow bleeds from the bottom-left corner. Pseudo-elements sit
       at z-index: 0; in-flow children are bumped to z-index: 1 so
       text/image stay above the decoration. */
    .oferta-tile {
        position: relative;
        isolation: isolate;
        transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, opacity .28s ease, filter .28s ease;
    }
    .oferta-tile::before {
        content: "";
        position: absolute;
        inset: auto auto -46px -46px;
        width: 170px;
        height: 170px;
        border-radius: 999px;
        background: rgba(255, 150, 0, 0.08);
        transition: transform .45s ease, opacity .32s ease, background .32s ease;
        z-index: 0;
        pointer-events: none;
    }
    .oferta-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(145deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 100%);
        opacity: 0;
        transition: opacity .32s ease;
        z-index: 0;
        pointer-events: none;
    }
    .oferta-tile > * {
        position: relative;
        z-index: 1;
    }
    .oferta-tiles:has(.oferta-tile:hover) .oferta-tile {
        opacity: .42;
        filter: grayscale(.18);
        transform: scale(.985);
    }
    .oferta-tiles:has(.oferta-tile:hover) .oferta-tile:hover {
        opacity: 1;
        filter: none;
        transform: translateY(-8px);
        box-shadow: 0 28px 60px rgba(46, 32, 100, 0.14);
        z-index: 2;
    }
    .oferta-tile:hover::before {
        transform: scale(1.18);
    }
    .oferta-tile:hover::after {
        opacity: 1;
    }

    /* Gutenberg's `.is-layout-constrained > *` rule sets `margin: auto !important`
       on direct children, which (in a flex column) centers content-width items
       instead of stretching them. Reset to 0 so tiles' headings, paragraphs and
       buttons span the full card width and align to the left edge. */
    .oferta-tile > *,
    .oferta-scenario > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .oferta-tile h3,
    .oferta-scenario h3 {
        font-size: clamp(22px, 2vw, 26px);
        line-height: 1.12;
        color: var(--pe-ink);
        text-align: left !important;
    }

    .oferta-tile p,
    .oferta-scenario p {
        margin: 0;
        font-size: 16.5px;
        line-height: 1.72;
        color: var(--pe-text);
    }

    /* "Sytuacja 1/2/3" tiles in /magazyny-energii-dla-firm/ - slightly
       larger heading, smaller body text (matches .service-benefit-card__text),
       and min-height on h3 so all three descriptions start at the same
       vertical position regardless of how the title wraps. */
    .service-models--situations .oferta-tile h3 {
        font-size: clamp(24px, 2.2vw, 28px);
        flex: 0 0 auto;
        min-height: 3.5em;
    }
    .service-models--situations .oferta-tile p {
        font-size: 15.5px;
        line-height: 1.7;
    }

    .oferta-tile__for {
        margin-top: auto !important;
        padding-top: 14px;
        border-top: 1px solid rgba(46, 32, 100, 0.08);
        font-size: 14.5px !important;
        color: var(--pe-muted) !important;
        line-height: 1.62 !important;
        text-align: left;
    }

    .oferta-tile__for strong {
        color: var(--pe-orange-dark);
        font-weight: 800;
        letter-spacing: .02em;
        margin-right: 4px;
    }

    .oferta-tile .wp-block-buttons,
    .oferta-scenario .wp-block-buttons {
        margin-top: 6px;
        justify-content: flex-start !important;
    }

    .oferta-tile .wp-block-button.is-style-pe-secondary .wp-block-button__link,
    .oferta-scenario .wp-block-button.is-style-pe-secondary .wp-block-button__link {
        justify-content: flex-start !important;
        text-align: left !important;
        min-height: 48px;
        padding: 0 22px;
        font-size: 15px;
    }

    /* Oferta overview: in its resting state each card is an image-led preview.
       The photo runs from the card's top edge down to the "Dla kogo" divider;
       hovering (or keyboard focus within the card) restores the complete,
       text-led card. This scope deliberately excludes oferta-tile instances on
       service subpages. */
    @media (min-width: 901px) and (hover: hover) {
        /* All preview content is positioned in layers, so explicitly retain
           Gutenberg's intended 3- and 2-column tracks. Without this, flex
           columns can shrink to the min-content width of the hidden copy. */
        .oferta-tiles--overview .wp-block-columns {
            display: grid !important;
            width: 100% !important;
            max-width: none !important;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .oferta-tiles--overview .wp-block-columns + .wp-block-columns {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .oferta-tiles--overview .wp-block-column,
        .oferta-tiles--overview .oferta-tile {
            width: 100% !important;
            min-width: 0;
            max-width: none !important;
            box-sizing: border-box;
        }

        .oferta-tiles--overview .oferta-tile {
            --oferta-tile-media-height: 220px;
            height: 760px;
            min-height: 760px;
            gap: 0;
        }

        .oferta-tiles--overview .wp-block-columns + .wp-block-columns .oferta-tile {
            --oferta-tile-media-height: clamp(260px, 26vw, 330px);
        }

        .oferta-tiles--overview .oferta-tile > .oferta-tile__media {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            margin: 0 !important;
            aspect-ratio: auto;
            z-index: 1;
            transition: height .42s ease;
        }

        .oferta-tiles--overview .oferta-tile > .oferta-tile__media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(24, 21, 37, .62) 0%, rgba(24, 21, 37, .16) 48%, rgba(24, 21, 37, .04) 100%);
            pointer-events: none;
            transition: opacity .32s ease;
        }

        .oferta-tiles--overview .oferta-tile > h3 {
            position: absolute;
            top: 32px;
            left: 30px;
            right: 30px;
            z-index: 2;
            margin: 0 !important;
            color: var(--pe-white);
            font-size: clamp(30px, 2.65vw, 40px);
            line-height: 1.04;
            text-shadow: 0 2px 18px rgba(24, 21, 37, .32);
            transition: top .42s ease, color .32s ease, font-size .42s ease, line-height .42s ease, text-shadow .32s ease;
        }

        .oferta-tiles--overview .oferta-tile > p:not(.oferta-tile__for) {
            position: absolute;
            top: calc(var(--oferta-tile-media-height) + 102px);
            right: 30px;
            left: 30px;
            z-index: 2;
            display: block;
            margin: 0 !important;
            opacity: 0;
            visibility: hidden;
            transform: translateY(18px);
            transition: opacity .32s ease, transform .42s ease, visibility 0s linear .42s;
        }

        .oferta-tiles--overview .oferta-tile__for {
            position: absolute;
            right: 0;
            bottom: 78px;
            left: 0;
            z-index: 3;
            margin: 0 !important;
            padding: 18px 30px 12px;
            background: var(--pe-white);
            border-top-color: var(--pe-line);
        }

        .oferta-tiles--overview .oferta-tile .wp-block-buttons {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 3;
            margin: 0 !important;
            padding: 0 30px 30px;
            background: var(--pe-white);
        }

        .oferta-tiles--overview .oferta-tile:hover,
        .oferta-tiles--overview .oferta-tile:focus-within {
            height: 760px;
        }

        .oferta-tiles--overview .oferta-tile:hover > .oferta-tile__media,
        .oferta-tiles--overview .oferta-tile:focus-within > .oferta-tile__media {
            height: var(--oferta-tile-media-height);
        }

        .oferta-tiles--overview .oferta-tile:hover > .oferta-tile__media::after,
        .oferta-tiles--overview .oferta-tile:focus-within > .oferta-tile__media::after {
            opacity: 0;
        }

        .oferta-tiles--overview .oferta-tile:hover > h3,
        .oferta-tiles--overview .oferta-tile:focus-within > h3 {
            top: calc(var(--oferta-tile-media-height) + 24px);
            color: var(--pe-ink);
            font-size: clamp(22px, 2vw, 26px);
            line-height: 1.12;
            text-shadow: none;
        }

        .oferta-tiles--overview .oferta-tile:hover > p:not(.oferta-tile__for),
        .oferta-tiles--overview .oferta-tile:focus-within > p:not(.oferta-tile__for) {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0s;
        }
    }

    .oferta-scenario {
        padding: 30px 28px !important;
        position: relative;
        overflow: hidden;
    }

    .oferta-scenario h3 {
        color: var(--pe-purple);
    }

    /* Letter watermark - large semi-transparent A/B/C/D in the bottom-right
       corner, partially clipped by the card's overflow:hidden. Letter comes
       from the data-letter attribute set in PHP. Pointer-events: none so it
       doesn't catch clicks; z-index: 0 with content z-index: 1 to keep text
       above the decoration. */
    .oferta-scenario::before {
        content: attr(data-letter);
        position: absolute;
        right: 14px;
        bottom: -54px;
        font-size: clamp(120px, 14vw, 190px);
        font-weight: 900;
        line-height: 0.8;
        color: rgba(46, 32, 100, 0.1);
        letter-spacing: -0.04em;
        pointer-events: none;
        z-index: 0;
        transition: color .32s ease, transform .32s ease;
    }
    .oferta-scenario:hover::before {
        color: rgba(255, 150, 0, 0.24);
        transform: translateY(-4px);
    }
    .oferta-scenario > * {
        position: relative;
        z-index: 1;
    }

    /* Reference slider on Oferta page - 2-column variant of .reference-card
       (no quote panel). Overrides the default 3-col grid + min-widths. */
    .oferta-proof .references-scroll {
        margin-top: 36px;
    }

    .oferta-proof .wp-block-buttons.oferta-proof__cta {
        margin-top: 44px !important;
    }

    .reference-card.oferta-proof-card {
        grid-template-columns: minmax(380px, .42fr) minmax(480px, .58fr);
        min-width: 920px;
        min-height: 520px;
    }

    .oferta-proof-card .reference-card__body {
        padding: 42px 44px;
        gap: 22px;
    }

    .oferta-proof-card .reference-story {
        grid-template-columns: 110px 1fr;
    }

    .oferta-proof-card .reference-story p {
        font-size: clamp(20px, 1.8vw, 26px);
        color: var(--pe-purple);
        font-weight: 800;
        line-height: 1.2;
    }

    @media (max-width: 1180px) {
        .oferta-tile,
        .oferta-scenario {
            padding: 28px 26px !important;
        }
        .oferta-tile__media {
            margin: -28px -26px 4px !important;
        }
    }

    @media (max-width: 900px) {
        .oferta-tile,
        .oferta-scenario {
            height: auto;
        }

        .oferta-tiles--homepage > .container > .wp-block-columns + .wp-block-columns {
            margin-top: 24px !important;
        }

        .oferta-tiles--homepage > .container > .wp-block-columns .wp-block-column + .wp-block-column {
            margin-top: 24px !important;
        }

        .oferta-tile__for {
            margin-top: 14px !important;
        }
    }

    @media (max-width: 640px) {
        .oferta-tile,
        .oferta-scenario {
            padding: 24px 22px !important;
        }
        .oferta-tile__media {
            margin: -24px -22px 4px !important;
        }
    }


    /* ============================================================
       REALIZACJE PAGE - vertical stack of full case-study cards.
       Composes with .hero, .reference-card, is-style-pe-section-*,
       is-style-pe-title/lead, .section--final-cta, .final-cta.
       Only additive overrides live here - visual primitives come
       from the existing .reference-card system.
       ============================================================ */

    .realizacje-stack {
        display: grid;
        gap: 0;
        margin-top: 0;
    }

    /* Force heading + prose to share the same left edge - Gutenberg's
       "constrained" layout centers each direct child independently, so
       the title-large (max 1040px) and content-prose (max 820px) end up
       at different x positions within the 1240px grid column.
       Prose is also widened to the full grid width (overriding the 820px
       cap from .is-style-pe-content-prose). */
    .realizacje-system-section > .is-style-pe-title-large,
    .realizacje-system-section > .is-style-pe-content-prose {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .realizacje-system-section > .is-style-pe-content-prose {
        max-width: none !important;
    }
    /* Gutenberg's is-layout-constrained (on the prose div itself) centers
       each <p> at 820px via auto-margins. Override so paragraphs share the
       same left edge as the title-large above. */
    .realizacje-system-section .is-style-pe-content-prose > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    /* 4-card feature grid (replaces the bullet checklist). */
    .realizacje-system-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
        margin-top: 64px;
    }

    .realizacje-system-card {
        position: relative;
        background: var(--pe-white);
        border-radius: 24px;
        padding: 36px 28px 32px;
        border: 1px solid var(--pe-line);
        box-shadow: 0 12px 30px rgba(27, 22, 45, 0.06);
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
        isolation: isolate;
        transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
    }

    .realizacje-system-card::after {
        content: "";
        position: absolute;
        right: -42px;
        top: -42px;
        width: 124px;
        height: 124px;
        border-radius: 999px;
        background: rgba(255, 150, 0, 0.14);
        z-index: 0;
        transform: scale(1);
        transform-origin: top right;
        transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
        pointer-events: none;
    }

    .realizacje-system-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 60px rgba(46, 32, 100, 0.12);
        border-color: color-mix(in srgb, var(--pe-orange) 26%, rgba(46, 32, 100, 0.08));
    }

    .realizacje-system-card:hover::after {
        transform: scale(9);
        opacity: 1;
    }

    .realizacje-system-card__icon,
    .realizacje-system-card__title,
    .realizacje-system-card__text {
        position: relative;
        z-index: 1;
    }

    .realizacje-system-card__icon {
        display: block;
        color: var(--pe-orange-dark);
        transition: transform .32s ease, color .32s ease;
    }

    .realizacje-system-card:hover .realizacje-system-card__icon {
        transform: translateY(-3px) scale(1.06);
    }

    .realizacje-system-card__icon svg {
        display: block;
        width: 64px;
        height: 64px;
        stroke: currentColor;
    }

    .realizacje-system-card__title {
        margin: 0;
        font-size: clamp(20px, 1.5vw, 24px);
        font-weight: 700;
        line-height: 1.2;
        color: var(--pe-ink);
        transition: color .32s ease;
    }

    .realizacje-system-card__text {
        margin: 0;
        font-size: 16px;
        line-height: 1.72;
        color: var(--pe-text);
        transition: color .32s ease;
    }

    @media (max-width: 1100px) {
        .realizacje-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
        .realizacje-system-grid { grid-template-columns: 1fr; }
    }

    .realizacja-item {
        position: relative;
        display: grid;
        gap: 22px;
        padding: clamp(52px, 6vw, 86px) 0;
        isolation: isolate;
    }

    .realizacja-item:nth-child(even)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: -1;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--pe-soft);
    }

    .realizacja-item__title {
        max-width: 960px;
        margin: 0;
        color: var(--pe-purple);
        font-size: clamp(36px, 4.5vw, 68px);
        line-height: 1;
        letter-spacing: 0;
    }

    .realizacja-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: grid;
        grid-template-columns: 1fr !important;
        overflow: hidden;
    }

    .realizacja-card__media {
        position: relative;
        min-height: clamp(420px, 48vw, 660px);
        overflow: hidden;
        background: var(--pe-purple);
        isolation: isolate;
    }

    .realizacja-card__media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(to top, rgba(46,32,100,.82), rgba(46,32,100,.14) 55%, rgba(46,32,100,.24)),
            linear-gradient(90deg, rgba(24,21,37,.50), transparent 58%);
    }

    .realizacja-card__slides,
    .realizacja-card__slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .realizacja-card__slide {
        display: block;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.035);
        transition: opacity .35s ease, transform .7s ease;
    }

    .realizacja-card__slide.is-active {
        opacity: 1;
        transform: scale(1);
    }

    .realizacja-card__spec {
        position: absolute;
        left: clamp(24px, 4vw, 52px);
        right: clamp(160px, 17vw, 250px);
        bottom: clamp(28px, 4vw, 56px);
        z-index: 3;
        color: var(--pe-white);
        text-shadow: 0 8px 30px rgba(24, 21, 37, 0.42);
    }

    .realizacja-card__spec strong {
        display: block;
        max-width: 760px;
        color: var(--pe-white);
        font-size: clamp(34px, 4.7vw, 68px);
        font-weight: 800;
        line-height: .96;
    }

    .realizacja-card__controls {
        position: absolute;
        right: clamp(22px, 3.4vw, 48px);
        bottom: clamp(28px, 4vw, 56px);
        z-index: 3;
        display: flex;
        gap: 12px;
    }

    .realizacja-card__arrow {
        width: 54px;
        height: 54px;
        display: inline-grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        color: var(--pe-white);
        font-size: 38px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }

    .realizacja-card__arrow:hover,
    .realizacja-card__arrow:focus-visible {
        transform: translateY(-2px);
        background: var(--pe-orange);
        border-color: var(--pe-orange);
        color: var(--pe-ink);
        outline: 0;
    }

    .realizacja-card__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
        border-top: 1px solid rgba(46, 32, 100, 0.08);
        background: var(--pe-white);
    }

    .realizacja-card .reference-card__body {
        padding: clamp(34px, 4.4vw, 58px);
        justify-content: start;
        min-height: 0;
    }

    .realizacja-card .reference-card__quote-panel {
        min-height: 100%;
        padding: clamp(34px, 4vw, 54px);
    }

    .realizacja-card p {
        margin: 0;
    }

    @media (max-width: 1180px) {
        .realizacja-card__content {
            grid-template-columns: 1fr;
        }

        .realizacja-card .reference-card__quote-panel {
            border-left: 0;
            border-top: 1px solid rgba(46, 32, 100, 0.08);
        }
    }

    @media (max-width: 700px) {
        .realizacje-stack {
            gap: 22px;
        }

        .realizacja-item {
            gap: 16px;
            padding: 38px 0;
        }

        .realizacja-item__title {
            font-size: clamp(30px, 9.4vw, 42px);
        }

        .realizacja-card__media {
            min-height: 380px;
        }

        .realizacja-card__spec {
            left: 20px;
            right: 20px;
            bottom: 22px;
        }

        .realizacja-card__spec strong {
            font-size: clamp(26px, 7.2vw, 34px);
            line-height: 1;
        }

        .realizacja-card__controls {
            right: 20px;
            top: 20px;
            bottom: auto;
        }

        .realizacja-card__arrow {
            width: 48px;
            height: 48px;
            font-size: 34px;
        }
    }

    /* ============================================================
       Realizacje - filter chips, year badge, scope list
       (dla CPT-driven listy /realizacje/)
       ============================================================ */

    .wp-block-group.realizacje-stack-section {
        padding-top: 48px !important;
        padding-bottom: 0 !important;
    }

    @media (max-width: 900px) {
        .wp-block-group.realizacje-stack-section {
            padding-top: 36px !important;
            padding-bottom: 0 !important;
        }
    }

    .realizacje-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin: 0 auto 40px !important;
        max-width: 1240px;
        padding: 0 24px;
    }

    .realizacje-filter__chip {
        appearance: none;
        background: #fff;
        border: 1.5px solid rgba(46, 32, 100, 0.18);
        border-radius: 18px;
        color: var(--pe-purple);
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        padding: 12px 20px;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .realizacje-filter__chip:hover,
    .realizacje-filter__chip:focus-visible {
        border-color: var(--pe-orange);
        color: var(--pe-orange-dark);
        outline: none;
    }

    .realizacje-filter__chip.is-active {
        background: var(--pe-orange);
        border-color: var(--pe-orange);
        color: var(--pe-ink);
    }

    .realizacja-item[hidden] {
        display: none !important;
    }

    .realizacja-item__scope {
        margin-top: 20px !important;
        padding-left: 0 !important;
    }

    .realizacja-item__scope li {
        font-size: 14px;
        line-height: 1.55;
    }

    .realizacja-card__slide--placeholder {
        align-items: center;
        background: rgba(46, 32, 100, 0.06);
        color: rgba(46, 32, 100, 0.5);
        display: flex;
        font-size: 14px;
        font-weight: 600;
        height: 100%;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    @media (max-width: 640px) {
        .realizacje-filter {
            gap: 6px;
            padding: 0 16px;
        }

        .realizacje-filter__chip {
            font-size: 13px;
            padding: 8px 14px;
        }
    }

    /* ============================================================
       Service subpage enhancements (v2)
       Adds: stats row, problem cards, USP bento, visual break.
       All patterns reuse tokens and mirror homepage conventions.
       ============================================================ */

    /* Hero CTA phone ghost - paired with primary on service subpages */
    .service-hero .btn-group {
        margin-top: 30px;
    }

    /* Stats row - compact 4-up grid between hero and warm intro */
    .service-stats {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .service-stats__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .service-stats__item {
        --stat-fill: rgba(255, 150, 0, 0.12);
        position: relative;
        background: #fff;
        border: 1px solid rgba(46, 32, 100, 0.08);
        border-radius: 16px;
        padding: 24px 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
        box-shadow: 0 6px 24px -16px rgba(46, 32, 100, 0.18);
        overflow: hidden;
        isolation: isolate;
        transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
    }

    .service-stats__item:nth-child(even) {
        --stat-fill: rgba(46, 32, 100, 0.10);
    }

    /* Decorative corner blob - same pattern as .problem-card::after:
       a colored circle anchored top-right that scales up on hover to
       flood the card with a soft tint. */
    .service-stats__item::after {
        content: "";
        position: absolute;
        right: -32px;
        top: -32px;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        background: var(--stat-fill);
        z-index: 0;
        transform: scale(1);
        transform-origin: top right;
        transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
        pointer-events: none;
    }

    .service-stats__item:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -20px rgba(46, 32, 100, 0.22);
        border-color: color-mix(in srgb, var(--pe-orange) 22%, rgba(46, 32, 100, 0.08));
    }

    .service-stats__item:hover::after {
        transform: scale(9);
        opacity: 1;
    }

    .service-stats__item > * {
        position: relative;
        z-index: 1;
    }

    .service-stats__icon {
        width: 56px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--pe-orange);
        margin-bottom: 10px;
    }

    .service-stats__icon svg {
        width: 36px;
        height: 36px;
    }

    .service-stats__item:nth-child(even) .service-stats__icon {
        color: var(--pe-purple);
    }

    .service-stats__item strong {
        font-family: var(--pe-font-display);
        font-size: clamp(28px, 2.6vw, 38px);
        line-height: 1;
        color: var(--pe-ink);
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .service-stats__item span {
        font-size: 14px;
        line-height: 1.45;
        color: var(--pe-muted);
    }

    @media (max-width: 900px) {
        .service-stats__grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 560px) {
        .service-stats__grid {
            grid-template-columns: 1fr;
        }
    }

    /* Problem cards on service subpages - loosen the homepage defaults
       so it works as a 3-card band, not a section-filling block. */
    .service-problem .problem-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 36px;
    }

    .service-problem .problem-card {
        padding: 28px 26px;
    }

    @media (max-width: 900px) {
        .service-problem .problem-grid {
            grid-template-columns: 1fr;
        }
    }

    /* USP bento on service subpages - 4-card symmetric grid.
       Overrides homepage asymmetric layout for consistency. */
    .service-usp .usp-bento {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        margin-top: 36px;
    }

    .service-usp .usp-card {
        padding: 28px 26px;
    }

    .service-usp .usp-card--wide {
        grid-column: 1 / -1;
    }

    @media (max-width: 720px) {
        .service-usp .usp-bento {
            grid-template-columns: 1fr;
        }
    }

    /* Visual break - full-width image with caption, used between
       scope and references sections to add visual rhythm. */
    .service-visual {
        padding-top: 0;
        padding-bottom: 0;
    }

    .service-visual__frame {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 30px 60px -38px rgba(46, 32, 100, 0.35);
        background: var(--pe-purple-tint, #f5f1fb);
    }

    .service-visual__frame img {
        display: block;
        width: 100%;
        height: clamp(320px, 38vw, 520px);
        object-fit: cover;
    }

    .service-visual__caption {
        position: absolute;
        left: 28px;
        bottom: 28px;
        right: 28px;
        max-width: 540px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 18px 22px;
        border-radius: 14px;
        border: 1px solid rgba(46, 32, 100, 0.08);
    }

    .service-visual__caption span {
        display: block;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--pe-orange-dark);
        font-weight: 700;
        margin-bottom: 4px;
    }

    .service-visual__caption strong {
        display: block;
        font-family: var(--pe-font-display);
        font-size: clamp(18px, 1.6vw, 22px);
        line-height: 1.3;
        color: var(--pe-ink);
        font-weight: 700;
    }

    @media (max-width: 640px) {
        .service-visual__frame img {
            height: 260px;
        }

        .service-visual__caption {
            left: 16px;
            right: 16px;
            bottom: 16px;
            padding: 14px 16px;
        }
    }

    /* Compact offer-panel reuse on service subpages */
    .service-visual--panel .offer-panel {
        grid-template-columns: 1.05fr 1fr;
        gap: 0;
    }

    .service-visual--panel .offer-panel__media {
        min-height: 420px;
    }

    @media (max-width: 900px) {
        .service-visual--panel .offer-panel {
            grid-template-columns: 1fr;
        }

        .service-visual--panel .offer-panel__media {
            min-height: 280px;
        }
    }


    /* ============================================================
       BLOG ARCHIVE & SINGLE POST STYLES
       ============================================================ */

    /* --- Blog archive hero --- */
    .blog-archive__hero {
        text-align: center;
        margin: 0 auto !important;
        padding: 88px 24px 56px !important;
        max-width: 860px;
    }

    .blog-archive__hero .is-style-pe-lead {
        margin-top: 28px !important;
        text-align: center;
    }

    .blog-archive__title {
        font-size: clamp(38px, 4.4vw, 64px) !important;
        line-height: 1.05 !important;
        max-width: 860px;
        margin: 20px auto 0 !important;
        color: var(--pe-ink);
        letter-spacing: -0.02em;
    }

    /* --- Blog list (horizontal cards, 1 per row) --- */
    .blog-archive__grid {
        width: min(var(--pe-container), calc(100% - 40px));
        max-width: none;
        margin: 0 auto !important;
        padding: 0;
    }

    .blog-archive__grid .wp-block-query-pagination {
        margin-top: 56px !important;
        margin-bottom: 60px !important;
        padding-top: 32px;
        border-top: 1px solid var(--pe-line);
        font-family: var(--pe-font-display);
    }

    .blog-archive__grid .wp-block-query-pagination .wp-block-query-pagination-previous,
    .blog-archive__grid .wp-block-query-pagination .wp-block-query-pagination-next {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border: 1px solid var(--pe-line);
        border-radius: 18px;
        color: var(--pe-ink);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none;
        background: var(--pe-white);
        transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
    }

    .blog-archive__grid .wp-block-query-pagination .wp-block-query-pagination-previous:hover,
    .blog-archive__grid .wp-block-query-pagination .wp-block-query-pagination-next:hover {
        border-color: var(--pe-orange);
        color: var(--pe-orange-dark);
        background: var(--pe-orange-soft);
    }

    .blog-archive__grid .wp-block-query-pagination .wp-block-query-pagination-next-arrow,
    .blog-archive__grid .wp-block-query-pagination .wp-block-query-pagination-previous-arrow {
        font-size: 16px;
        line-height: 1;
    }

    .blog-archive__grid .wp-block-post-template {
        display: flex;
        flex-direction: column;
        gap: 32px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .blog-archive__grid .wp-block-post-template > li {
        margin: 0 !important;
        width: 100%;
    }

    /* --- Post card (horizontal: image left, content right) --- */
    .post-card {
        padding: 0 !important;
        overflow: hidden;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    .post-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -16px rgba(46, 32, 100, 0.18);
    }

    .post-card > .wp-block-post-featured-image,
    .post-card .wp-block-post-featured-image {
        flex: 0 0 420px;
        width: 420px;
        min-width: 0;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
        align-self: stretch;
    }

    .post-card .wp-block-post-featured-image a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .post-card .wp-block-post-featured-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.42s ease;
    }

    .post-card:hover .wp-block-post-featured-image img {
        transform: scale(1.04);
    }

    /* Inner content wrapper - the second flex column */
    .post-card > .wp-block-group:last-child {
        flex: 1 1 0%;
        min-width: 0;
        padding: 32px 36px !important;
        background: var(--pe-white);
    }

    .post-card__category {
        font-family: var(--pe-font-display);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--pe-orange);
    }

    .post-card__category a {
        color: inherit;
        text-decoration: none;
    }

    .post-card__title {
        margin-top: 10px !important;
        font-size: clamp(22px, 1.7vw, 28px) !important;
        line-height: 1.2 !important;
        color: var(--pe-ink);
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .post-card__title a {
        color: inherit;
        text-decoration: none;
    }

    .post-card__title a:hover {
        color: var(--pe-orange);
    }

    .post-card__excerpt {
        margin-top: 14px !important;
        color: var(--pe-muted) !important;
        font-size: 15.5px !important;
        line-height: 1.65 !important;
    }

    .post-card__excerpt p {
        margin: 0;
        color: var(--pe-muted);
    }

    .post-card__meta {
        margin-top: 22px !important;
        padding-top: 18px;
        border-top: 1px solid rgba(46, 32, 100, 0.08);
        justify-content: space-between !important;
        align-items: center;
        gap: 16px;
    }

    .post-card__date {
        font-size: 13px !important;
        color: var(--pe-muted) !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
    }

    .post-card__more {
        font-family: var(--pe-font-display);
        font-size: 14px !important;
        font-weight: 700;
        color: var(--pe-orange);
        text-decoration: none;
    }

    .post-card__more:hover {
        color: var(--pe-purple);
    }

    /* Collapse to stacked (image top, content bottom) on narrow viewports */
    @media (max-width: 860px) {
        .post-card {
            flex-direction: column !important;
        }

        .post-card > .wp-block-post-featured-image,
        .post-card .wp-block-post-featured-image {
            flex: 0 0 auto;
            width: 100%;
            height: 220px;
        }

        .post-card > .wp-block-group:last-child {
            padding: 24px 24px 26px !important;
        }

        .blog-archive__grid .wp-block-post-template {
            gap: 24px;
        }
    }

    /* --- Single article hero --- */
    .single-article {
        padding-top: 64px !important;
        padding-bottom: 120px !important;
    }

    .single-article__hero {
        text-align: center;
        margin: 0 auto 48px !important;
        padding: 56px 24px 0 !important;
        max-width: 860px;
    }

    .single-article__eyebrow,
    .single-article__hero .wp-block-post-terms {
        display: inline-block;
        font-family: var(--pe-font-display);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--pe-orange);
        margin-bottom: 16px !important;
    }

    .single-article__hero .wp-block-post-terms a {
        color: inherit;
        text-decoration: none;
    }

    .single-article__hero .wp-block-post-terms a:hover {
        color: var(--pe-purple);
    }

    .single-article__title,
    .single-article__hero .wp-block-post-title {
        font-size: clamp(34px, 4vw, 56px) !important;
        line-height: 1.08 !important;
        max-width: 860px;
        margin: 0 auto !important;
        color: var(--pe-ink);
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .single-article__meta {
        justify-content: center !important;
        gap: 14px !important;
        margin-top: 28px !important;
    }

    .single-article__date {
        font-size: 14px !important;
        color: var(--pe-muted) !important;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0 !important;
    }

    .single-article__meta-sep {
        margin: 0 !important;
        color: var(--pe-orange) !important;
        font-weight: 700 !important;
    }

    .single-article__readtime {
        margin: 0 !important;
        color: var(--pe-muted) !important;
        font-size: 14px !important;
        font-weight: 500;
    }

    /* --- Featured image on single --- */
    .single-article .wp-block-post-featured-image {
        max-width: 1240px;
        margin: 0 auto 64px !important;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 24px 60px -28px rgba(46, 32, 100, 0.25);
    }

    .single-article .wp-block-post-featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- Article body --- */
    .single-article__body {
        max-width: 780px;
        margin: 0 auto !important;
    }

    /* wp:post-content renders its own wrapper (.entry-content.wp-block-post-content),
       so spacing must target THAT wrapper's children - not .single-article__body. */
    .single-article__body .entry-content > *,
    .single-article__body .wp-block-post-content > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .single-article__body .entry-content > * + *,
    .single-article__body .wp-block-post-content > * + * {
        margin-top: 28px !important;
    }

    /* Bigger breath above a heading that follows a paragraph / list. */
    .single-article__body .entry-content > p + h2,
    .single-article__body .entry-content > p + h3,
    .single-article__body .entry-content > ul + h2,
    .single-article__body .entry-content > ol + h2,
    .single-article__body .entry-content > ul + h3,
    .single-article__body .entry-content > ol + h3,
    .single-article__body .entry-content > blockquote + h2,
    .single-article__body .entry-content > h2 + h2,
    .single-article__body .wp-block-post-content > p + h2,
    .single-article__body .wp-block-post-content > p + h3,
    .single-article__body .wp-block-post-content > ul + h2,
    .single-article__body .wp-block-post-content > ol + h2,
    .single-article__body .wp-block-post-content > ul + h3,
    .single-article__body .wp-block-post-content > ol + h3,
    .single-article__body .wp-block-post-content > blockquote + h2,
    .single-article__body .wp-block-post-content > h2 + h2 {
        margin-top: 56px !important;
    }

    /* Comfortable gap between a heading and the paragraph that follows. */
    .single-article__body .entry-content > h2 + p,
    .single-article__body .entry-content > h2 + ul,
    .single-article__body .entry-content > h2 + ol,
    .single-article__body .entry-content > h2 + blockquote,
    .single-article__body .wp-block-post-content > h2 + p,
    .single-article__body .wp-block-post-content > h2 + ul,
    .single-article__body .wp-block-post-content > h2 + ol,
    .single-article__body .wp-block-post-content > h2 + blockquote {
        margin-top: 28px !important;
    }

    .single-article__body .entry-content > h3 + p,
    .single-article__body .entry-content > h3 + ul,
    .single-article__body .entry-content > h3 + ol,
    .single-article__body .wp-block-post-content > h3 + p,
    .single-article__body .wp-block-post-content > h3 + ul,
    .single-article__body .wp-block-post-content > h3 + ol {
        margin-top: 22px !important;
    }

    .single-article__body p,
    .single-article__body li {
        color: var(--pe-text);
        font-size: clamp(17px, 1.2vw, 19px);
        line-height: 1.85;
    }

    .single-article__body p {
        margin: 0;
    }

    .single-article__body h2 {
        font-size: clamp(26px, 2.2vw, 34px) !important;
        line-height: 1.18 !important;
        margin-top: 56px !important;
        color: var(--pe-ink);
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .single-article__body .entry-content > h2:first-child,
    .single-article__body .wp-block-post-content > h2:first-child {
        margin-top: 0 !important;
    }

    .single-article__body h3 {
        font-size: clamp(20px, 1.5vw, 24px) !important;
        line-height: 1.3 !important;
        margin-top: 44px !important;
        color: var(--pe-ink);
        font-weight: 700;
    }

    .single-article__body a {
        color: var(--pe-orange);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        transition: color 0.18s ease;
    }

    .single-article__body a:hover {
        color: var(--pe-purple);
    }

    .single-article__body strong {
        color: var(--pe-ink);
        font-weight: 700;
    }

    .single-article__body ul,
    .single-article__body ol {
        margin: 24px 0 !important;
        padding-left: 0;
        list-style: none;
    }

    .single-article__body ul li,
    .single-article__body ol li {
        position: relative;
        padding-left: 32px;
        margin-bottom: 12px;
    }

    .single-article__body ul li::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 12px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pe-orange);
    }

    .single-article__body ol {
        counter-reset: pe-counter;
    }

    .single-article__body ol li {
        counter-increment: pe-counter;
    }

    .single-article__body ol li::before {
        content: counter(pe-counter);
        position: absolute;
        left: 0;
        top: 2px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--pe-purple);
        color: var(--pe-white);
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        font-family: var(--pe-font-display);
    }

    .single-article__body blockquote {
        margin: 36px 0 !important;
        padding: 24px 28px;
        border-left: 4px solid var(--pe-orange);
        background: rgba(255, 150, 0, 0.04);
        border-radius: 0 16px 16px 0;
        font-style: italic;
        color: var(--pe-ink);
    }

    .single-article__body blockquote p {
        margin: 0;
        font-size: clamp(18px, 1.4vw, 22px);
        line-height: 1.6;
    }

    .single-article__body img {
        border-radius: 16px;
        max-width: 100%;
        height: auto;
    }

    .single-article__body figure {
        margin: 36px 0 !important;
    }

    /* --- Article footer --- */
    .single-article__footer {
        max-width: 780px;
        margin: 64px auto 0 !important;
        padding-top: 32px;
    }

    .single-article__footer .wp-block-separator {
        border: none;
        margin: 0 0 28px !important;
        text-align: center;
    }

    .single-article__footer .wp-block-separator.is-style-pe-dots::before {
        content: '· · ·';
        font-size: 24px;
        letter-spacing: 12px;
        color: var(--pe-orange);
    }

    .single-article__back {
        text-align: center;
        margin: 0 !important;
    }

    .single-article__back a {
        display: inline-block;
        padding: 12px 24px;
        background: rgba(46, 32, 100, 0.06);
        border-radius: 999px;
        color: var(--pe-ink);
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .single-article__back a:hover {
        background: var(--pe-purple);
        color: var(--pe-white);
    }

    /* --- Responsive --- */
    @media (max-width: 720px) {
        .single-article__hero,
        .blog-archive__hero {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

        .single-article {
            padding-top: 40px !important;
        }

        .single-article__hero {
            padding-top: 32px !important;
        }

        .single-article__body p,
        .single-article__body li {
            font-size: 16px;
            line-height: 1.7;
        }
    }

    /* ============================================================
       /kontakt/ - hero with embedded map, contact info grid, GDPR clause
       ============================================================ */

    .kontakt-hero {
        position: relative;
        width: 100%;
        height: clamp(420px, 60vh, 620px);
        overflow: hidden;
        background: var(--pe-purple);
    }

    .kontakt-hero__map {
        position: absolute;
        inset: 0;
    }
    .kontakt-hero__map iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        filter: saturate(0.9) contrast(0.95);
    }

    .kontakt-hero__zoom {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 2;
        display: grid;
        gap: 6px;
    }
    .kontakt-hero__zoom-btn {
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.96);
        color: var(--pe-ink);
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--pe-shadow);
        transition: background .15s ease, color .15s ease, transform .15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .kontakt-hero__zoom-btn:hover,
    .kontakt-hero__zoom-btn:focus-visible {
        background: var(--pe-orange);
        color: var(--pe-white);
        transform: translateY(-1px);
    }
    .kontakt-hero__zoom-btn:focus-visible {
        outline: 3px solid var(--pe-orange-dark);
        outline-offset: 2px;
    }
    .kontakt-hero__zoom-btn:active {
        transform: translateY(0);
    }

    .kontakt-hero__external {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        background: rgba(255, 255, 255, 0.96);
        color: var(--pe-ink);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 999px;
        box-shadow: var(--pe-shadow);
        transition: background .15s ease, color .15s ease;
    }
    .kontakt-hero__external:hover,
    .kontakt-hero__external:focus-visible {
        background: var(--pe-orange);
        color: var(--pe-white);
        outline: none;
    }

    @media (max-width: 640px) {
        .kontakt-hero__zoom {
            top: 14px;
            right: 14px;
        }
        .kontakt-hero__zoom-btn {
            width: 40px;
            height: 40px;
            font-size: 20px;
            border-radius: 12px;
        }
        .kontakt-hero__external {
            bottom: 14px;
            left: 14px;
            padding: 8px 12px;
            font-size: 12px;
        }
    }

    .kontakt-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
        align-items: stretch;
        margin-top: 56px;
    }

    .kontakt-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 36px 32px;
        background: var(--pe-white);
        border: 1px solid var(--pe-line);
        border-radius: var(--pe-radius-md);
        box-shadow: var(--pe-shadow);
    }
    .kontakt-card__head {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .kontakt-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        height: auto;
        border-radius: 0;
        background: transparent;
        color: var(--pe-orange-dark);
        flex-shrink: 0;
    }
    .kontakt-card__icon svg {
        width: 60px;
        height: 60px;
        display: block;
    }
    .kontakt-card__label {
        font-size: 12px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--pe-muted);
        font-weight: 800;
    }
    .kontakt-card__title {
        margin: 4px 0 0;
        font-size: clamp(22px, 2vw, 28px);
        color: var(--pe-ink);
        line-height: 1.2;
        letter-spacing: -.01em;
    }
    .kontakt-card__body {
        margin: 0;
        color: var(--pe-text);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
    }
    .kontakt-card__body a {
        color: inherit;
        text-decoration: none;
    }
    .kontakt-card__body a:hover,
    .kontakt-card__body a:focus {
        color: var(--pe-orange-dark);
    }
    .kontakt-card__body--stack {
        display: grid;
        gap: 6px;
    }

    .kontakt-cta .final-cta__copy .lead {
        color: rgba(255,255,255,0.85);
    }

    .kontakt-clause {
        margin-top: 28px;
        padding: 20px 22px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        color: rgba(255, 255, 255, 0.78);
    }
    .kontakt-clause p {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
    }
    .kontakt-clause strong {
        display: block;
        color: var(--pe-white);
        font-size: 14px;
        margin-bottom: 6px;
        letter-spacing: .01em;
    }

    @media (max-width: 1180px) {
        .kontakt-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }
    }

    @media (max-width: 640px) {
        .kontakt-card {
            padding: 28px 24px;
        }
        .kontakt-card__icon svg {
            width: 44px;
            height: 44px;
        }
    }

    /* === PE Bento gallery === */
    .wp-block-gallery.is-style-pe-bento {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 170px;
        gap: 16px;
        margin-top: 48px !important;
    }

    .wp-block-gallery.is-style-pe-bento .wp-block-image {
        margin: 0 !important;
        height: 100%;
        overflow: hidden;
        border-radius: 16px;
        position: relative;
    }

    .wp-block-gallery.is-style-pe-bento .wp-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(2),
    .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(5),
    .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(6) {
        grid-column: span 2;
        grid-row: span 1;
    }

    @media (max-width: 900px) {
        .wp-block-gallery.is-style-pe-bento {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: 140px;
        }
        .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(n) {
            grid-column: span 1;
            grid-row: span 1;
        }
        .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    @media (max-width: 640px) {
        .wp-block-gallery.is-style-pe-bento {
            grid-template-columns: 1fr;
            grid-auto-rows: 180px;
        }
        .wp-block-gallery.is-style-pe-bento .wp-block-image:nth-child(n) {
            grid-column: span 1 !important;
            grid-row: span 1 !important;
        }
    }

    /* === PE Bento tight gallery (no gaps, no rounding) === */
    .wp-block-gallery.is-style-pe-bento-tight {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 170px;
        gap: 0;
        margin-top: 48px !important;
    }

    .wp-block-gallery.is-style-pe-bento-tight .wp-block-image {
        margin: 0 !important;
        height: 100%;
        overflow: hidden;
        border-radius: 0;
        position: relative;
    }

    .wp-block-gallery.is-style-pe-bento-tight .wp-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(2),
    .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(5),
    .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(6) {
        grid-column: span 2;
        grid-row: span 1;
    }

    @media (max-width: 900px) {
        .wp-block-gallery.is-style-pe-bento-tight {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: 140px;
        }
        .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(n) {
            grid-column: span 1;
            grid-row: span 1;
        }
        .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    @media (max-width: 640px) {
        .wp-block-gallery.is-style-pe-bento-tight {
            grid-template-columns: 1fr;
            grid-auto-rows: 180px;
        }
        .wp-block-gallery.is-style-pe-bento-tight .wp-block-image:nth-child(n) {
            grid-column: span 1 !important;
            grid-row: span 1 !important;
        }
    }

    /* ============================================================
       Reference letters slider + lightbox (.pe-docs-slider)
       Horizontal scroll-snap slider of minimized reference PDFs.
       Click opens .pe-doc-lightbox with full-size scan.
       ============================================================ */

    .realizacje-docs-section {
        position: relative;
    }

    /* Override Gutenberg .is-layout-constrained > * { margin-inline: auto }
       so the heading + lead align with the slider's left edge. */
    .realizacje-docs-section > .wp-block-heading,
    .realizaje-docs-section > .is-style-pe-title,
    .realizacje-docs-section > .is-style-pe-title,
    .realizacje-docs-section > .is-style-pe-lead,
    .realizacje-docs-section > p {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .realizacje-docs-section > .is-style-pe-title {
        margin-top: 22px !important;
    }

    .realizacje-docs-section > .is-style-pe-lead {
        margin-top: 18px !important;
        max-width: none !important;
    }

    .pe-docs-slider {
        position: relative;
        width: min(1240px, calc(100% - 96px));
        max-width: 100%;
        margin-top: 96px !important;
        margin-block-start: 96px !important;
    }

    .pe-docs-slider__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 8px 56px;
        margin: -8px -8px 0;
    }

    .pe-docs-slider__viewport::-webkit-scrollbar {
        display: none;
    }

    .pe-docs-slider__track {
        display: flex;
        gap: 28px;
        width: max-content;
        padding: 0 4px;
    }

    .pe-doc-card {
        scroll-snap-align: start;
        flex: 0 0 220px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .pe-doc-card__head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 4px;
        min-height: 50px;
    }

    .pe-doc-card__head::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--pe-orange);
        flex-shrink: 0;
    }

    .pe-doc-card__head h3 {
        margin: 0;
        font-family: "Baloo 2", system-ui, sans-serif;
        font-weight: 700;
        font-size: 17px;
        line-height: 1.22;
        color: var(--pe-ink);
        letter-spacing: -0.01em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pe-doc-card__preview {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        border: 1px solid var(--pe-line);
        border-radius: var(--pe-radius-sm);
        background: var(--pe-white);
        box-shadow: var(--pe-shadow);
        cursor: zoom-in;
        overflow: hidden;
        transition: transform .35s ease, box-shadow .35s ease;
    }

    .pe-doc-card__preview:focus-visible {
        outline: 3px solid var(--pe-orange);
        outline-offset: 4px;
    }

    .pe-doc-card__preview img {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: top center;
        background: #fff;
        transition: transform .5s ease, filter .35s ease;
    }

    .pe-doc-card__preview:hover,
    .pe-doc-card__preview:focus-visible {
        transform: translateY(-4px);
        box-shadow: var(--pe-shadow-lg);
    }

    .pe-doc-card__preview:hover img,
    .pe-doc-card__preview:focus-visible img {
        transform: scale(1.025);
        filter: brightness(0.94);
    }

    .pe-doc-card__zoom {
        position: absolute;
        right: 14px;
        bottom: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(46, 32, 100, 0.92);
        color: #fff;
        box-shadow: 0 10px 24px rgba(27, 22, 45, 0.28);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
        pointer-events: none;
    }

    .pe-doc-card__preview:hover .pe-doc-card__zoom,
    .pe-doc-card__preview:focus-visible .pe-doc-card__zoom,
    .pe-doc-card__preview:focus .pe-doc-card__zoom {
        opacity: 1;
        transform: translateY(0);
    }

    .pe-doc-card__zoom svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .pe-docs-slider__nav {
        display: flex;
        justify-content: flex-start;
        gap: 12px;
        margin-top: 4px;
    }

    .pe-docs-slider__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid var(--pe-line);
        background: var(--pe-white);
        color: var(--pe-purple);
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(27, 22, 45, 0.06);
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    }

    .pe-docs-slider__btn:hover:not(:disabled),
    .pe-docs-slider__btn:focus-visible:not(:disabled) {
        background: var(--pe-orange);
        border-color: var(--pe-orange);
        color: #fff;
    }

    .pe-docs-slider__btn:active:not(:disabled) {
        transform: scale(0.96);
    }

    .pe-docs-slider__btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .pe-docs-slider__btn svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    /* Lightbox ------------------------------------------------- */

    .pe-doc-lightbox {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .pe-doc-lightbox[hidden] {
        display: none;
    }

    .pe-doc-lightbox__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 12, 30, 0.86);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        cursor: zoom-out;
        animation: peLightboxFade .25s ease;
    }

    @keyframes peLightboxFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .pe-doc-lightbox__close,
    .pe-doc-lightbox__nav {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background-color .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
    }

    .pe-doc-lightbox__close {
        top: 22px;
        right: 22px;
        width: 52px;
        height: 52px;
    }

    .pe-doc-lightbox__nav {
        top: 50%;
        transform: translateY(-50%);
        width: 56px;
        height: 56px;
    }

    .pe-doc-lightbox__nav--prev { left: 22px; }
    .pe-doc-lightbox__nav--next { right: 22px; }

    .pe-doc-lightbox__close:hover,
    .pe-doc-lightbox__nav:hover {
        background: var(--pe-orange);
        border-color: var(--pe-orange);
        color: #fff;
    }

    .pe-doc-lightbox__nav:hover {
        transform: translateY(-50%) scale(1.04);
    }

    .pe-doc-lightbox__close:hover {
        transform: scale(1.04);
    }

    .pe-doc-lightbox__close svg,
    .pe-doc-lightbox__nav svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .pe-doc-lightbox__figure {
        position: relative;
        z-index: 1;
        margin: 0;
        max-width: min(900px, calc(100vw - 140px));
        max-height: calc(100vh - 96px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        animation: peLightboxPop .3s ease;
    }

    @keyframes peLightboxPop {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
    }

    .pe-doc-lightbox__img {
        max-width: 100%;
        max-height: calc(100vh - 168px);
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: var(--pe-radius-sm);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
        background: #fff;
    }

    .pe-doc-lightbox__caption {
        color: rgba(255, 255, 255, 0.92);
        font-family: "Baloo 2", system-ui, sans-serif;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.01em;
        text-align: center;
    }

    body.pe-doc-lightbox-open {
        overflow: hidden;
    }

    @media (max-width: 1180px) {
        .realizacje-docs-section .pe-docs-slider,
        .realizacje-docs-section .pe-docs-slider__viewport,
        .realizacje-docs-section .pe-docs-slider__nav {
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }

        .realizacje-docs-section .pe-docs-slider {
            overflow: hidden;
        }

        .pe-doc-card {
            flex-basis: 200px;
        }
    }

    @media (max-width: 900px) {
        .pe-docs-slider__nav {
            justify-content: center;
        }

        .pe-doc-card {
            flex-basis: 180px;
        }

        .pe-doc-card__head h3 {
            font-size: 18px;
        }

        .pe-doc-card__zoom {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 640px) {
        .pe-docs-slider {
            margin-top: 56px !important;
            margin-block-start: 56px !important;
        }

        .pe-docs-slider__viewport {
            padding: 8px 0 52px;
            margin: -8px 0 0;
        }

        .pe-docs-slider__track {
            gap: 18px;
            padding: 0 4px;
        }

        .pe-doc-card {
            flex-basis: 72vw;
            max-width: 200px;
        }

        .pe-doc-lightbox {
            padding: 16px;
        }

        .pe-doc-lightbox__figure {
            max-width: calc(100vw - 32px);
        }

        .pe-doc-lightbox__nav {
            width: 46px;
            height: 46px;
        }

        .pe-doc-lightbox__nav--prev { left: 10px; }
        .pe-doc-lightbox__nav--next { right: 10px; }

        .pe-doc-lightbox__close {
            top: 14px;
            right: 14px;
            width: 44px;
            height: 44px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .pe-doc-card__preview,
        .pe-doc-card__preview img,
        .pe-docs-slider__btn,
        .pe-doc-lightbox__backdrop,
        .pe-doc-lightbox__figure {
            transition: none !important;
            animation: none !important;
        }

        .pe-docs-slider__viewport {
            scroll-behavior: auto;
        }
    }

    /* Reference documents on the Realizacje page use a fixed two-column
       grid instead of the horizontal carousel. The lightbox remains shared
       with the other document previews. */
    .realizacje-docs-section .pe-docs-slider {
        width: 100%;
        max-width: none;
        margin-top: 72px !important;
        margin-block-start: 72px !important;
    }

    .realizacje-docs-section .pe-docs-slider__viewport {
        overflow: visible !important;
        padding: 0;
        margin: 0;
    }

    .realizacje-docs-section .pe-docs-slider__track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 32px;
        width: 100%;
        padding: 0;
    }

    .realizacje-docs-section .pe-doc-card {
        width: 100%;
        min-width: 0;
        flex: none;
        gap: 18px;
    }

    .realizacje-docs-section .pe-doc-card__preview img {
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: top center;
    }

    .realizacje-docs-section .pe-docs-slider__nav {
        display: none;
    }

    @media (max-width: 640px) {
        .realizacje-docs-section .pe-docs-slider {
            margin-top: 56px !important;
            margin-block-start: 56px !important;
        }

        .realizacje-docs-section .pe-docs-slider__track {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        .realizacje-docs-section .pe-doc-card__preview img {
            height: auto;
        }
    }

    /* ============================================================
       INTERACTIVE CONTENT CARDS
       Shared progressive-disclosure pattern for selected cards. Content stays
       visible without JavaScript; desktop uses fixed-height hover states,
       while touch devices reveal details through an explicit button.
       ============================================================ */
    .offer-block__toggle,
    .usp-card__toggle,
    .step__toggle,
    .oferta-scenario__toggle,
    .service-benefit-card__toggle,
    .realizacje-system-card__toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: fit-content;
        min-width: 44px;
        min-height: 44px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .offer-block__toggle::after,
    .usp-card__toggle::after,
    .step__toggle::after,
    .oferta-scenario__toggle::after,
    .service-benefit-card__toggle::after,
    .realizacje-system-card__toggle::after {
        content: "↓";
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: 15px;
        line-height: 1;
        transition: transform .28s ease, background-color .28s ease;
    }

    .offer-block__toggle:hover::after,
    .offer-block__toggle:focus-visible::after,
    .usp-card__toggle:hover::after,
    .usp-card__toggle:focus-visible::after,
    .step__toggle:hover::after,
    .step__toggle:focus-visible::after,
    .oferta-scenario__toggle:hover::after,
    .oferta-scenario__toggle:focus-visible::after,
    .service-benefit-card__toggle:hover::after,
    .service-benefit-card__toggle:focus-visible::after,
    .realizacje-system-card__toggle:hover::after,
    .realizacje-system-card__toggle:focus-visible::after {
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    .offer-block__toggle:focus-visible,
    .usp-card__toggle:focus-visible,
    .step__toggle:focus-visible,
    .oferta-scenario__toggle:focus-visible,
    .service-benefit-card__toggle:focus-visible,
    .realizacje-system-card__toggle:focus-visible {
        outline: 3px solid color-mix(in srgb, currentColor 38%, transparent);
        outline-offset: 5px;
        border-radius: 4px;
    }

    .offer-block.has-reveal > span,
    .usp-card.has-reveal > p,
    .step.has-reveal .step__content > p,
    .oferta-scenario.has-reveal > p,
    .service-benefit-card.has-reveal .service-benefit-card__summary > p,
    .realizacje-system-card.has-reveal > p {
        max-height: 0;
        margin-top: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: max-height .4s ease, margin-top .3s ease, opacity .28s ease, transform .38s ease;
    }

    .offer-block.has-reveal.is-expanded > span,
    .usp-card.has-reveal.is-expanded > p,
    .step.has-reveal.is-expanded .step__content > p,
    .oferta-scenario.has-reveal.is-expanded > p,
    .service-benefit-card.has-reveal.is-expanded .service-benefit-card__summary > p,
    .realizacje-system-card.has-reveal.is-expanded > p {
        max-height: 24rem;
        margin-top: 16px;
        opacity: 1;
        transform: translateY(0);
    }

    .offer-block.has-reveal.is-expanded .offer-block__toggle::after,
    .usp-card.has-reveal.is-expanded .usp-card__toggle::after,
    .step.has-reveal.is-expanded .step__toggle::after,
    .oferta-scenario.has-reveal.is-expanded .oferta-scenario__toggle::after,
    .service-benefit-card.has-reveal.is-expanded .service-benefit-card__toggle::after,
    .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__toggle::after {
        transform: rotate(180deg);
    }

    .usp-card__summary {
        display: contents;
    }

    /* The card's decorative layer uses z-index: 0. The USP action lives in
       a display: contents wrapper, so it needs its own stacking level to
       receive touches on mobile. */
    .usp-card__toggle {
        position: relative;
        z-index: 1;
    }

    .oferta-scenario__summary,
    .service-benefit-card__summary,
    .realizacje-system-card__summary {
        display: contents;
    }

    /* Mobile: keep the connected-system cards concise, with a larger value
       statement and a consistently placed disclosure action. */
    @media (max-width: 900px) {
        .offer-system .offer-block.has-reveal {
            position: relative;
            min-height: 176px;
            padding: 22px 20px 74px;
        }

        .offer-system .offer-block.has-reveal > strong {
            min-height: 0;
            margin: 0;
            font-size: clamp(25px, 7vw, 32px);
            line-height: 1.1;
        }

        .offer-system .offer-block.has-reveal .offer-block__toggle {
            position: absolute;
            right: 18px;
            bottom: 14px;
            margin: 0;
        }
    }

    @media (hover: hover) and (min-width: 901px) {
        /* Connected-system benefit blocks */
        .offer-system .offer-block.has-reveal {
            position: relative;
            display: block;
            height: 210px;
            min-height: 210px;
            padding: 18px;
        }

        .offer-system .offer-block.has-reveal > strong {
            position: absolute;
            top: 50%;
            right: 18px;
            left: 18px;
            min-height: 0;
            font-size: clamp(30px, 2.45vw, 38px);
            line-height: 1.08;
            transform: translateY(-50%);
            transition: top .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1), font-size .32s ease;
        }

        .offer-system .offer-block.has-reveal > span {
            position: absolute;
            top: 58%;
            right: 18px;
            left: 18px;
            font-size: 14.5px;
            line-height: 1.55;
        }

        .offer-system .offer-block.has-reveal .offer-block__toggle {
            position: absolute;
            bottom: 16px;
            left: 18px;
            gap: 0;
            font-size: 0;
        }

        .offer-system .offer-block.has-reveal .offer-block__toggle:focus-visible {
            outline: 0;
        }

        .offer-system .offer-block.has-reveal .offer-block__toggle:focus-visible::after {
            box-shadow: 0 0 0 3px rgba(255,255,255,.34);
        }

        .offer-system .offer-block.has-reveal:hover > strong,
        .offer-system .offer-block.has-reveal.is-expanded > strong {
            top: 18px;
            font-size: 26px;
            transform: translateY(0);
        }

        .offer-system .offer-block.has-reveal:hover > span,
        .offer-system .offer-block.has-reveal.is-expanded > span {
            max-height: 10rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(-50%);
        }

        .offer-system .offer-block.has-reveal:hover .offer-block__toggle::after {
            transform: rotate(180deg);
        }

        /* USP bento cards */
        .usp-card.has-reveal {
            height: 430px;
            min-height: 430px;
        }

        .usp-card.has-reveal .usp-card__summary {
            position: absolute;
            top: 50%;
            right: 30px;
            left: 30px;
            display: block;
            z-index: 1;
            transform: translateY(-50%);
            transition: top .46s cubic-bezier(.2,.8,.2,1), transform .46s cubic-bezier(.2,.8,.2,1);
        }

        .usp-card.has-reveal .usp-card__top {
            margin-bottom: 18px;
        }

        .usp-card.has-reveal .usp-card__icon {
            transform: none;
        }

        .usp-card.has-reveal .usp-card__icon svg {
            width: 84px;
            height: 84px;
            transition: width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1);
        }

        .usp-card.has-reveal .usp-card__toggle {
            gap: 0;
            margin-top: 6px;
            font-size: 0;
        }

        .usp-card.has-reveal h3 {
            font-size: clamp(30px, 2.5vw, 40px);
            line-height: 1.04;
            transition: font-size .34s ease;
        }

        .usp-card.has-reveal > p {
            position: absolute;
            top: 226px;
            right: 30px;
            left: 30px;
            font-size: 17px;
            line-height: 1.65;
        }

        .usp-card.has-reveal:hover .usp-card__summary,
        .usp-card.has-reveal.is-expanded .usp-card__summary {
            top: 30px;
            transform: translateY(0);
        }

        .usp-card.has-reveal:hover h3,
        .usp-card.has-reveal.is-expanded h3 {
            font-size: 23px;
        }

        .usp-card.has-reveal:hover .usp-card__icon,
        .usp-card.has-reveal.is-expanded .usp-card__icon {
            transform: none;
        }

        .usp-card.has-reveal:hover .usp-card__icon svg,
        .usp-card.has-reveal.is-expanded .usp-card__icon svg {
            width: 54px;
            height: 54px;
        }

        .usp-card.has-reveal:hover > p,
        .usp-card.has-reveal.is-expanded > p {
            max-height: 13rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(0);
        }

        .usp-card.has-reveal:hover .usp-card__toggle::after {
            transform: rotate(180deg);
        }

        /* Oferta scenarios: the A–D letter and title lead, then the rationale
           appears without changing the card's footprint. */
        .oferta-scenario.has-reveal {
            height: 320px;
            min-height: 320px;
        }

        .oferta-scenario.has-reveal .oferta-scenario__summary {
            position: absolute;
            top: 50%;
            right: 28px;
            left: 28px;
            z-index: 1;
            transform: translateY(-50%);
            transition: top .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .oferta-scenario.has-reveal h3 {
            margin: 0;
            font-size: clamp(30px, 2.6vw, 38px);
            line-height: 1.06;
            transition: font-size .32s ease;
        }

        .oferta-scenario.has-reveal .oferta-scenario__toggle {
            position: absolute;
            right: 0;
            bottom: 0;
            gap: 0;
            color: var(--pe-purple);
            font-size: 0;
        }

        .oferta-scenario.has-reveal > p {
            position: absolute;
            top: 59%;
            right: 28px;
            left: 28px;
            z-index: 1;
            font-size: 16px;
            line-height: 1.62;
            transform: translateY(calc(-50% + 10px));
        }

        .oferta-scenario.has-reveal:hover .oferta-scenario__summary,
        .oferta-scenario.has-reveal.is-expanded .oferta-scenario__summary {
            top: 28px;
            transform: translateY(0);
        }

        .oferta-scenario.has-reveal:hover h3,
        .oferta-scenario.has-reveal.is-expanded h3 {
            font-size: 24px;
        }

        .oferta-scenario.has-reveal:hover > p,
        .oferta-scenario.has-reveal.is-expanded > p {
            max-height: 13rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(-50%);
        }

        .oferta-scenario.has-reveal:hover .oferta-scenario__toggle::after {
            transform: rotate(180deg);
        }

        /* Shared service benefit cards: a compact icon-and-title state keeps
           the four-card strip scannable while retaining the full copy. */
        .service-benefit-card.has-reveal {
            height: 330px;
            min-height: 330px;
            display: block;
        }

        .service-benefit-card.has-reveal .service-benefit-card__summary {
            position: absolute;
            top: 50%;
            right: 26px;
            left: 26px;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            transform: translateY(-50%);
            transition: top .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .service-benefit-card.has-reveal .service-benefit-card__icon {
            transform: none;
        }

        .service-benefit-card.has-reveal .service-benefit-card__icon svg {
            width: 76px;
            height: 76px;
            transition: width .36s cubic-bezier(.2,.8,.2,1), height .36s cubic-bezier(.2,.8,.2,1);
        }

        .service-benefit-card.has-reveal .service-benefit-card__title {
            font-size: clamp(28px, 2.2vw, 34px);
            line-height: 1.06;
            transition: font-size .32s ease;
        }

        .service-benefit-card.has-reveal .service-benefit-card__toggle {
            position: absolute;
            right: 0;
            bottom: 0;
            gap: 0;
            color: var(--pe-purple);
            font-size: 0;
        }

        .service-benefit-card.has-reveal > p {
            position: absolute;
            top: 61%;
            right: 26px;
            left: 26px;
            z-index: 1;
            font-size: 15.5px;
            line-height: 1.62;
            transform: translateY(calc(-50% + 10px));
        }

        .service-benefit-card.has-reveal:hover .service-benefit-card__summary,
        .service-benefit-card.has-reveal.is-expanded .service-benefit-card__summary {
            top: 28px;
            transform: translateY(0);
        }

        .service-benefit-card.has-reveal:hover .service-benefit-card__icon,
        .service-benefit-card.has-reveal.is-expanded .service-benefit-card__icon {
            transform: none;
            color: var(--pe-orange);
        }

        .service-benefit-card.has-reveal:hover .service-benefit-card__icon svg,
        .service-benefit-card.has-reveal.is-expanded .service-benefit-card__icon svg {
            width: 48px;
            height: 48px;
        }

        .service-benefit-card.has-reveal:hover .service-benefit-card__title,
        .service-benefit-card.has-reveal.is-expanded .service-benefit-card__title {
            font-size: 22px;
        }

        .service-benefit-card.has-reveal:hover > p,
        .service-benefit-card.has-reveal.is-expanded > p {
            max-height: 14rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(-50%);
        }

        .service-benefit-card.has-reveal:hover .service-benefit-card__toggle::after {
            transform: rotate(180deg);
        }

        /* The realizacje process cards use the same information hierarchy,
           with a little more room for their longer operational descriptions. */
        .realizacje-system-card.has-reveal {
            height: 390px;
            min-height: 390px;
            display: block;
        }

        .realizacje-system-card.has-reveal .realizacje-system-card__summary {
            position: absolute;
            top: 50%;
            right: 28px;
            left: 28px;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
            transform: translateY(-50%);
            transition: top .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .realizacje-system-card.has-reveal .realizacje-system-card__icon {
            transform: none;
        }

        .realizacje-system-card.has-reveal .realizacje-system-card__icon svg {
            width: 84px;
            height: 84px;
            transition: width .36s cubic-bezier(.2,.8,.2,1), height .36s cubic-bezier(.2,.8,.2,1);
        }

        .realizacje-system-card.has-reveal .realizacje-system-card__title {
            font-size: clamp(28px, 2.25vw, 34px);
            line-height: 1.08;
            transition: font-size .32s ease;
        }

        .realizacje-system-card.has-reveal .realizacje-system-card__toggle {
            position: absolute;
            right: 0;
            bottom: 0;
            gap: 0;
            color: var(--pe-orange-dark);
            font-size: 0;
        }

        .realizacje-system-card.has-reveal > p {
            position: absolute;
            top: 60%;
            right: 28px;
            left: 28px;
            z-index: 1;
            font-size: 15.5px;
            line-height: 1.62;
            transform: translateY(calc(-50% + 10px));
        }

        .realizacje-system-card.has-reveal:hover .realizacje-system-card__summary,
        .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__summary {
            top: 30px;
            transform: translateY(0);
        }

        .realizacje-system-card.has-reveal:hover .realizacje-system-card__icon,
        .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__icon {
            transform: none;
        }

        .realizacje-system-card.has-reveal:hover .realizacje-system-card__icon svg,
        .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__icon svg {
            width: 52px;
            height: 52px;
        }

        .realizacje-system-card.has-reveal:hover .realizacje-system-card__title,
        .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__title {
            font-size: 23px;
        }

        .realizacje-system-card.has-reveal:hover > p,
        .realizacje-system-card.has-reveal.is-expanded > p {
            max-height: 16rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(-50%);
        }

        .realizacje-system-card.has-reveal:hover .realizacje-system-card__toggle::after {
            transform: rotate(180deg);
        }

        /* Investment process timeline */
        .step.has-reveal {
            position: relative;
            height: 220px;
            min-height: 220px;
            grid-template-columns: 140px minmax(0, 1fr);
            gap: 28px;
            padding: 0 34px 0 0;
            align-items: center;
            overflow: hidden;
        }

        .step.has-reveal::before {
            content: "";
            position: absolute;
            top: calc(50% - 43px);
            left: 27px;
            width: 86px;
            height: 86px;
            border-radius: 22px;
            background: var(--pe-purple);
            transition: top .42s cubic-bezier(.2,.8,.2,1), left .42s cubic-bezier(.2,.8,.2,1), width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1), border-radius .42s cubic-bezier(.2,.8,.2,1);
        }

        .step.has-reveal .step__number {
            position: relative;
            z-index: 1;
            justify-self: center;
            align-self: center;
            background: transparent;
        }

        .step.has-reveal .step__content {
            position: relative;
            z-index: 1;
            align-self: stretch;
            min-height: 220px;
        }

        .step.has-reveal .step__content h3 {
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            margin: 0;
            font-size: clamp(28px, 2.7vw, 38px);
            line-height: 1.04;
            transform: translateY(-50%);
            transition: top .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1), font-size .3s ease;
        }

        .step.has-reveal .step__toggle {
            position: absolute;
            bottom: 30px;
            right: 0;
            left: auto;
            color: var(--pe-purple);
            font-size: 0;
        }

        .step.has-reveal .step__content > p {
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            font-size: 15px;
            line-height: 1.58;
            transform: translateY(calc(-50% + 10px));
        }

        .step.has-reveal:hover .step__content h3,
        .step.has-reveal.is-expanded .step__content h3 {
            top: 32px;
            font-size: 24px;
            transform: translateY(0);
        }

        .step.has-reveal:hover::before,
        .step.has-reveal.is-expanded::before {
            top: 0;
            left: 0;
            width: 140px;
            height: 100%;
            border-radius: 21px 0 0 21px;
        }

        .step.has-reveal:hover .step__content > p,
        .step.has-reveal.is-expanded .step__content > p {
            max-height: 12rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(-50%);
        }

        .step.has-reveal:hover .step__toggle::after {
            transform: rotate(180deg);
        }
    }

    /* Oferta scenarios use an explicit grid on desktop. Gutenberg's flex
       columns otherwise size themselves from the longest heading, producing
       unequal rows. This layout also works on wide touch devices. */
    @media (min-width: 901px) {
        .oferta-scenarios .wp-block-columns {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 28px;
            width: 100% !important;
            max-width: none !important;
            margin-inline: 0 !important;
        }

        .oferta-scenarios .wp-block-column {
            min-width: 0;
            width: auto !important;
            flex-basis: auto !important;
        }

        .oferta-scenarios .oferta-scenario.has-reveal {
            width: 100%;
            height: 320px;
            min-height: 320px;
            transform: none !important;
        }

        .oferta-scenarios .oferta-scenario.has-reveal .oferta-scenario__summary {
            position: absolute;
            top: 50%;
            right: 28px;
            left: 28px;
            z-index: 1;
            transform: translateY(-50%);
            transition: top .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .oferta-scenarios .oferta-scenario.has-reveal h3 {
            margin: 0;
            font-size: clamp(30px, 2.6vw, 38px);
            line-height: 1.06;
            transition: font-size .32s ease;
        }

        .oferta-scenarios .oferta-scenario.has-reveal .oferta-scenario__toggle {
            position: absolute;
            right: auto;
            bottom: 28px;
            left: 28px;
            z-index: 2;
            gap: 0;
            color: var(--pe-purple);
            font-size: 0;
        }

        .oferta-scenarios .oferta-scenario.has-reveal > p {
            position: absolute;
            top: 59%;
            right: 28px;
            left: 28px;
            z-index: 1;
            font-size: 16px;
            line-height: 1.62;
            transform: translateY(calc(-50% + 10px));
        }

        .oferta-scenarios .oferta-scenario.has-reveal:hover .oferta-scenario__summary,
        .oferta-scenarios .oferta-scenario.has-reveal.is-expanded .oferta-scenario__summary {
            top: 28px;
            transform: translateY(0);
        }

        .oferta-scenarios .oferta-scenario.has-reveal:hover h3,
        .oferta-scenarios .oferta-scenario.has-reveal.is-expanded h3 {
            font-size: 27px;
        }

        .oferta-scenarios .oferta-scenario.has-reveal:hover > p,
        .oferta-scenarios .oferta-scenario.has-reveal.is-expanded > p {
            max-height: 13rem;
            margin-top: 0;
            opacity: 1;
            transform: translateY(-50%);
        }

        .oferta-scenarios .oferta-scenario.has-reveal:hover .oferta-scenario__toggle::after {
            transform: rotate(180deg);
        }

        /* Realizacje: an icon-led, centered resting state turns into a
           top-aligned heading and detail state without reflowing the grid. */
        .realizacje-system-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: 100%;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal {
            position: relative;
            width: 100%;
            min-width: 0;
            height: 470px;
            min-height: 470px;
            padding: 0;
            transform: none !important;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal .realizacje-system-card__summary {
            position: absolute;
            top: 50%;
            right: 28px;
            left: 28px;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            transform: translateY(-50%);
            transition: top .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal .realizacje-system-card__icon {
            margin: 0;
            transform: none;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal .realizacje-system-card__icon svg {
            width: 96px;
            height: 96px;
            transition: width .36s cubic-bezier(.2,.8,.2,1), height .36s cubic-bezier(.2,.8,.2,1);
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal .realizacje-system-card__title {
            margin: 0;
            font-size: clamp(30px, 2.25vw, 36px);
            line-height: 1.08;
            transform-origin: left top;
            transition: transform .32s ease;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal .realizacje-system-card__toggle {
            position: absolute;
            right: 28px;
            bottom: 28px;
            left: auto;
            z-index: 2;
            gap: 0;
            color: var(--pe-orange-dark);
            font-size: 0;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal > .realizacje-system-card__text {
            position: absolute;
            top: 210px;
            right: 28px;
            bottom: 68px;
            left: 28px;
            z-index: 1;
            margin-top: 0;
            font-size: 15px;
            line-height: 1.58;
            transform: translateY(12px);
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal:hover .realizacje-system-card__summary,
        .realizacje-system-grid .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__summary {
            top: 30px;
            transform: translateY(0);
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal:hover .realizacje-system-card__icon,
        .realizacje-system-grid .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__icon {
            transform: none;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal:hover .realizacje-system-card__icon svg,
        .realizacje-system-grid .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__icon svg {
            width: 52px;
            height: 52px;
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal:hover .realizacje-system-card__title,
        .realizacje-system-grid .realizacje-system-card.has-reveal.is-expanded .realizacje-system-card__title {
            transform: scale(.72);
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal:hover > .realizacje-system-card__text,
        .realizacje-system-grid .realizacje-system-card.has-reveal.is-expanded > .realizacje-system-card__text {
            max-height: 15rem;
            margin-top: 22px;
            opacity: 1;
            transform: translateY(0);
        }

        .realizacje-system-grid .realizacje-system-card.has-reveal:hover .realizacje-system-card__toggle::after {
            transform: rotate(180deg);
        }

        /* Shared benefits on all service pages: two wide cards per row keep
           headings, copy and the reveal control comfortably inside the grid. */
        .service-benefits__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100% !important;
            max-width: none !important;
            gap: 28px;
        }

        .service-benefits__grid .service-benefit-card.has-reveal {
            position: relative;
            width: 100%;
            min-width: 0;
            height: 440px;
            min-height: 440px;
            padding: 0;
            transform: none !important;
        }

        .service-benefits__grid .service-benefit-card.has-reveal .service-benefit-card__summary {
            position: absolute;
            top: 50%;
            right: 30px;
            left: 30px;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            transform: translateY(-50%);
            transition: top .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .service-benefits__grid .service-benefit-card.has-reveal .service-benefit-card__icon {
            transform: none;
        }

        .service-benefits__grid .service-benefit-card.has-reveal .service-benefit-card__icon svg {
            width: 92px;
            height: 92px;
            transition: width .36s cubic-bezier(.2,.8,.2,1), height .36s cubic-bezier(.2,.8,.2,1);
        }

        .service-benefits__grid .service-benefit-card.has-reveal .service-benefit-card__title {
            margin: 0;
            font-size: clamp(30px, 2.3vw, 36px);
            line-height: 1.08;
            transform-origin: left top;
            transition: transform .32s ease;
        }

        .service-benefits__grid .service-benefit-card.has-reveal .service-benefit-card__toggle {
            position: absolute;
            bottom: 28px;
            left: 30px;
            z-index: 2;
            gap: 0;
            color: var(--pe-purple);
            font-size: 0;
        }

        .service-benefits__grid .service-benefit-card.has-reveal .service-benefit-card__text {
            width: 100%;
            max-height: 0;
            margin: 0;
            overflow: hidden;
            font-size: 16px;
            line-height: 1.62;
            opacity: 0;
            transform: translateY(12px);
            transition: max-height .42s cubic-bezier(.2,.8,.2,1), margin-top .32s ease, opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1);
        }

        .service-benefits__grid .service-benefit-card.has-reveal:hover .service-benefit-card__summary,
        .service-benefits__grid .service-benefit-card.has-reveal.is-expanded .service-benefit-card__summary {
            top: 30px;
            transform: translateY(0);
        }

        .service-benefits__grid .service-benefit-card.has-reveal:hover .service-benefit-card__icon,
        .service-benefits__grid .service-benefit-card.has-reveal.is-expanded .service-benefit-card__icon {
            transform: none;
            color: var(--pe-orange);
        }

        .service-benefits__grid .service-benefit-card.has-reveal:hover .service-benefit-card__icon svg,
        .service-benefits__grid .service-benefit-card.has-reveal.is-expanded .service-benefit-card__icon svg {
            width: 52px;
            height: 52px;
        }

        .service-benefits__grid .service-benefit-card.has-reveal:hover .service-benefit-card__title,
        .service-benefits__grid .service-benefit-card.has-reveal.is-expanded .service-benefit-card__title {
            /* Keep the original line breaks intact; visual scaling avoids
               recalculating the text layout when the description appears. */
            transform: scale(.78);
        }

        .service-benefits__grid .service-benefit-card.has-reveal:hover .service-benefit-card__text,
        .service-benefits__grid .service-benefit-card.has-reveal.is-expanded .service-benefit-card__text {
            max-height: 15rem;
            margin-top: 34px;
            opacity: 1;
            transform: translateY(0);
        }

        .service-benefits__grid .service-benefit-card.has-reveal:hover .service-benefit-card__toggle::after {
            transform: rotate(180deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .offer-block,
        .offer-block > strong,
        .offer-block > span,
        .offer-block__toggle::after,
        .usp-card,
        .usp-card__summary,
        .usp-card__icon,
        .usp-card__icon svg,
        .usp-card > p,
        .usp-card__toggle::after,
        .oferta-scenario,
        .oferta-scenario::before,
        .oferta-scenario__summary,
        .oferta-scenario h3,
        .oferta-scenario > p,
        .oferta-scenario__toggle::after,
        .service-benefit-card,
        .service-benefit-card::after,
        .service-benefit-card__summary,
        .service-benefit-card__icon,
        .service-benefit-card__icon svg,
        .service-benefit-card__title,
        .service-benefit-card__text,
        .service-benefit-card__toggle::after,
        .realizacje-system-card,
        .realizacje-system-card::after,
        .realizacje-system-card__summary,
        .realizacje-system-card__icon,
        .realizacje-system-card__icon svg,
        .realizacje-system-card__title,
        .realizacje-system-card__text,
        .realizacje-system-card__toggle::after,
        .step,
        .step::before,
        .step__number,
        .step__content h3,
        .step__content > p,
        .step__toggle::after {
            transition: none !important;
        }
    }

    /* Homepage USP bento: the two lead cards share the first row, leaving
       enough measure for their larger reveal copy. The three medium cards
       retain a balanced three-column row underneath. */
    @media (min-width: 1301px) {
        #wyrozniki .usp-card--hero,
        #wyrozniki .usp-card--purple.usp-card--narrow,
        #wyrozniki .usp-card:nth-of-type(6),
        #wyrozniki .usp-card--service.usp-card--support {
            grid-column: span 6;
        }
    }

    /* BESS decision sections: concise, data-led content that explains the
       analysis without turning the service page into an Excel export. */
    .bess-analysis__table-wrap {
        margin-top: 48px;
        overflow-x: auto;
        border: 1px solid var(--pe-line);
        border-radius: 24px;
        background: var(--pe-white);
        box-shadow: 0 16px 38px rgba(27, 22, 45, 0.06);
    }

    .bess-analysis__table {
        width: 100%;
        min-width: 820px;
        border-collapse: collapse;
        text-align: left;
    }

    .bess-analysis__table th,
    .bess-analysis__table td {
        padding: 22px 26px;
        vertical-align: top;
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-analysis__table thead th {
        background: var(--pe-purple);
        color: var(--pe-white);
        font-family: var(--pe-font-display);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
    }

    .bess-analysis__table thead th:first-child {
        border-radius: 23px 0 0 0;
    }

    .bess-analysis__table thead th:last-child {
        border-radius: 0 23px 0 0;
    }

    .bess-analysis__table tbody tr:last-child th,
    .bess-analysis__table tbody tr:last-child td {
        border-bottom: 0;
    }

    .bess-analysis__table tbody th {
        width: 25%;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 18px;
        line-height: 1.2;
    }

    .bess-analysis__table td {
        width: 37.5%;
        color: var(--pe-text);
        font-size: 16px;
        line-height: 1.58;
    }

    .bess-variants__formula {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px 18px;
        margin-top: 50px;
        padding: 18px 24px;
        border: 1px solid rgba(50, 34, 113, 0.14);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.6);
        color: var(--pe-purple);
        text-align: center;
    }

    .bess-variants__formula strong {
        font-family: var(--pe-font-display);
        font-size: clamp(19px, 1.7vw, 24px);
        line-height: 1.15;
    }

    .bess-variants__formula span {
        color: var(--pe-orange);
        font-family: var(--pe-font-display);
        font-size: 28px;
        line-height: 1;
    }

    .bess-variants__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin-top: 28px;
    }

    .bess-variant {
        min-width: 0;
        padding: 30px;
        border: 1px solid var(--pe-line);
        border-radius: 22px;
        background: var(--pe-white);
    }

    .bess-variant__number,
    .bess-decision__item > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 32px;
        padding-inline: 10px;
        border-radius: 999px;
        background: rgba(255, 150, 0, 0.14);
        color: var(--pe-orange);
        font-family: var(--pe-font-display);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .06em;
    }

    .bess-variant h3,
    .bess-decision__item h3 {
        margin: 20px 0 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: clamp(24px, 2vw, 30px);
        line-height: 1.08;
    }

    .bess-variant p,
    .bess-decision__item p {
        margin: 18px 0 0;
        color: var(--pe-text);
        font-size: 16px;
        line-height: 1.62;
    }

    .bess-variants__note {
        max-width: 920px;
        margin: 32px 0 0;
        color: var(--pe-text);
        font-size: 17px;
        line-height: 1.62;
    }

    .bess-decision__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        margin-top: 48px;
        overflow: hidden;
        border: 1px solid var(--pe-line);
        border-radius: 24px;
        background: var(--pe-line);
    }

    .bess-decision__item {
        min-width: 0;
        padding: 32px;
        background: var(--pe-white);
    }

    .bess-decision__closing {
        max-width: 900px;
        margin: 32px 0 0;
        color: var(--pe-purple);
        font-size: 18px;
        line-height: 1.58;
    }

    @media (max-width: 760px) {
        .bess-analysis__table-wrap {
            margin-top: 32px;
            border-radius: 18px;
        }

        .bess-analysis__table th,
        .bess-analysis__table td {
            padding: 18px 20px;
        }

        .bess-variants__formula {
            margin-top: 32px;
            padding: 18px;
        }

        .bess-variants__grid,
        .bess-decision__grid {
            grid-template-columns: 1fr;
        }

        .bess-variant,
        .bess-decision__item {
            padding: 26px;
        }

        .bess-decision__grid {
            margin-top: 32px;
            border-radius: 18px;
        }
    }

    /* The BESS analysis is deliberately locked to the theme's main content
       column. Its data visualisations are compact, explanatory and clearly
       marked as a model rather than a promise of a universal result. */
    .bess-analysis > *,
    .bess-variants > * {
        grid-column: 1;
        width: 100%;
    }

    .bess-visual {
        display: grid;
        grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
        gap: 28px;
        margin-top: 48px;
        padding: 28px;
        border: 1px solid var(--pe-line);
        border-radius: 26px;
        background: var(--pe-white);
        box-shadow: 0 16px 38px rgba(27, 22, 45, 0.06);
    }

    .bess-visual__chart {
        min-width: 0;
        margin: 0;
    }

    .bess-visual__chart figcaption,
    .bess-example__comparison figcaption {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
    }

    .bess-visual__chart figcaption span {
        display: block;
        margin-top: 5px;
        color: var(--pe-text-muted);
        font-family: var(--pe-font-body);
        font-size: 14px;
        font-weight: 500;
    }

    .bess-visual__chart svg {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 14px;
    }

    .bess-visual__grid-lines path {
        fill: none;
        stroke: rgba(50, 34, 113, 0.12);
        stroke-width: 1;
    }

    .bess-visual__load-area { fill: rgba(50, 34, 113, 0.08); }
    .bess-visual__pv-area { fill: url(#peBessPv); }
    .bess-visual__battery-area { fill: url(#peBessBattery); }

    .bess-visual__load-line,
    .bess-visual__pv-line,
    .bess-visual__battery-line {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    .bess-visual__load-line { stroke: var(--pe-purple); }
    .bess-visual__pv-line { stroke: var(--pe-orange); }
    .bess-visual__battery-line { stroke: #7158ed; stroke-dasharray: 7 7; }

    .bess-visual__labels text {
        fill: var(--pe-text-muted);
        font-family: var(--pe-font-body);
        font-size: 13px;
    }

    .bess-visual__legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        margin-top: 2px;
        color: var(--pe-text);
        font-size: 14px;
    }

    .bess-visual__legend span::before {
        content: "";
        display: inline-block;
        width: 9px;
        height: 9px;
        margin-right: 7px;
        border-radius: 50%;
    }

    .bess-visual__legend--load::before { background: var(--pe-purple); }
    .bess-visual__legend--pv::before { background: var(--pe-orange); }
    .bess-visual__legend--battery::before { background: #7158ed; }

    .bess-visual__signals {
        display: grid;
        align-content: center;
        gap: 1px;
        overflow: hidden;
        border: 1px solid var(--pe-line);
        border-radius: 18px;
        background: var(--pe-line);
    }

    .bess-visual__signals p {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 13px;
        align-items: start;
        margin: 0;
        padding: 22px;
        background: var(--pe-white);
        color: var(--pe-text);
        font-size: 15px;
        line-height: 1.48;
    }

    .bess-visual__signals strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: rgba(255, 150, 0, 0.14);
        color: var(--pe-orange);
        font-family: var(--pe-font-display);
        font-size: 15px;
    }

    .bess-visual__signals b {
        display: block;
        margin-bottom: 5px;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 18px;
        line-height: 1.1;
    }

    .bess-example {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        margin-top: 48px;
    }

    .bess-example__metrics {
        display: grid;
        gap: 1px;
        overflow: hidden;
        border: 1px solid var(--pe-line);
        border-radius: 24px;
        background: var(--pe-line);
    }

    .bess-example__metrics p {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin: 0;
        padding: 24px 28px;
        background: var(--pe-white);
    }

    .bess-example__metrics span {
        color: var(--pe-text);
        font-size: 15px;
        line-height: 1.35;
    }

    .bess-example__metrics strong {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: clamp(24px, 2.2vw, 32px);
        line-height: 1;
        text-align: right;
        white-space: nowrap;
    }

    .bess-example__comparison {
        display: grid;
        gap: 24px;
        padding: 28px;
        border-radius: 24px;
        background: var(--pe-purple);
        color: var(--pe-white);
    }

    .bess-example__comparison figcaption {
        color: var(--pe-white);
        font-size: 18px;
    }

    .bess-example__bar-row {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr) 42px;
        gap: 10px;
        align-items: center;
        margin-top: 12px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
    }

    .bess-example__bar-row > div {
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
    }

    .bess-example__bar-row i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: rgba(255, 255, 255, 0.62);
        transform: scaleX(1);
        transform-origin: left center;
        transition: transform .85s cubic-bezier(.2, .8, .2, 1);
    }

    .bess-example__bar-row b {
        color: var(--pe-white);
        font-family: var(--pe-font-display);
        font-size: 17px;
        text-align: right;
    }

    .bess-example__bar-row--accent i { background: var(--pe-orange); }

    .bess-example__comparison.has-bar-animation .bess-example__bar-row i {
        transform: scaleX(0);
    }

    .bess-example__comparison.has-bar-animation.is-bar-animated .bess-example__bar-row i {
        transform: scaleX(1);
    }

    .bess-example__comparison.has-bar-animation.is-bar-animated .bess-example__bar-row:nth-of-type(2) i {
        transition-delay: .14s;
    }

    @media (prefers-reduced-motion: reduce) {
        .bess-example__bar-row i {
            transition: none;
        }

        .bess-example__comparison.has-bar-animation .bess-example__bar-row i {
            transform: none;
        }
    }

    .bess-example__table-wrap {
        grid-column: 1 / -1;
        overflow-x: auto;
        border: 1px solid var(--pe-line);
        border-radius: 24px;
        background: var(--pe-white);
    }

    .bess-example__table {
        width: 100%;
        min-width: 680px;
        border-collapse: collapse;
        text-align: left;
    }

    .bess-example__table th,
    .bess-example__table td {
        padding: 18px 26px;
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-example__table thead th {
        background: var(--pe-purple);
        color: var(--pe-white);
        font-family: var(--pe-font-display);
        font-size: 17px;
        line-height: 1.2;
    }

    .bess-example__table thead th:first-child { border-radius: 23px 0 0 0; }
    .bess-example__table thead th:last-child { border-radius: 0 23px 0 0; }
    .bess-example__table tbody tr:last-child th,
    .bess-example__table tbody tr:last-child td { border-bottom: 0; }

    .bess-example__table tbody th {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 17px;
    }

    .bess-example__table td {
        color: var(--pe-text);
        font-size: 16px;
    }

    .bess-example__table td:last-child {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 18px;
    }

    .bess-example__footnote {
        grid-column: 1 / -1;
        max-width: 920px;
        margin: -10px 0 0;
        color: var(--pe-text-muted);
        font-size: 13px;
        line-height: 1.5;
    }

    @media (max-width: 900px) {
        .bess-visual,
        .bess-example {
            grid-template-columns: 1fr;
        }

        .bess-visual {
            margin-top: 32px;
            padding: 20px;
            border-radius: 20px;
        }

        .bess-example {
            margin-top: 32px;
        }
    }

    @media (max-width: 560px) {
        .bess-visual__signals p,
        .bess-example__metrics p,
        .bess-example__comparison {
            padding: 20px;
        }

        .bess-example__metrics p {
            display: block;
        }

        .bess-example__metrics strong {
            display: block;
            margin-top: 8px;
            text-align: left;
        }

        .bess-example__table-wrap {
            border-radius: 18px;
        }
    }

    /* Keep the BESS section headings and their leads on the same left edge
       as the visual modules below them. */
    .bess-analysis > .is-style-pe-title,
    .bess-analysis > .is-style-pe-lead,
    .bess-variants > .is-style-pe-title-large,
    .bess-variants > .is-style-pe-lead {
        justify-self: start;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
    }

    /* Two new BESS photographs complete the third bento row without leaving
       a visual gap at desktop width. */
    .bess-gallery > figure:nth-child(6),
    .bess-gallery > figure:nth-child(7) {
        grid-column: span 2;
    }

    .bess-visual__signals {
        align-content: stretch;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .bess-visual__signals p {
        min-height: 128px;
        padding: 30px 22px;
    }

    .bess-example__table tbody tr:last-child th,
    .bess-example__table tbody tr:last-child td {
        border-bottom: 0;
    }

    @media (max-width: 900px) {
        .bess-gallery > figure:nth-child(6),
        .bess-gallery > figure:nth-child(7) {
            grid-column: span 1;
        }
    }

    /* BESS strategy cards use a duotone media panel as their visual header.
       The icon and title sit directly on the image; the long-form explanation
       remains in the white card body for comfortable reading. */
    .service-models--bess {
        padding-bottom: 108px !important;
    }

    .service-models--bess > .is-style-pe-title-large {
        justify-self: start;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
    }

    .service-models--bess .wp-block-columns {
        align-items: stretch;
    }

    .service-models--bess .wp-block-column {
        display: flex;
    }

    .service-models--bess .oferta-tile {
        display: flex;
        flex: 1;
        flex-direction: column;
        height: auto;
        min-height: 100%;
        padding: 0 !important;
        gap: 0;
        overflow: hidden;
    }

    .service-models--bess .oferta-tile::before,
    .service-models--bess .oferta-tile::after {
        display: none;
    }

    .service-models--bess .oferta-tile--bess-pv {
        --bess-card-duotone: var(--pe-orange);
    }

    .service-models--bess .oferta-tile--bess-standalone {
        --bess-card-duotone: var(--pe-purple);
    }

    .service-models--bess .oferta-tile__media {
        position: relative;
        align-self: stretch;
        flex: 0 0 auto;
        width: 100%;
        min-width: 100% !important;
        max-width: none !important;
        height: 320px;
        margin: 0 !important;
        overflow: hidden;
        border-radius: var(--pe-radius-md) var(--pe-radius-md) 0 0;
        background: var(--bess-card-duotone);
    }

    .service-models--bess .oferta-tile__media::before,
    .service-models--bess .oferta-tile__media::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .service-models--bess .oferta-tile__media::before {
        z-index: 1;
        background: var(--bess-card-duotone);
        mix-blend-mode: color;
        opacity: .94;
    }

    .service-models--bess .oferta-tile__media::after {
        z-index: 2;
        background: linear-gradient(180deg, rgba(24, 21, 37, 0.08) 0%, color-mix(in srgb, var(--bess-card-duotone) 52%, #000 48%) 100%);
    }

    .service-models--bess .oferta-tile__media img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        filter: grayscale(1) contrast(1.08);
        transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .service-models--bess .oferta-tile:hover .oferta-tile__media img {
        transform: scale(1.045);
    }

    .service-models--bess .oferta-tile__icon {
        position: absolute;
        top: 36px;
        left: 32px;
        z-index: 3;
        width: 108px !important;
        height: 108px !important;
        margin: 0 !important;
        color: var(--pe-white);
    }

    .service-models--bess .oferta-tile > h3 {
        position: absolute;
        top: 174px;
        right: 32px;
        bottom: auto;
        left: 32px;
        z-index: 3;
        margin: 0 !important;
        color: var(--pe-white);
        font-size: clamp(30px, 2.65vw, 42px);
        line-height: 1.02;
        text-align: left !important;
    }

    .service-models--bess .oferta-tile > p {
        margin: 26px 30px 32px !important;
    }

    @media (max-width: 640px) {
        /* Gutenberg keeps the inline 50% flex-basis on these two columns.
           Explicitly stack them so their desktop card widths cannot widen
           the document on narrow phones. */
        .service-models--bess .wp-block-columns {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
            width: 100% !important;
            max-width: none !important;
            margin-inline: 0 !important;
        }

        .service-models--bess .wp-block-column {
            width: auto !important;
            min-width: 0;
            flex-basis: auto !important;
        }

        .service-models--bess .oferta-tile__media {
            height: 280px;
        }

        .service-models--bess .oferta-tile__icon {
            top: 28px;
            left: 24px;
            width: 84px !important;
            height: 84px !important;
        }

        .service-models--bess .oferta-tile > h3 {
            top: 142px;
            right: 24px;
            bottom: auto;
            left: 24px;
            font-size: clamp(28px, 8vw, 36px);
        }

        .service-models--bess .oferta-tile > p {
            margin: 22px 24px 28px !important;
        }
    }

    /* BESS situations: three full-width, fixed-height operational cards.
       The card explains itself at a glance, then opens its supporting copy
       without shifting the surrounding layout. */
    .bess-situations .wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        width: 100% !important;
        max-width: none !important;
        margin: 52px 0 0 !important;
    }

    .bess-situations .wp-block-column {
        width: auto !important;
        min-width: 0;
        flex-basis: auto !important;
    }

    .bess-situation.has-reveal {
        position: relative;
        display: block;
        width: 100%;
        height: 320px;
        min-height: 320px;
        padding: 0 !important;
        overflow: hidden;
        isolation: isolate;
        background: var(--pe-white);
        border-color: var(--pe-line);
        box-shadow: 0 14px 34px rgba(27, 22, 45, 0.06);
        transition: box-shadow .32s ease, border-color .32s ease;
    }

    .bess-situation.has-reveal::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 178px;
        background: var(--pe-purple);
        z-index: 0;
        transition: background .32s ease;
    }

    .bess-situation.has-reveal .bess-situation__summary {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .bess-situation.has-reveal .oferta-tile__icon {
        position: absolute;
        top: 50%;
        left: 42px;
        width: 94px !important;
        height: 94px !important;
        margin: 0 !important;
        color: var(--pe-white);
        transform: translateY(-50%);
        transition: top .38s cubic-bezier(.2,.8,.2,1), left .38s cubic-bezier(.2,.8,.2,1), width .34s ease, height .34s ease, transform .38s cubic-bezier(.2,.8,.2,1);
    }

    .bess-situation.has-reveal .oferta-tile__icon svg {
        width: 100%;
        height: 100%;
    }

    .bess-situation__eyebrow {
        position: absolute;
        top: calc(50% - 48px);
        left: 224px;
        color: var(--pe-orange);
        font-family: var(--pe-font-display);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .1em;
        line-height: 1;
        text-transform: uppercase;
        transition: top .38s cubic-bezier(.2,.8,.2,1);
    }

    .bess-situation.has-reveal h3 {
        position: absolute;
        top: calc(50% - 10px);
        right: 72px;
        left: 224px;
        margin: 0;
        color: var(--pe-purple);
        font-size: clamp(34px, 3vw, 46px);
        line-height: 1.04;
        transform-origin: left top;
        transition: top .38s cubic-bezier(.2,.8,.2,1), transform .32s ease;
    }

    .bess-situation.has-reveal .bess-situation__summary > p {
        position: absolute;
        top: 124px;
        right: 72px;
        left: 224px;
        max-height: 0;
        margin: 0;
        overflow: hidden;
        color: var(--pe-text);
        font-size: 17px;
        line-height: 1.58;
        opacity: 0;
        transform: translateY(14px);
        transition: max-height .42s cubic-bezier(.2,.8,.2,1), opacity .25s ease, transform .42s cubic-bezier(.2,.8,.2,1);
    }

    .bess-situation.has-reveal .bess-situation__toggle {
        position: absolute;
        right: 28px;
        bottom: 28px;
        left: auto;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: fit-content;
        min-width: 44px;
        min-height: 44px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: var(--pe-purple);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .bess-situation.has-reveal .bess-situation__toggle::after {
        content: "↓";
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: 15px;
        line-height: 1;
        transition: transform .28s ease, background-color .28s ease;
    }

    .bess-situation.has-reveal:hover,
    .bess-situation.has-reveal.is-expanded {
        border-color: rgba(255, 150, 0, 0.55);
        box-shadow: 0 22px 52px rgba(27, 22, 45, 0.12);
    }

    .bess-situation.has-reveal:hover::before,
    .bess-situation.has-reveal.is-expanded::before {
        background: color-mix(in srgb, var(--pe-purple) 88%, #000 12%);
    }

    .bess-situation.has-reveal:hover .oferta-tile__icon,
    .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
        top: 38px;
        left: 61px;
        width: 56px !important;
        height: 56px !important;
        transform: translateY(0);
    }

    .bess-situation.has-reveal:hover .bess-situation__eyebrow,
    .bess-situation.has-reveal.is-expanded .bess-situation__eyebrow {
        top: 34px;
    }

    .bess-situation.has-reveal:hover h3,
    .bess-situation.has-reveal.is-expanded h3 {
        top: 59px;
        transform: scale(.8);
    }

    .bess-situation.has-reveal:hover .bess-situation__summary > p,
    .bess-situation.has-reveal.is-expanded .bess-situation__summary > p {
        max-height: 11rem;
        opacity: 1;
        transform: translateY(0);
    }

    .bess-situation.has-reveal:hover .bess-situation__toggle,
    .bess-situation.has-reveal.is-expanded .bess-situation__toggle {
        color: var(--pe-purple);
    }

    .bess-situation.has-reveal .bess-situation__toggle:hover::after,
    .bess-situation.has-reveal .bess-situation__toggle:focus-visible::after {
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    .bess-situation.has-reveal .bess-situation__toggle:focus-visible {
        outline: 3px solid color-mix(in srgb, currentColor 38%, transparent);
        outline-offset: 5px;
        border-radius: 4px;
    }

    .bess-situation.has-reveal:hover .bess-situation__toggle::after,
    .bess-situation.has-reveal.is-expanded .bess-situation__toggle::after {
        transform: rotate(180deg);
    }

    @media (max-width: 640px) {
        .bess-situations .wp-block-columns {
            margin-top: 34px !important;
        }

        .bess-situation.has-reveal {
            height: 460px;
            min-height: 460px;
        }

        .bess-situation.has-reveal::before {
            width: 100px;
        }

        .bess-situation.has-reveal .oferta-tile__icon {
            left: 20px;
            width: 62px !important;
            height: 62px !important;
        }

        .bess-situation__eyebrow,
        .bess-situation.has-reveal h3,
        .bess-situation.has-reveal .bess-situation__summary > p {
            right: 24px;
            left: 126px;
        }

        .bess-situation__eyebrow {
            top: calc(50% - 58px);
            font-size: 13px;
        }

        .bess-situation.has-reveal h3 {
            top: calc(50% - 22px);
            font-size: 31px;
        }

        .bess-situation.has-reveal:hover .oferta-tile__icon,
        .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
            top: 34px;
            left: 27px;
            width: 46px !important;
            height: 46px !important;
        }

        .bess-situation.has-reveal:hover .bess-situation__eyebrow,
        .bess-situation.has-reveal.is-expanded .bess-situation__eyebrow {
            top: 34px;
        }

        .bess-situation.has-reveal:hover h3,
        .bess-situation.has-reveal.is-expanded h3 {
            top: 57px;
        }

        .bess-situation.has-reveal .bess-situation__summary > p {
            top: 122px;
            font-size: 16px;
        }
    }

    /* Resting state keeps the icon light and unobtrusive. The left rail is
       introduced only on intent, then the icon reverses to white. */
    .bess-situation.has-reveal::before {
        background: transparent;
        transition: background .38s cubic-bezier(.2,.8,.2,1);
    }

    .bess-situation.has-reveal .oferta-tile__icon {
        color: var(--pe-purple);
        transition: top .38s cubic-bezier(.2,.8,.2,1), left .38s cubic-bezier(.2,.8,.2,1), width .34s ease, height .34s ease, color .3s ease, transform .38s cubic-bezier(.2,.8,.2,1);
    }

    .bess-situation.has-reveal:hover::before,
    .bess-situation.has-reveal.is-expanded::before {
        background: var(--pe-purple);
    }

    .bess-situation.has-reveal:hover .oferta-tile__icon,
    .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
        color: var(--pe-white);
    }

    .bess-situation.has-reveal .bess-situation__summary > p {
        right: 36px;
        left: 196px;
    }

    @media (max-width: 640px) {
        .bess-situation.has-reveal .bess-situation__summary > p {
            right: 18px;
            left: 116px;
        }
    }

    /* Keep the BESS rail independent from oferta-tile's circular glow and
       let the reveal wrapper use the entire horizontal card. */
    .bess-situation.has-reveal::before,
    .bess-situation.has-reveal:hover::before,
    .bess-situation.has-reveal.is-expanded::before {
        inset: 0 auto 0 0 !important;
        width: 240px;
        height: auto !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .bess-situation.has-reveal .bess-situation__summary {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .bess-situation.has-reveal .oferta-tile__icon,
    .bess-situation.has-reveal:hover .oferta-tile__icon,
    .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
        top: 50% !important;
        left: 81px !important;
        width: 78px !important;
        height: 78px !important;
        transform: translateY(-50%) !important;
    }

    .bess-situation__eyebrow {
        left: 282px;
    }

    .bess-situation.has-reveal h3 {
        left: 282px;
    }

    .bess-situation.has-reveal .bess-situation__summary > p {
        top: 132px;
        right: 36px;
        left: 282px;
        width: auto !important;
        max-width: none !important;
    }

    .bess-situation.has-reveal:hover .bess-situation__summary > p,
    .bess-situation.has-reveal.is-expanded .bess-situation__summary > p {
        max-height: 13rem;
    }

    @media (max-width: 640px) {
        .bess-situation.has-reveal::before,
        .bess-situation.has-reveal:hover::before,
        .bess-situation.has-reveal.is-expanded::before {
            width: 116px;
        }

        .bess-situation.has-reveal .oferta-tile__icon,
        .bess-situation.has-reveal:hover .oferta-tile__icon,
        .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
            top: 50% !important;
            left: 27px !important;
            width: 62px !important;
            height: 62px !important;
            transform: translateY(-50%) !important;
        }

        .bess-situation__eyebrow,
        .bess-situation.has-reveal h3,
        .bess-situation.has-reveal .bess-situation__summary > p {
            left: 146px;
        }

        .bess-situation.has-reveal .bess-situation__summary > p {
            top: 132px;
            right: 18px;
        }
    }

    .bess-situation.has-reveal {
        --bess-situation-rail: 172px;
        --bess-situation-icon: 78px;
    }

    .bess-situation.has-reveal::before,
    .bess-situation.has-reveal:hover::before,
    .bess-situation.has-reveal.is-expanded::before {
        width: var(--bess-situation-rail);
    }

    .bess-situation.has-reveal .oferta-tile__icon,
    .bess-situation.has-reveal:hover .oferta-tile__icon,
    .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
        left: calc((var(--bess-situation-rail) - var(--bess-situation-icon)) / 2) !important;
        width: var(--bess-situation-icon) !important;
        height: var(--bess-situation-icon) !important;
        transition: color .3s ease !important;
    }

    .bess-situation.has-reveal .oferta-tile__icon svg,
    .bess-situation.has-reveal:hover .oferta-tile__icon svg,
    .bess-situation.has-reveal.is-expanded .oferta-tile__icon svg {
        width: 100% !important;
        height: 100% !important;
    }

    @media (max-width: 640px) {
        .bess-situation.has-reveal {
            --bess-situation-rail: 116px;
            --bess-situation-icon: 62px;
        }
    }

    /* Override the generic round glow used by oferta-tile. BESS situations
       use a clean architectural side rail, which keeps every icon intact. */
    .bess-situation.has-reveal {
        height: 292px;
        min-height: 292px;
    }

    .bess-situation.has-reveal::before,
    .bess-situation.has-reveal:hover::before,
    .bess-situation.has-reveal.is-expanded::before {
        right: auto;
        bottom: 0;
        width: 172px;
        border-radius: 0 !important;
        transform: none !important;
    }

    .bess-situation.has-reveal .oferta-tile__icon {
        left: 47px;
        width: 78px !important;
        height: 78px !important;
    }

    .bess-situation__eyebrow {
        top: calc(50% - 42px);
        left: 214px;
    }

    .bess-situation.has-reveal h3 {
        top: calc(50% - 3px);
        right: 82px;
        left: 214px;
        font-size: clamp(32px, 2.65vw, 40px);
    }

    .bess-situation.has-reveal .bess-situation__summary > p {
        top: 116px;
        right: 82px;
        left: 214px;
    }

    .bess-situation.has-reveal:hover .oferta-tile__icon,
    .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
        top: 50% !important;
        left: 47px !important;
        width: 78px !important;
        height: 78px !important;
        transform: translateY(-50%) !important;
    }

    @media (max-width: 640px) {
        .bess-situation.has-reveal {
            height: 460px;
            min-height: 460px;
        }

        .bess-situation.has-reveal::before,
        .bess-situation.has-reveal:hover::before,
        .bess-situation.has-reveal.is-expanded::before {
            width: 100px;
        }

        .bess-situation.has-reveal .oferta-tile__icon {
            left: 20px;
            width: 62px !important;
            height: 62px !important;
        }

        .bess-situation__eyebrow,
        .bess-situation.has-reveal h3,
        .bess-situation.has-reveal .bess-situation__summary > p {
            right: 24px;
            left: 126px;
        }

        .bess-situation__eyebrow {
            top: calc(50% - 58px);
        }

        .bess-situation.has-reveal h3 {
            top: calc(50% - 22px);
            font-size: 31px;
        }

        .bess-situation.has-reveal:hover .oferta-tile__icon,
        .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
            top: 50% !important;
            left: 19px !important;
            width: 62px !important;
            height: 62px !important;
            transform: translateY(-50%) !important;
        }

        .bess-situation.has-reveal .bess-situation__summary > p {
            top: 122px;
            font-size: 16px;
        }
    }

    /* On touch devices BESS cards use natural document flow. The earlier
       fixed-height stage clipped long descriptions after expanding them. */
    @media (max-width: 640px) {
        .bess-situation.has-reveal {
            display: block;
            height: auto;
            min-height: 0;
            padding: 26px 24px 20px !important;
            overflow: hidden;
        }

        .bess-situation.has-reveal::before {
            display: none;
        }

        .bess-situation.has-reveal .bess-situation__summary {
            position: static;
            display: grid;
            gap: 12px;
            width: auto !important;
            max-width: none !important;
            margin: 0 !important;
        }

        .bess-situation.has-reveal .oferta-tile__icon,
        .bess-situation.has-reveal:hover .oferta-tile__icon,
        .bess-situation.has-reveal.is-expanded .oferta-tile__icon {
            position: static;
            width: 56px !important;
            height: 56px !important;
            margin: 0 !important;
            color: var(--pe-purple);
            transform: none !important;
        }

        .bess-situation__eyebrow,
        .bess-situation.has-reveal h3,
        .bess-situation.has-reveal .bess-situation__summary > p {
            position: static;
            right: auto;
            left: auto;
            width: auto !important;
            max-width: none !important;
        }

        .bess-situation__eyebrow,
        .bess-situation.has-reveal.is-expanded .bess-situation__eyebrow {
            margin: 0;
            color: var(--pe-orange-dark);
            font-size: 13px;
        }

        .bess-situation.has-reveal h3,
        .bess-situation.has-reveal.is-expanded h3 {
            margin: 0;
            color: var(--pe-purple);
            font-size: 28px;
            line-height: 1.08;
            transform: none;
        }

        .bess-situation.has-reveal .bess-situation__summary > p {
            max-height: 0;
            margin: 0;
            color: var(--pe-text);
            font-size: 16px;
            line-height: 1.62;
            opacity: 0;
            overflow: hidden;
            transform: translateY(10px);
        }

        .bess-situation.has-reveal.is-expanded .bess-situation__summary > p {
            max-height: 48rem;
            opacity: 1;
            transform: translateY(0);
        }

        .bess-situation.has-reveal .bess-situation__toggle {
            position: static;
            margin-top: 10px;
            color: var(--pe-purple);
        }
    }

    /* ─────────────────────────────────────────────────────────────────
       Offer rotator — 3 asynchroniczne kafelki z crossfade + Ken Burns.
       Osadzony w .offer-showcase pomiędzy boxem magazynu a „Połączony
       system". Każdy kafel ma dwie warstwy <img>: aktywna (widoczna,
       z animacją Ken Burns) oraz następcza (ładowana w tle, wchodzi
       przez opacity). JS zamienia rolami klasą --active, co restartuje
       animację Ken Burns na nowej warstwie. Zdjęcia pochodzą dynamicznie
       z galerii realizacji (shortcode [pure_energy_offer_rotator]).
       ───────────────────────────────────────────────────────────────── */
    .offer-rotator {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        margin-top: 8px;
    }

    .offer-rotator__tile {
        position: relative;
        margin: 0;
        border-radius: var(--pe-radius-md);
        overflow: hidden;
        aspect-ratio: 3 / 2;
        background: var(--pe-soft);
        box-shadow: var(--pe-shadow);
    }

    .offer-rotator__stage {
        position: absolute;
        inset: 0;
    }

    .offer-rotator__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: scale(1);
        /* Subtelne wzmocnienie zdjęć realizacji: lekkie podbicie nasycenia
           kolorów, kontrastu i jasności. Delikatny „lift" zachowujący
           naturalność, bez zmiany tonacji. */
        filter: saturate(1.15) contrast(1.05) brightness(1.02);
        /* Ken Burns jako transition (nie animation), żeby warstwa wychodząca
           płynnie wracała do scale(1) zamiast skakać przy usuwaniu klasy --active
           w połowie cyklu (interwał wymiany 3.5–6.5 s jest krótszy niż zoom). */
        transition: opacity 1.1s ease-in-out, transform 7s ease-out;
        will-change: opacity, transform;
    }

    .offer-rotator__img--active {
        opacity: 1;
        transform: scale(1.09);
    }

    @media (max-width: 900px) {
        .offer-rotator {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /* trzeci kafel rozciąga się na pełną szerokość, zachowując ratio */
        .offer-rotator__tile:nth-child(3) {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .offer-rotator {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .offer-rotator__tile:nth-child(3) {
            grid-column: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .offer-rotator__img {
            transition: opacity .25s ease-in-out;
            transform: none;
        }
        .offer-rotator__img--active {
            transform: none;
        }
    }

    /* ─────────────────────────────────────────────────────────────────
       PV Scenarios — karty scenariuszy inwestycyjnych z metrykami
       i wykresami (cashflow + profil dobowy). Osadzone na stronie
       instalacje-pv-dla-firm pomiędzy service-audience a service-references.
       Reużywa stylów metryk (.bess-example__metrics) i struktury
       wykresów (.bess-visual), ale z własnymi klasami .pv-scenario.
       ───────────────────────────────────────────────────────────────── */

    /* Override Gutenberg .is-layout-constrained > * { margin-inline: auto }
       — bloki wp:html (.pv-scenarios__disclaimer, .pv-scenario) muszą
       trzymać szerokość sekcji (1240px) i wyrównać do lewej, a nie centrować
       się jak content-width items. Sekcja rodzic ma już grid minmax(0,1240px),
       więc dzieci dziedziczą tę szerokość — wystarczy zresetować auto-marginy. */
    .pv-scenarios > .pv-scenarios__disclaimer,
    .pv-scenarios > .pv-scenario,
    .pv-scenarios > .wp-block-heading,
    .pv-scenarios > .is-style-pe-lead,
    .pv-scenarios > p {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Odstęp górny disclaimera — musi być tu (dziecko >, specyficzność 0,2,0),
       żeby wygrać z globalnym resetem .is-layout-constrained > * (0,1,1)
       który zeruje margin-block-start na dzieciach layoutu. */
    .pv-scenarios > .pv-scenarios__disclaimer {
        margin-top: 28px !important;
    }

    .pv-scenarios__disclaimer {
        box-sizing: border-box;
        padding: 14px 20px;
        border-left: 3px solid var(--pe-orange);
        background: var(--pe-soft);
        border-radius: 0 12px 12px 0;
        color: var(--pe-muted);
        font-size: 14px;
        line-height: 1.55;
    }

    .pv-scenarios .pv-scenario {
        box-sizing: border-box;
        display: grid;
        gap: 28px;
        padding: 36px;
        margin-top: 36px !important;
        border: 1px solid var(--pe-line);
        border-radius: 28px;
        background: var(--pe-white);
        box-shadow: 0 16px 38px rgba(27, 22, 45, 0.06);
    }

    .pv-scenario__head {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pv-scenario__tag {
        align-self: flex-start;
        padding: 7px 16px;
        border-radius: 999px;
        background: rgba(255, 150, 0, 0.14);
        color: var(--pe-orange-dark);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .pv-scenario:nth-child(even) .pv-scenario__tag {
        background: rgba(46, 32, 100, 0.10);
        color: var(--pe-purple);
    }

    .pv-scenario__title {
        margin: 0;
        font-family: var(--pe-font-display);
        font-size: clamp(22px, 2.4vw, 30px);
        line-height: 1.2;
        color: var(--pe-ink);
    }

    .pv-scenario__lead {
        margin: 0;
        max-width: 720px;
        color: var(--pe-text);
        font-size: 16px;
        line-height: 1.6;
    }

    .pv-scenario__metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        overflow: hidden;
        border: 1px solid var(--pe-line);
        border-radius: 20px;
        background: var(--pe-line);
    }

    .pv-scenario__metrics p {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
        padding: 20px 22px;
        background: var(--pe-white);
    }

    .pv-scenario__metrics span {
        color: var(--pe-muted);
        font-size: 13px;
        line-height: 1.35;
    }

    .pv-scenario__metrics strong {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: clamp(20px, 1.8vw, 26px);
        line-height: 1;
    }

    .pv-scenario__charts {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 24px;
    }

    .pv-cashflow,
    .pv-scenario__profile {
        margin: 0;
        padding: 24px;
        border: 1px solid var(--pe-line);
        border-radius: 20px;
        background: var(--pe-soft);
    }

    .pv-cashflow figcaption,
    .pv-scenario__profile figcaption {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.25;
    }

    .pv-cashflow figcaption span,
    .pv-scenario__profile figcaption span {
        display: block;
        margin-top: 4px;
        color: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 13px;
        font-weight: 500;
    }

    .pv-cashflow svg,
    .pv-scenario__profile svg {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 14px;
    }

    /* Cashflow chart elements */
    .pv-cashflow__grid path {
        fill: none;
        stroke: rgba(50, 34, 113, 0.10);
        stroke-width: 1;
    }

    .pv-cashflow__capex {
        stroke: var(--pe-purple);
        stroke-width: 2.5;
        stroke-dasharray: 8 6;
    }

    .pv-cashflow__line {
        fill: none;
        stroke: var(--pe-orange);
        stroke-width: 3.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pv-cashflow__break {
        fill: var(--pe-white);
        stroke: var(--pe-orange);
        stroke-width: 3;
    }

    .pv-cashflow__labels text {
        fill: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 12px;
    }

    .pv-cashflow__break-label {
        fill: var(--pe-orange-dark);
        font-weight: 700;
    }

    .pv-cashflow__axis-unit {
        font-style: italic;
        opacity: .8;
    }

    .pv-cashflow__legend,
    .pv-profile__legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        margin-top: 6px;
        color: var(--pe-text);
        font-size: 13px;
    }

    .pv-cashflow__legend span::before,
    .pv-profile__legend span::before {
        content: "";
        display: inline-block;
        width: 9px;
        height: 9px;
        margin-right: 7px;
        border-radius: 50%;
    }

    .pv-cashflow__legend--save::before { background: var(--pe-orange); }
    .pv-cashflow__legend--capex::before {
        background: transparent;
        border: 2px dashed var(--pe-purple);
    }

    /* Daily profile chart elements */
    .pv-profile__grid path {
        fill: none;
        stroke: rgba(50, 34, 113, 0.12);
        stroke-width: 1;
    }

    .pv-profile__load-line {
        stroke: var(--pe-purple);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pv-profile__pv-line {
        stroke: var(--pe-orange);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pv-profile__hours {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
        padding: 0 12px;
        color: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 12px;
    }

    .pv-profile__legend--load::before { background: var(--pe-purple); }
    .pv-profile__legend--pv::before { background: var(--pe-orange); }

    .pv-scenario__notes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 28px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pv-scenario__notes li {
        position: relative;
        padding-left: 20px;
        color: var(--pe-muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .pv-scenario__notes li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        width: 12px;
        height: 2px;
        background: var(--pe-orange);
        border-radius: 2px;
    }

    @media (max-width: 1180px) {
        .pv-scenario__charts {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {
        .pv-scenario__metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .pv-scenarios .pv-scenario {
            padding: 28px 24px;
        }
    }

    @media (max-width: 640px) {
        .pv-scenario__metrics {
            grid-template-columns: 1fr;
        }
        .pv-scenarios .pv-scenario {
            padding: 24px 18px;
            gap: 22px;
        }
    }

    /* BESS case study: one continuous story from the operating profile to
       the measurable model result. The chart scrolls only inside its leaf
       on narrow screens, so the page itself never gains horizontal overflow. */
    .bess-case-study > * {
        grid-column: 1;
        width: 100%;
    }

    .bess-case-study > .is-style-pe-title-large,
    .bess-case-study > .is-style-pe-lead {
        justify-self: start;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
    }

    .bess-case-study > .is-style-pe-lead {
        margin-bottom: 48px !important;
    }

    .bess-case-study__module {
        margin-top: 0;
        padding: 34px;
        border: 1px solid var(--pe-line);
        border-radius: var(--pe-radius-lg);
        background: var(--pe-white);
        box-shadow: var(--pe-shadow);
    }

    .bess-case-study__intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 28px;
        align-items: end;
    }

    .bess-case-study__eyebrow,
    .bess-case-study__panel-time {
        display: block;
        color: var(--pe-orange-dark);
        font-family: var(--pe-font-display);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .1em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .bess-case-study__intro h3 {
        margin: 10px 0 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: clamp(28px, 3vw, 40px);
        line-height: 1.08;
    }

    .bess-case-study__intro p {
        max-width: 660px;
        margin: 12px 0 0;
        color: var(--pe-text);
        font-size: 16px;
        line-height: 1.55;
    }

    .bess-case-study__profile {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        max-width: 390px;
    }

    .bess-case-study__profile span {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        padding: 10px 13px;
        border: 1px solid var(--pe-line);
        border-radius: 999px;
        background: var(--pe-soft);
        color: var(--pe-muted);
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }

    .bess-case-study__profile b {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 16px;
    }

    .bess-case-study__chart {
        margin: 32px 0 0;
        padding: 24px 24px 20px;
        border: 1px solid var(--pe-line);
        border-radius: var(--pe-radius-md);
        background: var(--pe-soft);
    }

    .bess-case-study__chart figcaption {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.2;
    }

    .bess-case-study__chart figcaption small {
        color: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 13px;
        font-weight: 500;
    }

    .bess-case-study__chart-note {
        max-width: 860px;
        margin: 9px 0 0;
        color: var(--pe-muted);
        font-size: 14px;
        line-height: 1.5;
    }

    .bess-case-study__chart-scroll {
        position: relative;
        min-width: 0;
    }

    .bess-case-study__chart-hours {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        margin: 4px 3% 0 7%;
        color: var(--pe-muted);
        font-size: 12px;
    }

    .bess-case-study__chart-hours span:nth-child(3),
    .bess-case-study__chart-hours span:nth-child(4) {
        text-align: center;
    }

    .bess-case-study__chart-hours span:last-child {
        text-align: right;
    }

    .bess-case-study__chart svg {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 12px;
    }

    .bess-case-study__chart-tooltips {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .bess-case-study__chart-tooltip {
        position: absolute;
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px;
        width: 25%;
        min-height: 82px;
        padding: 10px 11px;
        border: 1px solid rgba(46, 32, 100, .16);
        border-radius: 14px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 12px 24px rgba(27, 22, 45, .12);
        color: var(--pe-text);
        pointer-events: auto;
        outline: 0;
        transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
    }

    .bess-case-study__chart-tooltip::after {
        content: "";
        position: absolute;
        bottom: -24px;
        left: 24px;
        width: 2px;
        height: 24px;
        background: var(--pe-orange);
    }

    .bess-case-study__chart-tooltip--solar {
        top: 8%;
        left: 15%;
    }

    .bess-case-study__chart-tooltip--peak {
        top: 2%;
        left: 40%;
    }

    .bess-case-study__chart-tooltip--arbitrage {
        top: 8%;
        right: 5%;
    }

    .bess-case-study__tooltip-pin {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 10px;
        background: var(--pe-orange);
        color: var(--pe-ink);
        font-family: var(--pe-font-display);
        font-size: 12px;
        font-weight: 800;
    }

    .bess-case-study__chart-tooltip b {
        display: block;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 14px;
        line-height: 1.05;
    }

    .bess-case-study__chart-tooltip p {
        margin: 4px 0 0;
        color: var(--pe-text);
        font-size: 11px;
        line-height: 1.3;
    }

    .bess-case-study__chart-tooltip strong {
        display: block;
        margin-top: 5px;
        color: var(--pe-purple-2);
        font-size: 11px;
        line-height: 1.25;
    }

    .bess-case-study__chart-tooltip:hover,
    .bess-case-study__chart-tooltip:focus-visible {
        border-color: var(--pe-orange);
        box-shadow: 0 16px 30px rgba(27, 22, 45, .18);
        transform: translateY(-4px);
    }

    .bess-case-study__chart-tooltip:focus-visible {
        outline: 3px solid rgba(255, 150, 0, .38);
        outline-offset: 3px;
    }

    .bess-case-study__zone {
        opacity: .34;
    }

    #peBessZoneSolar {
        fill: rgba(255, 150, 0, .16);
    }

    #peBessZonePeak {
        fill: rgba(46, 32, 100, .08);
    }

    #peBessZoneArbitrage {
        fill: rgba(113, 88, 237, .08);
    }

    .bess-case-study__zone.is-highlighted {
        opacity: 1;
        fill: rgba(255, 150, 0, .24) !important;
    }

    .bess-case-study__module.has-motion .bess-case-study__chart-tooltip {
        opacity: 0;
        transform: translateY(14px) scale(.96);
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__chart-tooltip {
        animation: peBessTooltipIn .7s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__chart-tooltip--solar {
        animation-delay: .45s;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__chart-tooltip--peak {
        animation-delay: .72s;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__chart-tooltip--arbitrage {
        animation-delay: .99s;
    }

    .bess-case-study__module.has-motion .bess-case-study__load-line,
    .bess-case-study__module.has-motion .bess-case-study__pv-line,
    .bess-case-study__module.has-motion .bess-case-study__grid-line {
        stroke-dasharray: 1400;
        stroke-dashoffset: 1400;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__load-line,
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__pv-line,
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__grid-line {
        animation: peBessLineDraw 1.8s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__pv-line {
        animation-delay: .12s;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__grid-line {
        animation-delay: .24s;
    }

    .bess-case-study__module.has-motion .bess-case-study__pv-area {
        opacity: 0;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__pv-area {
        animation: peBessAreaIn .8s ease .15s forwards;
    }

    .bess-case-study__module.has-motion .bess-case-study__battery-bar {
        transform-box: fill-box;
        transform-origin: center bottom;
        transform: scaleY(0);
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar {
        animation: peBessBarIn .65s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar:nth-child(2) { animation-delay: .18s; }
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar:nth-child(3) { animation-delay: .3s; }
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar:nth-child(4) { animation-delay: .42s; }
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar:nth-child(5) { animation-delay: .54s; }
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar:nth-child(6) { animation-delay: .66s; }
    .bess-case-study__module.has-motion.is-revealed .bess-case-study__battery-bar:nth-child(7) { animation-delay: .78s; }

    @keyframes peBessLineDraw {
        to { stroke-dashoffset: 0; }
    }

    @keyframes peBessAreaIn {
        from { opacity: 0; }
        to { opacity: .16; }
    }

    @keyframes peBessBarIn {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }

    @keyframes peBessTooltipIn {
        from { opacity: 0; transform: translateY(14px) scale(.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .bess-case-study__grid-lines path {
        fill: none;
        stroke: rgba(46, 32, 100, .12);
        stroke-width: 1;
    }

    .bess-case-study__zone {
        fill: transparent;
        pointer-events: none;
        transition: fill .3s ease;
    }

    .bess-case-study__zone.is-active {
        fill: rgba(255, 150, 0, .12);
    }

    .bess-case-study__pv-area {
        fill: var(--pe-orange);
        opacity: .16;
    }

    .bess-case-study__pv-line {
        fill: none;
        stroke: var(--pe-orange);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    .bess-case-study__load-line,
    .bess-case-study__grid-line {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    .bess-case-study__load-line {
        stroke: var(--pe-purple);
    }

    .bess-case-study__grid-line {
        stroke: var(--pe-purple-2);
        stroke-dasharray: 8 7;
    }

    .bess-case-study__grid-variant {
        display: none;
        fill: none;
        stroke: var(--pe-purple-2);
        stroke-dasharray: 8 7;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    #peBessGridSolar,
    #peBessBatterySolar {
        display: block;
    }

    .bess-case-study__battery-variant {
        display: none;
    }

    .bess-case-study__module.is-interactive .bess-case-study__grid-variant:not(.is-active),
    .bess-case-study__module.is-interactive .bess-case-study__battery-variant:not(.is-active) {
        display: none;
    }

    .bess-case-study__module.is-interactive #peBessGridSolar:not(.is-active),
    .bess-case-study__module.is-interactive #peBessBatterySolar:not(.is-active) {
        display: none;
    }

    .bess-case-study__module.is-interactive .bess-case-study__grid-variant.is-active,
    .bess-case-study__module.is-interactive .bess-case-study__battery-variant.is-active {
        display: block;
    }

    .bess-case-study__battery-axis {
        fill: none;
        stroke: rgba(46, 32, 100, .25);
        stroke-width: 1;
    }

    .bess-case-study__battery-bar {
        transform-origin: center bottom;
        transition: opacity .3s ease, transform .3s ease;
    }

    .bess-case-study__battery-bar--charge {
        fill: var(--pe-orange);
    }

    .bess-case-study__battery-bar--discharge {
        fill: var(--pe-purple-2);
    }

    .bess-case-study__battery-label,
    .bess-case-study__labels text {
        fill: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 13px;
    }

    .bess-case-study__battery-label {
        fill: var(--pe-purple);
        font-size: 12px;
    }

    .bess-case-study__legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin-top: 4px;
        color: var(--pe-text);
        font-size: 13px;
    }

    .bess-case-study__legend-item::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 3px;
        margin: 0 7px 3px 0;
        border-radius: 999px;
        background: var(--pe-purple);
    }

    .bess-case-study__legend-item--pv::before {
        height: 9px;
        border-radius: 3px;
        background: var(--pe-orange);
    }

    .bess-case-study__legend-item--grid::before {
        background: var(--pe-purple-2);
        background-image: linear-gradient(90deg, var(--pe-purple-2) 50%, transparent 50%);
        background-size: 6px 3px;
    }

    .bess-case-study__legend-item--charge::before,
    .bess-case-study__legend-item--discharge::before {
        width: 9px;
        height: 9px;
        border-radius: 3px;
    }

    .bess-case-study__legend-item--charge::before {
        background: var(--pe-orange);
    }

    .bess-case-study__legend-item--discharge::before {
        background: var(--pe-purple-2);
    }

    .bess-case-study__scenario-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 18px;
    }

    .bess-case-study__scenario-nav button {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        align-items: center;
        min-width: 0;
        padding: 16px 18px;
        border: 1px solid var(--pe-line);
        border-radius: 18px;
        background: var(--pe-white);
        color: var(--pe-purple);
        text-align: left;
        cursor: pointer;
        transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
    }

    .bess-case-study__scenario-nav button > span {
        grid-row: 1 / span 2;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: var(--pe-orange-soft);
        color: var(--pe-orange-dark);
        font-family: var(--pe-font-display);
        font-size: 14px;
        font-weight: 800;
    }

    .bess-case-study__scenario-nav button b {
        font-family: var(--pe-font-display);
        font-size: 18px;
        line-height: 1.1;
    }

    .bess-case-study__scenario-nav button small {
        margin-top: 4px;
        color: var(--pe-muted);
        font-size: 13px;
        line-height: 1.2;
    }

    .bess-case-study__scenario-nav button:hover,
    .bess-case-study__scenario-nav button:focus-visible,
    .bess-case-study__scenario-nav button.is-active {
        border-color: var(--pe-purple);
        box-shadow: 0 10px 24px rgba(46, 32, 100, .1);
    }

    .bess-case-study__scenario-nav button.is-active {
        background: var(--pe-purple);
        color: var(--pe-white);
    }

    .bess-case-study__scenario-nav button.is-active > span {
        background: var(--pe-orange);
        color: var(--pe-ink);
    }

    .bess-case-study__scenario-nav button.is-active small {
        color: rgba(255, 255, 255, .74);
    }

    .bess-case-study__scenario-nav button:focus-visible {
        outline: 3px solid rgba(255, 150, 0, .42);
        outline-offset: 3px;
    }

    .bess-case-study__scenario-panels {
        margin-top: 12px;
    }

    .bess-case-study__scenario-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
        gap: 26px;
        align-items: center;
        padding: 22px 24px;
        border-radius: 18px;
        background: var(--pe-soft);
    }

    .bess-case-study__scenario-panel[hidden] {
        display: none;
    }

    .bess-case-study__panel-time {
        margin-bottom: 8px;
        color: var(--pe-purple-2);
        font-size: 12px;
        letter-spacing: .06em;
    }

    .bess-case-study__scenario-panel h4 {
        margin: 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 25px;
        line-height: 1.1;
    }

    .bess-case-study__scenario-panel p {
        max-width: 720px;
        margin: 8px 0 0;
        color: var(--pe-text);
        font-size: 15px;
        line-height: 1.55;
    }

    .bess-case-study__scenario-panel > strong {
        padding-left: 20px;
        border-left: 2px solid var(--pe-orange);
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 18px;
        line-height: 1.2;
    }

    .bess-case-study__steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
    }

    .bess-case-study__steps > li {
        min-width: 0;
        padding: 20px;
        border: 1px solid var(--pe-line);
        border-radius: 18px;
        background: var(--pe-soft);
    }

    .bess-case-study__step-number {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: var(--pe-orange);
        color: var(--pe-ink);
        font-family: var(--pe-font-display);
        font-size: 14px;
        font-weight: 800;
    }

    .bess-case-study__step-time {
        display: block;
        margin-top: 16px;
        color: var(--pe-purple-2);
        font-family: var(--pe-font-display);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .05em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .bess-case-study__steps h4 {
        margin: 8px 0 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 23px;
        line-height: 1.08;
    }

    .bess-case-study__steps p {
        margin: 8px 0 0;
        color: var(--pe-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .bess-case-study__steps strong {
        display: block;
        margin-top: 15px;
        padding-top: 12px;
        border-top: 2px solid var(--pe-orange);
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 15px;
        line-height: 1.2;
    }

    .bess-case-study__results {
        margin-top: 34px;
        padding: 28px;
        border-radius: 24px;
        background: var(--pe-purple);
        color: var(--pe-white);
    }

    .bess-case-study__results-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 18px;
    }

    .bess-case-study__results-head .bess-case-study__eyebrow {
        color: var(--pe-orange);
    }

    .bess-case-study__results-head p {
        margin: 0;
        color: rgba(255, 255, 255, .72);
        font-size: 14px;
    }

    .bess-case-study__result-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 20px;
    }

    .bess-case-study__result {
        min-width: 0;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 17px;
        background: rgba(255, 255, 255, .08);
    }

    .bess-case-study__result > span {
        display: block;
        min-height: 38px;
        color: rgba(255, 255, 255, .78);
        font-size: 14px;
        line-height: 1.3;
    }

    .bess-case-study__result div {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 14px;
    }

    .bess-case-study__result b,
    .bess-case-study__result strong {
        font-family: var(--pe-font-display);
        font-size: clamp(24px, 2.2vw, 32px);
        line-height: 1;
        white-space: nowrap;
    }

    .bess-case-study__result b {
        color: rgba(255, 255, 255, .65);
    }

    .bess-case-study__result strong {
        color: var(--pe-orange);
    }

    .bess-case-study__result i {
        display: block;
        width: 28px;
        height: 2px;
        background: rgba(255, 255, 255, .45);
    }

    .bess-case-study__result small {
        display: block;
        margin-top: 8px;
        color: rgba(255, 255, 255, .62);
        font-size: 12px;
    }

    .bess-case-study__result small em {
        padding: 0 4px;
        color: var(--pe-orange);
        font-style: normal;
    }

    .bess-case-study__result--annual div {
        min-height: 32px;
    }

    .bess-case-study__assumptions {
        margin-top: 16px;
        border: 1px solid var(--pe-line);
        border-radius: 17px;
        background: var(--pe-white);
    }

    .bess-case-study__assumptions summary {
        padding: 17px 20px;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 17px;
        font-weight: 700;
        cursor: pointer;
    }

    .bess-case-study__assumptions summary::marker {
        color: var(--pe-orange);
    }

    .bess-case-study__assumptions > div {
        padding: 0 20px 18px;
        color: var(--pe-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .bess-case-study__assumptions p {
        max-width: 920px;
        margin: 0;
    }

    .bess-case-study__assumptions ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 24px;
        margin: 12px 0 0;
        padding-left: 18px;
    }

    .bess-case-study__cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 16px;
        padding: 19px 22px;
        border-radius: 17px;
        background: var(--pe-orange);
        color: var(--pe-ink);
        font-size: 15px;
        font-weight: 700;
        transition: background-color .25s ease, transform .25s ease;
    }

    .bess-case-study__cta b {
        font-family: var(--pe-font-display);
        font-size: 18px;
        white-space: nowrap;
    }

    .bess-case-study__cta em {
        padding-left: 6px;
        font-style: normal;
    }

    .bess-case-study__cta:hover,
    .bess-case-study__cta:focus-visible {
        background: #ffab2e;
        transform: translateY(-2px);
    }

    .bess-case-study__cta:focus-visible {
        outline: 3px solid var(--pe-purple);
        outline-offset: 3px;
    }

    @media (max-width: 900px) {
        .bess-case-study__module {
            margin-top: 32px;
            padding: 24px;
            border-radius: 24px;
        }

        .bess-case-study__intro {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .bess-case-study__profile {
            justify-content: flex-start;
            max-width: none;
        }

        .bess-case-study__scenario-panel {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .bess-case-study__scenario-panel > strong {
            padding: 13px 0 0;
            border-top: 2px solid var(--pe-orange);
            border-left: 0;
        }

        .bess-case-study__steps {
            grid-template-columns: 1fr;
        }

        .bess-case-study__result-grid {
            grid-template-columns: 1fr;
        }

        .bess-case-study__result > span {
            min-height: 0;
        }
    }

    @media (max-width: 640px) {
        .bess-case-study__module {
            padding: 18px;
            border-radius: 20px;
        }

        .bess-case-study__intro h3 {
            font-size: 29px;
        }

        .bess-case-study__profile {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bess-case-study__profile span {
            justify-content: center;
            padding-inline: 8px;
            white-space: normal;
            text-align: center;
        }

        .bess-case-study__profile span:last-child {
            grid-column: 1 / -1;
        }

        .bess-case-study__chart {
            margin-top: 24px;
            padding: 18px 14px 16px;
            border-radius: 18px;
        }

        .bess-case-study__chart figcaption {
            display: block;
            font-size: 18px;
        }

        .bess-case-study__chart figcaption small {
            display: block;
            margin-top: 4px;
        }

        .bess-case-study__chart-scroll {
            overflow-x: auto;
            margin-right: -6px;
            padding-right: 6px;
        }

        .bess-case-study__chart-tooltips {
            width: 680px;
        }

        .bess-case-study__chart svg {
            width: 680px;
            max-width: none;
        }

        .bess-case-study__scenario-nav {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .bess-case-study__scenario-nav button {
            padding: 14px 16px;
        }

        .bess-case-study__scenario-panel {
            padding: 18px;
        }

        .bess-case-study__scenario-panel h4 {
            font-size: 23px;
        }

        .bess-case-study__results {
            margin-top: 24px;
            padding: 20px;
            border-radius: 20px;
        }

        .bess-case-study__results-head {
            display: block;
        }

        .bess-case-study__results-head p {
            margin-top: 8px;
        }

        .bess-case-study__result {
            padding: 17px;
        }

        .bess-case-study__assumptions ul {
            grid-template-columns: 1fr;
        }

        .bess-case-study__cta {
            display: block;
            padding: 17px 18px;
        }

        .bess-case-study__cta b {
            display: block;
            margin-top: 8px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bess-case-study__zone,
        .bess-case-study__battery-bar,
        .bess-case-study__scenario-nav button,
        .bess-case-study__cta {
            transition: none;
        }

        .bess-case-study__module.has-motion .bess-case-study__chart-tooltip,
        .bess-case-study__module.has-motion .bess-case-study__load-line,
        .bess-case-study__module.has-motion .bess-case-study__pv-line,
        .bess-case-study__module.has-motion .bess-case-study__grid-line {
            opacity: 1;
            transform: none;
            animation: none;
            stroke-dashoffset: 0;
        }

        .bess-case-study__module.has-motion .bess-case-study__pv-area {
            opacity: .16;
            animation: none;
        }

        .bess-case-study__module.has-motion .bess-case-study__battery-bar {
            transform: none;
            animation: none;
        }
    }

    /* BESS plain-language flow board. The old multi-line chart is intentionally
       not used here: each card shows one energy path and its business effect. */
    .bess-case-study__flow-board {
        margin-top: 32px;
        padding: 28px;
        border: 1px solid var(--pe-line);
        border-radius: 24px;
        background: var(--pe-soft);
    }

    .bess-case-study__flow-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 28px;
    }

    .bess-case-study__flow-heading h4 {
        max-width: 620px;
        margin: 6px 0 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: clamp(24px, 2.6vw, 36px);
        line-height: 1.04;
    }

    .bess-case-study__flow-heading p {
        max-width: 360px;
        margin: 0;
        color: var(--pe-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .bess-case-study__dayline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 28px;
        padding: 7px;
        border: 1px solid var(--pe-line);
        border-radius: 14px;
        background: var(--pe-white);
    }

    .bess-case-study__dayline span {
        position: relative;
        display: block;
        padding: 10px 12px;
        border-radius: 9px;
        color: var(--pe-muted);
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
    }

    .bess-case-study__dayline span.is-active {
        background: rgba(255, 154, 20, .14);
        color: var(--pe-purple);
    }

    .bess-case-study__dayline b {
        display: block;
        margin-bottom: 2px;
        color: inherit;
        font-family: var(--pe-font-display);
        font-size: 14px;
    }

    .bess-case-study__flow-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
    }

    .bess-case-study__flow-step {
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        padding: 20px;
        border: 1px solid var(--pe-line);
        border-top: 4px solid var(--pe-orange);
        border-radius: 18px;
        background: var(--pe-white);
        box-shadow: 0 10px 22px rgba(37, 29, 91, .06);
    }

    .bess-case-study__flow-step--peak,
    .bess-case-study__flow-step--evening {
        border-top-color: var(--pe-purple);
    }

    .bess-case-study__flow-step:not(:last-child)::after {
        position: absolute;
        z-index: 2;
        top: 48%;
        right: -25px;
        width: 34px;
        color: var(--pe-orange);
        content: '→';
        font-family: var(--pe-font-display);
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
    }

    .bess-case-study__flow-meta {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 30px;
    }

    .bess-case-study__flow-meta > span {
        display: grid;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        place-items: center;
        border-radius: 9px;
        background: var(--pe-orange);
        color: var(--pe-ink);
        font-family: var(--pe-font-display);
        font-size: 13px;
        font-weight: 800;
    }

    .bess-case-study__flow-step--peak .bess-case-study__flow-meta > span,
    .bess-case-study__flow-step--evening .bess-case-study__flow-meta > span {
        background: var(--pe-purple);
        color: var(--pe-white);
    }

    .bess-case-study__flow-meta b {
        color: var(--pe-purple-2);
        font-family: var(--pe-font-display);
        font-size: 12px;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .bess-case-study__flow-visual {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 148px;
        margin: 18px 0 14px;
        padding: 16px 10px;
        border-radius: 14px;
        background: var(--pe-soft);
    }

    .bess-case-study__flow-node {
        display: flex;
        width: 34%;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        color: var(--pe-purple);
        text-align: center;
    }

    .bess-case-study__flow-node svg {
        width: 48px;
        height: 48px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.4;
    }

    .bess-case-study__flow-node--pv {
        color: var(--pe-orange-dark);
    }

    .bess-case-study__flow-node--battery {
        color: var(--pe-purple);
    }

    .bess-case-study__flow-node--factory {
        color: var(--pe-purple-2);
    }

    .bess-case-study__flow-node b {
        margin-top: 5px;
        color: var(--pe-ink);
        font-family: var(--pe-font-display);
        font-size: 14px;
        line-height: 1.1;
    }

    .bess-case-study__flow-node small {
        margin-top: 3px;
        color: var(--pe-muted);
        font-size: 11px;
        line-height: 1.2;
    }

    .bess-case-study__flow-arrow {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        color: var(--pe-orange);
        text-align: center;
    }

    .bess-case-study__flow-arrow span {
        font-family: var(--pe-font-display);
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }

    .bess-case-study__flow-arrow small {
        max-width: 72px;
        margin-top: 3px;
        color: var(--pe-muted);
        font-size: 10px;
        line-height: 1.15;
    }

    .bess-case-study__flow-step h4 {
        margin: 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 22px;
        line-height: 1.08;
    }

    .bess-case-study__flow-step p {
        margin: 8px 0 0;
        color: var(--pe-text);
        font-size: 14px;
        line-height: 1.5;
    }

    .bess-case-study__flow-effect {
        display: flex;
        min-height: 66px;
        flex-direction: column;
        justify-content: center;
        margin-top: 18px;
        padding: 11px 13px;
        border-left: 3px solid var(--pe-orange);
        border-radius: 0 10px 10px 0;
        background: rgba(255, 154, 20, .1);
    }

    .bess-case-study__flow-step--peak .bess-case-study__flow-effect,
    .bess-case-study__flow-step--evening .bess-case-study__flow-effect {
        border-left-color: var(--pe-purple);
        background: rgba(55, 40, 126, .08);
    }

    .bess-case-study__flow-effect span {
        color: var(--pe-muted);
        font-size: 11px;
        line-height: 1.2;
    }

    .bess-case-study__flow-effect b {
        margin-top: 4px;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 14px;
        line-height: 1.2;
    }

    .bess-case-study__flow-caption {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 18px 0 0;
        color: var(--pe-purple-2);
        font-family: var(--pe-font-display);
        font-size: 14px;
        line-height: 1.35;
    }

    .bess-case-study__flow-caption span {
        color: var(--pe-orange);
        font-size: 24px;
        line-height: 1;
    }

    .bess-case-study__flow-board.has-motion .bess-case-study__flow-step {
        opacity: 0;
        transform: translateY(18px);
    }

    .bess-case-study__flow-board.has-motion.is-revealed .bess-case-study__flow-step {
        opacity: 1;
        transform: translateY(0);
        animation: peBessFlowStepIn .65s cubic-bezier(.2, .75, .25, 1) forwards;
    }

    .bess-case-study__flow-board.has-motion.is-revealed .bess-case-study__flow-step:nth-child(2) {
        animation-delay: .16s;
    }

    .bess-case-study__flow-board.has-motion.is-revealed .bess-case-study__flow-step:nth-child(3) {
        animation-delay: .32s;
    }

    @keyframes peBessFlowStepIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 1100px) {
        .bess-case-study__flow-step:not(:last-child)::after {
            right: -23px;
            width: 30px;
        }

        .bess-case-study__flow-heading {
            align-items: start;
            flex-direction: column;
            gap: 10px;
        }

        .bess-case-study__flow-heading p {
            max-width: 620px;
        }
    }

    @media (max-width: 900px) {
        .bess-case-study__flow-steps {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bess-case-study__flow-step:not(:last-child)::after {
            top: auto;
            right: auto;
            bottom: -24px;
            left: 50%;
            width: auto;
            content: '↓';
            transform: translateX(-50%);
        }
    }

    @media (max-width: 640px) {
        .bess-case-study__flow-board {
            margin-top: 24px;
            padding: 18px;
            border-radius: 20px;
        }

        .bess-case-study__dayline {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bess-case-study__flow-step {
            padding: 17px;
        }

        .bess-case-study__flow-meta {
            align-items: start;
        }

        .bess-case-study__flow-meta b {
            font-size: 11px;
        }

        .bess-case-study__flow-visual {
            min-height: 136px;
            padding: 12px 4px;
        }

        .bess-case-study__flow-node svg {
            width: 42px;
            height: 42px;
        }

        .bess-case-study__flow-node b {
            font-size: 13px;
        }

        .bess-case-study__flow-arrow span {
            font-size: 25px;
        }

        .bess-case-study__flow-step h4 {
            font-size: 20px;
        }

        .bess-case-study__flow-caption {
            align-items: start;
            font-size: 13px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bess-case-study__flow-board.has-motion .bess-case-study__flow-step,
        .bess-case-study__flow-board.has-motion.is-revealed .bess-case-study__flow-step {
            opacity: 1;
            transform: none;
            animation: none;
        }
    }

    /* BESS data story: separate the day narrative from the two measurable
       effects so visitors never have to decode several chart types at once. */
    .bess-case-study__story {
        margin-top: 32px;
        padding: 28px;
        border: 1px solid var(--pe-line);
        border-radius: 24px;
        background: var(--pe-soft);
    }

    .bess-case-study__story-intro {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 28px;
    }

    .bess-case-study__story-intro h4 {
        margin: 6px 0 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: clamp(24px, 2.5vw, 34px);
        line-height: 1.06;
    }

    .bess-case-study__story-intro p {
        max-width: 390px;
        margin: 0;
        color: var(--pe-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .bess-case-study__timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 26px;
        padding: 7px;
        border: 1px solid var(--pe-line);
        border-radius: 15px;
        background: var(--pe-white);
    }

    .bess-case-study__timeline > div {
        min-width: 0;
        padding: 11px 12px;
        border-radius: 10px;
        color: var(--pe-muted);
        text-align: center;
    }

    .bess-case-study__timeline > div.is-active {
        background: rgba(255, 154, 20, .14);
        color: var(--pe-purple);
    }

    .bess-case-study__timeline > div:nth-child(1) {
        border-top: 3px solid rgba(46, 32, 100, .22);
    }

    .bess-case-study__timeline > div:nth-child(2) {
        border-top: 3px solid var(--pe-orange);
    }

    .bess-case-study__timeline > div:nth-child(3) {
        border-top: 3px solid var(--pe-purple);
    }

    .bess-case-study__timeline > div:nth-child(4) {
        border-top: 3px solid var(--pe-purple-2);
    }

    .bess-case-study__timeline span,
    .bess-case-study__timeline small {
        display: block;
        font-size: 11px;
        line-height: 1.25;
    }

    .bess-case-study__timeline b {
        display: block;
        margin: 3px 0;
        color: inherit;
        font-family: var(--pe-font-display);
        font-size: 15px;
        line-height: 1.1;
    }

    .bess-case-study__charts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 18px;
    }

    .bess-case-study__chart-card {
        min-width: 0;
        margin: 0;
        padding: 22px 22px 18px;
        border: 1px solid var(--pe-line);
        border-radius: 19px;
        background: var(--pe-white);
    }

    .bess-case-study__chart-card figcaption {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 16px;
    }

    .bess-case-study__chart-kicker {
        display: block;
        color: var(--pe-orange-dark);
        font-family: var(--pe-font-display);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .bess-case-study__chart-card figcaption h4 {
        max-width: 410px;
        margin: 6px 0 0;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 23px;
        line-height: 1.08;
    }

    .bess-case-study__chart-card figcaption > small {
        flex: 0 0 auto;
        color: var(--pe-muted);
        font-size: 11px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .bess-case-study__chart-lead {
        min-height: 44px;
        margin: 10px 0 0;
        color: var(--pe-text);
        font-size: 13px;
        line-height: 1.45;
    }

    .bess-case-study__chart-phase-key {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-top: 14px;
    }

    .bess-case-study__chart-phase-key span {
        min-width: 0;
        padding: 7px 6px 6px;
        border-radius: 8px;
        background: rgba(46, 32, 100, .04);
        color: var(--pe-muted);
        text-align: center;
    }

    .bess-case-study__chart-phase-key span:nth-child(2) {
        background: rgba(255, 150, 0, .13);
    }

    .bess-case-study__chart-phase-key span:nth-child(3) {
        background: rgba(46, 32, 100, .09);
    }

    .bess-case-study__chart-phase-key span:nth-child(4) {
        background: rgba(113, 88, 237, .09);
    }

    .bess-case-study__chart-phase-key b,
    .bess-case-study__chart-phase-key strong {
        display: block;
    }

    .bess-case-study__chart-phase-key b {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
    }

    .bess-case-study__chart-phase-key strong {
        margin-top: 3px;
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 12px;
        line-height: 1.15;
    }

    .bess-case-study__chart-svg-wrap {
        margin-top: 12px;
        border-radius: 13px;
        background: #fbfaff;
    }

    .bess-case-study__chart-svg-wrap svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .bess-case-study__chart-zones rect:nth-child(1),
    .bess-case-study__chart-zones rect:nth-child(4) {
        fill: rgba(46, 32, 100, .035);
    }

    .bess-case-study__chart-zones rect:nth-child(2) {
        fill: rgba(255, 150, 0, .12);
    }

    .bess-case-study__chart-zones rect:nth-child(3) {
        fill: rgba(46, 32, 100, .08);
    }

    .bess-case-study__chart-grid-lines path {
        fill: none;
        stroke: rgba(46, 32, 100, .13);
        stroke-width: 1;
    }

    .bess-case-study__chart-axis-labels text,
    .bess-case-study__chart-x-labels text,
    .bess-case-study__chart-zone-labels text {
        fill: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 12px;
    }

    .bess-case-study__chart-zone-labels text {
        fill: var(--pe-purple-2);
        font-family: var(--pe-font-display);
        font-size: 11px;
        font-weight: 700;
        text-anchor: middle;
        text-transform: uppercase;
    }

    .bess-case-study__chart-phase-labels text {
        text-anchor: middle;
    }

    .bess-case-study__chart-phase-labels .is-time {
        fill: var(--pe-muted);
        font-family: var(--pe-font-body);
        font-size: 10px;
    }

    .bess-case-study__chart-phase-labels .is-name {
        fill: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 11px;
        font-weight: 800;
    }

    .bess-case-study__chart-x-labels text:last-child {
        text-anchor: end;
    }

    .bess-case-study__grid-chart-line {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    .bess-case-study__grid-chart-line--without {
        stroke: rgba(46, 32, 100, .42);
        stroke-dasharray: 8 7;
    }

    .bess-case-study__grid-chart-line--with {
        stroke: var(--pe-purple);
    }

    .bess-case-study__chart-points circle {
        fill: var(--pe-purple);
        stroke: var(--pe-white);
        stroke-width: 3;
    }

    .bess-case-study__charge-area {
        fill: rgba(46, 32, 100, .08);
    }

    .bess-case-study__charge-line {
        fill: none;
        stroke: rgba(46, 32, 100, .34);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    .bess-case-study__charge-line--charging {
        stroke: var(--pe-orange);
    }

    .bess-case-study__charge-line--discharging {
        stroke: var(--pe-purple);
    }

    .bess-case-study__chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin-top: 2px;
        color: var(--pe-text);
        font-size: 12px;
    }

    .bess-case-study__chart-legend span::before {
        display: inline-block;
        width: 20px;
        height: 3px;
        margin: 0 7px 3px 0;
        border-radius: 999px;
        background: var(--pe-purple);
        content: '';
    }

    .bess-case-study__chart-legend .is-without::before {
        background: rgba(46, 32, 100, .42);
        background-image: linear-gradient(90deg, rgba(46, 32, 100, .42) 55%, transparent 55%);
        background-size: 7px 3px;
    }

    .bess-case-study__chart-legend .is-charging::before {
        background: var(--pe-orange);
    }

    .bess-case-study__chart-legend .is-discharging::before {
        background: var(--pe-purple);
    }

    .bess-case-study__chart-notes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 16px 0 0;
        padding: 0;
        list-style: none;
    }

    .bess-case-study__chart-notes li {
        min-width: 0;
        padding: 10px;
        border-radius: 10px;
        background: var(--pe-soft);
    }

    .bess-case-study__chart-notes b,
    .bess-case-study__chart-notes span {
        display: block;
    }

    .bess-case-study__chart-notes b {
        color: var(--pe-purple);
        font-family: var(--pe-font-display);
        font-size: 12px;
        line-height: 1.2;
    }

    .bess-case-study__chart-notes span {
        margin-top: 3px;
        color: var(--pe-muted);
        font-size: 11px;
        line-height: 1.3;
    }

    .bess-case-study__story-caption {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 18px 0 0;
        color: var(--pe-purple-2);
        font-family: var(--pe-font-display);
        font-size: 13px;
        line-height: 1.4;
    }

    .bess-case-study__story-caption span {
        color: var(--pe-orange);
        font-size: 23px;
        line-height: 1;
    }

    .bess-case-study__story.has-motion .bess-case-study__chart-card {
        opacity: 0;
        transform: translateY(16px);
    }

    .bess-case-study__story.has-motion.is-revealed .bess-case-study__chart-card {
        opacity: 1;
        transform: translateY(0);
        animation: peBessStoryCardIn .65s cubic-bezier(.2, .75, .25, 1) forwards;
    }

    .bess-case-study__story.has-motion.is-revealed .bess-case-study__chart-card:nth-child(2) {
        animation-delay: .16s;
    }

    .bess-case-study__story.has-motion .bess-case-study__grid-chart-line,
    .bess-case-study__story.has-motion .bess-case-study__charge-line {
        stroke-dasharray: 1100;
        stroke-dashoffset: 1100;
    }

    .bess-case-study__story.has-motion.is-revealed .bess-case-study__grid-chart-line,
    .bess-case-study__story.has-motion.is-revealed .bess-case-study__charge-line {
        stroke-dashoffset: 0;
        animation: peBessStoryLineIn 1.35s ease forwards;
    }

    .bess-case-study__story.has-motion .bess-case-study__charge-area {
        opacity: 0;
    }

    .bess-case-study__story.has-motion.is-revealed .bess-case-study__charge-area {
        opacity: 1;
        animation: peBessStoryAreaIn .7s ease .2s forwards;
    }

    @keyframes peBessStoryCardIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes peBessStoryLineIn {
        to { stroke-dashoffset: 0; }
    }

    @keyframes peBessStoryAreaIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @media (max-width: 1100px) {
        .bess-case-study__story-intro {
            align-items: start;
            flex-direction: column;
            gap: 10px;
        }

        .bess-case-study__story-intro p {
            max-width: 650px;
        }

        .bess-case-study__charts {
            grid-template-columns: 1fr;
        }

        .bess-case-study__chart-card figcaption h4 {
            max-width: 600px;
        }
    }

    @media (max-width: 640px) {
        .bess-case-study__story {
            margin-top: 24px;
            padding: 18px;
            border-radius: 20px;
        }

        .bess-case-study__timeline {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bess-case-study__chart-card {
            padding: 18px 14px 15px;
            border-radius: 17px;
        }

        .bess-case-study__chart-card figcaption {
            display: block;
        }

        .bess-case-study__chart-card figcaption > small {
            display: block;
            margin-top: 6px;
        }

        .bess-case-study__chart-card figcaption h4 {
            font-size: 21px;
        }

        .bess-case-study__chart-lead {
            min-height: 0;
        }

        .bess-case-study__chart-phase-key {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bess-case-study__chart-notes {
            grid-template-columns: 1fr;
        }

        .bess-case-study__story-caption {
            align-items: start;
            font-size: 12px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bess-case-study__story.has-motion .bess-case-study__chart-card,
        .bess-case-study__story.has-motion.is-revealed .bess-case-study__chart-card {
            opacity: 1;
            transform: none;
            animation: none;
        }

        .bess-case-study__story.has-motion .bess-case-study__grid-chart-line,
        .bess-case-study__story.has-motion .bess-case-study__charge-line {
            stroke-dashoffset: 0;
            animation: none;
        }

        .bess-case-study__story.has-motion .bess-case-study__charge-area {
            opacity: 1;
            animation: none;
        }
    }

    /* BESS breathing layout: give the day timeline and each chart its own
       vertical surface so the story can be read in a calm top-to-bottom order. */
    .bess-case-study__story {
        padding: 40px;
    }

    .bess-case-study__story-intro {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
        align-items: start;
        gap: 56px;
    }

    .bess-case-study__story-intro p {
        max-width: 460px;
        padding-top: 34px;
    }

    .bess-case-study__timeline {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 36px;
        padding: 10px;
        border-radius: 18px;
    }

    .bess-case-study__timeline > div {
        display: grid;
        grid-template-columns: 130px minmax(150px, 220px) minmax(0, 1fr);
        align-items: center;
        gap: 18px;
        padding: 16px 20px;
        border-top: 0 !important;
        border-left: 4px solid rgba(46, 32, 100, .22);
        text-align: left;
    }

    .bess-case-study__timeline > div:nth-child(2) {
        border-left-color: var(--pe-orange);
    }

    .bess-case-study__timeline > div:nth-child(3) {
        border-left-color: var(--pe-purple);
    }

    .bess-case-study__timeline > div:nth-child(4) {
        border-left-color: var(--pe-purple-2);
    }

    .bess-case-study__timeline b {
        margin: 0;
        font-size: 18px;
    }

    .bess-case-study__timeline span,
    .bess-case-study__timeline small {
        font-size: 13px;
    }

    .bess-case-study__charts {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 40px;
    }

    .bess-case-study__chart-card {
        padding: 32px 34px 28px;
        border-radius: 24px;
    }

    .bess-case-study__chart-card figcaption h4 {
        max-width: 800px;
        font-size: clamp(26px, 2.3vw, 34px);
    }

    .bess-case-study__chart-lead {
        max-width: 760px;
        min-height: 0;
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.6;
    }

    .bess-case-study__chart-phase-key {
        gap: 8px;
        margin-top: 22px;
    }

    .bess-case-study__chart-phase-key span {
        display: flex;
        min-height: 58px;
        flex-direction: column;
        justify-content: center;
        padding: 11px 12px 10px;
        border-radius: 12px;
        text-align: left;
    }

    .bess-case-study__chart-phase-key b {
        font-size: 11px;
    }

    .bess-case-study__chart-phase-key strong {
        font-size: 14px;
    }

    .bess-case-study__chart-svg-wrap {
        margin-top: 20px;
        padding: 10px 14px 6px;
        border: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-legend {
        margin-top: 14px;
        font-size: 13px;
    }

    .bess-case-study__chart-notes {
        gap: 14px;
        margin-top: 22px;
    }

    .bess-case-study__chart-notes li {
        min-height: 72px;
        padding: 14px;
    }

    .bess-case-study__chart-notes b {
        font-size: 13px;
    }

    .bess-case-study__chart-notes span {
        font-size: 13px;
        line-height: 1.4;
    }

    .bess-case-study__story-caption {
        margin-top: 28px;
    }

    @media (max-width: 900px) {
        .bess-case-study__story {
            padding: 28px;
        }

        .bess-case-study__story-intro {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bess-case-study__story-intro p {
            padding-top: 0;
        }

        .bess-case-study__timeline > div {
            grid-template-columns: 110px minmax(130px, .65fr) minmax(0, 1fr);
        }

        .bess-case-study__chart-card {
            padding: 28px 26px 24px;
        }
    }

    @media (max-width: 640px) {
        .bess-case-study__story {
            padding: 20px;
        }

        .bess-case-study__timeline {
            grid-template-columns: 1fr;
            padding: 8px;
        }

        .bess-case-study__timeline > div {
            grid-template-columns: 1fr;
            gap: 4px;
            padding: 14px 15px;
        }

        .bess-case-study__chart-card {
            padding: 22px 16px 20px;
        }

        .bess-case-study__chart-phase-key {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bess-case-study__chart-phase-key span {
            min-height: 62px;
        }

        .bess-case-study__chart-svg-wrap {
            margin-inline: -4px;
            padding-inline: 4px;
        }
    }

    /* BESS chart semantics: the legend, line styles and phase colors must
       describe the same thing at a glance. */
    .bess-case-study__grid-chart-line--without {
        stroke: var(--pe-orange);
        stroke-dasharray: 10 8;
        stroke-width: 4;
    }

    .bess-case-study__grid-chart-line--with {
        stroke: var(--pe-purple);
        stroke-width: 5;
    }

    .bess-case-study__story.has-motion .bess-case-study__grid-chart-line--without,
    .bess-case-study__story.has-motion.is-revealed .bess-case-study__grid-chart-line--without {
        stroke-dasharray: 10 8;
        stroke-dashoffset: 0;
        animation: peBessBaselineFadeIn .7s ease .15s both;
    }

    @keyframes peBessBaselineFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .bess-case-study__chart-legend .is-without {
        color: var(--pe-orange-dark);
        font-weight: 700;
    }

    .bess-case-study__chart-legend .is-without::before {
        background: var(--pe-orange);
        background-image: linear-gradient(90deg, var(--pe-orange) 55%, transparent 55%);
        background-size: 7px 3px;
    }

    .bess-case-study__chart-legend .is-with {
        color: var(--pe-purple);
        font-weight: 700;
    }

    .bess-case-study__chart-legend .is-with::before {
        background: var(--pe-purple);
    }

    .bess-case-study__chart-phase-key span:nth-child(1) strong {
        color: var(--pe-purple);
    }

    .bess-case-study__chart-phase-key span:nth-child(2) strong {
        color: var(--pe-orange-dark);
    }

    .bess-case-study__chart-phase-key span:nth-child(3) strong {
        color: var(--pe-purple);
    }

    .bess-case-study__chart-phase-key span:nth-child(4) strong {
        color: var(--pe-purple-2);
    }

    .bess-case-study__chart-zones rect:nth-child(1) {
        fill: rgba(46, 32, 100, .055);
    }

    .bess-case-study__chart-zones rect:nth-child(4) {
        fill: rgba(67, 51, 132, .12);
    }

    .bess-case-study__chart-grid-lines path {
        stroke: rgba(46, 32, 100, .18);
    }

    .bess-case-study__timeline > div:nth-child(1) {
        background: rgba(46, 32, 100, .045);
    }

    .bess-case-study__timeline > div:nth-child(2) {
        background: rgba(255, 150, 0, .12);
    }

    .bess-case-study__timeline > div:nth-child(3) {
        background: rgba(46, 32, 100, .075);
    }

    .bess-case-study__timeline > div:nth-child(4) {
        background: rgba(67, 51, 132, .1);
    }

    .bess-case-study__chart-axis-labels text,
    .bess-case-study__chart-x-labels text {
        fill: var(--pe-text);
        font-size: 13px;
    }

    @media (prefers-reduced-motion: reduce) {
        .bess-case-study__story.has-motion .bess-case-study__grid-chart-line--without,
        .bess-case-study__story.has-motion.is-revealed .bess-case-study__grid-chart-line--without {
            animation: none;
            opacity: 1;
        }
    }

    /* BESS surface hierarchy: keep one main panel and use dividers instead
       of stacking cards inside cards. */
    .bess-case-study__story {
        padding: 40px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .bess-case-study__timeline {
        gap: 0;
        margin-top: 36px;
        padding: 0;
        border: 0;
        border-top: 1px solid var(--pe-line);
        border-bottom: 1px solid var(--pe-line);
        border-radius: 0;
        background: transparent;
    }

    .bess-case-study__timeline > div,
    .bess-case-study__timeline > div.is-active {
        border-left-width: 3px;
        border-radius: 0;
        background: transparent !important;
    }

    .bess-case-study__timeline > div:not(:last-child) {
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-case-study__timeline > div:last-child {
        border-bottom: 0;
    }

    .bess-case-study__charts {
        gap: 0;
        margin-top: 48px;
    }

    .bess-case-study__chart-card,
    .bess-case-study__chart-card:nth-child(2) {
        padding: 40px 0 36px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .bess-case-study__chart-card + .bess-case-study__chart-card {
        border-top: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-phase-key {
        gap: 0;
        border-top: 1px solid var(--pe-line);
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-phase-key span,
    .bess-case-study__chart-phase-key span:nth-child(2),
    .bess-case-study__chart-phase-key span:nth-child(3),
    .bess-case-study__chart-phase-key span:nth-child(4) {
        min-height: 58px;
        padding: 10px 14px;
        border-radius: 0;
        background: transparent;
    }

    .bess-case-study__chart-phase-key span:not(:last-child) {
        border-right: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-svg-wrap {
        margin-top: 24px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .bess-case-study__chart-notes {
        gap: 0;
        margin-top: 24px;
        border-top: 1px solid var(--pe-line);
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-notes li {
        min-height: 0;
        padding: 15px 16px 16px;
        border-radius: 0;
        background: transparent;
    }

    .bess-case-study__chart-notes li:not(:last-child) {
        border-right: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-card:first-child .bess-case-study__chart-notes li:nth-child(1) b,
    .bess-case-study__chart-card:nth-child(2) .bess-case-study__chart-notes li:nth-child(1) b {
        color: var(--pe-orange-dark);
    }

    .bess-case-study__chart-card:first-child .bess-case-study__chart-notes li:nth-child(3) b,
    .bess-case-study__chart-card:nth-child(2) .bess-case-study__chart-notes li:nth-child(3) b {
        color: var(--pe-purple-2);
    }

    .bess-case-study__story-caption {
        padding-top: 18px;
        border-top: 1px solid var(--pe-line);
    }

    @media (max-width: 640px) {
        .bess-case-study__story {
            padding: 28px 0 0;
        }

        .bess-case-study__chart-card,
        .bess-case-study__chart-card:nth-child(2) {
            padding: 30px 0 28px;
        }

        .bess-case-study__chart-phase-key span,
        .bess-case-study__chart-phase-key span:nth-child(2),
        .bess-case-study__chart-phase-key span:nth-child(3),
        .bess-case-study__chart-phase-key span:nth-child(4) {
            min-height: 62px;
            padding: 10px 12px;
        }

        .bess-case-study__chart-phase-key span:nth-child(2) {
            border-right: 0;
        }

        .bess-case-study__chart-notes {
            grid-template-columns: 1fr;
        }

        .bess-case-study__chart-notes li:not(:last-child) {
            border-right: 0;
            border-bottom: 1px solid var(--pe-line);
        }
    }

    /* Align the phase key with the actual plot area inside the SVG. The
       first two periods are longer than the peak and evening periods. */
    .bess-case-study__chart-phase-key {
        grid-template-columns: 184fr 184fr 122fr 138fr;
        margin-right: 8.6842%;
        margin-left: 8.6842%;
    }

    .bess-case-study__chart-phase-key span {
        align-items: center;
        text-align: center;
    }

    @media (max-width: 640px) {
        .bess-case-study__chart-phase-key {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-right: 8.6842%;
            margin-left: 8.6842%;
        }

        .bess-case-study__chart-phase-key span:nth-child(2),
        .bess-case-study__chart-phase-key span:nth-child(4) {
            border-right: 0;
        }
    }

    /* BESS component polish: clearer hierarchy without adding another card. */
    .bess-case-study__intro {
        padding-bottom: 32px;
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-case-study__story {
        padding-top: 34px;
    }

    .bess-case-study__timeline > div {
        grid-template-columns: 145px 250px minmax(0, 1fr);
        min-height: 58px;
        padding: 17px 14px;
        border-left-width: 4px;
    }

    .bess-case-study__timeline span {
        color: var(--pe-muted);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .015em;
    }

    .bess-case-study__timeline b {
        font-size: 17px;
    }

    .bess-case-study__timeline small {
        color: var(--pe-text);
        font-size: 13px;
    }

    .bess-case-study__chart-phase-key {
        margin-top: 26px;
        padding-bottom: 10px;
        border-top: 0;
        border-bottom: 1px solid var(--pe-line);
    }

    .bess-case-study__chart-phase-key span,
    .bess-case-study__chart-phase-key span:nth-child(2),
    .bess-case-study__chart-phase-key span:nth-child(3),
    .bess-case-study__chart-phase-key span:nth-child(4) {
        min-height: 64px;
        padding: 13px 8px 10px;
        border-top: 4px solid rgba(46, 32, 100, .34);
        border-right: 0;
    }

    .bess-case-study__chart-phase-key span:nth-child(2) {
        border-top-color: var(--pe-orange);
    }

    .bess-case-study__chart-phase-key span:nth-child(3) {
        border-top-color: var(--pe-purple);
    }

    .bess-case-study__chart-phase-key span:nth-child(4) {
        border-top-color: var(--pe-purple-2);
    }

    .bess-case-study__chart-phase-key b {
        color: var(--pe-muted);
        font-size: 11px;
        letter-spacing: .015em;
    }

    .bess-case-study__chart-phase-key strong {
        margin-top: 5px;
        font-size: 14px;
    }

    .bess-case-study__chart-svg-wrap {
        margin-top: 20px;
    }

    @media (max-width: 900px) {
        .bess-case-study__timeline > div {
            grid-template-columns: 120px 190px minmax(0, 1fr);
        }
    }

    @media (max-width: 640px) {
        .bess-case-study__intro {
            padding-bottom: 24px;
        }

        .bess-case-study__story {
            padding-top: 28px;
        }

        .bess-case-study__timeline > div {
            grid-template-columns: 1fr;
            min-height: 0;
            gap: 4px;
            padding: 15px 12px;
        }

        .bess-case-study__chart-phase-key {
            margin-top: 22px;
            padding-bottom: 8px;
        }

        .bess-case-study__chart-phase-key span,
        .bess-case-study__chart-phase-key span:nth-child(2),
        .bess-case-study__chart-phase-key span:nth-child(3),
        .bess-case-study__chart-phase-key span:nth-child(4) {
            min-height: 62px;
            padding: 12px 6px 9px;
        }
    }

    /* Chart annotations: align each explanation with the phase it describes
       instead of presenting three unrelated equal-width cells. */
    .bess-case-study__chart-notes {
        grid-template-columns: 184fr 122fr 138fr;
        margin-right: 8.6842%;
        margin-left: 32.8947%;
        border: 0;
    }

    .bess-case-study__chart-notes li,
    .bess-case-study__chart-notes li:not(:last-child) {
        padding: 12px 10px 0;
        border: 0;
        border-top: 3px solid rgba(46, 32, 100, .34);
    }

    .bess-case-study__chart-notes li:nth-child(1) {
        border-top-color: var(--pe-orange);
    }

    .bess-case-study__chart-notes li:nth-child(2) {
        border-top-color: var(--pe-purple);
    }

    .bess-case-study__chart-notes li:nth-child(3) {
        border-top-color: var(--pe-purple-2);
    }

    .bess-case-study__chart-notes b {
        font-size: 13px;
        line-height: 1.25;
    }

    .bess-case-study__chart-notes span {
        margin-top: 5px;
        color: var(--pe-text);
        font-size: 12px;
        line-height: 1.4;
    }

    @media (max-width: 640px) {
        .bess-case-study__chart-notes {
            grid-template-columns: 1fr;
            margin-right: 0;
            margin-left: 0;
        }

        .bess-case-study__chart-notes li,
        .bess-case-study__chart-notes li:not(:last-child) {
            padding: 13px 0 0;
        }

        .bess-case-study__chart-notes li:not(:last-child) {
            padding-bottom: 13px;
            border-bottom: 1px solid var(--pe-line);
        }
    }

    /* Time model v46: phase colors are neutral; orange and purple are
       reserved for the measured energy flows shown in the charts. */
    .bess-case-study__chart-zones rect,
    .bess-case-study__chart-zones rect:nth-child(1),
    .bess-case-study__chart-zones rect:nth-child(2),
    .bess-case-study__chart-zones rect:nth-child(3),
    .bess-case-study__chart-zones rect:nth-child(4) {
        fill: rgba(46, 32, 100, .045);
    }

    .bess-case-study__chart-phase-key {
        grid-template-columns: 209fr 26fr 157fr 78fr 105fr 52fr;
    }

    .bess-case-study__chart-phase-key span,
    .bess-case-study__chart-phase-key span:nth-child(2),
    .bess-case-study__chart-phase-key span:nth-child(3),
    .bess-case-study__chart-phase-key span:nth-child(4) {
        border-top-color: rgba(46, 32, 100, .24) !important;
    }

    .bess-case-study__chart-phase-key span:nth-child(1) {
        grid-column: 1;
    }

    .bess-case-study__chart-phase-key span:nth-child(2) {
        grid-column: 3;
    }

    .bess-case-study__chart-phase-key span:nth-child(3) {
        grid-column: 4;
    }

    .bess-case-study__chart-phase-key span:nth-child(4) {
        grid-column: 5;
    }

    .bess-case-study__chart-phase-key strong,
    .bess-case-study__chart-phase-key span:nth-child(2) strong,
    .bess-case-study__chart-phase-key span:nth-child(3) strong,
    .bess-case-study__chart-phase-key span:nth-child(4) strong {
        color: var(--pe-purple) !important;
    }

    .bess-case-study__chart-notes {
        grid-template-columns: 157fr 78fr 105fr;
        margin-left: 39.7368%;
        margin-right: 15.5263%;
    }

    .bess-case-study__chart-notes li,
    .bess-case-study__chart-notes li:nth-child(1),
    .bess-case-study__chart-notes li:nth-child(2),
    .bess-case-study__chart-notes li:nth-child(3),
    .bess-case-study__chart-notes li:not(:last-child) {
        border-top-color: var(--pe-line) !important;
    }

    .bess-case-study__chart-notes b,
    .bess-case-study__chart-card:first-child .bess-case-study__chart-notes li:nth-child(1) b,
    .bess-case-study__chart-card:first-child .bess-case-study__chart-notes li:nth-child(3) b,
    .bess-case-study__chart-card:nth-child(2) .bess-case-study__chart-notes li:nth-child(1) b,
    .bess-case-study__chart-card:nth-child(2) .bess-case-study__chart-notes li:nth-child(3) b {
        color: var(--pe-purple) !important;
    }

    .bess-case-study__timeline > div,
    .bess-case-study__timeline > div:nth-child(2),
    .bess-case-study__timeline > div:nth-child(3),
    .bess-case-study__timeline > div:nth-child(4) {
        border-left-color: var(--pe-line) !important;
    }

    @media (max-width: 640px) {
        .bess-case-study__chart-phase-key {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bess-case-study__chart-phase-key span,
        .bess-case-study__chart-phase-key span:nth-child(2),
        .bess-case-study__chart-phase-key span:nth-child(3),
        .bess-case-study__chart-phase-key span:nth-child(4) {
            grid-column: auto;
        }

        .bess-case-study__chart-notes {
            grid-template-columns: 1fr;
            margin-left: 0;
            margin-right: 0;
        }
    }