/*
fff
https://coolors.co/eae2b7
MAIN COLOR:#E63946 hover:#2C3F7C
GREY COLOR:#495057
ACCENT COLOR:#1D3557

type-scale.com
SPACING STSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

strong:orange
second:blue

*/
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 color:var(--grey);
 --red:#D62828;
 --redlight:#D62828;
 --lightgrey:#F5F5F5;
 --grey:#495057;
 --darkgrey:#495057;
 --blue:#003652;
 --lightblue:#5CC6FF;
 --mediumblue:#00507A;
 --yellow:#f0cc71;
 --yellow2:#feed9d;
 --darkyellow:#ff5c35;/* #f39738;*/
 --lightorange:#F5B72A;
 --orange:var(--darkyellow);/* #c74634;*/
 --darkorange:#c74634;
 --white:#F6F2DF;

 --heading-color:#333;
 --text-color:var(--grey);
 --clear-font-family:'Inter',sans-serif;
 --engaging-font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
 --cta-primary:var(--blue);
 --cta-primary-hover:var(--mediumblue);
 --cta-secondary:var(--orange);
 --cta-secondary-hover:var(--orange);
}

:root{
 /* Font Sizes (Desktop) */
 --h1-size:3rem;
 --h2-size:2rem;
 --h3-size:1.7rem;
 --h4-size:1.6rem;

 /* Line Heights (Desktop) */
 --h1-line-height:1.2;
 --h2-line-height:1.3;
 --h3-line-height:1.3;
 --h4-line-height:1.4;

 /* Layout Tokens */
 --standard-gap:2rem;
 --header-height:150px;
 --usp-height:55px;

 /* Font Sizes (Desktop) */
 --p-size:1.3rem;
 --li-size:1.2rem;
 --section-title-size:2rem;

 /* Line Heights (Desktop) */
 --p-line-height:1.8;
 --li-line-height:1.6;
 --section-title-line-height:1.3;

 /* Spacing */
 --section-padding:3rem;
 --sub-section-padding:1.5rem;
 --card-padding:1.2rem;
 --card-margin:1.2rem 0.3rem;
 --icon-margin:0.3rem;
 --list-margin-left:1rem;

 /* Vertical Rhythm */
 --heading-margin-bottom:1.5rem;
 --paragraph-margin-bottom:1.2rem;
 --list-margin-bottom:1.2rem;
 --h1-margin-bottom:1.5rem;
 --h2-margin-bottom:1.4rem;
 --h3-margin-bottom:1.3rem;
 --h4-margin-bottom:1.2rem;
 --button-padding:1rem 2rem;
 --button-width:200px;

 /* Widgets styling */
 --small-size:0.9rem;
 --text-font-family:var(--clear-font-family);
 --text-font-size:1.3em;
 --text-line-height:var(--p-line-height);
 --text-margin-bottom:var(--paragraph-margin-bottom);

 --nav-font-family:var(--engaging-font-family);
 --nav-font-size:1.4em;
 --nav-line-height:var(--h4-line-height);
 --nav-margin-bottom:var(--paragraph-margin-bottom);
 --nav-color:var(--text-color);

 --title-font-family:var(--clear-font-family);
 --title-font-size:2em;
 --title-line-height:var(--h4-line-height);
 --title-margin-bottom:var(--h4-margin-bottom);
 --title-color:var(--heading-color);

 --cta-padding:0.7em;
 --cta-bg:var(--cta-secondary);
 --cta-bg-hover:var(--cta-secondary-hover);
 --cta-color:var(--white);
 --cta-font-size:var(--h4-size);
 --cta-width:var(--button-width);
 --cta-radius:3px;

 --input-border-color:var(--grey);
 --input-border-radius:3px;

 --col-gap:3em;
 --megamenu-background-color:#fff;

 --highlight-text-font-family:var(--engaging-font-family);
 --highlight-text-spacing:1px;
 --highlight-text-size:1.5rem;
}

