@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

/* Override parent theme wave */
/* Kill all waves */
[class*="wave"],
[class*="divider"],
.hero-section > div:empty {
  display: none !important;
}

/* Kuulu Dark 8 + Functional 3 — Official Style Guide */
:root {
  /* Brand */
  --kuulu-green:   #009f4e;
  --soft-peach:    #f9ae8f;
  --electric-tq:   #00e5c6;

  /* Depth */
  --midnight-teal: #002e27;
  --gunmetal:      #122125;
  --ink-black:     #0b0d0c;

  /* HubSpot Variables */

/*
  ============================================
  Final Wave Divider Fix (Super Override)
  ============================================
  This rule is designed to be the ultimate override for the legacy 
  wave divider injected by the parent theme's JavaScript.
  
  It targets the element and uses !important on every property 
  to ensure it cannot be overridden by any other stylesheet or 
  inline style. It not only hides the element but also resets all 
  properties that could cause visual glitches, such as borders, 
  margins, padding, and backgrounds.
*/
body .hero-section-divider-wave-1 {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  box-shadow: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -1 !important;
}

  /* Neutrals */
  --off-white:     #f4f1ea;
  --ash-grey:      #c8cfd0;

  /* Functional */
  --success-green: #10b97e;
  --warning-amber: #ffb200;
  --error-red:     #ff4e42;
}

/* Base font settings */
html, body {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 400 !important;
}

/* All headings use Bebas Neue */
h1, h2, h3, h4, h5, h6, .heading {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1px;
}

/* Make H1 heading larger */
h1 {
  font-size: 4rem !important;
  margin-bottom: 0.5rem !important;
}

