/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap');

/* CSS Variables */
:root {
  --primary-color: #73911a;
  --secondary-color: #bacf00;
  --text-color: #262527;
  --btn-color: #636362;
  --btn-hover: #bacf00;
  
  --background-color: #ffffff;
  --border-color: #e0e0e0;
  --accent-color: #73911a;
  
  --font-heading: 'Lato', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
  --border-radius: 0;
  
  --spacing-6: 4rem;    /* 64px */
  --spacing-7: 5rem;    /* 80px */
  --spacing-8: 6rem;    /* 96px */
  --spacing-9: 8rem;    /* 128px */
  
  scroll-behavior: smooth;
}

/* =========================
   GLOBAL FONT OPTIMIZATION
   ========================= */

/* 1) Rendering defaults */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Helps keep heading/body metrics stable */
  font-synthesis: none;
}

/* 2) Use for all normal text elements */
body, p, li, blockquote, figcaption,
label, input, select, textarea, button, a, small,
h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Improve typographic quality without changing your layout */
  font-kerning: normal;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-wrap: pretty;         /* modern browsers: reduce awkward line breaks */
  hanging-punctuation: first;/* nicer punctuation hanging rules */
}

/* 3) Base font stack (strong fallback coverage) */
:root {
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --font-heading: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* 4) Ensure headings and body use the intended family consistently */
body { font-family: var(--font-body); }

/* Optional: if you want headings to always be Lato */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: inherit; /* keep your existing weights */
}

/* 5) Controls + form text */
input, select, textarea, button {
  font-family: var(--font-body);
  font-smoothing: antialiased; /* harmless where unsupported */
}

/* 6) Hyphenation / line breaking consistency */
p, .article-content, .article-section p, .lead {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  overflow-wrap: break-word;
  word-break: normal;
}

/* Avoid breaking words oddly in UI elements */
.navbar .nav-link, .btn, button, .nav-link, .link-modern, .btn-link-modern, .link-external,
.offcanvas-body .nav-link, .footer a {
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: nowrap; /* keeps buttons/menus from creating micro-wrapping */
}

/* 7) Performance-friendly: avoid unnecessary font weight synthesis */
* {
  font-weight: normal; /* only if your site relies on explicit weights; otherwise remove this line */
}

/* If the above line breaks your styling, delete it.
   Better approach: do NOT force font-weight globally. */

/* =========================
   END FONT OPTIMIZATION
   ========================= */

/* Spacing System - ViaDia Uusikaupunki */
/* Bootstrap Breakpoints: xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px */

