/* «Wow»-yksityiskohdat: palvelusivujen logokortti (hehkuva kiertävä reuna + tie, jota pitkin auto
   ajaa), alatunnisteen logon odotustila ja lisätyn WhatsApp-lohkon avaus. Värit teemasta. */

/* ---------- Logokortti (.mc-sivukortti, lib/ulkoasu.js) ---------- */
@property --mc-kulma { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.mc-sivukortti { position: relative; isolation: isolate; overflow: hidden; }
/* Kiertävä valoreuna */
.mc-sivukortti::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--mc-kulma), transparent 0deg, color-mix(in srgb, var(--primary) 90%, #fff) 40deg, transparent 110deg, transparent 180deg, color-mix(in srgb, var(--primary) 60%, transparent) 230deg, transparent 300deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mc-kierra 6s linear infinite;
}
/* Pehmeä valokeila logon takana */
.mc-sivukortti::after {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 18%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
  animation: mc-sykkii 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mc-kierra { to { --mc-kulma: 360deg; } }
@keyframes mc-sykkii { 0%, 100% { opacity: .55; scale: .95; } 50% { opacity: 1; scale: 1.05; } }

/* Tie logon alla: keskiviiva liukuu auton alta taaksepäin (auto on menossa vasemmalle = eteenpäin) */
.mc-sivukortti__tie {
  display: block; width: 86%; height: 3px; margin: -6px auto 8px; border-radius: 3px; opacity: .8;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--primary) 85%, transparent) 0 18px, transparent 18px 34px) 0 0 / 34px 100%,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  animation: mc-tie .9s linear infinite paused;
}
.mc-sivukortti .mc-logo--aja ~ .mc-sivukortti__tie { animation-play-state: running; }
@keyframes mc-tie { to { background-position: 34px 0, 0 0; } }
.mc-sivukortti__nappi { position: relative; overflow: hidden; }
.mc-sivukortti__nappi::after {
  content: ""; position: absolute; inset: 0; translate: -120% 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  animation: mc-kiilto-nappi 4.5s ease-in-out 2s infinite;
}
@keyframes mc-kiilto-nappi { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }

/* Puhelimella kortti näkyy (ennen piilossa) koko leveänä sisällön jälkeen */
@media screen and (max-width: 767px) {
  .mc-sivukortti { display: flex !important; margin: 8px 0 12px; padding: 30px 20px 26px; }
  .mc-sivukortti .mc-logo--iso { max-width: 280px; }
  .mc-sivukortti__otsikko { font-size: 24px; }
  .mc-sivukortti__puh { font-size: 19px; }
}

