.elementor-kit-1{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-color-theme_color_bg_color:#FFFFFF;--e-global-color-theme_color_bg_color_2:#F5F6EE;--e-global-color-theme_color_bd_color:#DEDFCF;--e-global-color-theme_color_title:#081118;--e-global-color-theme_color_text:#767C7D;--e-global-color-theme_color_meta:#9FA8AB;--e-global-color-theme_color_link:#367134;--e-global-color-theme_color_hover:#265A24;--e-global-color-theme_color_alt_bg_color:#131D25;--e-global-color-theme_color_alt_bg_color_2:#1A252F;--e-global-color-theme_color_alt_bd_color:#27333E;--e-global-color-theme_color_alt_title:#FFFFFF;--e-global-color-theme_color_alt_text:#BAC8CC;--e-global-color-theme_color_alt_meta:#748D90;--e-global-color-theme_color_alt_link:#367134;--e-global-color-theme_color_alt_hover:#265A24;--e-global-typography-theme_font_p-font-family:"Inter";--e-global-typography-theme_font_p-font-size:16px;--e-global-typography-theme_font_p-font-weight:400;--e-global-typography-theme_font_p-text-transform:none;--e-global-typography-theme_font_p-font-style:normal;--e-global-typography-theme_font_p-line-height:1.625em;--e-global-typography-theme_font_p-letter-spacing:0px;--e-global-typography-theme_font_post-font-family:"inherit";--e-global-typography-theme_font_post-font-weight:inherit;--e-global-typography-theme_font_post-text-transform:inherit;--e-global-typography-theme_font_post-font-style:inherit;--e-global-typography-theme_font_post-text-decoration:inherit;--e-global-typography-theme_font_h1-font-family:"Inter Tight";--e-global-typography-theme_font_h1-font-size:57px;--e-global-typography-theme_font_h1-font-weight:500;--e-global-typography-theme_font_h1-text-transform:none;--e-global-typography-theme_font_h1-font-style:normal;--e-global-typography-theme_font_h1-text-decoration:none;--e-global-typography-theme_font_h1-line-height:1.105em;--e-global-typography-theme_font_h1-letter-spacing:0px;--e-global-typography-theme_font_h2-font-family:"Inter Tight";--e-global-typography-theme_font_h2-font-size:47px;--e-global-typography-theme_font_h2-font-weight:500;--e-global-typography-theme_font_h2-text-transform:none;--e-global-typography-theme_font_h2-font-style:normal;--e-global-typography-theme_font_h2-text-decoration:none;--e-global-typography-theme_font_h2-line-height:1.13em;--e-global-typography-theme_font_h2-letter-spacing:0px;--e-global-typography-theme_font_h3-font-family:"Inter Tight";--e-global-typography-theme_font_h3-font-size:35px;--e-global-typography-theme_font_h3-font-weight:500;--e-global-typography-theme_font_h3-text-transform:none;--e-global-typography-theme_font_h3-font-style:normal;--e-global-typography-theme_font_h3-text-decoration:none;--e-global-typography-theme_font_h3-line-height:1.115em;--e-global-typography-theme_font_h3-letter-spacing:0px;--e-global-typography-theme_font_h4-font-family:"Inter Tight";--e-global-typography-theme_font_h4-font-size:28px;--e-global-typography-theme_font_h4-font-weight:500;--e-global-typography-theme_font_h4-text-transform:none;--e-global-typography-theme_font_h4-font-style:normal;--e-global-typography-theme_font_h4-text-decoration:none;--e-global-typography-theme_font_h4-line-height:1.215em;--e-global-typography-theme_font_h4-letter-spacing:0px;--e-global-typography-theme_font_h5-font-family:"Inter Tight";--e-global-typography-theme_font_h5-font-size:23px;--e-global-typography-theme_font_h5-font-weight:500;--e-global-typography-theme_font_h5-text-transform:none;--e-global-typography-theme_font_h5-font-style:normal;--e-global-typography-theme_font_h5-text-decoration:none;--e-global-typography-theme_font_h5-line-height:1.215em;--e-global-typography-theme_font_h5-letter-spacing:0px;--e-global-typography-theme_font_h6-font-family:"Inter Tight";--e-global-typography-theme_font_h6-font-size:19px;--e-global-typography-theme_font_h6-font-weight:500;--e-global-typography-theme_font_h6-text-transform:none;--e-global-typography-theme_font_h6-font-style:normal;--e-global-typography-theme_font_h6-text-decoration:none;--e-global-typography-theme_font_h6-line-height:1.265em;--e-global-typography-theme_font_h6-letter-spacing:0px;--e-global-typography-theme_font_logo-font-family:"Inter Tight";--e-global-typography-theme_font_logo-font-size:35px;--e-global-typography-theme_font_logo-font-weight:500;--e-global-typography-theme_font_logo-text-transform:none;--e-global-typography-theme_font_logo-font-style:normal;--e-global-typography-theme_font_logo-text-decoration:none;--e-global-typography-theme_font_logo-line-height:1.115em;--e-global-typography-theme_font_logo-letter-spacing:0px;--e-global-typography-theme_font_button-font-family:"Inter Tight";--e-global-typography-theme_font_button-font-size:16px;--e-global-typography-theme_font_button-font-weight:500;--e-global-typography-theme_font_button-text-transform:none;--e-global-typography-theme_font_button-font-style:normal;--e-global-typography-theme_font_button-text-decoration:none;--e-global-typography-theme_font_button-line-height:20px;--e-global-typography-theme_font_button-letter-spacing:0px;--e-global-typography-theme_font_input-font-family:"inherit";--e-global-typography-theme_font_input-font-size:15px;--e-global-typography-theme_font_input-font-weight:400;--e-global-typography-theme_font_input-text-transform:none;--e-global-typography-theme_font_input-font-style:normal;--e-global-typography-theme_font_input-text-decoration:none;--e-global-typography-theme_font_input-line-height:1.6em;--e-global-typography-theme_font_input-letter-spacing:0px;--e-global-typography-theme_font_info-font-family:"inherit";--e-global-typography-theme_font_info-font-size:14px;--e-global-typography-theme_font_info-font-weight:400;--e-global-typography-theme_font_info-text-transform:none;--e-global-typography-theme_font_info-font-style:normal;--e-global-typography-theme_font_info-text-decoration:none;--e-global-typography-theme_font_info-line-height:1.5em;--e-global-typography-theme_font_info-letter-spacing:0px;--e-global-typography-theme_font_menu-font-family:"Inter Tight";--e-global-typography-theme_font_menu-font-size:16px;--e-global-typography-theme_font_menu-font-weight:500;--e-global-typography-theme_font_menu-text-transform:none;--e-global-typography-theme_font_menu-font-style:normal;--e-global-typography-theme_font_menu-text-decoration:none;--e-global-typography-theme_font_menu-line-height:1.5em;--e-global-typography-theme_font_menu-letter-spacing:0px;--e-global-typography-theme_font_submenu-font-family:"Inter";--e-global-typography-theme_font_submenu-font-size:15px;--e-global-typography-theme_font_submenu-font-weight:500;--e-global-typography-theme_font_submenu-text-transform:none;--e-global-typography-theme_font_submenu-font-style:normal;--e-global-typography-theme_font_submenu-text-decoration:none;--e-global-typography-theme_font_submenu-line-height:1.4em;--e-global-typography-theme_font_submenu-letter-spacing:0px;}.elementor-kit-1 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1242px;}.e-con{--container-max-width:1242px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.sc_layouts_title_caption{display:var(--page-title-display);}@media(max-width:900px){.elementor-kit-1{--e-global-typography-theme_font_h1-font-size:45px;--e-global-typography-theme_font_h2-font-size:36px;--e-global-typography-theme_font_h3-font-size:28px;--e-global-typography-theme_font_h4-font-size:22px;--e-global-typography-theme_font_h5-font-size:20px;--e-global-typography-theme_font_h6-font-size:18px;--e-global-typography-theme_font_logo-font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:680px){.elementor-kit-1{--e-global-typography-theme_font_p-font-size:15px;--e-global-typography-theme_font_h1-font-size:36px;--e-global-typography-theme_font_h2-font-size:31px;--e-global-typography-theme_font_h3-font-size:26px;--e-global-typography-theme_font_h5-font-size:19px;--e-global-typography-theme_font_h6-font-size:17px;--e-global-typography-theme_font_logo-font-size:26px;--e-global-typography-theme_font_button-font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --tc-bg_color:#FFFFFF; --tc-bg_color_2:#F5F6EE; --tc-bd_color:#DEDFCF; --tc-title:#081118; --tc-text:#767C7D; --tc-meta:#9FA8AB; --tc-link:#367134; --tc-hover:#265A24; --tc-alt_bg_color:#131D25; --tc-alt_bg_color_2:#1A252F; --tc-alt_bd_color:#27333E; --tc-alt_title:#FFFFFF; --tc-alt_text:#BAC8CC; --tc-alt_meta:#748D90; --tc-alt_link:#367134; --tc-alt_hover:#265A24; --tf-p_font-family:Inter,sans-serif; --tf-post_font-family:inherit; --tf-h1_font-family:"Inter Tight",sans-serif; --tf-h2_font-family:"Inter Tight",sans-serif; --tf-h3_font-family:"Inter Tight",sans-serif; --tf-h4_font-family:"Inter Tight",sans-serif; --tf-h5_font-family:"Inter Tight",sans-serif; --tf-h6_font-family:"Inter Tight",sans-serif; --tf-logo_font-family:"Inter Tight",sans-serif; --tf-button_font-family:"Inter Tight",sans-serif; --tf-input_font-family:inherit; --tf-info_font-family:inherit; --tf-menu_font-family:"Inter Tight",sans-serif; --tf-submenu_font-family:Inter,sans-serif; --e-gv-32ed22a:#1F242E; --e-gv-54d1c6d:#E5E7DE; --e-gv-688bcc6:#F6F7F1; --e-gv-7b7ede7:#FFFEFE; --e-gv-53c9216:#06021D; }
/* Start custom CSS *//* =======================================================================
   SunKraft Solar - the ONLY custom CSS in this build.
   Every rule exists because the widget concerned exposes no Elementor
   control for it. Edit here: Elementor > Site Settings > Custom CSS.
   Stored in the Elementor Kit, so it travels with the export.
   ======================================================================= */

/* 1. Brand logo height. trx_elm_marquee has no image-size control and the
      theme clamps marquee images to an em-based max-height (~14px). */
.trx-addons-marquee-item-image img{
  max-height:66px !important; height:66px; width:auto;
  filter:brightness(.22) contrast(1.3);
  transition:filter .3s ease, transform .3s ease;
}
.trx-addons-marquee-item-image img:hover{
  filter:brightness(0) contrast(1.3); transform:scale(1.08);
}
.trx-addons-marquee-item-image, .sk-brand-marquee .trx-addons-marquee-item{ padding:0 30px; margin:0 14px; flex:0 0 auto; }
.sk-brand-marquee .trx-addons-marquee-item-image{ display:flex; align-items:center; }

/* 2. The marquee track must stay on ONE line. Without this the 66px logos
      wrap into many rows and the yellow band grows to ~889px. */
.sk-brand-marquee .trx-addons-marquee,
.sk-brand-marquee .trx-addons-marquee-wrap{
  display:flex !important; flex-wrap:nowrap !important; white-space:nowrap;
  align-items:center;
}
/* 2b. trx_elm_marquee gives each duplicated track a fixed 100% width, but the
      twelve 66px logos plus rule 1's padding total ~1841px and the items are
      flex:0 0 auto, so they cannot shrink - they overran the track and overlapped
      the logos of the next copy (Schneider over EMMVEE, Mersen over adani). Every
      track must size to its own content. Rule 26 does this for the footer; it is
      needed for every marquee on the site. */
.trx-addons-marquee{
  width:max-content !important; min-width:max-content !important;
  max-width:none !important; flex:0 0 max-content !important;
}
.elementor-widget-trx_elm_marquee{ overflow:hidden; }

/* 3. The stacking journey cards. Elementor Pro Sticky uses position:fixed,
      which overlapped the next section; trx_addons strips custom CSS classes
      from containers, so these target the containers' CSS IDs. */
#sk-stage-112,#sk-stage-132,#sk-stage-152,
#sk-stage-172,#sk-stage-192,#sk-stage-212{ position:sticky; }
#sk-stage-112{top:112px} #sk-stage-132{top:132px} #sk-stage-152{top:152px}
#sk-stage-172{top:172px} #sk-stage-192{top:192px} #sk-stage-212{top:212px}
@media (max-width:1024px){ #sk-stage-112,#sk-stage-132,#sk-stage-152,
  #sk-stage-172,#sk-stage-192,#sk-stage-212{position:static !important} }

/* 4. Sticky header, via the theme's own scrolled-body class. */
body.trx_addons_page_scrolled .top_panel_custom{
  position:sticky; top:0; left:0; right:0; z-index:1000;
  /* sticky, not fixed: fixed removed the header from the document flow the
     instant trx_addons_page_scrolled was added, so every element below it
     jumped up by the header height (112px desktop / 104 tablet / 76 mobile)
     on the first pixel of scroll, and back down on return to the top.
     sticky pins it in exactly the same place but keeps it in flow. */
}

/* 5. The giant SERVICES word. trx_elm_advanced_title has no typography
      control, so size/weight live here. The gradient must be painted on the
      SAME node that clips to the text, or you see a filled rectangle. */
#sk-services-word > .elementor-widget-container{ background:none !important; }
#sk-services-word .trx-addons-advanced-title-item-text{
  font-family:"Inter Tight",sans-serif; font-size:112px; font-weight:600;
  line-height:.95; letter-spacing:-.035em; text-transform:uppercase;
  background-image:linear-gradient(90deg,#2C98E6 0%,#2389E5 26%,#1651B8 48%,
                   #15387C 64%,#122039 78%,#06090E 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:skGrad 5s ease-in-out infinite;
}
@keyframes skGrad{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}
#sk-services-word{ text-align:center; }
@media (max-width:1024px){#sk-services-word .trx-addons-advanced-title-item-text{font-size:64px}}
@media (max-width:680px){ #sk-services-word .trx-addons-advanced-title-item-text{font-size:44px}}

/* 6. Services panel labels align left, as in the approved design. */
.elementor-widget-trx_elm_image_accordion .trx-addons-image-accordion-item-title,
.elementor-widget-trx_elm_image_accordion .trx-addons-image-accordion-item-description{
  text-align:left;
}

/* 7. Centre the SERVICES word. Its widget wrapper shrinks to content, so
      text-align alone centred it inside 482px instead of the column. */
#sk-services-word{ width:100% !important; }
#sk-services-word .trx-addons-advanced-title{ text-align:center; }
#sk-services-word .trx-addons-advanced-title-item-text{ display:inline-block; }

/* 8. Services panel captions align left. The centring comes from the content
      wrapper, not the title, so both parents need it. */
.elementor-widget-trx_elm_image_accordion .trx-addons-image-accordion-content,
.elementor-widget-trx_elm_image_accordion .trx-addons-image-accordion-content-wrap,
.elementor-widget-trx_elm_image_accordion .trx-addons-image-accordion-below-content{
  text-align:left !important;
}

/* 9. Review stars: amber and legible, matching the approved design. */
.elementor-widget-star-rating .elementor-star-rating i{
  color:#FFAC40 !important; font-size:15px; letter-spacing:2px;
}
.elementor-widget-star-rating .elementor-star-rating{ letter-spacing:2px; }
/* 10. Review carousel arrows sit centred under the cards, beside the dots,
      exactly as in the approved design. Elementor's nested Carousel places
      them at the left/right edges by default. */
#sk-reviews-carousel .elementor-swiper-button{
  position:static !important; transform:none !important;
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFFFFF; border:1px solid #DEDFCF; color:#081118;
  font-size:15px; cursor:pointer;
}
#sk-reviews-carousel .swiper-pagination{
  position:static !important; margin-top:26px;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
#sk-reviews-carousel .elementor-swiper-button-prev{ order:1; }
#sk-reviews-carousel .swiper-pagination-bullets{ order:2; }
#sk-reviews-carousel > .elementor-widget-container{
  display:flex; flex-direction:column;
}
#sk-reviews-carousel .swiper{ order:1; }
#sk-reviews-carousel .sk-reviews-nav{ order:2; }
#sk-reviews-carousel .elementor-swiper-button-next{ order:3; }
#sk-reviews-carousel .swiper-pagination-bullet{
  width:7px; height:7px; background:#C9CDBE; opacity:1; margin:0 3px;
}
#sk-reviews-carousel .swiper-pagination-bullet-active{
  width:22px; border-radius:4px; background:#27852E;
}