/* Padding Utilities */
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
.py-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
.py-9 { padding-top: var(--spacing-9) !important; padding-bottom: var(--spacing-9) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pt-7 { padding-top: var(--spacing-7) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.pb-7 { padding-bottom: var(--spacing-7) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }

@media (min-width: 576px) {
	.py-sm-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
	.py-sm-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
	.py-sm-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
	.pt-sm-6 { padding-top: var(--spacing-6) !important; }
	.pt-sm-7 { padding-top: var(--spacing-7) !important; }
	.pb-sm-6 { padding-bottom: var(--spacing-6) !important; }
	.pb-sm-7 { padding-bottom: var(--spacing-7) !important; }
}
@media (min-width: 768px) {
	.py-md-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
	.py-md-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
	.py-md-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
	.pt-md-6 { padding-top: var(--spacing-6) !important; }
	.pt-md-7 { padding-top: var(--spacing-7) !important; }
	.pb-md-6 { padding-bottom: var(--spacing-6) !important; }
	.pb-md-7 { padding-bottom: var(--spacing-7) !important; }
}
@media (min-width: 992px) {
	.py-lg-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
	.py-lg-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
	.py-lg-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
	.py-lg-9 { padding-top: var(--spacing-9) !important; padding-bottom: var(--spacing-9) !important; }
	.pt-lg-6 { padding-top: var(--spacing-6) !important; }
	.pt-lg-7 { padding-top: var(--spacing-7) !important; }
	.pt-lg-8 { padding-top: var(--spacing-8) !important; }
	.pb-lg-6 { padding-bottom: var(--spacing-6) !important; }
	.pb-lg-7 { padding-bottom: var(--spacing-7) !important; }
	.pb-lg-8 { padding-bottom: var(--spacing-8) !important; }
}
@media (min-width: 1200px) {
	.py-xl-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
	.py-xl-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
	.py-xl-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
	.pt-xl-6 { padding-top: var(--spacing-6) !important; }
	.pt-xl-7 { padding-top: var(--spacing-7) !important; }
	.pb-xl-6 { padding-bottom: var(--spacing-6) !important; }
	.pb-xl-7 { padding-bottom: var(--spacing-7) !important; }
}
@media (min-width: 1400px) {
	.py-xxl-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
	.py-xxl-7 { padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important; }
	.py-xxl-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
}

/* Margin Utilities */
.my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
.my-7 { margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important; }
.my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-7 { margin-top: var(--spacing-7) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-7 { margin-bottom: var(--spacing-7) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }

@media (min-width: 992px) {
	.my-lg-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
	.my-lg-7 { margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important; }
	.mt-lg-6 { margin-top: var(--spacing-6) !important; }
	.mt-lg-7 { margin-top: var(--spacing-7) !important; }
	.mb-lg-6 { margin-bottom: var(--spacing-6) !important; }
	.mb-lg-7 { margin-bottom: var(--spacing-7) !important; }
}

/* Section Spacing */
.section-padding { padding: 3rem 0; }
@media (min-width: 768px) { .section-padding { padding: 4rem 0; } }
@media (min-width: 992px) { .section-padding { padding: 5rem 0; } }
@media (min-width: 1200px) { .section-padding { padding: 6rem 0; } }

.section-padding-lg { padding: 4rem 0; }
@media (min-width: 768px) { .section-padding-lg { padding: 5rem 0; } }
@media (min-width: 992px) { .section-padding-lg { padding: 6rem 0; } }
@media (min-width: 1200px) { .section-padding-lg { padding: 8rem 0; } }

.section-padding-sm { padding: 2rem 0; }
@media (min-width: 768px) { .section-padding-sm { padding: 3rem 0; } }
@media (min-width: 991px) { .section-padding-sm { padding: 4rem 0; } }

/* Section Header */
.section-header { margin-bottom: 2rem; }
@media (min-width: 768px) { .section-header { margin-bottom: 2.5rem; } }
@media (min-width: 992px) { .section-header { margin-bottom: 3rem; } }
@media (min-width: 1200px) { .section-header { margin-bottom: 4rem; } }

/* Content Spacing */
.content-block { margin-bottom: 2rem; }
@media (min-width: 768px) { .content-block { margin-bottom: 2.5rem; } }
@media (min-width: 992px) { .content-block { margin-bottom: 3rem; } }

.content-divider { margin: 2rem 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
@media (min-width: 768px) { .content-divider { margin: 2.5rem 0; } }
@media (min-width: 992px) { .content-divider { margin: 3rem 0; } }

/* Hero Section Spacing */
.hero-section { min-height: 70vh; }
@media (min-width: 768px) { .hero-section { min-height: 80vh; } }
@media (min-width: 992px) { .hero-section { min-height: 90vh; } }

.subpage-hero { min-height: 40vh; padding-top: 80px; }
@media (min-width: 768px) { .subpage-hero { min-height: 45vh; padding-top: 100px; } }
@media (min-width: 992px) { .subpage-hero { min-height: 50vh; padding-top: 120px; } }

/* Card Grid Spacing */
.cards-grid { margin-bottom: 1rem; }
@media (min-width: 768px) { .cards-grid { margin-bottom: 1.5rem; } }
@media (min-width: 992px) { .cards-grid { margin-bottom: 2rem; } }

/* CTA Section Spacing */
.cta-section { padding: 3rem 0; }
@media (min-width: 768px) { .cta-section { padding: 4rem 0; } }
@media (min-width: 992px) { .cta-section { padding: 5rem 0; } }
@media (min-width: 1200px) { .cta-section { padding: 6rem 0; } }

/* Services Section Spacing */
.services-section { padding: 3rem 0; }
@media (min-width: 768px) { .services-section { padding: 4rem 0; } }
@media (min-width: 992px) { .services-section { padding: 5rem 0; } }
@media (min-width: 1200px) { .services-section { padding: 6rem 0; } }

/* Contact Section Spacing */
#yhteystiedot { padding: 3rem 0; }
@media (min-width: 768px) { #yhteystiedot { padding: 4rem 0; } }
@media (min-width: 992px) { #yhteystiedot { padding: 5rem 0; } }
@media (min-width: 1200px) { #yhteystiedot { padding: 6rem 0; } }

.yhteystiedot-row { margin-bottom: 1rem; }
@media (min-width: 576px) { .yhteystiedot-row { margin-bottom: 1.5rem; } }
@media (min-width: 768px) { .yhteystiedot-row { margin-bottom: 2rem; } }
.yhteystiedot-row:last-child { margin-bottom: 0; }
@media (min-width: 576px) and (max-width: 767.98px) { .team-cards-stack { gap: 1.5rem; } }

/* Gap Utilities */
.gap-6 { gap: var(--spacing-6) !important; }
.gap-7 { gap: var(--spacing-7) !important; }
@media (min-width: 992px) {
	.gap-lg-6 { gap: var(--spacing-6) !important; }
	.gap-lg-7 { gap: var(--spacing-7) !important; }
}

/* Global Resets */
.card, .btn, .btn-custom, .btn-outline-light, .btn-outline-primary, .btn-outline-secondary, .btn-primary, .btn-secondary, .service-card, .value-card, .offcanvas-contact, .form-control, .form-select, .input-group-text, .alert, .badge, .dropdown-menu, .modal-content, .modal-header, .toast, .accordion-item, .list-group-item {
  border-radius: var(--border-radius) !important;
}

/* Base Typography */
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.8835rem + 0.2524vw, 1.375rem);
  color: var(--text-color);
  background-color: var(--background-color);
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--primary-color);
  line-height: 1.2;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(1.555rem, 1.0145rem + 1.1717vw, 2.6856rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: clamp(1.2963rem, 0.8588rem + 0.9476vw, 2.1481rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
h3 { font-size: clamp(1.08rem, 0.7323rem + 0.7534vw, 1.7188rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: clamp(0.9rem, 0.6165rem + 0.6147vw, 1.375rem); font-weight: 700; line-height: 1.4; }
h5 { font-size: clamp(1rem, 0.8835rem + 0.2524vw, 1.375rem); font-weight: 600; line-height: 1.5; }
h6 { font-size: clamp(0.8331rem, 0.7166rem + 0.2524vw, 1.1rem); font-weight: 600; line-height: 1.5; }

p {
  font-size: clamp(1rem, 0.8835rem + 0.2524vw, 1.375rem);
  line-height: 1.7;
  word-spacing: 0.05em;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.lead { font-size: clamp(1.2rem, 0.9311rem + 0.5825vw, 1.7188rem); line-height: 1.7; font-weight: 400; }
.text-large { font-size: clamp(1.1rem, 0.9719rem + 0.2777vw, 1.5125rem); line-height: 1.7; }
.text-small, small { font-size: clamp(0.9rem, 0.7952rem + 0.2272vw, 1.2375rem); line-height: 1.6; }
.text-xs { font-size: clamp(0.8331rem, 0.7166rem + 0.2524vw, 1.1rem); line-height: 1.5; }

/* Article Content */
.article-content {
  line-height: 1.9;
  color: var(--text-color);
  max-width: 75ch;
  margin: auto;
}
.article-header { margin-bottom: 2.5rem; }
.article-section { margin-bottom: 2.5rem; }
.article-section:last-child { margin-bottom: 0; }
.article-section h3 {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1.25rem; color: var(--primary-color);
}
.article-section h4 {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; color: var(--primary-color);
}
.article-section p { margin-bottom: 1.25rem; color: var(--text-color); word-break: break-word; overflow-wrap: break-word; }
.article-section p:last-child { margin-bottom: 0; }
.article-section p strong { color: var(--text-color); font-weight: 600; }
.article-section a {
  color: var(--primary-color); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.article-section a:hover { color: var(--secondary-color); text-decoration-thickness: 2px; }
.article-section:first-of-type p:first-child::first-letter {
  font-size: 3.5rem; font-weight: 900; float: left; line-height: 1; margin-right: 0.75rem; margin-top: 0.25rem; color: var(--primary-color); font-family: var(--font-heading);
}

/* Article Content Variants */
.article-content--divided .article-section { padding-bottom: 2.5rem; border-bottom: 1px solid rgba(115, 145, 26, 0.15); }
.article-content--divided .article-section:last-child { padding-bottom: 0; border-bottom: none; }
.article-header--centered { text-align: center; }
.article-content--no-dropcap .article-section:first-of-type p:first-child::first-letter {
  font-size: inherit; font-weight: inherit; float: none; margin: 0; color: inherit;
}

/* Article Content Responsive */
@media (max-width: 767.98px) {
  .article-content { line-height: 1.8; }
  .article-header { margin-bottom: 2rem; }
  .article-section { margin-bottom: 2rem; }
  .article-section h3 { letter-spacing: 2px; }
  .article-section:first-of-type p:first-child::first-letter { font-size: 2.75rem; }
  .article-content--divided .article-section { padding-bottom: 2rem; }
}
@media (max-width: 375px) { .article-content { line-height: 1.75; } }
@media (min-width: 1200px) { .article-content { max-width: 70ch; } }

/* Site Header */
.site-header {
  position: sticky; top: 0; z-index: 1030; background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: box-shadow;
}
.topbar {
  background-color: var(--primary-color); color: white; font-size: clamp(0.8rem, 0.7rem + 0.2vw, 0.9rem);
  padding: 8px 0; max-height: 100px; overflow: hidden; opacity: 1; visibility: visible;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
  will-change: max-height, padding, opacity;
}
.topbar-contact, .topbar-hours { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
.topbar-link { color: white; text-decoration: none; transition: opacity 0.3s ease; display: inline-flex; align-items: center; }
.topbar-link:hover { color: white; opacity: 0.85; }
.topbar-link i, .topbar-hours i { font-size: 0.9em; }

.navbar {
  background-color: white !important; box-shadow: none; padding: 12px 0; transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: padding;
}
.navbar-brand { display: flex; align-items: center; text-decoration: none; transition: opacity 0.3s ease; }
.navbar-brand:hover { opacity: 0.85; }
.navbar-logo { height: 50px; width: auto; max-width: 200px; object-fit: contain; }
.navbar .nav-link {
  font-family: var(--font-body); font-size: clamp(0.9rem, 0.7952rem + 0.2272vw, 1.2375rem); font-weight: 600; color: var(--text-color) !important;
  transition: color 0.3s ease;
}
.navbar .nav-link:hover { color: var(--primary-color) !important; opacity: 1; }
.navbar-toggler { border-radius: var(--border-radius) !important; border: none !important; box-shadow: none !important; outline: none !important; background: transparent; }
.navbar-toggler .bi-list { font-size: clamp(1.375rem, 1.1068rem + 0.5813vw, 1.75rem); color: var(--text-color); transition: transform 0.3s ease, color 0.3s ease; }
.navbar-toggler:hover .bi-list { transform: scale(1.1); color: var(--primary-color); }

.site-header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
.site-header.scrolled .topbar { max-height: 0; padding: 0; opacity: 0; visibility: hidden; }
.site-header.scrolled .topbar-contact, .site-header.scrolled .topbar-hours { transform: translateY(-10px); opacity: 0; }
.site-header.scrolled .navbar { padding: 10px 0; }
.site-header.scrolled .navbar-logo { height: 40px; }

/* Hero Section */
.hero-section {
  position: relative; color: white; padding: 100px 0; min-height: 80vh;
  display: flex; align-items: center; overflow: hidden;
}
.hero-bg-picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(51,51,51,0.5); }
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-main-word {
  font-family: var(--font-heading); font-size: clamp(4.5rem, 12vw, 10rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: white; margin-bottom: 0.5rem; text-transform: uppercase; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.hero-sub-word {
  font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 2.5rem); font-weight: 600; color: white; margin-bottom: 0; letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Hero Background - Reduced to 3 key sizes */
.hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0f1729; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 0;
}
/* Mobile - xs (< 576px) */
.hero-bg { background-image: url('https://images.unsplash.com/photo-1499946981954-e7f4b234d7fa?w=600&q=80&auto=format'); }
/* Tablet - md (≥ 768px) */
@media (min-width: 768px) { .hero-bg { background-image: url('https://images.unsplash.com/photo-1499946981954-e7f4b234d7fa?w=1000&q=80&auto=format'); } }
/* Desktop - lg (≥ 992px) */
@media (min-width: 992px) { .hero-bg { background-image: url('https://images.unsplash.com/photo-1499946981954-e7f4b234d7fa?w=1400&q=80&auto=format'); } }

/* Subpage Hero */
.subpage-hero {
  position: relative; color: white; padding: 80px 0; min-height: 40vh;
  display: flex; align-items: center; overflow: hidden;
}
.subpage-hero .hero-bg-picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.subpage-hero .hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.subpage-hero .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(38, 37, 39, 0.7); }
.subpage-hero .hero-content { position: relative; z-index: 2; width: 100%; }
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6,
.subpage-hero h1, .subpage-hero h2, .subpage-hero h3, .subpage-hero h4, .subpage-hero h5, .subpage-hero h6 { color: white; }

/* Breadcrumb */
.subpage-hero .breadcrumb { background: none; padding: 0; margin-bottom: 1rem; align-items: center; }
.subpage-hero .breadcrumb-item { font-size: 0.9rem; display: flex; align-items: center; }
.subpage-hero .breadcrumb-item a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; }
.subpage-hero .breadcrumb-item a:hover { color: var(--secondary-color); }
.subpage-hero .breadcrumb-item.active { color: rgba(255, 255, 255, 0.6); }
.subpage-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; }

/* Subpage Hero BG Base */
.subpage-hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #262527; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 0;
}

/* ABOUT PAGE HERO BACKGROUND */
/* Mobile - xs (< 576px) */ .subpage-hero-bg.hero-about { background-image: url('https://images.unsplash.com/photo-1588964895597-cfccd6e2dbf9?w=600&q=80&auto=format'); }
/* Tablet - md (≥ 768px) */ @media (min-width: 768px) { .subpage-hero-bg.hero-about { background-image: url('https://images.unsplash.com/photo-1588964895597-cfccd6e2dbf9?w=1000&q=80&auto=format'); } }
/* Desktop - lg (≥ 992px) */ @media (min-width: 992px) { .subpage-hero-bg.hero-about { background-image: url('https://images.unsplash.com/photo-1588964895597-cfccd6e2dbf9?w=1400&q=80&auto=format'); } }

/* CONTACT PAGE HERO BACKGROUND */
/* Mobile - xs (< 576px) */ .subpage-hero-bg.hero-contact { background-image: url('https://images.unsplash.com/photo-1557329610-144776c06d02?w=600&q=80&auto=format'); }
/* Tablet - md (≥ 768px) */ @media (min-width: 768px) { .subpage-hero-bg.hero-contact { background-image: url('https://images.unsplash.com/photo-1557329610-144776c06d02?w=1000&q=80&auto=format'); } }
/* Desktop - lg (≥ 992px) */ @media (min-width: 992px) { .subpage-hero-bg.hero-contact { background-image: url('https://images.unsplash.com/photo-1557329610-144776c06d02?w=1400&q=80&auto=format'); } }

/* Services Section */
.services-section { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); position: relative; overflow: hidden; }
.py-lg-6 { padding: 5rem 0 !important; }

/* Section Header Styles */
.section-badge {
  display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary-color); background-color: rgba(115, 145, 26, 0.1); padding: 0.5rem 1.25rem; margin-bottom: 1rem;
}
.section-title-modern {
  font-family: var(--font-heading); font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 900; color: var(--primary-color); margin-bottom: 1rem; letter-spacing: -0.02em;
}
.section-subtitle { font-family: var(--font-body); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); color: #6c757d; max-width: 600px; margin: 0 auto; line-height: 1.7; }
.section-title {
  font-family: var(--font-heading); color: var(--primary-color); font-weight: 700; margin-bottom: 3rem; position: relative; padding-bottom: 15px;
}
.section-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--accent-color); border-radius: var(--border-radius);
}

/* BLOCK-6 MEDIA LAYOUT */
.block-6 {
  display: flex; flex-direction: row; align-items: flex-start; padding: 1.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100%;
}
.block-6 .icon {
  flex-shrink: 0; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; transition: all 0.3s ease;
}
.block-6 .icon i { font-size: 2rem; color: var(--primary-color); transition: all 0.3s ease; }
.block-6:hover .icon { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%); }
.block-6:hover .icon i { color: #ffffff; transform: scale(1.1); }
.block-6 .media-body { flex: 1; }
.block-6 .heading {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem); font-weight: 700; color: var(--primary-color); margin-bottom: 0.75rem; letter-spacing: -0.01em;
}
.block-6 .media-body p { font-family: var(--font-body); font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem); color: #6c757d; line-height: 1.7; margin-bottom: 0.75rem; }
.block-6 .media-body p:last-child { margin-bottom: 0; }
.block-6 .events-list { margin-bottom: 1rem; }
.block-6 .events-list p { font-size: 0.9rem; margin-bottom: 0.5rem; }

/* Link Styles */
.link-modern {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; transition: all 0.3s ease;
}
.link-modern:hover { color: var(--secondary-color); }
.link-modern i { font-size: 0.8rem; transition: transform 0.3s ease; }
.link-modern:hover i { transform: translateX(4px); }

/* Button Link Style */
.btn-link-modern {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--primary-color); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: all 0.3s ease;
}
.btn-link-modern:hover { color: var(--secondary-color); }
.btn-link-modern i { font-size: 0.8rem; transition: transform 0.3s ease; }
.btn-link-modern:hover i { transform: translateX(4px); }

/* External Link Style */
.link-external {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; position: relative; padding-bottom: 2px; transition: color 0.3s ease;
}
.link-external::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-external:hover { color: var(--secondary-color); }
.link-external:hover::after { width: 100%; }
.link-external i { font-size: 0.8rem; transition: transform 0.3s ease; }
.link-external:hover i { transform: translate(2px, -2px); }

/* MODERN SERVICE CARDS */
.service-card-modern {
  border: none; overflow: visible; height: 100%; display: flex; flex-direction: column; position: relative;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card-modern::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0;
}
.service-card-modern:hover::before { transform: scaleX(1); }
.service-card-modern.featured { border: 2px solid var(--secondary-color); }
.service-card-modern.featured::before { transform: scaleX(1); height: 4px; }

.card-image-wrapper { position: relative; overflow: hidden; height: 200px; }
.card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.service-card-modern:hover .card-image { transform: scale(1.08); }
.card-image-overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%); transition: opacity 0.4s ease;
}
.service-card-modern:hover .card-image-overlay { opacity: 0.7; }
.card-category {
  position: absolute; bottom: 1rem; left: 1rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; background-color: var(--primary-color); padding: 0.35rem 0.75rem; z-index: 2;
}
.card-content {
  padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; position: relative; z-index: 1;
}
.card-icon-wrapper {
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(186, 207, 0, 0.15) 0%, rgba(115, 145, 26, 0.15) 100%);
  margin-bottom: 1.25rem; transition: all 0.3s ease;
}
.card-icon-wrapper i { font-size: 1.5rem; color: var(--primary-color); transition: transform 0.3s ease; }
.service-card-modern:hover .card-icon-wrapper { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%); }
.service-card-modern:hover .card-icon-wrapper i { color: #ffffff; transform: scale(1.1); }
.card-title-modern {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem); font-weight: 700; color: var(--primary-color); margin-bottom: 0.75rem; letter-spacing: -0.01em;
}
.card-tagline {
  font-family: var(--font-body); font-size: clamp(1rem, 0.8835rem + 0.2524vw, 1.375rem); font-style: italic; color: var(--primary-color); margin-bottom: 0.75rem; line-height: 1.5;
}
.card-description {
  font-family: var(--font-body); font-size: clamp(1rem, 0.8835rem + 0.2524vw, 1.375rem); color: #6c757d; line-height: 1.7; margin-bottom: 1.5rem; flex-grow: 1;
}
.events-list { margin-bottom: 1.5rem; flex-grow: 1; }
.events-list p { font-size: 1rem; margin-bottom: 0.5rem; }

