/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.21.1.1689836650
Updated: 2023-07-20 16:34:10

*/

/* ═════════════════════════════════════════════════════════════
   Helpmann Academy — Brand Colour Palette
   Source: Helpmann Academy Brand Guidelines
   ═════════════════════════════════════════════════════════════ */
:root {
  /* Web colours */
  --ha-cyan:    #C3EFD9; /* RGB 195 / 239 / 217 — primary corporate colour */
  --ha-yellow:  #F7F38D; /* RGB 247 / 243 / 141 */
  --ha-magenta: #FDD3D0; /* RGB 253 / 211 / 208 */
  --ha-blue:    #B4E7ED; /* RGB 180 / 231 / 237 */

  /* Print 100% tint (CMYK → approximate screen HEX) */
  --ha-cyan-print:    #85FFB3; /* CMYK 48 / 0 / 30 / 0 */
  --ha-yellow-print:  #F7F59C; /* CMYK  3 / 4 / 39 / 0 */
  --ha-magenta-print: #C9DEFF; /* CMYK 21 / 13 /  0 / 0 */
  --ha-blue-print:    #96E6E6; /* CMYK 41 / 10 / 10 / 0 */

  /* Print 33% tint */
  --ha-cyan-print-33:    #D7FDE9;
  --ha-yellow-print-33:  #FBFAD4;
  --ha-magenta-print-33: #E9F0FF;
  --ha-blue-print-33:    #D4F5F5;

  /* Print 15% tint */
  --ha-cyan-print-15:    #EDFEF5;
  --ha-yellow-print-15:  #FDFCEE;
  --ha-magenta-print-15: #F5F8FF;
  --ha-blue-print-15:    #EDFBFB;

  --ha-orange-50: #EBBE58;
  --ha-orange-100: #E8AE2B;
  --ha-orange-15: #F2E3C1;
  --ha-orange-5: #F3ECDB;
}

