/* 375px reference: Figma 360:1102. Content flows; only decorative artwork overlaps. */
@media (max-width: 899px) {
  .front-page { --front-content: min(640px, calc(100% - 48px)); }

  .front-section-label { min-height: 30px; padding-top: 6px; font-size: 16px; line-height: 24px; }
  .front-button { width: min(327px, 100%); }

  .front-hero { height: auto; background: var(--bc-cream); }
  .front-hero::after { display: none; }
  .front-hero__background { bottom: auto; height: 759px; background: url("../../assets/images/front/hero-background-sp.webp") center top / cover no-repeat; opacity: 1; }
  .front-hero__line { display: none; }
  .front-hero__background::after {
    position: absolute;
    inset: 0 0 auto;
    height: 400px;
    background: url("../../assets/images/front/hero-rings-sp.svg") -224px -129px / 680px 536px no-repeat;
    content: "";
  }
  .front-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; padding: 87px 0 0; }
  .front-hero__copy { grid-column: 1; grid-row: 1; width: var(--front-content); min-height: 0; margin-inline: auto; }
  .front-hero__script { top: -39px; left: -46px; width: 165.73px; height: 91.24px; transform-origin: center; transform: rotate(-4.61deg); }
  .front-hero__title { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 8px; width: 100%; margin: 0; letter-spacing: 0; }
  .front-hero__title-lead { top: auto; align-self: start; font-size: 36px; line-height: 52px; letter-spacing: 5.4px; white-space: nowrap; }
  .front-hero__title-inline { top: auto; align-self: start; margin: 9px 0 0; font-size: 28px; line-height: 41px; letter-spacing: 1.4px; white-space: nowrap; vertical-align: baseline; }
  /* CSS includes tracking after the final glyph; Figma's text bounds do not. */
  .front-hero__title-line { grid-column: 1 / -1; margin-right: -1.2px; padding-left: 0; font-size: 24px; line-height: 48px; letter-spacing: 1.2px; white-space: normal; text-wrap: balance; }
  .front-hero__title-line:nth-last-child(2) { margin-top: 4px; }
  .front-hero__visual { --front-hero-slide-gap: 40px; grid-column: 1; grid-row: 2; width: auto; height: auto; margin: 0 0 0 max(24px, calc((100% - 640px) / 2)); }
  .front-hero__slides { position: relative; width: 100%; height: auto; overflow: hidden; clip-path: none; }
  .front-hero__track { width: min(280px, calc(100% - 24px)); height: auto; aspect-ratio: 280 / 337; }
  .front-hero__slide { padding: 10px; border-radius: 140px 140px 24px 24px; }
  .front-hero__photo { border-radius: 130px 130px 16px 16px; }
  .front-hero__inner::after {
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    height: 105px;
    /* Figma has two 50% green layers over a blurred photograph, sharing one silhouette. */
    background: rgb(14 130 41 / 75%);
    backdrop-filter: blur(15px);
    mask: url("../../assets/images/front/wave-hero-sp-mask.svg") center bottom / 100% 105px no-repeat;
    content: "";
    pointer-events: none;
  }
  .front-hero__slide-next { top: calc(50% - 39px); right: 8px; left: auto; width: 78px; height: 78px; }
  .front-hero__slide-next img:first-child { width: 78px; height: 78px; }
  .front-hero__slide-next img:last-child { top: 35px; left: 32px; width: 16px; height: 9px; }
  .front-hero__tail { position: relative; z-index: 4; display: flow-root; background: var(--bc-green); }
  .front-hero__message { position: relative; right: auto; bottom: auto; width: var(--front-content); margin: -52px auto 0; font-size: 14px; line-height: 32px; letter-spacing: 0; white-space: normal; }
  .front-hero__message span { display: table; margin-left: auto; text-decoration: underline; text-decoration-color: #8fc890; text-underline-offset: 10px; text-decoration-thickness: 1px; }
  .front-hero__message br,
  .front-hero__message::before,
  .front-hero__message::after { display: none; }
  .front-hero__ticker { position: relative; bottom: auto; width: calc(100% - 22px); max-width: 662px; height: auto; min-height: 92px; margin: 40px 0 0; }
  .front-hero__ticker > a,
  .front-hero__ticker > div { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 8px; padding: 16px 24px; font-size: 14px; }
  .front-hero__ticker time { display: block; }
  .front-hero__ticker i { display: none; }
  .front-hero__ticker-title { display: block; grid-column: 1 / -1; }
  .front-hero__scroll { display: none; }

  .front-message { min-height: 0; padding: 64px 24px 80px; }
  .front-message__heading { display: flex; flex-direction: column; align-items: center; width: min(640px, 100%); }
  .front-message .front-section-label { min-height: 16px; padding-top: 0; line-height: 16px; }
  .front-message__heading h2 { margin-top: 24px; font-size: 20px; line-height: 40px; }
  .front-message__heading > span { width: 40px; margin-top: 32px; }
  .front-message__content { position: static; grid-template-columns: 1fr; gap: 32px; width: min(640px, 100%); margin-top: 31px; }
  .front-message__media { width: min(327px, 100%); height: 320px; margin-inline: auto; }
  .front-message__photo--back,
  .front-message__photo--front { width: min(233px, 78%); height: 280px; }
  .front-message__photo--back { right: 0; background-image: url("../../assets/images/front/message-arch-sp.svg"); }
  .front-message__photo--front { top: 40px; left: 0; padding: 7.568px; border-radius: 50% 50% 24px 24px / 41.6071% 41.6071% 24px 24px; }
  .front-message__photo-crop { border-radius: 50% 50% 16px 16px / 41.122% 41.122% 16px 16px; }
  .front-message__photo--front img { top: -10.3686%; left: -8.286%; width: 116.5692%; height: 152.9923%; }
  .front-message__media-character { top: 61.07788%; left: 68.66160%; width: 45.2168px; height: 62.122px; }
  .front-message__body { display: flex; min-height: 0; padding: 0; font-size: 15px; line-height: 30px; }
  .front-message__body p + p { margin-top: 30px; }
  .front-message__character { position: static; align-self: flex-end; width: 80px; height: 84px; margin: 24px 40px 24px 0; }
  .front-message__body .front-button { margin: 0 0 0 auto; }

  /* Figma: the second photo card ends at 3764px; the section ends at 3882px. */
  .front-business { min-height: 0; padding: 80px 24px 118px; }
  .front-business__intro { grid-template-columns: 1fr; gap: 32px; width: min(640px, 100%); }
  .front-business__intro h2 { margin-top: 16px; font-size: 24px; line-height: 48px; }
  .front-business__lead { padding-top: 0; font-size: 15px; line-height: 30px; }
  .front-business__lead p:nth-child(2) { margin-top: 30px; }
  .front-business__cards { grid-template-columns: 1fr; gap: 24px; width: min(640px, 100%); margin-top: 32px; }
  .front-business__cards::after { display: none; }
  .front-business-card { width: 100%; padding: 32px 20px 56px; }
  .front-business-card > p { margin: 0; }
  .front-business-card h3 { margin-top: 16px; font-size: 20px; line-height: 20px; }
  .front-business-card--rehab h3 { width: 100%; line-height: 30px; }
  .front-business-card__title-line { display: block; }
  .front-business-card__media { width: min(448px, 100%); }
  .front-business-card__arrow { right: auto; bottom: -24px; left: 50%; width: 48px; height: 48px; border-radius: 8px; transform: translateX(-50%); }
  /* The supplied mobile strip overlaps the Environment decoration by 20px. */
  .front-gallery { position: relative; margin-top: -20px; padding-bottom: 81px; }
  .front-gallery__group { gap: 8px; padding-right: 8px; }
  .front-gallery__item { flex-basis: 240px; width: 240px; padding: 4.615385px; }
  .front-business__decor { display: block; top: 0; width: 100%; height: 150px; opacity: 1; transform: none; }
  .front-business__decor--left { left: 0; height: 141px; background: url("../../assets/images/front/wave-business-sp-start.svg") right top / 725px 141px no-repeat; transform: scaleY(-1); transform-origin: center; }
  .front-business__decor--right { top: auto; bottom: 0; left: 0; background: url("../../assets/images/front/wave-business-sp-start.svg") left bottom / 725px 141px no-repeat; }

  .front-voice { min-height: 0; padding: 80px 24px 120px; }
  .front-voice__panel { display: block; width: min(640px, 100%); min-height: 0; background-image: url("../../assets/images/front/voice-panel-gradient-sp.svg"); }
  .front-voice__panel::before { background-position: -139px 0; background-size: auto max(811px, 100%); opacity: 0.2; }
  .front-voice__copy { padding: 40px 20px 0; }
  .front-voice__copy h2 { margin-top: 16px; font-size: 24px; line-height: 36px; }
  .front-voice__copy h2 > span { display: block; }
  .front-voice__copy > p:last-of-type { width: auto; margin-top: 24px; font-size: 15px; line-height: 30px; }
  .front-voice__copy .front-button { margin-top: 32px; padding-left: 32px; }
  .front-voice__questions { display: flex; flex-direction: column; gap: 25px; padding: 32px 20px 40px; }
  .front-voice__questions p { position: relative; inset: auto; min-height: 48px; height: auto; padding-inline: 12px; font-size: 16px; line-height: 32px; white-space: normal; }
  .front-voice__questions p:nth-child(1) { inset: auto; width: min(220px, 100%); }
  .front-voice__questions p:nth-child(2) { inset: auto; align-self: flex-end; width: min(240px, 100%); }
  .front-voice__questions p:nth-child(3) { inset: auto; align-self: center; width: min(260px, 100%); }
  .front-voice__questions > img { position: static; align-self: flex-end; width: 100px; height: 106px; margin-right: 20px; }
  .front-voice__decor--top-large { top: 40px; left: 32%; width: 200px; height: 133px; }
  .front-voice__decor--top-small { top: 64px; left: auto; right: 0; width: 112px; height: 90px; background-size: 120px 90px; }
  .front-voice__decor--bottom { top: auto; bottom: 80px; left: 8px; width: 200px; height: 138px; }

  .front-environment { display: block; min-height: 0; padding: 80px 24px; border-radius: 0 64px 0 0; }
  .front-environment::after { width: 100%; height: 139px; background-image: url("../../assets/images/front/wave-environment-sp.svg"); }
  .front-environment__title { width: min(640px, 100%); margin: 0 auto 32px; }
  .front-environment__title h2 { margin-top: 8px; font-size: 24px; line-height: 48px; white-space: normal; }
  .front-environment__cards { width: min(640px, 100%); gap: 16px; margin-inline: auto; }
  .front-environment-card { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 32px 20px; }
  .front-environment-card__heading { grid-column: 1; grid-row: 1; }
  .front-environment-card__heading p { text-align: center; }
  .front-environment-card__heading h3 { margin-top: 8px; font-size: 20px; line-height: 20px; text-align: center; }
  .front-environment-card__heading span { margin-top: 24px; font-size: 14px; line-height: 28px; }
  .front-environment-card figure { grid-column: 1; grid-row: 2; width: 100%; height: auto; aspect-ratio: 287 / 191; }
  .front-environment-card__arrow { grid-column: 1; grid-row: 3; align-self: start; justify-self: center; width: 48px; height: 48px; margin-top: -48px; transform: none; }

  .front-candidate { min-height: 0; padding: 80px 24px; }
  .front-candidate__heading { width: min(640px, 100%); }
  .front-candidate__heading h2 { margin-top: 8px; font-size: 24px; line-height: 24px; }
  .front-candidate__heading > span { width: 40px; margin-top: 32px; }
  .front-candidate__cards { grid-template-columns: 1fr; gap: 24px; width: min(640px, 100%); margin-top: 31px; }
  .front-candidate__cards::before,
  .front-candidate__cards::after { display: none; }
  .front-candidate-card { min-height: 0; padding: 32px 20px; overflow: visible; }
  .front-candidate-card + .front-candidate-card::after { position: absolute; top: -28px; left: calc(50% - 17px); width: 34px; height: 34px; background: url("../../assets/images/icons/plus-sp.svg") center / contain no-repeat; content: ""; }
  .front-candidate-card h3 { font-size: 20px; line-height: 35px; }
  .front-candidate-card__media { width: 100%; height: 176px; margin-top: 23px; }
  .front-candidate-card__media::before { top: 0; right: 20px; left: auto; width: 160px; height: 176px; background: rgb(73 158 89 / 10%); mask: url("../../assets/images/front/candidate-arch.svg") center / contain no-repeat; }
  .front-candidate-card__media img { width: 220px; height: 152px; margin: 24px 0 0 20px; }
  .front-candidate-card > i { margin-top: 25px; }
  .front-candidate-card > p,
  .front-candidate-card:nth-child(n + 2) > p { margin: 23px 0 0; font-size: 15px; line-height: 30px; text-align: left; }

  .front-entry { min-height: 0; padding-top: 178px; }
  .front-entry__artwork { width: 100%; height: 740px; }
  .front-entry__line { top: -61.6875px; left: -245px; width: 835.108px; height: 727.687px; }
  .front-entry__characters { top: 80px; left: max(24px, calc((100% - 640px) / 2)); }
  .front-entry__characters--yellow { left: max(106px, calc((100% - 640px) / 2 + 82px)); }
  .front-entry__inner { min-height: 0; padding: 0; }
  .front-entry__links { width: var(--front-content); margin-inline: auto; }
  .front-entry-card { grid-template-columns: 32px minmax(0, 1fr) 40px; grid-template-rows: max-content max-content minmax(40px, 1fr); gap: 8px 16px; min-height: 160px; padding: 19px; align-items: start; }
  .front-entry-card > div { display: contents; }
  .front-entry-card h2 { grid-column: 2; grid-row: 1; align-self: center; font-size: 20px; line-height: 20px; }
  .front-entry-card p { grid-column: 1 / -1; grid-row: 2; }
  .front-entry-card__arrow { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; }
  .front-entry-card--apply { min-height: 240px; }
  .front-entry-card__illustration { display: block; top: auto; bottom: 20px; left: auto; right: 79px; width: 150px; height: 110px; }
  .front-entry__media { position: relative; inset: auto; height: 432px; margin-top: 48px; mask: none; border-radius: 120px 0 0 0; }
  .front-entry__media img { top: -2.3%; left: -68.875%; width: 211.921%; height: 103.448%; object-fit: cover; }

  .front-news { min-height: 0; padding: 80px 0 112px; }
  .front-news__inner { display: block; width: min(640px, calc(100% - 48px)); }
  .front-news__heading h2 { margin-top: 7px; font-size: 24px; line-height: 24px; }
  .front-news__body { margin-top: 64px; padding: 0 0 0 20px; }
  .front-news__panel { top: 165px; right: 0; left: max(24px, calc((100% - 640px) / 2)); width: auto; height: calc(100% - 117px); border-radius: 24px 0 4px 4px; }
  .front-news-item { --front-news-divider: var(--bc-green); min-height: 0; padding: 0 0 16px; font-size: 15px; line-height: 26px; }
  .front-news-item + .front-news-item { margin-top: 16px; }
  .front-news-item__meta { align-items: center; line-height: 28px; }
  .front-news-item__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 13.5px; }
  .front-news__body .front-button { width: calc(100% - 20px); margin: 40px auto 0 0; padding-left: 32px; }
  .front-news::after { height: 80px; background-image: url("../../assets/images/front/wave-news-sp.svg"); background-size: 100% 80px; }
}

