/* ============================================
   TEAM KOSKEN - MODERNI CSS 2025
   Ammattimaiset tiimikuvat + kaikki modernit efektit
   ============================================ */

/* Perusasetukset ja typografia */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Roboto',sans-serif;
  line-height:1.6;
  color:#e5e7eb;
  background:radial-gradient(circle at top,#111827 0,#020617 55%,#020617 100%);
  position:relative;
}

/* Noise texture - hienovarainen tekstuuri */
body::after{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity:0.025;
  pointer-events:none;
  z-index:9999;
}

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
section{scroll-margin-top:5rem;}

/* Custom scrollbar - tyylikäs vierityspalkki */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:#020617;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2563eb,#38bdf8);
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{background:#38bdf8;}

/* Skip link for accessibility */
.skip-link{
  position:absolute;
  top:-100%;
  left:50%;
  transform:translateX(-50%);
  background:#2563eb;
  color:#fff;
  padding:0.75rem 1.5rem;
  z-index:9999;
  text-decoration:none;
  border-radius:0 0 8px 8px;
  font-weight:500;
  transition:top 0.2s ease;
}
.skip-link:focus{top:0;}

/* Yleinen layout */
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 1.5rem;}
.section{padding:4.5rem 0;}
.section-light{background:linear-gradient(180deg,#0b1120,#020617);}
.section-accent{background:linear-gradient(135deg,#0f172a,#020617);color:#f9fafb;}

/* Gradient-teksti otsikoille */
.hero-text h1,
.section-header h2{
  background:linear-gradient(135deg,#f9fafb 0%,#e2e8f0 50%,#38bdf8 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Painikkeet - Magnetic effect */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.9rem 1.8rem;
  border-radius:999px;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  font-size:0.95rem;
  letter-spacing:0.02em;
  position:relative;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width 0.6s,height 0.6s;
}
.btn:hover::before{
  width:300px;
  height:300px;
}
.btn-primary{
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  color:#0b1120;
  border-color:#1d4ed8;
  box-shadow:0 12px 30px rgba(37,99,235,0.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px rgba(37,99,235,0.5),0 0 0 1px rgba(56,189,248,0.3);
}
.btn-outline{
  background:transparent;
  color:#e5e7eb;
  border-color:rgba(148,163,184,0.4);
  backdrop-filter:blur(4px);
}
.btn-outline:hover{
  background:rgba(15,23,42,0.6);
  border-color:#38bdf8;
  box-shadow:0 0 20px rgba(56,189,248,0.15);
}
.full-width{width:100%;}

/* ============================================
   HEADER + NAV - Glassmorphism
   ============================================ */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  color:#f9fafb;
}
.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.85rem 1.5rem;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(15,23,42,0.75);
  border-bottom:1px solid rgba(56,189,248,0.1);
  box-shadow:0 4px 30px rgba(0,0,0,0.3);
  transition:all 0.3s ease;
}
.logo{
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.logo img{
  height:56px;
  width:auto;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* NAVIGAATIO - Hover-viiva animaatio */
.nav-menu{
  display:flex;
  gap:1.5rem;
  font-size:0.95rem;
}
.nav-menu a{
  padding:0.3rem 0;
  color:#e5e7eb;
  opacity:0.9;
  position:relative;
  transition:all 0.3s ease;
}
.nav-menu a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#38bdf8,#2563eb);
  transition:width 0.3s ease;
  box-shadow:0 0 10px rgba(56,189,248,0.5);
}
.nav-menu a:hover::after,
.nav-menu a:focus-visible::after{
  width:100%;
}
.nav-menu a:hover{
  opacity:1;
  color:#38bdf8;
}

/* Header shrink skrollatessa */
.nav-container.shrink{
  padding:0.5rem 1.5rem;
  background:rgba(15,23,42,0.9);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.nav-container.shrink .logo img{height:40px !important;}

/* Hamburger-nappi mobiilissa */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:0.22rem;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle-bar{
  width:1.5rem;
  height:0.15rem;
  background:#f9fafb;
  border-radius:999px;
  transition:all 0.3s ease;
}

/* ============================================
   HERO - Animoitu tausta + Glassmorphism
   ============================================ */
.hero{
  padding:8rem 0 4rem;
  background:
    linear-gradient(135deg,rgba(15,23,42,0.9),rgba(15,23,42,0.85)),
    url("images/halli.png");
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

/* Liikkuva gradient-overlay */
.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(
    circle at 30% 30%,
    rgba(56,189,248,0.1) 0%,
    transparent 50%
  );
  animation:pulse-glow 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulse-glow{
  0%,100%{transform:translate(0,0) scale(1);opacity:0.4;}
  50%{transform:translate(-5%,-5%) scale(1.1);opacity:0.7;}
}

.hero-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:2.75rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-text h1{
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:1rem;
  font-weight:700;
}
.hero-lead{
  font-size:1.05rem;
  margin-bottom:0.9rem;
  color:#cbd5e1;
  max-width:34rem;
}
.hero-text p{
  margin-bottom:0.7rem;
  color:#98999b;
  max-width:36rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1rem;
}
.hero-image-wrapper{
  position:relative;
}
.hero-image{
  border-radius:1.5rem;
  box-shadow:0 25px 60px rgba(0,0,0,0.5);
  object-fit:cover;
  animation:fade-in 0.8s ease forwards;
  opacity:0;
}
@keyframes fade-in{
  to{opacity:1;}
}

/* ============================================
   Osiot - Text reveal animaatio
   ============================================ */
.section-header{
  text-align:left;
  margin-bottom:2.5rem;
  position:relative;
  padding-left:1rem;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.8s cubic-bezier(0.4,0,0.2,1);
}
.section-header.is-visible{
  opacity:1;
  transform:translateY(0);
}
.section-header::before{
  content:"";
  position:absolute;
  left:0;
  top:0.35rem;
  width:3px;
  height:1.7rem;
  border-radius:999px;
  background:linear-gradient(180deg,#38bdf8,#2563eb);
  box-shadow:0 0 10px rgba(56,189,248,0.3);
}
.section-header h2{
  font-size:1.8rem;
  margin-bottom:0.6rem;
  font-weight:600;
}
.section-light .section-header h2{color:#f9fafb;}
.section-header p{
  color:#94a3b8;
  max-width:44rem;
}
.section-accent .section-header p{color:#cbd5e1;}

/* Gridit */
.grid{display:grid;gap:1.5rem;}
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.industries-grid{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ============================================
   Kortit - Glassmorphism + Hover-glow
   ============================================ */
.card{
  background:rgba(15,23,42,0.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:1.2rem;
  padding:1.8rem;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.card h3{
  font-size:1.15rem;
  margin-bottom:0.8rem;
  color:#f9fafb;
  font-weight:500;
}
.card p{
  font-size:0.95rem;
  color:#cbd1da;
  line-height:1.7;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    0 0 0 1px rgba(56,189,248,0.1),
    0 0 30px rgba(56,189,248,0.1);
  border-color:rgba(56,189,248,0.2);
  background:rgba(15,23,42,0.7);
}
.section-accent .card{
  background:rgba(2,6,23,0.6);
  border-color:rgba(148,163,184,0.1);
}
.industry-card h3{margin-bottom:0.5rem;}

/* ============================================
   SCROLL REVEAL - Elementit aukeaa skrollatessa
   ============================================ */
.scroll-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.scroll-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.scroll-reveal:nth-child(1){transition-delay:0ms;}
.scroll-reveal:nth-child(2){transition-delay:100ms;}
.scroll-reveal:nth-child(3){transition-delay:200ms;}
.scroll-reveal:nth-child(4){transition-delay:300ms;}

@media (prefers-reduced-motion:reduce){
  .scroll-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ============================================
   Meistä / about - KORJATTU
   ============================================ */
/*
.about-section{
  padding:2rem 0 3rem;
}

.about-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2.2rem;
  align-items:start !important;
}


.about-text{
  align-self:start !important;
}

.about-text p{
  margin-bottom:1rem;
  color:#f7f8f8 !important;
  line-height:1.8;
  font-size:1.05rem;
}


.about-text p:first-child{
  margin-top:0 !important;
  font-size:1.2rem;
  color:#ffffff !important;
  font-weight:400;
  padding-left:1rem;
  border-left:3px solid #38bdf8;
  text-shadow:0 2px 8px rgba(0,0,0,0.3);
}


.about-image-wrapper{
  align-self:start !important;
}

.about-image{
  width:100%;
  height:auto;
  border-radius:1.5rem !important;
  box-shadow:0 25px 60px rgba(0,0,0,0.4);
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.05);
  display:block;
} VANHA VERSIO TEKSTI JA KUVA EPÄTASAPAINOSSA
*/
/* ============================================
   Yhteys / lomake - Floating labels + Glow
   ============================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  align-items:flex-start;
}
.contact-info p{
  margin-bottom:0.8rem;
  font-size:0.96rem;
  color:#cbd5e1;
}
.contact-highlight a{
  color:#38bdf8;
  transition:all 0.3s ease;
}
.contact-highlight a:hover{
  color:#7dd3fc;
  text-shadow:0 0 10px rgba(56,189,248,0.3);
}
.contact-form-wrapper{
  background:rgba(15,23,42,0.6);
  backdrop-filter:blur(12px);
  border-radius:1.4rem;
  padding:2rem;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.08);
}
.contact-form label{
  display:block;
  font-size:0.85rem;
  margin-bottom:0.4rem;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.form-group{margin-bottom:1.2rem;}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:0.8rem 1rem;
  border-radius:0.75rem;
  border:1px solid rgba(148,163,184,0.2);
  background:rgba(2,6,23,0.5);
  color:#f9fafb;
  font-size:0.95rem;
  transition:all 0.3s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#38bdf8;
  box-shadow:
    0 0 0 3px rgba(56,189,248,0.1),
    0 0 20px rgba(56,189,248,0.1);
  transform:translateY(-1px);
  background:rgba(2,6,23,0.7);
}
.required{color:#f87171;}
.form-message{
  margin-top:0.6rem;
  font-size:0.9rem;
  min-height:1.1rem;
}
.form-message.error{color:#fecaca;}
.form-message.success{color:#bbf7d0;}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:rgba(2,6,23,0.8);
  backdrop-filter:blur(10px);
  color:#94a3b8;
  margin-top:4rem;
  border-top:1px solid rgba(148,163,184,0.1);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr;
  gap:2rem;
  padding:3rem 1.5rem 2rem;
}
.footer-col h3,
.footer-col h4{
  color:#f9fafb;
  margin-bottom:0.8rem;
  font-size:1rem;
  font-weight:500;
}
.footer-col p{font-size:0.9rem;line-height:1.7;}
.footer-links li{margin-bottom:0.4rem;}
.footer-links a{
  font-size:0.9rem;
  color:#94a3b8;
  transition:all 0.3s ease;
}
.footer-links a:hover{
  color:#38bdf8;
  padding-left:0.3rem;
}
.footer-bottom{
  border-top:1px solid rgba(148,163,184,0.1);
  padding:1rem 0;
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.85rem;
}
.footer-bottom a{
  color:#38bdf8;
  transition:all 0.3s ease;
}
.footer-bottom a:hover{
  color:#7dd3fc;
}

/* ============================================
   MODALIT - Glassmorphism + Alempaa sijaintia
   ============================================ */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:100;
  align-items:flex-start;
  justify-content:center;
  padding-top:12vh;
}
.modal.is-open{display:flex;}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(5px);
  cursor:pointer;
}
.modal-panel{
  position:relative;
  width:min(1200px,calc(100% - 2rem));
  max-height:calc(85vh - 2rem);
  overflow:auto;
  margin:0;
  border-radius:1.5rem;
  background:rgba(15,23,42,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 25px 80px rgba(0,0,0,0.6);
  transform:translateY(0);
  transition:transform 0.3s ease;
}
.modal-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.modal-header h2{
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#f9fafb;
}
.modal-close{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:#e5e7eb;
  width:40px;
  height:40px;
  border-radius:0.8rem;
  cursor:pointer;
  position:absolute;
  right:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  transition:all 0.3s ease;
}
.modal-close:hover{
  background:rgba(56,189,248,0.1);
  border-color:#38bdf8;
  color:#38bdf8;
  transform:rotate(90deg);
}
.modal-content{padding:1.5rem;}

/* Modal logo */
.modal-brand{
  position:absolute;
  left:1rem;
}
.modal-logo{
  height:28px;
  width:auto;
  display:block;
  opacity:0.9;
}

/* ============================================
   TIIMIKORTIT - Ammattimainen, yhtenäinen ilme
   ============================================ */

.team-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem;
}

.team-grid.single-card{
  grid-template-columns:1fr;
  max-width:400px;
  margin:0 auto;
}

.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:linear-gradient(
    145deg,
    rgba(15,23,42,0.8) 0%,
    rgba(2,6,23,0.9) 100%
  );
  backdrop-filter:blur(10px);
  border-radius:1.5rem;
  padding:2.5rem 2rem;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
  position:relative;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Koristeellinen hehku taustalle */
.team-card::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:200px;
  height:200px;
  background:radial-gradient(
    circle at center,
    rgba(56,189,248,0.1) 0%,
    transparent 60%
  );
  opacity:0.5;
  transition:opacity 0.4s ease;
}

.team-card:hover::before{
  opacity:0.8;
}

/* Kuva - ammattimainen mustavalko */
.team-card img{
  width:200px;
  height:240px;              /* Hieman korkeampi kuin leveä */
  object-fit:cover;
  border-radius:1rem;        /* Pehmeät kulmat */
  border:none;               /* Poista pyöreä reunus */
  box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.05);
  filter:grayscale(100%) contrast(1.1);
  transition:all 0.4s ease;
}
/* Hover: väri esiin + efektit */
.team-card:hover{
  transform:translateY(-5px);
  border-color:rgba(56,189,248,0.15);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 0 1px rgba(56,189,248,0.1);
}

.team-card:hover img{
  transform:scale(1.05);
  filter:grayscale(0%) contrast(1);
  box-shadow:
    0 25px 50px rgba(0,0,0,0.5),
    0 0 30px rgba(56,189,248,0.1);
}

.team-info{
  margin-top:1.5rem;
  position:relative;
  z-index:1;
}

.team-info h3{
  font-size:1.25rem;
  margin-bottom:0.3rem;
  color:#f9fafb;
  font-weight:600;
  letter-spacing:0.02em;
}

.team-role{
  color:#38bdf8;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.15em;
  margin-bottom:1rem;
  font-weight:500;
}

.team-links{
  color:#94a3b8;
  font-size:0.9rem;
  line-height:1.8;
}

.team-links a{
  color:#cbd5e1;
  transition:all 0.3s ease;
  display:inline-block;
  position:relative;
}

.team-links a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:#38bdf8;
  transition:width 0.3s ease;
}

.team-links a:hover{
  color:#38bdf8;
}

.team-links a:hover::after{
  width:100%;
}

/* Peurasaari - erityiskorjaus */
.peurasaari-img{
  object-position:center 10% !important;
}

/* ============================================
   YHTEYS-MODAALI (leadership-modal) - Logo keskellä
   ============================================ */
#leadership-modal .modal-header h2{display:none !important;}
#leadership-modal .modal-brand{
  position:static !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
}
#leadership-modal .modal-logo{
  height:55px !important;
  margin:0 auto !important;
  opacity:1;
}
#leadership-modal .modal-header{
  justify-content:center !important;
  padding:1.8rem 3rem !important;
}
#leadership-modal .modal-close{
  right:1rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
#leadership-modal .modal-close:hover{
  transform:translateY(-50%) rotate(90deg) !important;
}

/* ============================================
   ACCORDION - Mobiili (KORJATTU: teksti näkyy kokonaan)
   ============================================ */
.services-accordion,
.industries-accordion{display:none;}

.acc-card{
  background:rgba(15,23,42,0.6);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:1rem;
  overflow:hidden;
}

.acc-card summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:1.2rem;
  font-weight:500;
  color:#f9fafb;
}

.acc-card summary::-webkit-details-marker{display:none;}

.acc-card summary::after{
  content:"▾";
  color:#38bdf8;
  transition:transform 0.3s ease;
  font-size:1.1rem;
  flex-shrink:0;
}

.acc-card[open] summary::after{transform:rotate(180deg);}

.acc-card .acc-body{
  padding:0 1.2rem 1.2rem;
  border-top:1px solid rgba(148,163,184,0.1);
}

.acc-card .acc-body p{
  color:#94a3b8;
  line-height:1.7;
  margin-top:1rem;
  /* KORJAUS: Näytä koko teksti */
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* ============================================
   NAV OVERLAY
   ============================================ */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,0.7);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:45;
}
.nav-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

/* ============================================
   RESPONSIIVISUUS
   ============================================ */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1.15fr 1fr;gap:1.9rem;}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-grid{grid-template-columns:1fr;gap:1.7rem;}
  .contact-grid{grid-template-columns:1fr;gap:1.7rem;}
  .modal-panel{width:min(900px,90%);}
}

@media(max-width:768px){
  .nav-container{padding:0.6rem 1rem;}
  .nav-toggle{display:flex;}
  
  .main-nav{
    position:fixed;
    top:72px;
    left:12px;
    right:12px;
    z-index:60;
    border-radius:16px;
    padding:10px 0;
    background:rgba(15,23,42,0.95);
    backdrop-filter:blur(20px);
    border:1px solid rgba(56,189,248,0.1);
    box-shadow:0 24px 70px rgba(0,0,0,0.5);
    transform:translateY(-10px) scale(0.98);
    opacity:0;
    pointer-events:none;
    transition:all 0.3s ease;
  }
  .main-nav.open{
    transform:translateY(0) scale(1);
    opacity:1;
    pointer-events:auto;
  }
  .nav-menu{
    flex-direction:column;
    gap:0;
    padding:0;
  }
  .nav-menu li + li{border-top:1px solid rgba(148,163,184,0.1);}
  .nav-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    font-weight:500;
    color:#e5e7eb;
  }
  .nav-menu a:hover{background:rgba(56,189,248,0.05);}

  .hero{padding:6rem 0 3rem;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-text h1{font-size:1.9rem;}
  .hero-lead{font-size:0.95rem;}

  .services-grid,
  .industries-grid{grid-template-columns:1fr;}
  .section{padding:3rem 0;}
  
  /* Näytä accordion mobiilissa */
  .services-grid{display:none !important;}
  .industries-grid{display:none !important;}
  .services-accordion,
  .industries-accordion{
    display:flex !important;
    flex-direction:column;
    gap:1rem;
  }
  
  /* Accordion animaatio */
  .acc-card[open] .acc-body{
    animation:fadeIn 0.3s ease;
  }
  
  @keyframes fadeIn{
    from{opacity:0;transform:translateY(-10px);}
    to{opacity:1;transform:translateY(0);}
  }

  .footer-grid{grid-template-columns:1fr;gap:1.4rem;}
  .footer-bottom-inner{
    flex-direction:column;
    gap:0.4rem;
    align-items:flex-start;
  }
  
  /* TIIMIKORTIT MOBIILISSA */
  .team-grid{grid-template-columns:1fr;}
  .team-card{padding:2rem 1.5rem;}
  .team-card img{width:140px;height:140px;}
  .team-info h3{font-size:1.15rem;}
  
  /* MODAALIT MOBIILISSA - KORJAUS */
  .modal-panel{
    width:calc(100% - 1rem);
    margin:0.5rem;
    max-height:95vh;
    border-radius:1rem;
  }
  
  /* Tarjouspyyntö-modaali */
  #tarjous-modal .modal-header{
    flex-direction:column;
    gap:0.8rem;
    padding:1.2rem 1rem !important;
  }
  
  #tarjous-modal .modal-brand{
    position:static !important;
    order:-1;
  }
  
  #tarjous-modal .modal-logo{
    height:32px !important;
    margin:0 auto;
  }
  
  #tarjous-modal .modal-header h2{
    font-size:1.2rem;
    margin:0;
  }
  
  /* Yhteys-modaali */
  #leadership-modal .modal-header{
    padding:1.2rem 1rem !important;
  }
  
  #leadership-modal .modal-logo{
    height:38px !important;
  }
  
  /* Sulkunappi */
  .modal-close{
    right:0.8rem !important;
    top:1rem !important;
    transform:none !important;
    width:36px;
    height:36px;
  }
  
  #leadership-modal .modal-close,
  #tarjous-modal .modal-close{
    top:1rem !important;
    transform:none !important;
  }
}