/* STRETCHED LINK FIX */
.service-card-modern .stretched-link::after {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; content: ""; pointer-events: auto;
}
.service-card-modern .btn-modern-primary { position: relative; z-index: 3; }

/* LEGACY SERVICE CARDS */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; border: 1px solid var(--border-color);
  border-radius: var(--border-radius) !important; overflow: hidden;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-color: var(--primary-color); }
.service-card h3, .service-card .card-title { font-family: var(--font-heading); font-weight: 700; color: var(--primary-color); }
.service-card p { font-family: var(--font-body); font-size: clamp(0.9rem, 0.7952rem + 0.2272vw, 1.2375rem); line-height: 1.6; color: #6c757d; }
.service-icon { font-size: clamp(2.5rem, 2rem + 1vw, 3.5rem); color: var(--secondary-color); margin-bottom: 1rem; }

/* PARTNERS CARD */
.partners-card {
  border: none !important; overflow: hidden; position: relative;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.partners-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.partners-card .card-body { padding: 2rem; }
.partners-card-title {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem); font-weight: 700; color: var(--primary-color); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;
}
.partners-card-title i { font-size: 1.25rem; color: var(--secondary-color); transition: transform 0.3s ease; }

.partners-list { list-style: none; padding: 0; margin: 0; }
.partners-list li {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0; font-family: var(--font-body); font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem); color: var(--text-color); line-height: 1.6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;
}
.partners-list li:last-child { border-bottom: none; padding-bottom: 0; }
.partners-list li:first-child { padding-top: 0; }
.partners-list li i { flex-shrink: 0; font-size: 1rem; color: var(--primary-color); margin-top: 0.15rem; transition: transform 0.3s ease, color 0.3s ease; }
.partners-list li:hover i { color: var(--secondary-color); }

