/* Interaction state rules supplement the reference stylesheet without changing its layout. */
[hidden]{display:none!important}
.header__navigation li.tend-nav-open>ul{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
.grt-dropdown-list[aria-hidden="false"]{display:block!important}
#mobile-menu.tend-menu-open{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;position:fixed;inset:0;overflow-y:auto;z-index:1000}
body.tend-menu-is-open{overflow:hidden}
body.tend-menu-is-open .grt-mobile-button{position:fixed;z-index:1001}
.accordion-content[aria-hidden="false"]{display:block}
.locationAutoComplete_wrapper [role="listbox"]{max-height:22rem;overflow:auto;z-index:1002}
.tend-location-option{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:none;text-align:left;padding:.65rem 1rem;color:var(--success-600);font:inherit;cursor:pointer}
.tend-location-option:hover,.tend-location-option:focus-visible{background:var(--success-100,#ecf1eb)}
.tend-location-option span{font-size:.9em;color:var(--neutral-700,#666)}
.hero__text.is-expanded{max-height:none!important;overflow:visible!important}
.tend-review-expanded p{max-height:none!important;-webkit-line-clamp:unset!important}
.video-start-wrap.hideButton .video-start{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.hero-section-mob-slider-auto ul{animation:none!important}.parallaxImg{transform:none!important}}

/* Preserve itfting artwork inside the reference logo and portrait frames. */
.itfting-brand{width:111px!important;height:39px!important;object-fit:contain!important}
.hero-home picture{display:block;overflow:hidden;border-radius:inherit}
.hero-home picture img{width:100%;aspect-ratio:372/558;object-fit:cover;object-position:center top}
.video-start-wrap{background:center/cover no-repeat url('/difference-video-thumb.png')}
#map{overflow:hidden;background:#f3f5f1;border-radius:24px}
.locationAutoComplete_wrapper [role="listbox"]:not([hidden]){display:block!important}
@media(max-width:1180px){.itfting-brand{width:100px!important}}

/* Center the larger header wordmark within the full navigation bar height. */
.header .header-logo-nav-wrap > .header__logo{
  --itfting-logo-expanded:9rem;
  --itfting-logo-size:var(--itfting-logo-expanded);
  --logo-header:var(--itfting-logo-size);
  transition:width .2s ease-out;
  display:flex;
  align-items:center;
  align-self:stretch;
  flex-shrink:0;
  padding-block:0!important;
}
.header .header__logo > a{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.header .header__logo .itfting-brand{
  display:block;
  width:var(--itfting-logo-size)!important;
  transition:width .2s ease-out;
  height:auto!important;
  max-width:none!important;
}
@media(max-width:1280px){
  .header .header-logo-nav-wrap > .header__logo{--itfting-logo-expanded:8rem}
}

/* Reference wordmark shrinks from 111px to 99px (33/37) with its desktop header. */
@media(min-width:73.8125rem){
  .header.scroll .header-logo-nav-wrap > .header__logo{
    --itfting-logo-size:calc(var(--itfting-logo-expanded) * .8918918919);
  }
}
@media(prefers-reduced-motion:reduce){
  .header .header-logo-nav-wrap > .header__logo,
  .header .header__logo .itfting-brand{transition:none}
}

/* User-supplied Yuhan Kimberly webfonts, scoped to both note bars.
   Optical sizing: Korean glyphs fill ~87% em versus the reference capitals at ~65%. */
@font-face{font-family:'yuhan-kimberly_font_WebFont';src:url('/tend-home/yuhan-kimberly-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'yuhan-kimberly_font_WebFont';src:url('/tend-home/yuhan-kimberly-medium.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'yuhan-kimberly_font_WebFont';src:url('/tend-home/yuhan-kimberly-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.slide-notes-wrap .splide__slide,
.slide-notes-wrap .slide-notes-wrap-col-2 a{
  font-family:'yuhan-kimberly_font_WebFont',sans-serif;
  font-size:.75rem;
  white-space:nowrap;
}
.slide-notes-wrap .splide-notes{flex:1;min-width:0;max-width:none}
@media(max-width:40rem){
  .slide-notes-wrap .splide__slide,
    .slide-notes-wrap .slide-notes-wrap-col-2 a{font-size:.625rem}
}

/* Emphasize both fixed links with the supplied bold font face. */
.slide-notes-wrap .slide-notes-wrap-col-2 a{font-weight:700}

/* Why itfting? uses the reference stylesheet's size, weight, line-height,
   padding, alignment and responsive rules, without Korean optical adjustments. */
.slide-notes-wrap .slide-notes-wrap-col-1 a{font-family:'Founders Grotesk',sans-serif}

/* Original Why Tend typography, isolated to the fluorescent header bar. */
@font-face{font-family:'Tend Topbar Latin';src:url('/tend-home/founders-grotesk-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
.header__topbar.slide-notes-wrap .slide-notes-wrap-col-1 a{
  font-family:'Tend Topbar Latin',sans-serif;
  font-size:1rem;
  font-weight:500;
  font-style:normal;
  line-height:1.8125;
  letter-spacing:normal;
  height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 1.25rem .125rem;
  transform:none;
}
@media(max-width:73.75rem){.header__topbar.slide-notes-wrap .slide-notes-wrap-col-1 a{height:2.125rem}}
@media(max-width:40rem){.header__topbar.slide-notes-wrap .slide-notes-wrap-col-1 a{font-size:.8125rem;padding-inline:.625rem}}
@media(max-width:21.875rem){.header__topbar.slide-notes-wrap .slide-notes-wrap-col-1 a{padding-inline:.3125rem}}

/* Home reservation calls to action use the supplied Korean bold face. */
.home a.cms-button-secondary{font-weight:700}

/* Use the supplied font for all home body copy, including Latin headings. */
.home main, .home footer {
  --ff-primary: 'yuhan-kimberly_font_WebFont', sans-serif;
  --ff-secondary: 'yuhan-kimberly_font_WebFont', sans-serif;
}
.home main, .home main *:not(.fa),
.home footer, .home footer *:not(.fa) {
  font-family: 'yuhan-kimberly_font_WebFont', sans-serif !important;
}

/* Center the clinical content after removing both portrait columns. */
.home .features-experience{justify-content:center}

/* Director credentials share the surrounding clinical section's typography. */
.home .director-profile{width:100%;max-width:54rem;box-sizing:border-box;margin:var(--space-30) auto var(--space-40);padding:0;text-align:center}
.home .director-profile__name{margin:0 0 var(--space-20);color:var(--success-400);font-size:var(--fs-h3);font-weight:700;line-height:1.4}
.home .director-profile__credentials p{margin:0 0 var(--space-10);font-size:1rem;line-height:1.8125;word-break:keep-all}
.home .director-profile__credentials p:last-child{margin-bottom:0}
.home .director-profile__international{max-width:44rem;margin-inline:auto!important}
@media(max-width:640px){.home .director-profile__credentials p{font-size:.875rem}}

/* Keep the hero title on one line, scaling with its available column width. */
.home .hero-home>.tymbrel-col:nth-child(2){container-type:inline-size}
.home .hero-home #page-title{font-size:clamp(1rem,8.9cqw,4.5rem)!important;white-space:nowrap;letter-spacing:-.035em;line-height:1.15}

/* Frame review screenshots with padding so rounded corners never crop text. */
.home .splide--reviews .review__original-image{background:#fff;border-radius:var(--border-radius-btn);overflow:hidden}
.home .splide--reviews .review__original-image img{box-sizing:border-box;padding:18px;object-fit:contain;border-radius:0}
@media(max-width:640px){.home .splide--reviews .review__original-image img{padding:12px}}

/* Directions: text and entrance photos on the left, Naver map on the right. */
.home .clinic-directions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-60);margin:var(--space-90) auto 0;padding-block:0;align-items:start}
.home .directions-info h2{margin:0 0 1rem}
.home .directions-address{font-size:1.25rem;line-height:1.5;color:var(--success-600);font-weight:700;margin:0 0 var(--space-10)}
.home .directions-landmark{font-size:1rem;line-height:1.8125;margin:0 0 var(--space-40)}
.home .directions-transit h3,.home .directions-entrance-heading{font-size:1.5rem;line-height:1.4;font-weight:700;color:var(--success-400);margin:var(--space-40) 0 var(--space-20)}
.home .directions-transit p{font-size:1rem;line-height:1.8125;margin:0 0 var(--space-30)}
.home .directions-transit p>strong{display:block;font-size:18px;color:var(--success-600)}
.home .directions-distance{display:block;color:var(--success-400);font-size:14px;margin:var(--space-10) 0}
.home .directions-routes{padding:var(--space-20);border-radius:var(--border-radius);background:#f0f3f2;font-size:14px!important}
.home .directions-transit details{padding:0;margin:0 0 var(--space-30);border:0}
.home .directions-transit summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--success-600);padding:12px 0}
.home .directions-note{font-size:12px!important;color:#777}
.home .directions-note a{text-decoration:underline}
.home .directions-entrance{margin:0 0 var(--space-40)}
.home .directions-entrance:last-child{margin-bottom:0}
.home .directions-photo{position:relative;overflow:hidden;border-radius:var(--border-radius-btn);background:#f0f3f2}
.home .directions-photo img{display:block;width:100%;height:auto}
.home .directions-photo svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.home .directions-photo-label{position:absolute;top:16px;left:16px;padding:8px 14px;border-radius:20px;background:#36514c;color:white;font-size:14px;font-weight:700}
.home .directions-entrance figcaption{padding:var(--space-20) 0 0;font-size:14px;line-height:1.8125}
.home .directions-entrance small{display:block;margin-top:5px;color:#888;font-size:11px}
.home .directions-map-column{height:100%;min-width:0}
.home .directions-map-sticky{position:sticky;top:110px}
.home .directions-map{display:block;overflow:hidden;border-radius:var(--border-radius-btn);background:#e9edec}
.home .directions-map img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
.home .directions-map-caption{font-size:12px;color:#777;margin:12px 0 20px}
@media(max-width:800px){.home .clinic-directions{grid-template-columns:1fr;gap:var(--space-40);margin-top:var(--space-90)}.home .directions-map-column{grid-row:2}.home .directions-map-sticky{position:static}.home .directions-photo,.home .directions-map{border-radius:var(--border-radius)}.home .directions-transit p{font-size:14px}}
/* Crop native-resolution full captures without enlarging low-resolution tiles. */
.home .directions-photo{aspect-ratio:850/600}
.home .directions-photo img{position:absolute;inset:-11.666667% auto auto -40%;width:150.588235%!important;height:120%!important;max-width:none;object-fit:fill}
.home .directions-map{position:relative;aspect-ratio:1/1}
.home .directions-map img{position:absolute;top:0;left:-50%;width:177.777778%!important;height:100%!important;max-width:none;object-fit:fill;aspect-ratio:auto}
.home .clinic-directions{width:calc(100% - var(--space-40) * 2);max-width:var(--max-width)}

.home .directions-map-sticky>.cms-button-secondary{margin-top:var(--space-30)}
@media(max-width:640px){.home .clinic-directions{width:calc(100% - 40px)}}

/* Cycle the four selected portraits in the mobile hero, with a seamless repeat. */
@media(max-width:73.75rem){
  .home .hero-section-mob-slider-auto ul{width:max-content;animation-name:homePortraitMix;animation-duration:25s}
  .home .hero-section-mob-slider-auto li{width:13rem}
  .home .hero-section-mob-slider-auto img{display:block;width:13rem;height:auto;aspect-ratio:480/748;object-fit:cover}
}
@keyframes homePortraitMix{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .625rem))}}
