/* =================================================
LUNQHAL BRAND HOMEPAGE V1.3.3
FINAL PRODUCTION CSS
Merged Base + Scoped Correction Patch
================================================= */

/* =================================================

LUNQHAL BRAND HOMEPAGE V1.3

APPLE EDITORIAL LAYOUT SYSTEM

CSS PRODUCTION BUILD

PART 1/3

================================================= */


/* =================================================
01. RESET
================================================= */


*,
*::before,
*::after{

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

margin:0;

background:#000;

color:#fff;

font-family:

-apple-system,

BlinkMacSystemFont,

"SF Pro Display",

"Helvetica Neue",

Arial,

sans-serif;


-webkit-font-smoothing:antialiased;


}


img{

display:block;

max-width:100%;

}


a{

color:inherit;

text-decoration:none;

}


button{

font-family:inherit;

}



/* =================================================
02. DESIGN TOKENS
================================================= */


:root{


--lhq-black:#000000;


--lhq-white:#ffffff;


--lhq-gray:#86868b;


--lhq-light-gray:#d2d2d7;


--lhq-gold:#C9A24A;


--lhq-card:#111111;



--lhq-container:1200px;



--lhq-radius:18px;



--lhq-btn-radius:22px;



--lhq-section-space:120px;



}


/* =================================================
03. CONTAINER SYSTEM

Apple Content Width

================================================= */


.lhq-container{


width:100%;


max-width:var(--lhq-container);


margin:0 auto;


padding-left:24px;

padding-right:24px;


}



/* =================================================
04. GLOBAL SECTION

================================================= */


.lhq-section{


padding-top:var(--lhq-section-space);


padding-bottom:var(--lhq-section-space);


}



.lhq-section-large{


padding-top:160px;


padding-bottom:160px;


}



/* =================================================
05. TYPOGRAPHY SYSTEM

================================================= */


h1,
h2,
h3,
p{


margin:0;


}




.lhq-title-xl{


font-size:64px;


line-height:1.05;


font-weight:600;


letter-spacing:-0.045em;


}



.lhq-title-lg{


font-size:48px;


line-height:1.1;


font-weight:600;


letter-spacing:-0.035em;


}



.lhq-title-md{


font-size:36px;


line-height:1.15;


font-weight:600;


}



.lhq-body{


font-size:18px;


line-height:1.6;


color:var(--lhq-light-gray);


letter-spacing:-0.01em;


}



.lhq-small{


font-size:14px;


color:var(--lhq-gray);


}




/* =================================================
06. HEADER

Apple Style Navigation

================================================= */


.lhq-header{


position:fixed;


top:0;


left:0;


width:100%;


height:52px;


z-index:999;



background:

rgba(0,0,0,.55);



backdrop-filter:

blur(20px);


-webkit-backdrop-filter:

blur(20px);



}



.lhq-nav-container{


height:52px;


display:flex;


align-items:center;


justify-content:space-between;


}



/* Logo */


.lhq-logo{


display:flex;


align-items:center;


height:24px;


}



.lhq-logo img{


height:24px;


width:auto;


}




/* Navigation */


.lhq-nav{


display:flex;


align-items:center;


gap:36px;


font-size:14px;


color:#d6d6d6;


}



.lhq-nav a{


transition:

color .3s ease;


}



.lhq-nav a:hover{


color:#fff;


}



/* =================================================
07. BUTTON SYSTEM

Apple Pill Button

================================================= */



.lhq-btn{


display:inline-flex;


align-items:center;


justify-content:center;



height:44px;


padding:

0 26px;



border-radius:

var(--lhq-btn-radius);



background:

#fff;



color:#000;



font-size:15px;


font-weight:500;



transition:

all .3s ease;


}



.lhq-btn:hover{


transform:

translateY(-2px);



opacity:.85;


}



.lhq-btn-outline{


background:

transparent;


border:

1px solid rgba(255,255,255,.5);


color:#fff;


}




/* =================================================
08. HERO H01

================================================= */



.lhq-hero{


position:relative;


width:100%;


overflow:hidden;


}




.lhq-hero picture,


.lhq-hero img{


width:100%;


}



.lhq-hero img{


height:auto;


}





/* Hero Overlay */


.lhq-hero-overlay{


position:absolute;



left:6.7%;


top:31%;



width:420px;



}




.lhq-hero-overlay h1{


font-size:56px;


line-height:1.05;


font-weight:600;



letter-spacing:-0.04em;


margin-bottom:24px;


}




.lhq-hero-overlay p{


font-size:18px;


line-height:1.6;


color:#ddd;


margin-bottom:36px;


}



/* =================================================
09. EDITORIAL MODULE

H02 / H03

================================================= */


.lhq-editorial{


position:relative;


max-width:1200px;


margin:

120px auto 0;


overflow:hidden;


border-radius:

var(--lhq-radius);


}



.lhq-editorial-media{


width:100%;


}



.lhq-editorial-media img{


width:100%;


height:auto;


border-radius:

var(--lhq-radius);


}





/* Overlay Content */


.lhq-editorial-content{


position:absolute;


left:6%;


bottom:12%;


width:420px;


}



.lhq-editorial-content h2{


font-size:48px;


line-height:1.1;


font-weight:600;


letter-spacing:-0.035em;


margin-bottom:22px;


}



.lhq-editorial-content p{


font-size:18px;


line-height:1.6;


color:#ddd;


margin-bottom:30px;


}




/* Text Link */