/* Increase hero section height significantly */
.hero-section.hero-section-overlay.theme-section-styles.section-bg-fixed.interior {
  min-height: 800px !important; /* Much taller explicit height */
  height: 800px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.hero-section-background-container {
  min-height: 800px !important;
  height: 800px !important;
  max-height: none !important;
}

.hero-section .tabservices_imgitem,
.hero-section .tabservices_inimg {
  min-height: 800px !important;
  height: 800px !important;
  max-height: none !important;
}

/* Hero section specific styles */
.hero-section {
  position: relative !important;
  overflow: visible !important;
  padding-bottom: 30px !important;
  max-height: none !important;
  background: linear-gradient(135deg, var(--midnight-teal) 0%, var(--gunmetal) 100%) !important;
}

/* Film grain overlay for hero section - DISABLED (korvattu tummanvihreällä) */
/* .hero-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 1 !important;
} */

/* Ensure hero content is vertically and horizontally centered */
.hero-section .hero-content {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: auto !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Override any potential parent containers */
section.dnd_section:first-child,
section.dnd_section:first-child .dnd-column,
section.dnd_section:first-child .dnd-row,
.body-container-wrapper section:first-of-type,
.body-container-wrapper main > div:first-child > section:first-child {
  min-height: 800px !important;
  height: auto !important;
  max-height: none !important;
}





/* 7. STEP SEVEN: REMOVE ANY INLINE STYLES */
/* JavaScript fix to remove any programmatically added wave elements */
body > div:not(.body-wrapper):has(.kuulu-wave-divider-container),
body > div:not(.body-wrapper)[id*="kuulu-fixed-wave"],
body > div:not(.body-wrapper)[class*="kuulu-wave"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* Hide any source tag artifacts in video */
source, source[src*=".mov"], source[type="video/mp4"] {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  visibility: hidden !important;
}

/* Hide any video artifacts */
.hero-section video::before,
.hero-section video::after,
video::before,
video::after,
.video-container::before,
.video-container::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  visibility: hidden !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: transparent !important;
}

/* Make subtext under H1 larger and closer */
h1 + p {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  margin-top: 0.5rem !important;
}

/*
  FINAL WAVE DIVIDER FIX - STEP 1:
  Permanently hide the old, module-injected wave element.
  This is the root cause of the visual glitches.
*/
.hero-section-divider-wave-1 {
  display: none !important;
  visibility: hidden !important;
}

/*
  Wave element removed - no longer needed
*/

/* Override parent theme footer background */
footer {
  background-color: #009F4E !important;
}

/* Footer copyright text */
footer .copyright {
  color: #ffffff !important;
}

/* Replace 'Our proven process' background with darker green */
.content-timeline-wrapper {
  background-color: var(--kuulu-green) !important; /* Using Kuulu green from palette */
}

/* Target only the card within the CTA section */
.dnd-section .widget-type-cta_button .cta-card,
.dnd-section .cta-card,
.dnd-section .call-to-action .cta_module,
.dnd-section .call-to-action .cta-card,
.dnd-section .call-to-action .card {
  background-color: #FAAE7D !important; /* Peach color */
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 30px !important;
}

/* Fix the button text color and styling */
.cta-button,
.cta-card a,
.cta-section a,
.call-to-action a,
[class*="cta"] a,
.btn-cta,
a[id*="cta"],
a.cta-link,
a.cta_button,
.header__cta a,
.custom-header__cta a,
.navigation__cta a,
.header-cta a,
.navigation-cta a,
a.cta-button,
a.cta_button,
a.cta-primary,
a[class*="cta"],
.header-container .cta,
.header-container a[href*="ota-yhteytta"],
.header-container a:contains("OTA YHTEYTTÄ") {
  background-color: #009F4E !important; /* Green background */
  color: white !important; /* White text */
  border: none !important;
  border-radius: 30px !important;
  padding: 12px 24px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

/* Main navigation CTA button styles */
#fixed-size-btn,
.header__cta a,
.custom-header__cta a,
.navigation__cta a,
.header-cta a,
.navigation-cta a {
  display: inline-block !important;
  background-color: var(--kuulu-green) !important;
  color: var(--off-white) !important;
  border: 2px solid var(--kuulu-green) !important;
  border-radius: 40px !important;
  padding: 15px 36px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  margin: 0 !important;
  line-height: normal !important;
}

/* Reset any other button styles to avoid conflicts */
.custom-cta-card #fixed-size-btn {
  border-radius: 40px !important;
  width: 100% !important;
  height: 100% !important;
  color: white !important;
  background-color: #009F4E !important;
}

/* Button hover effect - ONLY change colors, nothing else */
.cta-button:hover,
.cta-card a:hover,
.cta-section a:hover,
.call-to-action a:hover,
[class*="cta"] a:hover,
.btn-cta:hover,
a[id*="cta"]:hover,
a.cta-link:hover,
a.cta_button:hover,
.header__cta a:hover,
.custom-header__cta a:hover,
.navigation__cta a:hover,
.header-cta a:hover,
.navigation-cta a:hover {
  background-color: white !important;
  color: #009F4E !important;
  transform: none !important;
  /* Keep all size-affecting properties identical */
  border: 2px solid #009F4E !important;
  padding: 10px 22px !important;

/* SPECIFIC FIX FOR OTA YHTEYTTÄ BUTTON HOVER */
.ota-yhteytta-button a:hover::before {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

.ota-yhteytta-button a:hover span {
  color: #009F4E !important;
  z-index: 999 !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

/* Agressiivinen override kaikille mahdollisille selektoreille */
body .ota-yhteytta-button a:hover span,
html body .ota-yhteytta-button a:hover span,
.dnd-section .ota-yhteytta-button a:hover span,
.custom-header .ota-yhteytta-button a:hover span {
  color: #009F4E !important;
  z-index: 999 !important;
  position: relative !important;
}
  min-width: 150px !important;
  max-width: 150px !important;
  height: 45px !important;
  line-height: 21px !important;
}

/* == Custom Header & Navigation Styles == */

.custom-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* 1. Main header container */
/* Force header to maintain the same style regardless of scroll */
.custom-header,
.custom-header.scrolled,
header.custom-header,
header.custom-header.scrolled,
.body-wrapper .custom-header,
.body-wrapper .custom-header.scrolled {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 80, 39, 0.75) !important; /* Added back 10% opacity */
    backdrop-filter: blur(12px) !important; /* Same blur effect as mega menu */
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Same border as mega menu */
    outline: none !important; /* No outline */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important; /* Same shadow as mega menu */
    transition: none !important; /* Disable all transitions */
}

/* Removed conflicting styles */

.custom-header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px; /* Increased vertical padding for more spacing */
    background: none !important; /* No background to avoid dark spots */
    border: 0 !important; /* No border */
    outline: none !important; /* No outline */
    box-shadow: none !important; /* No shadow */
    width: 100%; /* Full width */
    margin: 0; /* No margins */
    box-sizing: border-box; /* Include padding in width calculation */
}

.custom-header__logo img {
    max-height: 40px; /* Slightly larger logo */
    margin-left: 20px; /* Add space to the left of the logo */
    filter: brightness(0) invert(1); /* Change logo color to white */
    transition: all 0.3s ease-in-out;
    opacity: 0.95; /* Slight transparency */
}

.header-observer-sentinel {
    position: absolute;
    top: 100vh; /* Position it at the bottom of the viewport height */
    height: 1px;
    width: 1px;
}



main#main-content {
    padding-top: 60px; /* Reduced padding to match smaller header height */
}

/* 2. Navigation menu layout */
.custom-header__navigation .hs-menu-wrapper > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important; /* Reduced spacing between top-level items */
}

