/* TOP SP — Figma 2303:9256 (375px). Desktop rules remain authoritative above 760px. */
@media (max-width:760px) {
  html {scrollbar-width:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar {display:none;width:0}
  :root {--sp-section-inline:24px;--sp-section-start:80px;--sp-section-end:120px}
  .section {width:100%;max-width:none}
  .section-heading h2 {font-size:40px;line-height:1.2;letter-spacing:0}
  .section-heading>p {font-size:16px;line-height:1.4;margin-top:4px;gap:8px}
  .section-heading>p img {width:16px;height:2px}
  .more {width:178px;height:50px;padding:12px 12px 12px 24px;font-size:16px;flex:none}
  .sp-copy {display:block}
  .pc-copy {display:none}


  /* SP FV: Compact 2716:9217 (667h) to Tall 2723:5496 (956h).
     This 0px..1px step interpolates positions without scaling the photo frames. */
  .intro-journey .hero {
    --sp-fv-step:clamp(0px,calc((100svh - 667px) / 289),1px);
    --fv-photo-width:168px;--fv-photo-height:320px;--fv-side-width:120px;
    --sp-fv-text-top:calc(150px + 50 * var(--sp-fv-step));
    --sp-fv-group-top:calc(423px + 232 * var(--sp-fv-step));
    --sp-fv-center-local-y:calc(40px - 40 * var(--sp-fv-step));
    height:100svh;min-height:0;max-width:none;display:block;padding:0;overflow-x:clip;overflow-y:visible;
  }
  .intro-journey .hero .hero-copy {
    position:absolute;top:var(--sp-fv-text-top);
    left:calc(16px + 8 * var(--sp-fv-step));right:16px;margin:0;z-index:1;
  }
  .intro-journey .hero-copy h1 {
    font-size:min(calc(32px + 8 * var(--sp-fv-step)),calc((100vw - 32px - 8 * var(--sp-fv-step)) / 9));line-height:1.4;
  }
  .intro-journey .hero-copy p {
    font-size:min(14px,calc((100vw - 32px - 8 * var(--sp-fv-step)) * 14 / 343));line-height:1.6;margin-top:calc(16px + 2.879 * var(--sp-fv-step));
  }
  .intro-journey .hero .hero-photos {
    position:absolute;inset:var(--sp-fv-group-top) 0 auto;width:100%;height:320px;margin:0;overflow:visible;transform:none;scale:none;
  }
  .intro-journey .hero .hero-photo-three,.intro-journey:not(.motion-enabled) .hero-photo-three {
    left:calc(50% - 84px);top:var(--sp-fv-center-local-y);
    width:168px;height:320px;border-radius:16px;aspect-ratio:168/320;z-index:1;
  }
  .intro-journey .hero .hero-photo-one,.intro-journey .hero .hero-photo-two {
    top:200px;width:120px;height:120px;border-radius:16px;aspect-ratio:1;z-index:4;
  }
  .intro-journey .hero .hero-photo-one {left:0;right:auto}
  .intro-journey .hero .hero-photo-two {left:auto;right:0}
  .intro-journey .hero .hero-city {
    top:calc(180px + 212 * var(--sp-fv-step));left:calc(-350px - 85 * var(--sp-fv-step));
    width:calc(1075px + 170 * var(--sp-fv-step));height:calc(454px + 72 * var(--sp-fv-step));
    max-width:none;object-fit:contain;opacity:.5;transform:none;
  }
  /* Inverse of the shared Figma image-fill crop transform; fixed for every SP height. */
  .intro-journey .hero-photo-three img {
    position:absolute;inset:auto;width:359.08665131%;height:auto;
    left:-133.06131609%;top:-.05532789%;max-width:none;transform:none;
    object-fit:cover;object-position:0 0;
  }
  .hero-photo-one img {width:136.43%;height:auto;left:-2.33%;top:-11.75%}


  /* (viewport - 168px) / 2 - 120px <= 12px at widths <= 432px.
     Freeze the INNER composition at Compact's 375px canvas; retain the
     existing height-driven group anchor and the original photo dimensions. */
  @media(max-width:432px) {
    .intro-journey .hero {--sp-fv-center-local-y:40px}
    .intro-journey .hero .hero-photos {
      left:max(0px,calc(50% - 187.5px));right:auto;width:min(375px,100%);
    }
  }

  /* About: two photographs, with the wide heading wrapping naturally. */
  #about {height:auto;min-height:0;padding:40px 24px 120px;display:block;isolation:isolate}
  #about .about-background {height:100%;z-index:-1}
  #about .about-background img {inset:0;width:100%;height:100%;object-fit:cover}
  #about .about-background::after {mix-blend-mode:normal}
  #about .about-foreground {display:flex;flex-direction:column;gap:40px}
  #about .about-row-one {display:block}
  #about .about-row-two {display:flex;flex-direction:column;gap:80px}
  #about .about-heading {position:static;width:100%}
  #about .about-heading h2 {font-size:48px;line-height:1.2;letter-spacing:-1px;width:100%;max-width:none}
  #about .about-heading h3 {font-size:20px;line-height:1.6;margin-top:4px}
  #about .about-title-line {white-space:normal}
  #about .about-top-photo {display:none}
  #about .about-message {position:static;width:100%;font-size:14px;line-height:1.8;order:0}
  #about .about-message p .desktop-br:nth-of-type(-n+2) {display:block}
  #about .about-message .more {margin-top:40px}
  #about .about-montage {position:relative;inset:auto;width:100%;height:auto;aspect-ratio:327/295;margin:0;order:1}
  #about .about-building {left:0;top:23.7288%;width:55.0141%;height:76.2712%;border-radius:12px}
  #about .about-workers {left:64.6819%;right:auto;top:0;width:35.1682%;height:51.8644%;border-radius:8px}
  #about .about-building .about-photo-parallax img {inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
  #about .about-workers .about-photo-parallax img {width:115.29%;height:auto;left:-2.49%;top:-16.79%;object-fit:cover;object-position:center;transform:none}
  #about .about-workers>.texture {display:none}

  #business {padding:80px 24px 120px;border-radius:16px;--business-static-margin:12px;--business-static-radius:16px}
  #business .business-heading {gap:34px}
  #business .business-heading h3 {font-size:24px;line-height:1.4}
  #business .business-heading div>p {font-size:14px;line-height:1.8;margin-top:4px}
  #business .business-list {width:100%;max-width:none;margin-top:80px}
  #business .business-stage {gap:80px}
  #business .business-row {gap:24px}
  #business .business-info {padding:0;width:100%;height:auto}
  #business .business-number {font-size:16px;gap:14px}
  #business .business-number strong {width:23px;text-align:center}
  #business .business-text {margin-top:24px}
  #business .business-text h3 {font-size:32px;line-height:1.4;white-space:normal}
  #business .business-english {font-size:14px;line-height:1.2;margin-top:0}
  #business .business-description {font-size:14px;line-height:1.8;margin-top:16px}
  #business .business-text .more {margin-top:40px}
  #business .business-main-image {width:100%;height:auto;aspect-ratio:4/3;border-radius:16px}
  #business .business-1 .business-main-image {aspect-ratio:175/131}
  #business .business-2 .business-main-image {border-radius:12px}
  #business .business-main-image img:not(.texture) {object-fit:cover}

  #company {padding:80px 24px;gap:40px;border-radius:0 0 24px 24px}
  #company .section-heading>p,#news .section-heading>p {font-size:18px;line-height:1.2}
  #company .company-intro>p {font-size:14px;line-height:1.8;margin-top:16px}
  #company .company-list {gap:16px}
  #company .company-row {padding:0 8px 16px;min-height:77px}
  #company .company-thumb {width:80px;height:60px;border-radius:4px}
  #company .company-thumb-visual>img:first-child {object-fit:cover}
  #company .company-label {margin-left:16px}
  #company .company-label small {font-size:10px;line-height:1.4}
  #company .company-label h3 {font-size:18px;line-height:1.4}
  #company .company-arrow {margin-right:0;flex:none;width:24px;height:24px}
  #company .mobile-company-more {margin:0 auto}
  .video-divider {height:400px}
  #news {padding:80px 24px 120px}
  #news .news-list {margin-top:40px}
  #news .news-row {padding:24px 16px;gap:16px;align-items:flex-start;flex-direction:column}
  #news .news-meta {font-size:12px;line-height:1.4;gap:8px}
  #news .news-tag {padding:4px 24px}
  #news .news-row p {font-size:16px;line-height:1.6}
  #news .mobile-news-extra {display:none}
  #news>.more {margin:80px auto 0}

  /* Keep SP artwork geometry; use the same pinned scene and progress as PC. */
  #recruit.recruit.section {--recruit-copy-top:234px;--recruit-bottom-clearance:max(0px,calc(var(--recruit-copy-top) + 343.2168px + 117px + 24px - var(--recruit-view-height)));height:calc(3 * var(--recruit-view-height) + var(--recruit-bottom-clearance));background:#fff}
  #recruit .recruit-scene {position:sticky;top:0;height:calc(var(--recruit-view-height) + var(--recruit-bottom-clearance));overflow:hidden;isolation:isolate;background:#fff}
  #recruit .recruit-scene>.recruit-backdrop {position:absolute;inset:0;height:var(--recruit-view-height);min-height:0;z-index:0}
  #recruit .collage {height:100%;transform:scale(var(--recruit-scale,1))}
  #recruit .collage-column {width:268.8px;gap:28.8px;translate:0 var(--recruit-column-y,0px)}
  #recruit .collage-left {left:calc(50% - 432.5px);top:10.4px}
  #recruit .collage-center {left:calc(50% - 134.4px);top:calc(50% - 478.8px)}
  #recruit .collage-right {left:calc(50% + 162.7px);top:10.4px}
  #recruit .collage-photo,#recruit .recruit-team-photo {height:300px;min-height:0;aspect-ratio:auto;border-radius:9.6px}
  #recruit .recruit-team-photo img {transform:none;object-fit:cover}
  #recruit .recruit-scene>.recruit-content {position:absolute;inset:0;height:100%;z-index:1;overflow:hidden;background:transparent}
  #recruit .recruit-white-blur {height:var(--recruit-view-height);bottom:auto;translate:0 var(--recruit-blur-y,100svh)}
  #recruit .recruit-foreground-block {position:absolute;inset:0 auto auto 0;width:100%;height:max(747px,var(--recruit-view-height));z-index:1;translate:0 var(--recruit-block-y,0px)}
  #recruit .recruit-copy {top:var(--recruit-copy-top);width:calc(100% - 32px);translate:0 var(--recruit-foreground-y,0px)}
  #recruit .recruit-copy>p {margin-top:32px;font-size:14px;line-height:1.8}
  #recruit .section-heading>p {color:#b1b8be}
  /* Figma final geometry stays fixed; foreground offset reaches zero and holds. */
  #recruit .recruit-floating {translate:0 var(--recruit-foreground-y,0px)}
  #recruit .floating-left {left:-20px;top:calc(var(--recruit-copy-top) + 305.2168px);width:100px;height:120px;border-radius:12px}
  #recruit .floating-top {right:-23px;top:34px;width:142px;height:100px;border-radius:12px;object-fit:cover}
  #recruit .floating-bottom {right:-46px;top:calc(var(--recruit-copy-top) + 343.2168px);width:165px;height:117px;border-radius:16px}

  #contact {padding:40px 24px;gap:40px;align-items:stretch}
  #contact .contact-image {order:0;width:100%;height:auto;aspect-ratio:327/245;border-radius:16px}
  #contact .contact-image picture img {object-fit:cover}
  #contact .contact-copy {order:1;width:100%}
  #contact .contact-copy>p {font-size:16px;line-height:1.8;margin-top:8px}
  #contact .contact-buttons {gap:16px;margin-top:40px}
  #contact .contact-button {width:100%;height:67px;padding:16px;font-size:16px;gap:16px}
  #contact .contact-mail {--contact-mail-row:35px}
  #contact .contact-phone {gap:8px;--contact-phone-gap:16px;--contact-phone-row:35px;--contact-phone-next-row:35px}
  #contact .contact-phone .phone-divider {display:block;transform:none;width:1px;height:24px}
  #contact .contact-phone-divider::after {mask:none;-webkit-mask:none;background:#e5ecf9}
  #contact .phone-number {font-size:16px;margin:0;line-height:1.2}
  #contact .phone-number small {font-size:12px;line-height:1.4}

  /* Footer ordering uses grid/display:contents; the desktop DOM and layout stay intact. */
  #footer {padding:40px 24px;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
  #footer .footer-top,#footer .footer-bottom {display:contents}
  #footer .footer-nav {grid-row:1;display:flex;flex-direction:column;gap:16px;width:100%;margin-bottom:80px;z-index:1}
  #footer::before {content:'';grid-row:2;border-top:2px solid #61758f;margin-bottom:80px;z-index:1}
  #footer .footer-company {grid-row:3;position:relative;z-index:1}
  #footer .footer-company>a picture img {width:179px;height:42px;object-fit:contain}
  #footer .footer-company address {margin-top:16px;font-size:14px;line-height:1.4}
  #footer .footer-address-gap {display:none}
  #footer .footer-legal {grid-row:4;position:relative;z-index:1;margin-top:16px;gap:16px;font-size:14px;line-height:1.4}
  #footer .footer-legal small {font-size:14px;line-height:1.4}
  #footer .footer-catch {grid-row:5;position:relative;z-index:1;margin-top:80px;font-size:32px;line-height:1.4}
  #footer .footer-group {padding:0 0 8px;border-bottom:1px solid #61758f}
  #footer .footer-group>a:not(.footer-overview),#footer .footer-group summary {display:flex;align-items:center;justify-content:space-between;padding:0 8px;min-height:24px;font-size:14px;line-height:1.4}
  #footer .footer-group summary::after {display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#61758f;border-radius:4px;font-size:18px}
  #footer .footer-group[open] {padding-bottom:12px}
  #footer .footer-group ul {margin:8px 0 0;padding:16px;gap:8px;background:#61758f;border-radius:8px;color:#e6e8ea;font-size:12px;line-height:1.4}
  #footer .footer-overview {display:none}
  #footer .footer-motif {left:-185px;top:auto;bottom:-38px;width:505px;height:505px}
  #footer .footer-motif img {width:100%;height:100%}
}
@media(min-width:761px) {.sp-copy {display:none}}
@media(max-width:359px) {
  #about .about-heading h2 {font-size:clamp(40px,12.8vw,48px)}
  #contact .contact-phone {--contact-phone-gap:8px}
  #contact .contact-button {padding-inline:12px}
  #footer .footer-catch {font-size:28px}
}
@media(max-width:359px) {
  .section-heading h2 {font-size:clamp(34px,10.6667vw,40px)}
  #recruit .recruit-copy .section-heading h2 {font-size:clamp(34px,10.6667vw,40px)}
  #contact .contact-phone-row,#contact .contact-phone .phone-number {font-size:14px}
}
@media(max-width:760px) {
  #footer .footer-legal {gap:4px}
  #footer .footer-legal>a::after {width:8px;opacity:0}
  #company .company-row {padding-bottom:15px;min-height:76px}
}
@media(min-width:360px) and (max-width:760px) {
  #footer .footer-legal small {white-space:nowrap}
}
@media(max-width:359px) {
  #contact .contact-phone {--contact-phone-gap:4px}
}
@media(max-width:760px) {
  #about {padding-inline:23px}
  #about .about-foreground {width:calc(100% - 2px)}
}
@media(max-width:760px) {
  .intro-journey .hero>.particles {display:block;inset:0;width:auto;height:auto;background:none;pointer-events:none}
  .intro-journey .hero>.particles>i {display:block}
}

/* Latest SP About photographs: Figma 2303:10847 / 10855. PC sources stay intact. */
.sp-about-photo-textures {display:none}
@media(max-width:760px) {
  #about .about-montage {left:1px}
  #about .about-workers {left:64.680467%;border-radius:12px}
  #about .about-building {z-index:0}
  #about .about-workers {z-index:1}
  #about .about-workers .about-photo-parallax img {
    inset:auto;left:-55.954014%;top:-4%;width:237.065122%;height:auto;max-width:none;
    object-fit:cover;object-position:0 0;transform:none;
    filter:none;
  }
  /* This photo uses its natural colors on SP, matching PC. */
  #about .about-workers .sp-about-photo-textures {display:none}
  #about .sp-about-photo-textures img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:overlay;opacity:.2}
  #about .sp-about-photo-textures img:last-child {opacity:.3}
}


@media(max-width:760px) and (prefers-reduced-motion:reduce){
  #recruit.recruit.section{height:calc(var(--recruit-view-height) + var(--recruit-bottom-clearance))}
  #recruit .recruit-scene{position:relative}
  #recruit .collage{transform:none!important}
  #recruit :is(.collage-column,.recruit-white-blur,.recruit-copy,.recruit-floating){translate:none!important}
}