.lhq-link{


font-size:17px;


color:#fff;


transition:.3s;


}



.lhq-link:hover{


color:var(--lhq-gold);


}


/* =================================================

10. H04 PRODUCT MODULE

SL016 PRODUCT EXPERIENCE

================================================= */



.lhq-product{


max-width:1200px;


margin:

160px auto;


display:grid;


grid-template-columns:

1fr 1fr;



align-items:center;



gap:80px;


padding:

0 24px;



}



/* Product Image */


.lhq-product-image{


width:100%;


}



.lhq-product-image img{


width:100%;


border-radius:

var(--lhq-radius);



}





/* Product Content */


.lhq-product-content{


max-width:520px;


}



.lhq-product-content h2{


font-size:22px;


font-weight:500;


color:

var(--lhq-gold);



letter-spacing:.02em;


margin-bottom:18px;


}



.lhq-product-content h3{


font-size:52px;


line-height:1.08;


font-weight:600;


letter-spacing:-0.04em;



margin-bottom:24px;


}



.lhq-product-content p{


font-size:18px;


line-height:1.6;


color:#d2d2d7;



margin-bottom:40px;


}



/* =================================================

SL016 FEATURE SPEC SYSTEM

================================================= */



.lhq-product-specs{


display:flex;


gap:48px;


margin-bottom:44px;



}



.lhq-product-specs div{


display:flex;


flex-direction:column;


gap:8px;


}



.lhq-product-specs strong{


font-size:38px;


line-height:1;


font-weight:600;



color:

var(--lhq-gold);


}



.lhq-product-specs span{


font-size:15px;


color:

#b0b0b0;



}





/* =================================================

11. OUTDOOR APPLICATION GRID

V01-V04

APPLE CARD SYSTEM

================================================= */



.lhq-applications{


max-width:1200px;


margin:

160px auto;


padding:

0 24px;


}





.lhq-section-header{


text-align:center;


margin-bottom:70px;


}



.lhq-section-header h2{


font-size:48px;


line-height:1.1;


font-weight:600;


letter-spacing:-0.04em;


margin-bottom:18px;


}




.lhq-section-header p{


font-size:18px;


color:#aaa;


}




/* Grid */


.lhq-grid{


display:grid;


grid-template-columns:

repeat(2,1fr);



gap:

24px;


}





/* =================================================

Application Card

================================================= */



.lhq-card{


position:relative;


height:620px;



overflow:hidden;


border-radius:

var(--lhq-radius);



background:

var(--lhq-card);


}



.lhq-card img{


width:100%;


height:100%;


object-fit:cover;



transition:

transform .8s cubic-bezier(.2,.8,.2,1);


}



.lhq-card:hover img{


transform:

scale(1.04);


}





/* Dark gradient for text readability */


.lhq-card::after{


content:"";


position:absolute;


left:0;


bottom:0;


width:100%;


height:45%;



background:

linear-gradient(

transparent,

rgba(0,0,0,.75)

);



pointer-events:none;


}





/* Card Content */


.lhq-card-content{


position:absolute;


left:40px;


bottom:42px;


z-index:2;


max-width:360px;


}



.lhq-card-content h3{


font-size:32px;


line-height:1.1;


font-weight:600;



margin-bottom:12px;


}



.lhq-card-content p{


font-size:16px;


line-height:1.5;



color:#ddd;



margin-bottom:20px;


}



.lhq-card-content a{


font-size:16px;


color:#fff;



transition:.3s;


}



.lhq-card-content a:hover{


color:

var(--lhq-gold);


}



/* =================================================

12. V05 FUTURE HOME

BRAND VISION MODULE

================================================= */



.lhq-future{


position:relative;


max-width:1200px;


margin:

160px auto;



overflow:hidden;


border-radius:

var(--lhq-radius);


}



.lhq-future img{


width:100%;


height:auto;


border-radius:

var(--lhq-radius);


}



/* Overlay */


.lhq-future-content{


position:absolute;


left:50%;


bottom:12%;


transform:

translateX(-50%);



width:600px;


text-align:center;


}



.lhq-future-content h2{


font-size:56px;


line-height:1.05;


font-weight:600;



letter-spacing:-0.045em;



margin-bottom:22px;


}



.lhq-future-content p{


font-size:20px;


line-height:1.5;


color:#ddd;


margin-bottom:36px;


}





/* =================================================

13. FOOTER SYSTEM

================================================= */



.lhq-footer{


margin-top:160px;


padding:

80px 0;



border-top:

1px solid rgba(255,255,255,.12);



background:#000;


}




.lhq-footer img{


height:28px;


width:auto;


margin-bottom:24px;


}



.lhq-footer p{


font-size:15px;


color:#999;


}





.lhq-footer-links{


display:flex;


gap:36px;


margin:

40px 0;


}



.lhq-footer-links a{


font-size:14px;


color:#aaa;



transition:.3s;


}



.lhq-footer-links a:hover{


color:#fff;


}



/* =================================================

14. GLOBAL HOVER MICRO INTERACTION

================================================= */



.lhq-card,


.lhq-btn,


.lhq-link{


-webkit-tap-highlight-color:

transparent;


}





.lhq-card:hover{


cursor:pointer;


}



/* =================================================

15. LARGE SCREEN OPTIMIZATION

1440px+

================================================= */



@media(min-width:1440px){



.lhq-hero-overlay{


left:

calc(

(100vw - 1200px)/2

);


}



}



/* =================================================

16. SMOOTH BRAND ANIMATION SYSTEM

Apple Style Motion

================================================= */