@media (max-width:1200px){
:root{
 --megamenu-background-color:var(--white);
}
}

@media (max-width:768px){
:root{
 /* Font Sizes (Mobile) */
 --h1-size:2.2rem !important;;
 --h2-size:1.8rem;
 --h3-size:1.5rem;
 --h4-size:1.4rem;

 /* Line Heights (Mobile) */
 --h1-line-height:1.3;
 --h2-line-height:1.35;
 --h3-line-height:1.4;
 --h4-line-height:1.5;

 /* Adjust layout if needed */
 --header-height:100px;
 --usp-height:50px;
 --standard-gap:1.5rem;

 /* Font Sizes (Mobile) */
 --p-size:1rem;
 --li-size:1rem;
 --section-title-size:1.6rem;

 /* Line Heights (Mobile) */
 --p-line-height:1.5;
 --li-line-height:1.5;
 --section-title-line-height:1.3;

 /* Adjusted Section Padding */
 --section-padding:2.5rem 1.5rem;
 --sub-section-padding:1rem;
 --paragraph-margin-bottom:1rem;
 --list-margin-bottom:1rem;
 --h1-margin-bottom:1.5rem;
 --h2-margin-bottom:1.5rem;
 --h3-margin-bottom:1.5rem;
 --h4-margin-bottom:1.5rem;
 --button-padding:1rem 2rem;
 --card-margin:1.2rem;
 --icon-margin:0.3rem;
 --list-margin-left:1rem;

 --megamenu-background-color:var(--white);
 --title-font-size:var(--h2-size);
 --text-font-size:var(--p-size);
}
}

h1,h2,h3,h4{
 font-family:var(--clear-font-family);
}

h1{
 font-size:var(--h1-size);
 line-height:var(--h1-line-height);
 margin-bottom:var(--h1-margin-bottom);
}

h2{
 font-size:var(--h2-size);
 line-height:var(--h2-line-height);
 margin-bottom:var(--h2-margin-bottom);
}

h3{
 font-size:var(--h3-size);
 line-height:var(--h3-line-height);
 margin-bottom:var(--h3-margin-bottom);
}

h4{
 font-size:var(--h4-size);
 line-height:var(--h4-line-height);
 margin-bottom:var(--h4-margin-bottom);
}

p{
 font-size:var(--p-size);
 line-height:var(--p-line-height);
 margin-bottom:var(--paragraph-margin-bottom);
}

ul{
 margin-left:var(--list-margin-left);
}

li{
 font-size:var(--li-size);
 line-height:var(--li-line-height);
 margin-bottom:var(--list-margin-bottom);
}

section h2{
 font-size:var(--section-title-size);
 line-height:var(--section-title-line-height);
}

section,.content,.info-content,.illustration{
 padding:var(--section-padding);
}

button{
 font-size:var(--p-size);
 padding:var(--button-padding);
 min-width:200px;
}

i{
 margin-right:var(--icon-margin);
}

.page-content{
 margin-top:calc(var(--header-height) + var(--usp-height));
}

body{
 font-family:'Inter',sans-serif;
 letter-spacing:0;
}

.container{
 display:flex;
 flex-direction:column;
}

.yellow-start{
 background:#feed9d;
}