.grid-cols-2.grid-cols-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	.et_pb_column {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;

	}
    margin-bottom: 2rem;
}
@media (max-width: 980px) {
	.grid-cols-2.grid-cols-2 {
		display: grid;
		grid-template-columns: 1fr;
        .et_pb_column {
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
	}
}

section {
	padding-top: 4%;
	padding-bottom: 4%;
	.inner {
		width: 80%
	}
}

@media (max-width: 980px) {
	.inner {
		width: 100% !important;
	}
}
 .case-study__content {
    background-color: var(--page-colour, #b4f7de) !important;                                                                                                                                                      
    width: 100%;                                          
    margin: 0 auto;             
	padding-top: 8%;
	padding-bottom: 4%;
    box-sizing: border-box;              
  }                                                      

   .tag-line {
    margin-bottom: 2%;
  }                                                                                                                                                                                                                
 .tag-line span {
    display: inline-block;                                                                                                                                                                                         
    width: fit-content;                                  
    padding: .3em 1em;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7em;                                                                                                                                                                                            
    background: transparent;
    border: 2px solid;                                                                                                                                                                                             
    color: #000;                                         
    letter-spacing: .02em;
  }                                                                                                                                                                                                                
   
  .case-study__content_main { 
	padding-top: 2%;
    padding-inline: 5%;                                   
  }

  .case-study__title {
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;                                                                                                                                                                                              
    font-size: 54px;
    line-height: 1.1;                                                                                                                                                                                              
    text-decoration: underline;                          
    color: #000 !important;
    margin: 0 ;                                                                                                                                                                                              
  }
                                                                                                                                                                                                                   
  .case-study__content_textbox p {                       
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;                                                                                                                                                                                              
    font-size: 14px;
    line-height: 1.7em;                                                                                                                                                                                             
    color: #000;                                         
  }
  .case-study__content_textbox p:last-child { margin-bottom: 0; }
  
/* ── [case_study_image] ───────────────────────────────────── */                                                                                                                                                
  .sv-figure {                                                                                                                                                                                                     
    position: relative;                 
    width: 100%;
  }                                                                                                                                                                                                                
  .sv-figure img {
    display: block;                                                                                                                                                                                                
    width: 100%;                                         
    height: auto;
  }
  .sv-figure__caption {
    position: absolute !important;
    bottom: 0;
    left: 0;                                                                                                                                                                                                       
    margin: 0;
    padding: 0.75rem 1rem;                                                                                                                                                                                         
    background-color: var(--page-colour, #000) !important;
    color: #000 !important;
    font-size: 0.75rem;                                                                                                                                                                                            
    font-weight: 600;
    letter-spacing: 0.05em;                                                                                                                                                                                        
    text-transform: uppercase;                           
    writing-mode: vertical-rl;
    transform: rotate(360deg);                                                                                                                                                                                     
    transform-origin: center;
  }                    

 /* ── [case_study_quote] ───────────────────────────────────── */                                                                                                                                                
  .case-study__quote-section {                           
    background-color: var(--page-colour, #b4f7de) !important;                                                                                                                                                    
    margin: 0;
  }                                                                                                                                                                                                                
  .case-study__quote-section .inner {                    
    margin: 0 auto;                                                                                                                                                                                                
  }
                                                                                                                                                                                                                   
  .sv-quote {                                            
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;                                                                                                                                                                                       
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
  }                                                                                                                                                                                                                
                                                         
  .sv-quote__icon {
    flex: 0 0 auto;
    width: 80px;                                                                                                                                                                                                   
    height: 80px;
    margin: 8px 2.5rem 0 0;                                                                                                                                                                                        
    fill: var(--quote-colour, #ffffff);                  
  }                                                                                                                                                                                                                
  
   .sv-quote__body {                                                                                                                                                                                                
    flex: 1 1 auto;                                      
    min-width: 0;
    padding-left: 2.5rem;
    border-left: 2px solid var(--quote-colour, #ffffff);
  }    
                                                                                                                                                                                                                   
  .sv-quote__content {                                   
    font-family: Rubik, Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        text-decoration: none;
        font-size: 32px;
        color: rgb(0, 0, 0) !important;
    padding-bottom: 10px;
    line-height: 1em;
  }
  .sv-quote__content p:last-child { margin: 0; }                                                                                                                                                                   
  
  .sv-quote__author {                                                                                                                                                                                              
    display: block;                                      
    font-style: normal;                                                                                                                                                                                            
    font-weight: 700;
    font-size: 14px;                                                                                                                                                                                               
    color: #000;                                         
    letter-spacing: 0.02em;
  }
 /* ═════════════════════════════════════════════════════════════
     Career timeline section — [career_timeline]                                                                                                                                                                   
     ═════════════════════════════════════════════════════════════ */
.sv-timeline-wrap {
	    background-color: var(--page-colour, #b4f7de) !important;
    margin: 0;
}
  .sv-timeline,                                                                                                                                                                                                    
  .sv-timeline__row {                                                                                                                                                                                              
    list-style: none !important;                                                                                                                                                                                   
    list-style-type: none !important;                                                                                                                                                                              
    padding-left: 0 !important;               
  }                                                                                                                                                                                                                
  .sv-timeline::marker,                                  
  .sv-timeline__row::marker,                                                                                                                                                                                       
  .sv-timeline li::marker {                   
    content: none !important;                                                                                                                                                                                      
    display: none !important;                            
  }                                                                                                                                                                                                                
  .sv-timeline > li {                         
    list-style: none !important;                                                                                                                                                                                   
  }                

  .case-study__timeline-section {                                                                                                                                                                                  
    background-color: var(--page-colour, #b4f7de) !important;                                                                                                                                                                                        
  }                                   
  .case-study__timeline-section .inner {
    width: 100%;                                                                                                                                                                                                                                      
    margin: 0 auto;                                                                                                                                                                                                
  }                                   

  /* Section tagline pill */                                                                                                                                                                                       
  .case-study__timeline-tagline {                             
    margin: 0 0 4rem;                                                                                                                                                                                              
  }                                   
  .case-study__timeline-tagline span {
    display: inline-block;                                                                                                                                                                                         
    width: fit-content;                                         
    padding: .3em 1em;                                                                                                                                                                                             
    font-size: 20px;                  
    font-weight: 700;
    line-height: 1.7em;
    background: transparent;                                                                                                                                                                                       
    border: 2px solid;                                           
    letter-spacing: 0.02em;                                                                                                                                                                                        
    color: #000;                      
  }

  /* Year tile — matches deleted-page spec */                                                                                                                                                                      
  .sv-timeline__year {                                           
    display: inline-block;                                                                                                                                                                                         
    box-sizing: border-box;           
    flex: 0 0 auto;         
	height: fit-content;
    width: 100%;                                                 
    max-width: 110px;                                                                                                                                                                                              
    padding-top: 15px !important;     
    padding-bottom: 15px !important;
    padding-left: 10px;
    padding-right: 10px;                                                                                                                                                                                           
    background-color: #000 !important;                           
    color: #fff !important;                                                                                                                                                                                        
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;                                                                                                                                                                                            
    font-size: 36px;                                                                                                                                                                                               
    line-height: 23.8px;              
    text-align: center;                                                                                                                                                                                            
    word-wrap: break-word;                                                                                                                                                                                       
    -webkit-animation-timing-function: linear;                                                                                                                                                                     
            animation-timing-function: linear;
    -webkit-animation-duration: .2s;                                                                                                                                                                               
            animation-duration: .2s;                     
  }                                                                                                                                                                                                              
                                   
	.sv-timeline__entry {
		display: flex;
    	gap: 30px;
		width: 100%;
	}
  /* Left col: push tile to right (against spine) */
  .sv-timeline__col--left .sv-timeline__year {                                                                                                                                                                     
    margin-left: auto !important;                        
    margin-right: 0 !important;               
  }                                                                                                                                                                                                              
                                                                                                                                                                                                                   
  /* Right col: push tile to left (against spine) */
  .sv-timeline__col--right .sv-timeline__year {                                                                                                                                                                    
    margin-right: auto !important;                                                                                                                                                                                 
    margin-left: 0 !important;                
  }      
/* ── Desktop ─────────────────────────────────────────────── */                                                                                                                                                 
  @media (min-width: 981px) {                                                                                                                                                                                      
    .sv-timeline--mobile { display: none !important; }                                                                                                                                                                       

	
    /* The spine: one absolute line down the middle of the whole list */                                                                                                                                           
    .sv-timeline--desktop {               
      position: relative;                                                                                                                                                                                          
    }                                                                                                                                                                                                              
    .sv-timeline--desktop::before {
      content: "";                                                                                                                                                                                                 
      position: absolute;                                
      top: 0;                             
      bottom: 0;
      left: 50%;                                                                                                                                                                                                   
      width: 2px;
      background: #000;                                                                                                                                                                                            
      transform: translateX(-50%);                       
      z-index: 0;
    }                                         
                                          
    .sv-timeline__row {
      position: relative;                                                                                                                                                                                          
      z-index: 1;
      display: grid;                                                                                                                                                                                               
      grid-template-columns: 1fr 1fr !important;        
	  list-style: none;                                                                                                                                                                                            
      margin: 0;
      padding: 0; 
    }                                         
                                          
    .sv-timeline__col {
      display: flex !important;
      flex-direction: row !important;                                                                                                                                                                              
      align-items: flex-start;                
      gap: 30px !important;                   
      padding: 40px 0 !important;         
      box-sizing: border-box;
      min-width: 0; 
    }                                                                         
	  .sv-timeline__body, .sv-timeline__body p {
		font-family:Rubik, Helvetica, Arial, Lucida, sans-serif;
		font-size:20px;
		font-weight:300;
		line-height:28px;
		text-align:left;
	  }
                                        
	
    /* Left col: description first, year tile flush against spine on right */
	  .sv-timeline__col--left {
		  justify-content: flex-end;
	  }
    .sv-timeline__col--left .sv-timeline__body {
      order: 1;
      flex: 1 1 0;                                                                                                                                                                                                 
      min-width: 0;
      text-align: right;                                                                                                                                                                                           
    }                                                    
    .sv-timeline__col--left .sv-timeline__year {
      order: 2;
      margin-left: auto !important;                                                                                                                                                                                
      margin-right: 0 !important;
    }                                                                                                                                                                                                              
                                                         
    /* Right col: year tile flush against spine on left, description after */
    .sv-timeline__col--right .sv-timeline__year {                                                                                                                                                                  
      order: 1;                               
      margin-right: auto !important;                                                                                                                                                                               
      margin-left: 0 !important;                         
    }                                                                                                                                                                                                              
    .sv-timeline__col--right .sv-timeline__body {
      order: 2;                                                                                                                                                                                                    
      flex: 1 1 0;                                       
      min-width: 0;
      text-align: left;                                                                                                                                                                                            
    }
}

.sv-timeline--mobile {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
 .sv-timeline--mobile {
      position: relative;                                                                                                                                                                                          
      list-style: none !important;                                                                                                                                                                                  
      border-left: 2px solid #000 !important;
    }                                         
                                                           
    .sv-timeline--mobile .sv-timeline__year { 
      grid-column: 1;                                                                                                                                                                                              
      margin: 0 !important;                              
    }                                                                                                                                                                                                              
    .sv-timeline--mobile .sv-timeline__body {
      grid-column: 2;                                                                                                                                                                                              
      text-align: left;                                  
      min-width: 0;
    }                   

/* Desktop: stat col fills full width of its grid cell, no year column */
  @media (min-width: 981px) {             
    .sv-timeline__col--stat {                                                                                                                                                                                      
      display: block !important;                                                                                                                                                                                   
      grid-template-columns: none !important;                                                                                                                                                                      
      padding: 60px 0 !important;                                                                                                                                                                                  
    }                                                    
    .sv-timeline__col--left.sv-timeline__col--stat .sv-timeline__body {                                                                                                                                            
      text-align: right;                      
      padding-right: 30px;                                                                                                                                                                                         
    }                                                    
    .sv-timeline__col--right.sv-timeline__col--stat .sv-timeline__body {                                                                                                                                           
      text-align: left;                       
      padding-left: 30px;                                                                                                                                                                                          
    }            
	  
	  .sv-timeline__col--stat {
		  .sv-timeline__body {
			      display: flex;
		    justify-content: flex-end;
			  flex-direction: column;
			  align-items: flex-end;
			  gap:8px;
			  
			  
			  p {
				      width: fit-content;
			  }
          }
        }
	  
  }                                                                                                                                                                                                                
  
  /* Mobile: stat row fills full width, no year column */                                                                                                                                                          
  @media (max-width: 980px) {                            
    .sv-timeline--mobile .sv-timeline__row--stat {
      display: block !important;                                                                                                                                                                                   
      grid-template-columns: none !important;
      padding: 1.5rem 0 !important;                                                                                                                                                                                
    }                                                                                                                                                                                                              
    .sv-timeline--mobile .sv-timeline__row--stat .sv-timeline__body {
      text-align: left;                                                                                                                                                                                            
    }                                                                                                                                                                                                              
  }
                                                                                                                                                                                                                   
  /* Stat typography — large underlined headings, normal body */
  .sv-timeline__col--stat .sv-timeline__body h1,
  .sv-timeline__col--stat .sv-timeline__body h2,
  .sv-timeline__col--stat .sv-timeline__body h3,                                                                                                                                                                   
  .sv-timeline__col--stat .sv-timeline__body h4,
  .sv-timeline__row--stat .sv-timeline__body h1,                                                                                                                                                                   
  .sv-timeline__row--stat .sv-timeline__body h2,         
  .sv-timeline__row--stat .sv-timeline__body h3,                                                                                                                                                                   
  .sv-timeline__row--stat .sv-timeline__body h4 {                                                                                                                                                                  
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;                                                                                                                                                                                              
    font-size: 54px;                                     
    line-height: 1.1;                                                                                                                                                                                              
    text-decoration: underline;                                                                                                                                                                                    
    color: #000 !important;                   
    margin: 0 0 .5em;                                                                                                                                                                                              
    padding: 0;                                          
  }                                                                                                                                                                                                                
  
  .sv-timeline__col--stat .sv-timeline__body p,                                                                                                                                                                    
  .sv-timeline__row--stat .sv-timeline__body p {         
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;                                                                                                                                                                                              
    font-size: 20px;                      
    line-height: 28px;                                                                                                                                                                                             
    color: #000;                                                                                                                                                                                                   
    margin: 0 0 .25em;                    
  }                                                                                                                                                                                                                
                                                                                                                                                                                                                   
  @media (max-width: 980px) {                 
    .sv-timeline__row--stat .sv-timeline__body h1,                                                                                                                                                                 
    .sv-timeline__row--stat .sv-timeline__body h2,       
    .sv-timeline__row--stat .sv-timeline__body h3 {                                                                                                                                                                
      font-size: 36px;                        
    }                                                                                                                                                                                                              
  }            


/* ── Timeline fade-in ─────────────────────────────────────── */
  .sv-timeline__row {                                                                                                                                                                                              
    opacity: 0;                           
    transition: opacity 200ms linear;                                                                                                                                                                              
  }                                                                                                                                                                                                                
  .sv-timeline__row.is-visible {
    opacity: 1; 
    gap: 1px;                                                                                                                                                                                                   
  }                                                      

  /* Honour OS-level reduced-motion preference */                                                                                                                                                                  
  @media (prefers-reduced-motion: reduce) {
    .sv-timeline__row {                                                                                                                                                                                            
      opacity: 1;                                                                                                                                                                                                  
      transition: none;
    }                                                                                                                                                                                                              
  }        


  @media (max-width: 720px) {                                                                                                                                                                                      
    .case-study__quote-section { padding: 3rem 5%; }
    .sv-quote__icon { width: 50px; height: 50px; margin-right: 1.25rem; }                                                                                                                                          
    .sv-quote__body { padding-left: 1.25rem; }                                                                                                                                                                     
    .sv-quote__content { font-size: 24px; }
	  
	.case-study__content {
		padding-top: 20% !important;
	}
  }       

  /* Mobile */
  @media (max-width: 980px) {                                                                                                                                                                                      
    .case-study__content, .case-study__timeline-section { width: 100%; padding: 40px 5%; }                                                                                                                                                        
    .case-study__content .tag-line { margin-bottom: 60px; }
    .case-study__content_main { padding-left: 0; }                                                                                                                                                                 
    .case-study__title { font-size: 36px; margin-bottom: 30px; }
	  .sv-timeline--desktop {
		  display: none;
	  }
  }               
	  
	  
	  .sv-grid {
		  display: grid;
		  gap: 40px;
	  }
	  .sv-grid--cols-1 { grid-template-columns: 1fr; }
  .sv-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }                                                                                                                                                      
  .sv-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sv-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }                                                                                                                                                      
  .sv-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
  .sv-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }                                                                                                                                                      
                                              
   .sv-grid__card {                                                                                                                                                                                                 
    position: relative;
    display: block;                                                                                                                                                                                                
    overflow: hidden;                                    
    text-decoration: none;                                                                                                                                                                                         
    color: inherit;                                      
    background: #eee;
  }                                                                                                                                                                                                                
  
  .sv-grid__media {                                                                                                                                                                                                
    position: relative;                                  
    width: 100%;
    aspect-ratio: var(--sv-card-aspect, 4/5);                                                                                                                                                                      
    overflow: hidden;                         
    line-height: 0;                                                                                                                                                                                                
  }                                                      
                                                                                                                                                                                                                   
  .sv-grid__image {                           
    display: block;                                                                                                                                                                                                
    width: 100%;                                         
    height: 100%;                                                                                                                                                                                                  
    object-fit: cover;
    object-position: center;                                                                                                                                                                                       
    transition: transform .6s ease;                      
  }
  .sv-grid__card:hover .sv-grid__image { transform: scale(1.03); }
                                          
  /* Vertical black label tile, top-right */  
  .sv-grid__label {                                                                                                                                                                                                
    position: absolute;
    top: 0;                                                                                                                                                                                                        
    right: 0;                                            
    background: #000;                                                                                                                                                                                              
    color: #fff;                                         
    padding: 14px 6px;                                                                                                                                                                                             
    font-family: 'Rubik', sans-serif;         
    font-weight: 300;                                                                                                                                                                                              
    font-size: 18px;                                     
    line-height: 1;                                                                                                                                                                                                
    letter-spacing: .03em;                
    text-transform: uppercase;                                                                                                                                                                                     
    writing-mode: vertical-rl;                                                                                                                                                                                     
    transform: rotate(180deg);                
    z-index: 2;                                                                                                                                                                                                    
    pointer-events: none;                                
  }                                                                                                                                                                                                                
  
  /* Hover overlay: cream/white wash over the image */
  .sv-grid__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 1;
  }
  .sv-grid__card:hover::before,
  .sv-grid__card:focus-visible::before {
    opacity: 1;
  }

  /* Title + author wrapper — stacks naturally at the bottom of the card */
  .sv-grid__text {
    position: absolute;
    left: 1rem;
    right: 3rem;                   /* clears the vertical label tile */
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 2;
  }

  .sv-grid__card:hover .sv-grid__text,
  .sv-grid__card:focus-visible .sv-grid__text {
    opacity: 1;
    transform: translateY(0);
  }

  .sv-grid__title {
    margin: 0;
    padding: 0;
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.2;
    text-align: left;
    color: #0a0a0a;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .sv-grid__author {
    margin: 0;
    padding: 0;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: #0a0a0a;
  }

  /* Keep the label tile crisp on top of the wash */
  .sv-grid__label { z-index: 3; }            
                                                                                                                                                                                                                            
                                                         
  @media (max-width: 980px) {                                                                                                                                                                                      
    .sv-grid--cols-4, .sv-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
  }                                                                                                                                                                                                                
  @media (max-width: 600px) {                                                                                                                                                                                      
    .sv-grid--cols-4, .sv-grid--cols-3, .sv-grid--cols-2 { grid-template-columns: 1fr; }
  }                                                     
                                                                                                                                                                                                                   
  /* Responsive collapse */
  @media (max-width: 1100px) {                                                                                                                                                                                     
    .sv-grid--cols-4,                                    
    .sv-grid--cols-5,                     
    .sv-grid--cols-6 { grid-template-columns: repeat(3, 1fr); }
  }                                                                                                                                                                                                                
  @media (max-width: 820px) {             
    .sv-grid--cols-3,                                                                                                                                                                                              
    .sv-grid--cols-4,                                                                                                                                                                                              
    .sv-grid--cols-5,                     
    .sv-grid--cols-6 { grid-template-columns: repeat(2, 1fr); }                                                                                                                                                    
    .sv-grid__title { font-size: 22px; }                                                                                                                                                                           
    .sv-grid__badge { top: .75rem; right: .75rem; font-size: 12px; }

  }                                                                                                                                                                                                                
  @media (max-width: 480px) {
    .sv-grid { gap: 1.5rem; }
    .sv-grid--cols-2,
    .sv-grid--cols-3,
    .sv-grid--cols-4,
    .sv-grid--cols-5,
    .sv-grid--cols-6 { grid-template-columns: 1fr; }
  }


/* ── [toggle_section] ─────────────────────────────────────── */
.donation-form .radio-buttons.radio-buttons {
    justify-content: flex-start !important;
}

.donation-form .dropdown.is-visible {
    justify-content: flex-start !important;
}

.donation-form .dropdown {
    margin-top: 20px !important;
    margin-bottom: 50px !important;
}
#program-donation, #future-donation {
    padding: 0 !important;
}
.sv-toggle {
    margin-top: 1rem;
}
/* Hide the native radio input but keep it accessible */
.sv-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Toggle button — body text style to match paragraph */
.sv-toggle__label {
  display: inline-flex;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 38.4px;
  color: #000;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
@media (max-width: 980px) {
  .sv-toggle__label {
    font-size: 16px;
    line-height: 28px;
  }
  .sv-toggle__label::before {
    margin-top: 4px;
  }
}

/* Checkbox tick indicator */
.sv-toggle__label::before {
  margin-top: 7px;
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 3px solid #000;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Active state — tick appears, square fills black */
.sv-toggle__input:checked + .sv-toggle__label::before {
  content: '✓';
  background: #000;
  color: #fff;
}

/* Target sections are hidden via inline <style> output by [toggle_section].
   No manual class needed — just set the element's CSS ID to match target=. */


/* ── [stat_bubbles] ───────────────────────────────────────── */

.sv-bubbles {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 80%;
    margin-inline: auto;
}

.sv-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  aspect-ratio: 1;
  background-color: var(--ha-yellow);
}

/* Proportional flex-grow: sm=3 md=4 lg=5 (matching the visual size ratio) */
.sv-bubble--sm { flex: 2; }
.sv-bubble--md { flex: 3; }
.sv-bubble--lg { flex: 4; }

.sv-bubble__stat {
  font-family: 'Rubik', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.5vw, 26px);
  line-height: 1.1;
  color: #000;
  display: block;
}

.sv-bubble__label {
    padding-top: 8px;
    font-family: 'Rubik', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #000;
    margin: 0;
}

@media (max-width: 600px) {
  .sv-bubbles { flex-direction: column; align-items: center; }
  .sv-bubble--sm,
  .sv-bubble--md,
  .sv-bubble--lg { flex: none; width: 70vw; max-width: 220px; }
}


/* ── [case_study_video] ──────────────────────────────────── */

.sv-video {
  width: 100%;
}

.sv-video__ratio {
  aspect-ratio: 16 / 9;
}

.sv-video__ratio iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.sv-video--fullwidth {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

section.sv-video-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── [impact_stats] ───────────────────────────────────────── */

.sv-impact {
  box-sizing: border-box;
}

.sv-impact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.sv-impact__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 30px;
}

/* Outer edge padding */
.sv-impact__item:nth-child(odd)  { padding-left: 65px; }
.sv-impact__item:nth-child(even) { padding-right: 65px; }

/* Row colours — 3-tone cycle, repeats every 3 rows (6 items) */
.sv-impact__item:nth-child(6n+1),
.sv-impact__item:nth-child(6n+2) { background-color: var(--ha-orange-100); }

.sv-impact__item:nth-child(6n+3),
.sv-impact__item:nth-child(6n+4) { background-color: var(--ha-orange-50); }

.sv-impact__item:nth-child(6n+5),
.sv-impact__item:nth-child(6n+6) { background-color: var(--ha-orange-15); }

.sv-impact__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  color: #000;
}

.sv-impact__body {
    font-family: 'Rubik', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 4px;
}

.sv-impact__amount {
  font-family: 'Rubik', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: #000;
}

.sv-impact__desc {
    font-family: 'Rubik', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #000;
    margin: 0;
}

@media (max-width: 600px) {
  .sv-impact__grid { grid-template-columns: 1fr; }
  .sv-impact__item:nth-child(odd)  { padding-left: 30px; }
  .sv-impact__item:nth-child(even) { padding-right: 30px; }
  .sv-impact__amount { font-size: 22px; }
}