/* ---------- Alatunnisteen logo odottaa näkyviin tuloa (js/ulkoasu.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mc-logo--odottaa:not(.mc-logo--aja) .mc-logo__osa { opacity: 0; }
}

/* ---------- Palvelimella lisätty WhatsApp-lohko ---------- */
.mc-wa-oma .whatsapp-chat { display: none; }
.mc-wa-oma.auki .whatsapp-chat { display: flex; animation: mc-wa-auki .25s ease-out both; }
.mc-wa-oma .whatsapp-container { cursor: pointer; }
.mc-wa-oma .whatsapp-container:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@keyframes mc-wa-auki { from { opacity: 0; translate: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  .mc-sivukortti::before, .mc-sivukortti::after, .mc-sivukortti__tie, .mc-sivukortti__nappi::after { animation: none; }
}

/* ---------- Palvelukortit ilmestyvät yksi kerrallaan (js/ulkoasu.js) ----------
   filter/translate eivät törmää Webflow-animaatioihin, jotka käyttävät opacity/transform-ominaisuuksia. */
@media (prefers-reduced-motion: no-preference) {
  .mc-porras { transition: filter .8s ease var(--mc-viive, 0ms), translate .8s cubic-bezier(.2, .8, .2, 1) var(--mc-viive, 0ms), box-shadow .3s ease; }
  .mc-porras:not(.mc-esiin) { filter: opacity(0); translate: 0 46px; }
}

/* ---------- Sujuvuus puhelimella ---------- */
/* Lasiefekti (backdrop-filter) on puhelimella raskas vierittäessä → läpikuultamaton tumma palkki */
@media screen and (max-width: 991px) {
  html.mc-vieritetty .navbar, .navbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.mc-vieritetty .navbar { background-color: rgba(14, 14, 14, .96) !important; }
  .mc-ylos { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(20, 20, 20, .92); }
}
/* Logokortin jatkuvat animaatiot pysähtyvät, kun kortti ei ole näkyvissä (js/ulkoasu.js lisää .mc-nakyy) */
.mc-sivukortti:not(.mc-nakyy)::before, .mc-sivukortti:not(.mc-nakyy)::after,
.mc-sivukortti:not(.mc-nakyy) .mc-sivukortti__tie, .mc-sivukortti:not(.mc-nakyy) .mc-sivukortti__nappi::after { animation-play-state: paused !important; }

/* ---------- Lomailmoitus (lib/varaus-sivu.js): kiinteä 40 px palkki ylhäällä, valikko sen alla
   (sama periaate kuin kampanjapalkissa; jos molemmat, loma ylimpänä) ---------- */
.mc-lomapalkki {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1002; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px;
  font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, #151515, color-mix(in srgb, var(--primary) 24%, #151515), #151515);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}
.mc-lomapalkki__merkki {
  flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mc-on-primary, #111); background: var(--primary); border-radius: 999px; padding: 3px 10px;
}
.mc-lomapalkki__pitka, .mc-lomapalkki__lyhyt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-lomapalkki__lyhyt { display: none; }
@media screen and (max-width: 767px) {
  .mc-lomapalkki { font-size: 13px; gap: 8px; padding: 0 10px; }
  .mc-lomapalkki__pitka { display: none; }
  .mc-lomapalkki__lyhyt { display: inline; }
}
body:has(> .mc-lomapalkki) { padding-top: 40px; }
body:has(> .mc-lomapalkki) .navbar { top: 40px; }
body:has(> .mc-lomapalkki):has(> .mc-kampanjapalkki) { padding-top: 80px; }
body:has(> .mc-lomapalkki):has(> .mc-kampanjapalkki) .navbar { top: 80px; }
body:has(> .mc-lomapalkki) > .mc-kampanjapalkki { top: 40px; }

/* ---------- Yhtenäinen varjo kaikille korteille: sama hehku kuin Ajanvaraukseen-painikkeessa ----------
   Painike: 0 6px 18px -6px teemaväri 35 %. Korteille sama sävy hieman suurempana, hiiren päällä voimakkaampi
   (kuten painikkeen hover). Ladataan viimeisenä → korvaa aiemmat erilaiset mustat varjot. */
:root {
  /* Kompakti sumennus: sama ilme, mutta vieritys kevyempi (iso sumennus monessa kortissa kuormitti näytönohjainta) */
  /* Ohut teemavärinen reunahehku (kevyt piirtää) + pehmeä hehku alla; hiirellä voimakkaampi ja kortti nousee */
  --mc-varjo: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 8px 22px -8px color-mix(in srgb, var(--primary) 50%, transparent);
  --mc-varjo-nosto: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
.card.social-media-card, .mc-paketit .mc-paketti, .team-circles .team-card, .mc-info-card, .mc-varaus,
.block-horizontal > div, .service-wrapper, .mc-ref, .mc-arv, .mc-arv__kortti, .mc-t-kortti, .mc-t-valinta,
.mc-hinnat, .mc-sivukortti, .image-cover.height-550, .image-full-block, .mc-varaus .mc-v-paketti, .mc-varaus .mc-v-muu {
  box-shadow: var(--mc-varjo) !important;
  transition-property: box-shadow, transform, border-color, filter, translate, background-color, color;
}
.card.social-media-card:hover, .mc-paketit .mc-paketti:hover, .block-horizontal > div:hover, .service-wrapper:hover,
.mc-ref:hover, .mc-ref:focus-visible, .mc-t-valinta:hover, .mc-t-valinta:focus-visible, .mc-varaus .mc-v-paketti:hover, .mc-varaus .mc-v-muu:hover {
  box-shadow: var(--mc-varjo-nosto) !important;
}
/* Suosituin paketti ja valittu vaihtoehto: teemavärinen reuna säilyy varjon lisäksi */
.mc-paketti.featured-pricing { box-shadow: 0 0 0 1px var(--primary), var(--mc-varjo-nosto) !important; }
.mc-varaus .mc-v-paketti.valittu, .mc-varaus .mc-v-muu.valittu { box-shadow: inset 0 0 0 1px var(--primary), var(--mc-varjo-nosto) !important; }
/* Kuvien sisällä olevaa varjoa ei tuplata */
.image-full-block .image-cover.height-550 { box-shadow: none !important; }

/* ---------- Sujuvuus: pienten logojen (yläpalkki, alatunniste) tähdet tuikkivat ja kiilto kulkee kerran
   saapumisen jälkeen, ei loputtomasti – jatkuva animaatio piirsi logon uudelleen koko vierityksen ajan ---------- */
.navbar .mc-logo__osa, .footer .mc-logo__osa, .navbar .mc-logo__kiilto, .footer .mc-logo__kiilto { animation-iteration-count: 1 !important; }

/* ---------- Tuotekuvat (Gyeon, Korrek, King Carthur…): nousevat näkyviin, leijuvat hehkuvan alustan päällä,
   hiirellä 3D-kallistus ja kiilto. Vain transform/opacity-animaatioita → kevyt. js/ulkoasu.js lisää luokat. ---------- */
.lightbox-link.mc-tuote { position: relative; display: block; isolation: isolate; container-type: inline-size; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
/* Kuva pysyy Webflow'n asettelussa (position: absolute; inset: 0) – vain kerrosjärjestys */
.mc-tuote .product-image { z-index: 1; will-change: transform; backface-visibility: hidden; }
/* Alusta: teemavärinen valolaikku tuotteen alla */
.mc-tuote::after {
  content: ""; position: absolute; z-index: 0; left: 18%; right: 18%; top: calc(50% + 40cqw); height: 8cqw; /* heti tuotteen alla: kuva on keskitetty neliö */ border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 55%, transparent), transparent);
  opacity: .8; will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
  /* Saapuminen alhaalta (translate/scale erillään leijunnan transformista) */
  .mc-tuote .product-image { transition: translate 1s cubic-bezier(.2, .8, .2, 1), scale 1s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
  .mc-tuote:not(.mc-tuote--esiin) .product-image { translate: 0 60px; scale: .9; opacity: 0; }
  .mc-tuote:not(.mc-tuote--esiin)::after { opacity: 0; }
  /* Leijunta vain näkyvissä olevalle tuotteelle */
  .mc-tuote--esiin.mc-tuote--nakyy .product-image { animation: mc-leiju 4.5s ease-in-out 1s infinite; }
  .mc-tuote--esiin.mc-tuote--nakyy::after { animation: mc-alusta 4.5s ease-in-out 1s infinite; }
  /* Kiilto hiiren päällä, rajattu tuotteen muotoon */
  .mc-tuote::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) no-repeat;
    mix-blend-mode: soft-light; /* kiiltää vaaleilla pinnoilla, ei harmaata läikkää tummalle taustalle */
    background-size: 250% 100%; background-position: 150% 0;
    -webkit-mask: var(--kuva) center / contain no-repeat; mask: var(--kuva) center / contain no-repeat;
  }
  .mc-tuote:hover::before { opacity: 1; animation: mc-tuotekiilto 1s ease-out forwards; }
}
/* Tuote «hengittää»: lähenee hieman ja loittonee, samalla kevyt leijunta */
@keyframes mc-leiju { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.07); } }
@keyframes mc-alusta { 0%, 100% { transform: scaleX(1); opacity: .8; } 50% { transform: scaleX(.78); opacity: .45; } }
@keyframes mc-tuotekiilto { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Kortti nousee hiiren alla (translate erillään Webflow-animaatioiden transformista) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .block-horizontal > div, .mc-ref, .mc-paketit .mc-paketti, .card.social-media-card, .mc-info-card, .mc-t-valinta, .team-circles .team-card {
    transition: box-shadow .35s ease, translate .35s cubic-bezier(.2, .8, .2, 1), filter .8s ease, border-color .3s ease;
  }
  .block-horizontal > div:hover, .mc-paketit .mc-paketti:hover, .card.social-media-card:hover, .mc-info-card:hover, .team-circles .team-card:hover { translate: 0 -6px; }
  .mc-info-card:hover, .team-circles .team-card:hover { box-shadow: var(--mc-varjo-nosto) !important; }
  /* Ilmestymisen jälkeen nopea reagointi (ei ilmestymisen viivettä) */
  .mc-porras.mc-valmis { transition: box-shadow .35s ease, translate .35s cubic-bezier(.2, .8, .2, 1), filter .3s ease; }
}

