{"id":5811,"date":"2026-08-08T15:22:05","date_gmt":"2026-08-08T14:22:05","guid":{"rendered":"https:\/\/casdale.com\/?page_id=5811"},"modified":"2026-08-13T20:54:46","modified_gmt":"2026-08-13T19:54:46","slug":"why-this-matters","status":"publish","type":"page","link":"https:\/\/casdale.com\/index.php\/why-this-matters\/","title":{"rendered":"Why This Matters"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5811\" class=\"elementor elementor-5811\">\n\t\t\t\t        <section class=\"elementor-section elementor-top-section elementor-element elementor-element-7166f4d elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-row-max-none\" data-id=\"7166f4d\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n            \n                        <div class=\"elementor-container elementor-column-gap-no \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8c26af2\" data-id=\"8c26af2\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-b547cb9 elementor-widget elementor-widget-image-carousel\" data-id=\"b547cb9\" data-element_type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;none&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-image-carousel .swiper,.elementor-widget-image-carousel .swiper-container{position:static}.elementor-widget-image-carousel .swiper-container .swiper-slide figure,.elementor-widget-image-carousel .swiper .swiper-slide figure{line-height:inherit}.elementor-widget-image-carousel .swiper-slide{text-align:center}.elementor-image-carousel-wrapper:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-slide{max-width:calc(100% \/ var(--e-image-carousel-slides-to-show, 3))}<\/style>\t\t<div class=\"elementor-image-carousel-wrapper swiper\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper swiper-image-stretch\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 1\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/casdale.com\/wp-content\/uploads\/2026\/08\/Capture-1.png\" alt=\"Capture\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-7695589 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-row-max-none\" data-id=\"7695589\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c42f42c\" data-id=\"c42f42c\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-69e6d19 elementor-widget elementor-widget-html\" data-id=\"69e6d19\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- START: Custom Energy Flowchart Section -->\r\n<style>\r\n  .energy-flow-section {\r\n    padding: 60px 20px;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    background: linear-gradient(135deg, rgba(230, 220, 245, 0.7) 0%, rgba(255, 255, 255, 0.8) 100%);\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* Dedicated pseudo-element for the background image with blur and 30% visibility *\/\r\n  .energy-flow-section::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url('https:\/\/casdale.com\/wp-content\/uploads\/2026\/08\/now-Photoroom.png');\r\n    background-repeat: no-repeat;\r\n    background-position: center center;\r\n    background-size: contain;\r\n    filter: blur(12px); \/* Increased blur level to make it softer *\/\r\n    opacity: 0.3; \/* Exactly 30% visible *\/\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n\r\n  .energy-flow-container {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    max-width: 900px;\r\n    width: 100%;\r\n    margin: 0 auto;\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* Left Main Question Box *\/\r\n  .ef-main-box {\r\n    background-color: #312347;\r\n    width: 110px;\r\n    height: 110px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\r\n    position: relative;\r\n    z-index: 2;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .ef-main-box svg {\r\n    width: 48px;\r\n    height: 48px;\r\n    fill: #ffffff;\r\n  }\r\n\r\n  \/* Right Cards Wrapper *\/\r\n  .ef-cards-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    margin-left: 80px;\r\n    position: relative;\r\n    flex-grow: 1;\r\n  }\r\n\r\n  \/* Individual Option Card *\/\r\n  .ef-card {\r\n    background-color: #eaeaea;\r\n    border: 1px solid #dcdcdc;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 18px 24px;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  .ef-card-icon {\r\n    background-color: #312347;\r\n    width: 44px;\r\n    height: 44px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin-right: 24px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .ef-card-icon svg {\r\n    width: 24px;\r\n    height: 24px;\r\n    fill: #ffffff;\r\n  }\r\n\r\n  .ef-card-text {\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    color: #1a1a1a;\r\n    line-height: 1.2;\r\n    margin: 0;\r\n    letter-spacing: -0.5px;\r\n  }\r\n\r\n  \/* SVG Connecting Lines Canvas *\/\r\n  #ef-connector-canvas {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* Responsive Design *\/\r\n  @media (max-width: 768px) {\r\n    .energy-flow-container {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    .ef-cards-wrapper {\r\n      margin-left: 0;\r\n      margin-top: 40px;\r\n    }\r\n    #ef-connector-canvas {\r\n      display: none; \/* Hide connector lines on small screens for clean stacking *\/\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"energy-flow-section\">\r\n  <div class=\"energy-flow-container\" id=\"efContainer\">\r\n    <!-- SVG Canvas for dynamic pixel-perfect connector lines -->\r\n    <svg id=\"ef-connector-canvas\"><\/svg>\r\n\r\n    <!-- Left Box -->\r\n    <div class=\"ef-main-box\" id=\"efMainBox\">\r\n      <!-- Question Mark Icon -->\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm1.07-7.75l-.9.92C12.45 11.9 12 12.5 12 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n\r\n    <!-- Right Cards List -->\r\n    <div class=\"ef-cards-wrapper\" id=\"efCardsWrapper\">\r\n      \r\n      <!-- Card 1 -->\r\n      <div class=\"ef-card\">\r\n        <div class=\"ef-card-icon\">\r\n          <!-- Refresh \/ Volatile Market Icon -->\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <p class=\"ef-card-text\">Energy markets are volatile<\/p>\r\n      <\/div>\r\n\r\n      <!-- Card 2 -->\r\n      <div class=\"ef-card\">\r\n        <div class=\"ef-card-icon\">\r\n          <!-- Clipboard \/ Budgeting Icon -->\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <p class=\"ef-card-text\">Budgeting is challenging<\/p>\r\n      <\/div>\r\n\r\n      <!-- Card 3 -->\r\n      <div class=\"ef-card\">\r\n        <div class=\"ef-card-icon\">\r\n          <!-- Strategy Route Icon -->\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M21 3h-3v3h-3v3h-3v3H9V9H6V6H3v3h3v3h3v3h3v3h3v3h3v-3h3v-3h3V3zM5 5h1v1H5V5zm14 14h-1v-1h1v1zm0-10h-1V8h1v1zm-4 4h-1v-1h1v1zm-4-4h-1V9h1v1z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <p class=\"ef-card-text\">Procurement strategy is important<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  function drawFlowchartLines() {\r\n    const canvas = document.getElementById('ef-connector-canvas');\r\n    const container = document.getElementById('efContainer');\r\n    const mainBox = document.getElementById('efMainBox');\r\n    const cards = document.querySelectorAll('.ef-card');\r\n\r\n    if (!canvas || !container || !mainBox || cards.length === 0) return;\r\n\r\n    const containerRect = container.getBoundingClientRect();\r\n    canvas.setAttribute('width', containerRect.width);\r\n    canvas.setAttribute('height', containerRect.height);\r\n\r\n    canvas.innerHTML = '';\r\n\r\n    const mainRect = mainBox.getBoundingClientRect();\r\n    const startX = mainRect.right - containerRect.left;\r\n    const startY = mainRect.top + (mainRect.height \/ 2) - containerRect.left; \/\/ Adjusted for proper relative positioning\r\n\r\n    const midX = startX + 35;\r\n\r\n    let firstCardCenterY = 0;\r\n    let lastCardCenterY = 0;\r\n\r\n    cards.forEach((card, index) => {\r\n      const cardRect = card.getBoundingClientRect();\r\n      const cardTargetX = cardRect.left - containerRect.left;\r\n      const cardTargetY = cardRect.top + (cardRect.height \/ 2) - containerRect.top;\r\n\r\n      if (index === 0) firstCardCenterY = cardTargetY;\r\n      if (index === cards.length - 1) lastCardCenterY = cardTargetY;\r\n\r\n      createSVGLine(canvas, midX, cardTargetY, cardTargetX, cardTargetY, '#8b7ca8', 1.5);\r\n    });\r\n\r\n    createSVGLine(canvas, startX, startY, midX, startY, '#8b7ca8', 1.5);\r\n    createSVGLine(canvas, midX, firstCardCenterY, midX, lastCardCenterY, '#8b7ca8', 1.5);\r\n  }\r\n\r\n  function createSVGLine(svg, x1, y1, x2, y2, color, strokeWidth) {\r\n    const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\r\n    line.setAttribute('x1', x1);\r\n    line.setAttribute('y1', y1);\r\n    line.setAttribute('x2', x2);\r\n    line.setAttribute('y2', y2);\r\n    line.setAttribute('stroke', color);\r\n    line.setAttribute('stroke-width', strokeWidth);\r\n    svg.appendChild(line);\r\n  }\r\n\r\n  window.addEventListener('load', drawFlowchartLines);\r\n  window.addEventListener('resize', drawFlowchartLines);\r\n  setTimeout(drawFlowchartLines, 100);\r\n<\/script>\r\n<!-- END: Custom Energy Flowchart Section -->\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n        \t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Energy markets are volatile Budgeting is challenging Procurement strategy is important<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5811","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/pages\/5811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/comments?post=5811"}],"version-history":[{"count":10,"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/pages\/5811\/revisions"}],"predecessor-version":[{"id":6039,"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/pages\/5811\/revisions\/6039"}],"wp:attachment":[{"href":"https:\/\/casdale.com\/index.php\/wp-json\/wp\/v2\/media?parent=5811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}