.banner{
 background:linear-gradient(90deg,#feed9d 0%,#feed9d 100%);
}

.yellow-end{
 background:linear-gradient(90deg,#feed9d 0%,rgba(255,255,255,1) 80%);
}

 .organisation-trademark{
 width:95%;
 padding:10px 5px;
 display:flex;
 gap:10px;
 img{
 border-radius:5px;
 width:32%;
}
}

 @media (max-width:600px){
 .organisation-trademark{
 flex-direction:column;
 img{
 width:100%;
}
}

 .container .el--8{
 grid-column:2;
}
}

 .southern-solar-about{
 background:var(--white);
 display:flex;
 gap:1rem;
}

 .southern-solar-about .illustration{
 min-width:350px;
 padding:2rem 2rem 0 0;
}

 .southern-solar-about h4{
 font-size:var(--h4-size);
}

 .southern-solar-about .ethos{
 color:var(--orange);
 font-family:var(--highlight-text-font-family);
 letter-spacing:var(--highlight-text-spacing);
 font-size:var(--highlight-text-size);
}

 .southern-solar-about p,.southern-solar-about h4{
 color:var(--grey);
}

 .southern-solar-intro{
 position:relative;
 display:flex;
}

 .southern-solar-intro{
 background:var(--lightgrey);
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 align-items:center;
 width:100%;
}

 .southern-solar-intro .solar-organisation{
 width:317px;
}

 .southern-solar-intro .main-hub{
 color:var(--blue);
 font-weight:bolder;
}

 .southern-solar-intro .solar-service{
 color:var(--blue);
 font-weight:bolder;
}

 .southern-solar-intro div{
 flex:1 0 300px;
 height:100px;
}

 .southern-solar-intro div:last-child{
 margin-right:0;
}

 .southern-solar-intro div h4{
 color:var(--orange)
}

 .southern-solar-intro div h3{
 letter-spacing:-1px;
}

 .southern-solar-intro div a:link{
 text-decoration:none;
}

 .southern-solar-intro div a:hover,
 .southern-solar-intro div a:focus,
 .southern-solar-intro div a:active
{
 text-decoration:underline;
 cursor:pointer;
}

 .contact-home{
 width:100%;
 overflow:hidden;
 position:relative;
}

 .contact-home{
 display:block;
 background-image:url("../images/van2.jpg");
 width:100%;
 background-position-y:-650px;
}

 .contact-home .content{
 display:grid;
 grid-template-columns:1fr 1fr;
 align-items:center;
 gap:1rem;
 position:relative;
 width:60%;
 margin:0 auto;
}

 .contact-home .southern-solar-location{
 background:var(--red);
 height:600px;
 background-color:rgba(0,0,0,0.5);
 border-radius:25px;
}

 .contact-home form{
 background-color:rgba(0,0,0,0.5);
 border-radius:25px;
 height:600px;
}

 .contact-home label{
 display:block;
}

 .contact-home form h3,
 .contact-home form p{
 color:var(--white);
}

 .contact-home form input,
 .contact-home form textarea{
 border-radius:5px;
 display:block;
}

 .contact-home form .float-label-field label{
 color:var(--white);
}

 @media (max-width:1200px){
 .certification-declaration .content{
 width:100%;
}
 .site-footer{
 width:100%;
}
 .site-footer{
 .southern-solar-intro{
 width:100%;
}
}
 .contact-home .southern-solar-location{
 visibility:hidden;
 height:0;
}
 .contact-home .southern-solar-location{
 width:100%;
}
 .contact-home .content{
 grid-template-columns:1fr;
 gap:0;
 width:90%;
}

 .certification-declaration{
 width:100%;
}

 .call-to-action-home{
 flex-direction:column;
}

 .call-to-action-home div{
 width:100% !important;
}
 .southern-solar-about{
 flex-direction:column;
}

 .southern-solar-about .illustration{
 padding:0 2rem 0;
}
}

 @media (max-width:900px){
 .contact-home .content{
 width:70%;
}
}

 .el--8{
 position:absolute;
 top:-400px;
}

iframe,object,embed{
 max-width:100%;
}

.float-label-field{
 border:none;
 outline:none;
 position:relative;
 box-sizing:border-box;
}

.float-label-field input,.float-label-field textarea{
 border:none;
 outline:none;
 width:100%;
 border-bottom:solid 1px #efefef;
}

.float-label-field label{
 opacity:0.5;
 position:absolute;
 top:5px;
 left:5px;
 transition:all 0.2s ease;
}

.float-label-field.focus label{
 color:orange;
}
.float-label-field.focus input,.float-label-field.focus textarea{
 border-bottom:solid 1px orange;
}
.float-label-field.float label{
 opacity:1;
 top:-8px;
 transition:all 0.2s ease;
 font-weight:bold;
}
.success{
 color:green;
 margin-bottom:1rem;

}
.error{
 color:red;
}

.wp-block-navigation .current-menu-item a{
 text-decoration:underline !important;
}

#map{
 height:100%
}

.placeholder-block{
 background:var(--grey);
}

.float-label-field{
 border:none;
 outline:none;
 position:relative;
 box-sizing:border-box;
}

.float-label-field input,.float-label-field textarea{
 border:none;
 outline:none;
 width:100%;
 border-bottom:solid 1px #efefef;
}

.float-label-field label{
 opacity:0.5;
 position:absolute;
 top:5px;
 left:5px;
 transition:all 0.2s ease;
}

.float-label-field.focus label{
 color:orange;
}
.float-label-field.focus input,.float-label-field.focus textarea{
 border-bottom:solid 1px orange;
}
.float-label-field.float label{
 opacity:1;
 top:-8px;
 font-size:60%;
 transition:all 0.2s ease;
 font-weight:bold;
}
.success{
 color:green;
 margin-bottom:1rem;

}
.error{
 color:red;
}

.wp-block-navigation .current-menu-item a{
 text-decoration:underline !important;
}

#map{
 height:100%
}

