/* Vol.2: reference-led, full-width media with overlay navigation. */
.header{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1120px,88%);height:98px;padding:0;border:0;background:transparent;color:#fff;z-index:10;gap:30px}.header .logo{font-family:'Segoe Script','Brush Script MT',cursive;font-weight:300;font-size:37px;letter-spacing:3px;white-space:nowrap}.header .logo span{font-family:Arial,sans-serif;font-size:7px;letter-spacing:3.6px;margin-top:10px}.header nav{display:flex;gap:30px;align-items:center;font:bold 18px/1.5 Georgia,'Times New Roman',serif}.header nav>a,.nav-trigger{color:white;text-shadow:0 1px 6px #0003}.header nav .home-link,.header nav>a:hover,.nav-trigger:hover,.nav-trigger[aria-expanded=true]{color:#d4a9f3}.nav-group{position:relative}.nav-trigger{font:inherit;border:0;padding:12px 0;background:transparent}.dropdown{position:absolute;left:0;top:100%;min-width:170px;padding:0;background:white;border-radius:2px;box-shadow:0 5px 14px #0002;color:#222}.dropdown a{display:block;padding:11px 20px;font:14px/1.3 Georgia,serif;white-space:nowrap}.header nav .dropdown a:hover{background:#f5f1f7;color:#77637c}.hero{display:block;height:85svh;min-height:560px;max-height:1100px;background:#b7bbbf;position:relative}.hero-visual{position:absolute;inset:0;margin:0;height:100%;background:#b7bbbf}.hero-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0002,transparent 25%)}.hero-visual>.hero-poster{width:100%;height:100%;object-fit:contain;object-position:center;background:#bdc1c2}.hero-visual>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.video-toggle{position:absolute;bottom:24px;right:5%;z-index:2;border:1px solid #fff8;background:#0003;color:white;padding:7px 15px;font:12px Georgia,serif}.quick-links{max-width:1120px;margin:auto;padding:38px 0 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.quick-links>a{border:1px solid #aaa;border-radius:17px;min-height:114px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#ffffff80;transition:background .2s}.quick-links>a:hover{background:var(--lilac)}.quick-links span{font:29px/1.3 Georgia,'Times New Roman',serif}.quick-links small{font:13px/1.7 'Batang',serif}.section{scroll-margin-top:20px}.mobile-book{display:none}.header .menu-toggle{color:white}.video-ready .hero-poster{visibility:hidden}
@media(max-width:1200px){.quick-links{margin:0 6%}.header{width:88%}}
@media(max-width:620px){.header{height:auto;min-height:110px;width:90%;padding:22px 0 15px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.header .logo{font-size:30px;text-align:center}.header .logo span{font-size:6px;margin-top:8px}.header .menu-toggle{display:none}.header nav{display:flex;position:static;flex-direction:row;justify-content:center;width:100%;padding:0;background:transparent;box-shadow:none;gap:24px;font-size:15px}.nav-trigger{padding:6px 0}.dropdown{min-width:150px}.dropdown a{font-size:13px;padding:12px 14px}.nav-group:last-of-type .dropdown{left:auto;right:0}.hero{height:76svh;min-height:500px;max-height:850px}.hero-visual>.hero-poster{object-fit:cover;object-position:center}.quick-links{padding:20px 0;gap:8px;margin:0 4%}.quick-links>a{min-height:90px;border-radius:12px}.quick-links span{font-size:17px}.quick-links small{font-size:10px}.video-toggle{bottom:15px}.section{padding-top:60px}footer{padding-bottom:35px}}
/* Keep the model's face and hair within the mobile crop of the final video. */
.hero-visual>.hero-poster{object-fit:cover}.hero-visual>video{object-position:50% center}
@media(max-width:620px){.hero-visual>video,.hero-visual>.hero-poster{object-position:60% center}}
@media(prefers-reduced-motion:reduce){.quick-links>a{transition:none}}

/* Immediate tactile feedback; navigation never waits for animation. */
a,button{touch-action:manipulation}
.button,.quick-links>a,.nav-trigger,.dropdown a,.filters button,.video-toggle,.inner-mobile-book a,.mobile-book a,.photo{transition:transform 100ms ease-out,background-color 120ms ease-out,color 120ms ease-out,box-shadow 120ms ease-out}
.button:active,.quick-links>a:active,.filters button:active,.video-toggle:active,.inner-mobile-book a:active,.mobile-book a:active,.photo:active{transform:scale(.975)}
.nav-trigger:active,.dropdown a:active{background-color:#b9a4c42b}
.button:focus-visible,.quick-links>a:focus-visible{outline:2px solid var(--mauve);outline-offset:4px}
@media(hover:hover){.quick-links>a:hover{transform:translateY(-2px);box-shadow:0 5px 15px #3430390d}}
.photo img{transition:transform 160ms ease-out}
@media(prefers-reduced-motion:reduce){a,button,.photo img{transition:none!important}.button:active,.quick-links>a:active,.photo:active{transform:none}}

/* Reserve the complete shortcut row within the desktop's first viewport. */
@media(min-width:621px){.hero{height:calc(100svh - 190px);min-height:0;max-height:1100px}.quick-links{padding-top:28px;padding-bottom:28px}.quick-links>a{min-height:114px}}
@media(min-width:621px) and (max-height:650px){.hero{height:calc(100svh - 150px)}.quick-links{padding-top:20px;padding-bottom:20px}.quick-links>a{min-height:90px}.quick-links span{font-size:24px}}

/* Home first screen ends after the shortcuts; service photos start below it. */
@media(min-width:621px){.hero{height:calc(100svh - 170px)}.quick-links{padding-top:28px;padding-bottom:28px}}
@media(max-width:620px){.hero{height:calc(100svh - 130px);min-height:360px;max-height:none}.quick-links{padding:20px 0;grid-template-columns:repeat(3,minmax(0,1fr))}.quick-links>a{min-width:0;min-height:90px;text-align:center;padding:8px 3px}.quick-links span{font-size:clamp(12px,3.6vw,16px);white-space:nowrap}.quick-links small{font-size:10px}.nav-trigger{min-height:44px;padding:10px 0}.header nav>.home-link{display:inline-flex;align-items:center;min-height:44px}.dropdown a{min-height:44px;display:flex;align-items:center}.hero-visual:after{background:linear-gradient(#0005,transparent 28%)}.filters button{min-height:44px}.video-toggle{min-height:44px}.header{gap:8px}.inner-page .header{height:132px}}

/* Fast press, gentle release; native links navigate immediately. */
:is(.button,.quick-links>a,.nav-trigger,.dropdown a,.filters button,.video-toggle,.inner-mobile-book a,.mobile-book a,.photo){transition:transform 140ms cubic-bezier(.2,.8,.2,1),background-color 90ms ease-out,color 90ms ease-out,box-shadow 140ms ease-out;-webkit-tap-highlight-color:#77637c22}
:is(.button,.quick-links>a,.filters button,.video-toggle,.inner-mobile-book a,.mobile-book a,.photo):active{transform:scale(.985);transition-duration:40ms;background-color:var(--mauve)}
.nav-trigger:active,.dropdown a:active{transition-duration:40ms;background-color:#b9a4c42b}
.photo:active{background-color:var(--lilac)}
.dropdown:not([hidden]){animation:menu-appear 90ms ease-out}
@keyframes menu-appear{from{opacity:.65;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
dialog[open]{animation:photo-appear 100ms ease-out}
@keyframes photo-appear{from{opacity:.75;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.dropdown:not([hidden]),dialog[open]{animation:none}:is(.button,.quick-links>a,.filters button,.video-toggle,.inner-mobile-book a,.mobile-book a,.photo):active{transform:none}}

/* A light pulse follows a real press without blocking navigation. */
.press-glow{position:fixed;pointer-events:none;z-index:10000;border-radius:50%;width:76px;height:76px;margin:-38px 0 0 -38px;background:radial-gradient(circle,#fff9 0,#ebd6ac77 28%,#bc986333 52%,transparent 70%);animation:press-light 420ms ease-out forwards}
@keyframes press-light{from{opacity:.95;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
a.is-glowing,button.is-glowing{box-shadow:inset 0 0 0 1px #eed8b499,0 0 18px #cfb17b55;transition:box-shadow 60ms ease-out}
@media(prefers-reduced-motion:reduce){.press-glow{animation:none;display:none}a.is-glowing,button.is-glowing{box-shadow:0 0 0 2px #c9ae7d}}

@media(hover:hover){.button:hover{box-shadow:inset 0 1px 0 #f4e3c64d,0 3px 16px #a98b5626;background-image:linear-gradient(115deg,transparent 20%,#f4e3c615 50%,transparent 80%)}.quick-links>a:hover{border-color:#b59a70;box-shadow:inset 0 1px 0 #fff,0 4px 16px #b59a7026}}
.button:active{box-shadow:inset 0 0 0 1px #e9cf9d99,0 0 18px #cfb17b55}

/* Premium animated navigation controls. */
.header nav>.home-link,.header .nav-trigger{position:relative;border-radius:5px;isolation:isolate;transition:color 90ms ease-out,background-color 120ms ease-out,box-shadow 140ms ease-out,transform 100ms ease-out}
.header nav>.home-link::after,.header .nav-trigger::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,transparent,#e3c58e,transparent);transform:scaleX(0);opacity:0;transition:transform 150ms ease-out,opacity 100ms ease-out;pointer-events:none}
.header nav>.home-link:active,.header .nav-trigger:active{transform:translateY(1px) scale(.97);color:#edd6ae;transition-duration:40ms}
.header .nav-trigger[aria-expanded=true],.header nav>.home-link.is-glowing{background:linear-gradient(120deg,#e6c7900d,#e6c79025,#e6c7900d);box-shadow:inset 0 0 0 1px #e4c69555,0 2px 14px #d3b37b33;color:#dbc08f;text-shadow:0 0 10px #d4b27455}
.header .nav-trigger[aria-expanded=true]::after,.header nav>.home-link.is-glowing::after{transform:scaleX(1);opacity:1}
.inner-page .header .nav-trigger[aria-expanded=true]{color:#896b3b;text-shadow:none}
@media(hover:hover){.header nav>.home-link:hover::after,.header .nav-trigger:hover::after{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.header nav>.home-link,.header .nav-trigger,.header nav>.home-link::after,.header .nav-trigger::after{transition:none}.header nav>.home-link:active,.header .nav-trigger:active{transform:none}}

/* Outline artwork preserves the approved wordmark on every device. */
.header .logo{font-size:0;letter-spacing:0;display:flex;flex-direction:column;align-items:center}
.header .logo::before{content:'';display:block;width:215px;height:57px;background:currentColor;mask:url('assets/yunblang-wordmark.svg') center/contain no-repeat;-webkit-mask:url('assets/yunblang-wordmark.svg') center/contain no-repeat}
.header .logo span{margin-top:4px}
@media(max-width:620px){.header .logo::before{width:190px;height:50px}.header .logo span{font-size:6px;margin-top:4px}}