/*
基础动画原则：

- 快速响应
- 不夸张
- 强调高级感

Duration:

0.3s - 0.8s

*/




.lhq-animate{


opacity:0;


transform:

translateY(30px);



transition:

opacity .8s ease,

transform .8s cubic-bezier(.2,.8,.2,1);



}




.lhq-animate.active{


opacity:1;


transform:none;


}





/* 图片进入动画 */


.lhq-image-reveal{


overflow:hidden;


}




.lhq-image-reveal img{


transform:

scale(1.05);


transition:

transform 1.2s cubic-bezier(.2,.8,.2,1);



}




.lhq-image-reveal.active img{


transform:

scale(1);


}






/* =================================================

17. SCROLL REVEAL SYSTEM

配合 brand.js

================================================= */



.lhq-reveal{


opacity:0;


transform:

translateY(40px);


transition:


opacity .9s ease,


transform .9s ease;


}



.lhq-reveal.is-visible{


opacity:1;


transform:none;


}






/* =================================================

18. REDUCED MOTION ACCESSIBILITY

用户关闭动画时

================================================= */



@media(prefers-reduced-motion:reduce){



*,
*::before,
*::after{


animation-duration:

0.01ms!important;


animation-iteration-count:

1!important;


scroll-behavior:

auto!important;


transition-duration:

0.01ms!important;


}



.lhq-reveal,
.lhq-animate{


opacity:1;


transform:none;


}



}





/* =================================================

19. FOCUS ACCESSIBILITY

Keyboard Navigation

================================================= */



a:focus-visible,


button:focus-visible{


outline:

2px solid var(--lhq-gold);



outline-offset:

4px;



border-radius:

6px;


}





/* =================================================

20. MOBILE RESPONSIVE FRAMEWORK

基础接口

Desktop First

================================================= */



@media(max-width:1024px){



.lhq-nav{


gap:20px;


}



.lhq-product{


grid-template-columns:

1fr;



gap:50px;


}



.lhq-grid{


grid-template-columns:

1fr;


}



}




/* =================================================

21. TABLET

768px

================================================= */



@media(max-width:768px){



:root{


--lhq-section-space:

80px;


}



/* Container */


.lhq-container{


padding-left:

20px;


padding-right:

20px;


}





/* Header */


.lhq-header{


height:

48px;


}



.lhq-nav{


display:none;


}





.lhq-logo img{


height:

22px;


}







/* Typography */


.lhq-title-xl{


font-size:

42px;


}



.lhq-title-lg{


font-size:

36px;


}



.lhq-title-md{


font-size:

28px;


}



.lhq-body{


font-size:

16px;


}





/* Hero */


.lhq-hero-overlay{


left:

24px;


right:

24px;


top:

auto;


bottom:

60px;


width:auto;


}



.lhq-hero-overlay h1{


font-size:

42px;


}





/* Editorial */


.lhq-editorial{


margin-top:

80px;


border-radius:

14px;


}




.lhq-editorial-content{


position:

absolute;


left:

24px;


bottom:

36px;


width:

calc(100% - 48px);


}




.lhq-editorial-content h2{


font-size:

36px;


}




/* Product */


.lhq-product{


margin:

100px auto;


padding:

0 20px;


}



.lhq-product-content h3{


font-size:

38px;


}



.lhq-product-specs{


gap:

24px;


flex-wrap:

wrap;


}




.lhq-product-specs strong{


font-size:

30px;


}





/* Application Cards */


.lhq-applications{


margin:

100px auto;


}



.lhq-grid{


gap:

16px;


}



.lhq-card{


height:

480px;


border-radius:

16px;


}



.lhq-card-content{


left:

24px;


bottom:

28px;


}




.lhq-card-content h3{


font-size:

28px;


}





/* Future */


.lhq-future-content{


width:

calc(100% - 40px);


bottom:

50px;


}



.lhq-future-content h2{


font-size:

38px;


}



}






/* =================================================

22. SMALL PHONE

iPhone 390px

================================================= */



@media(max-width:430px){



.lhq-btn{


height:

42px;


padding:

0 22px;


}



.lhq-hero-overlay h1{


font-size:

36px;


}




.lhq-card{


height:

420px;


}



.lhq-future-content h2{


font-size:

32px;


}



}




/* =================================================

23. IPHONE SAFE AREA SUPPORT

================================================= */



@supports(padding:max(0px)){



.lhq-header{


padding-top:

env(safe-area-inset-top);


}



.lhq-footer{


padding-bottom:

calc(

80px +

env(safe-area-inset-bottom)

);


}



body{


padding-bottom:

env(safe-area-inset-bottom);


}



}




/* =================================================

24. CLOUDFLARE PERFORMANCE OPTIMIZATION

================================================= */



/*

图片优化：

HTML:

loading="lazy"

fetchpriority="high"

用于Hero

*/



.lhq-card img,


.lhq-editorial img,


.lhq-product img{


content-visibility:auto;


}




/*

GPU acceleration

*/

.lhq-card,


.lhq-editorial,


.lhq-product{


contain:

layout paint;


}




/*

减少重绘

*/

.lhq-card img,


.lhq-btn{


will-change:

transform;


}





/* =================================================

25. PRINT RESET

================================================= */



@media print{


.lhq-header{


display:none;


}


}



/* =================================================

END

LUNQHAL BRAND HOMEPAGE V1.3 CSS

================================================= */