.placeholder-block{
 background:var(--grey);
}



.banner{
 display:flex;
 justify-content:center;
 padding:var(--standard-gap);
 margin-top:200px;
}

.banner #home-banner{
 width:95%;
 overflow:hidden;
}

.banner .fallback{
 width:100%;
 height:300px;
 overflow:hidden;
 display:grid;
 gap:1rem;
}

.banner .fallback img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}

/* Desktop:3-image composition */
@media (min-width:1024px){
 .banner .fallback{
 grid-template-columns:1fr 1fr 1fr;
}
}

/* Tablet & mobile:single hero image */
@media (max-width:1023px){
 .banner .fallback img:not(:first-child){
 display:none;
}
}


.call-to-action-home{
 z-index:99;
 display:flex;
 gap:20px;
 padding:var(--sub-section-padding);
}

.call-to-action-home div{
 background:var(--lightgrey);
 border-radius:1rem;
 width:24%;
 position:relative;
 padding:var(--card-padding);
 height:300px;
}

.call-to-action-home div button{
 display:block;
 width:70%;
 margin:0 auto;
 background:var(--orange);
 border:1px solid var(--orange);
 color:var(--white);
 position:absolute;
 left:15%;
 bottom:10px;
 border-radius:5px;
 cursor:pointer;
}

.call-to-action-home header{
 justify-content:normal;
}
.call-to-action-home header .ethos{
 width:300px;
}

.solar-benefits-wrapper{
 display:flex;
 gap:2rem;
 justify-content:space-between;
 flex-wrap:wrap;
 background:#f9f9f9;
}

.scsolar-ethos-wrapper{
 padding:0 0 var(--sub-section-padding) 0;
}

.solar-box{
 flex:1 1 45%;
 background:white;
 border:1px solid #ddd;
 border-radius:8px;
 box-shadow:0 1px 3px rgba(0,0,0,0.05);
 min-width:280px;
 padding:var(--sub-section-padding);
}

.call-to-action-home div.is-highlighted,
.solar-box.is-highlighted{
 outline:2px solid var(--cta-bg);
 background:rgba(255,200,0,0.06);
}

.solar-box h2{
 color:#333;
}

.solar-box .sub{
 font-weight:bold;
 color:#666;
}

.solar-box .cta{
 font-weight:bold;
 color:#006400;
}

@media (max-width:767px){
 .solar-benefits-wrapper{
 flex-direction:column;
}
 .solar-box{
 width:100%;
}
}