@media(max-width:480px){
  .hero-text h1{font-size:1.6rem;}
  .btn{width:100%;justify-content:center;}
  .hero-actions{flex-direction:column;}
  .card{padding:1.4rem;}
  
  #tarjous-modal .modal-header h2{font-size:1.1rem;}
  #tarjous-modal .modal-logo{height:28px !important;}
  #leadership-modal .modal-logo{height:32px !important;}
}

/* ============================================
   LOGO FIX
   ============================================ */
.site-header .logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.site-header .logo img{
  height:56px !important;
  width:auto !important;
  max-width:none !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid #38bdf8;
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media (prefers-contrast:high){
  .card{border-width:2px;}
}

/* ============================================
   AJANKOHTAISTA - Moderni, tyylikäs design
   ============================================ */

#ajankohtaista .section-header{
  text-align:center;
  padding-left:0;
  margin-bottom:3rem;
}

#ajankohtaista .section-header::before{display:none;}

#ajankohtaista .section-header h2{
  font-size:2rem;
  font-weight:300;
  letter-spacing:0.05em;
  position:relative;
  display:inline-block;
  padding-bottom:1rem;
}

#ajankohtaista .section-header h2::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:linear-gradient(90deg,transparent,#38bdf8,transparent);
}

#ajankohtaista .news-grid{
  max-width:700px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

