/* Korenn responsive refinements
 * Loaded after page styles so shared mobile behaviour stays consistent.
 */

html,
body {
  max-width: 100%;
}

body.mobile-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.kor-legal-header {
  background: #12100e;
  border-bottom-color: rgba(245, 242, 238, 0.16);
}

@media only screen and (max-width: 1199px) {
  .header .navbar {
    flex-wrap: nowrap;
  }

  .header .navbar__menu-wrapper {
    flex-grow: 0;
    column-gap: 0;
  }

  .header .open-offcanvas-nav {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 5px;
    align-items: flex-end;
    justify-content: center;
  }

  .mobile-menu,
  .mobile-menu .mobile-menu__wrapper,
  .mobile-menu__backdrop {
    transition-duration: 350ms;
  }

  .mobile-menu .mobile-menu__wrapper {
    gap: 34px;
    padding: 28px 0 32px;
    color: #f5f2ee;
    background: #12100e;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transition-delay: 0ms;
  }

  .show-menu .mobile-menu__wrapper {
    transition-delay: 0ms;
  }

  .mobile-menu .mobile-menu__header {
    flex-wrap: nowrap;
    padding: 0 24px;
  }

  .mobile-menu .logo img {
    width: 168px;
    max-width: 100%;
    height: auto;
  }

  .mobile-menu .close-mobile-menu {
    position: static;
    display: grid;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    color: #f5f2ee;
    font-size: 30px;
  }

  .mobile-menu .navbar__item a {
    display: flex;
    min-height: 54px;
    padding: 18px 24px;
    align-items: center;
    font-size: 14px;
    color: rgba(245, 242, 238, 0.82);
    border-bottom-color: rgba(245, 242, 238, 0.14);
  }

  .mobile-menu .navbar__list > li > a,
  .mobile-menu .navbar__list > li button,
  .mobile-menu .navbar__list > li:nth-of-type(2) {
    border-color: rgba(245, 242, 238, 0.14);
  }

  .mobile-menu .mobile-menu__cta {
    padding: 0 24px;
    text-align: left;
  }

  .mobile-menu .mobile-menu__cta .btn-primary,
  .mobile-menu .mobile-menu__cta .btn-animated-text {
    width: 100%;
  }

  .mobile-menu .mobile-menu__cta .btn-animated-text {
    color: #f5f2ee;
    border-color: rgba(245, 242, 238, 0.72);
    background: transparent;
  }

  .mobile-menu .mobile-menu__cta .btn-animated-text span,
  .mobile-menu .mobile-menu__social a {
    color: rgba(245, 242, 238, 0.78);
  }

  .mobile-menu .mobile-menu__social {
    padding: 0 24px;
    justify-content: flex-start;
  }

  .mobile-menu .mobile-menu__social a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .mobile-menu .nav-fade {
    transition-duration: 350ms !important;
  }

  .show-menu .nav-fade {
    animation-duration: 350ms;
  }

  .mobile-menu__backdrop {
    transition-delay: 0ms;
  }
}