/* 11. Anchor clearance. The header is sticky, so a nav click must not park a
      section heading underneath it. */
#top,#brands,#premium,#why,#whysunkraft,#services,#layers,#calculator,
#journey,#reviews,#nri,#survey,#overview,#suitability,#generation,
#components,#process,#faq{
  scroll-margin-top:96px;
}

/* 12. Bilingual hero. The approved design cross-fades the English and Malayalam
      copy. Both blocks are real Elementor containers; they are overlaid in one
      grid cell so they occupy the same space, and the fade is pure CSS - no
      JavaScript, no plugin, nothing outside Elementor. Editing either language
      in the editor works normally because the editor shows both stacked. */
#sk-lang-stack{ display:grid !important; }
#sk-lang-stack > .e-con{ grid-area:1 / 1; }
#sk-lang-en,#sk-lang-ml{ animation-duration:23.84s; animation-iteration-count:infinite;
  animation-timing-function:ease-in-out; }
#sk-lang-en{ animation-name:skLangEN; }
#sk-lang-ml{ animation-name:skLangML; }
/* The two blocks must never be visible at the same time. Cross-fading them
   superimposed Latin over Malayalam at half opacity for the whole 0.96s window,
   which read as a double-exposed jolt rather than a fade. Sequenced instead:
   English is fully gone (45.973%) before Malayalam starts to appear, and Malayalam
   is fully gone (95.973%) before English returns. Each fade is 0.96s, eased.
   Cycle is 23.84s: each language stays fully readable for 10s, then 0.96s out,
   0.96s in. To change the hold, pick a new cycle T = 2*hold + 3.84 and rescale
   every percentage below by 23.84/T. */