#ajankohtaista .news-card{
  background:linear-gradient(145deg,rgba(17,24,39,0.7),rgba(2,6,23,0.8));
  border:1px solid rgba(56,189,248,0.08);
  border-radius:1rem;
  padding:2rem 2.5rem;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

#ajankohtaista .news-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:100%;
  background:linear-gradient(180deg,#38bdf8,transparent);
  opacity:0;
  transition:opacity 0.3s ease;
}

#ajankohtaista .news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3),0 0 0 1px rgba(56,189,248,0.1);
  border-color:rgba(56,189,248,0.15);
}

#ajankohtaista .news-card:hover::before{opacity:1;}

#ajankohtaista .news-date{
  display:inline-block;
  background:transparent;
  color:#38bdf8;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0;
  margin-bottom:0.75rem;
}

#ajankohtaista .news-card h3{
  font-size:1.25rem;
  font-weight:500;
  color:#f9fafb;
  margin-bottom:0.8rem;
  line-height:1.4;
}

#ajankohtaista .news-card p{
  color:#94a3b8;
  font-size:0.95rem;
  line-height:1.7;
  margin:0;
}

#ajankohtaista .news-card strong{
  color:#38bdf8;
  font-weight:600;
}

@media(max-width:768px){
  #ajankohtaista .section-header h2{font-size:1.6rem;}
  #ajankohtaista .news-grid{padding:0 1rem;}
  #ajankohtaista .news-card{padding:1.5rem;}
}