/* 3. Individual menu items */
.custom-header__navigation .hs-menu-wrapper > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.8); /* Thinner, more visible white divider */
    line-height: 1;
}

.custom-header__navigation .hs-menu-wrapper > ul > li:last-child {
    border-right: none;
}

/* 4. Menu links - FONT AND SPACING */
.custom-header__navigation .hs-menu-wrapper > ul > li > a {
    display: block !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 20px !important; /* Slightly larger font */
    text-decoration: none !important;
    white-space: nowrap !important;
    letter-spacing: 1px !important; /* Added letter spacing */
    padding: 0 12px !important; /* Increased padding */
    transition: transform 0.2s ease, color 0.2s ease !important;
    position: relative !important;
}

/* Add hover effect for top-level links */
.custom-header__navigation .hs-menu-wrapper > ul > li > a:hover {
    transform: translateY(-2px) !important;
    color: var(--soft-peach) !important; /* Soft peach from palette */
    text-decoration: underline;
    text-decoration-color: var(--electric-tq) !important; /* Electric turquoise underline */
    text-decoration-thickness: 2px;
}

/* Subtle underline indicator */
.custom-header__navigation .hs-menu-wrapper > ul > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #FAAE7D !important; /* Peach color underline */
    transition: width 0.3s ease, left 0.3s ease !important;
    transform: translateX(-50%) !important;
}

.custom-header__navigation .hs-menu-wrapper > ul > li > a:hover::after {
    width: 70% !important;
}

/* 5. Sub-menu styling */
.custom-header__navigation .hs-menu-wrapper ul ul a {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 16px !important;
    padding: 5px 15px !important;
    letter-spacing: 1px;
}

/* CTA Button Styling */
.header-cta-button {
    margin-left: 15px; /* Reduced space before CTA button */
    display: inline-block;
}

/* Global button styles with animated hover effect */
.header-cta-button a,
a.btn,
.btn,
button[type="submit"],
.hs-button,
.button {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px; /* Increased button text size */
    color: #fff;
    background-color: #009F4E; /* Green color */
    padding: 16px 36px;
    border-radius: 30px; /* Increased border radius for more rounded corners */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none;
    cursor: pointer;
}

.header-cta-button a::before,
a.btn::before,
.btn::before,
button[type="submit"]::before,
.hs-button::before,
.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #fff;
    transition: width 0.3s ease;
    z-index: -1;
    border-radius: 30px; /* Match the parent border radius */
}

.header-cta-button a:hover,
a.btn:hover,
.btn:hover,
button[type="submit"]:hover,
.hs-button:hover,
.button:hover {
    color: #009F4E; /* Green color */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.header-cta-button a:hover::before,
a.btn:hover::before,
.btn:hover::before,
button[type="submit"]:hover::before,
.hs-button:hover::before,
.button:hover::before {
    width: 100%;
}

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* --- Navigaatio yhdelle riville --- */
/* Mega Menu Styles */
.custom-header__navigation ul > li > a {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    letter-spacing: 0px !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
}

.custom-header__navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 25px; /* Spacing between top-level items */
}

.custom-header__navigation li {
    position: relative; /* Needed for positioning the dropdown */
    padding: 20px 0;
    display: flex; /* Use flexbox for better positioning control */
    align-items: center;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%; /* Position below the parent */
    left: 0; /* Left-aligned with parent */
    transform: translateY(0); /* No vertical adjustment */
    padding-top: 10px; /* Padding to separate from parent */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2000; /* Ensure it appears above other elements */
}

.custom-header__navigation li:hover > .mega-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.header {
    background-color: rgba(18, 33, 37, 0.9); /* Gunmetal with high opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* For Safari */
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1000;
}

/* Complete overhaul of the mega menu styling with extreme measures to remove all spacing */
.mega-menu-content {
    background-color: rgba(18, 33, 37, 0.85); /* Gunmetal with high opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px !important;
    width: 300px; /* Narrower to reduce extra space */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
    z-index: 1100;
    line-height: 1.4 !important;
    font-size: inherit !important;
}

