/* About Us: architectural portal, photo layers and a scroll-led salon. */
.hd-about { background: #f8f1e6; color: #4a1d2d; font-family: 'DM Sans',Arial,sans-serif; overflow: hidden; }
.hd-about *, .hd-about *::before, .hd-about *::after { box-sizing: border-box; }
.hd-about figure { margin: 0; }
.hd-about img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hd-about h1,.hd-about h2 { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 500; margin: 0; letter-spacing: -1px; }
.hd-about h1 { font-size: 68px; line-height: 1.09; max-width: 760px; margin: 20px auto 28px; }
.hd-about h2 { font-size: 52px; line-height: 1.15; margin: 18px 0 25px; }
.hd-about p { font-family: 'DM Sans',Arial,sans-serif; font-size: 17px; line-height: 1.85; color: #6a5557; margin: 0 0 24px; }
.ab-wrap { max-width: 1280px; padding: 100px 40px; margin: auto; }
.ab-kicker { display: block; font-size: 15px; line-height: 1.6; text-transform: uppercase; letter-spacing: 2px; color: #a77a47; }
.ab-link { display: inline-flex; gap: 35px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ad895e; font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; }
.ab-link span { transition: transform .4s; }
.ab-link:hover span { transform: translate(4px,-3px); }
.ab-arrival { padding: 70px 40px 0; text-align: center; background: radial-gradient(ellipse at 50% 90%,#e5cfac,#f8f1e6 65%); }
.ab-hero-copy { position: relative; z-index: 2; }
.ab-doorway { height: 620px; max-width: 1200px; margin: 48px auto 0; position: relative; perspective: 1800px; border: 10px solid #dac198; border-bottom: 0; border-radius: 240px 240px 0 0; background: #34141e; isolation: isolate; }
.ab-hero-image { position: absolute; inset: 0; border-radius: 230px 230px 0 0; overflow: hidden; }
.ab-hero-image img { transform: scale(1.02); }
.ab-door { display: none; position: absolute; top: 0; width: 50%; height: 100%; z-index: 3; background: repeating-linear-gradient(90deg,transparent 0,transparent 34px,#ad885528 35px,#ad885528 36px),linear-gradient(120deg,#542737,#28101b); border: 2px solid #ba955f; backface-visibility: hidden; }
.ab-motion .ab-door { display: block; }
.ab-door-left { left: 0; border-radius: 230px 0 0 0; transform-origin: left center; }
.ab-door-right { right: 0; border-radius: 0 230px 0 0; transform-origin: right center; }
.ab-door i { position: absolute; inset: 42px 30px; border: 1px solid #d1aa6c99; border-radius: inherit; }
.ab-door::after { content: ''; position: absolute; top: 54%; width: 13px; height: 58px; border: 2px solid #d1aa6c; border-radius: 20px; }
.ab-door-left::after { right: 18px; } .ab-door-right::after { left: 18px; }
.ab-portal-line { position: absolute; inset: -22px; border: 1px solid #b98f5755; border-radius: 250px 250px 0 0; pointer-events: none; }
.ab-intro { text-align: center; position: relative; padding-top: 110px; padding-bottom: 100px; }
.ab-intro p { max-width: 850px; margin: 0 auto; font-size: 21px; line-height: 1.8; }
.ab-flower { display: block; font-size: 40px; margin-top: 35px; color: #ac824b; }
.ab-history { display: flex; align-items: center; gap: 95px; padding-top: 45px; padding-bottom: 130px; }
.ab-copy { flex: 1; min-width: 0; }
.ab-layer-scene { flex: 0 0 52%; height: 580px; position: relative; perspective: 1300px; }
.ab-history-main { position: absolute; inset: 0 70px 50px 0; transform: rotate(-4deg); border: 9px solid #fff9ef; box-shadow: 0 25px 65px #3b1b2525; z-index: 2; }
.ab-history-detail { position: absolute; width: 45%; height: 250px; right: 0; bottom: 0; border: 8px solid #fff9ef; transform: rotate(7deg); z-index: 3; box-shadow: 0 18px 40px #31121e44; }
.ab-brass-frame { position: absolute; inset: 35px 25px 5px 35px; border: 1px solid #ac824b; }
.ab-philosophy { min-height: 730px; position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 80px max(40px,calc((100% - 1200px)/2)); background: #29141b; perspective: 1600px; }
.ab-philosophy-photo { position: absolute; inset: -45px 0; opacity: .65; }
.ab-philosophy-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#26101a00,#26101ab0); }
.ab-philosophy-panel { position: relative; width: 520px; padding: 48px; color: #f7ecdb; background: #461d2ee8; border: 1px solid #c49d6677; box-shadow: 20px 25px 0 #1e0e1640; }
.ab-philosophy-panel p { color: #eedfd6; }
.ab-experience { text-align: center; }
.ab-experience-head { display: flex; gap: 80px; text-align: left; align-items: center; }
.ab-experience-head > div { flex: 1; }
.ab-experience-head > p { flex: 1; }
.ab-orbit { position: relative; perspective: 1800px; height: 540px; margin: 60px 0 25px; }
.ab-orbit figure { position: absolute; top: 0; bottom: 0; border: 9px solid #fffaf1; box-shadow: 0 20px 45px #35182330; }
.ab-orbit-centre { width: 48%; left: 26%; z-index: 3; }
.ab-orbit-side { width: 33%; height: 80%; top: 10% !important; }
.ab-orbit-left { left: 0; transform: rotateY(27deg) rotateZ(-4deg); }
.ab-orbit-right { right: 0; transform: rotateY(-27deg) rotateZ(4deg); }
.ab-location { display: flex; gap: 90px; align-items: center; border-top: 1px solid #c8a97855; }
.ab-location-photo { width: 47%; height: 620px; border-radius: 220px 220px 0 0; overflow: hidden; border: 9px solid #e4d1b5; }
.ab-distances { display: flex; gap: 35px; padding: 25px 0; border-top: 1px solid #b9946555; border-bottom: 1px solid #b9946555; margin: 20px 0; }
.ab-distances div { flex: 1; }
.ab-distances strong { display: block; font-size: 30px; font-weight: 500; }
.ab-distances span { display: block; font-size: 15px; margin-top: 7px; color: #87664c; }
.hd-about .ab-note { font-size: 15px; line-height: 1.7; border-left: 2px solid #b99465; padding-left: 18px; }
.ab-invitation { display: flex; min-height: 470px; background: #4a1d2d; color: #f8f0e1; }
.ab-invitation > div { width: 56%; padding: 75px max(40px,calc((100vw - 1200px)/2)); padding-right: 45px; }
.ab-invitation figure { width: 44%; }
.ab-button { display: inline-flex; gap: 45px; padding: 17px 25px; margin: 10px 0 25px; background: #e7c591; color: #421a29; font-size: 15px; text-decoration: none; }
.ab-social { display: block; color: #ead5bb; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }
.hd-about a:focus-visible { outline: 2px solid #a87946; outline-offset: 6px; }
@media(max-width: 1000px) {
 .hd-about h1 { font-size: 56px; }.hd-about h2 { font-size: 44px; }
 .ab-history,.ab-location { gap: 40px; }.ab-layer-scene { height: 490px; }.ab-history-main { right: 30px; }.ab-history-detail { height: 200px; }.ab-location-photo { height: 550px; }
 .ab-experience-head { gap: 40px; }.ab-orbit { height: 440px; }
}
@media(max-width: 700px) {
 .ab-wrap { padding: 62px 22px; }.hd-about h1 { font-size: 42px; }.hd-about h2 { font-size: 36px; }.hd-about p { font-size: 16px; }.ab-kicker { letter-spacing: 1.4px; }
 .ab-arrival { padding: 45px 22px 0; }.ab-doorway { height: 410px; margin-top: 38px; border-width: 6px; border-radius: 150px 150px 0 0; }.ab-hero-image { border-radius: 145px 145px 0 0; }.ab-door-left { border-radius: 145px 0 0 0; }.ab-door-right { border-radius: 0 145px 0 0; }.ab-door i { inset: 30px 14px; }.ab-portal-line { inset: -14px; border-radius: 160px 160px 0 0; }
 .ab-intro p { font-size: 18px; }.ab-history,.ab-location { flex-direction: column; gap: 40px; }.ab-layer-scene { flex: none; width: 100%; height: 430px; }.ab-history-detail { height: 185px; }
 .ab-philosophy { min-height: 700px; padding: 70px 22px; }.ab-philosophy-panel { width: 100%; padding: 28px; }.ab-philosophy-photo::after { background: #28101a44; }
 .ab-experience-head { flex-direction: column; gap: 8px; align-items: stretch; }.ab-orbit { height: 340px; margin: 28px 0; }.ab-orbit figure { border-width: 5px; }.ab-orbit-centre { width: 64%; left: 18%; }.ab-orbit-side { width: 45%; }
 .ab-location-photo { width: 100%; height: 430px; }.ab-invitation { flex-direction: column; }.ab-invitation > div { width: 100%; padding: 60px 22px; }.ab-invitation figure { width: 100%; height: 300px; }
}
@media(prefers-reduced-motion: reduce) { .ab-door { display: none !important; }.hd-about [data-ab-scene],.hd-about [data-ab-panel],.hd-about [data-ab-parallax],.hd-about [data-ab-orbit] figure { transform: none !important; } }

/* 5.3: distinct chapters and contained image motion. */
.hd-about { --ab-header-height: 110px; }
.hd-about .ab-arrival { padding-top: calc(var(--ab-header-height) + 65px); padding-bottom: 56px; }
.hd-about .ab-doorway { margin-top: 45px; max-width: 1100px; height: 560px; box-shadow: 0 28px 65px #41211c22; }
.ab-door { box-shadow: inset 0 0 35px #12070b99, 12px 0 24px #18091044; transition: filter .8s; }
.ab-door-left { background-color: #4a2131; }
.ab-door-right { background-color: #381525; }
.hd-about .ab-intro { max-width: none; padding: 85px max(40px,calc((100% - 1200px)/2)); background: #b18a50; border-top: 1px solid #d7bd8b; border-bottom: 1px solid #98713e; text-align: left; display: flex; flex-wrap: wrap; gap: 12px 70px; align-items: center; }
.ab-intro > .ab-kicker { width: 100%; color: #3e2128; }
.hd-about .ab-intro h2 { width: 30%; margin: 12px 0; }
.hd-about .ab-intro p { flex: 1; max-width: 780px; margin: 0; font-size: 20px; color: #302126; }
.hd-about .ab-intro .ab-flower { color: #543021; font-size: 48px; margin: 0; }
.hd-about .ab-history { padding-top: 105px; padding-bottom: 110px; }
.hd-about .ab-philosophy { overflow: hidden; isolation: isolate; min-height: 700px; padding-top: 90px; padding-bottom: 90px; }
.hd-about .ab-philosophy-photo { inset: 0; opacity: 1; transform: none !important; z-index: -1; }
.hd-about .ab-philosophy-photo img { height: 100%; width: 100%; object-position: center; transform: scale(1.06); }
.hd-about .ab-philosophy-photo::after { background: linear-gradient(90deg,#28101a15 20%,#28101a80 100%); }
.hd-about .ab-philosophy-panel { background: #461d2ef2; }
.hd-about .ab-experience { padding-top: 95px; padding-bottom: 90px; }
.hd-about .ab-location { max-width: none; padding: 95px max(40px,calc((100% - 1200px)/2)); background: #ddc79f; border-top: 1px solid #b6935d; border-bottom: 1px solid #b6935d; }
.hd-about .ab-location .ab-kicker { color: #75502c; }
.hd-about .ab-invitation { min-height: 0; padding: 72px max(40px,calc((100% - 1200px)/2)); gap: 65px; align-items: center; background: #af874c; color: #351c25; border-bottom: 7px solid #dfc89e; }
.hd-about .ab-invitation > div { flex: 1; width: auto; padding: 0; }
.hd-about .ab-invitation h2 { max-width: 540px; font-size: 48px; }
.hd-about .ab-invitation .ab-kicker { color: #462b27; }
.hd-about .ab-invitation figure { width: 43%; height: 350px; flex-shrink: 0; border: 8px solid #e8d5b4; transform: rotate(2deg); box-shadow: 12px 15px 0 #6b472b30; }
.hd-about .ab-invitation .ab-button { background: #491e2e; color: #fff5e3; }
.hd-about .ab-invitation .ab-social { color: #39212a; }
@media(max-width:1000px) {
 .hd-about { --ab-header-height: 100px; }
 .hd-about .ab-intro { gap: 20px 35px; }
 .hd-about .ab-intro .ab-flower { display: none; }
 .hd-about .ab-invitation { gap: 35px; }
 .hd-about .ab-invitation h2 { font-size: 42px; }
}
@media(max-width:700px) {
 .hd-about { --ab-header-height: 85px; }
 .hd-about .ab-arrival { padding-top: calc(var(--ab-header-height) + 35px); padding-bottom: 35px; }
 .hd-about .ab-doorway { height: 390px; }
 .hd-about .ab-intro { padding: 55px 22px; display: block; }
 .hd-about .ab-intro h2 { width: auto; margin: 18px 0 22px; }
 .hd-about .ab-intro p { font-size: 17px; }
 .hd-about .ab-history,.hd-about .ab-experience,.hd-about .ab-location { padding: 65px 22px; }
 .hd-about .ab-philosophy { min-height: 650px; padding: 65px 22px; }
 .hd-about .ab-invitation { padding: 55px 22px; gap: 35px; align-items: stretch; }
 .hd-about .ab-invitation > div { width: 100%; }
 .hd-about .ab-invitation h2 { font-size: 36px; }
 .hd-about .ab-invitation figure { width: 100%; height: 300px; transform: none; }
}

.ab-videos { max-width: none; background: #ede0ca; padding-left: max(40px,calc((100% - 1200px)/2)); padding-right: max(40px,calc((100% - 1200px)/2)); border-top: 1px solid #cfb48b; }
.ab-videos video { width: 100%; max-height: 650px; display: block; background: #241319; margin: 30px 0; }
.ab-reel-cards { display: flex; gap: 18px; padding: 15px 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ab-reel-card { position: relative; flex: 0 0 calc((100% - 54px)/4); height: 350px; overflow: hidden; border: 5px solid #fff6e7; scroll-snap-align: start; color: white; }
.ab-reel-card img { transition: transform .7s; }.ab-reel-card:hover img { transform: scale(1.05); }
.ab-reel-play { position: absolute; top: 43%; left: calc(50% - 25px); width: 50px; height: 50px; border: 1px solid #e9cda5; border-radius: 50%; background: #421c2bd9; display: flex; align-items: center; justify-content: center; }
.ab-reel-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 12px 15px; background: linear-gradient(transparent,#22111ae6); font-size: 15px; }
@media(max-width:700px){.ab-videos { padding: 60px 22px; }.ab-reel-card { flex-basis: 74%; height: 360px; }}

/* 5.4 — editorial introduction, framed reels, porcelain location and sage invitation. */
.hd-about .ab-intro { display: flex; max-width: none; align-items: center; gap: 85px; padding: 95px max(40px,calc((100% - 1200px)/2)); background: #f4ede2; border-top: 1px solid #d8c4a5; border-bottom: 1px solid #d8c4a5; }
.ab-intro-visual { width: 32%; height: 370px; flex-shrink: 0; position: relative; padding: 12px; border: 1px solid #b59a72; }
.ab-intro-visual img { object-position: center; }
.ab-intro-stamp { position: absolute; right: -26px; bottom: 28px; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; color: #f9f1e4; background: #4a1d2d; border: 5px solid #f4ede2; }
.ab-intro-editorial { flex: 1; min-width: 0; }
.hd-about .ab-intro h2 { width: auto; font-size: 48px; margin: 16px 0 22px; }
.hd-about .ab-intro .ab-kicker { color: #947044; }
.hd-about .ab-intro p { font-size: 18px; line-height: 1.9; color: #685952; margin: 24px 0 15px; }
.ab-intro-rule { width: 80px; height: 1px; background: #b68c53; }
.hd-about .ab-videos { background: #eee4d6; border-top: 1px solid #d5bf9c; padding-top: 85px; padding-bottom: 75px; }
.hd-about .ab-videos h2 { font-size: 48px; max-width: 680px; margin-bottom: 35px; }
.ab-reel-window { overflow: hidden; padding: 5px 0 15px; }
.hd-about .ab-reel-cards { overflow: visible; scroll-snap-type: none; gap: 24px; padding: 0; transition: transform .8s cubic-bezier(.22,.72,.18,1); will-change: transform; }
.hd-about .ab-reel-card { flex: 0 0 calc((100% - 48px)/3); height: 410px; border: 0; border-radius: 100px 100px 4px 4px; background: #4a1d2d; text-decoration: none; box-shadow: 0 8px 12px #402a2410; }
.hd-about .ab-reel-card img { transition: transform 1.2s; }
.hd-about .ab-reel-card:hover img { transform: scale(1.04); }
.hd-about .ab-reel-play { top: auto; left: auto; right: 20px; bottom: 28px; width: 48px; height: 48px; z-index: 2; background: #fff5e8ec; color: #4a1d2d; border: 0; }
.hd-about .ab-reel-label { padding: 100px 78px 35px 24px; line-height: 1.5; background: linear-gradient(transparent,#21151aeb); }
.ab-reel-controls { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.ab-reel-progress { flex: 1; height: 2px; background: #d4c1a7; margin-right: 20px; }
.ab-reel-progress span { display: block; height: 100%; width: 20%; background: #672b3c; transition: width .5s; }
.ab-reel-count { font-size: 15px; min-width: 70px; color: #6f554b; }
.ab-reel-controls button { width: 49px; height: 49px; border: 1px solid #a48a69; border-radius: 50%; background: transparent; color: #4a1d2d; font-size: 22px; cursor: pointer; transition: background .25s,color .25s; }
.ab-reel-controls button:hover { background: #4a1d2d; color: #fff6e8; }
.hd-about .ab-location { position: relative; background: #fcfaf5; border-top: 1px solid #e4d7c2; border-bottom: 1px solid #ddd7c5; padding-top: 100px; padding-bottom: 100px; gap: 100px; }
.hd-about .ab-location-photo { position: relative; width: 43%; height: 540px; border-radius: 180px 180px 8px 8px; overflow: visible; border: 0; padding: 12px; background: #f1e8da; box-shadow: 18px 18px 0 #dfe3d933; }
.hd-about .ab-location-photo img { border-radius: 170px 170px 4px 4px; position: relative; z-index: 1; animation: ab-location-breathe 9s ease-in-out infinite; }
.ab-location-orbit { position: absolute; width: 120px; height: 120px; left: -58px; bottom: 38px; border: 1px solid #ad8c60; border-radius: 50%; z-index: 3; animation: ab-location-orbit 22s linear infinite; }
.ab-location-orbit::before,.ab-location-orbit::after { content: ''; position: absolute; border-radius: 50%; background: #4b2632; width: 10px; height: 10px; top: -5px; left: 54px; box-shadow: 0 0 0 6px #fcfaf5; }
.ab-location-orbit::after { top: auto; bottom: -5px; background: #b39770; }
.hd-about .ab-distances { gap: 16px; border: 0; padding: 0; }
.ab-distances > div { padding: 20px; background: #f1eee5; border-bottom: 2px solid #bca27b; }
.hd-about .ab-note { color: #746a60; }
.hd-about .ab-invitation { background: #e3e7df; color: #34443b; border: 0; padding-top: 85px; padding-bottom: 85px; gap: 80px; }
.hd-about .ab-invitation h2 { color: #34443b; font-size: 46px; }
.hd-about .ab-invitation .ab-kicker { color: #6e7969; }
.hd-about .ab-invitation figure { border: 8px solid #faf9f3; box-shadow: 15px 15px 0 #b4c0b34d; transform: none; height: 350px; }
.hd-about .ab-invitation .ab-button { background: #4a1d2d; color: #fff7ea; }
.hd-about .ab-invitation .ab-social { color: #4e6053; text-decoration-color: #9ba38f; }
@keyframes ab-location-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ab-location-orbit { to { transform: rotate(360deg); } }
@media(max-width:1000px) {
 .hd-about .ab-intro { gap: 45px; }.ab-intro-visual { width: 35%; height: 350px; }
 .hd-about .ab-reel-card { flex-basis: calc((100% - 24px)/2); height: 390px; }
 .hd-about .ab-location { gap: 50px; }.hd-about .ab-invitation { gap: 40px; }
}
@media(max-width:700px) {
 .hd-about .ab-intro { flex-direction: column; padding: 65px 22px; gap: 35px; }.ab-intro-visual { width: 100%; max-width: 440px; height: 280px; }.ab-intro-stamp { right: 15px; bottom: -20px; }
 .hd-about .ab-intro h2,.hd-about .ab-videos h2,.hd-about .ab-invitation h2 { font-size: 36px; }.hd-about .ab-intro p { font-size: 17px; }
 .hd-about .ab-videos { padding: 60px 22px; }.hd-about .ab-reel-card { flex-basis: 100%; height: 440px; border-radius: 95px 95px 4px 4px; }
 .ab-reel-controls { gap: 10px; }.ab-reel-progress { margin-right: 0; }.ab-reel-count { min-width: 65px; }
 .hd-about .ab-location { padding: 65px 22px; gap: 45px; }.hd-about .ab-location-photo { width: calc(100% - 22px); height: 420px; margin-left: 22px; }.ab-location-orbit { width: 85px; height: 85px; left: -35px; }.ab-location-orbit::before,.ab-location-orbit::after { left: 37px; }
 .hd-about .ab-invitation { padding: 65px 22px; gap: 35px; }.hd-about .ab-invitation figure { height: 290px; }
}
@media(prefers-reduced-motion:reduce) { .hd-about .ab-location-photo img,.ab-location-orbit { animation: none; }.hd-about .ab-reel-cards { transition: none; } }