/* ---------- Palvelusivujen yläkuva: otsikko ei sekoitu taustan logoihin/kuviin (vasemmalta tummempi) ---------- */
.section-with-height.services-details { position: relative; }
.section-with-height.services-details::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .72) 45%, rgba(10, 10, 10, .35) 100%);
}
.section-with-height.services-details > .container { position: relative; z-index: 2; }
.section-with-height.services-details h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }

/* ---------- Alatunniste: turha väli ennen tekijänoikeusriviä pois ---------- */
.footer .footer-wrapper { padding-bottom: 28px !important; }
.footer .footer-bottom-wrapper { padding-top: 22px !important; padding-bottom: 26px !important; margin-top: 0 !important; }
.footer { padding-bottom: 0 !important; }
@media screen and (max-width: 767px) { .footer { padding-bottom: 130px !important; } }

/* ---------- Valokeila (js/ulkoasu.js): vuorollaan hehkuva kortti, sama tyyli kuin nouto-vaiheissa ---------- */
.mc-valo {
  border-color: color-mix(in srgb, var(--primary) 85%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 75%, transparent), 0 14px 38px -8px color-mix(in srgb, var(--primary) 75%, transparent), 0 0 28px -6px color-mix(in srgb, var(--primary) 55%, transparent) !important;
}
/* (ei kirkkaussuodatinta: se välähti isoissa korteissa) */