/* =================================================
V1.3.3 CORRECTION PATCH
Appended after base styles so scoped corrections take precedence.
================================================= */

/* =================================================

LUNQHAL BRAND HOMEPAGE V1.3.2

FINAL PRODUCTION CORRECTION PATCH

PART 1/3

================================================= */



/* =========================
01 GLOBAL VARIABLES
========================= */


:root {


--lhq-black:#000;


--lhq-dark:#050505;


--lhq-white:#fff;


--lhq-gray:#86868b;


--lhq-container:

1440px;


--lhq-padding:

48px;


--lhq-radius:

28px;


--lhq-transition:

cubic-bezier(.4,0,.2,1);



}




* {


box-sizing:border-box;


}





html {


scroll-behavior:smooth;


}





body {


margin:0;


background:#000;


color:#fff;


font-family:

-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Helvetica Neue",
Arial,
sans-serif;


}







/* =========================
02 HEADER FINAL SYSTEM
========================= */



.lhq-header {


position:fixed;


top:0;


left:0;


width:100%;


height:72px;


z-index:1000;


background:

rgba(0,0,0,.72);


backdrop-filter:

blur(20px);


-webkit-backdrop-filter:

blur(20px);


border-bottom:

1px solid rgba(255,255,255,.08);


}





.lhq-header-inner {


height:100%;


max-width:

1440px;


margin:auto;


padding:

0 var(--lhq-padding);


display:flex;


align-items:center;


justify-content:space-between;


}





/* Logo */


.lhq-logo {


display:flex;


align-items:center;


}





.lhq-logo img {


width:120px;


height:auto;


display:block;


}





/* Navigation */


.lhq-navigation {


display:flex;


align-items:center;


gap:42px;


}





.lhq-navigation a {


color:

rgba(255,255,255,.88);


text-decoration:none;


font-size:14px;


font-weight:400;


letter-spacing:.02em;


transition:

color .3s ease;


}





.lhq-navigation a:hover {


color:#fff;


}





/* Mobile Button */


.lhq-menu-button {


display:none;


background:none;


border:0;


padding:8px;


}





.lhq-menu-button span {


display:block;


width:22px;


height:1px;


background:#fff;


margin:5px 0;


}









/* =========================
03 HERO H01 SYSTEM

2400×840

NO CROP

========================= */





.lhq-hero {


position:relative;


width:100%;


overflow:hidden;


}





.lhq-hero picture {


display:block;


width:100%;


}





.lhq-hero img {


display:block;


width:100%;


height:auto;


object-fit:contain;


}








/* H01 Overlay */


.lhq-hero-overlay {


position:absolute;


left:

max(48px,calc((100vw - 1440px)/2));


bottom:90px;


max-width:560px;


z-index:2;


}





.lhq-hero-overlay h1 {


margin:0 0 22px;


font-size:

64px;


line-height:

1.05;


font-weight:

600;


letter-spacing:

-.04em;


}





.lhq-hero-overlay p {


margin:0 0 34px;


font-size:

22px;


line-height:

1.45;


color:

rgba(255,255,255,.85);


}





/* =========================
04 BUTTON SYSTEM

APPLE STYLE

========================= */


.lhq-btn {


display:inline-flex;


align-items:center;


justify-content:center;


height:48px;


padding:

0 28px;


border-radius:

999px;


background:#fff;


color:#000;


font-size:15px;


font-weight:500;


text-decoration:none;


transition:

transform .3s ease,
background .3s ease;


}





.lhq-btn:hover {


transform:

translateY(-2px);


background:#f5f5f5;


}









/* =========================
05 EDITORIAL IMAGE SYSTEM

H02/H03/V05

2400×1350

========================= */





.lhq-editorial {


position:relative;


margin:

120px auto;


max-width:

1440px;


border-radius:

var(--lhq-radius);


overflow:hidden;


}





.lhq-media {


position:relative;


width:100%;


}





.lhq-media picture {


display:block;


}





.lhq-media img {


display:block;


width:100%;


height:auto;


object-fit:contain;


background:#000;


}






/* Editorial Overlay */


.lhq-editorial-overlay {


position:absolute;


left:64px;


bottom:64px;


max-width:560px;


z-index:2;


}





.lhq-editorial-overlay h2 {


margin:0 0 18px;


font-size:

52px;


line-height:

1.08;


letter-spacing:

-.03em;


}





.lhq-editorial-overlay p {


margin:0 0 28px;


font-size:

20px;


line-height:

1.45;


color:

rgba(255,255,255,.85);


}


/* =================================================

LUNQHAL BRAND HOMEPAGE V1.3.2

FINAL PRODUCTION CORRECTION PATCH

PART 2/3

================================================= */







/* =========================
06 H04 SL016 PRODUCT SYSTEM

PREMIUM PRODUCT SHOWCASE

========================= */





.lhq-product {


position:relative;


max-width:1440px;


margin:

120px auto;


padding:

80px;


display:grid;


grid-template-columns:

42% 58%;


align-items:center;


gap:40px;


background:#080808;


border-radius:

28px;


overflow:hidden;


}







/* Product Copy */


.lhq-product-copy {


position:relative;


z-index:2;


}





.lhq-product-copy > span {


display:block;


margin-bottom:20px;


font-size:14px;


letter-spacing:.2em;


color:

rgba(255,255,255,.55);


text-transform:uppercase;


}





.lhq-product-copy h2 {


margin:0 0 22px;


font-size:

56px;


line-height:

1.05;


letter-spacing:

-.04em;


font-weight:600;


}