@keyframes skLangEN{
  0%,41.946%{opacity:1} 45.973%,95.973%{opacity:0} 100%{opacity:1} }
@keyframes skLangML{
  0%,45.973%{opacity:0} 50%,91.946%{opacity:1} 95.973%,100%{opacity:0} }
#sk-dot-en,#sk-dot-ml{ animation-duration:23.84s; animation-iteration-count:infinite;
  animation-timing-function:ease-in-out; }
#sk-dot-en{ animation-name:skDotEN; }
#sk-dot-ml{ animation-name:skDotML; }
@keyframes skDotEN{
  0%,43.96%{width:24px;background:#FFFFFF} 47.99%,93.96%{width:8px;background:#FFFFFF59}
  97.99%,100%{width:24px;background:#FFFFFF} }
@keyframes skDotML{
  0%,43.96%{width:8px;background:#FFFFFF59} 47.99%,93.96%{width:24px;background:#FFFFFF}
  97.99%,100%{width:8px;background:#FFFFFF59} }
/* In the Elementor editor, show the two languages one under the other so both
   can be selected and edited; the overlay is a front-end presentation only. */
body.elementor-editor-active #sk-lang-stack{ display:flex !important; gap:28px; }
body.elementor-editor-active #sk-lang-stack > .e-con{ grid-area:auto; }
body.elementor-editor-active #sk-lang-en,
body.elementor-editor-active #sk-lang-ml,
body.elementor-editor-active #sk-dot-en,
body.elementor-editor-active #sk-dot-ml{ animation:none !important; opacity:1 !important; }
@media (prefers-reduced-motion: reduce){
  #sk-lang-en,#sk-lang-ml,#sk-dot-en,#sk-dot-ml{ animation:none !important; }
  #sk-lang-ml{ opacity:0; }
}

/* 13. "Why SunKraft Solar?" accordion. trx_elm_accordion exposes no typography,
      per-row border or padding controls at all, and the theme skin gives each row
      a bordered box, a green title and #333 answer text - which is unreadable on
      the navy panel. The approved design is borderless rows divided by hairlines,
      white titles and light-grey answers. Content stays ordinary Elementor widget
      content; only the appearance is set here. */
#whysunkraft .trx-addons-accordion-item{
  background:none !important; border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.22) !important;
  border-radius:0 !important; margin:0 !important; box-shadow:none !important;
}
#whysunkraft .trx-addons-accordion-item:first-child{
  border-top:1px solid rgba(255,255,255,.22) !important;
}
#whysunkraft .trx-addons-accordion-tab-title{
  padding:26px 0 !important; background:none !important; border:0 !important;
}
#whysunkraft .trx-addons-accordion-title-text{
  color:#FFFFFF !important; font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:21px !important; font-weight:400 !important; line-height:1.3 !important;
}
#whysunkraft .trx-addons-accordion-toggle-icon,
#whysunkraft .trx-addons-accordion-toggle-icon *{
  color:#FFFFFFCC !important; font-size:15px !important;
}
#whysunkraft .trx-addons-accordion-tab-content{
  padding:0 56px 26px 0 !important; background:none !important;
}
#whysunkraft .trx-addons-accordion-tab-content,
#whysunkraft .trx-addons-accordion-tab-content p{
  color:rgba(255,255,255,.74) !important; font-family:Inter,sans-serif !important;
  font-size:15px !important; line-height:1.62 !important; margin:0 !important;
}

