/* Haeon adaptation: keep the purchased template's layout and motion. */
@font-face {
  font-family: "SUIT Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/suit/SUIT-Variable.woff2") format("woff2");
}
/* Funnel keeps the original Latin typography; SUIT supplies Korean glyphs. */
:root {
  --_font-default: "Funnel Sans", "SUIT Variable", sans-serif;
  --_font-accent: "Funnel Display", "SUIT Variable", sans-serif;
}
button.mxd-nav__hamburger { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; border-radius: var(--_radius-l); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.haeon-logo .mxd-logo__image { width: 5.6rem; height: auto; object-fit: contain; }
.haeon-logo .mxd-logo__text { font-weight: 600; letter-spacing: .01em; }
.haeon-logo .mxd-logo__text span { font-size: .62em; font-weight: 500; letter-spacing: .1em; }
.menu-promo__video:has(.haeon-menu-video) { padding: 0; background: transparent; border-radius: 0; }
.menu-promo__video .haeon-menu-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #fff; -webkit-mask: url('/img/haeon/menu-video-cutout-mask.svg') center / 100% 100% no-repeat; mask: url('/img/haeon/menu-video-cutout-mask.svg') center / 100% 100% no-repeat; }
.haeon-hero-title { display: block; width: 100%; margin: 0; font-size: clamp(6.4rem, 19.2vw, 35.2rem); font-weight: 600; line-height: .88; letter-spacing: -.065em; }
/* Fit the viewport height and leave room for the template's 430px floating artwork. */
@media (min-width: 1200px) {
  .haeon-hero-title { font-size: clamp(6.4rem, min(19.2vw, 32vh, calc((86vw - 55rem) / 3.3)), 35.2rem); font-size: clamp(6.4rem, min(19.2vw, 32svh, calc((86vw - 55rem) / 3.3)), 35.2rem); }
}
.haeon-footer-logo { display: block; width: 100%; font-size: clamp(7rem, 24vw, 42rem); font-weight: 600; line-height: .88; letter-spacing: -.065em; color: inherit; text-align: center; }
.mxd-footer__fullwidth-text { z-index: 0; }
.haeon-form-note { margin-bottom: 2.4rem; font-size: 1.6rem; color: var(--t-medium); }
[disabled] { cursor: not-allowed; }
button[disabled] { opacity: .6; }
.haeon-search-status { font-size: 1.6rem; margin-top: 2.4rem; }
.mxd-post[hidden] { display: none !important; }
button.categories__link { color: inherit; font: inherit; text-align: left; }
button.categories__link[aria-pressed="true"] { text-decoration: underline; text-underline-offset: .25em; }
span.categories__link, .meta-tag > span, .post-featured__categories > span { color: inherit; }
.haeon-skip-link { position: fixed; z-index: 10000; left: 1.6rem; top: 1.6rem; padding: 1.2rem 2rem; border-radius: 1rem; background: var(--base); color: var(--t-bright); transform: translateY(-200%); }
.haeon-skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--t-bright) !important; outline-offset: 5px; }
.mxd-menu__wrapper { height: 100dvh; }
.mxd-menu__wrapper[inert] { pointer-events: none; }
.mxd-menu__contain { overscroll-behavior: contain; }
@media (max-width: 767px) {
  .haeon-logo .mxd-logo__image { width: 4.6rem; }
  .haeon-logo { gap: 1rem; }
  .haeon-hero-title { font-size: 18.4vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-caption { transition-duration: .01ms !important; }
}

.haeon-company-address { font-style: normal; line-height: 1.65; overflow-wrap: anywhere; }
html[lang="ko"] p,
html[lang="ko"] address { word-break: keep-all; overflow-wrap: anywhere; }
.haeon-company-email, .haeon-contact-email, .haeon-contact-email .btn-caption { overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.haeon-contact-email { max-width: 100%; }

/* Show the full home photo at its natural ratio, without parallax or upscaling. */
.mxd-divider.haeon-team-photo { width: 100%; max-width: 1672px; height: auto; margin-inline: auto; }
.haeon-team-photo > img { display: block; width: 100%; height: auto; }
.mxd-container__circle.haeon-team-photo-link { position: relative; top: auto; right: auto; max-width: 1672px; margin: 0 auto 2.4rem; }
@media (min-width: 1200px) { .haeon-team-photo-link { text-align: right; } }