@media only screen and (max-width: 991px) {
  /* Tablets use native scrolling and a stable, immediately visible layout. */
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .scale-up,
  .title-animation,
  .title-animation-lg,
  .title-animation-sd,
  .title-animation-color,
  .split-parent,
  .split-child,
  .split-parent-lg,
  .split-child-lg,
  .split-parent-sd,
  .split-child-sd {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .parallax-image {
    transform: none !important;
  }
}

@media only screen and (max-width: 767px) {
  html,
  body,
  .page-wrapper {
    overflow-x: clip;
  }

  .header {
    padding-block: 10px;
  }

  .header .navbar-logo img,
  .kor-logo {
    width: 178px;
    max-width: 178px;
    height: auto;
  }

  .header .navbar-logo a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }

  .header .navbar__options {
    gap: 12px;
  }

  .pt-140 {
    padding-block-start: 68px;
  }

  .pb-140 {
    padding-block-end: 68px;
  }

  .split-parent,
  .split-parent-lg,
  .split-parent-sd {
    overflow: visible !important;
  }

  .parallax-image {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover;
  }

  .btn-animated-text {
    min-height: 46px;
  }

  .projects-hero h1,
  .urban-hero h1,
  .kc-hero h1,
  .inner-hero h1 {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .detail-hero h1 {
    font-size: clamp(42px, 13vw, 56px);
    line-height: 0.98;
  }

  .inner-title,
  .urban-title,
  .kc-title,
  .detail-overview h2,
  .project-gallery-page h2 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.14;
  }

  .inner-hero__bottom > p,
  .urban-hero__bottom > p,
  .detail-hero__summary p {
    font-size: 16px;
    line-height: 1.6;
  }

  .projects-hero__scroll,
  .detail-scroll,
  .urban-text-link,
  .urban-dark-link,
  .kc-text-link,
  .project-detail-back a,
  .kor-footer a,
  .kor-footer .back-to-top {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .detail-breadcrumb a,
  .project-anchor-nav a {
    display: inline-flex;
    min-height: 44px;
    padding-inline: 6px;
    margin-inline: -6px;
    align-items: center;
  }

  .kor-footer .footer-four-bottom a {
    min-width: 44px;
    padding-inline: 4px;
    justify-content: center;
  }

  .kor-project-nav button {
    width: 44px;
    height: 44px;
  }

  .about-three .about-three__header {
    margin-bottom: 44px !important;
  }

  .about-three .about-three__header .title-lg-sm {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.025em;
  }

  .about-three .about-three__header p {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.65;
  }

  .kor-why__media {
    min-height: 320px;
  }

  .kor-why__row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 18px 0;
    align-items: start;
  }

  .kor-why__row .num {
    grid-row: 1 / span 2;
    width: auto;
  }

  .kor-why__row h3 {
    min-width: 0;
    font-size: 17px;
    line-height: 1.3;
  }

  .kor-why__row p {
    grid-column: 2;
    font-size: 14px;
    line-height: 1.55;
  }

  .transform .transform__wrapper,
  .projects-page .transform .transform__wrapper,
  .references-page .transform .transform__wrapper,
  .contact-page .transform .transform__wrapper {
    min-height: 580px;
    padding: 48px 20px;
  }

  .transform .transform__wrapper > h2 {
    margin-bottom: 28px;
  }

  .kor-funding-support {
    margin-top: 38px;
  }

  .project-gallery-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(145px, 45vw, 190px);
    gap: 8px;
  }

  .project-gallery-page__item,
  .project-gallery-page__item:nth-child(6n + 1),
  .project-gallery-page__item:nth-child(6n + 2) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .project-gallery-page__item:nth-child(8n + 1) {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  .project-gallery-page__overlay {
    padding: 14px;
  }

  .project-gallery-page__overlay i {
    width: 38px;
    height: 38px;
  }

  .contact-main__layout,
  .location-layout {
    gap: 48px;
  }

  .contact-form-panel {
    padding: 36px 22px;
  }

  .contact-form-grid {
    gap: 20px;
  }

  .contact-field input,
  .contact-field textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .contact-consent {
    align-items: flex-start;
    line-height: 1.5;
  }

  .legal-page {
    min-height: 70vh;
    padding-top: 112px;
    color: #171411;
    background: var(--kor-paper);
  }

  .legal-page article {
    overflow-wrap: anywhere;
  }

  .legal-page article p,
  .legal-page article li {
    font-size: 15px;
    line-height: 1.7;
  }
}

@media only screen and (max-width: 575px) {
  .header .navbar__mobile-options {
    display: none !important;
  }

  .mobile-menu {
    max-width: none;
  }

  .mobile-menu .mobile-menu__wrapper {
    inset-inline-start: -100%;
    gap: 26px;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .mobile-menu.show-menu .mobile-menu__wrapper {
    inset-inline-start: 0;
  }

  .mobile-menu .mobile-menu__header,
  .mobile-menu .mobile-menu__cta,
  .mobile-menu .mobile-menu__social {
    padding-inline: 20px;
  }

  .mobile-menu .navbar__item a {
    padding-inline: 20px;
  }

  .projects-hero__content,
  .urban-hero__content,
  .kc-hero__content,
  .inner-hero__content {
    padding-top: 132px;
  }

  .detail-hero__content {
    padding-top: 126px;
  }

  .contact-detail {
    min-height: auto;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .contact-detail__value {
    text-align: left;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-field,
  .contact-field.is-wide,
  .contact-consent,
  .contact-submit {
    grid-column: 1;
  }

  .location-visual {
    height: 320px;
  }

  .kor-apply .thumb {
    min-height: 320px;
  }
}

@media only screen and (max-width: 359px) {
  .header .navbar-logo img,
  .kor-logo {
    width: 164px;
    max-width: 164px;
  }

  .project-gallery-page__grid {
    grid-auto-rows: 138px;
  }

  .project-gallery-page__overlay span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}