/* ============================================================
   LOGO MOTION
   ============================================================ */
.mb-logo-motion {
  --mbw:708;
  --mbh:257;
  width:min(100%,620px);
  max-width:708px;
  margin-inline:auto;
  position:relative;
  color:var(--ink)
}
.mb-logo-motion--line,.mb-logo-motion--full {
  max-width:708px
}
.mb-motion-canvas {
  position:relative;
  width:100%;
  aspect-ratio:708/257;
  overflow:visible
}
.mb-logo-motion--line .mb-motion-canvas {
  aspect-ratio:708/160
}
.mb-motion-letters {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:37.75%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  overflow:visible;
  z-index:2
}
.mb-logo-motion--line .mb-motion-letters {
  height:60.63%
}
.mb-motion-mari-base {
  height:100%;
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible;
  flex:0 0 auto
}
.mb-motion-letter {
  height:100%;
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto
}
.mb-motion-letter img {
  height:100%;
  width:auto;
  display:block;
  opacity:0;
  transform:translateY(112%);
  filter:none;
  will-change:transform,opacity
}
.mb-motion-space {
  display:inline-block;
  width:0;
  min-width:0;
  flex:0 0 auto;
  height:100%
}
.mb-motion-foot {
  position:absolute;
  left:0;
  top:0;
  width:37.15%;
  display:block;
  overflow:hidden;
  opacity:0;
  clip-path:inset(60% 100% 0 0);
  z-index:2
}
.mb-motion-foot img {
  display:block;
  width:100%;
  height:auto;
  filter:none
}
.mb-motion-piece {
  position:absolute;
  left:0;
  width:100%;
  display:block;
  overflow:hidden;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  z-index:3
}
.mb-motion-piece img {
  display:block;
  width:100%;
  height:auto;
  filter:none
}
.mb-motion-line {
  top:33.85%
}
.mb-motion-align {
  top:59.92%
}
.mb-logo-motion--line .mb-motion-line {
  top:54.37%
}
.site-intro.run .mb-motion-letter img,.mb-logo-motion.run .mb-motion-letter img {
  animation:mbWaveRise 1.12s cubic-bezier(.18,.72,.18,1) forwards;
  animation-delay:var(--d)
}
.site-intro.run .mb-motion-foot,.mb-logo-motion.run .mb-motion-foot {
  animation:mbFootOnlyReveal 1.02s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:.97s
}
.site-intro.run .mb-motion-piece.mb-motion-line,.mb-logo-motion.run .mb-motion-piece.mb-motion-line {
  animation:mbHorizontalReveal 1.02s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:.97s
}
/* thanks 등 일반 로고모션: align도 좌→우, 빠르게 (foot/line과 함께) */
.mb-logo-motion.run .mb-motion-piece.mb-motion-align {
  animation:mbHorizontalReveal 1.02s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:.97s
}
/* index 인트로(첫인상): align만 우→좌, 1.85s 뒤 — 마지막에 반대편에서 안착 */
.site-intro.run .mb-motion-piece.mb-motion-align {
  animation:mbAlignRevealRTL 1.0s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:1.85s
}
@keyframes mbWaveRise {
  0% {
    opacity:0;
    transform:translateY(112%)
  }
  20% {
    opacity:1
  }
  84% {
    opacity:1;
    transform:translateY(-.35%)
  }
  100% {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes mbHorizontalReveal {
  0% {
    opacity:1;
    clip-path:inset(0 100% 0 0)
  }
  100% {
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}
@keyframes mbAlignRevealRTL {
  0% {
    opacity:1;
    clip-path:inset(0 0 0 100%)
  }
  100% {
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}
@keyframes mbFootOnlyReveal {
  0% {
    opacity:1;
    clip-path:inset(60% 100% 0 0)
  }
  100% {
    opacity:1;
    clip-path:inset(60% 0 0 0)
  }
}
@media(prefers-reduced-motion:reduce) {
  .mb-motion-letter img {
    opacity:1;
    transform:none;
    animation:none
  }
  .mb-motion-foot {
    opacity:1;
    clip-path:inset(60% 0 0 0);
    animation:none
  }
  .mb-motion-piece {
    opacity:1;
    clip-path:none;
    animation:none
  }
}
.site-intro {
  position:fixed;
  inset:0;
  z-index:320;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .13s ease,visibility .13s ease
}
.site-intro.done {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
body.intro-active {
  overflow:hidden
}
.site-intro .intro-mark {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(78vw,620px);
  padding:clamp(28px,6vw,64px);
  text-align:center
}
.site-intro .mb-logo-motion {
  width:100%
}
.site-intro.done .mb-logo-motion {
  pointer-events:none
}

.motion-stage .mb-logo-motion {
  width:min(100%,520px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible
}
.motion-stage .mb-motion-canvas {
  width:100%;
  overflow:visible
}
.mb-motion-foot,.mb-motion-piece {
  will-change:clip-path,opacity
}
@media(max-width:560px) {
  .mb-logo-motion {
    width:100%
  }
  .site-intro .intro-mark {
    width:min(86vw,520px)
  }
}
.hero-motion .hm-line-image {
  display:block;
  opacity:1;
  overflow:hidden;
  margin-bottom:clamp(3px,.8vw,6px)
}
.hero-motion .hm-line-image img {
  display:block;
  width:100%;
  height:auto;
  clip-path:inset(0 100% 0 0);
  opacity:0
}
.hero-motion.run .hm-line-image img {
  animation:mbHorizontalRevealImg .82s cubic-bezier(.65,0,.35,1) forwards
}
@keyframes mbHorizontalRevealImg {
  0% {
    opacity:1;
    clip-path:inset(0 100% 0 0)
  }
  100% {
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}
.mb-delay-01 {
  --d:0.10s
}
.mb-delay-02 {
  --d:0.16s
}
.mb-delay-03 {
  --d:0.22s
}
.mb-delay-04 {
  --d:0.28s
}
.mb-delay-05 {
  --d:0.36s
}
.mb-delay-06 {
  --d:0.44s
}
.mb-delay-07 {
  --d:0.56s
}
.mb-delay-08 {
  --d:0.62s
}
.mb-delay-09 {
  --d:0.68s
}
.mb-delay-10 {
  --d:0.74s
}
.hm-delay-00 {
  --hm-d:0.35s
}
.hm-delay-01 {
  --hm-d:0.385s
}
.hm-delay-02 {
  --hm-d:0.42s
}
.hm-delay-03 {
  --hm-d:0.455s
}
.hm-delay-04 {
  --hm-d:0.49s
}
.hm-delay-05 {
  --hm-d:0.525s
}
.hm-delay-06 {
  --hm-d:0.56s
}
.hm-delay-07 {
  --hm-d:0.595s
}
.hm-delay-08 {
  --hm-d:0.63s
}
.hm-delay-09 {
  --hm-d:0.665s
}
.hm-delay-10 {
  --hm-d:0.7s
}
.hm-delay-11 {
  --hm-d:0.735s
}
.hm-delay-12 {
  --hm-d:0.77s
}
.hm-delay-13 {
  --hm-d:0.805s
}
.hm-delay-14 {
  --hm-d:0.84s
}
.hm-delay-15 {
  --hm-d:0.875s
}
.hm-delay-16 {
  --hm-d:0.91s
}
.hm-delay-17 {
  --hm-d:0.945s
}
.hm-delay-18 {
  --hm-d:0.98s
}
.hm-delay-19 {
  --hm-d:1.015s
}
.hm-delay-20 {
  --hm-d:1.05s
}
.hm-delay-21 {
  --hm-d:1.085s
}
.hm-delay-22 {
  --hm-d:1.12s
}
.hm-delay-23 {
  --hm-d:1.155s
}
.hm-delay-24 {
  --hm-d:1.19s
}
.hm-delay-25 {
  --hm-d:1.225s
}
.hm-delay-26 {
  --hm-d:1.26s
}
.hm-delay-27 {
  --hm-d:1.295s
}
.hm-delay-28 {
  --hm-d:1.33s
}
.hm-delay-29 {
  --hm-d:1.365s
}
.hm-delay-30 {
  --hm-d:1.4s
}
.hm-delay-31 {
  --hm-d:1.435s
}
.hm-delay-32 {
  --hm-d:1.47s
}
.hm-delay-33 {
  --hm-d:1.505s
}
.hm-delay-34 {
  --hm-d:1.54s
}
.hm-delay-35 {
  --hm-d:1.575s
}
.hm-delay-36 {
  --hm-d:1.61s
}
.hm-delay-37 {
  --hm-d:1.645s
}
.hm-delay-38 {
  --hm-d:1.68s
}
.hm-delay-39 {
  --hm-d:1.715s
}
.hm-delay-40 {
  --hm-d:1.75s
}
.hm-delay-41 {
  --hm-d:1.785s
}
.hm-delay-42 {
  --hm-d:1.82s
}
.hm-delay-43 {
  --hm-d:1.855s
}
.hm-delay-44 {
  --hm-d:1.89s
}
.hm-delay-45 {
  --hm-d:1.925s
}
.hm-delay-46 {
  --hm-d:1.96s
}
.hm-delay-47 {
  --hm-d:1.995s
}
.hm-delay-48 {
  --hm-d:2.03s
}
.hm-delay-49 {
  --hm-d:2.065s
}
.hm-delay-50 {
  --hm-d:2.1s
}
.hm-delay-51 {
  --hm-d:2.135s
}
.hm-delay-52 {
  --hm-d:2.17s
}
.hm-delay-53 {
  --hm-d:2.205s
}
.hm-delay-54 {
  --hm-d:2.24s
}
.hm-delay-55 {
  --hm-d:2.275s
}
.hm-delay-56 {
  --hm-d:2.31s
}
.hm-delay-57 {
  --hm-d:2.345s
}
.hm-delay-58 {
  --hm-d:2.38s
}
.hm-delay-59 {
  --hm-d:2.415s
}
.hm-delay-60 {
  --hm-d:2.45s
}
.hm-delay-61 {
  --hm-d:2.485s
}
.hm-delay-62 {
  --hm-d:2.52s
}
.hm-delay-63 {
  --hm-d:2.555s
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.nav-arrow-mark {
  display:flex;
  align-items:center;
  justify-content:flex-start
}
.nav-arrow-mark img {
  display:inline-block;
  width:15px;
  height:15px;
  object-fit:contain;
  vertical-align:-.12em;
  opacity:.74
}

@media(max-width:560px) {
  .nav-arrow-mark img {
    width:12px;
    height:12px
  }
}
.section-nav {
  margin:clamp(28px,5vw,42px) 0 clamp(34px,6vw,52px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.section-nav a {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  color:inherit;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease
}
.section-nav a:hover,.section-nav a:focus-visible {
  background:rgba(236,233,225,.58);
  border-color:var(--slate-soft);
  transform:translateX(3px);
  padding-left:8px
}
.section-nav a:last-child {
  border-bottom:0
}
.section-nav .nav-no {
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  margin:0;
  padding:0;
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  font-style:italic;
  line-height:1;
  color:var(--faint)
}
.section-nav .nav-no.nav-arrow-mark img {
  display:block;
  width:10px;
  height:10px;
  object-fit:contain;
  margin:0;
  opacity:.62
}
.section-nav .nav-text {
  display:block;
  margin:0;
  padding:0;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:12.6px;
  line-height:1.42;
  color:var(--soft);
  text-indent:0
}
.section-nav .nav-text strong {
  display:inline;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:15.4px;
  line-height:1.18;
  color:var(--ink);
  margin-right:.35em
}
.contact.contact-enq {
  margin-top:clamp(76px,12vw,124px);
  padding-top:0;
  border-top:0
}
.enq-grid {
  --enq-rule-gap:0;
  --enq-word-h:clamp(22px,2.7vw,27px);
  --enq-action-h:clamp(22px,2.7vw,27px);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"marine enquiry" "rule rule" "bach mail";
  align-items:end;
  column-gap:clamp(24px,5vw,60px);
  row-gap:0
}
.enq-marine {
  grid-area:marine;
  align-self:end;
  justify-self:start;
  display:block;
  width:auto;
  height:var(--enq-word-h);
  max-width:clamp(74px,8.4vw,90px);
  object-fit:contain;
  margin:0 0 var(--enq-rule-gap)
}
.enq-rule {
  grid-area:rule;
  display:block;
  width:100%;
  height:auto;
  margin:0;
  opacity:.9
}
.enq-bach {
  grid-area:bach;
  align-self:start;
  justify-self:start;
  display:block;
  width:auto;
  height:calc(var(--enq-word-h) * 87 / 89);
  max-width:clamp(74px,8.4vw,90px);
  object-fit:contain;
  margin:0
}
.enq-actions {
  display:contents
}
.enq-cta {
  grid-area:enquiry;
  justify-self:end;
  align-self:end;
  display:block;
  line-height:0;
  text-decoration:none;
  border:0;
  margin:0 0 var(--enq-rule-gap);
  transition:transform .25s ease
}
.enq-mail-group {
  grid-area:mail;
  justify-self:end;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin:0
}
.enq-mail {
  display:block;
  line-height:0;
  text-decoration:none;
  border:0;
  opacity:.92;
  transition:opacity .25s ease
}
.enq-privacy {
  display:inline-block;
  margin-top:6px;
  font-family:'Spectral',serif;
  font-size:7.8px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  border-bottom:1px solid rgba(106,114,128,.3);
  transition:color .25s ease,border-color .25s ease
}
.enq-cta img {
  display:block;
  width:auto;
  height:var(--enq-action-h);
  max-width:clamp(118px,16vw,158px);
  object-fit:contain
}
.enq-mail img {
  display:block;
  width:auto;
  height:calc(var(--enq-action-h) * 87 / 89);
  max-width:clamp(118px,16vw,158px);
  object-fit:contain
}
.enq-cta:hover,.enq-cta:focus-visible {
  transform:translateX(3px)
}
.enq-mail:hover,.enq-mail:focus-visible {
  opacity:1
}
.enq-privacy:hover,.enq-privacy:focus-visible {
  color:var(--ink);
  border-color:var(--slate)
}
.enq-cta:focus-visible,.enq-mail:focus-visible,.enq-privacy:focus-visible {
  outline:1px solid var(--slate);
  outline-offset:4px
}
@media(max-width:600px) {
  .section-nav a {
    grid-template-columns:24px minmax(0,1fr);
    gap:9px;
    padding:9px 6px
  }
  .section-nav a:hover,.section-nav a:focus-visible {
    padding-left:6px
  }
  .section-nav .nav-no {
    width:24px;
    min-width:24px
  }
  .section-nav .nav-text {
    font-size:12px
  }
  .section-nav .nav-text strong {
    font-size:14.6px
  }
  .enq-grid {
    --enq-rule-gap:0;
    --enq-word-h:clamp(20px,5.2vw,25px);
    --enq-action-h:clamp(23px,6vw,28px);
    grid-template-columns:1fr;
    grid-template-areas:"marine" "rule" "bach" "enquiry" "mail";
    row-gap:0
  }
  .enq-marine,.enq-bach {
    max-width:clamp(66px,18vw,82px)
  }
  .enq-cta {
    justify-self:start;
    align-self:start;
    margin:clamp(16px,5vw,22px) 0 clamp(4px,1.2vw,6px)
  }
  .enq-mail-group {
    justify-self:start;
    align-items:flex-start;
    margin:0
  }
  .enq-cta img,.enq-mail img {
    max-width:clamp(128px,36vw,165px)
  }
}