/* ============================================
   LEADERSHIP - Yhteystietojen alla
   ============================================ */
.leadership-section{
  margin-top:4rem;
  padding-top:3rem;
  border-top:1px solid rgba(148,163,184,0.1);
}
.leadership-section .team-grid{
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.leadership-section .team-card{padding:1.5rem;}
.leadership-section .team-card img{
  width:140px;
  height:140px;
}

/* ============================================
   YHTEISTYÖKUMPPANI
   ============================================ */
.partner-link{
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid rgba(148,163,184,0.1);
}
.partner-link h4{
  color:#f9fafb;
  margin-bottom:1rem;
  font-size:1rem;
}
.partner-footer{
  margin-top:1rem;
  font-size:0.9rem;
}
.partner-footer a{
  color:#38bdf8;
  transition:all 0.3s ease;
}
.partner-footer a:hover{
  color:#7dd3fc;
}

/* ============================================
   YHTEYS - Napit modaaleille
   ============================================ */
.contact-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1.5rem;
}
.contact-buttons .btn{
  padding:0.7rem 1.4rem;
  font-size:0.9rem;
}

/* ============================================
   KOSKEN ASENNUS - Pääyhtiö
   ============================================ */
.partner-section{
  padding:2rem 1.5rem;
  border-top:1px solid rgba(148,163,184,0.08);
  margin-top:1rem;
}
.partner-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  padding:1.5rem;
  background:rgba(15,23,42,0.5);
  backdrop-filter:blur(10px);
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.2);
}
.partner-box p{
  color:#94a3b8;
  font-size:0.95rem;
  margin:0;
}
.partner-box strong{color:#f9fafb;}
.partner-box .btn{
  padding:0.7rem 1.5rem;
  font-size:0.9rem;
}

/* ============================================
   MOBIILI - Leadership
   ============================================ */
@media(max-width:1024px){
  .leadership-section .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .leadership-section .team-grid{grid-template-columns:1fr;}
  .leadership-section .team-card img{width:160px;height:160px;}
}

/* Print styles */
@media print{
  .site-header,
  .nav-toggle,
  .hero-actions,
  .modal,
  .nav-overlay{display:none !important;}
  body{
    font-size:12pt;
    line-height:1.5;
    color:#000;
    background:#fff;
  }
  .section{padding:1rem 0;page-break-inside:avoid;}
  .card{
    box-shadow:none;
    border:1px solid #ccc;
    background:#fff;
  }
  a{text-decoration:underline;color:#000;}
}
/* ============================================
   ACCORDION TEKSTI - PAKOTETTU NÄKYVIIN
   ============================================ */

.acc-card .acc-body,
.acc-card .acc-body p,
.acc-card .acc-body * {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
  height: auto !important;
}

/* Poista mahdolliset ellipsis rajoitukset */
.acc-card summary,
.acc-card .acc-body p {
  text-overflow: clip !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Näytä koko teksti avattaessa */
.acc-card[open] .acc-body {
  max-height: 1000px !important;
  height: auto !important;
}

.acc-card[open] .acc-body p {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   HIGHLIGHT-TEXT - Gradient-animaatio mobiilissa
   ============================================ */

.highlight-text{
  display:none;  /* Piilota oletuksena */
}

@media(max-width:768px){
  .highlight-text{
    display:block;
    text-align:center;
    margin:2.5rem 0;        /* Tilaa ylä- ja alapuolelle */
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.15em;
    text-transform:uppercase;
    background:linear-gradient(90deg,#38bdf8,#2563eb,#7dd3fc,#38bdf8);
    background-size:300% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:gradient-flow 4s ease infinite;
  }
  
  @keyframes gradient-flow{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
}
/* ============================================
   SECTION-DIVIDER - Kompakti ja tyylikäs
   ============================================ */

.section-divider{
  display:none;
}

@media(max-width:768px){
  .section-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:2rem 0 1.5rem;    /* Pieni marginaali ylhäällä, vielä pienempi alhaalla */
    position:relative;
  }
  
  /* Lyhyt viiva */
  .section-divider::before{
    content:'';
    width:40px;
    height:1px;
    background:linear-gradient(90deg,transparent,#38bdf8,transparent);
    opacity:0.6;
  }
  
  /* Piste keskellä */
  .section-divider::after{
    content:'';
    position:absolute;
    width:6px;
    height:6px;
    background:#38bdf8;
    border-radius:50%;
    box-shadow:0 0 10px rgba(56,189,248,0.5);
    animation:pulse-dot 2s ease-in-out infinite;
  }
  
  @keyframes pulse-dot{
    0%,100%{transform:scale(1);opacity:0.6;}
    50%{transform:scale(1.3);opacity:1;}
  }
}
/* ============================================
   ACCORDION - Premium ilme kuvakkeilla
   ============================================ */

@media(max-width:768px){
  .acc-card{
    background:linear-gradient(145deg,rgba(15,23,42,0.8),rgba(2,6,23,0.9));
    border:1px solid rgba(56,189,248,0.1);
    border-radius:1rem;
    margin-bottom:0.75rem;
    overflow:hidden;
    position:relative;
    transition:all 0.3s ease;
  }
  
  /* Hehku reunalle hoverissa */
  .acc-card:hover{
    border-color:rgba(56,189,248,0.3);
    box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 0 1px rgba(56,189,248,0.1);
    transform:translateX(4px);
  }
  
  /* Summary - otsikkoalue */
  .acc-card summary{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.2rem 1.5rem;
    cursor:pointer;
    position:relative;
  }
  
  /* Ikoni container */
  .acc-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(56,189,248,0.1),rgba(37,99,235,0.1));
    border:1px solid rgba(56,189,248,0.2);
    border-radius:0.75rem;
    font-size:1.3rem;
    flex-shrink:0;
    transition:all 0.3s ease;
  }
  
  /* Ikoni itse */
  .acc-icon svg,
  .acc-icon i{
    width:24px;
    height:24px;
    color:#38bdf8;
    filter:drop-shadow(0 0 8px rgba(56,189,248,0.4));
  }
  
  /* Teksti */
  .acc-title{
    flex:1;
    font-size:0.95rem;
    font-weight:500;
    color:#f9fafb;
    letter-spacing:0.02em;
  }
  
  /* Nuoli */
  .acc-arrow{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#38bdf8;
    transition:transform 0.3s ease;
  }
  
  /* Avattu tila */
  .acc-card[open] .acc-icon{
    background:linear-gradient(135deg,#2563eb,#38bdf8);
    border-color:transparent;
  }
  
  .acc-card[open] .acc-icon svg,
  .acc-card[open] .acc-icon i{
    color:#0b1120;
    filter:none;
  }
  
  .acc-card[open] .acc-arrow{
    transform:rotate(180deg);
  }
  
  /* Sisältö */
  .acc-body{
    padding:0 1.5rem 1.5rem 4.4rem;  /* Vasen padding ikonin kohdalle */
    border-top:1px solid rgba(56,189,248,0.05);
  }
  
  .acc-body p{
    color:#94a3b8;
    font-size:0.9rem;
    line-height:1.7;
    margin:0;
  }
  
  /* Korostus avatessa */
  .acc-card[open]{
    background:linear-gradient(145deg,rgba(15,23,42,0.9),rgba(2,6,23,0.95));
    border-color:rgba(56,189,248,0.2);
  }
}

.hero-text h1{
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:1rem;
  font-weight:700;
  color:#ffffff;                        /* Puhdas valkoinen */
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}

.hero-text p{
  margin-bottom:0.7rem;
  color:#e2e8f0;                        /* Vaaleampi harmaa */
  line-height:1.8;                      /* Lisää riviväliä */
  font-size:1.05rem;
  max-width:34rem;
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
}
.card{
  background:rgba(15,23,42,0.8);        /* Tummempi tausta */
  backdrop-filter:blur(12px);
  border-radius:1.2rem;
  padding:1.8rem;
  border:1px solid rgba(56,189,248,0.15);  /* Kirkkaampi reunus */
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition:all 0.4s ease;
}

.card h3{
  font-size:1.15rem;
  margin-bottom:0.8rem;
  color:#ffffff;                        /* Valkoinen otsikko */
  font-weight:600;
}

.card p{
  font-size:0.95rem;
  color:#94a3b8;
  line-height:1.7;
}
/* ============================================
   ABOUT-OSIO - TASAPAINOTETTU ASETTELU
   ============================================ */

.about-section{
  padding:0 0 2rem !important;  /* Poista yläpadding, pienempi alapadding */
  margin-top:-6rem;              /* Nosta ylemmäs (negatiivinen marginaali) */
  position:relative;
}

/* Hienovarainen yläreuna */
.about-section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:linear-gradient(90deg,transparent,#38bdf8,transparent);
  opacity:0.5;
}

.about-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2.2rem;
  align-items:center;     /* Keskitä molemmat pystysuunnassa */
}

/* Teksti wrapper - lisää tyhjää ylhäälle */
.about-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:-2rem;       /* Nosta tekstiä alemmas */
  margin-top:-4rem !important;
}

.about-text p{
  margin-bottom:0.8rem;   /* Pienempi väli kappaleiden välillä */
  color:#cbd5e1;
  line-height:1.7;
}

.about-text p:first-child{
  margin-top:0;
  font-size:1.05rem;
  color:#e5e7eb;
}

/* Kuva wrapper - pienempi ja keskitetty */
.about-image-wrapper{
  position:relative;
  aspect-ratio:4/3;       /* Kiinteä mittasuhde */
  max-height:320px;       /* Pienempi korkeus */
  width:100%;
  border-radius:1rem;     /* Pienempi pyöristys */
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.05);
  align-self:center;      /* Keskitä pystysuunnassa */
  margin-top:2rem;        /* Nosta kuvaa alemmas tekstin tasolle */
}

.about-image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 0.6s ease;
}

.about-image-wrapper:hover .about-image{
  transform:scale(1.03);
}

/* Responsiivisuus */
@media(max-width:768px){
  .about-section{
    margin-top:0;         /* Poista negatiivinen marginaali mobiilissa */
    padding:1rem 0 !important;
  }
  
  .about-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  
  .about-text{
    padding-top:0;
  }
  
  .about-image-wrapper{
    max-height:250px;
    margin-top:0;
    order:-1;
  }
}
/* ============================================
   TARJOUSPYYNTÖ-MODAALI - Kavennettu PC:ssä
   ============================================ */

/* PC-näkymä - kavennettu modaali */
@media (min-width: 769px) {
  #tarjous-modal .modal-panel {
    width: min(600px, calc(100% - 2rem)) !important;  /* Kavenna 600px */
    max-width: 600px !important;
  }
  
  #tarjous-modal .team-grid.single-card {
    max-width: 350px !important;  /* Kavenna korttialuetta */
  }
  
  #tarjous-modal .team-card {
    padding: 2rem !important;  /* Pienennä paddingia */
  }
  
  #tarjous-modal .team-card img {
    width: 160px !important;  /* Pienennä kuvaa */
    height: 200px !important;
  }
}