.lhq-product-copy p {


margin:0 0 42px;


max-width:520px;


font-size:

20px;


line-height:

1.5;


color:

rgba(255,255,255,.82);


}







/* Product Image */


.lhq-product-media {


width:100%;


overflow:hidden;


}





.lhq-product-media picture {


display:block;


}





.lhq-product-media img {


display:block;


width:100%;


height:auto;


object-fit:contain;


}









/* =========================
07 SL016 FEATURE ICON SYSTEM

========================= */





.lhq-feature-rail {


display:flex;


gap:20px;


margin-bottom:42px;


}





.lhq-feature {


width:120px;


min-height:120px;


padding:

18px;


border-radius:

18px;


background:

rgba(255,255,255,.06);


display:flex;


flex-direction:column;


justify-content:center;


align-items:flex-start;


transition:

transform .3s ease,
background .3s ease;


}





.lhq-feature:hover {


transform:

translateY(-5px);


background:

rgba(255,255,255,.1);


}





.lhq-feature img {


width:28px;


height:28px;


margin-bottom:14px;


object-fit:contain;


}





.lhq-feature strong {


font-size:

26px;


line-height:1;


font-weight:600;


}





.lhq-feature span {


margin-top:8px;


font-size:

13px;


color:

rgba(255,255,255,.65);


}











/* =========================
08 GALLERY SYSTEM

V01-V04

APPLE CARD GRID

========================= */





.lhq-gallery {


max-width:

1440px;


margin:

120px auto;


padding:

0 48px;


}





.lhq-gallery-header {


text-align:center;


margin-bottom:60px;


}





.lhq-gallery-header h2 {


margin:0 0 16px;


font-size:

52px;


letter-spacing:

-.04em;


}





.lhq-gallery-header p {


margin:0;


font-size:

20px;


color:

rgba(255,255,255,.65);


}









/* 2 × 2 GRID */


.lhq-gallery-grid {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:28px;


}









/* Card */


.lhq-gallery-card {


position:relative;


display:block;


height:

520px;


border-radius:

28px;


overflow:hidden;


background:#111;


text-decoration:none;


}





.lhq-gallery-card picture {


display:block;


width:100%;


height:100%;


}





.lhq-gallery-card img {


display:block;


width:100%;


height:100%;


object-fit:cover;


background:#111;


transition:

transform .8s cubic-bezier(.2,.8,.2,1);


}








/* Image Hover */


.lhq-gallery-card:hover img {


transform:

scale(1.04);


}









/* =========================
09 OVERLAY PROTECTION

TEXT READABILITY

========================= */





.lhq-hero::after,


.lhq-editorial::after,


.lhq-gallery-card::after,


.lhq-future::after {


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

180deg,

transparent 35%,

rgba(0,0,0,.65) 100%

);


pointer-events:none;


}









/* Gallery Text Overlay */


.lhq-gallery-overlay {


position:absolute;


left:40px;


bottom:36px;


z-index:2;


}





.lhq-gallery-overlay h3 {


margin:0 0 12px;


font-size:

36px;


line-height:

1.1;


letter-spacing:

-.03em;


}





.lhq-gallery-overlay p {


margin:0;


font-size:

17px;


line-height:

1.45;


color:

rgba(255,255,255,.85);


}











/* =========================
10 CARD MOTION SYSTEM

PREMIUM INTERACTION

========================= */





.lhq-gallery-card {


transition:

transform .35s ease,
box-shadow .35s ease;


}





.lhq-gallery-card:hover {


transform:

translateY(-6px);


box-shadow:

0 20px 60px rgba(0,0,0,.45);


}





.lhq-product {


transition:

transform .35s ease;


}





.lhq-product:hover {


transform:

translateY(-3px);


}


/* =================================================

LUNQHAL BRAND HOMEPAGE V1.3.2

FINAL PRODUCTION CORRECTION PATCH

PART 3/3

================================================= */







/* =========================
11 V05 FUTURE HOME

========================= */





.lhq-future {


position:relative;


max-width:

1440px;


margin:

120px auto;


border-radius:

28px;


overflow:hidden;


}





.lhq-future picture {


display:block;


}





.lhq-future img {


display:block;


width:100%;


height:auto;


object-fit:contain;


background:#000;


}





.lhq-future-overlay {


position:absolute;


left:64px;


bottom:64px;


max-width:620px;


z-index:2;


}





.lhq-future-overlay h2 {


margin:0 0 20px;


font-size:

56px;


line-height:

1.05;


letter-spacing:

-.04em;


}





.lhq-future-overlay p {


margin:0 0 32px;


font-size:

20px;


line-height:

1.5;


color:

rgba(255,255,255,.82);


}







.lhq-future-tags {


display:flex;


gap:14px;


flex-wrap:wrap;


}





.lhq-future-tags span {


padding:

10px 18px;


border-radius:

999px;


background:

rgba(255,255,255,.12);


backdrop-filter:

blur(12px);


font-size:

14px;


border:

1px solid rgba(255,255,255,.15);


}









/* =========================
12 FOOTER SYSTEM

PREMIUM BRAND FOOTER

========================= */





.lhq-footer {


margin-top:

160px;


padding:

80px 48px 40px;


background:#050505;


border-top:

1px solid rgba(255,255,255,.1);


}





.lhq-footer-inner {


max-width:

1440px;


margin:auto;


}





.lhq-footer-brand {


margin-bottom:

60px;


}





