/* Keyboard focus without changing the resting Webflow design. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--dark-green, #05807b) !important;
  outline-offset: 3px;
}

/* Preserve the template palette outside approved contrast corrections. */
:root {
  --sub-font: "Nunito Sans", sans-serif;
  --accessible-blue: #147296;
  --accessible-pink: #a9385d;
  --accessible-yellow: #997014;
  --accessible-green-hover: #08a7a1;
  --footer-blue: #16769b;
}

/* Approved body typography. Keep the Webflow heading/button font and original
 * export untouched; prose retains relative sizing for browser text resizing. */
.hero-banner-description,
.feature-description,
.program-description,
.section-description,
.paragraph-text,
.service-text,
.accordion-answer,
.rich-text-block {
  font-family: var(--sub-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

:is(.hero-banner-description, .feature-description, .program-description,
    .section-description, .paragraph-text, .service-text, .accordion-answer,
    .rich-text-block p, .rich-text-block li, .privacy-content p,
    .privacy-content li, .form-privacy) :is(strong, b) {
  font-weight: 600;
}

/* Treat a short compound as one inline unit while allowing it to reflow when
 * enlarged text makes the whole word wider than its containing paragraph. */
.text-keep-together[data-site-component="typography-compound"] {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Preserve heading fonts and sizes when visitors enlarge text. Long Finnish
 * headings may reflow instead of pushing a title wrapper outside the viewport. */
main :is(h1, h2, h3, h4, h5, h6),
main .title-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Intrinsic dimensions reserve space; Webflow's explicit crop heights still win. */
:where(img[width][height]) {
  height: auto;
}

/* Share the template's contact typography and colour across both card layouts. */
.contact-box .contact-text > a.contact-detail-link,
.contact-detail-contact-box .contact-text > a.contact-detail-link {
  color: inherit;
  font: inherit;
}

.contact-box .contact-text > a.contact-detail-link {
  text-decoration: none;
}

.contact-detail-contact-box .contact-text {
  min-width: 0;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Keep these links identifiable at rest; the email's WBR offers a break at @. */
.contact-detail-contact-box .contact-detail-link {
  text-decoration: underline;
  text-decoration-thickness: .065em;
  text-underline-offset: .15em;
  hyphens: none;
}

.contact-detail-contact-box .contact-icon-wrap {
  flex-shrink: 0;
}

/* A whole contact card is one native link, with its existing layout and colour. */
.contact-detail-contact-box.contact-card-link {
  color: inherit;
  text-decoration: none;
}

.contact-detail-contact-box.contact-card-link .contact-text {
  text-decoration: underline;
  text-decoration-thickness: .065em;
  text-underline-offset: .15em;
  hyphens: none;
}

/* Keep the whole-card focus ring inside sections that clip decorative edges. */
.contact-detail-contact-box.contact-card-link:focus-visible {
  outline-offset: -7px;
  box-shadow: none;
}

.contact-box .contact-text > a.contact-detail-link:hover,
.contact-box .contact-text > a.contact-detail-link:focus-visible,
.contact-detail-contact-box .contact-text > a.contact-detail-link:hover,
.contact-detail-contact-box .contact-text > a.contact-detail-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.nav-link-button,
.nav-link-button.w--current,
.menu-button,
.subtitle-text,
.submit-button,
.cta-button-wrap,
.view-more-button {
  color: var(--dark, #2f2b2b);
}

.nav-link-button:hover,
.nav-link-button.w--current:hover,
.nav-link-button:focus-visible,
.nav-link-button.w--current:focus-visible {
  color: #123c4a;
}

/* Keep the current page visible alongside the existing hover and focus styles. */
.nav-link-button:is([aria-current="page"], .w--current) {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}

/* Match footer navigation's underline effect with the approved white links. */
.header-nav .nav-link-button:hover,
.header-nav .nav-link-button:focus-visible {
  color: var(--white, #fff);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* A direct overview link and a separate disclosure preserve both destinations. */
.header-services {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.header-services[data-services-enhanced="true"] {
  padding-inline-end: calc(1.75rem + 6px);
}

.header-services.has-current-page > .nav-link-button {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.services-nav-toggle {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: var(--dark, #2f2b2b);
  cursor: pointer;
}

.header-services[data-services-enhanced="true"] > .services-nav-toggle {
  display: inline-flex;
}

.services-nav-toggle[hidden],
.services-nav-panel[hidden] {
  display: none !important;
}

.services-nav-toggle svg {
  transition: transform .2s ease;
}

.services-nav-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.services-nav-toggle:hover,
.services-nav-toggle:focus-visible {
  background: rgb(255 255 255 / .3);
}

.services-nav-toggle:focus-visible {
  outline: 3px solid var(--dark, #2f2b2b);
  outline-offset: 2px;
  box-shadow: none;
}

.services-nav-panel {
  list-style: none;
  max-width: 100%;
  margin: .5rem 0 0;
  padding: .5rem;
  background: var(--blue);
  border-radius: 20px;
}

.header-services[data-services-enhanced="true"] > .services-nav-panel {
  position: absolute;
  z-index: 2;
  top: calc(100% + 20px);
  left: var(--services-panel-offset, 0px);
  width: min(23rem, calc(100vw - 2rem));
  max-width: none;
  margin: 0;
  border: 1px solid rgb(47 43 43 / .15);
  box-shadow: 0 .5rem 1.5rem rgb(47 43 43 / .18);
}

/* The transparent bridge keeps the pointer inside the same disclosure group. */
.header-services[data-services-enhanced="true"] > .services-nav-panel::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  height: 21px;
}

.services-nav-link {
  display: block;
  min-width: 0;
  padding: .75rem 1rem;
  border-radius: .75rem;
  font-family: var(--main-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  color: var(--dark, #2f2b2b);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.services-nav-link:hover,
.services-nav-link:focus-visible,
.services-nav-link[aria-current="page"] {
  color: var(--dark, #2f2b2b);
  background: rgb(255 255 255 / .3);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Header and its native drawer share white labels and controls in every state. */
.header-nav .nav-link-button,
.header-nav .nav-link-button.w--current,
.header-nav .services-nav-link,
.header-nav .services-nav-link:hover,
.header-nav .services-nav-link:focus-visible,
.header-nav .services-nav-link[aria-current="page"],
.header-nav .services-nav-toggle,
.header-nav .menu-button,
.header-nav .menu-button.w--open {
  color: var(--white, #fff);
}

/* Use the footer's approved blue on every navigation surface, including the
 * open hamburger control. Keep the brand area and page palette untouched. */
.header-nav .nav-menu,
.header-nav .services-nav-panel,
.header-nav .menu-button,
.header-nav .menu-button.w--open {
  background-color: var(--footer-blue);
}

/* Darken the existing state highlight so white labels and the caret retain
 * their contrast during hover, keyboard focus and current-page states. */
.header-nav .services-nav-toggle:is(:hover, :focus-visible),
.header-nav .services-nav-link:is(:hover, :focus-visible, [aria-current="page"]) {
  background-color: rgb(0 0 0 / .12);
}

/* Match the footer's two-colour focus treatment on the shared dark blue. */
.header-nav :is(.nav-link-button, .services-nav-link, .services-nav-toggle, .menu-button):focus-visible {
  outline: 3px solid var(--white, #fff) !important;
  box-shadow: 0 0 0 6px #123c4a;
}

html.site-components-pending .header-services:not([data-services-enhanced]) > .services-nav-panel {
  display: none;
}

@media screen and (max-width: 991px) {
  .header-nav .nav-link-button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .header-services,
  .header-services[data-services-enhanced="true"] {
    display: block;
    width: 100%;
    padding-inline-end: 0;
  }

  .header-services > .nav-link-button {
    display: block;
    min-width: 0;
  }

  /* Apply before JavaScript and when either enhancement script is unavailable. */
  .header-services > .services-nav-toggle,
  .header-services[data-services-enhanced="true"] > .services-nav-toggle,
  .header-services > .services-nav-panel,
  .header-services[data-services-enhanced="true"] > .services-nav-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-nav-toggle svg {
    transition: none;
  }
}

/* Compact wrapped desktop labels to their widest word. Keep the native
 * full-width links when navigation falls back to a vertical list. */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  /* Keep the normal two-line desktop row in its original visual position.
   * Additional rows from enlarged text must push content down instead of
   * overlaying it. 2.25rem + 40px is the native row's line box and padding. */
  html:is(.site-runtime-ready, .site-components-pending) .header-nav {
    position: relative;
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .brand {
    flex: 0 0 auto;
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .nav-menu {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
  }

  html:is(.site-runtime-ready, .site-components-pending) main.site-main {
    margin-top: calc(-2.25rem - 40px);
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .nav-menu > .nav-link-button {
    inline-size: min-content;
  }
}

/* The wide desktop row must also grow when text is enlarged. Its original
 * single text line plus padding is 1.125rem + 40px at the normal text size. */
@media screen and (min-width: 1440px) {
  html:is(.site-runtime-ready, .site-components-pending) .header-nav {
    position: relative;
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .brand {
    flex: 0 0 auto;
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .nav-menu {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
  }

  html:is(.site-runtime-ready, .site-components-pending) main.site-main {
    margin-top: calc(-1.125rem - 40px);
  }
}

/* Reserve a readable logo before the desktop navigation can squeeze its brand.
 * Wrapping remains available when visitors enlarge their text. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html:is(.site-runtime-ready, .site-components-pending) .header-nav .brand {
    padding-inline: 24px;
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .logo {
    width: 200px;
    flex-shrink: 0;
  }

  html:is(.site-runtime-ready, .site-components-pending) .header-nav .nav-menu {
    gap: 14px;
    padding-inline: 24px;
  }
}

.menu-button.w--open {
  color: var(--dark, #2f2b2b);
}

.menu-button .w-icon-nav-menu {
  color: inherit;
}

.cta-text,
.counter-num {
  font-weight: 700;
}

.cta-button-wrap .cta-text,
.view-more-button .cta-text {
  color: inherit;
}

.cta-button-wrap .cta-button,
.view-more-button .cta-button {
  border-color: currentColor;
}

.cta-button-wrap:focus-visible,
.submit-button:focus-visible {
  background-color: var(--dark-pink, #f37598);
}

.view-more-button:hover,
.view-more-button:focus-visible {
  background-color: var(--accessible-green-hover);
  color: var(--dark, #2f2b2b);
}

.view-more-button.team:hover,
.view-more-button.team:focus-visible {
  background-color: var(--dark-pink, #f37598);
  color: var(--dark, #2f2b2b);
}

/* Homepage hero: preserve the original CTA and add the services link beside it. */
.hero-section .hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-section .hero-actions > a {
  max-width: 100%;
}

.hero-section .hero-services-link {
  background-color: #09b1ab;
  color: var(--dark, #2f2b2b);
  border-radius: 999px;
}

.hero-section .hero-services-link .cta-button {
  border-radius: 999px;
}

.hero-section .hero-services-link:hover,
.hero-section .hero-services-link:focus-visible {
  background-color: var(--accessible-green-hover);
  color: var(--dark, #2f2b2b);
}

@media screen and (max-width: 767px) {
  .hero-section .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .hero-section .hero-actions > a {
    width: 100%;
    max-width: 24rem;
  }

  .hero-section .hero-actions .cta-button {
    width: 100%;
    text-align: center;
  }
}

.text-span-blue,
.feature-title,
.program-title,
.counter-num {
  color: var(--accessible-blue);
}

/* Counter values must stay with their labels when visitors enlarge text.
 * Query the existing outer container so the normal desktop columns retain
 * the export's intrinsic widths; no extra wrapper or runtime is needed. */
.about-section > .container {
  container: home-about / inline-size;
}

@media screen and (max-width: 991px) {
  .about-section .counter-box {
    flex-wrap: wrap;
  }

  .about-section .counter-wrap {
    min-width: min(100%, 8rem);
    max-width: 100%;
    flex-wrap: wrap;
  }

  .about-section .counter-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media screen and (min-width: 480px) and (max-width: 991px) {
  .about-section .counter-box {
    row-gap: 1rem;
  }

  .about-section .counter-wrap {
    width: min(160px, calc(100% / 3));
  }
}

@media screen and (max-width: 479px) {
  .about-section {
    padding-bottom: max(5%, 1rem);
  }
}

@media screen and (min-width: 992px) {
  @container home-about (width < 48rem) {
    .about-section .counter-box {
      flex-wrap: wrap;
      row-gap: 1rem;
    }

    .about-section .counter-wrap {
      min-width: min(100%, 8rem);
      max-width: 100%;
      width: min(160px, calc(100% / 3));
      flex-wrap: wrap;
    }

    .about-section .counter-text {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  }
}

/* The profile page uses the same counters in its own original wrappers.
 * Query the outer full-width container so desktop columns keep their native
 * intrinsic sizing until enlarged text needs the proven counter reflow. */
.about-detail-wrap > .container {
  container: profile-about / inline-size;
}

@media screen and (max-width: 991px) {
  .about-detail-wrap .counter-box {
    flex-wrap: wrap;
  }

  .about-detail-wrap .counter-wrap {
    min-width: min(100%, 8rem);
    max-width: 100%;
    flex-wrap: wrap;
  }

  .about-detail-wrap .counter-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media screen and (min-width: 480px) and (max-width: 991px) {
  .about-detail-wrap .counter-box {
    row-gap: 1rem;
  }

  .about-detail-wrap .counter-wrap {
    width: min(160px, calc(100% / 3));
  }
}

@media screen and (min-width: 992px) {
  @container profile-about (width < 48rem) {
    .about-detail-wrap .counter-box {
      flex-wrap: wrap;
      row-gap: 1rem;
    }

    .about-detail-wrap .counter-wrap {
      min-width: min(100%, 8rem);
      max-width: 100%;
      width: min(160px, calc(100% / 3));
      flex-wrap: wrap;
    }

    .about-detail-wrap .counter-text {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  }
}

.text-span-pink,
.service-text.text-left.bold.color-pink {
  color: var(--accessible-pink);
}

.text-span-yellow {
  color: var(--accessible-yellow);
}

/* Keep white footer text and its matching wave above the contrast minimum. */
.footer-section {
  background-color: var(--footer-blue);
}

/* Preserve the funding logo's original blue artwork on a readable surface. */
.footer-section img[alt="Euroopan unionin osarahoittama"] {
  background-color: #fff;
}

/* Balance the visible artwork, including each original image's clear space.
 * Width follows its source ratio; a narrow grid cell may reduce both axes. */
.footer-section .block-footer-down.logos > .footer-logo-img.small {
  width: calc(var(--member-logo-desktop-height, 45px) * var(--member-logo-ratio));
  max-width: 100%;
  height: auto;
  flex: none;
}

.footer-section .logos > img[alt="Kuntoutusyrittäjät – jäsenyritys"] {
  --member-logo-desktop-height: 64px;
  --member-logo-small-height: 60px;
  --member-logo-ratio: 2.142857143;
}

.footer-section .logos > img[alt="Suomen Yrittäjät"] {
  --member-logo-ratio: 3.530075188;
}

.footer-section .logos > img[alt="Toimintaterapeuttiliitto"] {
  --member-logo-desktop-height: 48px;
  --member-logo-ratio: 3.898734177;
}

.footer-section .logos > img[alt="Euroopan unionin osarahoittama"] {
  --member-logo-ratio: 4.179104478;
}

.footer-section .logos > img[alt="Leader Karhuseutu"] {
  --member-logo-desktop-height: 48px;
  --member-logo-small-height: 44px;
  --member-logo-ratio: 2.371929825;
}

@media screen and (min-width: 992px) {
  .footer-section .block-footer-down.logos {
    column-gap: clamp(24px, 3vw, 50px);
  }
}

@media screen and (max-width: 991px) {
  .footer-section .block-footer-down.logos > .footer-logo-img.small {
    width: calc(var(--member-logo-small-height, 40px) * var(--member-logo-ratio));
  }
}

.footer-section .nav-link-button,
.footer-section .nav-link-button.w--current {
  color: var(--white, #fff);
}

/* Native landmark/list semantics retain the original flex column and its
 * responsive spacing, without adding markers, indentation or extra tab stops. */
.footer-navigation,
.footer-menu-list {
  display: flex;
  flex-direction: column;
  row-gap: inherit;
  min-width: 0;
  max-width: 100%;
}

.footer-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu-list > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.footer-section .copyright,
.footer-section .link-footer-down {
  color: var(--white, #fff);
}

/* The legal notice, privacy link and credit form one balanced footer row.
 * Keep the original logo strip and Webflow elements outside this rule. */
.footer-section .block-footer-down:not(.logos) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px clamp(16px, 2vw, 32px);
}

.footer-section .block-footer-down:not(.logos) > .copyright {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.footer-section .block-footer-down:not(.logos) > .footer-privacy-link {
  justify-self: center;
}

.footer-section .block-footer-down:not(.logos) > .copyright:last-child {
  text-align: right;
}

/* At the page end, keep the credit and its focus ring above the original
 * 70px fixed back-to-top control (at most 3vh from the viewport bottom). */
.scroll-top > .scroll-top-arrow {
  /* Its inherited Font Awesome line box extends beyond the round link.
   * Route clicks through the decorative child to the original anchor. */
  pointer-events: none;
}

@media screen and (min-width: 992px) {
  .footer-section {
    padding-bottom: max(120px, calc(3vh + 86px));
  }

  .footer-section .footer-grid {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }

  .footer-section .footer-grid > .footer-logo {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }

  /* The native second cell keeps its animated drawing inside the brand
   * column instead of reserving an otherwise empty fourth content column. */
  .footer-section .footer-grid > .flex-v:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    min-height: 240px;
    pointer-events: none;
  }

  .footer-section .footer-icon-fly {
    width: 70px;
    top: 64px;
    left: 50%;
  }

  .footer-section .footer-grid > .flex-v:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .footer-section .footer-menu-list .nav-link-button {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .footer-section .footer-social {
    grid-column: 3;
    grid-row: 1;
  }
}

@media screen and (max-width: 767px) {
  .footer-section .block-footer-down:not(.logos) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .footer-section .block-footer-down:not(.logos) > .footer-privacy-link {
    justify-self: start;
  }

  .footer-section .block-footer-down:not(.logos) > .copyright:last-child {
    text-align: left;
  }
}

.footer-section .footer-title {
  color: var(--white, #fff);
  overflow-wrap: anywhere;
  line-height: max(30px, 1em);
}

/* Utility pages use H2 after their H1; retain the existing footer's H3 line height. */
h2.footer-title {
  line-height: 30px;
}

.footer-section .nav-link-button:hover,
.footer-section .nav-link-button:focus-visible {
  color: var(--white, #fff);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.footer-section .link-footer-down:hover,
.footer-section .link-footer-down:focus-visible {
  color: var(--white, #fff);
  text-decoration-thickness: 2px;
}

/*
 * Social SVG paths: Bootstrap Icons (https://icons.getbootstrap.com/).
 * The MIT License (MIT)
 * Copyright (c) 2019-2024 The Bootstrap Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
/* Keep the SVG colour-filter definition out of layout without disabling it. */
.footer-logo-filter {
  position: absolute;
  pointer-events: none;
}

/* White footer drawings and member logos; preserve source images and alpha. */
.footer-section :is(.footer-icon-fly, .footer-icon-run),
.footer-section img[alt="Kuntoutusyrittäjät – jäsenyritys"],
.footer-section img[alt="Suomen Yrittäjät"] {
  filter: brightness(0) invert(1);
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.footer-social-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.footer-social-link {
  --social-accent: var(--green);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--white, #fff);
  font-family: var(--main-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.footer-social-link--instagram {
  --social-accent: var(--pink);
}

.footer-social-link--linkedin {
  --social-accent: var(--yellow);
}

.footer-social-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--social-accent);
  color: var(--white);
}

.footer-social-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.footer-social-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-social-link:hover:not(:focus-visible) {
  background: transparent;
  color: var(--white, #fff);
}

.footer-social-link:focus-visible {
  background: transparent;
  color: var(--white, #fff);
}

.footer-section :is(.nav-link-button, .footer-social-link, .link-footer-down):focus-visible {
  outline: 3px solid var(--white, #fff) !important;
  box-shadow: 0 0 0 6px #123c4a;
}

.footer-social-link:hover .footer-social-label,
.footer-social-link:focus-visible .footer-social-label {
  text-decoration: underline;
  text-underline-offset: .15em;
}

@media screen and (max-width: 991px) {
  .footer-social {
    grid-column: 1 / -1;
    margin-top: 28px;
  }

  .footer-social-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Give the preserved runner its own space above the sponsor divider. */
  .footer-section .block-footer-down.logos {
    margin-top: 6.5rem;
  }

  .footer-section .block-footer-down.logos > .footer-icon-run {
    bottom: calc(100% + 1rem);
  }
}

@media screen and (max-width: 767px) {
  .footer-social-links {
    gap: 10px;
  }

  .footer-social-link {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 112px;
    padding: 12px 4px;
    font-size: 1rem;
    text-align: center;
  }
}

@media screen and (max-width: 479px) {
  .footer-social {
    container: footer-social / inline-size;
  }

  .footer-social-link {
    font-size: .9375rem;
  }

  /* Keep the normal three-icon row; enlarged text gets the full row width
   * before a social name would have to split across several narrow lines. */
  @container footer-social (width < 16rem) {
    .footer-social-links {
      grid-template-columns: minmax(0, 1fr);
    }

    .footer-social-link {
      flex-direction: row;
      justify-content: flex-start;
      gap: 10px;
      min-height: 52px;
      padding: 4px 0;
      text-align: left;
    }
  }

  .footer-section .block-footer-down.logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    justify-items: start;
  }

}

/* Tablet footer: a full-size brand row, then content columns that wrap when
 * font-relative space runs out. Keep the shared Webflow grid/animation nodes:
 * its second child is the drawing's cell and its third child is navigation. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .footer-section {
    container: footer-tablet / inline-size;
  }

  .footer-section .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 32px clamp(24px, 4vw, 40px);
  }

  .footer-section .footer-grid > .footer-logo {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 240px;
    max-width: 100%;
    margin-bottom: 0;
  }

  .footer-section .footer-grid > .flex-v:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    width: 70px;
    min-height: 150px;
  }

  .footer-section .footer-icon-fly {
    width: 70px;
    top: 0;
    left: 0;
  }

  .footer-section .footer-grid > .flex-v:nth-child(3) {
    min-width: 0;
    gap: 4px;
  }

  .footer-section .footer-grid > .flex-v:nth-child(3) > .footer-title {
    margin-bottom: 8px;
  }

  .footer-section .footer-menu-list .nav-link-button {
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    padding-block: 6px;
    overflow-wrap: anywhere;
  }

  .footer-section .footer-social {
    grid-column: auto;
    margin-top: 0;
  }

  .footer-section .footer-social-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-section .footer-social-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    padding: 4px 0;
    text-align: left;
  }

  @container footer-tablet (width < 24rem) {
    .footer-section .footer-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* Minusta: native fragment links keep the original training text and order. */
html[data-wf-page="67a4d367521a4dc0404d7371"] .training-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin-bottom: 28px;
}

html[data-wf-page="67a4d367521a4dc0404d7371"] .training-jump-label {
  flex-basis: 100%;
  margin: 0 0 2px;
  color: var(--dark, #2f2b2b);
}

html[data-wf-page="67a4d367521a4dc0404d7371"] .training-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 15px;
  border: 2px dashed var(--green, #09b1ab);
  border-radius: 24px;
  background: var(--light-beige, #faf8f5);
  color: var(--dark, #2f2b2b);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

html[data-wf-page="67a4d367521a4dc0404d7371"] .training-jump-link:hover {
  background: var(--white, #fff);
  text-decoration-thickness: 2px;
}

html[data-wf-page="67a4d367521a4dc0404d7371"] [data-training-anchor] {
  scroll-margin-top: 160px;
}

@media (min-width: 480px) and (max-width: 991px) {
  html[data-wf-page="67a4d367521a4dc0404d7371"] .about-detail-wrap .about-img {
    width: 100%;
    height: clamp(420px, 70vw, 620px);
    object-fit: cover;
    object-position: 50% 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link {
    transition: none;
  }
}

/* The light and dark rings keep the preserved teal outline visible on every brand colour. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px var(--dark, #2f2b2b);
}

/* Form fields retain the teal focus outline without the extra dark ring. */
.input-text-field:focus-visible {
  box-shadow: none;
}

.site-main {
  display: block;
}

/* Keep a minimum desktop gutter until the native 1100px content width fits.
 * The existing wide-desktop and stacked tablet/mobile layouts stay native. */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  .container,
  .container.align-center {
    width: calc(100% - 48px);
  }
}

/* Keep the contact details readable when desktop gutters narrow this column.
 * Reuse the native phone card arrangement without shrinking text or padding. */
@media screen and (min-width: 992px) and (max-width: 1147px) {
  .contact-detail-wrap .contact-wrap {
    flex-direction: column;
  }

  .contact-detail-wrap .contact-detail-contact-box {
    width: 100%;
    flex-flow: row;
    justify-content: flex-start;
  }

  .contact-detail-wrap .contact-detail-contact-box .contact-text {
    text-align: left;
  }
}

/* The training CTA carries its context through a native fragment. Keep the
 * ordinary contact form unchanged; the extra guidance also works without JS. */
.training-inquiry-note {
  display: none;
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid #09b1ab;
  border-radius: 8px;
  background: var(--light-brown, #faf2e8);
  color: var(--dark, #2f2b2b);
  font-family: var(--sub-font, "Nunito Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
  scroll-margin-block-start: 1.5rem;
}

.training-inquiry-note:target {
  display: block;
}

.training-inquiry-note strong {
  font-weight: 600;
}

.field-label {
  display: block;
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  color: var(--dark, #2f2b2b);
  font-family: var(--sub-font, "Open Sans", sans-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Match the homepage form's reading edge without moving the contact cards. */
.contact-detail-wrap .field-label {
  text-align: left;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  transform: translateY(calc(-100% - 24px));
  padding: 12px 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--dark, #2f2b2b);
  font-family: var(--sub-font, "Open Sans", sans-serif);
  font-size: 1rem;
  font-weight: 700;
}

.skip-link:focus {
  transform: none;
}

[hidden] {
  display: none !important;
}

.map-placeholder {
  display: flex;
  min-height: 550px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px;
  background: var(--light-brown, #faf2e8);
  color: var(--dark, #2f2b2b);
  text-align: center;
  font-family: var(--sub-font, "Open Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.6;
}

.map-load-button,
.map-retry-button {
  padding: 15px 30px;
  border: 0;
  border-radius: 10px;
  background: var(--green, #09b1ab);
  color: var(--dark, #2f2b2b);
  cursor: pointer;
  font-family: var(--main-font, "Baloo Chettan 2", sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .3s, color .3s;
}

.map-load-button:hover,
.map-load-button:focus-visible,
.map-retry-button:hover,
.map-retry-button:focus-visible {
  background: var(--accessible-green-hover);
  color: var(--dark, #2f2b2b);
}

.w-lightbox-caption {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
}

.w-lightbox-control:focus-visible,
.w-lightbox-item:focus-visible,
.w-lightbox-view:focus-visible {
  outline-color: #fff !important;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--dark, #2f2b2b);
}

@media screen and (max-width: 479px) {
  /* Keep heading glyphs on the existing cream SVG and the animated sun above body text. */
  .hero-section .width-55 {
    padding-top: 32px;
  }

  .hero-section .sun {
    top: 0;
  }

  /* Keep the long Finnish heading inside the existing narrow hero column. */
  .hero-section .heading-h1 {
    font-size: clamp(2.55rem, 12.96vw, 3rem);
  }

  .hero-section .heading-h1 :is(.text-span-blue, .text-span-yellow, .text-span-pink) {
    font-size: clamp(2.125rem, 10.8vw, 2.5rem);
  }

  .map-placeholder {
    padding: 20px;
  }
}

@media screen and (min-width: 1440px) {
  /* Extend the original SVG's light area beneath the long Finnish heading. */
  .hero-section-bg {
    background-position: 60% center;
  }

  .view-more-button.about:hover,
  .view-more-button.about:focus-visible {
    background-color: var(--dark-pink, #f37598);
    color: var(--dark, #2f2b2b);
  }
}

/* Long Finnish words and reference URLs must stay inside their text column. */
.hero-section .heading-h1 {
  overflow-wrap: anywhere;
  hyphens: manual;
}

.section-description a[href^="https://doi.org/"],
.section-description a[href^="http://doi.org/"] {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Keep all four long articles consistent, including Webflow's more-specific
 * phone rule. Narrow only prose; headings, media and animated wrappers stay. */
html[data-wf-page="67a4d367521a4dc0404d7372"] .section-description.dark-color,
html[data-wf-page="67e140d22bd4ef60d89cd55a"] .section-description.dark-color,
html[data-wf-page="67c5e7f4f7b62111466708c3"] .section-description.dark-color,
html[data-wf-page="67dea99a686d118721223303"] .section-description.dark-color {
  width: 100%;
  max-width: 700px;
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: left;
  text-wrap: pretty;
}

/* Article subheadings share the existing prose width and animated wrappers. */
.service-subheading {
  max-width: 700px;
  margin: 0 0 .75rem;
  color: var(--dark);
  font-family: var(--main-font);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media screen and (max-width: 479px) {
  .service-subheading {
    font-size: 1.5rem;
  }
}

/* Keep the course headings centered, but give their long body copy a stable
 * left edge even on phones. Preserve each original card, image and effect. */
html[data-wf-page="67a4d367521a4dc0404d7372"] .program-description {
  text-align: left;
}

/* The semantic list keeps its original inline dashes and spacer rhythm. */
.sensory-difficulties-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sensory-difficulties-list > li + li {
  margin-top: 1rem;
}

@media screen and (max-width: 479px) {
  .sensory-difficulties-list > li + li {
    margin-top: .5rem;
  }
}

/* A stacked desktop card must not position its sun by its full text height. */
@media screen and (min-width: 992px) and (max-width: 1100px) {
  html[data-wf-page="67a4d367521a4dc0404d7372"] .service-sun {
    top: -40px;
  }
}

@media screen and (max-width: 1100px) {
  html[data-wf-page="67a4d367521a4dc0404d7372"] .extra-activity-flex-gap {
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    gap: 40px;
  }

  html[data-wf-page="67a4d367521a4dc0404d7372"] .extra-activity-wrap {
    width: 100%;
    min-height: 0;
    margin-top: 0;
  }
}

/* A wider stacked card needs enough image height to retain the foreground
 * face in the original group photo. Phones and three-column cards stay native. */
@media screen and (min-width: 480px) and (max-width: 1100px) {
  html[data-wf-page="67a4d367521a4dc0404d7372"] .program-img.extra-activity {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* Match the template's 7% gutters after the tips accordion stacks on tablet. */
@media screen and (max-width: 991px) {
  .faq-section.page .container.faq-flex-h-wrap {
    padding-inline: 7%;
  }
}

/* Keep the repeated quote link visible below the training banner title. */
.service-hero-banner.koulutus {
  flex-direction: column;
  gap: 24px;
}

.service-hero-banner.koulutus > .training-hero-cta {
  max-inline-size: calc(100% - 2rem);
}

.training-hero-cta .cta-button {
  max-inline-size: 100%;
}

.training-hero-cta .cta-text {
  overflow-wrap: anywhere;
}

/* Let the two long banner titles wrap when visitors increase text spacing.
 * Keep the banner's decorative clipping, font sizes and Webflow effects. */
.service-hero-banner:is(.koulutus, .si) .heading-h1 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: manual;
  text-wrap: balance;
}

/* Flex/grid min-content widths must not push training or career names out. */
html[data-wf-page="67a4d367521a4dc0404d7371"] :is(.feature-box, .feature-bullet-point-text, .about-detail-feature-wrap) {
  min-width: 0;
  max-width: 100%;
}

html[data-wf-page="67a4d367521a4dc0404d7371"] .feature-box :is(.feature-title, .feature-bullet-point-word) {
  overflow-wrap: anywhere;
  hyphens: manual;
}

html[data-wf-page="67a4d367521a4dc0404d7371"] .feature-box[data-w-id="dd4e9c2f-a7d8-e32f-8ad5-511fe99dd3a5"] .feature-bullet-point-icon {
  flex-shrink: 0;
}

/* Minusta: keep Baloo, with readable leading for every wrapped list entry. */
html[data-wf-page="67a4d367521a4dc0404d7371"] .feature-bullet-point-word {
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  html[data-wf-page="67a4d367521a4dc0404d7371"] .feature-box[data-w-id="dd4e9c2f-a7d8-e32f-8ad5-511fe99dd3a5"] > .feature-bullet-point {
    row-gap: 28px;
  }
}

@media screen and (min-width: 480px) and (max-width: 991px) {
  .hero-section .heading-h1 {
    font-size: clamp(3rem, 10.7vw, 5.625rem);
  }
}

@media screen and (min-width: 992px) {
  .hero-section {
    min-height: 100vh;
    height: auto;
  }
}

/* Keep the desktop photo/text split, with type sized for a narrower text column. */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  .hero-section.light-brown-bg {
    height: auto;
    padding: max(120px, calc(2.25rem + 64px)) 7% 72px;
    background-color: var(--light-brown);
  }

  .hero-section .flex-h.width-1200px {
    flex-flow: row;
    gap: 32px;
    max-width: 100%;
  }

  .hero-section .width-55 {
    order: 0;
    width: 55%;
    min-width: 0;
    margin-top: 0;
  }

  .hero-section .width-45 {
    width: 45%;
    height: 60vh;
  }

  .hero-section .heading-h1 {
    font-size: clamp(3.25rem, 5vw, 4.5rem);
    line-height: 1;
  }

  .hero-section .heading-h1 > span {
    display: block;
  }

  .hero-section-bg {
    background-image: url("/images/hero-bg-v1.svg");
    background-position: 60% center;
    /* Match the viewport-height photo; enlarged text continues on solid cream. */
    height: 100vh;
  }

  .hero-section-bg-video {
    width: 55vw;
    height: 95vh;
  }

  .hero-section .sun {
    width: clamp(64px, 6vw, 80px);
    top: 0;
    right: 0;
  }

  .hero-section .earth {
    width: 64px;
    inset: 29% auto auto -13%;
  }

  .hero-section .pink-line {
    inset: auto 13% 12% auto;
  }
}

@media screen and (max-width: 359px) {
  /* This single heading contains the unusually long word Toimintaterapiajakson. */
  .title-wrap[data-w-id="2049f189-329d-5169-cf75-39e3e18bd06e"] {
    max-width: 100%;
  }

  .title-wrap[data-w-id="2049f189-329d-5169-cf75-39e3e18bd06e"] .section-title {
    overflow-wrap: anywhere;
    hyphens: manual;
  }
}

/* Reveal only published content if IX2 cannot initialise; hidden sections/dialogs stay hidden. */
html:not(.site-interactions-ready):not(.site-interactions-pending) [data-w-id]:not(:where(
  [hidden], [hidden] *, [aria-hidden="true"], [aria-hidden="true"] *,
  [data-publish="omit"], [data-publish="omit"] *, .hide, .hide *,
  .w-hidden, .w-hidden *, .w-lightbox-backdrop, .w-lightbox-backdrop *,
  .w-lightbox-hide, .w-lightbox-hide *
)) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Inline IX2 motion is reset; transforms used only by the template's CSS layout are preserved. */
html:not(.site-interactions-ready):not(.site-interactions-pending) [data-w-id][style*="transform"]:not(:where(
  [hidden], [hidden] *, [aria-hidden="true"], [aria-hidden="true"] *,
  [data-publish="omit"], [data-publish="omit"] *, .hide, .hide *,
  .w-hidden, .w-hidden *, .w-lightbox-backdrop, .w-lightbox-backdrop *,
  .w-lightbox-hide, .w-lightbox-hide *
)) {
  transform: none !important;
}

/* Navigation fallback waits for component readiness separately from the IX2
 * content timeout. No-JavaScript pages have neither pending class. */
html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .header-nav {
  position: relative;
}

html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .nav-menu-wrapper {
  flex-direction: column;
  align-items: stretch;
}

html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .header-nav .brand {
  padding: 16px 7%;
}

html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .header-nav .nav-menu {
  display: flex !important;
  position: static !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: auto;
  padding: 12px 7%;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .header-nav .nav-link-button {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 12px 20px;
  font-size: 1.125rem;
  line-height: 1.4;
}

html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .header-nav .menu-button,
html:not(.site-runtime-ready):not(.site-interactions-pending):not(.site-components-pending) .header-nav .w-nav-overlay {
  display: none !important;
}

html.site-nav-open,
body.site-nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

html.site-nav-open .header-nav .nav-menu {
  max-height: var(--available-nav-height, 100dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Keep closed panels stable while components load. A failed runtime removes the
 * pending class; the no-JavaScript fallback still shows every answer. */
html.site-components-pending .accordion-content-wrapper.w-dropdown-list:not(.w--open) {
  display: none;
}

/* Native Webflow owns the open state; intrinsic grid tracks animate the full
 * answer height without fixed limits or JavaScript measurements. Keep the
 * closing contents visible until the motion finishes; aria/inert sync at once. */
html.site-runtime-ready .accordion-content-wrapper.w-dropdown-list {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .35s ease, opacity .35s ease, visibility 0s linear .35s;
}

html.site-runtime-ready .accordion-content-wrapper.w-dropdown-list.w--open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

html.site-runtime-ready .accordion-content-wrapper > .accordion-content {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* A real heading contains the native question button. Reset only the new
 * elements so the original toggle spacing, title font and arrow stay intact. */
h3.accordion-toggle {
  margin-top: 0;
  margin-bottom: 0;
  font: inherit;
}

.accordion-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: normal;
  appearance: none;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}

/* Reflow long FAQ words, including nonbreaking spaces, before they meet the
 * native absolutely-positioned 2rem arrow. Keep the original 80% text width
 * whenever it already leaves enough room. */
.accordion-title {
  min-width: 0;
  max-width: min(80%, calc(100% - 2.5rem));
  overflow-wrap: anywhere;
}

/* Use font-relative container breakpoints: normal desktop retains its native
 * columns/sticky heading; enlarged text gets the existing stacked FAQ layout
 * and two readable footer columns before the columns become too narrow. */
@media screen and (min-width: 992px) {
  .faq-section:not(.page) {
    container: home-faq / inline-size;
  }

  .footer-section {
    container: footer-content / inline-size;
  }

  @container home-faq (width < 48rem) {
    .faq-section:not(.page) > .container.faq-flex-h-wrap {
      flex-direction: column;
      gap: 150px;
    }

    .faq-section:not(.page) .accordion-wrapper {
      width: 100%;
    }

    .faq-section:not(.page) .sticky-pos {
      position: static;
    }

    .faq-section:not(.page) .title-wrap {
      max-width: calc(100% - 100px);
    }

    .faq-section:not(.page) .faq-icon {
      right: -100px;
    }
  }

  @container footer-content (width < 48rem) {
    .footer-section .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 32px;
    }

    .footer-section .footer-grid > .footer-logo {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .footer-section .footer-grid > .flex-v:nth-child(2) {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: end;
      width: 70px;
      min-height: 150px;
    }

    .footer-section .footer-icon-fly {
      top: 0;
      left: 0;
    }

    .footer-section .footer-grid > .flex-v:nth-child(3) {
      grid-column: 1;
      grid-row: 2;
    }

    .footer-section .footer-social {
      grid-column: 2;
      grid-row: 2;
    }
  }
}

/* Tablet decoration sits 27% outside the heading. Reserve that space only
 * where the native graphic is visible; phone headings retain their full width. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .faq-section:not(.page) .title-wrap {
    max-width: calc(100% / 1.27);
  }
}

/* Do not anchor the viewport to moving answers or to the contact section
 * below them while their intrinsic height changes. Earlier content and the
 * original fallback keep normal browser scroll anchoring. */
html.site-runtime-ready .faq-section,
html.site-runtime-ready .faq-section ~ * {
  overflow-anchor: none;
}

/* Separate the tips content from both decorative waves, including when the
 * final answer is open. Preserve the existing responsive side gutters. */
.faq-section.page > .container.faq-flex-h-wrap {
  padding-block: clamp(72px, 6vw, 120px);
}

/* Keep the standalone tips heading sticky like the home FAQ. Clip the
 * decorative curves without creating a scrolling ancestor, and include
 * the sun below the title in the sticky element's end boundary. */
@media screen and (min-width: 992px) {
  .faq-section.page {
    overflow: clip;
  }

  .faq-section.page .sticky-pos {
    padding-bottom: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site-runtime-ready .accordion-content-wrapper.w-dropdown-list {
    transition: none;
  }
}

.google-map[data-map-state] > .w-iframe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 550px auto;
}

/* Let enlarged consent copy and controls wrap inside the existing map frame.
 * Keep its rounded clipping and the original readable desktop text measure. */
.google-map :is(.w-iframe, .map-controls, .map-placeholder) {
  min-width: 0;
  max-width: 100%;
}

.google-map .map-placeholder > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.google-map .map-consent-info {
  max-width: min(100%, 42rem);
}

.google-map :is(.map-load-button, .map-retry-button) {
  white-space: normal;
}

/* Webflow's clearfix pseudo-elements occupy cell 1/1 and cover the consent
 * buttons in this grid. No floated content here needs a clearfix. */
.google-map > .w-embed::before,
.google-map > .w-embed::after {
  display: none;
}

.google-map[data-map-state] > .w-iframe > iframe {
  grid-row: 1;
  grid-column: 1;
}

.google-map[data-map-state] .map-controls {
  grid-row: 2;
  grid-column: 1;
}

.google-map[data-map-state] .map-placeholder,
.map-controls.is-map-started .map-placeholder {
  min-height: 0;
  padding: 20px 30px;
}

.google-map[data-map-state="pending"] > .w-iframe {
  grid-template-rows: auto;
}

.google-map[data-map-state="pending"] .map-controls {
  grid-row: 1;
}

.google-map[data-map-state="pending"] .map-placeholder {
  min-height: 550px;
}

.map-intro,
.map-consent-info,
.map-link-wrap {
  margin: 0;
}

.map-consent-info {
  max-width: 42rem;
}

.map-status {
  margin: 0;
}

.map-external-link {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  [data-w-id]:not(:where(
    [hidden], [hidden] *, [aria-hidden="true"], [aria-hidden="true"] *,
    [data-publish="omit"], [data-publish="omit"] *, .hide, .hide *,
    .w-hidden, .w-hidden *, .w-lightbox-backdrop, .w-lightbox-backdrop *,
    .w-lightbox-hide, .w-lightbox-hide *
  )) {
    opacity: 1 !important;
    visibility: visible !important;
  }

  [data-w-id][style*="transform"]:not(:where(
    [hidden], [hidden] *, [aria-hidden="true"], [aria-hidden="true"] *,
    [data-publish="omit"], [data-publish="omit"] *, .hide, .hide *,
    .w-hidden, .w-hidden *, .w-lightbox-backdrop, .w-lightbox-backdrop *,
    .w-lightbox-hide, .w-lightbox-hide *
  )),
  .hero-section :is(.sun, .earth) {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Only the two below-the-fold training backgrounds opt into deferred loading.
 * The bootstrap class is absent when observation is unavailable or fails. */
html.site-deferred-backgrounds[data-wf-page="67a4d367521a4dc0404d7372"] .program-img:is(.program-img-second, .program-img-third).extra-activity:not([data-background-ready]) {
  background-image: none;
}