/* Mobiili - säilytä täysleveys */
@media (max-width: 768px) {
  #tarjous-modal .modal-panel {
    width: calc(100% - 1rem) !important;
    margin: 0.5rem !important;
  }
}
/* ============================================
   MOBIILI-HERO - Moderni, kompakti tyyli
   ============================================ */

@media(max-width:768px){
  .hero{
    padding:5rem 0 2.5rem;
    min-height:auto;  /* Poista kiinteä korkeus */
  }
  
  /* Otsikko: selkeä mutta ei dominoiva */
  .hero-text h1{
    font-size:1.5rem;      /* Sopivan kokoinen */
    line-height:1.2;
    font-weight:600;       /* Hieman kevyempi */
    margin-bottom:1rem;
    letter-spacing:-0.02em; /* Moderni tiivis tracking */
  }
  
  /* Lead-teksti: avainviesti */
  .hero-lead{
    font-size:0.95rem;
    line-height:1.5;
    color:#e2e8f0;
    margin-bottom:0;
  }
  
  /* Toissijainen teksti: kompaktimpi */
  .hero-text > p:not(.hero-lead){
    font-size:0.85rem;
    line-height:1.5;
    color:#94a3b8;         /* Vaaleampi = vähemmän tärkeä */
    margin-top:0.75rem;
    margin-bottom:0;
  }
  
  /* Visuaalinen erotin ennen nappeja */
  .hero-actions{
    margin-top:1.25rem;
    padding-top:1.25rem;
    border-top:1px solid rgba(56,189,248,0.15);  /* Hienovarainen viiva */
    gap:0.6rem;
  }
  
  .hero-actions .btn{
    padding:0.75rem 1.4rem;
    font-size:0.85rem;
  }
}
/* ============================================
   MOBIILI-HERO - Parempi kontrasti ja värit
   ============================================ */