/* Roomier intermediate screens use available space, without shrinking type or controls. */
@media (min-width: 600px) and (max-width: 899px) {
  .front-message__body .front-button { align-self: center; margin-inline: auto; }
  /* Tablet uses the PC side silhouettes, not the fixed-width mobile end caps. */
  .front-business__decor { top: 0; bottom: auto; width: min(160px, 20%); height: 100%; transform: none; background-size: 100% 100%; }
  .front-business__decor--left { left: 0; right: auto; background-image: url("../../assets/images/front/business-wave-pc-left-updated.svg"); background-position: left top; }
  .front-business__decor--right { left: auto; right: 0; background-image: url("../../assets/images/front/business-wave-pc-right-updated.svg"); background-position: right top; }
  .front-business__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-business-card h3 { font-size: 18px; line-height: 30px; min-height: 60px; }
  .front-environment-card { grid-template-columns: minmax(0, 1fr) minmax(180px, 44%); align-items: center; }
  .front-environment-card figure { grid-column: 2; grid-row: 1; }
  .front-environment-card__arrow { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; margin: 0 -12px -12px 0; }
  /* Tablet cards retain the PC hierarchy instead of stretching the phone rows. */
  .front-entry { padding-top: 164px; }
  .front-entry__characters { top: 64px; left: max(24px, calc((100% - 560px) / 2)); }
  .front-entry__characters--yellow { left: max(106px, calc((100% - 560px) / 2 + 82px)); }
  .front-entry__links { width: min(560px, calc(100% - 48px)); }
  .front-entry-card { grid-template-rows: auto; min-height: 120px; padding: 24px; gap: 16px; align-items: center; }
  .front-entry-card > div { display: flex; grid-column: 2; grid-row: 1; }
  .front-entry-card h2 { font-size: 24px; line-height: 36px; }
  .front-entry-card__arrow { grid-column: 3; grid-row: 1; align-self: center; }
  .front-entry-card--apply { grid-template-rows: auto auto; min-height: 240px; align-items: start; }
  .front-entry-card--apply > img:first-child { grid-column: 1; grid-row: 1; }
  .front-entry-card--apply > div { grid-column: 2 / -1; }
  .front-entry-card__illustration { position: static; grid-column: 2; grid-row: 2; justify-self: end; width: 170px; height: 124px; }
  .front-entry-card--apply .front-entry-card__arrow { grid-column: 3; grid-row: 2; align-self: end; }
  .front-entry__media { height: auto; aspect-ratio: 16 / 9; max-width: none; margin-inline: 0; }
  .front-entry__media img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* The 375px reference has a 287px media area inside a 327px card.
 * Wider phones and tablets keep this composition, with a bounded text measure. */
@media (min-width: 431px) and (max-width: 899px) {
  .front-candidate__cards { width: min(440px, 100%); }
  .front-candidate-card__media { width: 287px; max-width: 100%; margin-inline: auto; }
}

/* Preserve the staggered speech composition without fixed coordinates at intermediate widths. */
@media (min-width: 600px) and (max-width: 899px) {
  .front-voice__panel { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px; padding: 40px 32px; min-height: 0; }
  .front-voice__copy { min-width: 0; padding: 0; }
  .front-voice__copy h2 { font-size: 28px; line-height: 44px; }
  .front-voice__copy h2 > span { display: block; }
  .front-voice__copy > p:last-of-type { width: auto; margin-top: 24px; }
  .front-voice__copy .front-button { max-width: 100%; margin-top: 32px; }
  .front-voice__questions { display: flex; flex-direction: column; gap: 25px; width: 100%; max-width: 440px; justify-self: center; padding: 0; }
  .front-voice__questions p { position: relative; inset: auto; flex: none; min-height: 56px; height: auto; margin: 0; padding: 12px 16px; font-size: 18px; line-height: 32px; white-space: normal; }
  .front-voice__questions p:nth-child(1) { inset: auto; align-self: flex-start; width: min(250px, 100%); }
  .front-voice__questions p:nth-child(2) { inset: auto; align-self: flex-end; width: min(280px, 100%); }
  .front-voice__questions p:nth-child(3) { inset: auto; align-self: flex-start; width: min(300px, 100%); }
  .front-voice__questions > img { position: static; align-self: flex-end; width: 100px; height: 106px; margin: 0 16px 0 0; object-fit: contain; }
}

@media (max-width: 359px) {
  .front-message__heading h2 br { display: none; }
  .front-business-card h3 { line-height: 30px; }
  .front-voice__copy h2 { font-size: 22px; }
  .front-voice__copy .front-button { gap: 12px; padding-left: 20px; }
  .front-voice__questions p { font-size: 15px; }
  .front-candidate__heading h2 { font-size: 22px; line-height: 32px; }
  .front-candidate-card__media img { max-width: 100%; margin-left: 0; }
  .front-entry-card__illustration { right: 64px; }
}

@media (max-width: 374px) {
  .front-hero__title-line { letter-spacing: 0; }
}