/* Arvot Section */
#arvot { background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); padding: 5rem 0; }
#arvot .section-title {
  font-family: var(--font-heading); font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 900; color: var(--primary-color); margin-bottom: 3rem; position: relative; padding-bottom: 0;
}
#arvot .section-title::after { display: none; }

.value-card {
  background-color: #ffffff; border-left: 4px solid var(--secondary-color); padding: 1.75rem; margin-bottom: 1.5rem; border-radius: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.value-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.value-card:hover { background-color: #f8f9fa; border-left-width: 4px; transform: translateX(8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.value-card:hover::before { transform: scaleY(1); }
.value-card h4 {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem); font-weight: 700; color: var(--primary-color); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem;
}
.value-card h4 i { font-size: 1.25rem; color: var(--secondary-color); transition: transform 0.3s ease; }
.value-card:hover h4 i { transform: rotate(72deg) scale(1.2); }
.value-card p { font-family: var(--font-body); font-size: clamp(0.9rem, 0.85rem + 0.15vw, 1rem); line-height: 1.7; color: #6c757d; margin-bottom: 0; }

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%);
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 200%;
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(-15deg);
}

.cta-section::before { top: -50%; right: -10%; }
.cta-section::after  { bottom: -50%; left: -10%; }

.cta-section .container { position: relative; z-index: 1; }