@media(max-width:768px){
  /* Otsikko: puhtaan valkoinen */
  .hero-text h1{
    font-size:1.5rem;
    line-height:1.2;
    font-weight:600;
    margin-bottom:1rem;
    color:#ffffff;           /* Puhdas valkoinen */
    text-shadow:0 2px 10px rgba(0,0,0,0.3);
  }
  
  /* Ensimmäinen kappale: kirkas harmaa */
  .hero-lead{
    font-size:1rem;          /* Hieman isompi */
    line-height:1.6;         /* Lisää riviväliä */
    color:#f1f5f9;           /* Vaaleanharmaa, hyvä kontrasti */
    font-weight:400;
    margin-bottom:0;
  }
  
  /* Toinen kappale: selkeästi erottuva */
  .hero-text > p:not(.hero-lead){
    font-size:0.9rem;        /* Isompi kuin aiemmin */
    line-height:1.6;
    color:#cbd5e1;           /* Kirkkaampi harmaa */
    margin-top:0.75rem;
    margin-bottom:0;
  }
  
  /* Korosta avainsanat */
  .hero-text strong{
    color:#38bdf8;           /* Sininen korostus */
    font-weight:500;
  }
  
  /* Viiva ennen nappeja */
  .hero-actions{
    margin-top:1.25rem;
    padding-top:1.25rem;
    border-top:1px solid rgba(56,189,248,0.2);
    gap:0.6rem;
  }
}
@media(max-width:768px){
  .services-accordion{
    gap:0.4rem;
  }
  
  .acc-card{
    background:rgba(255,255,255,0.03);
    border:none;
    border-radius:0.6rem;
    backdrop-filter:blur(20px);
  }
  
  .acc-card:hover{
    background:rgba(255,255,255,0.06);
  }
  
  .acc-card[open]{
    background:rgba(56,189,248,0.08);
  }
  
  .acc-card summary{
    padding:0.85rem 1rem;
    font-size:0.88rem;
    font-weight:400;
    color:#ffffff;
  }
  
  .acc-card summary::after{
    content:'›';
    font-size:1.3rem;
    color:#64748b;
    transform:none;
  }
  
  .acc-card[open] summary::after{
    color:#38bdf8;
    transform:rotate(90deg);
  }
  
  .acc-body p{
    font-size:0.8rem;
    color:#cbd5e1;
  }
}
/* ============================================
   YHTEYS-OSIO - Nosta ylemmäs
   ============================================ */