/* 14. Services panels. trx_elm_image_accordion has no gap control at all, and the
      approved design separates the three panels with a small gutter. */
#services .trx-addons-image-accordion{
  gap:14px !important;
}
/* The approved design opens the active panel to 764px and holds the two closed
   panels at 225px; the widget has no width control of its own. */
/* The widget drives this accordion by moving an inline flex:3 1 0% onto whichever
   panel is hovered, and while the pointer sits in one of the 14px gutters it marks
   NO panel active. Fixed flex-basis with flex-grow:0 cannot fill the row in that
   state, so all three panels dropped to their closed width, the strip collapsed
   and snapped back - the fluctuation on hover, the dead space on the right and the
   clipped third panel. A grow ratio always fills the row. 3.4 : 1 : 1 over the
   1214px of track (1242 less two gutters) gives 764px open and 225px closed - the
   approved figures exactly - and is width-independent, so it holds at every
   breakpoint without a separate tablet rule. */
#services .trx-addons-image-accordion-item{
  flex:1 1 0% !important; max-width:none !important;
}
#services .trx-addons-image-accordion-item.trx-addons-image-accordion-active{
  flex:3.4 1 0% !important; max-width:none !important;
}

/* 15. Content column width. Elementor sizes a boxed container's inner block from
      --content-width, which the theme pins to its own 1290px page width, and
      Elementor absorbs a boxed container's own side padding outside that block.
      The approved design's content column is 1242px (1290 less its 24px gutters),
      so every section was rendering 48px wider and starting 24px further left. */