.cta-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 900;
  color: white;
  margin-bottom: 1.5rem;
}

.cta-section p {
  font-size: clamp(1.1rem, 0.9719rem + 0.2777vw, 1.5125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
}

.cta-section .btn-custom {
  background-color: white;
  color: var(--primary-color);
  font-weight: 700;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  border: 2px solid white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-section .btn-custom:hover {
  background-color: transparent;
  color: white;
  border-color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.cta-section .btn-custom i { transition: transform 0.3s ease; }
.cta-section .btn-custom:hover i { transform: translateX(5px); }


/* ── CTA Alt override ─────────────────────────────────────── */
.cta-section.cta-alt {
  background: #B2BEB5;          /* flat ash-green, overrides the gradient */
}

/* soften the decorative shapes so they don't clash */
.cta-section.cta-alt::before,
.cta-section.cta-alt::after {
  background: rgba(255, 255, 255, 0.08);
}

/* typography */
.cta-section.cta-alt h2 { color: var(--text-color); }
.cta-section.cta-alt p  { color: #444; }

/* button — solid primary, flips to secondary on hover */
.cta-section.cta-alt .btn-custom {
  background-color: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.cta-section.cta-alt .btn-custom:hover {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Yhteystiedot Section */
#yhteystiedot { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); padding: 5rem 0; }
#yhteystiedot .section-title {
  font-family: var(--font-heading); font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 900; color: var(--primary-color); margin-bottom: 3rem; position: relative; padding-bottom: 0;
}
#yhteystiedot .section-title::after { display: none; }

#yhteystiedot .card {
  border: none; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
#yhteystiedot .card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
#yhteystiedot .card-body { padding: 2.5rem; }
#yhteystiedot .card-body h4 {
  font-family: var(--font-heading); font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem); font-weight: 900; color: var(--primary-color); margin-bottom: 2rem; letter-spacing: -0.01em;
}

/* Contact Info List */
.contact-info { margin-bottom: 2rem; }
.contact-info li {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; margin-bottom: 0.5rem; transition: all 0.3s ease;
}
.contact-info li:hover { transform: translateX(5px); }
.contact-info li i { flex-shrink: 0; width: 1rem; font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem); color: var(--primary-color); margin-top: 0.15rem; }
.contact-info li a { color: var(--text-color); text-decoration: none; transition: color 0.3s ease; }
.contact-info li a:hover { color: var(--primary-color); }
.contact-info li small { display: block; margin-top: 0.25rem; }
.contact-info li span { font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem); color: var(--text-color); font-weight: 500; line-height: 1.7; }

#yhteystiedot hr { border-color: var(--border-color); opacity: 0.3; margin: 2rem 0; }
#yhteystiedot .btn-custom {
  width: 100%; max-width: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#yhteystiedot .btn-custom:hover i { transform: scale(1.2); }

/* Email & Phone Obfuscation Hover Effects */
a.obs-email:not(.contact-item), a.obs-phone:not(.contact-item) {
  text-decoration: none !important; position: relative; display: inline-block; color: inherit;
}
a.obs-email:not(.contact-item)::after, a.obs-phone:not(.contact-item)::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a.obs-email:not(.contact-item):hover::after, a.obs-email:not(.contact-item):focus::after,
a.obs-phone:not(.contact-item):hover::after, a.obs-phone:not(.contact-item):focus::after { transform: scaleX(1); }

.contact-item { text-decoration: none !important; }
.contact-item .contact-value { position: relative; display: inline-block; }
.contact-item .contact-value::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background-color: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-item:hover .contact-value::after, .contact-item:focus .contact-value::after { transform: scaleX(1); }

/* TEAM SECTION */
.team-section { background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); }

/* BASE STYLES (Mobile First - xs/sm) */
.team-cards-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.team-card {
  background-color: #ffffff; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card-inner { display: flex; flex-direction: column; align-items: stretch; }
.team-image-wrapper {
  position: relative; width: 100%; height: 280px; flex-shrink: 0; overflow: hidden; background-color: #e9ecef;
}
.team-image-wrapper picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.team-image {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-content {
  padding: 1.5rem; flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.team-name {
  font-family: var(--font-heading); font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem;
}
.team-role {
  font-family: var(--font-body); font-size: clamp(0.8rem, 0.75rem + 0.15vw, 0.9rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-color); margin-bottom: 1rem;
}
.team-description {
  font-family: var(--font-body); font-size: clamp(0.9rem, 0.85rem + 0.15vw, 1rem); color: #6c757d; line-height: 1.7; margin-bottom: 1.25rem;
}
.team-contact-list { list-style: none; padding: 0; margin: 0; }
.team-contact-list li {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.5rem 0; font-size: clamp(0.9rem, 0.85rem + 0.15vw, 1rem); color: var(--text-color); transition: transform 0.3s ease;
}
.team-contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.team-contact-list li i { font-size: 1.1rem; color: var(--primary-color); width: 1.25rem; flex-shrink: 0; }
.team-contact-list li a {
  color: var(--text-color); text-decoration: none; transition: color 0.3s ease; position: relative;
}
.team-contact-list li a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: var(--primary-color); transition: width 0.3s ease;
}
.team-contact-list li a:hover { color: var(--primary-color); }
.team-contact-list li a:hover::after { width: 100%; }

.team-social { list-style: none; padding: 0; margin: 1rem 0 0 0; display: flex; gap: 0.5rem; justify-content: center; }
.team-social li a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(115, 145, 26, 0.1); color: var(--primary-color); text-decoration: none; transition: all 0.3s ease;
}
.team-social li a:hover {
  background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%); color: #ffffff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(115, 145, 26, 0.3);
}
.team-social li a i { font-size: 0.9rem; }

/* EXTRA SMALL - xs (< 576px) */
@media (max-width: 575.98px) {
	.team-cards-stack { gap: 1.25rem; }
	.team-image-wrapper { height: 250px; }
	.team-content { padding: 1.25rem; }
}