/* ---------- Yläkuvan hehku kaikille sivuille (sama kuin Autonhakupalvelut-sivulla) ---------- */
.section-with-height .bgr-projects, .section-with-height.default, .section-with-height-copy, .legal-banner {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 10px 34px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
.section-with-height.default, .section-with-height-copy { border-radius: 0 0 10px 10px; }
.main-service .service-rich-text h3 { margin: 26px 0 12px; font-size: 22px; }
.main-service .service-rich-text ul { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.main-service .service-rich-text ul li { position: relative; padding-left: 24px; line-height: 1.6; }
.main-service .service-rich-text ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent); }
/* Hehku näkyy seuraavan (läpinäkymättömän) osion päällä */
header .section-with-height, header .section-with-height-copy, header .legal-banner { position: relative; z-index: 2; }

/* ---------- Sisällön painikkeet: yhtenäinen koko, teksti ei katkea, vasemmalle tasattu rivi ---------- */
main .button-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 18px !important; }
main .button-wrapper .w-button { white-space: nowrap; min-width: 170px; text-align: center; margin: 0 !important; padding-left: 26px; padding-right: 26px; }
@media screen and (max-width: 479px) { main .button-wrapper .w-button { flex: 1 1 100%; min-width: 0; } }
.main-service .service-rich-text h2:not(:first-child) { margin-top: 30px !important; }

