.elementor-kit-21484{--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;}.elementor-kit-21484 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =============================================================
   HAKKI PILKE — Custom CSS
   Elementor ‚Üí Site Settings ‚Üí Mukautettu CSS

   Sisältö:
   1. Fontit (SucroseBold + Cardo + Inter)
   2. Brand-tokenit
   3. Globaali typografia
   4. Elementor-widgettien oletustyylit
   5. Helper-luokat (.hp-eyebrow, .hp-stat, jne.)
   6. HEADER-templaatin tyylit (.elementor-location-header)
   7. FOOTER-templaatin tyylit (.elementor-location-footer)
   8. Saavutettavuus + responsive
   ============================================================= */

/* =============================================================
   1. FONTIT
   ============================================================= */

@font-face {
  font-family: 'SucroseBold';
  src: url('/wp-content/uploads/fonts/SucroseBold.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/SucroseBold.woff')  format('woff'),
       url('/wp-content/uploads/fonts/SucroseBold.ttf')   format('truetype'),
       url('/font/SucroseBold.woff2') format('woff2'),
       url('/font/SucroseBold.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =============================================================
   2. BRAND-TOKENIT
   ============================================================= */
:root {
  --hp-red:           #fa1400;
  --hp-red-deep:      #c01000;
  --hp-yellow:        #e7a022;
  --hp-ink:           #323232;
  --hp-ink-deep:      #1b1b1b;
  --hp-paper:         #ffffff;
  --hp-paper-2:       #f5f5f5;
  --hp-paper-3:       #ebebeb;
  --hp-muted:         #6b6b6b;
  --hp-line:          #e0e0e0;

  --hp-sans:          'Inter', system-ui, -apple-system, sans-serif;
  --hp-display:       'SucroseBold', 'Anton', 'Impact', sans-serif;
  --hp-accent-font:   'Cardo', Georgia, serif;
}

/* =============================================================
   3. GLOBAALI TYPOGRAFIA
   ============================================================= */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--hp-sans);
  color: var(--hp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--hp-display) !important;
  color: var(--hp-ink);
  font-weight: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
}

h1, .elementor-heading-title.elementor-size-xxl {
  font-size: clamp(2.8rem, 8vw, 7rem);
  line-height: 0.95;
}
h2, .elementor-heading-title.elementor-size-xl {
  font-size: clamp(2rem, 5vw, 4rem);
}
h3, .elementor-heading-title.elementor-size-large {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.1;
}
h4 {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: 0.16em;
}

/* Em-kursiivi accent — Cardo italic punaisena */
h1 em, h2 em, h3 em, h4 em,
.elementor-heading-title em {
  font-family: var(--hp-accent-font) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--hp-red) !important;
  letter-spacing: -0.005em !important;
}

strong, b {
  font-weight: 700;
  color: var(--hp-ink);
}

a { color: inherit; transition: color 0.2s ease; }

/* =============================================================
   4. ELEMENTOR-OVERRIDET (yleiset)
   ============================================================= */

/* PAINIKKEET — brand-punainen, terävät, uppercase */
.elementor-button,
.elementor-widget-button .elementor-button,
.elementor-button-link {
  background-color: var(--hp-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--hp-red) !important;
  font-family: var(--hp-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1rem 1.7rem !important;
  border-radius: 0 !important;
  transition: background-color 0.25s ease, border-color 0.25s ease !important;
  box-shadow: none !important;
}
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: var(--hp-red-deep) !important;
  border-color: var(--hp-red-deep) !important;
  color: #ffffff !important;
}

.hp-btn-ghost .elementor-button {
  background-color: transparent !important;
  color: var(--hp-red) !important;
}
.hp-btn-ghost .elementor-button:hover {
  background-color: var(--hp-red) !important;
  color: #ffffff !important;
}

.hp-btn-outline-light .elementor-button {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.hp-btn-outline-light .elementor-button:hover {
  background-color: #ffffff !important;
  color: var(--hp-ink) !important;
  border-color: #ffffff !important;
}

/* Painike raw HTML:ssä — <a class="hp-btn"> (HTML-widgetin käyttöön) */
a.hp-btn,
.hp-btn:not(.elementor-button) {
  display: inline-block;
  background-color: var(--hp-red);
  color: #ffffff !important;
  border: 1px solid var(--hp-red);
  font-family: var(--hp-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}
a.hp-btn:hover {
  background-color: var(--hp-red-deep);
  border-color: var(--hp-red-deep);
  color: #ffffff !important;
}
a.hp-btn.hp-btn-ghost {
  background-color: transparent;
  color: var(--hp-red) !important;
}
a.hp-btn.hp-btn-ghost:hover {
  background-color: var(--hp-red);
  color: #ffffff !important;
}
a.hp-btn.hp-btn-outline-light {
  background-color: transparent;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.4);
}
a.hp-btn.hp-btn-outline-light:hover {
  background-color: #ffffff;
  color: var(--hp-ink) !important;
  border-color: #ffffff;
}

/* LOMAKKEET */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="url"],
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-field-textual {
  font-family: var(--hp-sans) !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--hp-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--hp-ink) !important;
  transition: border-color 0.2s ease !important;
  box-shadow: none !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus,
.elementor-field-textual:focus {
  border-color: var(--hp-red) !important;
  outline: 0 !important;
}
.elementor-field-label {
  font-family: var(--hp-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink) !important;
  margin-bottom: 0.5rem !important;
}

/* Kuvat — terävät */
.elementor-widget-image img,
.elementor-image img {
  border-radius: 0;
}

/* Sivun pääosioiden vakio-padding — opt-in luokka .hp-section
   Tiukka rytmi — vältä päällekkäisiä paddingeja */
.hp-section {
  padding-top: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

/* Tumma osio = valkoinen teksti */
.hp-section-dark {
  background-color: var(--hp-ink-deep) !important;
}
.hp-section-dark *,
.hp-section-dark .elementor-heading-title {
  color: #ffffff !important;
}
.hp-section-dark p { color: rgba(255,255,255,0.85) !important; }

/* =============================================================
   5. HELPER-LUOKAT
   ============================================================= */

.hp-eyebrow {
  font-family: var(--hp-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-red);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem 0;
}
.hp-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
}
.hp-eyebrow--light { color: rgba(255,255,255,0.75); }

.hp-mantra {
  padding: 1.5rem 0;
  border-top: 1px solid var(--hp-line);
  border-bottom: 1px solid var(--hp-line);
  text-align: center;
  font-family: var(--hp-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hp-mantra span { margin: 0 1rem; }
.hp-mantra span + span::before {
  content: '\00B7';
  margin-right: 2rem;
  color: var(--hp-red);
}

.hp-yellow-strip {
  background: var(--hp-yellow);
  color: var(--hp-ink);
  padding: 1.2rem 1.5rem;
  text-align: center;
  font-family: var(--hp-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--hp-ink);
  border-bottom: 1px solid var(--hp-ink);
}

.hp-stat { display: flex; flex-direction: column; gap: 0.5rem; }
.hp-stat__num {
  font-family: var(--hp-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: normal;
  color: var(--hp-red);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hp-stat__label {
  font-family: var(--hp-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hp-muted);
}

.hp-bigstat-num {
  font-family: var(--hp-display);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: normal;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--hp-red);
  text-transform: uppercase;
}

.hp-card {
  background: var(--hp-paper);
  border: 1px solid var(--hp-line);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.hp-card:hover {
  border-color: var(--hp-red);
  transform: translateY(-3px);
}
.hp-card--dark {
  background: var(--hp-ink-deep);
  color: #ffffff;
  border-color: var(--hp-ink-deep);
}
.hp-card--dark a {
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}

.hp-ticker {
  background: var(--hp-ink-deep);
  color: #ffffff;
  overflow: hidden;
  padding: 0.7rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hp-ticker__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: hp-ticker 40s linear infinite;
}
.hp-ticker__track span::after {
  content: '‚óÜ';
  margin-left: 3rem;
  color: var(--hp-red);
  font-size: 0.6rem;
}
@keyframes hp-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hp-separator {
  width: 48px;
  height: 2px;
  background: var(--hp-red);
  border: 0;
  margin: 1.2rem 0;
}

.hp-corporate-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hp-muted);
  font-size: 13px;
}
.hp-corporate-line::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--hp-red);
  display: inline-block;
}