.solar-benefits-wrapper{

}
.usp,.usp .fallback{
 position:fixed;
 width:100%;
 justify-content:space-between;
 background:var(--blue);
 color:var(--white);
 z-index:10;
 padding:0;
 height:50px;
}

.usp .visually-hidden{
 display:none;
}

.usp .fallback{
 display:grid;
 width:100%;
 gap:20px;
 justify-items:center;
}

.usp .fallback li{
 color:var(--white);
 list-style:none;
 line-height:3rem;
}

@media (min-width:1200px){
 .usp .fallback{
 grid-template-columns:repeat(3,1fr);
}
}

@media (max-width:1200px){
 .usp .fallback{
 grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:648px){
 .usp .fallback{
 grid-template-columns:1fr;
}
}
nav button{
 visibility:hidden;
}

header{
 width:100vw;
 display:flex;
 justify-content:space-between;
 align-items:center;
 position:fixed;
 background:white;
 margin-top:var(--usp-height);
 z-index:19;
 height:120px;
}

header h1{
 flex:1;/* same width logic as menu */
 display:flex;
}

header nav{
 flex:2;/* menu gets more space */
 display:flex;
 align-items:center;
}

header h1{
 margin:0;
}

@media (max-width:1200px){
 nav button.open,
 nav button.close{
 background:none;
 border:none;
 cursor:pointer;
}

 nav button{
 position:absolute;
 right:10px;
 width:40px;
 min-width:unset;
}
 nav button.open{
 visibility:visible;
 width:30px;
 color:white;
}

 nav{
 visibility:hidden;
 width:max-content;
}

 nav.active button.open{
 visibility:hidden;
 top:50px;
}

 nav.active button.close{
 visibility:visible;
 width:30px;
 right:30px;
}
 nav.active{
 visibility:visible;
 right:0;
 top:30px;
}
 nav.active a{
 width:100%;
 float:right;
}
 nav.active{
 flex-direction:column;
 gap:15px !important;
 background:var(--white);
 border-radius:5px;
 position:absolute;
 z-index:99;
 right:0;
 padding:2rem;
}
 .call-us{
 visibility:hidden;
}
 nav{
 margin-top:0 !important;
}
}

@media (max-width:600px){
 .container{
 grid-template-columns:1fr;
}
 .col-1,.col-4,.yellow-start{
 visibility:hidden;
}
 .southern-solar-intro{
 grid-template-columns:1fr;
 gap:1rem;
}

 header{
 justify-content:normal;
}

 header .ethos{
 width:170px;
 margin:2rem;
}

 header .ethos,.ethos strong{
 font-size:medium;
}

 nav{
 width:100px;
}

 header nav.active{
 width:60%;
}
 header nav.active ul{
 flex-direction:column;
}
}
.southern-solar-about-story{
 background:var(--lightgrey);
 position:relative;
 display:flex;
 gap:1rem;
 padding:var(--section-padding);
 .ethos{
 color:var(--orange);
 letter-spacing:0;
}
 .illustration{

}
 h4{
 font-size:1.6rem;
}
}

.southern-solar-about-battery{
 background:var(--darkgrey);
 gap:1rem;
 position:relative;
 display:flex;
 ul li,h4,p{
 color:var(--white);
}
}

@media (max-width:1200px){
 .southern-solar-about-story,
 .southern-solar-about-battery{
 flex-direction:column;
 margin:0;
}
}
.site-footer{
 padding:var(--section-padding);
}

.site-footer,
.el--101,
.el--102{
 background:var(--blue);
}

.site-footer .southern-solar-intro,
.site-footer .southern-solar-intro .main-hub,
.site-footer .southern-solar-intro .solar-service,
.site-footer .southern-solar-intro div a{
 color:var(--white);
}

.site-footer p,
.site-footer h4,
.site-footer .fa{
 color:var(--white);
}

.site-footer .southern-solar-intro{
 background:var(--blue);
 color:white;
 width:70%;
 margin:0 auto;
}

.site-footer .southern-solar-intro .solar-organisation{
 margin-top:15px;
}

.site-footer .southern-solar-intro p{
 margin-bottom:0;
}

.site-footer .solar-organisation p{
 font-size:var(--h4-size);
}

.site-footer .southern-solar-intro h4{
 color:var(--white);
 margin-bottom:5px;
}

.certification-declaration{
 background:var(--darkorange);
 background:linear-gradient(90deg,var(--orange) 0%,var(--orange) 50%,var(--yellow) 72%,rgba(255,255,255,1) 95%);
}

.certification-declaration p{
 padding:0;
}

.certification-declaration .content{
 position:relative;
 width:70%;
 margin:0 auto;
}

.certification-declaration h3{
 font-size:var(--h3-size);
}

.certification-declaration h3,
.certification-declaration p{
 color:white;
}

.site-footer,.el--101,.el--102{
 background:var(--blue);
}

.site-footer p,.site-footer h4,.site-footer .fa{
 color:var(--white);
}

.info-block{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:2rem;
 border:2px solid #e2e8f0;/* light grey */
 border-radius:12px;
 background:#f9fafb;/* subtle contrast */
}

.info-content{
 flex:1 1 55%;
}

.info-content h4{
 font-size:var(--h4-size);
}

.info-illustration{
 flex:1 1 45%;
 text-align:center;
}

.info-illustration img,
.info-illustration svg{
 max-width:100%;
 height:auto;
}

@media (max-width:768px){
 .info-block{
 flex-direction:column;
}
}

.contact-form{
 padding:var(--section-padding);
 max-width:1200px;
 margin:0 auto;
}

.booking-system{
 padding:var(--section-padding);
 max-width:1200px;
 margin:0 auto;
}

#security-gate{
 position:fixed;
 inset:0;
 z-index:9999;

 display:flex;
 align-items:center;
 justify-content:center;
}

