:root {

     /* Existing colors */
     --bg-base: #0c322c;
     /* Original background */
     --primary-color: #30ba78;
     --text-main: #ffffff;
     --text-muted: #9ec3b9;
     --chart-color-2: #1e754b;
     --chart-color-3: #4ff7a3;
     --chart-color-4: #279963;
     /* New 3D background gradient colors */
     --bg-grad-1: #071f1b;
     --bg-grad-2: #014a40;
     --bg-grad-3: #05211b;
     --attn: var(--color-persimmon-5);


     --bg-2: #ffd3bd33;


     --color-white: rgb(255, 255, 255);
     --color-black: rgb(0, 0, 0);

     --color-pine: rgb(12, 50, 44);
     --color-jungle: rgb(48, 186, 120);
     --color-mint: rgb(144, 235, 205);
     --color-persimmon: rgb(254, 124, 63);
     --color-midnight: rgb(25, 32, 114);
     --color-waterhole: rgb(36, 83, 255);
     --color-fog: rgb(239, 239, 239);

     --color-jungle-1: var(--color-pine);
     --color-jungle-2: rgb(2, 89, 55);
     --color-jungle-3: rgb(0, 134, 87);
     --color-jungle-4: var(--color-jungle);
     --color-jungle-5: rgb(66, 210, 159);
     --color-jungle-6: rgb(131, 225, 190);
     --color-jungle-7: rgb(192, 239, 222);
     --color-jungle-8: rgb(234, 250, 244);

     --color-pine-1: var(--color-pine);
     --color-pine-2: rgb(1, 86, 74);
     --color-pine-3: rgb(0, 136, 120);
     --color-pine-4: rgb(0, 189, 167);
     --color-pine-5: rgb(56, 213, 180);
     --color-pine-6: var(--color-mint);
     --color-pine-7: rgb(191, 241, 234);
     --color-pine-8: rgb(234, 250, 248);

     --color-persimmon-1: rgb(71, 25, 13);
     --color-persimmon-2: rgb(142, 40, 16);
     --color-persimmon-3: rgb(189, 51, 20);
     --color-persimmon-4: rgb(255, 90, 43);
     --color-persimmon-5: rgb(254, 124, 63);
     --color-persimmon-6: rgb(255, 177, 132);
     --color-persimmon-7: rgb(255, 211, 189);
     --color-persimmon-8: rgb(255, 239, 233);

     --color-blue-1: rgb(10, 17, 43);
     --color-blue-2: rgb(25, 32, 114);
     --color-blue-3: rgb(11, 65, 183);
     --color-blue-4: rgb(36, 83, 255);
     --color-blue-5: rgb(60, 142, 239);
     --color-blue-6: rgb(129, 174, 252);
     --color-blue-7: rgb(200, 218, 252);
     --color-blue-8: rgb(230, 237, 254);

     --color-fog-1: rgb(29, 29, 29);
     --color-fog-2: rgb(62, 62, 62);
     --color-fog-3: rgb(82, 82, 82);
     --color-fog-4: rgb(111, 111, 111);
     --color-fog-5: rgb(153, 153, 153);
     --color-fog-6: rgb(186, 186, 186);
     --color-fog-7: rgb(220, 219, 220);
     --color-fog-8: rgb(239, 239, 239);

     --color-spectrum-1: rgb(0, 189, 167);
     --color-spectrum-2: rgb(161, 239, 139);
     --color-spectrum-3: rgb(125, 198, 226);
     --color-spectrum-4: rgb(232, 193, 247);
     --color-spectrum-5: rgb(93, 79, 153);
     --color-spectrum-6: rgb(249, 202, 191);
     --color-spectrum-7: rgb(252, 178, 68);
     --color-spectrum-8: rgb(189, 51, 20);

     /*helper variables*/
     --color-teal: var(--color-spectrum-1);
     --color-lime: var(--color-spectrum-2);
     --color-sky: var(--color-spectrum-3);
     --color-lilac: var(--color-spectrum-4);
     --color-amethyst: var(--color-spectrum-5);
     --color-peach: var(--color-spectrum-6);
     --color-marigold: var(--color-spectrum-7);
     --color-rust: var(--color-spectrum-8);
   }

   :root {
     background-color: rgb(12, 50, 44);
   }

   ::selection {
     background-color: white;
     color: black;
     text-shadow: none;
   }


   @font-face {
     font-family: 'SUSE';
     src: url('fonts/SUSE[wght].ttf') format('truetype');
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'SUSE';
     src: url('fonts/SUSE-Italic[wght].ttf') format('truetype');
     font-weight: 100 900;
     font-style: italic;
     font-display: swap;
   }

   @font-face {
     font-family: 'SUSE Mono';
     src: url('fonts/SUSEMono[wght].ttf') format('truetype');
     font-weight: 100 800;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'SUSE Mono';
     src: url('fonts/SUSEMono-Italic[wght].ttf') format('truetype');
     font-weight: 100 800;
     font-style: italic;
     font-display: swap;
   }


   *,
   *:before,
   *:after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;

   }





   body {
     background-color: #071f1b;
   }

   html,
   body {

     background-color: var(--color-blue-1);
     font-family: "SUSE", sans-serif;
     color: var(--text-main);
     line-height: 1.6;
     overflow-x: hidden;
     overflow-y: auto !important;
     display: block !important;

     /* Fallback and base gradient */
     position: relative;

   }


   .navy-cloth {
     background-color: var(--color-blue-1);
     color: white;
     background: url(img/bg.jpg), radial-gradient(ellipse at top, var(--color-midnight) 0%, var(--color-blue-1) 100%);

     background-position: 50% 50%;
     background-size: cover;
     background-attachment: fixed;
     background-blend-mode: luminosity;
     padding-bottom: 4rem;
   }

   /* Container for content that must stay on top of the background */
   article {
     position: relative;
     z-index: 1;
     /* Content above the background canvas */

     /*clearing the SUSE nav*/
   }

   /* Canvas for Three.js background */

   section a {
     color: var(--color-persimmon-6)
   }

   /* Typography (unchanged from original) */
   h1 {
     font-size: 6em;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1.5em;
     color: var(--primary-color);
   }

   h3 {
     font-size: 2.5rem;

     margin-bottom: 1rem;
     line-height: 1.3em;

   }

   p {
     font-size: 1.5rem;
     font-weight: 350;
     margin-bottom: 2rem;
   }

   /* Layout (unchanged from original) */
   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 3rem;
     padding-right: 6rem;
     position: relative;
   }

   section {
     font-size: 1.5rem;

     /*      min-height: 100vh;   */
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 5rem 0;
     position: relative;

   }

   .hero {

     text-align: left;
     flex-direction: column;
     font-size: clamp(1.5rem, -1.25rem + 3vw, 2rem);
   }



   .hero p {

     font-weight: 300;

     font-size: clamp(1rem, -1.5rem + 8vw, 1em);
     color: var(--color-jungle-7);
   }


   .hero .emphasis {
     color: white;
     padding-left: .2em;
     text-align: right;
   }

   .hero .emphasis b {
    white-space: nowrap;
     font-weight: 400;
     background-color: var(--color-blue-2);
     color: #fff;
     padding: .2em .5em;
     border-radius: .4em;
     box-shadow: 0 0 1em -.5rem var(--color-blue-3);
   }