/* SMALL - sm (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.team-cards-stack { gap: 1.5rem; }
	.team-image-wrapper { height: 300px; }
	.team-content { padding: 1.5rem; }
}

/* MEDIUM - md (768px - 991px) HORIZONTAL */
@media (min-width: 768px) {
	.team-card-inner { flex-direction: row; }
	.team-image-wrapper { width: 200px; min-width: 200px; height: auto; min-height: 200px; }
	.team-image { object-position: center top; }
	.team-content { padding: 1.5rem; text-align: left; }
	.team-contact-list li { justify-content: flex-start; }
	.team-contact-list li:hover { transform: translateX(5px); }
	.team-social { justify-content: flex-start; }
}

/* LARGE - lg (992px - 1199px) */
@media (min-width: 992px) {
	.team-cards-stack { gap: 1.75rem; }
	.team-image-wrapper { width: 220px; min-width: 220px; min-height: 220px; }
	.team-content { padding: 2rem; }
}

/* EXTRA LARGE - xl (1200px - 1399px) */
@media (min-width: 1200px) {
	.team-cards-stack { gap: 2rem; }
	.team-image-wrapper { width: 240px; min-width: 240px; min-height: 240px; }
	.team-content { padding: 2.25rem; }
}

/* EXTRA EXTRA LARGE - xxl (1400px+) */
@media (min-width: 1400px) {
	.team-image-wrapper { width: 250px; min-width: 250px; min-height: 260px; }
	.team-content { padding: 2.5rem; }
}

/* HOVER EFFECTS (Desktop Only) */
@media (hover: hover) and (pointer: fine) {
	.team-contact-list li:hover { transform: translateX(5px); }
}

/* Footer */
.footer {
  position: relative; color: white; padding: 4rem 0 2rem; overflow: hidden;
}
.footer-bg-picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.footer-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); z-index: 2;
}
.footer-content { position: relative; z-index: 2; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: white; }

/* Footer Brand/Logo */
.footer-brand { display: inline-block; margin-bottom: 1.5rem; text-decoration: none; transition: opacity 0.3s ease; }
.footer-brand:hover { opacity: 0.85; }
.footer-logo { height: auto; width: 100%; max-width: 180px; object-fit: contain; filter: brightness(0) invert(1); }
.footer-brand:hover .footer-logo { transform: scale(1.02); }

.footer h5 {
  font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem); font-weight: 900; letter-spacing: -0.01em; margin-bottom: 1.5rem;
}
.footer h6 { font-family: var(--font-heading); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem); font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.01em; }
.footer h5 i { color: var(--secondary-color); margin-right: 0.5rem; }
.footer p { font-family: var(--font-body); font-size: clamp(0.9rem, 0.85rem + 0.15vw, 1rem); color: rgba(255, 255, 255, 0.9); line-height: 1.7; }

.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 0.75rem; }
.footer ul li a {
  font-family: var(--font-body); font-size: clamp(0.9rem, 0.85rem + 0.15vw, 1rem); color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: all 0.3s ease;
  display: inline-block; position: relative;
}
.footer ul li a::before {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: var(--secondary-color); transition: width 0.3s ease;
}
.footer ul li a:hover { color: white; transform: translateX(5px); }
.footer ul li a:hover::before { width: 100%; }

.footer .d-flex a {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); color: white; transition: all 0.3s ease; text-decoration: none;
}
.footer .d-flex a:hover { background: var(--primary-color); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(115, 145, 26, 0.4); }

/* Footer Partners Section */
.footer-partners { margin-top: 2rem; }
.partners-logos { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.partner-link { display: inline-block; text-decoration: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.partner-link:hover { opacity: 0.85; transform: scale(1.02); }
.partner-logo { height: auto; width: 100%; max-width: 186px; object-fit: contain; filter: brightness(0) invert(1); }

.footer hr { border-color: rgba(255, 255, 255, 0.2); margin: 2.5rem 0 1.5rem; opacity: 1; }
.footer .text-center p { font-size: clamp(0.8rem, 0.75rem + 0.15vw, 0.9rem); color: rgba(255, 255, 255, 0.7); margin-bottom: 0; }
.footer .credits { font-size: clamp(0.8331rem, 0.7166rem + 0.2524vw, 1.1rem); }

/* Footer Legal Links */
.footer-legal-links { font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.85rem); }
.footer-legal-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; }
.footer-legal-links a:hover { color: var(--secondary-color); }
.footer-legal-links span { color: rgba(255, 255, 255, 0.4); }

/* Legal Modals */
.modal-legal .modal-content { border: none; border-radius: 0 !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
.modal-legal .modal-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%); color: white; border-bottom: none; padding: 1.5rem 2rem;
}
.modal-legal .modal-header .modal-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; color: #fff; }
.modal-legal .modal-header .modal-title i { font-size: 1.35rem; color: #fff; }
.modal-legal .modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 0.3s ease; }
.modal-legal .modal-header .btn-close:hover { opacity: 1; }
.modal-legal .modal-body { padding: 2rem; max-height: 70vh; overflow-y: auto; }
.modal-legal .modal-footer { border-top: 1px solid var(--border-color); padding: 1rem 2rem; }
.modal-legal .modal-footer .btn-secondary {
  background-color: var(--btn-color); border: none; padding: 0.75rem 2rem; font-weight: 600; transition: all 0.3s ease;
}
.modal-legal .modal-footer .btn-secondary:hover { background-color: var(--primary-color); }

/* Legal Content Styles */
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem 1.25rem; background-color: #f8f9fa; border-left: 4px solid var(--primary-color);
  margin-bottom: 2rem; font-size: 0.875rem; color: #6c757d;
}
.legal-meta span { display: flex; align-items: center; }
.legal-meta i { color: var(--primary-color); }

.legal-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e9ecef; }
.legal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-section h6 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; }
.legal-section p { font-size: 0.95rem; line-height: 1.7; color: var(--text-color); margin-bottom: 0.75rem; }
.legal-section ul, .legal-section ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.legal-section li { font-size: 0.95rem; line-height: 1.7; color: var(--text-color); margin-bottom: 0.5rem; }

.legal-contact-box {
  background-color: #f8f9fa; padding: 1.25rem; font-size: 0.95rem; line-height: 1.8; border-left: 4px solid var(--secondary-color);
}
.legal-contact-box i { color: var(--primary-color); width: 1.25rem;}

.legal-notice {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 1rem 1.25rem; background-color: rgba(186, 207, 0, 0.1); border-left: 4px solid var(--secondary-color);
  margin-top: 1rem; font-size: 0.9rem;
}
.legal-notice i { color: var(--primary-color); flex-shrink: 0; margin-top: 0.1rem; }