#security-gate.hidden{
 display:none;
}

.security-veil{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,0.55);
}

#booking-turnstile{
 position:relative;
 z-index:1;
}

.southern-solar-about-story{
 animation-name:main-appear;
 animation-duration:1s;
 animation-timing-function:linear;
}

@keyframes main-appear{
 0%{visibility:hidden;transform:translateX(50px)}
 100%{transform:translateX(0px)}
}

.content h4,.values .working-method{
 /* animation properties */
 animation-name:vision-method;
 animation-duration:1s;
 animation-timing-function:linear;
}

@keyframes vision-method{
 0%{transform:scale(0.90)}
 100%{transform:scale(1)}
}
consent-widget{
 all:initial;
 font-family:var(--text-font-family);
}

.consent-decided consent-widget{
 display:none !important;
}

consent-widget .backdrop{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.55);
 z-index:9998;
}

consent-widget .panel{
 position:fixed;
 left:50%;
 bottom:24px;
 transform:translateX(-50%);
 width:min(720px,calc(100% - 32px));
 background:#fff;
 border-radius:var(--cta-radius,8px);
 padding:24px;
 box-shadow:0 20px 40px rgba(0,0,0,.25);
 z-index:9999;
}

consent-widget h5{
 margin:0 0 8px;
 font-family:var(--title-font-family);
 font-size:var(--p-size,8px);
}

consent-widget p{
 margin:0 0 12px;
 color:var(--text-color,#666);
 line-height:1.5;
 font-size:var(--small-size);
}

consent-widget .actions{
 display:flex;
 gap:12px;
 margin-top:16px;
}

consent-widget button{
 flex:1;
 padding:14px;
 border-radius:6px;
 font-size:16px;
 cursor:pointer;
 border:none;
}

consent-widget .deny-consent{
 background:#eee;
 color:#333;
}

consent-widget .accept-consent{
 background:var(--cta-secondary,#ff5c35);
 color:white;
}

@media (max-width:648px){
 consent-widget .actions{
 flex-direction:column;
}
}