/* Target everything inside the mega menu content to reset spacing */
.mega-menu-content * {
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mega-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* Changed from flex to block */
    gap: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.mega-menu-list > li,
.mega-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    font-size: inherit !important;
}

/* Force all list items to have zero height by default */
.mega-menu-list li::before,
.mega-menu-list li::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mega-menu-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important; /* Space between icon and text */
    margin: 4px 0 !important; /* Vertical margin between items */
    padding: 8px 12px !important; /* Reduced right padding */
    border-radius: 6px !important; /* Rounded corners for menu items */
    text-decoration: none !important;
    color: #ffffff !important;
    height: auto !important; /* Auto height for flexibility */
    min-height: 32px !important; /* Minimum height to ensure consistent spacing */
    overflow: visible !important;
    line-height: 1.4 !important; /* Match line height with text */
    transition: background-color 0.2s ease !important;
}

.mega-menu-icon {
    font-size: 16px !important;
    width: 20px !important; 
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FAAE7D !important; /* Using the peach color for icons */
    flex-shrink: 0 !important;
    line-height: 1 !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mega-menu-text {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    height: auto !important;
}

.mega-menu-item a:hover {
    background-color: transparent !important;
    transform: translateX(3px); /* Slight movement on hover */
}

.mega-menu-item a h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 18px !important; /* Smaller text size */
    color: #ffffff !important;
    font-weight: 400 !important; /* Ensure it's not bold */
    line-height: 1.4 !important; /* Increased line height */
    text-align: left !important;
    display: inline-block !important;
    vertical-align: middle !important;
    height: auto !important;
    letter-spacing: 0.5px !important;
}

/* Force menu to be compact by targeting all possible elements */
.mega-menu-content ul,
.mega-menu-content ol,
.mega-menu-content div,
.mega-menu-content nav,
.mega-menu-content span,
.mega-menu-content p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Hide any potential empty text nodes or whitespace */
.mega-menu-list li * {
    font-size: inherit !important;
}

/* Reset only text elements to visible font size */
.mega-menu-list h4,
.mega-menu-list span,
.mega-menu-list a,
.mega-menu-list i {
    font-size: 18px !important;
}



.header__menu, .header__navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.navigation-primary {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 100%;
  gap: 32px;
}