.legal-section .table { font-size: 0.9rem; margin-bottom: 1rem; }
.legal-section .table th { background-color: #f8f9fa; font-weight: 600; color: var(--text-color); }
.legal-section .table td, .legal-section .table th { padding: 0.75rem; vertical-align: middle; }

/* Offcanvas Menu */
.offcanvas { --bs-offcanvas-width: 100vw !important; background-color: #ffffff; border: none; }
#offcanvasMenu { width: 100% !important; height: 100vh !important; }
.offcanvas-header {
  background-color: transparent; padding: 2rem 3rem; position: absolute; top: 0; right: 0; width: 100%; z-index: 10;
}
.offcanvas-header .btn-close {
  filter: none; width: 1.5rem; height: 1.5rem; opacity: 0.5; transition: opacity 0.3s ease, transform 0.4s ease;
}
.offcanvas-header .btn-close:hover { opacity: 1; transform: rotate(90deg); }
#offcanvasMenu .offcanvas-body { min-height: 100%; padding: 0; }
.offcanvas-body {
  background-color: transparent; text-align: center; padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
}
.fullscreen-logo { height: auto; width: 100%; max-width: 200px; object-fit: contain; transition: opacity 0.3s ease; }
.fullscreen-logo:hover { opacity: 0.8; }
.offcanvas-body .nav-item { border-bottom: none; margin: 0.25rem 0; }
.offcanvas-body .nav-link {
  font-family: var(--font-heading); font-size: clamp(0.9rem, 0.5rem + 1vw, 1.1rem); font-weight: 700; color: var(--text-color) !important; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.75rem; transition: color 0.3s ease;
  display: inline-block; position: relative;
}
.offcanvas-body .nav-link::after {
  content: ''; position: absolute; bottom: 0.5rem; left: 0.75rem; right: 0.75rem; height: 2px; background-color: var(--primary-color);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.offcanvas-body .nav-link:hover::after, .offcanvas-body .nav-link:focus::after { transform: scaleX(1); }
.offcanvas-body .nav-link:hover, .offcanvas-body .nav-link:focus { color: var(--primary-color) !important; background-color: transparent; }

.offcanvas-link { font-size: 1.5rem; padding: 0.75rem 0; color: #333; transition: color 0.3s ease; }
.offcanvas-link:hover { color: var(--primary-color); }

.offcanvas-contact {
  background-color: transparent; box-shadow: none; padding: 0; border-radius: 0 !important;
  position: absolute; bottom: 0; padding-bottom: 2rem; text-align: center;
}
.offcanvas-contact p { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.offcanvas-contact a { font-family: var(--font-heading); color: #666; text-decoration: none; transition: color 0.3s ease; }
.offcanvas-contact a:hover { color: var(--primary-color); }

/* Buttons */
.btn { border-radius: var(--border-radius) !important; }
.btn-custom {
  font-family: var(--font-body); font-size: clamp(0.9rem, 0.7952rem + 0.2272vw, 1.2375rem); background-color: var(--btn-color); border: none; color: white; padding: 12px 30px;
  border-radius: var(--border-radius) !important; font-weight: 600; letter-spacing: 0.03em; transition: all 0.3s ease;
}
.btn-custom:hover { background-color: var(--btn-hover); transform: scale(1.05); color: white; }
.btn-outline-light, .btn-lg { border-radius: var(--border-radius) !important; }

.btn-modern-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: #ffffff;
  background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%); border: none; padding: 0.875rem 1.5rem; text-decoration: none; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.btn-modern-primary::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.btn-modern-primary:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(115, 145, 26, 0.35); }
.btn-modern-primary:hover::before { opacity: 1; }
.btn-modern-primary span, .btn-modern-primary i { position: relative; z-index: 1; }
.btn-modern-primary i { transition: transform 0.3s ease; }
.btn-modern-primary:hover i { transform: translateX(4px); }

.btn-modern-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--primary-color);
  background: transparent; border: 2px solid var(--primary-color); padding: 0.75rem 1.5rem; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-modern-outline:hover { color: #ffffff; background: var(--primary-color); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(115, 145, 26, 0.25); }
.btn-modern-outline i { transition: transform 0.3s ease; }
.btn-modern-outline:hover i { transform: translateX(4px); }

/* Modal Styles */
.modal-content { border: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); }
.modal-header { border-bottom: none; border-radius: var(--border-radius) !important; }
.modal-footer { border-top: 1px solid var(--border-color); }
.modal-body a { color: var(--text-color); transition: color 0.3s ease; }
.modal-body a:hover { color: var(--primary-color); }

.modal-modern .modal-content-modern {
  border: none; border-radius: 0 !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); overflow: hidden; position: relative;
}
.modal-close-modern {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.05); border: none; z-index: 10; cursor: pointer; transition: all 0.3s ease;
}
.modal-close-modern:hover { background: rgba(0, 0, 0, 0.1); transform: rotate(90deg); }
.modal-close-modern i { font-size: 1.25rem; color: var(--text-color); }
.modal-body-modern { padding: 0; }

.modal-profile {
  background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%); padding: 3rem 2rem 2rem; text-align: center; position: relative;
}
.modal-profile::after {
  content: ''; position: absolute; bottom: -20px; left: 0; right: 0; height: 40px; background: #ffffff; clip-path: ellipse(60% 100% at 50% 100%);
}
.profile-image-wrapper { position: relative; display: inline-block; margin-bottom: 1rem; }
.profile-image {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.profile-status {
  position: absolute; bottom: 8px; right: 8px; width: 20px; height: 20px; background: var(--secondary-color); border: 3px solid #ffffff; border-radius: 50%;
}
.profile-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #ffffff; margin-bottom: 0.25rem; }
.profile-role { font-family: var(--font-body); font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0; }

.modal-contact-section { padding: 2rem; }
.contact-section-title { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #6c757d; margin-bottom: 1rem; }

.contact-item {
  display: flex; align-items: center; padding: 1rem; margin-bottom: 0.75rem; background: #f8f9fa; text-decoration: none; transition: all 0.3s ease;
}
.contact-item:hover { background: rgba(115, 145, 26, 0.08); transform: translateX(4px); }
.contact-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; flex-shrink: 0;
}
.contact-icon i { font-size: 1.1rem; color: var(--primary-color); }
.contact-details { display: flex; flex-direction: column; flex-grow: 1; }
.contact-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6c757d; margin-bottom: 0.15rem; }
.contact-value { font-size: 1rem; font-weight: 500; color: var(--text-color); }
.contact-arrow { color: #c0c0c0; font-size: 0.875rem; transition: all 0.3s ease; }
.contact-item:hover .contact-arrow { color: var(--primary-color); transform: translateX(4px); }

.modal-info-note {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem; margin: 0 2rem 2rem; background: rgba(186, 207, 0, 0.1); border-left: 3px solid var(--secondary-color);
}
.modal-info-note i { font-size: 1rem; color: var(--primary-color); flex-shrink: 0; margin-top: 0.1rem;}
.modal-info-note p { font-size: 0.875rem; color: #6c757d; line-height: 1.6; margin-bottom: 0; }

/* Cards Global */
.card { border-color: var(--border-color); border-radius: var(--border-radius) !important; }
.card-header, .card-footer { border-radius: var(--border-radius) !important; }
.card-img-top { border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; }
.card h4 { font-family: var(--font-heading); }
.card img, .service-card img { border-radius: var(--border-radius) !important; }

/* Form Inputs */
input, select, textarea { font-family: var(--font-body); font-size: clamp(0.9rem, 0.7952rem + 0.2272vw, 1.2375rem); border-radius: var(--border-radius) !important; }
.form-control, .form-select { border-radius: var(--border-radius) !important; }
.form-label { font-size: clamp(0.9rem, 0.7952rem + 0.2272vw, 1.2375rem); font-weight: 500; }

/* Utility Classes */
.text-primary-custom { color: var(--primary-color); }
.bg-primary-custom { background-color: var(--primary-color); }

/* Cookie Banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 1.5rem; z-index: 9999;
  transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.1); visibility: hidden;
}
.cookie-banner.show { transform: translateY(0); visibility: visible; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s; }
.cookie-banner.hide { transform: translateY(100%); visibility: hidden; }

.cookie-banner-content {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.cookie-icon {
  width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cookie-icon i { font-size: 1.75rem; color: #fff; }
.cookie-text { flex: 1; min-width: 280px; }
.cookie-title { color: #fff; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; }
.cookie-description { color: rgba(255, 255, 255, 0.7); font-family: var(--font-body); font-size: 0.9rem; margin-bottom: 0; line-height: 1.5; }
.cookie-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }

.btn-cookie-accept {
  background: linear-gradient(135deg, var(--primary-color) 0%, #5a7315 100%); color: #fff; border: none; padding: 0.75rem 1.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center;
}
.btn-cookie-accept:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(115, 145, 26, 0.4); }

.btn-cookie-decline {
  background: transparent; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.75rem 1.5rem; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease;
}
.btn-cookie-decline:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* Responsive */
/* Extra Small Devices */
@media (max-width: 575px) {
  body { font-size: 1rem; }
  h1, .hero-section h1, .display-heading { font-size: clamp(1.728rem, 1.2rem + 2.64vw, 2rem); }
  h2, .section-title { font-size: clamp(1.44rem, 1rem + 2.2vw, 1.728rem); }
  .hero-section { padding: 60px 0; min-height: 60vh; }
  .navbar-logo { height: 40px; max-width: 160px; }
  .site-header.scrolled .navbar-logo { height: 35px; }
  .hero-title { font-size: clamp(1.728rem, 1.2rem + 2.64vw, 2rem); }
}

/* Small Devices */
@media (max-width: 767px) {
  .py-lg-6 { padding: 3rem 0 !important; }
  #arvot, #yhteystiedot, .cta-section { padding: 3rem 0; }
  .hero-section { padding: 80px 0; min-height: 70vh; }
  .subpage-hero { padding: 60px 0; min-height: 30vh; }
  .subpage-hero .breadcrumb-item a, .subpage-hero .breadcrumb-item.active { font-size: 0.8rem; }
  .service-icon { font-size: 2.5rem; }
  .card-image-wrapper { height: 180px; }
  .card-content { padding: 1.5rem; }
  .card-icon-wrapper { width: 44px; height: 44px; }
  .card-icon-wrapper i { font-size: 1.25rem; }
  .profile-image { width: 100px; height: 100px; }
  .modal-contact-section { padding: 1.5rem; }
  .modal-info-note { margin: 0 1.5rem 1.5rem; }
  #yhteystiedot .card-body { padding: 1.5rem; }
  .value-card { padding: 1.25rem; }

  /* Block-6 Responsive */
  .block-6 { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
  .block-6 .icon { margin-right: 0; margin-bottom: 1.25rem; margin-left: auto; margin-right: auto; }
  .block-6 .media-body { text-align: center; }
  .link-modern, .btn-link-modern, .link-external { justify-content: center; }

  /* Partners Card Responsive */
  .partners-card .card-body { padding: 1.5rem; }
  .partners-list li { padding: 0.5rem 0; }

  /* Footer Responsive */
  .footer-logo { max-width: 150px; }
  .footer-brand { margin-bottom: 1rem; }
  .footer-partners { margin-top: 1.5rem; }
  .partners-logos { gap: 1.25rem; }
  .partner-logo { max-width: 152px; }

  /* Legal Modals Responsive */
  .modal-legal .modal-body { padding: 1.5rem; }
  .modal-legal .modal-header { padding: 1.25rem 1.5rem; }
  .legal-meta { flex-direction: column; gap: 0.75rem; }
  .legal-section h6 { font-size: 1rem; }
  .legal-section p, .legal-section li { font-size: 0.9rem; }

  /* Cookie Banner Responsive */
  .cookie-banner { padding: 1.25rem; }
  .cookie-banner-content { flex-direction: column; text-align: center; gap: 1rem; }
  .cookie-icon { width: 50px; height: 50px; }
  .cookie-icon i { font-size: 1.5rem; }
  .cookie-text { min-width: auto; }
  .cookie-title { font-size: 1rem; }
  .cookie-description { font-size: 0.85rem; }
  .cookie-actions { width: 100%; flex-direction: column; }
  .btn-cookie-accept, .btn-cookie-decline { width: 100%; justify-content: center; }
  p { hyphens: none; -webkit-hyphens: none; }
}

/* Medium Devices */
@media (min-width: 576px) and (max-width: 991px) {
  .navbar-logo { height: 45px; max-width: 180px; }
  .site-header.scrolled .navbar-logo { height: 38px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .block-6 .icon { width: 60px; height: 60px; margin-right: 1rem; }
  .block-6 .icon i { font-size: 1.75rem; }
}

/* Large Devices */
@media (min-width: 992px) {
  .navbar-logo { height: 55px; max-width: 220px; }
  .site-header.scrolled .navbar-logo { height: 45px; }
  .card-image-wrapper { height: 220px; }
  .card-content { padding: 2rem; }
  .fullscreen-logo { max-width: 350px; }
  .offcanvas-body .nav-link { font-size: 1rem; }
  .footer-logo { max-width: 200px; }
  .partner-logo { max-width: 220px; }
}

/* Large screens - optimize for desktop reading */
@media (min-width: 1200px) {
  p { hyphens: auto; -webkit-hyphens: auto; }
}

/* Extra Large Devices */
@media (min-width: 1401px) {
  body { font-size: 1.125rem; }
  h1, .hero-section h1 { font-size: 2.375rem; }
  h2, .section-title { font-size: 1.875rem; }
  .lead { font-size: 1.375rem; }
  p { font-size: 1.125rem; }
  .hero-title { font-size: 2.375rem; }
}
@media (min-width: 1401px) {
  .card-description { font-size: 1.125rem; }
  .card-tagline { font-size: 1.125rem; }
}