/* 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; }
}