.navigation-primary ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation-primary li {
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

@media (max-width: 1200px) {
  .navigation-primary, .navigation-primary ul {
    gap: 16px;
  }
  .menu-link {
    font-size: 15px;
    padding: 0 4px;
  }
}

@media (max-width: 900px) {
  .navigation-primary, .navigation-primary ul {
    gap: 8px;
  }
  .menu-link {
    font-size: 14px;
    padding: 0 2px;
  }
}

/* --- Varmistetaan, että HubSpotin mahdolliset yliajot eivät riko asettelua --- */
.header__navigation, .navigation-primary, .navigation-primary ul, .navigation-primary li, .menu-link {
  box-sizing: border-box !important;
}

/* === Mobile navigation (hamburger) === */
.mobile-nav { display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 3000; }

/* Hamburger button */
.hamburger {
  display: none;
  width: 36px; height: 28px;
  position: relative;
  background: transparent !important; border: 0 !important; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; box-shadow: none !important;
  z-index: 3001;
}
.hamburger:focus { outline: none; box-shadow: none !important; }
.hamburger span {
  position: absolute; left: 0; right: 0; height: 3px; background-color: #ffffff !important; opacity: 1; display:block; width:100%;
  border-radius: 2px; transition: transform .25s ease, top .25s ease, opacity .25s ease;
}
.hamburger span:nth-child(1){ top: 4px; }
.hamburger span:nth-child(2){ top: 12px; }
.hamburger span:nth-child(3){ top: 20px; }
.hamburger.is-open span:nth-child(1){ top: 12px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; }
.hamburger.is-open span:nth-child(3){ top: 12px; transform: rotate(-45deg); }

.mobile-nav__panel { 
  /* Poistettu vanhat tyylit - force-override.css hoitaa */
}
.mobile-nav__panel[hidden]{ display: none !important; }
.mobile-nav__list { list-style: none; margin: 0; padding: 12px; }
.mobile-nav__list li { margin: 0; padding: 8px 4px; }
.mobile-nav__list a { 
  color: #fff !important; text-decoration: none; font-family: 'Bebas Neue', sans-serif !important; 
  font-size: 20px; letter-spacing: .5px;
}
/* CTA button style inside mobile panel */
.mobile-nav__list .mobile-cta a {
  display: inline-block; background: var(--kuulu-green); color: #fff !important;
  padding: 12px 20px; border-radius: 30px; border: 2px solid var(--kuulu-green);
  text-transform: uppercase; letter-spacing: 1px; font-size: 18px;
}

/* Show mobile nav on small screens, hide desktop mega menu */
@media (max-width: 900px){
  .custom-header__navigation { display: none !important; }
  .mobile-nav { 
    display: flex; align-items: center; gap: 12px; 
  }
  .hamburger { display: inline-block; }
  /* Show desktop CTA off on mobile to avoid overlap (we show CTA in panel) */
  .ota-yhteytta-button { display: none !important; }
  /* Smaller CTA button on mobile */
  .ota-yhteytta-button a {
    width: 130px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
}

/* Prevent body scroll when mobile menu open */
body.nav-open { overflow: hidden; }

/* --- Prosessikuvaus: vasen tasaus ja valkoiset tekstit --- */
.process-step {
  text-align: left !important;
}
.process-step h5,
.process-step h3,
.process-step p,
.process-step span,
.process-step strong {
  color: #fff !important;
}

/* --- Videotuotannon prosessimme -osion fonttikoon kasvatus --- */
/* Pääotsikko - erittäin iso fontti */
.content-timeline-wrapper h2,
.content-timeline-wrapper .timeline-heading,
section[class*="timeline"] h2,
section[class*="process"] h2,
h2:contains("VIDEOTUOTANNON PROSESSIMME"),
h2:contains("Videotuotannon prosessimme"),
.dnd-section h2,
.dnd-column h2,
.timeline-section h2,
.process-section h2 {
  font-size: 4.5rem !important; /* Vieläkin suurempi pääotsikko */
  line-height: 1.1 !important;
  margin-bottom: 2.5rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.content-timeline-wrapper h3,
.content-timeline-wrapper .timeline-item h3,
section[class*="timeline"] h3,
section[class*="process"] h3 {
  font-size: 2.2rem !important; /* Suuremmat vaihe-otsikot */
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
}

.content-timeline-wrapper p,
.content-timeline-wrapper .timeline-item p,
section[class*="timeline"] p,
section[class*="process"] p {
  font-size: 1.3rem !important; /* Suurempi leipäteksti */
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

.content-timeline-wrapper .timeline-number,
.content-timeline-wrapper .step-number,
section[class*="timeline"] .timeline-number,
section[class*="process"] .step-number {
  font-size: 4rem !important; /* Suuremmat numerot */
  font-weight: bold !important;
}

/* Lisää erityissääntöjä timeline-otsikkojen kohdistamiseksi */
.timeline-wrapper h2,
.timeline-container h2,
.timeline-header h2,
.timeline-title,
.process-title,
.process-header h2,
section.timeline h2,
section.process h2,
.widget-type-rich_text h2,
.rich-text h2 {
  font-size: 4.5rem !important;
  line-height: 1.1 !important;
  margin-bottom: 2.5rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Mobiiliversio - hieman pienemmät fontit */
@media (max-width: 768px) {
  .content-timeline-wrapper h2,
  .content-timeline-wrapper .timeline-heading,
  section[class*="timeline"] h2,
  section[class*="process"] h2,
  .timeline-wrapper h2,
  .timeline-container h2,
  .timeline-header h2,
  .timeline-title,
  .process-title,
  .process-header h2,
  section.timeline h2,
  section.process h2,
  .widget-type-rich_text h2,
  .rich-text h2 {
    font-size: 3rem !important;
  }
  
  .content-timeline-wrapper h3,
  .content-timeline-wrapper .timeline-item h3,
  section[class*="timeline"] h3,
  section[class*="process"] h3 {
    font-size: 1.8rem !important;
  }
  
  .content-timeline-wrapper p,
  .content-timeline-wrapper .timeline-item p,
  section[class*="timeline"] p,
  section[class*="process"] p {
    font-size: 1.1rem !important;
  }
  
  .content-timeline-wrapper .timeline-number,
  .content-timeline-wrapper .step-number,
  section[class*="timeline"] .timeline-number,
  section[class*="process"] .step-number {
    font-size: 3rem !important;
  }
}touch
touch
touch
touch
touch
touch
touch