/* ---------- Paluu kaikkiin palveluihin (lib/ulkoasu.js) ---------- */
.mc-takaisin {
  display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 3; margin-bottom: 18px;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(20, 20, 20, .6); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s, color .2s, border-color .2s;
}
.mc-takaisin span { color: var(--primary); transition: translate .2s; }
.mc-takaisin:hover { background: var(--primary); color: var(--mc-on-primary, #111); border-color: var(--primary); }
.mc-takaisin:hover span { color: inherit; translate: -3px 0; }
.mc-takaisin-ala { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; padding: 8px 16px 56px; }
.mc-takaisin-ala .mc-takaisin { margin: 0; }
.mc-takaisin--iso { font-size: 16px; padding: 12px 22px; }
@media screen and (max-width: 767px) {
  .mc-takaisin-ala { flex-direction: column; padding-bottom: 40px; }
  .mc-takaisin-ala > * { width: 100%; max-width: 360px; justify-content: center; text-align: center; }
}

/* ---------- Alatunniste puhelimella: keskitetty, siisti ---------- */
@media screen and (max-width: 767px) {
  .footer { padding-top: 36px !important; }
  .footer .footer-wrapper { gap: 22px !important; padding-bottom: 22px !important; }
  .mc-logo.footer-image { width: 150px; }
  .footer-links-wrapper {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px 22px !important; max-width: 340px; margin: 0 auto !important;
  }
  .footer-links-wrapper .footer-link, .footer-links-wrapper .footer-link * { font-size: 15px !important; font-weight: 500 !important; text-align: center; color: #d6d6d6 !important; }
  .footer-wrapper > .primary-button-copy { width: 100%; max-width: 320px; text-align: center; }
  .footer .footer-bottom-wrapper { justify-content: center !important; text-align: center; padding-top: 16px !important; margin-top: 0 !important; }
  .footer .footer-wrapper { margin-bottom: 0 !important; }
  .footer .left-block { width: 100%; }
  .footer-copyright { font-size: 13px !important; line-height: 1.7; color: #8c8c8c; }
}

/* ---------- Kaikki laitteet ---------- */
/* Ei sivuttaisvieritystä edes latauksen aikana (Webflow-valikko alustetaan hetken ruudun ulkopuolelle) */
html, body { overflow-x: clip; }
/* Napautuskohteet vähintään 44 px korkeiksi puhelimilla ja tableteilla */
@media (pointer: coarse), screen and (max-width: 991px) {
  .mc-sivukortti__puh, .mc-nouto__linkki, .mc-ref-kaikki, .mc-arv__linkki, .footer-links-wrapper .footer-link, .link-with-border a, .mc-t-linkit a, .mc-takaisin {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-links-wrapper .footer-link { padding: 0 4px !important; }
}

/* ---------- iPhone-korjaukset 2.10. ---------- */
@media screen and (max-width: 767px) {
  /* Yläpalkki aina läpinäkymätön: vieritetty teksti ei näy palkin läpi */
  .navbar { background-color: rgba(14, 14, 14, .97) !important; }
  /* Palvelusivujen ensimmäinen osio: ei isoa tyhjää väliä yläkuvan jälkeen */
  main > .section.light-background:first-child, main > section:first-child.section { padding-top: 36px !important; }
  .service-wrapper-default { row-gap: 0 !important; }
  /* Sisällön painikkeet: samanlevyiset, koko leveys */
  .main-service .w-button, .main-service .button-wrapper .w-button { display: block; width: 100% !important; max-width: none; margin: 0 0 12px !important; text-align: center; }
  .main-service .button-wrapper { flex-direction: column; align-items: stretch !important; gap: 0 !important; }
  /* Nouto-sivun esittely: otsikko ja teksti samaan linjaan (vasen) */
  .mc-nouto__yla { text-align: left; }
  .mc-nouto__intro h2, .mc-nouto__intro p { text-align: left !important; }
  .mc-nouto__merkki { margin-left: 0; }
}
@media screen and (max-width: 767px) {
  .navbar, html.mc-vieritetty .navbar { background-color: #0e0e0e !important; opacity: 1 !important; }
  .main-service .w-button, .main-service .button-wrapper, .main-service [class^="button-wrapper"] { left: auto !important; right: auto !important; top: auto !important; }
  .main-service [class^="button-wrapper"] { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; width: 100%; }
  .main-service [class^="button-wrapper"] .w-button { display: block; width: 100% !important; margin: 0 0 12px !important; text-align: center; }
  .mc-nouto .mc-nouto__yla .mc-nouto__intro h2, .mc-nouto .mc-nouto__yla .mc-nouto__intro p { text-align: left !important; }
  .mc-nouto .mc-nouto__yla { text-align: left !important; }
}
.banner-title-wrapper > .mc-takaisin { align-self: flex-start; }
@media screen and (max-width: 767px) { .banner-title-wrapper > .mc-takaisin { align-self: auto; } }