.lhq-footer-brand img {


width:

140px;


height:auto;


}





.lhq-footer-brand p {


margin-top:20px;


font-size:

18px;


color:

rgba(255,255,255,.65);


}







.lhq-footer-columns {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:40px;


padding-bottom:

60px;


border-bottom:

1px solid rgba(255,255,255,.1);


}





.lhq-footer-column {


display:flex;


flex-direction:column;


gap:14px;


}





.lhq-footer-column h4 {


margin:0 0 10px;


font-size:

14px;


color:#fff;


}





.lhq-footer-column a {


font-size:

14px;


color:

rgba(255,255,255,.65);


text-decoration:none;


transition:

color .3s ease;


}





.lhq-footer-column a:hover {


color:#fff;


}





.lhq-footer-bottom {


padding-top:

32px;


display:flex;


justify-content:space-between;


align-items:center;


font-size:

13px;


color:

rgba(255,255,255,.5);


}





.lhq-footer-legal {


display:flex;


gap:28px;


}





.lhq-footer-legal a {


color:

rgba(255,255,255,.5);


text-decoration:none;


}









/* =========================
13 MOBILE RESPONSIVE

768px

========================= */





@media(max-width:768px){





:root {


--lhq-padding:

20px;


}







/* HEADER */


.lhq-header {


height:

64px;


}





.lhq-header-inner {


padding:

0 20px;


}





.lhq-logo img {


width:

96px;


}





.lhq-navigation {


display:none;


}





.lhq-menu-button {


display:block;


}









/* HERO */


.lhq-hero-overlay {


left:

24px;


right:

24px;


bottom:

40px;


}





.lhq-hero-overlay h1 {


font-size:

38px;


}





.lhq-hero-overlay p {


font-size:

17px;


}









/* EDITORIAL */


.lhq-editorial {


margin:

60px 20px;


border-radius:

20px;


}





.lhq-editorial-overlay {


left:

24px;


right:

24px;


bottom:

30px;


}





.lhq-editorial-overlay h2 {


font-size:

34px;


}





.lhq-editorial-overlay p {


font-size:

16px;


}









/* PRODUCT */


.lhq-product {


margin:

60px 20px;


padding:

30px;


display:flex;


flex-direction:column-reverse;


gap:40px;


}





.lhq-product-copy h2 {


font-size:

38px;


}





.lhq-product-copy p {


font-size:

16px;


}








.lhq-feature-rail {


gap:

12px;


}





.lhq-feature {


width:

100px;


min-height:

100px;


}





.lhq-feature strong {


font-size:

22px;


}









/* GALLERY */


.lhq-gallery {


padding:

0 20px;


margin:

70px auto;


}





.lhq-gallery-grid {


grid-template-columns:

1fr;


gap:

18px;


}





.lhq-gallery-card {


height:

420px;


}





.lhq-gallery-overlay {


left:

24px;


bottom:

24px;


}





.lhq-gallery-overlay h3 {


font-size:

30px;


}







/* FUTURE */


.lhq-future {


margin:

60px 20px;


}





.lhq-future-overlay {


left:

24px;


bottom:

30px;


}





.lhq-future-overlay h2 {


font-size:

38px;


}





.lhq-future-tags span {


font-size:

12px;


padding:

8px 14px;


}









/* FOOTER */


.lhq-footer {


padding:

60px 20px 30px;


}





.lhq-footer-columns {


grid-template-columns:

1fr 1fr;


gap:

32px;


}





.lhq-footer-bottom {


flex-direction:column;


align-items:flex-start;


gap:

20px;


}







}





/* =========================
14 ACCESSIBILITY

========================= */





@media(prefers-reduced-motion:reduce){



* {


animation:none!important;


transition:none!important;


scroll-behavior:auto!important;


}



}





/* Keyboard Focus */


a:focus-visible,


button:focus-visible {


outline:

2px solid #fff;


outline-offset:

4px;


}









/* =========================
15 FINAL CLEANUP

========================= */





img {


max-width:100%;


}





picture {


overflow:hidden;


}





a {


-webkit-tap-highlight-color:

transparent;


}





button {


cursor:pointer;


}


/* =========================
H03 OUTDOOR POSITION PATCH
========================= */


.lhq-outdoor .lhq-editorial-overlay{

top:80px;

left:80px;

bottom:auto;

}


/* =========================
SL016 IMAGE SCALE
========================= */


.lhq-sl016 .lhq-product-media img{


transform:scale(1.3);


}



/* =========================
V05 FUTURE CENTER
========================= */


.lhq-future-home .lhq-future-overlay{


left:50%;

top:50%;

bottom:auto;

transform:

translate(-50%,-50%);

text-align:center;


}



/* =========================================================
LUNQHAL V1.3.3 STRUCTURAL CORRECTION
LOCKED H04 / HEADER / GALLERY / V05 SYSTEM
========================================================= */

/* ---------- Header: restore horizontal production layout ---------- */
.lhq-header-inner{
  width:100%;
  max-width:1200px;
  height:52px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.lhq-navigation{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:34px;
  font-size:14px;
  line-height:1;
  color:rgba(255,255,255,.78);
}

.lhq-navigation a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  white-space:nowrap;
  transition:color .25s ease, opacity .25s ease;
}

.lhq-navigation a:hover{
  color:#fff;
}

/* ---------- H03: copy belongs upper-left ---------- */
.lhq-outdoor .lhq-editorial-overlay,
.lhq-outdoor .lhq-editorial-content{
  left:6%;
  top:10%;
  bottom:auto;
  max-width:440px;
}

