/* One Melli, four working moments. Load after production.css. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.melli-greet{position:absolute;z-index:6;left:var(--melli-hit-x,0px);top:var(--melli-hit-y,0px);width:var(--melli-hit-width,0px);height:var(--melli-hit-height,0px);padding:0;border:0;border-radius:46%;background:transparent;opacity:0;pointer-events:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.melli-greet.is-active{opacity:1;pointer-events:auto}
.melli-greet:focus-visible{outline:2px dashed #b82b3877;outline-offset:5px}
.yarn-caption.character-caption{left:auto;right:8vw;top:calc(20% + 24px);bottom:auto;max-width:300px;font-size:9px}
.pose-figure{--pose-angle:0deg;position:relative;min-width:0;margin:0;opacity:1;transform:translateY(0) rotate(0deg);transition:opacity .65s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.pose-figure>img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* These frames contain actual rendered character motion; CSS only controls reveal opacity. */
.pose-figure[data-melli-clip],html.poses-ready .pose-figure[data-melli-clip]:not(.is-visible),html.poses-ready .pose-figure[data-melli-clip].is-visible{transform:none;transition:opacity .65s ease}
.character-pose-media{position:relative;display:block;width:100%;aspect-ratio:var(--pose-frame-ratio,1);isolation:isolate}
.character-pose-media>img{display:block;width:100%;height:auto;aspect-ratio:var(--pose-frame-ratio,1);object-fit:contain;user-select:none;-webkit-user-drag:none}
.character-pose-animation{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.character-pose-media.has-animation>img{opacity:0}
.character-pose-media.has-animation>.character-pose-animation{opacity:1}
.pose-caption{display:flex;align-items:center;gap:9px;margin:9px 0 0;padding:0;font-family:'DM Sans','Noto Sans KR',sans-serif;font-size:9px;font-weight:400;line-height:1.6;letter-spacing:.045em;color:var(--muted);text-wrap:balance}
.pose-caption:before{content:'';display:block;flex:none;width:16px;height:1px;background:#b82b3880}
html.poses-ready .pose-figure:not(.is-visible){opacity:0;transform:translateY(16px) rotate(var(--pose-angle))}
html.poses-ready .pose-figure.is-visible{opacity:1;transform:translateY(0) rotate(0deg)}

/* The service figure is the fourth direct child of this heading. */
.services>.section-heading{grid-template-columns:minmax(0,1.12fr) minmax(0,.76fr) minmax(225px,.75fr);gap:22px 3.4vw;align-items:center}
.services>.section-heading>.eyebrow{grid-column:1/3;grid-row:1}
.services>.section-heading>h2{grid-column:1;grid-row:2;align-self:start}
.services>.section-heading>p:not(.eyebrow){grid-column:2;grid-row:2;align-self:center;max-width:315px}
.services>.section-heading>.service-mascot{--pose-angle:2deg;grid-column:3;grid-row:1/3;justify-self:end;align-self:center;width:clamp(230px,21vw,300px);max-width:100%}
.service-mascot>.pose-caption{color:#d7bdb4;justify-content:center;text-align:center;margin-top:5px;font-size:8px;letter-spacing:.09em}
.service-mascot>.pose-caption:before{background:#e8a79880}

/* The director sits beside the story heading, not in the process timeline. */
.ending:has(.story-mascot){grid-template-columns:minmax(0,1.65fr) minmax(0,.8fr);column-gap:5vw;align-items:end}
.ending-heading:has(.story-mascot){display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,220px);column-gap:24px;row-gap:22px;align-items:center}
.ending-heading:has(.story-mascot)>.eyebrow{grid-column:1/-1;margin-bottom:0}
.ending-heading:has(.story-mascot)>h2{grid-column:1;grid-row:2}
.ending-heading>.story-mascot{--pose-angle:-2deg;grid-column:2;grid-row:2;justify-self:end;width:220px;max-width:100%;align-self:center}
.story-mascot>.pose-caption{justify-content:center;text-align:center;font-size:8px;letter-spacing:.05em}
.ending:has(.story-mascot)>.belief{max-width:330px;margin-bottom:3px}

/* A quiet listening pose accompanies the questions. */
.faq-section .section-heading>.faq-mascot{--pose-angle:1.5deg;width:180px;max-width:100%;margin:23px 0 0 4px}
.faq-mascot>.pose-caption{font-size:8px;margin-top:7px}

/* The last pose brings the brief back to a person. */
.contact-copy>.contact-mascot{--pose-angle:-1.5deg;width:220px;max-width:100%;margin:26px 0 0 -5px}
.contact-mascot>.pose-caption{max-width:215px;font-size:8px;margin-top:7px}
html[lang=ko] .pose-caption{letter-spacing:0;word-break:keep-all}

@media(max-width:1200px) and (min-width:761px){
  .services>.section-heading{grid-template-columns:minmax(0,1fr) minmax(210px,.7fr);column-gap:8vw;row-gap:23px;align-items:start}
  .services>.section-heading>.eyebrow{grid-column:1;grid-row:1}
  .services>.section-heading>h2{grid-column:1;grid-row:2}
  .services>.section-heading>p:not(.eyebrow){grid-column:1;grid-row:3;max-width:430px;align-self:start}
  .services>.section-heading>.service-mascot{grid-column:2;grid-row:2/4;align-self:center;width:clamp(220px,24vw,285px)}
  .ending:has(.story-mascot){grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr);column-gap:4vw}
  .ending-heading:has(.story-mascot){grid-template-columns:minmax(0,1fr) 165px;column-gap:17px;row-gap:20px}
  .ending-heading>.story-mascot{width:165px}
  .ending:has(.story-mascot)>.belief{font-size:13px;line-height:1.8}
  .story-mascot>.pose-caption{font-size:7px}
  .contact-copy>.contact-mascot{width:200px;margin-top:22px}
}

@media(max-width:760px){
  .shot-label{display:none}
  .ending .closing{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .ending .closing>p{margin:0;max-width:none}
  .pose-caption{font-size:8px;gap:7px;margin-top:7px;line-height:1.6;letter-spacing:.025em}
  .pose-caption:before{width:12px}
  .services>.section-heading{display:grid;grid-template-columns:minmax(0,1fr) 132px;column-gap:15px;row-gap:24px;align-items:center;margin-bottom:36px}
  .services>.section-heading>.eyebrow{grid-column:1/-1;grid-row:1;margin:0}
  .services>.section-heading>h2{grid-column:1/-1;grid-row:2;max-width:none}
  .services>.section-heading>p:not(.eyebrow){grid-column:1;grid-row:3;max-width:none;margin:0;font-size:11px;line-height:1.8}
  .services>.section-heading>.service-mascot{grid-column:2;grid-row:3;align-self:center;width:132px;max-width:100%}
  .service-mascot>.pose-caption{font-size:7px;letter-spacing:.035em;margin-top:5px;gap:5px}
  .service-mascot>.pose-caption:before{display:none}
  .ending:has(.story-mascot){display:block}
  .ending-heading:has(.story-mascot){display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:22px 13px;align-items:center}
  .ending-heading:has(.story-mascot)>.eyebrow{grid-column:1/-1;margin:0}
  .ending-heading:has(.story-mascot)>h2{grid-column:1;grid-row:2;font-size:38px;line-height:1.08}
  .ending-heading>.story-mascot{grid-column:2;grid-row:2;width:124px;max-width:100%}
  .story-mascot>.pose-caption{font-size:7px;gap:5px;line-height:1.6;margin-top:6px}
  .story-mascot>.pose-caption:before{display:none}
  .ending:has(.story-mascot)>.belief{max-width:none;font-size:13px;margin:27px 0 35px}
  .faq-section .section-heading:has(.faq-mascot){display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:22px 14px;align-items:center;margin-bottom:32px}
  .faq-section .section-heading:has(.faq-mascot)>.eyebrow{grid-column:1/-1;margin:0}
  .faq-section .section-heading:has(.faq-mascot)>h2{grid-column:1;grid-row:2;font-size:39px;line-height:1.08}
  .faq-section .section-heading>.faq-mascot{grid-column:2;grid-row:2;width:112px;margin:0}
  .faq-mascot>.pose-caption{justify-content:center;text-align:center;font-size:7px;gap:5px;margin-top:6px}
  .faq-mascot>.pose-caption:before{display:none}
  .contact-copy:has(.contact-mascot){display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:23px 15px;margin-bottom:36px;align-items:center}
  .contact-copy:has(.contact-mascot)>.eyebrow{grid-column:1/-1;grid-row:1;margin:0}
  .contact-copy:has(.contact-mascot)>h2{grid-column:1/-1;grid-row:2;margin:0}
  .contact-copy:has(.contact-mascot)>p:not(.eyebrow){grid-column:1;grid-row:3;max-width:none;margin:0;font-size:11px;line-height:1.8}
  .contact-copy>.contact-mascot{grid-column:2;grid-row:3;align-self:center;width:128px;margin:0}
  .contact-mascot>.pose-caption{justify-content:center;text-align:center;font-size:7px;line-height:1.6;gap:5px;margin-top:5px}
  .contact-mascot>.pose-caption:before{display:none}
  html[lang=ko] .ending-heading:has(.story-mascot)>h2,html[lang=ko] .faq-section .section-heading:has(.faq-mascot)>h2{font-size:28px;line-height:1.3;word-break:keep-all}
}

@media(max-width:360px){
  .services>.section-heading{grid-template-columns:minmax(0,1fr) 112px;column-gap:12px}
  .services>.section-heading>.service-mascot{width:112px}
  .ending-heading:has(.story-mascot){grid-template-columns:minmax(0,1fr) 104px;column-gap:11px}
  .ending-heading>.story-mascot{width:104px}
  .ending-heading:has(.story-mascot)>h2{font-size:34px}
  .faq-section .section-heading:has(.faq-mascot){grid-template-columns:minmax(0,1fr) 99px;column-gap:11px}
  .faq-section .section-heading>.faq-mascot{width:99px}
  .faq-section .section-heading:has(.faq-mascot)>h2{font-size:35px}
  .contact-copy:has(.contact-mascot){grid-template-columns:minmax(0,1fr) 108px;column-gap:12px}
  .contact-copy>.contact-mascot{width:108px}
}

@media(max-height:600px) and (orientation:landscape){
  .services>.section-heading{grid-template-columns:minmax(0,1fr) 175px;column-gap:6vw;row-gap:18px}
  .services>.section-heading>.eyebrow{grid-column:1;grid-row:1}
  .services>.section-heading>h2{grid-column:1;grid-row:2}
  .services>.section-heading>p:not(.eyebrow){grid-column:1;grid-row:3;max-width:390px}
  .services>.section-heading>.service-mascot{grid-column:2;grid-row:1/4;width:175px;align-self:center}
  .ending-heading:has(.story-mascot){grid-template-columns:minmax(0,1fr) 160px;column-gap:20px}
  .ending-heading>.story-mascot{width:160px}
  .faq-section .section-heading>.faq-mascot{width:135px}
  .contact-copy>.contact-mascot{width:165px}
}

/* Reserve a clear middle stage for Melli in a short portrait viewport. */
@media(max-width:760px) and (min-height:601px) and (max-height:760px){
  .intro{padding-top:112px}
  .intro h1{font-size:clamp(40px,10vw,55px)}
  .intro>.eyebrow{margin-bottom:12px}
  .intro-bottom{bottom:70px}
  .intro-copy,.intro-copy p{max-width:none}
  .intro-copy p{font-size:11px;line-height:1.55;margin-bottom:10px}
  .hero-services{font-size:7px;margin-bottom:12px}
  .shot-label{display:none}
  html[lang=ko] .intro h1{font-size:8.3vw}
}

html.motion-paused .pose-figure,
html.motion-paused.poses-ready .pose-figure:not(.is-visible),
html.motion-paused.poses-ready .pose-figure.is-visible{opacity:1;transform:none;transition:none}

@media(prefers-reduced-motion:reduce){
  .pose-figure,html.poses-ready .pose-figure:not(.is-visible),html.poses-ready .pose-figure.is-visible{opacity:1;transform:none;transition:none}
}