@media(max-width:768px){
  #yhteys{
    padding:1.5rem 0 2rem !important;
    margin-top:-2rem !important;  /* Nosta ylemmäs */
    position:relative;
    z-index:1;
  }
  
  #yhteys .container{
    padding-top:0 !important;
  }
  
  #yhteys .section-header{
    margin-bottom:0.75rem;
    padding-top:0 !important;
  }
  
  #yhteys .section-header h2{
    font-size:1.4rem;
    margin-bottom:0.5rem;
  }
  
  /* Tämä teksti: "Haluatko lisätietoja..." */
  #yhteys .contact-info > p:first-of-type{
    margin-top:0 !important;
    margin-bottom:0.5rem !important;
    font-size:0.9rem;
    line-height:1.5;
    color:#e2e8f0;
  }
  
  /* Muut kappaleet */
  #yhteys .contact-info p{
    margin-bottom:0.5rem;
    font-size:0.85rem;
    color:#94a3b8;
  }
  
  /* Napit */
  #yhteys .contact-buttons{
    margin-top:1rem;
    margin-bottom:0;
  }
}
/* ============================================
   FOOTER - Moderni mobiilityyli
   ============================================ */

@media(max-width:768px){
  .site-footer{
    padding:2rem 0 0;
  }
  
  .footer-grid{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding:0 1rem 1.5rem;
  }
  
  /* Team Kosken - kuvaus */
  .footer-col:first-child{
    text-align:center;
    order:2;  /* Siirrä alimmaksi */
  }
  
  .footer-col:first-child h3{
    font-size:1.1rem;
    margin-bottom:0.5rem;
    color:#f8fafc;
  }
  
  .footer-col:first-child p{
    font-size:0.85rem;
    color:#94a3b8;
    line-height:1.5;
  }
  
  /* Pikalinkit - vaakasuoraan */
  .footer-col:nth-child(2){
    order:1;  /* Ylimmäksi */
  }
  
  .footer-col:nth-child(2) h4{
    display:none;  /* Piilota "Pikalinkit" otsikko */
  }
  
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.5rem 1rem;
  }
  
  .footer-links li{
    margin:0;
  }
  
  .footer-links a{
    font-size:0.85rem;
    color:#cbd5e1;
    padding:0.3rem 0;
    position:relative;
  }
  
  .footer-links a::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:1px;
    background:#38bdf8;
    transition:width 0.3s ease;
  }
  
  .footer-links a:hover{
    color:#38bdf8;
  }
  
  .footer-links a:hover::after{
    width:100%;
  }
  
  /* Yhteystiedot */
  .footer-col:nth-child(3){
    order:3;
    text-align:center;
  }
  
  .footer-col:nth-child(3) h4{
    font-size:0.9rem;
    margin-bottom:0.5rem;
    color:#f8fafc;
  }
  
  .footer-col:nth-child(3) p{
    font-size:0.85rem;
    color:#94a3b8;
  }
  
  /* Partner-box */
  .partner-section{
    margin-top:0;
    padding:1rem;
  }
  
  .partner-box{
    padding:1rem;
  }
  
  .partner-box p{
    font-size:0.85rem;
  }
  
  /* Footer bottom */
  .footer-bottom{
    padding:1rem 0;
    margin-top:0;
  }
  
  .footer-bottom-inner{
    flex-direction:column;
    gap:0.5rem;
    text-align:center;
    font-size:0.75rem;
  }
}
/* ============================================
   FOOTER BOTTOM - Sivukartta samalle riville
   ============================================ */

@media(max-width:768px){
  .footer-bottom-inner{
    display:flex !important;
    flex-direction:row !important;  /* Vaakasuora */
    justify-content:center !important;
    align-items:center !important;
    gap:0.5rem !important;  /* Pieni väli tekstin ja linkin välillä */
    flex-wrap:nowrap !important;  /* Ei rivinvaihtoa */
  }
  
  .footer-bottom-inner p{
    margin:0 !important;
    white-space:nowrap !important;  /* Teksti yhdelle riville */
  }
  
  .footer-bottom-inner a{
    margin:0 !important;
    white-space:nowrap !important;
  }
}