/* ---------- H04: locked 1/3 copy + 2/3 full image ---------- */
.lhq-product.lhq-sl016{
  width:min(100%,1440px);
  max-width:1440px;
  margin:120px auto;
  padding:0;
  display:grid;
  grid-template-columns:33.3333% 66.6667%;
  gap:0;
  align-items:stretch;
  background:#050505;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.lhq-sl016-copy{
  min-width:0;
  min-height:100%;
  padding:72px 56px 42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(circle at 100% 38%,rgba(201,162,74,.12),transparent 42%),
    linear-gradient(180deg,#080808 0%,#000 100%);
}

.lhq-sl016-copy-top{
  max-width:100%;
}

.lhq-sl016-eyebrow{
  display:block;
  margin:0 0 8px;
  color:#c9a24a;
  font-size:16px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lhq-sl016-copy h2{
  margin:0 0 28px;
  color:#fff;
  font-size:clamp(48px,4.4vw,72px);
  line-height:.96;
  font-weight:500;
  letter-spacing:-.045em;
}

.lhq-sl016-lead{
  max-width:430px;
  margin:0 0 34px;
  color:rgba(255,255,255,.82);
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.55;
}

.lhq-sl016-cta{
  min-width:150px;
  width:max-content;
  height:46px;
  padding:0 22px;
  border:1px solid #c9a24a;
  border-radius:3px;
  background:transparent;
  color:#f2cf79;
  font-size:15px;
  gap:12px;
}

.lhq-sl016-cta:hover{
  background:#c9a24a;
  color:#050505;
  opacity:1;
}

.lhq-sl016-features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 18px;
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,.12);
}

