/* Arepa Oy — viimeistelty mobiili- ja tablet-asettelu kaikille sivuille */
:where(img, video, iframe) { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-wrap: anywhere; }
.wrap { width: min(var(--max, 1400px), calc(100% - 48px)); }
button, a, input, textarea, select { touch-action: manipulation; }
button, .btn, .navlinks a, .footer-links a { min-height: 44px; }
.menu-toggle { align-items: center; justify-content: center; }

@media (max-width: 1100px) {
  .wrap { width: min(var(--max, 1400px), calc(100% - 40px)); }
  .navlinks { gap: 10px; }
  .navlinks a { white-space: nowrap; }
  .hero-side { display: none; }
  .hero h1, .hero-copy { max-width: 100%; }
  .intro-grid, .about-grid, .contact-grid, .about-story { grid-template-columns: minmax(0, 1fr); }
  .intro-grid { gap: 28px; }
  .intro-copy { max-width: 760px; }
  .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .proof-items { max-width: none; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .detail-card img { width: 100%; height: 230px; min-height: 0; }
  .detail-copy { min-width: 0; }
  .about-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .wrap { width: calc(100% - 32px); }
  .topline { font-size: .68rem; letter-spacing: .04em; }
  .topline .wrap { min-height: 30px; justify-content: center; text-align: center; }
  .topline .top-right { display: none; }
  .header { position: relative; z-index: 20; }
  .nav { min-height: 68px; gap: 12px; position: relative; }
  .brand { width: 145px; flex: 0 1 145px; min-width: 0; }
  .brand img { max-width: 100%; height: 43px; object-fit: contain; }
  .menu-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid #ffffff45; border-radius: 6px; background: #102a3a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  .nav .nav-cta { display: none; }
  .navlinks { display: none; position: absolute; z-index: 50; top: 100%; left: -16px; right: -16px; width: auto; padding: 8px 20px 18px; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: #091a25; border-top: 1px solid #ffffff20; box-shadow: 0 18px 28px #0005; }
  .navlinks.open { display: flex; }
  .navlinks a { display: flex; align-items: center; min-height: 46px; padding: 10px 0; white-space: normal; font-size: .98rem; }
  .navlinks a:after { bottom: 4px; }
  .hero { min-height: 0; }
  .hero-bg { background-position: 58% center; }
  .hero-content { width: calc(100% - 32px); padding: 58px 0 54px; }
  .hero h1 { max-width: 100%; font-size: clamp(2.35rem, 9.5vw, 3.6rem); line-height: 1.06; overflow-wrap: normal; }
  .hero-copy { max-width: 100%; font-size: 1rem; }
  .hero .eyebrow { font-size: .72rem; letter-spacing: .11em; }
  .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(100%, 340px); max-width: 100%; }
  .hero-actions .btn { display: inline-flex; width: 100%; justify-content: center; align-items: center; min-height: 48px; }
  .section { padding: 54px 0; }
  .section-heading { margin-bottom: 28px; }
  h2 { font-size: clamp(1.7rem, 7vw, 2.25rem); line-height: 1.15; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service-tile { min-width: 0; min-height: 215px; clip-path: none; border-radius: 8px; }
  .tile-content { left: 14px; right: 12px; bottom: 14px; }
  .service-tile h3 { font-size: 1.05rem; line-height: 1.2; }
  .service-tile p { max-width: 100%; font-size: .82rem; line-height: 1.4; }
  .tile-link { display: none; }
  .service-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service-menu-card, .service-menu-card:first-child { min-width: 0; min-height: 210px; padding: 22px 18px; clip-path: none; border-radius: 8px; }
  .service-menu-description { max-width: 100%; }
  .service-menu-arrow { display: none; }
  .audience-grid { grid-template-columns: 1fr; gap: 12px; }
  .audience-card { height: auto; min-height: 0; padding: 20px; }
  .audience-icon { height: 48px; margin-bottom: 10px; }
  .audience-icon svg { width: 46px; height: 46px; }
  .proof-inner { padding: 30px 0; gap: 18px; }
  .proof-title h2 { font-size: clamp(1.8rem, 7.5vw, 2.5rem); }
  .proof-items { display: grid; grid-template-columns: 1fr; transform: none; width: 100%; }
  .proof-item { min-width: 0; min-height: 62px; justify-content: flex-start; gap: 14px; padding: 13px 16px; transform: none; border-right: 0; border-bottom: 1px solid #ffffff30; font-size: .92rem; }
  .proof-item:last-child { border-bottom: 0; }
  .proof-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .proof-icon img { width: 30px; height: 30px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .detail-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .detail-card img { width: 100%; height: clamp(185px, 52vw, 270px); min-height: 0; }
  .detail-copy { padding: 20px; }
  .detail-copy h3 { font-size: 1.2rem; line-height: 1.25; }
  .detail-copy p { font-size: .96rem; }
  .about-grid, .contact-grid, .about-story { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-photo { padding: 0 14px 14px 0; }
  .about-photo img { height: 260px; }
  .about-story-photo, .about-story-photo img { min-height: 0; height: 250px; max-height: none; }
  .about-stats { grid-template-columns: 1fr; gap: 10px; }
  .about-principles { grid-template-columns: 1fr; gap: 12px; }
  .about-service-grid { grid-template-columns: 1fr; gap: 12px; }
  .about-service-card { padding: 20px; }
  .about-cta .cta-inner { align-items: flex-start; flex-direction: column; gap: 18px; }
  .contact-grid { gap: 26px; }
  .contact-form { width: 100%; min-width: 0; padding: 20px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .field.full { grid-column: auto; }
  .field input, .field textarea, .field select { min-height: 46px; font-size: 16px; }
  .field textarea { min-height: 120px; }
  .contact-form .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; text-align: center; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 18px; }
  .footer-logo { width: 138px; }
  .footer-links { width: 100%; display: flex; gap: 4px 16px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 38px; font-size: .88rem; }
  .footer-credit { margin: 0; padding: 0; border: 0; white-space: normal; flex-wrap: wrap; }
  .footer-credit img { width: 138px; }
  .copyright { font-size: .78rem; }
}

@media (max-width: 520px) {
  .service-grid, .service-menu-grid { grid-template-columns: minmax(0, 1fr); }
  .service-tile { min-height: 205px; }
  .service-menu-card, .service-menu-card:first-child { min-height: 190px; }
  .hero-content { padding-top: 48px; padding-bottom: 46px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 3.15rem); }
  .section { padding: 46px 0; }
  .contact-form { padding: 17px; }
  .detail-copy { padding: 18px; }
  .footer-links { gap: 2px 12px; }
}

@media (max-width: 360px) {
  .wrap, .hero-content { width: calc(100% - 24px); }
  .nav { gap: 8px; }
  .brand { width: 125px; flex-basis: 125px; }
  .brand img { height: 39px; }
  .menu-toggle { padding: 7px 9px; font-size: .9rem; }
  .hero h1 { font-size: 2.05rem; }
  .proof-item { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-card, .detail-card img, .service-tile, .service-menu-card { transition: none !important; }
}


/* Palvelukuvakkeet pysyvät selkeinä myös avatussa mobiilivalikossa. */
@media(max-width:780px){
  .navlinks.open{flex-direction:row!important;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px!important;}
  .navlinks a.service-icon-link{width:48px;height:48px;min-height:48px;padding:7px;}
  .navlinks a.service-icon-link img{width:32px;height:32px;}
}

/* Footer service icons: only the four service links are represented by icons. */
.footer-links .footer-service-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;padding:5px;border-radius:6px;transition:background .2s,transform .2s;}
.footer-links .footer-service-icon img{display:block;width:27px;height:27px;object-fit:contain;}
.footer-links .footer-service-icon:hover,.footer-links .footer-service-icon:focus-visible{background:#ffffff18;transform:translateY(-2px);}


/* Footer alignment: center the Arepa logo and company ID; keep the design credit at the right. */
@media (min-width: 781px) {
  .footer-inner { justify-content: center; position: relative; padding-right: 170px; }
  .footer-logo { flex: 0 0 150px; }
  .copyright { text-align: center; }
  .footer-credit { position: absolute; right: 0; margin-left: 0; }
}
@media (max-width: 780px) {
  .footer-inner { align-items: center; padding-right: 0; }
  .footer-logo, .copyright { text-align: center; margin-left: auto; margin-right: auto; }
  .footer-credit { position: static; margin-left: 0; }
  .footer-links { justify-content: center; }
}


/* Navigation dropdowns for existing Maanrakennus and Talvikunnossapito pages only. */
.navlinks .nav-dropdown{position:relative;display:flex;align-items:center;gap:3px}
.navlinks .nav-dropdown>.nav-parent{display:block}
.navlinks .submenu-toggle{display:none;border:0;background:transparent;color:inherit;font:inherit;padding:8px;cursor:pointer}
.navlinks .submenu{display:none;position:absolute;z-index:1000;top:100%;left:-12px;min-width:245px;padding:8px;background:#0b1c2b;border:1px solid #ffffff24;border-radius:7px;box-shadow:0 12px 28px #0005}
.navlinks .submenu a{display:block;padding:10px 12px;white-space:normal;line-height:1.35;color:#fff;text-decoration:none;border-radius:4px}
.navlinks .submenu a:after{display:none}
.navlinks .submenu a:hover,.navlinks .submenu a:focus-visible{background:#ffffff12;color:#ffc400}
.navlinks .nav-dropdown:hover>.submenu,.navlinks .nav-dropdown:focus-within>.submenu,.navlinks .nav-dropdown.submenu-open>.submenu{display:block}
@media(max-width:780px){.navlinks .nav-dropdown{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;gap:0}.navlinks .nav-dropdown>.nav-parent{padding:12px 0;width:100%}.navlinks .submenu-toggle{display:block;min-width:40px;min-height:40px}.navlinks .submenu{position:static;grid-column:1/-1;min-width:0;width:100%;padding:4px 8px;margin:0 0 8px;box-shadow:none;border-radius:5px}.navlinks .submenu a{padding:10px 12px;font-size:.9rem}.navlinks .nav-dropdown:hover>.submenu{display:none}.navlinks .nav-dropdown.submenu-open>.submenu,.navlinks .nav-dropdown:focus-within>.submenu{display:block}}


/* Responsive hero and heading fixes (October 2026) */
.hero { min-height: clamp(390px, 54vw, 560px); }
.hero-content { box-sizing: border-box; width: min(var(--max, 1160px), calc(100% - 48px)); margin-inline: auto; padding-block: clamp(34px, 5vw, 62px); min-width: 0; }
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 4.35rem); line-height: 1.02; letter-spacing: -.04em; max-width: 820px; overflow-wrap: normal; word-break: normal; hyphens: auto; text-wrap: balance; }
.hero-copy { max-width: 650px; }
img, video, iframe { max-width: 100%; }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-content { width: calc(100% - 36px); padding: 34px 0 38px; }
  .hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.85rem); line-height: 1.04; letter-spacing: -.035em; max-width: 100%; overflow-wrap: normal; word-break: normal; }
  .hero-copy { max-width: 100%; font-size: 1rem; line-height: 1.55; }
  .hero-actions { max-width: 100%; }
  .hero-actions .btn { max-width: 100%; white-space: normal; }
  .wrap, .container, .section-inner { max-width: 100%; }
}
@media (max-width: 380px) {
  .hero-content { width: calc(100% - 28px); padding-top: 28px; padding-bottom: 30px; }
  .hero h1 { font-size: clamp(1.7rem, 7.8vw, 2.15rem); }
}