:root, body, .elementor{ --content-width:1242px; }
.e-con > .e-con-inner{ max-width:1242px; }

/* 16. "3 kW, answered." FAQ accordion. Same trx_elm_accordion limitation as rule
      13, but on a light section, so the approved colours are dark titles and grey
      answers over hairline rules. Measured off the approved design: 20px/500
      titles, 24px rows, #DEDFCF rules, 15.2px answers in #5C6466. */
#faq .trx-addons-accordion-item{
  background:none !important; border:0 !important;
  border-bottom:1px solid #DEDFCF !important;
  border-radius:0 !important; margin:0 !important; box-shadow:none !important;
}
#faq .trx-addons-accordion-item:first-child{ border-top:1px solid #DEDFCF !important; }
#faq .trx-addons-accordion-tab-title{
  padding:24px 0 !important; background:none !important; border:0 !important;
}
#faq .trx-addons-accordion-title-text{
  color:#081118 !important; font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:20px !important; font-weight:500 !important; line-height:1.3 !important;
}
#faq .trx-addons-accordion-toggle-icon,
#faq .trx-addons-accordion-toggle-icon *{
  color:#767C7D !important; font-size:15px !important;
}
#faq .trx-addons-accordion-tab-content{ padding:0 48px 24px 0 !important; background:none !important; }
#faq .trx-addons-accordion-tab-content,
#faq .trx-addons-accordion-tab-content p{
  color:#5C6466 !important; font-family:Inter,sans-serif !important;
  font-size:15.2px !important; line-height:1.62 !important; margin:0 !important;
}

/* 17. The header menu stays on one row. Seven items wrapping onto a second row
      made the header 126px tall instead of the approved 112px. */
.top_panel_custom .elementor-nav-menu{ flex-wrap:nowrap !important; }
.top_panel_custom .elementor-nav-menu > li > a{ white-space:nowrap; }

/* 18. Hero counter unit. Elementor's Counter renders prefix and suffix at the
      same size as the figure; the approved design sets the unit at 18px/500 in
      rgba(255,255,255,.78) beside a 35px figure. */
#top .elementor-widget-counter .elementor-counter-number-suffix{
  font-size:18px !important; font-weight:500 !important;
  line-height:1 !important; color:rgba(255,255,255,.78) !important;
  align-self:flex-end; padding-bottom:3px;
}
#top .elementor-widget-counter .elementor-counter-number-prefix{
  font-size:35px !important; font-weight:600 !important;
}

/* 19. Tablet (the approved design's 900px rules). Stacked photographs are capped
      at the heights the approved design uses instead of growing to the full
      column width's natural aspect, and the services panels keep their
      side-by-side proportions (477px active) rather than stacking. */
@media (max-width:900px){
  #whysunkraft .elementor-widget-image img{ height:300px; object-fit:cover; width:100%; }
  #layers .elementor-widget-image img{ height:340px; object-fit:cover; width:100%; }
  #nri .elementor-widget-image img{ height:320px; object-fit:cover; width:100%; }
}
@media (max-width:680px){
  /* the approved design keeps these caps on the narrow layout too */
  #whysunkraft .elementor-widget-image img{ height:300px; object-fit:cover; width:100%; }
  #nri .elementor-widget-image img{ height:320px; object-fit:cover; width:100%; }
  #layers .elementor-widget-image img{ height:340px; object-fit:cover; width:100%; }
  #journey .elementor-widget-image img,
  #process .elementor-widget-image img{ height:190px; object-fit:cover; width:100%; }
  #services .trx-addons-image-accordion-item,
  #services .trx-addons-image-accordion-item.trx-addons-image-accordion-active{
    flex:1 1 auto !important; max-width:100% !important;
  }
  /* stacked panels are 250px tall in the approved narrow layout, not 400 */
  #services .trx-addons-image-accordion-item-inner,
  #services .trx-addons-image-accordion-item-in{ height:282px !important; }
}

/* 20. Homepage hero height. The approved hero tracks the viewport: 789px in a
      950px-tall window, 839px in a 1000px one - i.e. the window height less
      161px. A fixed min-height could only ever match one window size. */
#top{ min-height:calc(100vh - 161px) !important; }
@media (max-width:680px){ #top{ min-height:0 !important; } }

/* 21. The 3 kW specification table keeps its label/value columns on the narrow
      layout, as the approved design does (50px rows, not 81px stacked ones). */
@media (max-width:680px){
  #overview .e-con-full > .e-con-full{ flex-direction:row !important; flex-wrap:nowrap !important; }
}

/* 22. Narrow layout: the accordion answers lose their right inset so they wrap
      to the same number of lines as the approved design. */
@media (max-width:680px){
  #faq .trx-addons-accordion-tab-content{ padding:0 20px 24px 0 !important; }
  #whysunkraft .trx-addons-accordion-tab-content{ padding:0 20px 26px 0 !important; }
}

/* 23. Narrow layout: the FAQ answers keep the inset that gives the approved
      line count. (An earlier attempt to re-pad the specification rows here used
      too broad a .elementor-kit-1 and hit the section's own columns, so it was removed.) */
@media (max-width:680px){
  #faq .trx-addons-accordion-tab-content{ padding-right:70px !important; }
}

/* 24. Footer marquee. trx_elm_marquee has no typography control, so the 62px the
      approved design uses was falling back to the theme's 16px. */
#sk-footer-marquee .trx-addons-marquee-item,
#sk-footer-marquee .trx-addons-marquee-item *{
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:62px !important; font-weight:500 !important;
  line-height:1.1 !important; color:#F2E96B !important;
}
#sk-footer-marquee .trx-addons-marquee-wrap{ flex-wrap:nowrap !important; overflow:hidden; }
@media (max-width:680px){
  #sk-footer-marquee .trx-addons-marquee-item,
  #sk-footer-marquee .trx-addons-marquee-item *{ font-size:34px !important; }
}

