{"id":18,"date":"2025-07-07T19:36:25","date_gmt":"2025-07-07T19:36:25","guid":{"rendered":"https:\/\/signaturereflectionsbath.com\/?page_id=18"},"modified":"2026-03-12T19:20:48","modified_gmt":"2026-03-12T19:20:48","slug":"home","status":"publish","type":"page","link":"https:\/\/signaturereflectionsbath.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nSignature Reflections<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@300;400;500;600&family=Jost:wght@200;300;400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ROOT & RESET\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --ink: #0a0b0d;\r\n --ink2: #0f1114;\r\n --surface: #141618;\r\n --gold: #d4af37;\r\n --gold2: #e8c84a;\r\n --goldglow: rgba(212,175,55,0.15);\r\n --gold-border: rgba(212,175,55,0.28);\r\n --line: rgba(255,255,255,0.06);\r\n --white: #f0ede6;\r\n --muted: rgba(240,237,230,0.50);\r\n --sans: 'Jost', sans-serif;\r\n --serif: 'Playfair Display', serif;\r\n}\r\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\r\nhtml { scroll-behavior:smooth; }\r\nbody {\r\n background: var(--ink);\r\n color: var(--white);\r\n font-family: var(--sans);\r\n font-weight: 300;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n::-webkit-scrollbar { width: 2px; }\r\n::-webkit-scrollbar-thumb { background: var(--gold); }\r\nimg { display:block; width:100%; height:100%; object-fit:cover; }\r\na { text-decoration:none; color:inherit; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n GRAIN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nbody::after {\r\n content:'';\r\n position:fixed; inset:0; pointer-events:none; z-index:9000;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.035'\/%3E%3C\/svg%3E\");\r\n opacity:.5;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO GRID BACKGROUND EFFECT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero-grid-bg {\r\n position:absolute; inset:0; z-index:1; pointer-events:none;\r\n background-image:\r\n linear-gradient(rgba(212,175,55,0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(212,175,55,0.035) 1px, transparent 1px);\r\n background-size: 72px 72px;\r\n mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO GLOW PULSE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero-glow-pulse {\r\n position:absolute; z-index:1; pointer-events:none;\r\n top:50%; left:50%;\r\n transform:translate(-50%,-50%);\r\n width:800px; height:400px;\r\n background: radial-gradient(ellipse, rgba(212,175,55,0.07) 0%, transparent 70%);\r\n animation: glowPulse 6s ease-in-out infinite;\r\n}\r\n@keyframes glowPulse {\r\n 0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }\r\n 50% { opacity:1; transform:translate(-50%,-50%) scale(1.12); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CORNER BRACKET DECORATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.bracket-frame {\r\n position:relative;\r\n}\r\n.bracket-frame::before {\r\n content:'';\r\n position:absolute;\r\n top:10px; right:10px;\r\n width:22px; height:22px;\r\n border-top:1.5px solid var(--gold);\r\n border-right:1.5px solid var(--gold);\r\n z-index:3; pointer-events:none;\r\n}\r\n.bracket-frame::after {\r\n content:'';\r\n position:absolute;\r\n bottom:10px; left:10px;\r\n width:22px; height:22px;\r\n border-bottom:1.5px solid var(--gold);\r\n border-left:1.5px solid var(--gold);\r\n z-index:3; pointer-events:none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n GOLD SHIMMER LINE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.gold-shimmer-line {\r\n width:100%; height:1px;\r\n background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold2) 50%, var(--gold) 70%, transparent 100%);\r\n opacity:.4;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BUILD ITEMS \u2014 GLASS STYLE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.build-items-glass {\r\n background: rgba(20,22,24,0.7);\r\n border: 1px solid rgba(212,175,55,0.15);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n}\r\n.build-item-glass {\r\n border-bottom: 1px solid rgba(212,175,55,0.1) !important;\r\n}\r\n.build-item-glass:hover {\r\n background: rgba(212,175,55,0.06) !important;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TYPOGRAPHY HELPERS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.eyebrow {\r\n display:block;\r\n font-size:.6rem;\r\n letter-spacing:.28em;\r\n text-transform:uppercase;\r\n color:var(--gold);\r\n font-weight:500;\r\n margin-bottom:1.1rem;\r\n}\r\n.rule-gold {\r\n display:block;\r\n width:36px; height:1px;\r\n background:var(--gold);\r\n margin-bottom:1.4rem;\r\n}\r\n.body-copy {\r\n font-size:.9rem;\r\n line-height:1.9;\r\n color:var(--muted);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BUTTONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.btn-primary {\r\n display:inline-flex; align-items:center; gap:.55rem;\r\n padding:.75rem 2rem;\r\n background: var(--gold);\r\n color: var(--ink);\r\n font-family:var(--sans);\r\n font-size:.7rem;\r\n font-weight:500;\r\n letter-spacing:.18em;\r\n text-transform:uppercase;\r\n cursor:pointer;\r\n transition: all .3s ease;\r\n border:1px solid var(--gold);\r\n position:relative; overflow:hidden;\r\n}\r\n.btn-primary::after {\r\n content:'';\r\n position:absolute; inset:0;\r\n background:rgba(255,255,255,.12);\r\n transform:translateX(-100%);\r\n transition:transform .35s ease;\r\n}\r\n.btn-primary:hover::after { transform:translateX(0); }\r\n\r\n.btn-outline {\r\n display:inline-flex; align-items:center; gap:.55rem;\r\n padding:.72rem 1.8rem;\r\n background:transparent;\r\n color:var(--white);\r\n font-family:var(--sans);\r\n font-size:.7rem;\r\n font-weight:400;\r\n letter-spacing:.18em;\r\n text-transform:uppercase;\r\n cursor:pointer;\r\n border:1px solid rgba(255,255,255,.2);\r\n transition: all .35s ease;\r\n}\r\n.btn-outline:hover {\r\n border-color:var(--gold);\r\n color:var(--gold);\r\n}\r\n\r\n.btn-text {\r\n display:inline-flex; align-items:center; gap:.4rem;\r\n font-size:.7rem;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n color:var(--gold);\r\n font-weight:400;\r\n border-bottom:1px solid rgba(184,150,90,.35);\r\n padding-bottom:.25rem;\r\n transition:all .3s;\r\n}\r\n.btn-text:hover { border-bottom-color:var(--gold); gap:.65rem; }\r\n.btn-text .arr { transition:transform .3s; }\r\n.btn-text:hover .arr { transform:translateX(4px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PREMIUM ANIMATION SYSTEM\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* \u2500\u2500 Base reveal (keep for backwards compat) \u2500\u2500 *\/\r\n.sr {\r\n opacity: 0;\r\n transform: translateY(32px);\r\n transition: opacity 1s cubic-bezier(.16,1,.3,1),\r\n transform 1s cubic-bezier(.16,1,.3,1);\r\n}\r\n.sr.up { opacity: 1; transform: translateY(0); }\r\n.sr.d1 { transition-delay: .12s; }\r\n.sr.d2 { transition-delay: .26s; }\r\n.sr.d3 { transition-delay: .42s; }\r\n.sr.d4 { transition-delay: .58s; }\r\n\r\n\/* \u2500\u2500 Eyebrow char reveal \u2500\u2500 *\/\r\n.anim-eyebrow {\r\n display: block;\r\n overflow: hidden;\r\n}\r\n.anim-eyebrow .char {\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translateY(110%) rotate(4deg);\r\n transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-eyebrow.revealed .char { opacity: 1; transform: translateY(0) rotate(0deg); }\r\n\r\n\/* \u2500\u2500 Heading line clip reveal \u2500\u2500 *\/\r\n.anim-heading {\r\n overflow: visible;\r\n}\r\n.anim-heading .line-wrap {\r\n display: block;\r\n overflow: hidden;\r\n line-height: 1.15;\r\n}\r\n.anim-heading .line-inner {\r\n display: block;\r\n opacity: 0;\r\n transform: translateY(105%);\r\n transition: opacity 0.75s cubic-bezier(.16,1,.3,1),\r\n transform 0.75s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-heading.revealed .line-inner { opacity: 1; transform: translateY(0); }\r\n.anim-heading.revealed .line-wrap:nth-child(1) .line-inner { transition-delay: 0s; }\r\n.anim-heading.revealed .line-wrap:nth-child(2) .line-inner { transition-delay: 0.12s; }\r\n.anim-heading.revealed .line-wrap:nth-child(3) .line-inner { transition-delay: 0.24s; }\r\n.anim-heading.revealed .line-wrap:nth-child(4) .line-inner { transition-delay: 0.36s; }\r\n\r\n\/* \u2500\u2500 Body copy sentence stagger \u2500\u2500 *\/\r\n.anim-body {\r\n overflow: hidden;\r\n}\r\n.anim-body .body-line {\r\n display: block;\r\n opacity: 0;\r\n transform: translateY(18px);\r\n transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-body.revealed .body-line { opacity: 1; transform: translateY(0); }\r\n.anim-body.revealed .body-line:nth-child(1) { transition-delay: 0s; }\r\n.anim-body.revealed .body-line:nth-child(2) { transition-delay: 0.14s; }\r\n.anim-body.revealed .body-line:nth-child(3) { transition-delay: 0.28s; }\r\n\r\n\/* \u2500\u2500 Gold rule draw-in \u2500\u2500 *\/\r\n.anim-rule {\r\n display: block;\r\n width: 36px; height: 1px;\r\n background: var(--gold);\r\n margin-bottom: 1.4rem;\r\n transform: scaleX(0);\r\n transform-origin: left center;\r\n transition: transform 0.8s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-rule.revealed { transform: scaleX(1); }\r\n\r\n\/* \u2500\u2500 Fade-slide from left \u2500\u2500 *\/\r\n.anim-left {\r\n opacity: 0;\r\n transform: translateX(-28px);\r\n transition: opacity 0.85s cubic-bezier(.16,1,.3,1),\r\n transform 0.85s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-left.revealed { opacity: 1; transform: translateX(0); }\r\n\r\n\/* \u2500\u2500 Fade-slide from right \u2500\u2500 *\/\r\n.anim-right {\r\n opacity: 0;\r\n transform: translateX(28px);\r\n transition: opacity 0.85s cubic-bezier(.16,1,.3,1),\r\n transform 0.85s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-right.revealed { opacity: 1; transform: translateX(0); }\r\n\r\n\/* \u2500\u2500 Stagger delay helpers \u2500\u2500 *\/\r\n.ad1 { transition-delay: 0.08s !important; }\r\n.ad2 { transition-delay: 0.18s !important; }\r\n.ad3 { transition-delay: 0.30s !important; }\r\n.ad4 { transition-delay: 0.44s !important; }\r\n.ad5 { transition-delay: 0.58s !important; }\r\n.ad6 { transition-delay: 0.72s !important; }\r\n\r\n\/* \u2500\u2500 Image parallax wrappers \u2500\u2500 *\/\r\n.anim-img-reveal {\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.anim-img-reveal::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: var(--ink2);\r\n z-index: 2;\r\n transform: scaleY(1);\r\n transform-origin: top center;\r\n transition: transform 0.9s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-img-reveal.revealed::before { transform: scaleY(0); transform-origin: bottom center; }\r\n.anim-img-reveal img {\r\n transform: scale(1.08);\r\n transition: transform 1.4s cubic-bezier(.16,1,.3,1);\r\n}\r\n.anim-img-reveal.revealed img { transform: scale(1); }\r\n\r\n\/* \u2500\u2500 Gold number counter \u2500\u2500 *\/\r\n.anim-counter {\r\n font-family: var(--serif);\r\n color: var(--gold);\r\n font-weight: 300;\r\n}\r\n\r\n\/* \u2500\u2500 Shimmer text effect on gold text \u2500\u2500 *\/\r\n@keyframes goldShimmer {\r\n 0% { background-position: -200% center; }\r\n 100% { background-position: 200% center; }\r\n}\r\n.shimmer-text {\r\n background: linear-gradient(\r\n 90deg,\r\n var(--gold) 0%,\r\n #fff8e0 40%,\r\n var(--gold) 60%,\r\n var(--gold2) 100%\r\n );\r\n background-size: 200% auto;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: goldShimmer 4s linear infinite;\r\n}\r\n\r\n\/* \u2500\u2500 Scroll progress indicator \u2500\u2500 *\/\r\n#scroll-progress {\r\n position: fixed;\r\n top: 0; left: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, var(--gold), var(--gold2));\r\n z-index: 99997;\r\n width: 0%;\r\n transition: width 0.1s linear;\r\n}\r\n\r\n\/* \u2500\u2500 Section in-view triggers for new animation classes \u2500\u2500 *\/\r\n#journey .anim-eyebrow,\r\n#journey .anim-heading,\r\n#journey .anim-rule,\r\n#journey .anim-left,\r\n#wall .anim-eyebrow,\r\n#wall .anim-heading,\r\n#wall .anim-rule,\r\n#wall .anim-left,\r\n#build .anim-eyebrow,\r\n#build .anim-heading,\r\n#build .anim-rule,\r\n#build .anim-left {\r\n \/* Base states already set by .anim-* classes *\/\r\n}\r\n\/* These get triggered by the universal intersection observer\r\n which directly calls .revealed on each element *\/\r\n position: absolute;\r\n top: 2.5rem; right: 2.5rem;\r\n font-family: var(--serif);\r\n font-size: 5rem;\r\n font-weight: 300;\r\n color: rgba(212,175,55,0.04);\r\n line-height: 1;\r\n pointer-events: none;\r\n user-select: none;\r\n letter-spacing: -0.03em;\r\n}\r\n\r\n\/* \u2500\u2500 Collab card text animations \u2500\u2500 *\/\r\n.collab-info h3, .collab-info p {\r\n opacity: 0;\r\n transform: translateY(14px);\r\n transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.16,1,.3,1);\r\n}\r\n.collab-card.up .collab-info h3 { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }\r\n.collab-card.up .collab-info p { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }\r\n.collab-card.up .collab-info a { opacity: 1; }\r\n\r\n\/* \u2500\u2500 Build item stagger \u2500\u2500 *\/\r\n.build-item-glass {\r\n opacity: 0;\r\n transform: translateX(-16px);\r\n transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1),\r\n background 0.3s;\r\n}\r\n.build-item-glass.item-visible { opacity: 1; transform: translateX(0); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION WRAPPER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.wrap { max-width:1160px; margin:0 auto; padding:0 2.5rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 1 \u2014 HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hero {\r\n position:relative;\r\n min-height:100vh;\r\n display:grid; place-items:center;\r\n overflow:hidden;\r\n}\r\n.hero-bg {\r\n position:absolute; inset:0; z-index:0;\r\n}\r\n.hero-bg img {\r\n width:100%; height:100%;\r\n object-fit:cover;\r\n object-position: center 30%;\r\n}\r\n.hero-bg::after {\r\n content:'';\r\n position:absolute; inset:0;\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(7,8,10,.52) 0%,\r\n rgba(7,8,10,.35) 40%,\r\n rgba(7,8,10,.75) 80%,\r\n rgba(7,8,10,1) 100%\r\n );\r\n}\r\n\/* video hero overlay *\/\r\n.hero-bg video {\r\n position:absolute; inset:0;\r\n width:100%; height:100%;\r\n object-fit:cover;\r\n}\r\n.hero-content {\r\n position:relative; z-index:3;\r\n text-align:center;\r\n padding:8rem 1.5rem 5rem;\r\n max-width:820px;\r\n}\r\n.hero-brand {\r\n font-family:var(--serif);\r\n font-size:clamp(.9rem,1.5vw,1.1rem);\r\n letter-spacing:.35em;\r\n text-transform:uppercase;\r\n color:var(--gold);\r\n margin-bottom:2.5rem;\r\n font-weight:300;\r\n}\r\n.hero-h1 {\r\n font-family:var(--serif);\r\n font-size:clamp(2.6rem,6vw,5.8rem);\r\n font-weight:300;\r\n line-height:1.06;\r\n letter-spacing:-.015em;\r\n margin-bottom:1.6rem;\r\n}\r\n.hero-h1 em { color:var(--gold); font-style:normal; }\r\n.hero-sub {\r\n font-size:clamp(.85rem,1.5vw,1rem);\r\n color:var(--muted);\r\n line-height:1.85;\r\n max-width:520px;\r\n margin:0 auto 2.6rem;\r\n}\r\n.hero-tagline {\r\n font-size:.72rem;\r\n letter-spacing:.22em;\r\n text-transform:uppercase;\r\n color:rgba(240,236,228,.4);\r\n margin-bottom:2.8rem;\r\n}\r\n.hero-btns {\r\n display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 2 \u2014 PRODUCT CARDS (4 categories)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#categories {\r\n padding:0;\r\n background:var(--ink);\r\n}\r\n.cat-grid {\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:1px;\r\n background:var(--line);\r\n border-top:1px solid var(--line);\r\n}\r\n.cat-card {\r\n background:var(--ink2);\r\n position:relative; overflow:hidden;\r\n cursor:pointer;\r\n transition:background .35s;\r\n}\r\n.cat-card:hover { background:rgba(184,150,90,.05); }\r\n.cat-img {\r\n width:100%;\r\n aspect-ratio:3\/4;\r\n overflow:hidden;\r\n position:relative;\r\n}\r\n.cat-img img {\r\n transition:transform .7s cubic-bezier(.16,1,.3,1);\r\n}\r\n.cat-card:hover .cat-img img { transform:scale(1.06); }\r\n.cat-img::after {\r\n content:'';\r\n position:absolute; inset:0;\r\n background:linear-gradient(to top, rgba(7,8,10,.9) 0%, transparent 55%);\r\n}\r\n.cat-info {\r\n position:absolute; bottom:0; left:0; right:0;\r\n padding:1.5rem 1.25rem;\r\n}\r\n.cat-info .tag {\r\n font-size:.58rem;\r\n letter-spacing:.2em;\r\n text-transform:uppercase;\r\n color:var(--gold);\r\n font-weight:500;\r\n display:block;\r\n margin-bottom:.4rem;\r\n}\r\n.cat-info h3 {\r\n font-family:var(--serif);\r\n font-size:1.25rem;\r\n font-weight:400;\r\n line-height:1.2;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 3 \u2014 BUILT TO IMPRESS (REBUILT)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#impress {\r\n padding: 0;\r\n background: var(--ink);\r\n border-top: 1px solid var(--line);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n\/* Full bleed image side *\/\r\n.impress-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n min-height: 680px;\r\n align-items: stretch;\r\n}\r\n\r\n\/* Left \u2014 image panel *\/\r\n.impress-img-wrap {\r\n position: relative;\r\n overflow: hidden;\r\n min-height: 540px;\r\n}\r\n.impress-img-wrap::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: linear-gradient(\r\n 90deg,\r\n rgba(10,11,13,0) 50%,\r\n rgba(10,11,13,0.6) 100%\r\n ), linear-gradient(\r\n 180deg,\r\n rgba(10,11,13,0.2) 0%,\r\n rgba(10,11,13,0) 30%,\r\n rgba(10,11,13,0.4) 100%\r\n );\r\n z-index: 1;\r\n}\r\n.impress-img-wrap img {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n object-position: center 20%;\r\n transition: transform 1.4s cubic-bezier(.16,1,.3,1);\r\n transform: scale(1.04);\r\n}\r\n#impress.in-view .impress-img-wrap img {\r\n transform: scale(1);\r\n}\r\n\r\n\/* Floating stat badge *\/\r\n.impress-stat {\r\n position: absolute;\r\n bottom: 2.5rem; left: 2.5rem;\r\n z-index: 3;\r\n display: flex; align-items: flex-end; gap: 0.5rem;\r\n}\r\n.impress-stat-num {\r\n font-family: var(--serif);\r\n font-size: clamp(2.8rem, 5vw, 4.2rem);\r\n font-weight: 300;\r\n color: var(--gold);\r\n line-height: 1;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.9s 0.5s ease, transform 0.9s 0.5s cubic-bezier(.16,1,.3,1);\r\n}\r\n.impress-stat-label {\r\n font-size: 0.65rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n padding-bottom: 0.4rem;\r\n opacity: 0;\r\n transform: translateY(16px);\r\n transition: opacity 0.9s 0.7s ease, transform 0.9s 0.7s cubic-bezier(.16,1,.3,1);\r\n}\r\n#impress.in-view .impress-stat-num,\r\n#impress.in-view .impress-stat-label {\r\n opacity: 1; transform: translateY(0);\r\n}\r\n\r\n\/* Corner pin decorations on image *\/\r\n.impress-pin {\r\n position: absolute;\r\n z-index: 4;\r\n width: 28px; height: 28px;\r\n pointer-events: none;\r\n}\r\n.impress-pin.tl { top: 1.5rem; left: 1.5rem; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }\r\n.impress-pin.br { bottom: 1.5rem; right: 1.5rem; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }\r\n\r\n\/* Right \u2014 text panel *\/\r\n.impress-panel {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding: 5rem 5rem 5rem 5.5rem;\r\n background: var(--ink2);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n\/* Ambient grid behind text *\/\r\n.impress-panel::before {\r\n content: '';\r\n position: absolute; inset: 0; pointer-events: none;\r\n background-image:\r\n linear-gradient(rgba(212,175,55,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(212,175,55,0.03) 1px, transparent 1px);\r\n background-size: 56px 56px;\r\n mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, black 0%, transparent 75%);\r\n -webkit-mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, black 0%, transparent 75%);\r\n}\r\n\r\n\/* Animated line that draws in *\/\r\n.impress-line-draw {\r\n width: 0; height: 1px;\r\n background: linear-gradient(90deg, var(--gold), transparent);\r\n margin-bottom: 2rem;\r\n transition: width 1s 0.3s cubic-bezier(.16,1,.3,1);\r\n}\r\n#impress.in-view .impress-line-draw { width: 80px; }\r\n\r\n\/* Eyebrow *\/\r\n.impress-eyebrow {\r\n display: flex; align-items: center; gap: 1rem;\r\n margin-bottom: 1.8rem;\r\n opacity: 0; transform: translateX(-18px);\r\n transition: opacity 0.7s 0.15s ease, transform 0.7s 0.15s cubic-bezier(.16,1,.3,1);\r\n}\r\n#impress.in-view .impress-eyebrow { opacity: 1; transform: translateX(0); }\r\n.impress-eyebrow-text {\r\n font-size: 0.62rem;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n font-weight: 500;\r\n font-family: var(--sans);\r\n}\r\n.impress-eyebrow-dot {\r\n width: 5px; height: 5px; border-radius: 50%;\r\n background: var(--gold);\r\n animation: impressPulse 2.2s ease-in-out infinite;\r\n}\r\n@keyframes impressPulse {\r\n 0%,100% { opacity: 0.3; transform: scale(1); }\r\n 50% { opacity: 1; transform: scale(1.7); }\r\n}\r\n\r\n\/* Main headline \u2014 word-by-word reveal *\/\r\n.impress-headline {\r\n font-family: var(--serif);\r\n font-size: clamp(2.4rem, 4vw, 4rem);\r\n font-weight: 300;\r\n line-height: 1.1;\r\n margin-bottom: 1.8rem;\r\n overflow: hidden;\r\n}\r\n.impress-headline .word {\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translateY(100%);\r\n transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.16,1,.3,1);\r\n margin-right: 0.25em;\r\n}\r\n.impress-headline .word.gold { color: var(--gold); font-style: italic; }\r\n#impress.in-view .impress-headline .word { opacity: 1; transform: translateY(0); }\r\n#impress.in-view .impress-headline .word:nth-child(1) { transition-delay: 0.2s; }\r\n#impress.in-view .impress-headline .word:nth-child(2) { transition-delay: 0.32s; }\r\n#impress.in-view .impress-headline .word:nth-child(3) { transition-delay: 0.44s; }\r\n#impress.in-view .impress-headline .word:nth-child(4) { transition-delay: 0.56s; }\r\n#impress.in-view .impress-headline .word:nth-child(5) { transition-delay: 0.68s; }\r\n#impress.in-view .impress-headline .word:nth-child(6) { transition-delay: 0.80s; }\r\n\r\n\/* Body copy reveal *\/\r\n.impress-body {\r\n font-size: 0.92rem;\r\n line-height: 1.9;\r\n color: var(--muted);\r\n margin-bottom: 2.8rem;\r\n max-width: 420px;\r\n opacity: 0; transform: translateY(16px);\r\n transition: opacity 0.8s 0.75s ease, transform 0.8s 0.75s cubic-bezier(.16,1,.3,1);\r\n}\r\n#impress.in-view .impress-body { opacity: 1; transform: translateY(0); }\r\n\r\n\/* Feature pills *\/\r\n.impress-pills {\r\n display: flex; flex-wrap: wrap; gap: 0.6rem;\r\n margin-bottom: 2.8rem;\r\n opacity: 0; transform: translateY(12px);\r\n transition: opacity 0.7s 0.9s ease, transform 0.7s 0.9s cubic-bezier(.16,1,.3,1);\r\n}\r\n#impress.in-view .impress-pills { opacity: 1; transform: translateY(0); }\r\n.impress-pill {\r\n display: inline-flex; align-items: center; gap: 0.45rem;\r\n padding: 0.38rem 0.9rem;\r\n border: 1px solid rgba(212,175,55,0.22);\r\n font-size: 0.62rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: rgba(240,237,230,0.65);\r\n font-family: var(--sans);\r\n transition: border-color 0.3s, color 0.3s;\r\n}\r\n.impress-pill:hover { border-color: var(--gold); color: var(--gold); }\r\n.impress-pill-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }\r\n\r\n\/* CTA button reveal *\/\r\n.impress-cta {\r\n display: inline-flex; align-items: center; gap: 0.7rem;\r\n padding: 0.85rem 2.2rem;\r\n background: transparent;\r\n border: 1px solid var(--gold);\r\n color: var(--gold);\r\n font-family: var(--sans);\r\n font-size: 0.68rem;\r\n font-weight: 500;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n position: relative; overflow: hidden;\r\n opacity: 0; transform: translateY(12px);\r\n transition: opacity 0.7s 1.1s ease, transform 0.7s 1.1s cubic-bezier(.16,1,.3,1),\r\n background 0.35s, color 0.35s;\r\n}\r\n#impress.in-view .impress-cta { opacity: 1; transform: translateY(0); }\r\n.impress-cta::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: var(--gold);\r\n transform: translateX(-101%);\r\n transition: transform 0.38s cubic-bezier(.16,1,.3,1);\r\n z-index: 0;\r\n}\r\n.impress-cta:hover::before { transform: translateX(0); }\r\n.impress-cta:hover { color: var(--ink); }\r\n.impress-cta span { position: relative; z-index: 1; }\r\n.impress-cta-arrow {\r\n position: relative; z-index: 1;\r\n transition: transform 0.3s ease;\r\n}\r\n.impress-cta:hover .impress-cta-arrow { transform: translateX(5px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 4 \u2014 BUILD THE EXPERIENCE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#build {\r\n padding:7rem 0;\r\n background:var(--ink);\r\n border-top:1px solid var(--line);\r\n}\r\n.build-layout {\r\n display:grid;\r\n grid-template-columns:1.1fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n border:1px solid var(--line);\r\n}\r\n.build-visual {\r\n position:relative; overflow:hidden;\r\n min-height:520px;\r\n}\r\n.build-visual video,\r\n.build-visual img {\r\n position:absolute; inset:0;\r\n width:100%; height:100%;\r\n object-fit:cover;\r\n}\r\n.build-visual::after {\r\n content:'';\r\n position:absolute; inset:0;\r\n background:linear-gradient(90deg, transparent 60%, rgba(7,8,10,.85) 100%);\r\n}\r\n.build-panel {\r\n background:var(--surface);\r\n padding:3.5rem;\r\n display:flex; flex-direction:column; justify-content:center;\r\n}\r\n.build-panel h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(1.8rem,2.5vw,2.8rem);\r\n font-weight:300;\r\n line-height:1.15;\r\n margin-bottom:1.4rem;\r\n}\r\n.build-panel h2 em { color:var(--gold); font-style:normal; }\r\n\r\n\/* Product list in build section *\/\r\n.build-items {\r\n margin:2rem 0;\r\n display:flex; flex-direction:column; gap:0;\r\n border:1px solid var(--line);\r\n}\r\n.build-item {\r\n display:flex; align-items:center; gap:1.25rem;\r\n padding:1rem 1.25rem;\r\n border-bottom:1px solid var(--line);\r\n transition:background .3s;\r\n cursor:pointer;\r\n}\r\n.build-item:last-child { border-bottom:none; }\r\n.build-item:hover { background:var(--goldglow); }\r\n.build-item-img {\r\n width:52px; height:52px; flex-shrink:0;\r\n overflow:hidden; border:1px solid var(--line);\r\n background:rgba(255,255,255,.03);\r\n}\r\n.build-item-img img { object-fit:contain; }\r\n.build-item-text h4 {\r\n font-size:.82rem; font-weight:400; margin-bottom:.2rem;\r\n}\r\n.build-item-text span {\r\n font-size:.72rem; color:var(--gold);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 5 \u2014 MARQUEE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.marquee-row {\r\n overflow:hidden;\r\n border-top:1px solid var(--line);\r\n border-bottom:1px solid var(--line);\r\n padding:.9rem 0;\r\n background:var(--ink2);\r\n}\r\n.marquee-track {\r\n display:flex; gap:0; white-space:nowrap;\r\n animation:scrollLeft 22s linear infinite;\r\n}\r\n.marquee-track:hover { animation-play-state:paused; }\r\n.m-item {\r\n flex-shrink:0;\r\n padding:0 2rem;\r\n font-size:.65rem;\r\n letter-spacing:.22em;\r\n text-transform:uppercase;\r\n color:rgba(184,150,90,.45);\r\n}\r\n.m-dot { color:var(--gold); margin:0 .25rem; font-size:.5rem; vertical-align:middle; }\r\n@keyframes scrollLeft {\r\n from { transform:translateX(0); }\r\n to { transform:translateX(-50%); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 6 \u2014 THREE PANEL \/ WALL SYSTEM\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#wall {\r\n padding:7rem 0;\r\n background:var(--ink2);\r\n border-top:1px solid var(--line);\r\n position:relative; overflow:hidden;\r\n}\r\n#wall::before {\r\n content:'';\r\n position:absolute; inset:0; pointer-events:none;\r\n background-image:\r\n linear-gradient(rgba(212,175,55,0.022) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(212,175,55,0.022) 1px, transparent 1px);\r\n background-size: 64px 64px;\r\n mask-image: radial-gradient(ellipse 60% 80% at 15% 50%, black 0%, transparent 70%);\r\n -webkit-mask-image: radial-gradient(ellipse 60% 80% at 15% 50%, black 0%, transparent 70%);\r\n}\r\n.wall-layout {\r\n display:grid;\r\n grid-template-columns:1fr 1.6fr;\r\n gap:5rem;\r\n align-items:center;\r\n}\r\n.wall-text h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(1.8rem,3vw,3rem);\r\n font-weight:300;\r\n line-height:1.12;\r\n margin-bottom:1.4rem;\r\n}\r\n.wall-text h2 em { color:var(--gold); font-style:normal; }\r\n.wall-text p { margin-bottom:2rem; }\r\n.wall-imgs {\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n}\r\n.wall-img {\r\n overflow:hidden;\r\n aspect-ratio:2\/3;\r\n}\r\n.wall-img img { transition:transform .8s cubic-bezier(.16,1,.3,1); }\r\n.wall-img:hover img { transform:scale(1.05); }\r\n.wall-img-tall {\r\n grid-row:span 2;\r\n aspect-ratio:unset;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 7 \u2014 START YOUR JOURNEY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#journey {\r\n padding:0;\r\n background:var(--ink);\r\n border-top:1px solid var(--line);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n.journey-bg {\r\n position:absolute; inset:0;\r\n}\r\n.journey-bg img {\r\n width:100%; height:100%; object-fit:cover; object-position:center;\r\n}\r\n.journey-bg::after {\r\n content:'';\r\n position:absolute; inset:0;\r\n background:linear-gradient(90deg, rgba(7,8,10,.88) 0%, rgba(7,8,10,.6) 55%, rgba(7,8,10,.3) 100%);\r\n}\r\n.journey-content {\r\n position:relative; z-index:2;\r\n max-width:560px;\r\n padding:7rem 2.5rem;\r\n}\r\n.journey-content h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(2rem,4vw,3.6rem);\r\n font-weight:300;\r\n line-height:1.1;\r\n margin-bottom:1.5rem;\r\n}\r\n.journey-content h2 em { color:var(--gold); font-style:normal; }\r\n.journey-content p { margin-bottom:2.5rem; }\r\n.journey-btns { display:flex; gap:.85rem; flex-wrap:wrap; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 8 \u2014 ENDLESS DESIGNS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#endless {\r\n padding:7rem 0;\r\n background:var(--ink);\r\n border-top:1px solid var(--line);\r\n}\r\n.endless-header {\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:4rem;\r\n align-items:end;\r\n margin-bottom:4rem;\r\n padding-bottom:2.5rem;\r\n border-bottom:1px solid var(--line);\r\n}\r\n.endless-header h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(2.5rem,5vw,5rem);\r\n font-weight:300;\r\n line-height:1.05;\r\n}\r\n.endless-header h2 em { color:var(--gold); font-style:normal; }\r\n.endless-right { text-align:right; }\r\n.endless-right p { margin-bottom:1.5rem; }\r\n.endless-imgs {\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:1px;\r\n background:var(--line);\r\n}\r\n.endless-img {\r\n overflow:hidden; aspect-ratio:4\/3;\r\n position:relative; cursor:pointer;\r\n}\r\n.endless-img img { transition:transform .8s cubic-bezier(.16,1,.3,1); }\r\n.endless-img:hover img { transform:scale(1.07); }\r\n.endless-img::after {\r\n content:'';\r\n position:absolute; inset:0;\r\n background:rgba(7,8,10,0);\r\n transition:background .4s;\r\n}\r\n.endless-img:hover::after { background:rgba(7,8,10,.2); }\r\n\/* Featured wide image *\/\r\n.endless-img.wide {\r\n grid-column:span 2;\r\n aspect-ratio:8\/3;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 9 \u2014 COLLABORATIONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#collabs {\r\n padding:0 0 7rem;\r\n background:var(--ink);\r\n}\r\n.collabs-label {\r\n padding:0 2.5rem 2.5rem;\r\n max-width:1160px; margin:0 auto;\r\n}\r\n.collabs-grid {\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n border-top:1px solid var(--line);\r\n border-bottom:1px solid var(--line);\r\n max-width:1160px; margin:0 auto;\r\n}\r\n.collab-card {\r\n background:var(--ink2);\r\n overflow:hidden; position:relative;\r\n cursor:pointer;\r\n}\r\n.collab-card-img {\r\n aspect-ratio:16\/9;\r\n overflow:hidden;\r\n}\r\n.collab-card-img img { transition:transform .8s cubic-bezier(.16,1,.3,1); }\r\n.collab-card:hover .collab-card-img img { transform:scale(1.05); }\r\n.collab-info {\r\n padding:2rem;\r\n border-top:1px solid var(--line);\r\n}\r\n.collab-info h3 {\r\n font-family:var(--serif);\r\n font-size:1.35rem; font-weight:400;\r\n margin-bottom:.6rem;\r\n}\r\n.collab-info p { font-size:.82rem; color:var(--muted); margin-bottom:1.25rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 10 \u2014 PROJECT REFLECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#project {\r\n padding:7rem 0;\r\n background:var(--ink2);\r\n border-top:1px solid var(--line);\r\n}\r\n.project-layout {\r\n display:grid;\r\n grid-template-columns:1.2fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n border:1px solid var(--line);\r\n}\r\n.project-img {\r\n position:relative; overflow:hidden;\r\n min-height:480px;\r\n}\r\n.project-img img {\r\n position:absolute; inset:0;\r\n width:100%; height:100%; object-fit:cover;\r\n transition:transform .9s cubic-bezier(.16,1,.3,1);\r\n}\r\n.project-img:hover img { transform:scale(1.04); }\r\n.project-panel {\r\n background:var(--surface);\r\n padding:3.5rem;\r\n display:flex; flex-direction:column; justify-content:center;\r\n}\r\n.project-panel h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(1.5rem,2.5vw,2.8rem);\r\n font-weight:300;\r\n line-height:1.1;\r\n margin-bottom:1rem;\r\n}\r\n.project-panel h3 {\r\n font-family:var(--serif);\r\n font-size:1.1rem; font-weight:300;\r\n color:var(--gold);\r\n margin-bottom:1.5rem;\r\n padding-bottom:1.5rem;\r\n border-bottom:1px solid var(--line);\r\n}\r\n.project-panel p { margin-bottom:2.5rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 11 \u2014 SIGNATURE REFLECTIONS \/ BATHROOM DESIGN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#bathroom {\r\n padding:7rem 0;\r\n background:var(--ink);\r\n border-top:1px solid var(--line);\r\n}\r\n.bathroom-layout {\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n border:1px solid var(--line);\r\n}\r\n.bathroom-panel {\r\n background:var(--ink2);\r\n padding:3.5rem;\r\n}\r\n.bathroom-panel h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(1.5rem,2.5vw,2.4rem);\r\n font-weight:300;\r\n line-height:1.15;\r\n margin-bottom:1rem;\r\n}\r\n.bathroom-panel p { margin-bottom:2rem; }\r\n.bathroom-img {\r\n overflow:hidden; aspect-ratio:4\/3;\r\n margin-bottom:1px;\r\n}\r\n.bathroom-img img { transition:transform .8s cubic-bezier(.16,1,.3,1); }\r\n.bathroom-img:hover img { transform:scale(1.04); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 12 \u2014 BRING DESIGN TO LIFE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#bring {\r\n padding:7rem 0;\r\n background:var(--ink2);\r\n border-top:1px solid var(--line);\r\n}\r\n.bring-layout {\r\n display:grid;\r\n grid-template-columns:1fr 1.4fr;\r\n gap:5rem;\r\n align-items:center;\r\n}\r\n.bring-text h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(2rem,3.5vw,3.4rem);\r\n font-weight:300;\r\n line-height:1.1;\r\n margin-bottom:1.4rem;\r\n}\r\n.bring-text h2 em { color:var(--gold); font-style:normal; }\r\n.bring-text p { margin-bottom:2rem; }\r\n.bring-img-grid {\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n}\r\n.bring-img {\r\n overflow:hidden;\r\n aspect-ratio:1;\r\n}\r\n.bring-img img { transition:transform .8s cubic-bezier(.16,1,.3,1); }\r\n.bring-img:hover img { transform:scale(1.07); }\r\n.bring-img.tall { aspect-ratio:unset; grid-row:span 2; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 13 \u2014 EARTH TONES COLLECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#earth {\r\n padding:7rem 0;\r\n background:var(--ink);\r\n border-top:1px solid var(--line);\r\n}\r\n.earth-layout {\r\n display:grid;\r\n grid-template-columns:1.4fr 1fr;\r\n gap:1px;\r\n background:var(--line);\r\n border:1px solid var(--line);\r\n margin-bottom:0;\r\n}\r\n.earth-img-panel {\r\n overflow:hidden;\r\n position:relative;\r\n min-height:500px;\r\n}\r\n.earth-img-panel img {\r\n position:absolute; inset:0;\r\n width:100%; height:100%; object-fit:cover;\r\n transition:transform .9s cubic-bezier(.16,1,.3,1);\r\n}\r\n.earth-img-panel:hover img { transform:scale(1.04); }\r\n.earth-content {\r\n background:var(--surface);\r\n padding:4rem 3.5rem;\r\n display:flex; flex-direction:column; justify-content:center;\r\n}\r\n.earth-content h2 {\r\n font-family:var(--serif);\r\n font-size:clamp(1.5rem,2.2vw,2.4rem);\r\n font-weight:300;\r\n line-height:1.15;\r\n margin-bottom:.75rem;\r\n}\r\n.earth-content h3 {\r\n font-family:var(--serif);\r\n font-size:1rem; font-weight:300;\r\n color:var(--gold);\r\n margin-bottom:1.5rem;\r\n}\r\n.earth-content p { margin-bottom:2.2rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FLOATING AMBIENT ORBS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.orb {\r\n position:fixed; border-radius:50%;\r\n pointer-events:none; z-index:0;\r\n filter:blur(130px); opacity:.06;\r\n}\r\n.orb-a {\r\n width:650px; height:650px;\r\n background: radial-gradient(circle, #d4af37 0%, #b8960a 60%, transparent 100%);\r\n top:-200px; right:-200px;\r\n animation:driftA 20s ease-in-out infinite;\r\n}\r\n.orb-b {\r\n width:500px; height:500px;\r\n background: radial-gradient(circle, #d4af37 0%, #b8960a 60%, transparent 100%);\r\n bottom:10%; left:-150px;\r\n animation:driftB 26s ease-in-out infinite;\r\n}\r\n@keyframes driftA { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-40px,50px);} }\r\n@keyframes driftB { 0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,-30px);} }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CUSTOM CURSOR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nbody { cursor: none; }\r\na, button, [onclick], .cat-card, .build-item, .collab-card, .endless-img,\r\n.wall-img, .bring-img, .impress-img { cursor: none; }\r\n\r\n#cursor-dot {\r\n position: fixed;\r\n width: 8px; height: 8px;\r\n background: var(--gold);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 99999;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.08s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;\r\n mix-blend-mode: difference;\r\n}\r\n#cursor-ring {\r\n position: fixed;\r\n width: 36px; height: 36px;\r\n border: 1.5px solid rgba(212,175,55,0.6);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 99998;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.18s cubic-bezier(.16,1,.3,1),\r\n width 0.25s ease, height 0.25s ease,\r\n border-color 0.2s ease, background 0.25s ease;\r\n}\r\nbody.cursor-hover #cursor-dot {\r\n width: 12px; height: 12px;\r\n background: var(--gold2);\r\n}\r\nbody.cursor-hover #cursor-ring {\r\n width: 52px; height: 52px;\r\n border-color: rgba(212,175,55,0.9);\r\n background: rgba(212,175,55,0.06);\r\n}\r\nbody.cursor-click #cursor-dot {\r\n width: 6px; height: 6px;\r\n}\r\nbody.cursor-click #cursor-ring {\r\n width: 28px; height: 28px;\r\n border-color: var(--gold);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* \u2500\u2500 TABLET 960px \u2500\u2500 *\/\r\n@media(max-width:960px){\r\n \/* Cursor off on touch *\/\r\n #cursor-dot, #cursor-ring { display: none; }\r\n body { cursor: auto; }\r\n a, button, [onclick], .cat-card, .build-item, .collab-card,\r\n .endless-img, .wall-img, .bring-img, .impress-img { cursor: pointer; }\r\n\r\n .wrap { padding: 0 2rem; }\r\n\r\n \/* All major two-column layouts collapse *\/\r\n .impress-layout,\r\n .wall-layout,\r\n .project-layout,\r\n .bathroom-layout,\r\n .bring-layout,\r\n .earth-layout,\r\n .build-layout,\r\n .endless-header,\r\n .collabs-grid { grid-template-columns: 1fr; gap: 2.5rem; }\r\n\r\n \/* Impress specific overrides at 960px *\/\r\n .impress-layout { gap: 0; min-height: auto; }\r\n .impress-img-wrap { min-height: 420px; }\r\n .impress-panel { padding: 3.5rem 2.5rem; }\r\n .impress-stat { bottom: 1.5rem; left: 1.5rem; }\r\n\r\n \/* Cat grid stays 2 cols *\/\r\n .cat-grid { grid-template-columns: 1fr 1fr; }\r\n\r\n \/* Endless images *\/\r\n .endless-imgs { grid-template-columns: 1fr 1fr; }\r\n .endless-img.wide { grid-column: span 2; aspect-ratio: 16\/7; }\r\n .endless-header { text-align: left; }\r\n .endless-right { text-align: left; }\r\n\r\n \/* Wall images on mobile collapse to simple grid *\/\r\n .wall-imgs {\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-rows: auto;\r\n }\r\n .wall-img-tall {\r\n grid-row: span 1;\r\n grid-column: span 2;\r\n aspect-ratio: 16\/9;\r\n }\r\n .wall-img { aspect-ratio: 4\/3; }\r\n\r\n \/* Bring grid *\/\r\n .bring-img-grid { grid-template-columns: 1fr 1fr; }\r\n .bring-img.tall {\r\n grid-row: span 1;\r\n grid-column: span 2;\r\n aspect-ratio: 16\/9;\r\n }\r\n .bring-img { aspect-ratio: 1; }\r\n\r\n \/* Badges and decorations *\/\r\n .bracket-frame::before, .bracket-frame::after { display: none; }\r\n\r\n \/* Panels *\/\r\n .build-panel { padding: 2.5rem; }\r\n .build-panel .build-items { margin-top: 1.5rem; }\r\n\r\n \/* Min heights for image panels *\/\r\n .earth-img-panel { min-height: 320px; }\r\n .project-img { min-height: 300px; }\r\n .journey-content { max-width: 100%; padding: 5rem 2rem; }\r\n\r\n \/* Section paddings *\/\r\n section,\r\n #build, #wall, #endless, #project,\r\n #bathroom, #bring, #earth, #impress,\r\n #journey, #collabs { padding: 5rem 0; }\r\n}\r\n\r\n\/* \u2500\u2500 MOBILE 600px \u2500\u2500 *\/\r\n@media(max-width:600px){\r\n .wrap { padding: 0 1.2rem; }\r\n .hero-h1 { font-size: clamp(2rem, 8vw, 2.6rem); }\r\n .hero-content { padding: 6rem 1.2rem 4rem; }\r\n .hero-btns { flex-direction: column; align-items: center; }\r\n\r\n \/* Cat grid \u2014 1 col on very small *\/\r\n .cat-grid { grid-template-columns: 1fr 1fr; }\r\n .cat-img { aspect-ratio: 1 \/ 1; }\r\n\r\n \/* Impress mobile *\/\r\n .impress-img-wrap { min-height: 300px; }\r\n .impress-panel { padding: 2.5rem 1.2rem; }\r\n .impress-headline { font-size: clamp(2rem, 8vw, 2.6rem); }\r\n .impress-pills { gap: 0.4rem; }\r\n .impress-pill { font-size: 0.58rem; padding: 0.3rem 0.7rem; }\r\n\r\n \/* Build items more compact *\/\r\n .build-items-glass .build-item-glass { padding: 0.75rem 1rem; }\r\n .build-item-img { width: 44px; height: 44px; }\r\n\r\n \/* Endless single col *\/\r\n .endless-imgs { grid-template-columns: 1fr; }\r\n .endless-img.wide { grid-column: span 1; aspect-ratio: 4\/3; }\r\n\r\n \/* Wall images stacked *\/\r\n .wall-imgs { grid-template-columns: 1fr; }\r\n .wall-img-tall { grid-column: span 1; aspect-ratio: 4\/3; }\r\n .wall-img { aspect-ratio: 4\/3; }\r\n\r\n \/* Bring stacked *\/\r\n .bring-img-grid { grid-template-columns: 1fr; }\r\n .bring-img.tall { grid-column: span 1; aspect-ratio: 4\/3; }\r\n\r\n \/* Project layout *\/\r\n .project-layout { grid-template-columns: 1fr; }\r\n .project-img { min-height: 240px; }\r\n\r\n \/* Earth layout *\/\r\n .earth-layout { grid-template-columns: 1fr; }\r\n .earth-img-panel { min-height: 260px; }\r\n\r\n \/* Collab cards *\/\r\n .collab-card-img { aspect-ratio: 4\/3; }\r\n\r\n \/* Journey *\/\r\n .journey-content { padding: 4rem 1.2rem; }\r\n .journey-btns { flex-direction: column; gap: .6rem; }\r\n\r\n \/* Section padding reduction *\/\r\n section,\r\n #build, #wall, #endless, #project,\r\n #bathroom, #bring, #earth, #impress,\r\n #journey, #collabs { padding: 3.5rem 0; }\r\n\r\n \/* Headings scale *\/\r\n .endless-header h2 { font-size: clamp(2rem, 9vw, 3rem); }\r\n .wall-text h2, .impress-text h2,\r\n .bring-text h2, .journey-content h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }\r\n\r\n \/* Collabs full col *\/\r\n .collabs-grid { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Scroll progress -->\r\n<div id=\"scroll-progress\"><\/div>\r\n\r\n<!-- Custom Cursor -->\r\n<div id=\"cursor-dot\"><\/div>\r\n<div id=\"cursor-ring\"><\/div>\r\n\r\n<!-- Ambient orbs -->\r\n<div class=\"orb orb-a\"><\/div>\r\n<div class=\"orb orb-b\"><\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 1 \u2014 HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"hero\">\r\n <div class=\"hero-bg\">\r\n <!-- Main hero background video; fallback to image -->\r\n <video autoplay muted loop playsinline poster=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/07\/imgi_31_Inspired-Banner-with-Image-version-3-and-4-aag16848_rgb_KOHLER-Inspired-Banner-With-Image-variation-3-and-4-L-Desktop.webp\">\r\n <source src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/07\/5141429_Shower_Water_1280x720.mp4\" type=\"video\/mp4\"\/>\r\n <\/video>\r\n <\/div>\r\n <!-- Grid overlay effect -->\r\n <div class=\"hero-grid-bg\"><\/div>\r\n <!-- Glow pulse -->\r\n <div class=\"hero-glow-pulse\"><\/div>\r\n <div class=\"hero-content\">\r\n <div class=\"hero-brand sr\"><span class=\"shimmer-text\">Signature Reflections<\/span><\/div>\r\n <h1 class=\"hero-h1 sr d1\">\r\n Luxury Bathroom<br\/>Systems <em>Built for<\/em><br\/>Real Life.\r\n <\/h1>\r\n <p class=\"hero-sub sr d2\">\r\n Engineered to elevate design, simplify installs, and outperform the ordinary.\r\n <\/p>\r\n <p class=\"hero-tagline sr d3\">Designed to impress. Built to perform.<\/p>\r\n <div class=\"hero-btns sr d3\">\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/contact-us\/\" class=\"btn-primary\">Become a Dealer<\/a>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/contact-us\/\" class=\"btn-outline\">Free Estimation<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 2 \u2014 PRODUCT CATEGORIES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"categories\">\r\n <div class=\"cat-grid\">\r\n <!-- Shower Doors -->\r\n <div class=\"cat-card sr\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/shop\/'\" style=\"cursor:pointer;\">\r\n <div class=\"cat-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/12\/matte-black-door.jpg\"\r\n alt=\"Shower Doors\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"cat-info\">\r\n <span class=\"tag\">Signature Collections<\/span>\r\n <h3>Shower Doors<\/h3>\r\n <\/div>\r\n <\/div>\r\n <!-- Shower Base -->\r\n <div class=\"cat-card sr d1\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/shop\/'\" style=\"cursor:pointer;\">\r\n <div class=\"cat-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/12\/WhatsApp-Image-2026-01-07-at-12.00.31-AM-1.jpeg\"\r\n alt=\"Shower Base\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"cat-info\">\r\n <span class=\"tag\">Signature Collections<\/span>\r\n <h3>Shower Base<\/h3>\r\n <\/div>\r\n <\/div>\r\n <!-- Wall Systems -->\r\n <div class=\"cat-card sr d2\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/shop\/'\" style=\"cursor:pointer;\">\r\n <div class=\"cat-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/28A00B0A-348B-449C-B19F-DA076D31D838.jpg\"\r\n alt=\"Wall Systems\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"cat-info\">\r\n <span class=\"tag\">Signature Collections<\/span>\r\n <h3>Wall Systems<\/h3>\r\n <\/div>\r\n <\/div>\r\n <!-- Safety Bars -->\r\n <div class=\"cat-card sr d3\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/shop\/'\" style=\"cursor:pointer;\">\r\n <div class=\"cat-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_knpxcdknpxcdknpx.png\"\r\n alt=\"Safety Bars\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"cat-info\">\r\n <span class=\"tag\">Signature Collections<\/span>\r\n <h3>Safety Bars<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 3 \u2014 BUILT TO IMPRESS (NEW)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"impress\">\r\n <div class=\"impress-layout\">\r\n\r\n <!-- LEFT: Full-bleed image -->\r\n <div class=\"impress-img-wrap\">\r\n <div class=\"impress-pin tl\"><\/div>\r\n <div class=\"impress-pin br\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/07\/Inspired-Banner-with-Image-version-3-and-4-aah72113_rgb-KOHLER-Inspired-Banner-With-Image-variation-3-and-4-L-Desktop.webp\"\r\n alt=\"Built to Impress\" loading=\"lazy\"\/>\r\n <!-- Floating stat -->\r\n <div class=\"impress-stat\">\r\n <span class=\"impress-stat-num\">SR<\/span>\r\n <span class=\"impress-stat-label\">Premium<br\/>Series<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT: Text panel -->\r\n <div class=\"impress-panel\">\r\n <!-- Eyebrow with pulse dot -->\r\n <div class=\"impress-eyebrow\">\r\n <div class=\"impress-eyebrow-dot\"><\/div>\r\n <span class=\"impress-eyebrow-text\">Signature Standard<\/span>\r\n <\/div>\r\n\r\n <!-- Animated draw line -->\r\n <div class=\"impress-line-draw\"><\/div>\r\n\r\n <!-- Word-by-word headline -->\r\n <h2 class=\"impress-headline\">\r\n <span class=\"word\">Built<\/span>\r\n <span class=\"word\">to<\/span>\r\n <span class=\"word\">Impress.<\/span>\r\n <span class=\"word gold\">Engineered<\/span>\r\n <span class=\"word gold\">to<\/span>\r\n <span class=\"word gold\">Outperform.<\/span>\r\n <\/h2>\r\n\r\n <!-- Body copy -->\r\n <p class=\"impress-body\">\r\n Refined aesthetics paired with smart features that deliver beauty without compromise \u2014 every fixture, every finish, every detail.\r\n <\/p>\r\n\r\n <!-- Feature pills -->\r\n <div class=\"impress-pills\">\r\n <span class=\"impress-pill\"><span class=\"impress-pill-dot\"><\/span>Precision Engineered<\/span>\r\n <span class=\"impress-pill\"><span class=\"impress-pill-dot\"><\/span>Luxury Finish<\/span>\r\n <span class=\"impress-pill\"><span class=\"impress-pill-dot\"><\/span>Easy Install<\/span>\r\n <span class=\"impress-pill\"><span class=\"impress-pill-dot\"><\/span>Lifetime Quality<\/span>\r\n <\/div>\r\n\r\n <!-- CTA -->\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"impress-cta\">\r\n <span>\u2726 Explore Smart Fixtures<\/span>\r\n <span class=\"impress-cta-arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- MARQUEE -->\r\n<div class=\"marquee-row\">\r\n <div class=\"marquee-track\">\r\n <span class=\"m-item\">Shower Doors<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Shower Base<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Wall Systems<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Safety Bars<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Signature Collections<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Earth Tones\u2122<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Build the Experience<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Luxury Bathroom Systems<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Signature Reflections<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <!-- dupe for loop -->\r\n <span class=\"m-item\">Shower Doors<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Shower Base<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Wall Systems<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Safety Bars<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Signature Collections<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Earth Tones\u2122<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Build the Experience<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Luxury Bathroom Systems<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Signature Reflections<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"gold-shimmer-line\"><\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 4 \u2014 BUILD THE EXPERIENCE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"build\">\r\n <div class=\"wrap\">\r\n <div class=\"build-layout\">\r\n <div class=\"build-visual sr\">\r\n <video autoplay muted loop playsinline\r\n poster=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/07\/imageye___-_imgi_20_Large-Double-Featured-Content-Cards-aaf40957_rgb_Large-Double-Featured-Content-Cards-L-Desktop.webp\">\r\n <source src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/07\/KOHLER-Kitchen-and-Bathroom.mp4\" type=\"video\/mp4\"\/>\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/07\/imageye___-_imgi_20_Large-Double-Featured-Content-Cards-aaf40957_rgb_Large-Double-Featured-Content-Cards-L-Desktop.webp\" alt=\"Build Experience\"\/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"build-panel sr d2\">\r\n <span class=\"eyebrow anim-eyebrow\">Interactive Configurator<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\"><em>Build the<\/em><\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Experience<\/span><\/span>\r\n <\/h2>\r\n <p class=\"body-copy anim-left ad3\" style=\"margin-bottom:0; margin-top:1rem;\">\r\n Configure your perfect bathroom system. Select finishes, dimensions, and product combinations \u2014 all in one place.\r\n <\/p>\r\n <!-- Product items -->\r\n <div class=\"build-items build-items-glass\">\r\n <div class=\"build-item build-item-glass\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/product\/murphy-2-in-1-shelf-30-x-4\/'\" style=\"cursor:pointer;\">\r\n <div class=\"build-item-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/WhatsApp-Image-2026-01-30-at-9.52.21-AM.jpeg\" alt=\"Murphy Shelf\"\/>\r\n <\/div>\r\n <div class=\"build-item-text\">\r\n <h4>Murphy 2 in 1 Shelf 30\u2033 \u00d7 4\u2033<\/h4>\r\n <span>505.15 in BN<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"build-item build-item-glass\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/product\/securelux-grab-bars\/'\" style=\"cursor:pointer;\">\r\n <div class=\"build-item-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/12\/Photo-Jan-27-2026-4-21-15-PM-5.png\" alt=\"Grab Bars\"\/>\r\n <\/div>\r\n <div class=\"build-item-text\">\r\n <h4>Securelux Grab Bars<\/h4>\r\n <span>Safety Series<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"build-item build-item-glass\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/product\/shelving\/'\" style=\"cursor:pointer;\">\r\n <div class=\"build-item-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/8B923571-8BF4-460B-B4F4-728651FA948A.jpg\" alt=\"Shelving\"\/>\r\n <\/div>\r\n <div class=\"build-item-text\">\r\n <h4>Shelving<\/h4>\r\n <span>Storage Solutions<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"build-item build-item-glass\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/product\/signature-reflections-rain-spa-series\/'\" style=\"cursor:pointer;\">\r\n <div class=\"build-item-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Jan-28-2026-11_28_17-AM.png\" alt=\"Rain Spa Series\"\/>\r\n <\/div>\r\n <div class=\"build-item-text\">\r\n <h4>Rain Spa Series Shower \/ Tubs<\/h4>\r\n <span>Signature Reflections<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"build-item build-item-glass\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/product\/signature-reflections-rain-spa-series\/'\" style=\"cursor:pointer;\">\r\n <div class=\"build-item-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2025\/12\/matte-black-door.jpg\" alt=\"Shower Doors\"\/>\r\n <\/div>\r\n <div class=\"build-item-text\">\r\n <h4>Shower Doors<\/h4>\r\n <span>Signature Collections<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 5 \u2014 WALL SYSTEM\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"wall\" style=\"position:relative;\">\r\n <span class=\"section-num\">05<\/span>\r\n <div class=\"wrap\">\r\n <div class=\"wall-layout\">\r\n <div class=\"wall-text\">\r\n <span class=\"eyebrow anim-eyebrow\">Wall Solutions<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\"><em>Wall<\/em><\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">System<\/span><\/span>\r\n <\/h2>\r\n <p class=\"body-copy anim-left ad3\">\r\n Three-piece wall set includes two end walls (36\u2033\u00d796\u2033 each), and back wall (60\u2033\u00d796\u2033). Walls are engineered for seamless installation and lasting performance.\r\n <\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-text anim-left ad4\">\r\n Explore Wall System <span class=\"arr\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <div class=\"wall-imgs sr d2\">\r\n <div class=\"wall-img wall-img-tall anim-img-reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/28A00B0A-348B-449C-B19F-DA076D31D838.jpg\"\r\n alt=\"Wall System\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"wall-img anim-img-reveal ad2\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-artbovich-6301184-scaled.jpg\"\r\n alt=\"Wall System Detail\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"wall-img anim-img-reveal ad4\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-karola-g-4194841-scaled.jpg\"\r\n alt=\"Bathroom Interior\" loading=\"lazy\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 6 \u2014 START YOUR JOURNEY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"journey\">\r\n <div class=\"journey-bg\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-artbovich-7031878-scaled.jpg\"\r\n alt=\"Start Your Journey\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"journey-content\">\r\n <span class=\"eyebrow anim-eyebrow\">Where It Begins<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Start your journey<\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">with <em><span class=\"shimmer-text\">Signature<\/span><\/em><\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Reflections<\/span><\/span>\r\n <\/h2>\r\n <p class=\"body-copy anim-left ad3\">\r\n Signature Reflections is where thoughtful design meets everyday luxury, crafted for people who want their bathroom to look exceptional and work flawlessly, every single day.\r\n <\/p>\r\n <div class=\"journey-btns anim-left ad4\">\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-primary\">Shop the Room<\/a>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/contact-us\/\" class=\"btn-outline\">Free Estimation<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 7 \u2014 ENDLESS DESIGNS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"endless\" style=\"position:relative;\">\r\n <span class=\"section-num\">07<\/span>\r\n <div class=\"wrap\">\r\n <div class=\"endless-header\">\r\n <div>\r\n <span class=\"eyebrow anim-eyebrow\">Collections<\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Endless<\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\"><em><span class=\"shimmer-text\">Designs<\/span><\/em><\/span><\/span>\r\n <\/h2>\r\n <\/div>\r\n <div class=\"endless-right\">\r\n <p class=\"body-copy anim-right ad2\">\r\n Intuitive design paired with deep, sophisticated tones delivers a bathroom that feels elevated, calming, and easy to enjoy \u2014 no matter who's using it.\r\n <\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-text anim-right ad3\">\r\n Shop the Room <span class=\"arr\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"endless-imgs\">\r\n <div class=\"endless-img wide sr\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-cottonbro-6467856-scaled.jpg\"\r\n alt=\"Earth Tones Bathroom\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"endless-img sr d1\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-pixabay-271631-scaled.jpg\"\r\n alt=\"Luxury Bathroom\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"endless-img sr d2\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-jworks1124-342800.jpg\"\r\n alt=\"Modern Bathroom\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"endless-img sr d3\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-cottonbro-4153144-scaled.jpg\"\r\n alt=\"Bathroom Detail\" loading=\"lazy\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- SECOND MARQUEE -->\r\n<div class=\"marquee-row\">\r\n <div class=\"marquee-track\" style=\"animation-direction:reverse;\">\r\n <span class=\"m-item\">Earth Tones\u2122 Collection<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Signature \u00d7 One Day<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Ice Bath<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Explore More Collaborations<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Project Reflection<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Bring Design to Life<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Bathroom Design<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Premium Hardware<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <!-- dupe -->\r\n <span class=\"m-item\">Earth Tones\u2122 Collection<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Signature \u00d7 One Day<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Ice Bath<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Explore More Collaborations<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Project Reflection<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Bring Design to Life<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Bathroom Design<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <span class=\"m-item\">Premium Hardware<\/span><span class=\"m-dot\">\u2726<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"gold-shimmer-line\"><\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 8 \u2014 COLLABORATIONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"collabs\" style=\"padding-top:5rem;\">\r\n <div class=\"wrap collabs-label sr\">\r\n <span class=\"eyebrow\" style=\"margin:0;\">Explore More Collaborations<\/span>\r\n <\/div>\r\n <div class=\"collabs-grid\">\r\n <div class=\"collab-card sr\">\r\n <div class=\"collab-card-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/travertine-bathroom-tile-800x500-1.jpg\"\r\n alt=\"Earth Tones Collection\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"collab-info\">\r\n <h3>Showcase \u00d7 Reflections: Earth Tones\u2122 Collection<\/h3>\r\n <p>Natural warmth meets precision hardware in our most celebrated collaboration.<\/p>\r\n <a href=\"#earth\" class=\"btn-text\">Explore <span class=\"arr\">\u2192<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"collab-card sr d2\">\r\n <div class=\"collab-card-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/logo-KCHS0022-LEDMB1-0001-1.webp\"\r\n alt=\"Signature x One Day Ice Bath\" loading=\"lazy\" style=\"object-fit:contain; background:#0f1114; padding:2rem;\"\/>\r\n <\/div>\r\n <div class=\"collab-info\">\r\n <h3>Signature \u00d7 One Day: Ice Bath<\/h3>\r\n <p>Recovery meets refined design \u2014 the cold plunge experience, reimagined.<\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-text\">Explore <span class=\"arr\">\u2192<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 9 \u2014 PROJECT REFLECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"project\">\r\n <div class=\"wrap\">\r\n <div class=\"project-layout\" style=\"cursor:pointer;\" onclick=\"window.location='https:\/\/signaturereflectionsbath.com\/index.php\/project-reflection\/'\">\r\n <div class=\"project-img sr\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-christa-grover-977018-1910472-scaled.jpg\"\r\n alt=\"Project Reflection\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"project-panel sr d2\">\r\n <span class=\"eyebrow anim-eyebrow\">Planning Guide<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Project<\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\"><span class=\"shimmer-text\">Reflection<\/span><\/span><\/span>\r\n <\/h2>\r\n <h3 class=\"anim-left ad3\">Visit our planning and inspiration guide to stay ahead and make every step of your next project count.<\/h3>\r\n <p class=\"body-copy anim-left ad4\">\r\n From concept to completion \u2014 our project planning resources keep every detail on track, every decision informed.\r\n <\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/project-reflection\/\" class=\"btn-primary anim-left ad5\" onclick=\"event.stopPropagation()\">Get Started<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 10 \u2014 SIGNATURE REFLECTIONS BATHROOM DESIGN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"bathroom\">\r\n <div class=\"wrap\">\r\n <div class=\"bathroom-layout\">\r\n <div class=\"bathroom-panel sr\">\r\n <span class=\"eyebrow anim-eyebrow\">Professional Design<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Signature Reflections<\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Bathroom Design<\/span><\/span>\r\n <\/h2>\r\n <p class=\"body-copy anim-left ad3\">\r\n Design your space alongside professionals who know how to get it right \u2014 big upgrades or full remodels.\r\n <\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-text anim-left ad4\">\r\n Explore <span class=\"arr\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <div style=\"overflow:hidden; position:relative;\" class=\"sr d2\">\r\n <div class=\"bathroom-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-karola-g-4194841-scaled.jpg\"\r\n alt=\"Signature Reflections Bathroom Design\" loading=\"lazy\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 11 \u2014 BRING DESIGN TO LIFE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"bring\">\r\n <div class=\"wrap\">\r\n <div class=\"bring-layout\">\r\n <div class=\"bring-text sr\">\r\n <span class=\"eyebrow anim-eyebrow\">In-Store Experience<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Bring<\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\"><em><span class=\"shimmer-text\">Design<\/span><\/em><\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">to Life<\/span><\/span>\r\n <\/h2>\r\n <p class=\"body-copy anim-left ad3\">\r\n Take your inspiration further and explore the possibilities in person at your Signature Reflections Store. Helpful associates can provide product selection and design assistance, so you can bring your vision to life.\r\n <\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-text anim-left ad4\">\r\n Explore <span class=\"arr\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <div class=\"bring-img-grid sr d2\">\r\n <div class=\"bring-img tall\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-artbovich-6301184-scaled.jpg\"\r\n alt=\"Bathroom Products\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"bring-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-pixabay-271631-scaled.jpg\"\r\n alt=\"Luxury Tile\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"bring-img\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/03\/pexels-cottonbro-4153144-scaled.jpg\"\r\n alt=\"Bathroom Interior\" loading=\"lazy\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 12 \u2014 EARTH TONES COLLECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"earth\">\r\n <div class=\"wrap\">\r\n <div class=\"earth-layout\">\r\n <div class=\"earth-img-panel sr\">\r\n <img decoding=\"async\" src=\"https:\/\/signaturereflectionsbath.com\/wp-content\/uploads\/2026\/01\/travertine-bathroom-tile-800x500-1.jpg\"\r\n alt=\"Earth Tones Collection\" loading=\"lazy\"\/>\r\n <\/div>\r\n <div class=\"earth-content sr d2\">\r\n <span class=\"eyebrow anim-eyebrow\">Featured Collection<\/span>\r\n <span class=\"anim-rule\"><\/span>\r\n <h3 class=\"anim-left ad2\">Showcase \u00d7 Reflections<\/h3>\r\n <h2 class=\"anim-heading\">\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Earth Tones\u2122<\/span><\/span>\r\n <span class=\"line-wrap\"><span class=\"line-inner\">Collection<\/span><\/span>\r\n <\/h2>\r\n <p class=\"body-copy anim-left ad4\">\r\n The Earth Tones\u2122 Collection brings natural warmth and timeless style into modern bathrooms. Inspired by organic textures and calming neutral shades, this collection blends elegant design with durable materials to create spaces that feel both refined and functional.\r\n <\/p>\r\n <a href=\"https:\/\/signaturereflectionsbath.com\/index.php\/shop\/\" class=\"btn-primary anim-left ad5\">Explore<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n JS \u2014 ANIMATION ENGINE + CURSOR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 1. SCROLL PROGRESS BAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n(function(){\r\n const bar = document.getElementById('scroll-progress');\r\n if (!bar) return;\r\n window.addEventListener('scroll', () => {\r\n const pct = window.scrollY \/ (document.body.scrollHeight - window.innerHeight) * 100;\r\n bar.style.width = Math.min(pct, 100) + '%';\r\n }, { passive: true });\r\n})();\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 2. EYEBROW CHAR SPLIT + REVEAL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction splitEyebrows() {\r\n document.querySelectorAll('.anim-eyebrow').forEach(el => {\r\n const text = el.textContent;\r\n el.textContent = '';\r\n text.split('').forEach((ch, i) => {\r\n const span = document.createElement('span');\r\n span.className = 'char';\r\n span.textContent = ch === ' ' ? '\\u00a0' : ch;\r\n span.style.transitionDelay = (i * 0.025) + 's';\r\n el.appendChild(span);\r\n });\r\n });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 3. UNIVERSAL INTERSECTION OBSERVER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction initAnimObserver() {\r\n const opts = { threshold: 0.15, rootMargin: '0px 0px -40px 0px' };\r\n\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (!e.isIntersecting) return;\r\n const el = e.target;\r\n\r\n \/\/ Eyebrow char reveal\r\n if (el.classList.contains('anim-eyebrow')) {\r\n el.classList.add('revealed');\r\n }\r\n \/\/ Heading line reveal\r\n if (el.classList.contains('anim-heading')) {\r\n el.classList.add('revealed');\r\n }\r\n \/\/ Gold rule draw\r\n if (el.classList.contains('anim-rule')) {\r\n el.classList.add('revealed');\r\n }\r\n \/\/ Fade left \/ right\r\n if (el.classList.contains('anim-left') || el.classList.contains('anim-right')) {\r\n el.classList.add('revealed');\r\n }\r\n \/\/ Image curtain reveal\r\n if (el.classList.contains('anim-img-reveal')) {\r\n el.classList.add('revealed');\r\n }\r\n \/\/ Generic sr\r\n if (el.classList.contains('sr')) {\r\n el.classList.add('up');\r\n }\r\n\r\n io.unobserve(el);\r\n });\r\n }, opts);\r\n\r\n \/\/ Observe all animated elements\r\n const selectors = [\r\n '.anim-eyebrow', '.anim-heading', '.anim-rule',\r\n '.anim-left', '.anim-right', '.anim-img-reveal', '.sr'\r\n ];\r\n selectors.forEach(sel => {\r\n document.querySelectorAll(sel).forEach(el => io.observe(el));\r\n });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 4. SECTION-LEVEL OBSERVER (journey, impress, wall)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction initSectionObservers() {\r\n const sectionIds = ['impress', 'wall', 'journey', 'build', 'endless',\r\n 'collabs', 'project', 'bathroom', 'bring', 'earth'];\r\n\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (!e.isIntersecting) return;\r\n e.target.classList.add('in-view');\r\n\r\n \/\/ Stagger build items\r\n if (e.target.id === 'build') {\r\n document.querySelectorAll('.build-item-glass').forEach((item, i) => {\r\n setTimeout(() => item.classList.add('item-visible'), 400 + i * 100);\r\n });\r\n }\r\n io.unobserve(e.target);\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n sectionIds.forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) io.observe(el);\r\n });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 5. PARALLAX ON SECTION BACKGROUNDS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction initParallax() {\r\n if (window.matchMedia('(hover: none)').matches) return; \/\/ skip on touch\r\n\r\n const pairs = [\r\n { section: '#journey', target: '.journey-bg img', factor: 0.25 },\r\n { section: '#impress', target: '.impress-img-wrap img', factor: 0.15 },\r\n ];\r\n\r\n pairs.forEach(({ section, target, factor }) => {\r\n const sec = document.querySelector(section);\r\n const img = document.querySelector(target);\r\n if (!sec || !img) return;\r\n\r\n window.addEventListener('scroll', () => {\r\n const rect = sec.getBoundingClientRect();\r\n const center = rect.top + rect.height \/ 2 - window.innerHeight \/ 2;\r\n img.style.transform = `scale(1.12) translateY(${center * factor}px)`;\r\n }, { passive: true });\r\n });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 6. COLLAB CARD TEXT ANIMATION\r\n (already handled by .sr + CSS, but add extra)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction initCollabAnimations() {\r\n document.querySelectorAll('.collab-card').forEach(card => {\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('sr', 'up');\r\n io.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n io.observe(card);\r\n });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n 7. CUSTOM CURSOR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n(function(){\r\n const dot = document.getElementById('cursor-dot');\r\n const ring = document.getElementById('cursor-ring');\r\n if (!dot || !ring) return;\r\n\r\n if (window.matchMedia('(hover: none)').matches) {\r\n dot.style.display = 'none';\r\n ring.style.display = 'none';\r\n return;\r\n }\r\n\r\n let mx = -200, my = -200;\r\n let rx = -200, ry = -200;\r\n\r\n document.addEventListener('mousemove', e => {\r\n mx = e.clientX; my = e.clientY;\r\n dot.style.left = mx + 'px';\r\n dot.style.top = my + 'px';\r\n });\r\n\r\n function lerp(a, b, t) { return a + (b - a) * t; }\r\n function animateRing() {\r\n rx = lerp(rx, mx, 0.14);\r\n ry = lerp(ry, my, 0.14);\r\n ring.style.left = rx + 'px';\r\n ring.style.top = ry + 'px';\r\n requestAnimationFrame(animateRing);\r\n }\r\n animateRing();\r\n\r\n document.querySelectorAll(\r\n 'a, button, [onclick], .cat-card, .build-item, .collab-card, .endless-img, .wall-img, .bring-img'\r\n ).forEach(el => {\r\n el.addEventListener('mouseenter', () => document.body.classList.add('cursor-hover'));\r\n el.addEventListener('mouseleave', () => document.body.classList.remove('cursor-hover'));\r\n });\r\n\r\n document.addEventListener('mousedown', () => document.body.classList.add('cursor-click'));\r\n document.addEventListener('mouseup', () => document.body.classList.remove('cursor-click'));\r\n document.addEventListener('mouseleave', () => { dot.style.opacity='0'; ring.style.opacity='0'; });\r\n document.addEventListener('mouseenter', () => { dot.style.opacity='1'; ring.style.opacity='1'; });\r\n})();\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BOOT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nsplitEyebrows();\r\ninitAnimObserver();\r\ninitSectionObservers();\r\ninitParallax();\r\ninitCollabAnimations();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Signature Reflections Signature Reflections Luxury BathroomSystems Built forReal Life. Engineered to elevate design, simplify installs, and outperform the ordinary. Designed to impress. Built to perform. Become a Dealer Free Estimation Signature Collections Shower Doors Signature Collections Shower Base Signature Collections Wall Systems Signature Collections Safety Bars SR PremiumSeries Signature Standard Built to Impress. Engineered to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":315,"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":1496,"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages\/18\/revisions\/1496"}],"wp:attachment":[{"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}