.hero a{color: currentcolor; text-decoration:none;}
   .hero small {

     font-size: 1.5rem;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: .2em;
     background-color: var(--color-jungle-5);
     color: var(--color-blue-1);
     text-shadow: none;
     padding: .5em 1.5em;
     white-space: nowrap;
     border-radius: 2em;
     margin-top: 5rem;

   }

   .hero h1 {
     margin: 0;
     margin-left: -1rem;
     margin-bottom: 3rem;
     text-shadow: 0 .7rem 1rem #0009, 0 .2rem .1rem #0005;
   }

   /* Chart Sections (unchanged from original, but adds slight transparency to containers) */

   section.container {
     flex-direction: column;
     align-items: stretch;
     justify-content: start;
   }



   .content-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
     align-items: center;
     width: 100%;

     place-items: start;
   }


   .content-layout.reverse {
     grid-template-columns: 1fr 1fr;
   }

   .content-layout.reverse.right {
     grid-template-columns: 1fr 2fr;
   }

   .text-content {
     align-self: start
   }

   .content-layout.reverse .text-content {
     order: 2;
   }

   /*all copy fonts light*/
   article p {
     font-weight: 400;
     line-height: 1.5em;
     color: #fffc;
     font-size: clamp(1rem, -1.5rem + 8vw, 1.5rem);
   }




   article b {
     font-weight: 500
   }

   /* Responsive */



   @media (max-width: 900px) {



     .content-layout,
     .content-layout.reverse {
       grid-template-columns: 1fr !important;
       grid-column: span 1 !important;
     }

     .content-layout.reverse .text-content {
       order: 1;
     }

     footer {
       text-align: center
     }

     footer svg {
       margin: 0 auto;
     }

     h1 {
       font-size: 4em;
     }

     /*prominent headers on mobile*/




   }

   /* end mobile */





   article h3 {

     font-weight: 600;
     font-size: 2rem;
     margin-top: 2em;
   }

   .center {
     text-align: center;
   }

   svg * {
     transform-box: fill-box;
   }

   /*.quote-layout blockquote b:after{content:""; display:block}*/




   footer {
     color: var(--text-muted);
     background-color: black;
     padding: 4em 0;
   }

   footer .container {
     margin-bottom: 0
   }

   footer h3 {
     margin: 2em 0
   }

   @keyframes shimmer {
     0% {
       background-position: 1800% 0%
     }

     100% {
       background-position: -1800% 0%
     }
   }


   #audience h3 {
     font-family: "SUSE Mono";
     font-weight: 400;
     background-color: var(--bg-base);
     margin: 2em;
     padding: .2em 1em;
     border-radius: 2em;
     font-size: 1.3rem;
     display: inline-block;
     margin-bottom: 1em;
   }



   #audience {
     user-select: none;
   }





   footer a {
     font-weight: 400;
     color: var(--color-jungle-5)
   }

   @media (max-width: 900px) {
     footer p {
       text-align: left
     }



   }













   .signatories {
     display: grid;
     gap: 1em;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     text-align: center;
   }

   @media (max-width:800px) {
     .signatories {
       grid-template-columns: 1fr 1fr !important;
     }
   }

   @media (max-width:500px) {
     .signatories {
       grid-template-columns: 1fr !important;
     }
   }

   .signatory a {
     display: grid;
     place-items: center;
     border-radius: 1.5rem;
     grid-template-columns: 1fr;
     grid-template-rows: 3fr 1fr;
     height: 10em;
     ;
     color: var(--color-jungle-6);
   }

   .signatory b {
     font-weight: 400;
     font-size: 1rem;
   }

   .signatory img {
     max-width: 12em;
     max-height: 3.9em;
     filter: saturate(0) contrast(.25) brightness(1.75);
     opacity: .65;
     vertical-align: middle;
   }

   .signatory a:hover img {
     opacity: 1
   }

  .signatory a:hover {
     background-color: var(--color-blue-1);
     mix-blend-mode:screen;
   }

   .signatory a:not(:hover, :focus) b {
     color: transparent
   }


   .why-now {
     color: #000;
     background-color: var(--color-jungle-6);
     padding: 2em 0;
   }

   .why-now p {
     color: black;
     font-size: clamp(1rem, -1.5rem + 8vw, 1.5rem);
   }

   .why-now h3 {
     color: currentcolor;
     margin-top: 0;
   }

   .midd {
     place-self: center;
   }


   .letter * {
     font-size: 1rem;
     color: currentcolor;
     margin: 0;
     padding: 0;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
   }

   .letter {
transition: background .5s ease;
    padding: 3em;
    background-color: #d0d0d0;
    color: black;
    max-width: 50rem;
    margin: 0 auto;
   }

   .letter:hover {
     background-color: white;
   }

   .letter h1 {
     font-weight: 700;
     font-size: 1.5em;
     margin-bottom: 3rem;
   }

   .letter .addressing {
     font-weight: 700;
     margin: .5em 0
   }

   .letter p {
     margin: .5rem 0
   }

   .letter p b {
     font-weight: 700
   }

   @media (min-width: 900px) {
     .letter {
      
       background-image: linear-gradient(#fff, #ddd)
     }
   }


   dl {
     font-size: 1rem;
     gap: 1rem 0;
     border-radius: 1.5rem;
     display:grid;
     grid-template-columns: 1fr 3fr;;
   }

   dt,
   dd {
     background-color: var(--color-jungle-7);
     padding: 1rem;margin-bottom: .5rem;
   }

   dt {
     font-family: 'SUSE Mono';align-content: center;
     border-radius: 1.5rem 0 0 1.5rem;;
     padding: .5rem 1.5em;
     font-weight: 700;
     font-size: 1rem;
     background-color: var(--color-jungle-7); 
    
     display: inline-block;
     text-transform: uppercase;
     text-align: right;
    color: var(--color-blue-2);
   
   }

   dd {
    font-size: 1.4rem;
    border-radius: 0 1.5rem 1.5rem 0;
    min-height: 3rem;
    padding: 2rem; 
    color: var(--color-blue-2);
   }



   .bigcta {
     background-color: var(--color-jungle-6);
     color: black;
     padding: 1em 2em;
     border-radius: 1.5rem;
     margin-top: 1em;
     margin-bottom: 1em;
   }


   .bigcta.secondary {
     background-color: transparent;
     color: var(--color-jungle-6);
     box-shadow: inset 0 0 0 .1rem;
     margin-right: 1rem;
     padding: 1em 2em;
     border-radius: 1.5rem;
   }



   #onetrust-consent-sdk #onetrust-accept-btn-handler,
   #onetrust-banner-sdk #onetrust-reject-all-handler,
   #onetrust-banner-sdk #ot-dialog-confirm-handler {
     background-color: var(--color-jungle-6) !important;
     color: black !important;
     box-shadow: none;
     border: 0
   }



   #onetrust-consent-sdk #onetrust-pc-btn-handler,
   #onetrust-consent-sdk #onetrust-pc-btn-handler.cookie-setting-link,
   #onetrust-consent-sdk #ot-dialog-cancel-handler {
     color: #555 !important;
     border-color: currentcolor !important
   }