/* 25. Footer marquee separators. The approved design sets 26px of trailing space
      on each word plus a "·" between them; trx_elm_marquee's own separator option
      renders nothing here, so the words ran together ("RoofingOptimize"). */
#sk-footer-marquee .trx-addons-marquee-item{
  padding-right:26px !important; position:relative;
}
#sk-footer-marquee .trx-addons-marquee-item::after{
  content:"·"; font-size:62px; font-weight:500; color:#F2E96B;
  margin-left:13px; line-height:1.1;
}
@media (max-width:680px){
  #sk-footer-marquee .trx-addons-marquee-item{ padding-right:14px !important; }
  #sk-footer-marquee .trx-addons-marquee-item::after{ font-size:34px; margin-left:7px; }
}

/* 26. Marquee tracks size to their own content. trx_elm_marquee gives each
      duplicated track a fixed 100% width, so once rule 25 added trailing space
      the words overran into the next copy and overlapped. */
#sk-footer-marquee .trx-addons-marquee{
  width:max-content !important; min-width:max-content !important;
  flex:0 0 max-content !important; display:flex !important;
}
#sk-footer-marquee .trx-addons-marquee-wrap{ align-items:center; }

/* 27. The theme adds 144px of top padding to .page_content_wrap. Every page in
      this build supplies its own hero top padding to clear the 112px sticky
      header, so the theme's padding doubles it and leaves a white band between
      the header and the hero. Zeroed here; the Privacy Policy page is not an
      Elementor page and keeps a little breathing room. */
.page_content_wrap{ padding-top:0 !important; padding-bottom:0 !important; }
body.page-id-20 .page_content_wrap{ padding-top:64px !important; }
body.blog .page_content_wrap,
body.single-post .page_content_wrap,
body.archive .page_content_wrap{ padding-top:64px !important; }

/* 28. The multi-page header nav is 885px wide, which overflows the viewport
      below about 1200px. Elementor's own burger only appears at its tablet
      breakpoint (900px), leaving 901-1199px broken. Collapse to the burger
      across that band instead of changing the global breakpoints, which would
      alter the approved layouts. */