/* =============================================================
   V3-MOCKUPIN OSIO-HELPERIT
   Lisää Container Advanced → CSS Classes -kenttään
   ============================================================= */

/* ----- HERO: video bg + iso otsikko + CTAt ----- */
.hp-hero {
  min-height: 85vh;
  padding-top: 100px;
  padding-bottom: 60px;
  position: relative;
  background: var(--hp-ink-deep);
  color: #ffffff;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.7) 65%,
    rgba(0,0,0,0.9) 100%);
  pointer-events: none;
  z-index: 1;
}
.hp-hero > * { position: relative; z-index: 2; }
.hp-hero .elementor-heading-title,
.hp-hero h1, .hp-hero h2 {
  color: #ffffff !important;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
.hp-hero p {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

/* ----- FEATURES (3-pal: ikoni + otsikko + teksti) ----- */
.hp-features {
  background: var(--hp-paper);
  border-top: 1px solid var(--hp-line);
  border-bottom: 1px solid var(--hp-line);
}
.hp-feature {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--hp-line);
}
.hp-feature:last-child { border-right: 0; }
.hp-feature__num {
  font-family: var(--hp-display);
  font-size: 2rem;
  color: var(--hp-red);
  display: block;
  margin-bottom: 0.5rem;
}
.hp-feature h3,
.hp-feature .elementor-heading-title {
  font-size: 1.3rem !important;
  margin-bottom: 0.6rem !important;
}
.hp-feature p {
  font-size: 0.95rem;
  color: var(--hp-muted);
  line-height: 1.6;
}

/* ----- BIGSTAT (iso luku tummalla pohjalla) ----- */
.hp-bigstat {
  background: var(--hp-ink-deep);
  color: #ffffff;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}
.hp-bigstat * { color: #ffffff !important; }
.hp-bigstat__num {
  font-family: var(--hp-display);
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #ffffff !important;
}
.hp-bigstat__label {
  font-family: var(--hp-display);
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-top: 0.5rem;
}
.hp-bigstat__sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78) !important;
  max-width: 28rem;
}

/* ----- PRODUCTS (klapikoneet grid) ----- */
.hp-products {
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.hp-product {
  background: var(--hp-paper);
  border: 1px solid var(--hp-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.hp-product:hover {
  border-color: var(--hp-red);
  transform: translateY(-4px);
}
.hp-product__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--hp-paper-2);
}
.hp-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hp-product:hover .hp-product__image img { transform: scale(1.04); }
.hp-product__cat {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-red);
  padding: 1.5rem 1.5rem 0.5rem;
}
.hp-product h3,
.hp-product .elementor-heading-title {
  font-size: 1.4rem !important;
  padding: 0 1.5rem 0.5rem;
  margin: 0 !important;
}
.hp-product p {
  font-size: 0.92rem;
  color: var(--hp-muted);
  padding: 0 1.5rem 1.5rem;
  margin: 0;
  flex: 1;
}
.hp-product__link {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-red);
}

/* ----- WORLDMAP (musta osio + kartta) ----- */
.hp-worldmap {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  background: #000000 !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}
.hp-worldmap *,
.hp-worldmap .elementor-heading-title {
  color: #ffffff !important;
}
.hp-worldmap p { color: rgba(255,255,255,0.7) !important; }
.hp-worldmap .elementor-widget-image img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hp-worldmap-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hp-red);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--hp-red);
  animation: hp-dot-pulse 2s infinite;
}
@keyframes hp-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(250,20,0,0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(250,20,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(250,20,0,0); }
}

/* ----- QUOTE (testimonial — Cardo italic serif) ----- */
.hp-quote {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--hp-paper-2);
  text-align: center;
}
.hp-quote__text,
.hp-quote .elementor-widget-text-editor p {
  font-family: var(--hp-accent-font) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--hp-ink) !important;
  max-width: 50rem;
  margin: 0 auto 2rem !important;
}
.hp-quote__cite {
  font-family: var(--hp-display);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--hp-ink);
}
.hp-quote__cite span {
  font-family: var(--hp-sans);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--hp-muted);
  text-transform: none;
  margin-left: 0.5rem;
}

/* ----- NEWS (uutiset-grid 3 kpl) ----- */
.hp-news {
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.hp-news__item,
.hp-news .elementor-post {
  display: flex;
  flex-direction: column;
  background: var(--hp-paper);
  transition: transform 0.3s ease;
}
.hp-news__item:hover,
.hp-news .elementor-post:hover { transform: translateY(-3px); }
.hp-news__image,
.hp-news .elementor-post__thumbnail {
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.hp-news__image img,
.hp-news .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-news__date,
.hp-news .elementor-post-date {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-red);
  margin-bottom: 0.5rem;
}
.hp-news__item h3,
.hp-news .elementor-post__title {
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.6rem !important;
}
.hp-news__item p,
.hp-news .elementor-post__excerpt p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hp-muted);
}
.hp-news__link,
.hp-news .elementor-post__read-more {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-red) !important;
}

/* ----- CTA (iso CTA-osio tummalla pohjalla) ----- */
.hp-cta {
  background: var(--hp-ink-deep);
  color: #ffffff;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  text-align: center;
}
.hp-cta .elementor-heading-title,
.hp-cta h1, .hp-cta h2, .hp-cta h3 {
  color: #ffffff !important;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.hp-cta p {
  color: rgba(255,255,255,0.78) !important;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

/* ----- SPLIT (50/50 kuva + teksti) ----- */
.hp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}
.hp-split--reverse {
  direction: rtl;
}
.hp-split--reverse > * { direction: ltr; }
.hp-split__image {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
.hp-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hp-split:hover .hp-split__image img { transform: scale(1.03); }
.hp-split__text {
  padding: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hp-split__text h2 {
  margin-bottom: 1.5rem;
  max-width: 16ch;
}
.hp-split__text p {
  color: var(--hp-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.hp-split__text .elementor-button {
  align-self: flex-start;
}

/* ----- TIMELINE (Yritys-sivulle) ----- */
.hp-timeline { max-width: 900px; margin: 0 auto; }
.hp-timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--hp-line);
  align-items: baseline;
}
.hp-timeline-item:last-child { border-bottom: 1px solid var(--hp-line); }
.hp-timeline-item__year {
  font-family: var(--hp-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--hp-red);
}
.hp-timeline-item__body h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.hp-timeline-item__body p {
  font-size: 1rem;
  color: var(--hp-muted);
  line-height: 1.6;
}

/* ----- CONTACT FORM (Ota yhteyttä -sivulle) ----- */
.hp-contact {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--hp-line);
}
.hp-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hp-contact__info h3 {
  font-size: 1rem !important;
  letter-spacing: 0.04em;
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
}
.hp-contact__info h3:first-of-type { margin-top: 0; }
.hp-contact__info p {
  font-size: 0.95rem;
  color: var(--hp-muted);
  line-height: 1.6;
}
.hp-form {
  background: var(--hp-paper-2);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--hp-line);
}

/* ----- RESPONSIIVISUUS näille osioille ----- */
@media (max-width: 768px) {
  .hp-split { grid-template-columns: 1fr; }
  .hp-split--reverse { direction: ltr; }
  .hp-feature { border-right: 0; border-bottom: 1px solid var(--hp-line); }
  .hp-feature:last-child { border-bottom: 0; }
  .hp-contact__grid { grid-template-columns: 1fr; }
  .hp-timeline-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .hp-hero { min-height: 80vh; padding-top: 70px; }
}