.lhq-sl016-feature{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.lhq-sl016-feature img{
  width:34px;
  height:34px;
  flex:0 0 34px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.lhq-sl016-feature:nth-child(1) img,
.lhq-sl016-feature:nth-child(4) img{
  filter:none;
}

.lhq-sl016-feature div{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.lhq-sl016-feature strong{
  color:#fff;
  font-size:14px;
  line-height:1.2;
  font-weight:500;
}

.lhq-sl016-feature span{
  margin-top:3px;
  color:rgba(255,255,255,.58);
  font-size:12px;
  line-height:1.2;
}

.lhq-sl016-media{
  min-width:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.lhq-sl016-media picture{
  display:block;
  width:100%;
}

.lhq-sl016-media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

/* ---------- V01-V04: locked 2 × 2, preserve full source image ---------- */
.lhq-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}

.lhq-gallery-card{
  height:auto;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:28px;
}

.lhq-gallery-card picture,
.lhq-gallery-card img{
  width:100%;
  height:100%;
}

.lhq-gallery-card img{
  object-fit:contain;
  background:#111;
}

/* ---------- V05: copy bottom-center, not visual center ---------- */
.lhq-future-overlay--center{
  left:50%;
  right:auto;
  bottom:8%;
  width:min(760px,calc(100% - 48px));
  max-width:760px;
  transform:translateX(-50%);
  text-align:center;
}

.lhq-future-overlay--center .lhq-future-tags{
  justify-content:center;
}

/* ---------- Existing footer legal routing presentation ---------- */
.lhq-footer-legal a:hover{
  color:#fff;
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .lhq-header-inner{
    padding:0 20px;
  }

  .lhq-navigation{
    display:none;
  }

  .lhq-product.lhq-sl016{
    width:calc(100% - 40px);
    margin:60px 20px;
    display:flex;
    flex-direction:column;
    border-radius:20px;
  }

  .lhq-sl016-media{
    order:1;
  }

  .lhq-sl016-copy{
    order:2;
    padding:44px 28px 30px;
  }

  .lhq-sl016-copy h2{
    font-size:48px;
  }

  .lhq-sl016-features{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px;
    margin-top:36px;
  }

  .lhq-gallery-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .lhq-gallery-card{
    aspect-ratio:16 / 9;
    border-radius:20px;
  }

  .lhq-future-overlay--center{
    bottom:7%;
    width:calc(100% - 40px);
  }
}

@media (max-width:430px){
  .lhq-sl016-copy{
    padding:36px 22px 26px;
  }

  .lhq-sl016-copy h2{
    font-size:42px;
  }

  .lhq-sl016-lead{
    font-size:16px;
  }

  .lhq-sl016-features{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================================================
   V1.3.4 FINAL H04 / LEGAL PRESENTATION OVERRIDES
   Final locked visual reference: H04 2400 × 1350
   ========================================================= */

/* Header: compact, high-end navigation bar */
.lhq-header,
.lhq-header-inner { height: 60px; }

/* H04: 1/3 information panel + 2/3 complete source artwork */
.lhq-product.lhq-sl016 {
  width: min(100%, 1440px);
  max-width: 1440px;
  margin: 72px auto;
  padding: 0;
  display: grid;
  grid-template-columns: 33.333333% 66.666667%;
  gap: 0;
  align-items: stretch;
  background: #050505;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.lhq-sl016-copy {
  min-width: 0;
  min-height: 100%;
  padding: 54px 42px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg,#090909 0%,#000 100%);
}

.lhq-sl016-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(48px,4.2vw,68px);
}

.lhq-sl016-lead {
  max-width: 330px;
  margin-bottom: 28px;
  font-size: clamp(14px,1.05vw,17px);
  line-height: 1.55;
}

.lhq-sl016-features {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.lhq-sl016-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  text-align: center;
}

.lhq-sl016-feature img,
.lhq-sl016-feature:nth-child(1) img,
.lhq-sl016-feature:nth-child(2) img,
.lhq-sl016-feature:nth-child(3) img,
.lhq-sl016-feature:nth-child(4) img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  filter: brightness(0) invert(1);
  opacity: .96;
}

.lhq-sl016-feature div { align-items: center; }
.lhq-sl016-feature strong {
  color: #f4c94f;
  font-size: 12px;
  font-weight: 600;
}
.lhq-sl016-feature span {
  margin-top: 2px;
  color: rgba(255,255,255,.68);
  font-size: 11px;
}

.lhq-sl016-media {
  position: relative;
  min-width: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lhq-sl016-media picture,
.lhq-sl016-media picture img {
  display: block;
  width: 100%;
  height: auto;
}

.lhq-sl016-media picture { position: relative; z-index: 1; }
.lhq-sl016-media img { object-fit: contain; max-width: 100%; }

/* Four captions are HTML overlays, placed directly beneath the
   four close-up image areas in the locked 2400 × 1350 artwork. */
.lhq-sl016-detail-overlays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lhq-sl016-detail-overlay {
  position: absolute;
  margin: 0;
  padding: 5px 8px 6px;
  background: rgba(0,0,0,.72);
  border-left: 2px solid #13b7ff;
  max-width: 29%;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

.lhq-sl016-detail-overlay h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(10px,.82vw,14px);
  line-height: 1.15;
  font-weight: 500;
}

.lhq-sl016-detail-overlay h3 strong { color: #f4c94f; font-weight: 700; }
.lhq-sl016-detail-overlay p {
  margin: 2px 0 0;
  color: rgba(255,255,255,.70);
  font-size: clamp(8px,.62vw,11px);
  line-height: 1.25;
}

.lhq-sl016-detail-overlay--1 { left: 56.2%; top: 39.5%; }
.lhq-sl016-detail-overlay--2 { left: 82.5%; top: 39.5%; }
.lhq-sl016-detail-overlay--3 { left: 56.2%; top: 76.5%; }
.lhq-sl016-detail-overlay--4 { left: 82.5%; top: 76.5%; }

/* V05: bottom-center copy only */
.lhq-future-home .lhq-future-overlay,
.lhq-future-overlay--center {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 9%;
  transform: translateX(-50%);
  width: min(760px,calc(100% - 64px));
  text-align: center;
}

/* Legal pages: standalone document presentation, no site header/footer */
.lhq-legal-page {
  min-height: 100vh;
  background: #fff;
  color: #1d1d1f;
}
.lhq-legal-shell {
  width: min(100% - 48px, 920px);
  margin: 0 auto;
  padding: 58px 0 88px;
}
.lhq-legal-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 54px;
}
.lhq-legal-brand img { width: 112px; height: auto; display:block; }
.lhq-legal-title {
  margin: 0;
  font-size: clamp(40px,6vw,64px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 600;
}
.lhq-legal-updated {
  margin: 14px 0 56px;
  color: #6e6e73;
  font-size: 14px;
}
.lhq-legal-intro {
  max-width: 760px;
  margin: 0 0 54px;
  color: #424245;
  font-size: 20px;
  line-height: 1.55;
}
.lhq-legal-content { max-width: 780px; }
.lhq-legal-content section { margin: 0 0 46px; }
.lhq-legal-content h2 {
  margin: 0 0 16px;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.018em;
}
.lhq-legal-content h3 {
  margin: 26px 0 10px;
  font-size: 19px;
  line-height: 1.3;
}
.lhq-legal-content p,
.lhq-legal-content li {
  color: #424245;
  font-size: 16px;
  line-height: 1.72;
}
.lhq-legal-content ul { padding-left: 24px; }
.lhq-legal-content a,
.lhq-legal-back a { color: #0066cc; text-decoration: none; }
.lhq-legal-content a:hover,
.lhq-legal-back a:hover { text-decoration: underline; }
.lhq-legal-back {
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid #d2d2d7;
  font-size: 15px;
}
.lhq-legal-nav {
  margin: 14px 0 50px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}

@media (max-width:768px){
  .lhq-header,
  .lhq-header-inner { height:56px; }
  .lhq-product.lhq-sl016 {
    width: calc(100% - 32px);
    margin: 48px 16px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
  }
  .lhq-sl016-media { order:1; }
  .lhq-sl016-copy { order:2; padding:38px 24px 26px; }
  .lhq-sl016-features { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .lhq-sl016-feature img { width:26px; height:26px; flex-basis:26px; }
  .lhq-sl016-feature strong { font-size:10px; }
  .lhq-sl016-feature span { font-size:9px; }
  .lhq-sl016-detail-overlays { position:relative; inset:auto; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; background:#050505; }
  .lhq-sl016-detail-overlay,
  .lhq-sl016-detail-overlay--1,
  .lhq-sl016-detail-overlay--2,
  .lhq-sl016-detail-overlay--3,
  .lhq-sl016-detail-overlay--4 { position:static; max-width:none; }
  .lhq-future-home .lhq-future-overlay,
  .lhq-future-overlay--center { bottom:8%; width:calc(100% - 36px); }
  .lhq-legal-shell { width:min(100% - 36px,920px); padding:38px 0 58px; }
  .lhq-legal-brand { margin-bottom:38px; }
  .lhq-legal-title { font-size:42px; }
  .lhq-legal-intro { font-size:18px; }
}