@media (max-width:1199px){
  .top_panel_custom .elementor-nav-menu--main .elementor-nav-menu{ display:none !important; }
  .top_panel_custom .elementor-menu-toggle{
    display:flex !important; align-items:center; justify-content:center;
    color:#FFFFFF !important; background:transparent; border:0; cursor:pointer;
  }
  .top_panel_custom .elementor-menu-toggle i,
  .top_panel_custom .elementor-menu-toggle svg{ color:#FFFFFF !important; fill:#FFFFFF !important; }
  /* the nav column is hidden at tablet by the layout, so keep it visible here
     purely so the toggle can render */
  .top_panel_custom .elementor-widget-nav-menu{ display:block !important; }
}

/* 29. Section headings that were emitted into a full-width wrapper. A correct
      section is  FULL(section) > BOXED > .e-con-inner(1242px) > widgets, so its
      heading lines up with the body copy at the 1242px content column. On 45 of
      the 54 pages one section instead reads
        FULL(section) > FULL(wrapper) > heading widgets + BOXED > inner > cards
      - the extra full wrapper leaves the eyebrow and the H2 unconstrained, so
      they started hard against the viewport edge while the cards below them sat
      correctly at 179px. Only headings and body copy sitting directly inside such
      a wrapper are constrained here; full-bleed widgets in that position (the
      brand marquee, background bands) are deliberately left alone. */
.page_content_wrap .elementor > .e-con-full > .e-con-full > .elementor-widget-heading,
.page_content_wrap .elementor > .e-con-full > .e-con-full > .elementor-widget-text-editor,
.page_content_wrap .elementor > .e-con-full > .e-con-full > .elementor-widget-trx_elm_advanced_title{
  max-width:1242px !important;
  margin-left:auto !important; margin-right:auto !important;
  width:100% !important;
}

/* 30. See-through header. The dark bar is not on the <header> element - it is the
      background of the header layout's first Elementor container, so that is what
      has to become transparent. On the HOMEPAGE the bar starts fully transparent
      so the hero video reads edge to edge behind the menu, with only a soft
      top-down scrim to keep the white menu legible over a bright frame; the solid
      bar fades back in as soon as the page is scrolled (the theme adds
      body.trx_addons_page_scrolled). Every OTHER page keeps the solid bar, since
      those pages have no full-bleed hero behind the header - which is what makes
      the main page's menu read differently from the rest of the site. */
.top_panel_custom .elementor > .e-con{
  transition:background-color .35s ease;
}
body.home:not(.trx_addons_page_scrolled) .top_panel_custom .elementor > .e-con{
  background-color:transparent !important;
}
body.home:not(.trx_addons_page_scrolled) .top_panel_custom{
  background-image:linear-gradient(to bottom, rgba(8,17,24,.50), rgba(8,17,24,0)) !important;
  transition:background-image .35s ease;
}

/* 32. MOBILE MENU. The header's nav container carries an Elementor custom width
      that was sized for the seven-item desktop menu, and it has no tablet or
      mobile override. Below 1200px it therefore collapses - measured at 7px wide
      on a 768px tablet - which squeezed the burger to an 11px tap target and
      opened the menu as a 40px-wide sliver. Three fixes: let the header
      containers size to their content, give the burger a 44px square target, and
      let the dropdown panel span the full header width underneath it.
      left/right:0 rather than 100vw, so a visible scrollbar cannot widen the
      page. */
.top_panel_custom .elementor > .e-con{ position:relative !important; }
@media (max-width:1199px){
  .top_panel_custom .e-con-with-custom-width,
  .top_panel_custom .sc_layouts_item{
    width:auto !important; min-width:0 !important; flex:0 1 auto !important;
  }
  /* The dropdown is absolutely positioned, so it anchors to its nearest
     POSITIONED ancestor. Both of these wrappers are position:relative, and the
     nav one is only 44px wide - which is why left:0/right:0 produced a 44px
     panel. Make them static so the header row above becomes the anchor. */
  .top_panel_custom .sc_layouts_item,
  .top_panel_custom .e-con-with-custom-width{ position:static !important; }
  .top_panel_custom .elementor-widget-nav-menu{ width:auto !important; }
  .top_panel_custom .elementor-menu-toggle{
    width:44px !important; min-width:44px !important;
    height:44px !important; min-height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  .top_panel_custom .elementor-nav-menu--dropdown{
    position:absolute !important; top:100% !important;
    left:0 !important; right:0 !important; width:auto !important; max-width:none !important;
    background:#0B1620 !important; z-index:9000 !important;
    max-height:calc(100vh - 112px); overflow-y:auto;
  }
  .top_panel_custom .elementor-nav-menu--dropdown .elementor-nav-menu{ width:100% !important; }
  .top_panel_custom .elementor-nav-menu--dropdown li{ width:100% !important; }
  .top_panel_custom .elementor-nav-menu--dropdown a.elementor-item,
  .top_panel_custom .elementor-nav-menu--dropdown a.elementor-sub-item{
    width:100% !important; min-height:48px !important;
    display:flex !important; align-items:center !important;
    padding-left:24px !important; padding-right:24px !important;
  }
}

/* 33. iOS Safari zooms the whole page in when a focused input is smaller than
      16px. Every form field on the site measured 15px, and so did the two number
      inputs in the calculator, so focusing any of them zoomed the layout. This is
      presentational only - it changes no calculator behaviour. */
@media (max-width:1024px), (hover: none) and (pointer: coarse){
  input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
  textarea, select,
  .sk-calc input, .sk-calc select, .sk-calc textarea{
    font-size:16px !important;
  }
}

/* 34. The header's "Get in Touch" label was wrapping and being clipped by 4px at
      390px (scrollWidth 35 against clientWidth 31). Keep header buttons on one
      line and give them a slightly tighter pad on the narrowest phones. */
.top_panel_custom a.elementor-button{ white-space:nowrap !important; }
.top_panel_custom .elementor-button-text{ overflow:visible !important; }
@media (max-width:430px){
  .top_panel_custom a.elementor-button{ padding:11px 14px !important; }
}

/* 34b. At 320px the header row is 280px wide but held a 143px logo, a 44px
      burger, a 106px button and two 20px gaps - 333px in total - and rule 32 had
      pinned every child to flex:0 0 auto so nothing could give. Measured fix:
      tighten the gap, cap the logo, and trim the button. 104 + 44 + 88 + 24 =
      260px, inside the 280px available. */
@media (max-width:430px){
  .top_panel_custom .e-con-inner{ gap:12px !important; }
  .top_panel_custom .sc_layouts_logo img,
  .top_panel_custom .elementor-widget-image img{
    max-width:104px !important; height:auto !important;
  }
  .top_panel_custom a.elementor-button{
    padding:10px 12px !important; font-size:12px !important;
  }
  .top_panel_custom .e-con-inner > *:first-child{
    flex-shrink:1 !important; min-width:0 !important;
  }
}

/* 35. Tap targets. WCAG 2.2 asks for at least 24x24 CSS pixels on any pointer
      target. Breadcrumb links measured 16px tall and footer links 19px, so both
      get vertical padding rather than a larger font, which would change the
      approved type scale. */
.page_content_wrap nav.elementor-heading-title a{
  display:inline-block; padding-top:5px; padding-bottom:5px;
}
.footer_custom .elementor-icon-list-item a,
.footer_custom .elementor-widget-text-editor a,
.footer_custom .menu-item a{
  display:inline-flex; align-items:center; min-height:24px;
}

/* 36. Footer link text measured 11.05px, which is below the 12px floor for
      comfortable reading on a phone. Lifted to 12.6px - the smallest change that
      clears the floor without disturbing the footer's layout. */
.footer_custom .elementor-icon-list-item,
.footer_custom .elementor-icon-list-text{ font-size:12.6px !important; }

/* 37. The theme's scroll-to-top button is a fixed bottom-right element. Sized to
      a 44px target and inset from the safe area so it cannot sit under an
      iPhone's home indicator or a rounded corner in landscape. env() resolves to
      0px where there is no inset, so this is inert on every other device. */
.trx_addons_scroll_to_top{
  width:44px !important; height:44px !important;
  right:calc(16px + env(safe-area-inset-right, 0px)) !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
.top_panel_custom{
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}

/* 38. The theme prints two skip-links at the same fixed position, so they sat on
      top of each other when focused by a keyboard user. */
.clean_energy_skip_link.skip_to_footer_link{ margin-left:200px; }

/* 39. Rule 20 sizes the homepage hero from 100vh. On a phone that is already
      neutralised (min-height:0 below 680px), but between 681px and 1199px a
      mobile browser's 100vh includes the address bar, so the hero can run taller
      than the visible area. svh is the small-viewport unit, which excludes it.
      Wrapped in @supports so it only applies where the unit exists - on anything
      older the original 100vh rule stands, unchanged. The rendered height on a
      desktop is identical, so the approved homepage looks the same. */
@supports (height: 100svh){
  #top{ min-height:calc(100svh - 161px) !important; }
  @media (max-width:680px){ #top{ min-height:0 !important; } }
}

/* 40. Mobile menu sub-items. The dropdown's second level - the pages under
      Services, System Sizes, Subsidy & Cost and Areas - inherited an 11.05px
      font from the desktop menu, which is below the readable floor on a phone.
      Rule 32 already gives them a 48px row; this gives them legible text. */
@media (max-width:1199px){
  .top_panel_custom .elementor-nav-menu--dropdown a.elementor-sub-item{
    font-size:14px !important;
  }
  .top_panel_custom .elementor-nav-menu--dropdown a.elementor-item{
    font-size:15px !important;
  }
}

/* 41. The reviews carousel pagination. The theme styles it as position:absolute
      with left:50%, but it renders position:static, so the left:50% is discarded
      while the translateX(-50%) still applies - shifting the 163px strip to
      left:-57px, i.e. off the left edge of the screen. Firefox and WebKit both
      showed it hanging outside the viewport; Chromium happened not to. Centre it
      with flexbox instead of the offset-plus-transform pair, which cannot end up
      off-screen at any width. */
#reviews .swiper-pagination,
#reviews .swiper-pagination-clickable{
  position:relative !important;
  left:auto !important; right:auto !important; transform:none !important;
  width:100% !important; max-width:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:2px !important;
}

/* 42. Those pagination dots are 7x7 CSS pixels, well under the 24x24 minimum for
      a pointer target. Padding gives each one a 25px hit area while
      background-clip:content-box keeps the visible dot - and the wider pill on
      the active one - exactly as designed. */
#reviews .swiper-pagination-bullet{
  box-sizing:content-box !important;
  padding:9px 9px !important;
  background-clip:content-box !important;
  min-height:7px !important;
}

/* 43. Defensive clip on the content column. Every measurement shows the page at
      exactly the viewport width - scrollWidth never exceeded innerWidth at any of
      the thirteen test widths in any of the three engines - but during the
      fadeInUp entrance animation an element can paint a few pixels outside the
      column for one or two frames. overflow-x:clip absorbs that.
      It must be clip, NOT hidden: hidden would turn this into a scroll container
      and break the sticky journey cards on the homepage (rule 3). clip does not. */
.page_content_wrap{ overflow-x:clip; }

/* 44. APPROVED ITEM 7 - the six blog posts' desktop horizontal overflow.
      Measured cause, after tracing it properly: NOT the blog grid. It is
      ul.trx-addons-mega-content-container - ThemeREX mega-menu panels that are
      rendered in the header of BLOG POSTS ONLY (they are absent from every
      Elementor page and from the homepage). All of them are permanently
      visibility:hidden and opacity:0, so no visitor ever sees them, but they are
      absolutely positioned and after a desktop window resize one is left with a
      left offset that puts its right edge past the viewport - the page measured
      1408/1520/1980px at 1280/1440/1920. On a fresh load there is no overflow.
      Pinning them to the left edge and capping their width removes the transient
      state. Because they are invisible on the only template that renders them,
      this cannot change anything a visitor sees; and if the mega menu were ever
      switched on, left-aligned full width is normal mega-menu behaviour.
      The .related_wrap clip below fixes the same class of overhang on /blog/,
      where the theme gives .posts_container a -30px right margin. */
.trx-addons-mega-content-container{
  left:0 !important; right:auto !important; max-width:100% !important;
}
.related_wrap,
.related_wrap .posts_container{ overflow-x:clip; }

/* 45. THE THIN GREY STRIP ABOVE THE HOMEPAGE HEADER.
   The homepage hero (#top) is pulled up underneath the see-through header with
   an Elementor margin-top of -90px, but the header is 112px tall on desktop,
   104px from 768-1023px and 92px from 480-767px. The shortfall left a band at
   the very top of the page with no hero image behind it, and across that band
   rule 30's translucent dark gradient painted over the white body, which reads
   as grey. Measured strip height: 22.03px at 1024px and above, 14.09px from
   768-1023px, 2.09px from 480-767px, and none below 480px, where the hero is
   already over-pulled by 14px. Matching the pull-up to the real header height
   removes the strip. Hero height, hero image, header, logo, navigation,
   typography, colours, buttons and the marquee are unchanged. Below 480px the
   original value is restored explicitly so small screens do not move at all. */
body.home .page_content_wrap #top{ margin-top:-112px !important; }
@media (max-width:1023px){ body.home .page_content_wrap #top{ margin-top:-104px !important; } }
@media (max-width:767px){  body.home .page_content_wrap #top{ margin-top:-92px  !important; } }
@media (max-width:479px){  body.home .page_content_wrap #top{ margin-top:-90px  !important; } }

/* 46. About page stats band. The approved design puts the figure first with a
      short amber rule beneath it, then the label. Elementor's Counter widget has
      no control for a rule, so it is drawn here as an ::after. Everything else in
      that band - the order, sizes, colours, column widths, the #050C3F
      background and the staggered fadeInUp entrance - is an ordinary Elementor
      setting and is NOT here. */
.elementor-2350 .elementor-element-ea22026 .elementor-widget-counter::after{
  content:''; display:block; width:34px; height:3px;
  background:#FFAC40; border-radius:2px; margin-top:12px;
}
/* Elementor's Counter gives the empty prefix and suffix flex-grow:1, which pushes
   the figure away from the left edge so it no longer lines up with the rule and
   the label beneath it. There is no panel control for this. */
.elementor-2350 .elementor-element-ea22026 .elementor-counter-number-wrapper{
  justify-content:flex-start;
}
.elementor-2350 .elementor-element-ea22026 .elementor-counter-number-prefix,
.elementor-2350 .elementor-element-ea22026 .elementor-counter-number-suffix{
  flex-grow:0;
}/* End custom CSS */