/* =============================================================
   6. HEADER — Theme Builder -templaatti
   Lukitsee headerin tyylit niin että Elementor-konfigurointia ei tarvita.
   ============================================================= */

/* Uloin header-container — pakota tumma tausta + tiivis korkeus */
.elementor-location-header > .e-con,
.elementor-location-header > section,
.elementor-location-header .tp-header,
.elementor-location-header > div:first-child {
  background-color: var(--hp-ink) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
  min-height: 0 !important;
}

/* Header on koko leveydeltä */
.elementor-location-header {
  width: 100%;
  position: relative;
  z-index: 100;
}

/* Sisäcontainerit headerissa — ei ylimääräistä paddingia */
.elementor-location-header .e-con-inner,
.elementor-location-header .e-con .e-con {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Header-logo (Image-widget) — max-korkeus rajoittaa */
.elementor-location-header .elementor-widget-image img {
  max-height: 44px !important;
  width: auto !important;
}

/* Header-nav (Nav Menu -widget) */
.elementor-location-header .elementor-nav-menu > li > a {
  font-family: var(--hp-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  transition: color 0.2s ease;
}
.elementor-location-header .elementor-nav-menu > li > a:hover,
.elementor-location-header .elementor-nav-menu > li.current-menu-item > a {
  color: var(--hp-red) !important;
}

/* Piilota dropdown-chevronit (▼) jos ei käytetä alavalikoita */
.elementor-location-header .sub-arrow {
  display: none !important;
}

/* Poista Elementorin oletus-pointer (vihreä/sininen alaviiva aktiivisessa) */
.elementor-location-header .elementor-nav-menu .elementor-item::after,
.elementor-location-header .elementor-nav-menu .elementor-item::before,
.elementor-location-header .elementor-nav-menu .elementor-item-active::after,
.elementor-location-header .elementor-nav-menu .elementor-item-active::before,
.elementor-location-header .elementor-nav-menu a::after,
.elementor-location-header .elementor-nav-menu a::before {
  display: none !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* JOS haluat säilyttää alaviivan brand-punaisena, kommentoi yllä oleva sääntö
   pois ja ota tämä käyttöön:

.elementor-location-header .elementor-nav-menu .elementor-item::after,
.elementor-location-header .elementor-nav-menu .elementor-item-active::after {
  background-color: var(--hp-red) !important;
}
*/

/* Header-painike (TARJOUSPYYNTÖ) — varmista brand-väri */
.elementor-location-header .elementor-button {
  background-color: var(--hp-red) !important;
  border-color: var(--hp-red) !important;
  padding: 12px 20px !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}
.elementor-location-header .elementor-button:hover {
  background-color: var(--hp-red-deep) !important;
  border-color: var(--hp-red-deep) !important;
}

/* Kielenvaihtaja headerissa */
.elementor-location-header .trp-language-switcher a,
.elementor-location-header .wpml-ls a,
.elementor-location-header .polylang-switcher a {
  color: #ffffff !important;
  font-family: var(--hp-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.elementor-location-header .trp-language-switcher a:hover,
.elementor-location-header .wpml-ls a:hover {
  color: var(--hp-red) !important;
}

/* =============================================================
   7. FOOTER — Theme Builder -templaatti
   Lukitsee footerin tyylit niin että Elementor-konfigurointia ei tarvita.
   ============================================================= */

/* Footer wrapper — pakota vaalea tausta */
.elementor-location-footer {
  width: 100%;
  background-color: var(--hp-paper-2) !important;
  border-top: 1px solid var(--hp-line);
}

/* Uloin footer-container — vaalea, päapadding, koko leveys */
.elementor-location-footer > .e-con,
.elementor-location-footer > section,
.elementor-location-footer .tp-footer,
.elementor-location-footer > div:first-child {
  background-color: var(--hp-paper-2) !important;
  padding-top: 48px !important;
  padding-bottom: 8px !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}

/* Footer-sisältö keskitetty max-leveyteen */
.elementor-location-footer .e-con-inner {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* Footerin sisäcontainerit — neutraali padding */
.elementor-location-footer .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4-sarakkeen grid — gap */
.elementor-location-footer .e-con.e-flex > .e-con {
  --gap: 48px;
}

/* Footerin otsikot — Klapikoneet, Tuki, Yhteys */
.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title {
  font-family: var(--hp-display) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink) !important;
  margin-bottom: 14px !important;
  line-height: 1.2 !important;
}

/* Footerin linkit — Inter, harmaa, punainen hover */
.elementor-location-footer a {
  color: var(--hp-muted) !important;
  font-family: var(--hp-sans) !important;
  font-size: 14px !important;
  transition: color 0.2s ease;
  text-decoration: none;
}
.elementor-location-footer a:hover {
  color: var(--hp-red) !important;
}

/* Icon List footerissa — tiukempi rivi-väli */
.elementor-location-footer .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 6px !important;
}
.elementor-location-footer .elementor-icon-list-item {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.elementor-location-footer .elementor-icon-list-text {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Footerin tagline-teksti (logon alla) */
.elementor-location-footer .tp-footer-intro p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--hp-muted) !important;
  margin-bottom: 16px !important;
}

/* Sosiaaliset ikonit — tumma + punainen hover */
.elementor-location-footer .elementor-social-icon {
  background-color: transparent !important;
  color: var(--hp-ink) !important;
  margin-right: 8px !important;
  transition: color 0.2s ease;
}
.elementor-location-footer .elementor-social-icon:hover {
  background-color: transparent !important;
  color: var(--hp-red) !important;
}

/* Footerin alapalkki — copyright.
   Osuu sekä .tp-footer-bottom -luokkaan että automaattisesti
   footerin VIIMEISEEN top-level Containeriin (e-parent).
   margin-top: 0 (ei tilaa containerin ulkopuolelle)
   padding-top: 12 (tilaa border-linjasta tekstiin) */
.tp-footer-bottom,
.elementor-location-footer > .e-con:last-child,
.elementor-location-footer > .e-con.e-parent:last-of-type {
  border-top: 1px solid var(--hp-line) !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
}

/* BRUTE-FORCE: lisää padding-bottom KAIKKIIN footerin top-level
   Containereihin paitsi viimeiseen (copyright).
   Korkea spesifisyys: body + footer + class chain. */
body footer.elementor-location-footer > .elementor-element:not(:last-child),
body footer.elementor-location-footer > .e-con:not(:last-child),
body footer.elementor-location-footer > div:not(:last-child) {
  padding-bottom: 48px !important;
}

/* Ja vielä per-ID jos käyttäjän container = 14c759c1 */
body footer.elementor-location-footer .elementor-element-14c759c1 {
  padding-bottom: 48px !important;
}

/* Ja jos .footer luokka oikein */
body footer.elementor-location-footer .footer {
  padding-bottom: 48px !important;
}

/* Sisältö copyright-rivin sisällä — pakota nolla */
.tp-footer-bottom *,
.elementor-location-footer > .e-con:last-child * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Footerin sarakkeiden sisäcontainerit — ei alapaddingia jotta
   sarakkeet päättyvät tiukasti. EI kosketa wrapper-containeriin
   (.footer-luokka) eikä copyright-riviin. */
.elementor-location-footer .e-con.e-child,
.elementor-location-footer .e-con.e-child > .e-con-inner {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* Universaali min-height-pakotus footerissa — estää Elementorin
   "Min Height" -asetukset jättämästä tyhjää */
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner,
.elementor-location-footer .elementor-widget,
.elementor-location-footer .elementor-element {
  min-height: 0 !important;
}

/* Outer footer container — pidetään yläpadding mutta alapadding 0 */
.elementor-location-footer > .e-con,
.elementor-location-footer > section,
.elementor-location-footer .tp-footer {
  padding-bottom: 0 !important;
}

/* Outer .e-con-inner — varmista että ei ole padding-bottomia */
.elementor-location-footer > .e-con > .e-con-inner {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Kaikki copyright-rivin sisältö rekursiivisesti nollaan */
.tp-footer-bottom * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Copyright-tekstit pieniksi + harmaiksi */
.tp-footer-bottom,
.tp-footer-bottom *,
.elementor-location-footer .e-con-inner > .e-con:last-child,
.elementor-location-footer .e-con-inner > .e-con:last-child * {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: var(--hp-muted) !important;
  margin-bottom: 0 !important;
}

/* Copyright-rivin Text Editor / Heading-widget — poista oletus-margin */
.elementor-location-footer .e-con-inner > .e-con:last-child .elementor-widget-text-editor,
.elementor-location-footer .e-con-inner > .e-con:last-child .elementor-widget-heading,
.elementor-location-footer .e-con-inner > .e-con:last-child p,
.elementor-location-footer .e-con-inner > .e-con:last-child h1,
.elementor-location-footer .e-con-inner > .e-con:last-child h2,
.elementor-location-footer .e-con-inner > .e-con:last-child h3,
.elementor-location-footer .e-con-inner > .e-con:last-child h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--hp-sans) !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
}

/* =============================================================
   8B. SIVUN SISÄLLÖN POHJA-PADDING POIS
       Targetoidaan VAIN page-sisältöalue — header/footer säilyy.
   ============================================================= */

/* WordPress page content wrapper — Hello-teeman oletukset pois */
body.page > main > article.page,
body.page > main > article.page > .entry-content,
body.page main.site-main > article,
body.page .site-main > article > .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* HTML-widget — ei omaa marginia/paddingia */
body.page .elementor-widget-html,
body.page .elementor-widget-html .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hello-teeman sivu-wrapper — sisältö alkuun ja loppuun ilman tyhjää */
body.page-template-default .entry-content > p:empty,
body.page-template-default .entry-content > br {
  display: none !important;
}

/* Elementorin oletus-Containerin padding pois SIVUN SISÄLLÖSTÄ.
   VAIN HTML-widget-sivuille — :not([class*="hp-"]) jättää NATIIVIT hp-osiot
   rauhaan, jotta niiden omat paddingit (hp-section-pad, hp-pagehead jne.) toimivat.
   Headerin/footerin containereihin ei kosketa (omat säännöt location-luokkien kautta). */
.entry-content .e-con-boxed.e-flex:not([class*="hp-"]),
.entry-content .e-con.e-flex:not([class*="hp-"]),
.entry-content .e-con.e-flex:not([class*="hp-"]) > .e-con-inner,
.entry-content .e-con-boxed:not([class*="hp-"]) > .e-con-inner,
main .e-con-boxed.e-flex:not([class*="hp-"]),
main .e-con.e-flex:not([class*="hp-"]) > .e-con-inner,
.elementor-page .entry-content .e-con:not([class*="hp-"]),
.elementor-page .entry-content .e-con:not([class*="hp-"]) > .e-con-inner {
  padding: 0 !important;
}

/* =============================================================
   8C. SIVUN OTSIKON PIILOTUS
   Hello-teema ja Elementor renderöivät automaattisesti h1.page-title /
   .entry-title -elementin. v3-design käyttää custom-heroja → piilotetaan.
   ============================================================= */

.page .entry-title,
.page h1.entry-title,
.page .page-title,
.page-header .entry-title,
.elementor-page-title,
h1.entry-title,
.single .entry-title.page-title,
body.page header.entry-header,
body.page .page-header {
  display: none !important;
}

/* Jos haluat näyttää otsikon JOLLAIN tietyllä sivulla, lisää sivulle
   CSS-luokka body-tasolla "show-title" ja CSS sallii sen.
   (lisää tarvittaessa sääntö joka palauttaa display:block) */

/* =============================================================
   8D. BLOGIARKISTO (AJANKOHTAISTA) — Hello-teeman oletukset v3-tyyliin
   Osuu body.archive ja body.blog -sivuille, ei rikoit sivuja
   joilla on omat Elementor-rakenteet.
   ============================================================= */

/* Container - rajaa leveys ja keskitä */
body.archive .site-main,
body.blog .site-main,
body.category .site-main,
body.tag .site-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hello-teemassa archive title on .page-header > .page-title.
   Lisätään eyebrow ::before-pseudoelementtinä page-headerille. */
body.archive .page-header,
body.blog .page-header,
body.category .page-header,
body.tag .page-header {
  text-align: center !important;
  margin: 0 0 3rem 0 !important;
  padding-top: 64px;
}
body.archive .page-header::before,
body.blog .page-header::before,
body.category .page-header::before,
body.tag .page-header::before {
  content: '\2014  AJANKOHTAISTA';
  display: block;
  font-family: var(--hp-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-red);
  text-align: center;
  margin-bottom: 1rem;
}
body.archive .page-header .page-title,
body.blog .page-header .page-title,
body.category .page-header .page-title,
body.tag .page-header .page-title,
body.archive .page-header h1,
body.blog .page-header h1,
body.category .page-header h1,
body.tag .page-header h1 {
  font-family: var(--hp-display) !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Posts — vaakatason split-kortit (kuva vasen, tumma sisältö oikealla).
   Posts ovat .page-content -divin sisällä Hellossa, joten käytetään sitä
   posts-containerina (eikä suoraan site-mainia). */
body.archive .page-content,
body.blog .page-content,
body.category .page-content,
body.tag .page-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.archive .site-main,
body.blog .site-main,
body.category .site-main,
body.tag .site-main {
  display: block;
  padding-top: 0 !important;
}

/* (Page header on jo lohkotasolla, ei tarvitse grid-column-sääntöä) */

/* Yksittäinen artikkeli — split-kortti (kuva | tumma sisältö)
   Käytetään position: absolute -kuvalle vasemmalla, teksti virtaa
   normaalisti oikealla padding-leftin avulla → ei tyhjää välitilaa. */
body.archive article.post,
body.blog article.post,
body.category article.post,
body.tag article.post {
  position: relative;
  background: var(--hp-ink-deep);
  color: #fff;
  overflow: hidden;
  min-height: 380px;
  margin: 0;
  padding: 0 0 0 50%;
  display: block;
}

/* Featured image — vasen puoli absolutella, koko korkeus */
body.archive article.post > a,
body.blog article.post > a,
body.category article.post > a,
body.tag article.post > a {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: block;
  overflow: hidden;
}
body.archive article.post > a > img,
body.blog article.post > a > img,
body.category article.post > a > img,
body.tag article.post > a > img,
body.archive article.post .wp-post-image,
body.blog article.post .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  aspect-ratio: auto;
}

/* Jos käytössä on .post-thumbnail (joissain teemoissa), sama positio */
body.archive article.post .post-thumbnail,
body.blog article.post .post-thumbnail {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  margin: 0;
}
body.archive article.post .post-thumbnail img,
body.blog article.post .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kaikki muu sisältö (h2, p, jne.) — sisäpadding oikealla puolella */
body.archive article.post > *:not(a):not(.post-thumbnail),
body.blog article.post > *:not(a):not(.post-thumbnail),
body.category article.post > *:not(a):not(.post-thumbnail),
body.tag article.post > *:not(a):not(.post-thumbnail) {
  padding-left: clamp(1.5rem, 4vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
}

/* Otsikko — iso, valkoinen, UPPERCASE, padding ylhäältä */
body.archive article.post .entry-title,
body.blog article.post .entry-title {
  font-family: var(--hp-display) !important;
  font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 1rem 0 !important;
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
}
body.archive article.post .entry-title a,
body.blog article.post .entry-title a {
  color: #fff !important;
  text-decoration: none;
  transition: color 0.2s;
}
body.archive article.post .entry-title a:hover,
body.blog article.post .entry-title a:hover {
  color: var(--hp-red) !important;
}

/* Päivämäärä + meta — pieni vaaleampi, marginia ennen */
body.archive article.post .entry-meta,
body.blog article.post .entry-meta {
  font-family: var(--hp-sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
body.archive article.post .entry-meta a,
body.blog article.post .entry-meta a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none;
}

/* Ote — vaalean harmaa teksti */
body.archive article.post .entry-summary,
body.blog article.post .entry-summary,
body.archive article.post .entry-content,
body.blog article.post .entry-content {
  font-family: var(--hp-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85) !important;
  margin: 0;
}
body.archive article.post .entry-summary p,
body.blog article.post .entry-summary p,
body.archive article.post .entry-content p,
body.blog article.post .entry-content p {
  color: rgba(255,255,255,0.85) !important;
}

/* "Lue lisää" — punainen painike, marginia molemmin puolin */
body.archive article.post .read-more,
body.blog article.post .read-more,
body.archive article.post .more-link,
body.blog article.post .more-link,
body.archive article.post .entry-summary > a,
body.blog article.post .entry-summary > a {
  display: inline-block;
  background: var(--hp-red);
  color: #fff !important;
  font-family: var(--hp-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  text-decoration: none;
  margin-top: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  border: 1px solid var(--hp-red);
  transition: background 0.25s ease;
}
body.archive article.post .read-more:hover,
body.blog article.post .read-more:hover,
body.archive article.post .more-link:hover,
body.blog article.post .more-link:hover {
  background: var(--hp-red-deep);
  color: #fff !important;
}

/* Mobiili — pinoutuu allekkain (kuva ylhäällä, sisältö alla) */
@media (max-width: 768px) {
  body.archive article.post,
  body.blog article.post,
  body.category article.post,
  body.tag article.post {
    padding: 0;
    padding-bottom: 2rem;
    min-height: auto;
  }
  body.archive article.post > a,
  body.blog article.post > a,
  body.category article.post > a,
  body.tag article.post > a,
  body.archive article.post .post-thumbnail,
  body.blog article.post .post-thumbnail {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  body.archive article.post .entry-title,
  body.blog article.post .entry-title {
    padding-top: 2rem !important;
  }
}

/* Pagination - alaosa */
body.archive .pagination,
body.blog .pagination,
body.archive .nav-links,
body.blog .nav-links {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4rem 0 64px;
}
body.archive .pagination a,
body.blog .pagination a,
body.archive .nav-links a,
body.blog .nav-links a,
body.archive .pagination .current,
body.blog .pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hp-line);
  color: var(--hp-ink);
  text-decoration: none;
  font-family: var(--hp-sans);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
body.archive .pagination a:hover,
body.blog .pagination a:hover,
body.archive .nav-links a:hover,
body.blog .nav-links a:hover,
body.archive .pagination .current,
body.blog .pagination .current {
  background: var(--hp-red);
  border-color: var(--hp-red);
  color: #fff;
}

/* (Split-kortin mobiili-säännöt on määritetty article.post-osiossa.) */

/* =============================================================
   8E. SINGLE POST (yksittäinen artikkeli) — brändityyli
   ============================================================= */

/* Single post -sivun pääwrapper — keskitä ja rajaa luettava leveys */
body.single-post .site-main,
body.single-post main.site-main {
  max-width: 800px;
  margin: 64px auto;
  padding: 0 24px;
}

/* Featured image yläosaan */
body.single-post .post-thumbnail,
body.single-post .wp-post-image {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Single post -otsikko — kohtuukokoinen, ei jättimäinen */
body.single-post .entry-title {
  font-family: var(--hp-display) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin: 0 0 1rem 0 !important;
  color: var(--hp-ink) !important;
}

/* Päivämäärä ja meta */
body.single-post .entry-meta,
body.single-post .posted-on,
body.single-post .post-meta {
  font-family: var(--hp-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-red);
  margin-bottom: 2rem;
  display: block;
}
body.single-post .entry-meta a {
  color: var(--hp-red) !important;
  text-decoration: none;
}

/* Artikkelin teksti — luettavuus tärkein */
body.single-post .entry-content {
  font-family: var(--hp-sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--hp-ink);
}
body.single-post .entry-content p {
  margin-bottom: 1.5rem;
}
body.single-post .entry-content h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}
body.single-post .entry-content h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.8rem !important;
}
body.single-post .entry-content a {
  color: var(--hp-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.single-post .entry-content a:hover {
  color: var(--hp-red-deep);
}
body.single-post .entry-content img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}
body.single-post .entry-content blockquote {
  border-left: 3px solid var(--hp-red);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: var(--hp-accent-font);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--hp-ink);
}

/* Comment-osio — pieni tausta, ei dominoiva */
body.single-post #comments,
body.single-post .comments-area {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hp-line);
}
body.single-post .comments-title,
body.single-post #reply-title,
body.single-post .comment-reply-title {
  font-family: var(--hp-display) !important;
  font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
  text-transform: uppercase !important;
  margin: 0 0 1.5rem 0 !important;
  letter-spacing: 0.05em !important;
}

/* "Kirjautuneena sisään nimellä..." -teksti */
body.single-post .logged-in-as {
  font-size: 0.85rem;
  color: var(--hp-muted);
  margin-bottom: 1.5rem;
}
body.single-post .logged-in-as a {
  color: var(--hp-ink);
  border-bottom: 1px solid var(--hp-line);
}

/* Kommenttilomakkeen kentät */
body.single-post .comment-form label {
  display: block;
  font-family: var(--hp-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-ink);
  margin-bottom: 0.4rem;
  margin-top: 1rem;
}
body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
  width: 100%;
  font-family: var(--hp-sans);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hp-line);
  border-radius: 0;
  background: #fff;
  color: var(--hp-ink);
  transition: border-color 0.2s;
}
body.single-post .comment-form input:focus,
body.single-post .comment-form textarea:focus {
  outline: 0;
  border-color: var(--hp-red);
}
body.single-post .comment-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Submit-painike */
body.single-post .comment-form .submit,
body.single-post .form-submit input[type="submit"] {
  background-color: var(--hp-red);
  color: #fff;
  border: 1px solid var(--hp-red);
  font-family: var(--hp-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.25s ease;
  margin-top: 1.5rem;
}
body.single-post .comment-form .submit:hover,
body.single-post .form-submit input[type="submit"]:hover {
  background-color: var(--hp-red-deep);
}

/* Yksittäiset kommentit */
body.single-post .comment-list,
body.single-post .comment-list ol {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
body.single-post .comment {
  border-top: 1px solid var(--hp-line);
  padding: 1.5rem 0;
}
body.single-post .comment-author {
  font-family: var(--hp-display);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
body.single-post .comment-meta {
  font-size: 0.75rem;
  color: var(--hp-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
body.single-post .comment-content {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =============================================================
   8F. JÄLLEENMYYJÄT — WP Google Maps -plugin tyylit brand-mukaiseksi
   ============================================================= */

/* Sivun yläosan padding — kun sivu alkaa WP-blockilla (ei HTML-widgetillä) */
body.page .page-content > .wp-block-heading:first-child,
body.page .page-content > h1:first-child,
body.page .page-content > h2:first-child,
body.page .page-content > .wp-block-group:first-child {
  margin-top: 64px !important;
}

/* Jos esimmäinen ei ole heading vaan group/section, lisää padding silti */
body.page main.site-main {
  padding-top: 0;
}
body.page .page-content {
  padding-top: 0;
}

/* Page-otsikko ja intro */
body.page-template-default .page-content > h1:first-child,
body.page-template-default .page-content > h2:first-child,
.page-content > .wp-block-heading:first-of-type {
  font-family: var(--hp-display) !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 0 1rem 0 !important;
  text-align: center;
}

/* Intro-teksti */
.page-content > .wp-block-group:first-of-type p,
.page-content > p:first-of-type {
  text-align: center;
  font-size: 1.05rem;
  color: var(--hp-muted);
  max-width: 60ch;
  margin: 0 auto 2.5rem auto;
}

/* Google Maps -container — brand-mukainen rajaus */
.wpgmza_map {
  border: 1px solid var(--hp-line) !important;
  border-radius: 0 !important;
  margin-bottom: 2rem;
}

/* Hakukenttä + Kartta/Satelliitti -nappulat */
.wpgmza-keywords input,
.wpgmza-address input,
input.wpgmza-address {
  font-family: var(--hp-sans) !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--hp-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--hp-ink) !important;
}
.wpgmza-keywords input:focus,
.wpgmza-address input:focus {
  outline: 0 !important;
  border-color: var(--hp-red) !important;
}

/* Search/Reset -painikkeet */
.wpgmza-search,
.wpgmza-reset,
.wpgmza_filter button,
.wpgmza_sl_search_button {
  background-color: var(--hp-red) !important;
  color: #fff !important;
  border: 1px solid var(--hp-red) !important;
  font-family: var(--hp-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wpgmza-search:hover,
.wpgmza-reset:hover {
  background-color: var(--hp-red-deep) !important;
}

/* Marker listing -grid (jälleenmyyjäkortit) */
.wpgmza_marker_list_class.wpgmza-marker-grid,
.wpgmza_marker_list_class.wpgmza_marker_grid,
[id^="wpgmza_marker_list_"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  margin: 2rem 0 !important;
  width: 100% !important;
}

/* Yksittäinen jälleenmyyjä-kortti — kohdistetaan grid-items */
.wpgmza_marker_list_class > div,
.wpgmza_marker_list_class > tr,
.wpgmza-marker-grid > div,
.wpgmza_marker_list_class .wpgmza_listing,
.wpgmza_marker_list_class [data-wpgmza-marker-id] {
  background: var(--hp-paper) !important;
  border: 1px solid var(--hp-line) !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.wpgmza_marker_list_class > div:hover,
.wpgmza_marker_list_class > tr:hover {
  border-color: var(--hp-red) !important;
  transform: translateY(-3px);
}

/* Kortin sisällön tyylit */
.wpgmza_marker_list_class strong,
.wpgmza_marker_list_class .wpgmza_marker_title,
.wpgmza_marker_list_class .wpgmza-title,
.wpgmza_marker_list_class h3,
.wpgmza_marker_list_class h4 {
  font-family: var(--hp-display) !important;
  font-size: 1.1rem !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: var(--hp-ink) !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.2 !important;
}

/* Marker-kuvake kortissa — pienempi */
.wpgmza_marker_list_class img {
  max-width: 24px !important;
  height: auto !important;
  margin: 0.3rem 0 !important;
}

/* Linkit kortissa */
.wpgmza_marker_list_class a {
  color: var(--hp-red) !important;
  font-family: var(--hp-sans) !important;
  font-size: 0.9rem !important;
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s ease;
}
.wpgmza_marker_list_class a:hover {
  color: var(--hp-red-deep) !important;
  text-decoration: underline;
}

/* Tel-tunnisteet */
.wpgmza_marker_list_class p,
.wpgmza_marker_list_class span,
.wpgmza_marker_list_class div {
  font-family: var(--hp-sans) !important;
  font-size: 0.9rem !important;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Sivutus (pagination) */
.wpgmza-pagination,
.wpgmza_pagination_holder {
  display: flex !important;
  justify-content: center;
  gap: 6px;
  margin: 3rem 0 1rem 0 !important;
}
.wpgmza-pagination a,
.wpgmza-pagination span,
.wpgmza_pagination_holder a,
.wpgmza_pagination_holder span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hp-line) !important;
  background: #fff !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}
.wpgmza-pagination a:hover,
.wpgmza-pagination .current,
.wpgmza-pagination [aria-current="page"],
.wpgmza_pagination_holder a:hover,
.wpgmza_pagination_holder .current {
  background: var(--hp-red) !important;
  border-color: var(--hp-red) !important;
  color: #fff !important;
}

/* "Kartta" / "Satelliitti" -nappulat — Google Mapsin omat */
.gm-style button {
  font-family: var(--hp-sans) !important;
}

/* Mobiili — yksi sarake */
@media (max-width: 600px) {
  .wpgmza_marker_list_class.wpgmza-marker-grid,
  .wpgmza_marker_list_class.wpgmza_marker_grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   9. SAAVUTETTAVUUS + RESPONSIVE
   ============================================================= */

*:focus-visible {
  outline: 2px solid var(--hp-red);
  outline-offset: 2px;
}
::selection {
  background: var(--hp-red);
  color: #ffffff;
}

:target { scroll-margin-top: 100px; }

@media (max-width: 1024px) {
  h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(2.4rem, 7vw, 4.5rem); }
  .elementor-location-footer > .e-con,
  .elementor-location-footer > section,
  .elementor-location-footer .tp-footer {
    padding-top: 36px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 768px) {
  h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(2.2rem, 9vw, 3.5rem); }
  h2, .elementor-heading-title.elementor-size-xl { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .hp-card { padding: 1.5rem; }
  .hp-mantra span { display: inline-block; margin: 0.3rem 0.5rem; }

  /* Header tiivistyy mobiilissa */
  .elementor-location-header > .e-con,
  .elementor-location-header > section,
  .elementor-location-header .tp-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .elementor-location-header .elementor-widget-image img {
    max-height: 36px !important;
  }

  /* Footerin 4 saraketta menevät allekkain */
  .elementor-location-footer .e-con.e-flex {
    flex-direction: column !important;
  }
  .tp-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}
/* =============================================================
   NATIVE-WIDGET BRIDGE  —  lisää TÄMÄ hakkipilke-custom.css:n LOPPUUN
   (Site Settings → Mukautettu CSS). Mahdollistaa että koodisivut
   muutetaan natiiveiksi Elementor-widgeteiksi tyylien säilyessä.
   ============================================================= */

/* ---- Otsikkovärit: voita Elementorin globaali oletusväri (syaani #6ec1e4) ----
   (custom.css:n h1-h6-värissä ei ole !important → Elementorin kit voittaa) */
.elementor-heading-title { color: var(--hp-ink) !important; }
.hp-hero .elementor-heading-title,
.hp-section-dark .elementor-heading-title,
.hp-cta .elementor-heading-title,
.hp-worldmap .elementor-heading-title,
.hp-bigstat .elementor-heading-title { color: #ffffff !important; }
/* em-aksentti pysyy punaisena myös tummilla osioilla */
.elementor-heading-title em,
.hp-hero .elementor-heading-title em,
.hp-section-dark .elementor-heading-title em,
.hp-cta .elementor-heading-title em,
.hp-bigstat .elementor-heading-title em { color: var(--hp-red) !important; }

/* ---- Eyebrow Heading-widgettinä: sisäotsikko perii eyebrow-tyylin ---- */
.hp-eyebrow .elementor-heading-title {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  display: inline !important;
}

/* ---- Nappiriviä (2+ nappia vierekkäin, keskitetty) ---- */
.hp-btnrow > .e-con-inner { display: contents; }
.hp-btnrow {
  display: flex !important;
  flex-direction: row !important;   /* Elementor-container on oletuksena column ‚Üí napit pinoutuisivat */
  gap: 16px !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.hp-btnrow.hp-btnrow--left { justify-content: flex-start; }
/* napin widget-wrapperi ei venytä */
.hp-btnrow .elementor-widget-button { width: auto; }

/* ---- Sarakkeet CSS-gridillä (versioriippumaton, ei Elementor-flexsäätöjä) ---- */
.hp-grid-2 > .e-con-inner,
.hp-grid-3 > .e-con-inner,
.hp-grid-4 > .e-con-inner,
.hp-grid-2-1 > .e-con-inner { display: contents; }

.hp-grid-2   { display: grid; grid-template-columns: 1fr 1fr;        gap: 48px; }
.hp-grid-2-1 { display: grid; grid-template-columns: 1.1fr 0.9fr;    gap: 48px; align-items: center; }
.hp-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 1024px) {
  .hp-grid-3, .hp-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hp-grid-2, .hp-grid-2-1, .hp-grid-3, .hp-grid-4 { grid-template-columns: 1fr; }
}

/* ---- Keskitetty osio-intro ---- */
.hp-center { text-align: center; }
.hp-center .hp-eyebrow { justify-content: center; }

/* =============================================================
   FULL-BLEED OSIOT + HERO-VIDEO + PADDINGIN HALLINTA
   (natiivisivut; ei kosketa header/footer-templaatteihin)
   ============================================================= */

/* HERO — DOM: .hp-hero > .e-con-inner > .elementor-background-video-container > video
   Video on innerin SISÄLLÄ → kun inner boksataan 1240px, video jää laatikkoon.
   Ratkaisu: hero-inner TÄYSLEVEÄ → video peittää koko heron. Teksti keskitetään
   max-widthillä (hp-hero hoitaa h1/p), EI boksaamalla inneriä. */
.hp-hero > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 24px !important;       /* vain vaakagutter; pystypadding tulee herosta */
  position: static !important;      /* EI positioitu → video viittaa HEROON → peittää koko korkeuden */
}
/* Taustavideo-säiliö peittää koko inner-alueen (= koko hero) */
.hp-hero > *:not(.e-con-inner),
.hp-hero .elementor-background-video-container,
.hp-hero .elementor-background-video-embed,
.hp-hero .elementor-background-video-hosted {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 0 !important;
}
.hp-hero .elementor-background-video-hosted,
.hp-hero .elementor-background-video-container video,
.hp-hero .elementor-background-video-embed iframe,
.hp-hero video,
.hp-hero iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;      /* kumoaa Elementorin keskitys-offsetin (video oli @left-607) */
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;    /* Elementor asettaa negatiivisen margin-leftin ‚Üí nollataan */
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
/* Sisältö (eyebrow, otsikko, teksti, napit) videon PÄÄLLE — ei video-säiliö */
.hp-hero > .e-con-inner > *:not(.elementor-background-video-container):not(.elementor-background-video-embed) {
  position: relative !important;
  z-index: 2 !important;
}

/* Osiot reunasta reunaan (oma tausta), ilman Elementorin oletus-sivupaddingia */
.hp-hero, .hp-features, .hp-bigstat, .hp-products, .hp-news, .hp-quote,
.hp-cta, .hp-section, .hp-section-dark, .hp-worldmap, .hp-split,
.hp-contact, .hp-pagehead {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Osioiden sisältö keskitetään 1240px:ään + 24px gutter
   (split & gridit ovat full → eivät tässä listassa; HERO hoidetaan erikseen
   yllä — sen inner on TÄYSLEVEÄ jotta taustavideo peittää koko alueen) */
.hp-section > .e-con-inner,
.hp-features > .e-con-inner,
.hp-bigstat > .e-con-inner,
.hp-products > .e-con-inner,
.hp-news > .e-con-inner,
.hp-quote > .e-con-inner,
.hp-cta > .e-con-inner,
.hp-section-dark > .e-con-inner,
.hp-worldmap > .e-con-inner,
.hp-contact > .e-con-inner,
.hp-pagehead > .e-con-inner {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px !important;   /* pystypadding NOLLAAN, 24px gutter sivuille */
}

/* Keskitetyn osio-intron leipäteksti luettavan levyiseksi (ei koko 1240px) */
.hp-center > .e-con-inner > .elementor-widget-text-editor,
.hp-center > .e-con-inner > .elementor-widget-text-editor p {
  max-width: 64ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sisemmät rakennecontainerit (gridit, sarakeryhmät, napit, split):
   nollaa Elementorin oletuspadding KOKONAAN. Ei kosketa kortteihin
   (hp-card / hp-product / hp-feature / hp-split__text) eikä osioihin. */
.hp-grid-2, .hp-grid-2-1, .hp-grid-3, .hp-grid-4, .hp-grid-features,
.hp-sectionhead, .hp-center, .hp-btnrow, .hp-split, .hp-split__image,
.hp-grid-2 > .e-con-inner, .hp-grid-2-1 > .e-con-inner,
.hp-grid-3 > .e-con-inner, .hp-grid-4 > .e-con-inner,
.hp-grid-features > .e-con-inner, .hp-sectionhead > .e-con-inner,
.hp-btnrow > .e-con-inner,
.hp-split > .e-con-inner, .hp-split__image > .e-con-inner,
.hp-sectionhead > .e-con-inner > .e-con,
.hp-grid-2-1 > .e-con-inner > .e-con {
  padding: 0 !important;
}

/* Ei pystysuuntaisia välejä osioiden VÄLIIN (kullakin oma padding) */
.hp-hero, .hp-features, .hp-bigstat, .hp-products, .hp-news, .hp-quote,
.hp-cta, .hp-section, .hp-section-dark, .hp-worldmap, .hp-split,
.hp-mantra, .hp-yellow-strip {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =============================================================
   YLEINEN PADDING-NORMALISOINTI — sivun sisältö (EI header/footer).
   Poistaa Elementorin oletuspaddingit jotka aiheuttavat välejä ja sisennyksiä,
   niin ettei tarvitse korjata yksittäisiä elementtejä (.elementor-element-XXXX) käsin.
   Osioiden omat paddingit (hp-cta, hp-section...) säilyvät, koska ne tulevat
   hp-luokista. Kortit (hp-card/product/feature) säilyttävät paddinginsa.
   ============================================================= */
/* Kaikki inner-wrapperit: ei Elementorin pystypaddingia */
.elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Sisemmät containerit joilla EI ole hp-luokkaa (rakenneryhmät, esim. eyebrow+otsikko
   -pino): nollaa padding kokonaan. Osiot ja kortit ovat hp-luokkaisia ‚Üí ei osu niihin. */
.elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con .e-con:not([class*="hp-"]) {
  padding: 0 !important;
}

/* =============================================================
   ETUSIVUN OSIO-LAYOUTIT (native-widget-versiot)
   ============================================================= */

/* Osio-otsikkorivi: vasemmalla eyebrow+otsikko, oikealla nappi */
.hp-sectionhead > .e-con-inner { display: contents; }
.hp-sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* FEATURES — 4 saraketta, ei väliä (border-right erottaa) */
.hp-grid-features > .e-con-inner { display: contents; }
.hp-grid-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 1024px) { .hp-grid-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .hp-grid-features { grid-template-columns: 1fr; } }

/* SPLIT — hp-split on jo grid (custom.css); litistä sisäwrapper */
.hp-split > .e-con-inner { display: contents; }

/* Kuva-widgetin venytys täyttämään kuvasäiliön (split / product / news) */
.hp-split__image .elementor-widget-image,
.hp-split__image .elementor-widget-image .elementor-widget-container,
.hp-split__image .elementor-widget-image a,
.hp-product__image .elementor-widget-image,
.hp-product__image .elementor-widget-image .elementor-widget-container,
.hp-news__image .elementor-widget-image,
.hp-news__image .elementor-widget-image .elementor-widget-container {
  height: 100%;
  display: block;
}

/* hp-product / hp-news kortit ovat Containereita → litistä niiden sisäwrapper
   jotta __image/__cat/__link -lapset ovat suoria lapsia (CSS:n padding-säännöt) */
.hp-product > .e-con-inner,
.hp-news__item > .e-con-inner { display: contents; }

/* Tuotekortin "Tekniset tiedot →" — Button-widget näyttää tekstilinkiltä
   (globaali .elementor-button tekisi siitä punaisen laatikon) */
.hp-product__link .elementor-button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--hp-red) !important;
  font-family: var(--hp-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
.hp-product__link .elementor-button:hover { background: transparent !important; }

/* Varmistus: jos Button-widgetin wrapperiin jää vahingossa hp-btn,
   älä maalaa wrapperia raaka-napiksi (sisäinen .elementor-button hoitaa tyylin) */
.elementor-widget-button.hp-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* =============================================================
   HERON & BIGSTATIN VIIMEISTELY (havaitut asettelubugit)
   ============================================================= */

/* 1) Hero-eyebrow keskelle JA ei rivittymistä (hero-otsikon max-width:24ch
   rajoitti myös eyebrow'ta → EST-teksti katkesi monelle riville) */
.hp-hero .hp-eyebrow {
  display: flex !important;
  justify-content: center !important;
  text-align: center;
}
.hp-hero .hp-eyebrow .elementor-heading-title,
.hp-hero .hp-eyebrow h6 {
  max-width: none !important;
}

/* 2) Hero-tummennus: gradientti SUORAAN video-säiliön päälle (luotettavin, koska
   video on .e-con-innerin sisällä → pelkkä .hp-hero::after voi jäädä videon taakse).
   Säiliön ::after on aina videon päällä, sisällön (z-index 2) alla. */
.hp-hero .elementor-background-video-container::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg,
              rgba(0,0,0,0.45) 0%,
              rgba(0,0,0,0.55) 45%,
              rgba(0,0,0,0.8) 100%) !important;
  pointer-events: none !important;
}
/* Varmistus myös heron omalla ::after:lla */
.hp-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg,
              rgba(0,0,0,0.35) 0%,
              rgba(0,0,0,0.45) 50%,
              rgba(0,0,0,0.7) 100%) !important;
  pointer-events: none !important;
}

/* 3) Bigstat "40+" — '+' tiiviiksi yläindeksiksi (oli irrallaan ylhäällä,
   koska inline vertical-align:top + valtava line-height nosti sen rivilaatikon ylös) */
.hp-bigstat__num sup,
.hp-bigstat__num sub {
  font-size: 0.5em !important;
  vertical-align: baseline !important;
  position: relative !important;
  top: -0.85em !important;
  line-height: 0 !important;
}

/* =============================================================
   SIVUOTSIKKO (page header) + YHTEYS/LOMAKE-LAYOUT (tarjouspyyntö ym.)
   ============================================================= */
/* Tumma sivuotsikko-osio: väljä padding, keskitetty */
.hp-pagehead {
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem) !important;
  text-align: center;
}
.hp-pagehead .hp-eyebrow { display: flex; justify-content: center; }
.hp-pagehead p { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* hp-contact__grid on jo grid (custom.css) → litistä native-inner jotta
   sarakkeet (info | lomake) ovat suoria grid-itemejä */
.hp-contact__grid > .e-con-inner { display: contents; }

/* Tarjous/yhteys: estä sarakkeiden ja lomakkeen ylivuoto reunan yli */
.hp-contact, .hp-contact > .e-con-inner, .hp-contact__grid,
.hp-contact__info, .hp-form { max-width: 100% !important; min-width: 0 !important; }
.hp-contact__grid { overflow: hidden; }
.hp-form, .hp-form * { max-width: 100%; box-sizing: border-box; }
/* grid-itemit eivät saa ylittää saraketta (min-width:0 sallii kutistumisen) */
.hp-contact__info, .hp-form { overflow-wrap: anywhere; }

/* =============================================================
   GRIDIT EIVÄT LEVIÄ YLI 1240px
   Elementorin "full width" -container puhkaisee koko ruudun levyiseksi
   (negatiiviset marginaalit) → pakotetaan grid pysymään 1240px:ssä keskitettynä.
   ============================================================= */
.hp-grid-2, .hp-grid-2-1, .hp-grid-3, .hp-grid-4, .hp-grid-features {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
}

/* =============================================================
   VÄLJEMPI RYTMI (sivut joille tarvitaan ilmaa, esim. tarjouspyyntö)
   ============================================================= */
/* Väljä pystypadding */
.hp-section-pad {
  padding-top: clamp(5rem, 9vw, 8rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}
/* Lisarytmia keskitetyn osion sisaan */
.hp-section-pad .hp-eyebrow { margin-top: 2.5rem; }
.hp-section-pad .hp-btnrow { margin-top: 3rem; }
/* Info-kortit luonnollisella korkeudella (ei stretch → ei tyhjää alalaitaa) + väljä gap */
.hp-section-pad .hp-grid-3,
.hp-cards .hp-grid-3 { align-items: start; gap: 30px; }
/* Kortin sisäinen rytmi: otsikon ja tekstin väli */
.hp-card > .e-con-inner > .elementor-widget-heading,
.hp-card .elementor-widget-heading { margin-bottom: 0.4rem; }
.hp-card .elementor-widget-text-editor + .elementor-widget-heading { margin-top: 1.2rem; }

/* =============================================================
   OTA YHTEYTTÄ -sivun lisät
   ============================================================= */
/* Kontaktigridi: estä full-width breakout + litistä inner (info | lomake) */
.hp-contact__grid > .e-con-inner { display: contents; }
.hp-contact__grid {
  max-width: 1240px !important;
  margin-left: auto !important; margin-right: auto !important;
  left: auto !important; right: auto !important;
}
/* Kapeampi 2-korttinen grid (varaosat/toimitukset) */
.hp-grid-narrow { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }

/* Tiimikortit (kuva 1:1 + nimi + titteli) */
.hp-team { text-align: center; }
.hp-team__photo { aspect-ratio: 1/1; overflow: hidden; background: var(--hp-paper-2); margin-bottom: 1rem; }
.hp-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-team__photo .elementor-widget-container,
.hp-team__photo a { height: 100%; display: block; }
.hp-team__role .elementor-heading-title,
.hp-team__role {
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--hp-red) !important;
  margin-top: 0.3rem;
}

/* =============================================================
   PYSTYRYTMI — väli osioiden lohkojen väliin (Elementor flex-gap on 0)
   Tämä antaa "ilmaa" otsikoiden, korttien, lomakkeen ja nappien väliin.
   ============================================================= */
/* Väli osion sisäisten lohkojen väliin (otsikko → kortit/grid → nappi) */
.hp-section > .e-con-inner,
.hp-section-pad > .e-con-inner,
.hp-contact > .e-con-inner,
.hp-pagehead > .e-con-inner { row-gap: clamp(1.75rem, 3.5vw, 3rem); }

/* Korttien sisäinen rytmi (eyebrow → otsikko → teksti) */
.hp-card > .e-con-inner,
.hp-contact__info > .e-con-inner,
.hp-form > .e-con-inner { row-gap: 0.75rem; }

/* Hieman reilumpi padding boksien sisään */
.hp-card { padding: clamp(2rem, 3vw, 2.75rem) !important; }

/* Korttien väli gridissä reilummaksi */
.hp-grid-2, .hp-grid-2 .hp-card { gap: 40px; }
.hp-grid-narrow { gap: 40px; }

/* Tiimikorttien väli + alarivin väli */
.hp-grid-3 { row-gap: 48px; }

/* =============================================================
   LISÄÄ YLÄ/ALAPADDINGIA: sivuotsikko (tumma) + lomakeboksi
   ============================================================= */
/* Tumma sivuotsikko: reilu ylä/alapadding (sisältö ei kiinni reunoissa) */
.hp-pagehead {
  padding-top: clamp(4.5rem, 8vw, 7.5rem) !important;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem) !important;
}
/* Lomakeboksi: reilu padding sisään joka reunaan */
.hp-form {
  padding: clamp(2.5rem, 4vw, 4rem) !important;
}
/* Yhteystieto-sarakkeen yläreunaan hieman tilaa (linjaan lomakeboksin kanssa) */
.hp-contact__info { padding-top: 0.5rem; }

/* =============================================================
   YRITYS-sivun lisät
   ============================================================= */
/* Kapea tekstipalsta (tarina, statit) */
.hp-narrow > .e-con-inner { max-width: 900px !important; }
/* Statit keskitettyinä */
.hp-stat { align-items: center; text-align: center; }
.hp-stat__num sup {
  font-size: 0.5em !important;
  vertical-align: baseline !important;
  position: relative !important;
  top: -0.55em !important;
  line-height: 0 !important;
}
/* YouTube/video-saareke: 16:9 kehys */
.hp-videoframe { max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; }
.hp-videoframe iframe { width: 100%; height: 100%; border: 0; display: block; }/* End custom CSS */