{"id":1465,"date":"2026-03-11T05:34:47","date_gmt":"2026-03-11T05:34:47","guid":{"rendered":"https:\/\/signaturereflectionsbath.com\/?page_id=1465"},"modified":"2026-03-13T06:24:21","modified_gmt":"2026-03-13T06:24:21","slug":"project-reflection","status":"publish","type":"page","link":"https:\/\/signaturereflectionsbath.com\/index.php\/project-reflection\/","title":{"rendered":"Project Reflection"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1465\" class=\"elementor elementor-1465\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-592cc6c e-flex e-con-boxed e-con e-parent\" data-id=\"592cc6c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54d7e3c elementor-widget elementor-widget-html\" data-id=\"54d7e3c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Rajdhani:wght@300;400;500;600;700&family=Jost:wght@200;300;400;500&display=swap');\r\n\r\n  \/* \u2550\u2550 ELEMENTOR BREAKOUT \u2550\u2550 *\/\r\n  .pr-breakout {\r\n    position: relative;\r\n    left: 50%; right: 50%;\r\n    margin-left: -50vw; margin-right: -50vw;\r\n    width: 100vw; max-width: 100vw;\r\n    overflow-x: hidden;\r\n  }\r\n  .pr-breakout, .pr-breakout * { box-sizing: border-box; }\r\n\r\n  \/* \u2550\u2550 VARIABLES \u2550\u2550 *\/\r\n  :root {\r\n    --gold:   #d4af37;\r\n    --gold2:  #e8c84a;\r\n    --gold-dim:    rgba(212,175,55,0.15);\r\n    --gold-border: rgba(212,175,55,0.30);\r\n    --gold-glow:   rgba(212,175,55,0.07);\r\n    --bg:   #0b0b0b;\r\n    --bg-2: #111111;\r\n    --bg-3: #161616;\r\n    --text: #f0ede6;\r\n    --muted:rgba(240,237,230,0.52);\r\n    --dim:  rgba(240,237,230,0.28);\r\n    --line: rgba(255,255,255,0.05);\r\n    --white:#ffffff;\r\n    --serif:'Cormorant Garamond', serif;\r\n    --sans: 'Jost', sans-serif;\r\n    --raj:  'Rajdhani', sans-serif;\r\n  }\r\n\r\n  \/* \u2550\u2550 BASE \u2550\u2550 *\/\r\n  .pr-page {\r\n    font-family: var(--sans);\r\n    background: var(--bg);\r\n    color: var(--text);\r\n    overflow-x: hidden;\r\n    -webkit-font-smoothing: antialiased;\r\n    width: 100%;\r\n    cursor: none;\r\n  }\r\n\r\n  .pr-section {\r\n    position: relative; z-index: 1;\r\n    padding: 100px 0; width: 100%;\r\n    background: var(--bg);\r\n  }\r\n  .pr-section.alt {\r\n    background: var(--bg-2) !important;\r\n    border-top: 1px solid var(--line);\r\n    border-bottom: 1px solid var(--line);\r\n  }\r\n\r\n  .pr-wrap {\r\n    max-width: 1160px;\r\n    margin: 0 auto;\r\n    padding: 0 48px;\r\n    width: 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     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\n  #pr-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: 999999;\r\n    transform: translate(-50%,-50%);\r\n    transition: width .12s ease, height .12s ease, background .2s ease;\r\n    mix-blend-mode: difference;\r\n  }\r\n  #pr-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: 999998;\r\n    transform: translate(-50%,-50%);\r\n    transition: width .25s ease, height .25s ease,\r\n                border-color .2s ease, background .25s ease;\r\n  }\r\n  .pr-page.cur-hover #pr-cursor-dot  { width: 12px; height: 12px; background: var(--gold2); }\r\n  .pr-page.cur-hover #pr-cursor-ring { width: 52px; height: 52px; border-color: rgba(212,175,55,.9); background: rgba(212,175,55,.06); }\r\n  .pr-page.cur-click #pr-cursor-dot  { width: 5px; height: 5px; }\r\n  .pr-page.cur-click #pr-cursor-ring { width: 26px; height: 26px; border-color: var(--gold); }\r\n\r\n  @media (hover: none) {\r\n    #pr-cursor-dot, #pr-cursor-ring { display: none; }\r\n    .pr-page { cursor: auto; }\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     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\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #pr-scroll-bar {\r\n    position: fixed; top: 0; left: 0;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, var(--gold), var(--gold2));\r\n    z-index: 99997; width: 0%;\r\n    transition: width .1s linear;\r\n    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     GRAIN OVERLAY\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  .pr-grain {\r\n    position: fixed; inset: 0;\r\n    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: .45;\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     ANIMATION SYSTEM (ported from v5)\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  \/* \u2014 base scroll reveal \u2014 *\/\r\n  .pr-sr {\r\n    opacity: 0; transform: translateY(28px);\r\n    transition: opacity .9s cubic-bezier(.16,1,.3,1),\r\n                transform .9s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .pr-sr.up { opacity: 1; transform: translateY(0); }\r\n  .pr-sr.d1 { transition-delay: .10s; }\r\n  .pr-sr.d2 { transition-delay: .22s; }\r\n  .pr-sr.d3 { transition-delay: .36s; }\r\n  .pr-sr.d4 { transition-delay: .52s; }\r\n\r\n  \/* \u2014 fade from left \u2014 *\/\r\n  .anim-left {\r\n    opacity: 0; transform: translateX(-28px);\r\n    transition: opacity .85s cubic-bezier(.16,1,.3,1),\r\n                transform .85s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .anim-left.revealed { opacity: 1; transform: translateX(0); }\r\n\r\n  \/* \u2014 fade from right \u2014 *\/\r\n  .anim-right {\r\n    opacity: 0; transform: translateX(28px);\r\n    transition: opacity .85s cubic-bezier(.16,1,.3,1),\r\n                transform .85s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .anim-right.revealed { opacity: 1; transform: translateX(0); }\r\n\r\n  \/* stagger helpers *\/\r\n  .ad1 { transition-delay: .08s !important; }\r\n  .ad2 { transition-delay: .18s !important; }\r\n  .ad3 { transition-delay: .28s !important; }\r\n  .ad4 { transition-delay: .40s !important; }\r\n  .ad5 { transition-delay: .54s !important; }\r\n\r\n  \/* \u2014 overline extending bar \u2014 *\/\r\n  .ov-extend {\r\n    display: flex; align-items: center; gap: 14px;\r\n    margin-bottom: 14px;\r\n  }\r\n  .ov-extend::before {\r\n    content: ''; height: 1px; background: var(--gold);\r\n    width: 0;\r\n    transition: width .8s .1s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .ov-extend.oe-on::before { width: 32px; }\r\n  .ov-extend-text {\r\n    font-family: var(--raj);\r\n    font-size: 11px; font-weight: 600;\r\n    letter-spacing: .38em; text-transform: uppercase;\r\n    color: var(--gold);\r\n  }\r\n  \/* center variant *\/\r\n  .ov-extend.center { justify-content: center; }\r\n  .ov-extend.center::before { display: none; }\r\n  .ov-extend.center::after {\r\n    content: ''; height: 1px; background: var(--gold);\r\n    width: 0; order: -1;\r\n    transition: width .8s .1s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .ov-extend.center.oe-on::after { width: 32px; }\r\n\r\n  \/* \u2014 gold rule draw-in \u2014 *\/\r\n  .rule-draw {\r\n    display: block; width: 56px; height: 1px;\r\n    background: var(--gold); margin-bottom: 28px;\r\n    transform: scaleX(0); transform-origin: left center;\r\n    transition: transform .8s .1s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .rule-draw.rd-on { transform: scaleX(1); }\r\n  .rule-draw.center { margin: 0 auto 28px; transform-origin: center; }\r\n\r\n  \/* \u2014 heading line-clip reveal \u2014 *\/\r\n  .h-reveal .h-line {\r\n    display: block; overflow: hidden; line-height: 1.15;\r\n  }\r\n  .h-reveal .h-line-inner {\r\n    display: block;\r\n    opacity: 0; transform: translateY(105%);\r\n    transition: opacity .75s cubic-bezier(.16,1,.3,1),\r\n                transform .75s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .h-reveal.hr-on .h-line-inner { opacity: 1; transform: translateY(0); }\r\n  .h-reveal.hr-on .h-line:nth-child(1) .h-line-inner { transition-delay: 0s; }\r\n  .h-reveal.hr-on .h-line:nth-child(2) .h-line-inner { transition-delay: .12s; }\r\n  .h-reveal.hr-on .h-line:nth-child(3) .h-line-inner { transition-delay: .24s; }\r\n\r\n  \/* \u2014 body copy stagger \u2014 *\/\r\n  .body-reveal .br-line {\r\n    display: block;\r\n    opacity: 0; transform: translateY(16px);\r\n    transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .body-reveal.br-on .br-line { opacity: 1; transform: translateY(0); }\r\n  .body-reveal.br-on .br-line:nth-child(1) { transition-delay: 0s; }\r\n  .body-reveal.br-on .br-line:nth-child(2) { transition-delay: .13s; }\r\n  .body-reveal.br-on .br-line:nth-child(3) { transition-delay: .26s; }\r\n\r\n  \/* \u2014 image curtain wipe + animated brackets \u2014 *\/\r\n  .img-frame {\r\n    position: relative; overflow: hidden; border-radius: 4px;\r\n    width: 100%;\r\n  }\r\n  \/* diagonal shimmer overlay *\/\r\n  .img-frame::before {\r\n    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;\r\n    background: linear-gradient(135deg, rgba(212,175,55,.18) 0%, transparent 45%, rgba(212,175,55,.12) 100%);\r\n    opacity: 0; transition: opacity .7s .4s ease;\r\n  }\r\n  \/* top-right bracket *\/\r\n  .img-frame::after {\r\n    content: ''; position: absolute;\r\n    top: 14px; right: 14px;\r\n    width: 26px; height: 26px;\r\n    border-top: 2px solid var(--gold);\r\n    border-right: 2px solid var(--gold);\r\n    z-index: 4; pointer-events: none;\r\n    opacity: 0; transform: translate(6px,-6px);\r\n    transition: opacity .5s .55s ease, transform .5s .55s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  \/* bottom-left bracket *\/\r\n  .img-frame .if-bl {\r\n    position: absolute; bottom: 14px; left: 14px;\r\n    width: 26px; height: 26px;\r\n    border-bottom: 2px solid var(--gold);\r\n    border-left: 2px solid var(--gold);\r\n    z-index: 4; pointer-events: none;\r\n    opacity: 0; transform: translate(-6px,6px);\r\n    transition: opacity .5s .7s ease, transform .5s .7s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  \/* curtain wipe *\/\r\n  .img-frame .if-curtain {\r\n    position: absolute; inset: 0; z-index: 2;\r\n    background: var(--bg-2);\r\n    transform: scaleY(1); transform-origin: top center;\r\n    transition: transform .95s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .img-frame img {\r\n    width: 100%; display: block; object-fit: cover;\r\n    filter: brightness(.85) contrast(1.05);\r\n    transform: scale(1.08);\r\n    transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .7s ease;\r\n    min-height: 380px; max-height: 520px;\r\n  }\r\n  \/* revealed state *\/\r\n  .img-frame.frm-on::before { opacity: 1; }\r\n  .img-frame.frm-on::after  { opacity: 1; transform: translate(0,0); }\r\n  .img-frame.frm-on .if-bl  { opacity: 1; transform: translate(0,0); }\r\n  .img-frame.frm-on .if-curtain { transform: scaleY(0); transform-origin: bottom center; }\r\n  .img-frame.frm-on img { transform: scale(1); filter: brightness(.92) contrast(1.05); }\r\n  .img-frame:hover img  { filter: brightness(1) contrast(1.05) !important; transform: scale(1.03) !important; }\r\n\r\n  \/* \u2014 shimmer gold text \u2014 *\/\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(90deg, var(--gold) 0%, #fff8e0 40%, var(--gold) 60%, var(--gold2) 100%);\r\n    background-size: 200% auto;\r\n    -webkit-background-clip: text; background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    animation: goldShimmer 4s linear infinite;\r\n  }\r\n\r\n  \/* \u2014 pulsing dots \u2014 *\/\r\n  .pulse-dots {\r\n    display: flex; align-items: center; justify-content: center;\r\n    gap: 10px; margin-top: 48px;\r\n  }\r\n  .pulse-dots span {\r\n    width: 5px; height: 5px; border-radius: 50%;\r\n    background: var(--gold);\r\n    animation: prPulse 2.2s ease-in-out infinite;\r\n  }\r\n  .pulse-dots span:nth-child(2) { animation-delay: .32s; }\r\n  .pulse-dots span:nth-child(3) { animation-delay: .64s; }\r\n  @keyframes prPulse {\r\n    0%,100% { opacity: .2; transform: scale(1); }\r\n    50%     { opacity: 1;  transform: scale(1.7); }\r\n  }\r\n\r\n  \/* \u2014 hero eyebrow bar \u2014 *\/\r\n  .eyebrow-bar {\r\n    display: flex; align-items: center; justify-content: center;\r\n    gap: 16px; margin-bottom: 28px;\r\n  }\r\n  .eyebrow-bar span {\r\n    font-family: var(--raj);\r\n    font-size: 11px; font-weight: 600;\r\n    letter-spacing: .38em; text-transform: uppercase; color: var(--gold);\r\n  }\r\n  .eyebrow-bar::before, .eyebrow-bar::after {\r\n    content: ''; height: 1px; background: var(--gold-border);\r\n    width: 0;\r\n    transition: width 1.1s .5s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .eyebrow-bar.bar-open::before,\r\n  .eyebrow-bar.bar-open::after { width: 48px; }\r\n\r\n  \/* \u2014 about card (used for all cards) \u2014 *\/\r\n  .pr-card {\r\n    position: relative; overflow: hidden;\r\n    background: var(--bg-3);\r\n    border: 1px solid rgba(255,255,255,.05);\r\n    border-radius: 6px;\r\n    padding: 34px 26px;\r\n    cursor: none;\r\n    opacity: 0; transform: translateY(22px);\r\n    transition: border-color .4s, transform .5s ease, box-shadow .4s, opacity .5s ease;\r\n  }\r\n  .pr-card.ac-on { opacity: 1; transform: translateY(0); }\r\n  .pr-card::before {\r\n    content: ''; position: absolute;\r\n    top: 0; left: 0; right: 0; height: 2px;\r\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n    opacity: 0; transition: opacity .4s;\r\n  }\r\n  .pr-card::after {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: radial-gradient(ellipse at top center, rgba(212,175,55,.08) 0%, transparent 65%);\r\n    opacity: 0; transition: opacity .4s;\r\n  }\r\n  .pr-card:hover {\r\n    border-color: var(--gold-border);\r\n    transform: translateY(-6px) !important;\r\n    box-shadow: 0 24px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.1);\r\n  }\r\n  .pr-card:hover::before, .pr-card:hover::after { opacity: 1; }\r\n\r\n  .pr-card-num {\r\n    position: absolute; top: 14px; right: 18px;\r\n    font-family: var(--serif); font-size: 36px; font-weight: 300;\r\n    color: rgba(212,175,55,.07); line-height: 1;\r\n    pointer-events: none; user-select: none;\r\n    transition: color .4s; z-index: 0;\r\n  }\r\n  .pr-card:hover .pr-card-num { color: rgba(212,175,55,.15); }\r\n\r\n  .pr-card-icon {\r\n    width: 44px; height: 44px;\r\n    border: 1px solid var(--gold-border); border-radius: 4px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    margin-bottom: 22px; position: relative; z-index: 1;\r\n    transition: background .4s, border-color .4s;\r\n  }\r\n  .pr-card:hover .pr-card-icon { background: var(--gold-dim); border-color: var(--gold); }\r\n  .pr-card-icon svg {\r\n    width: 20px; height: 20px;\r\n    stroke: var(--gold); fill: none;\r\n    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;\r\n  }\r\n\r\n  .pr-card h3 {\r\n    font-family: var(--raj); font-size: 16px; font-weight: 600;\r\n    letter-spacing: .08em; text-transform: uppercase;\r\n    color: var(--white); margin-bottom: 10px;\r\n    position: relative; z-index: 1;\r\n    transition: color .3s;\r\n  }\r\n  .pr-card:hover h3 { color: var(--gold); }\r\n\r\n  .pr-card p {\r\n    font-size: 13.5px; font-weight: 300;\r\n    line-height: 1.8; color: var(--muted);\r\n    position: relative; z-index: 1;\r\n  }\r\n\r\n  \/* \u2014 gallery item \u2014 *\/\r\n  .pr-gallery-item {\r\n    position: relative; border-radius: 4px; overflow: hidden;\r\n    border: 1px solid rgba(255,255,255,.06);\r\n    opacity: 0; transform: translateY(18px);\r\n    transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);\r\n  }\r\n  .pr-gallery-item.gi-on { opacity: 1; transform: translateY(0); }\r\n  .pr-gallery-item::after {\r\n    content: ''; position: absolute;\r\n    top: 8px; right: 8px;\r\n    width: 22px; height: 22px;\r\n    border-top: 1px solid var(--gold-border);\r\n    border-right: 1px solid var(--gold-border);\r\n    z-index: 2; transition: border-color .3s;\r\n  }\r\n  .pr-gallery-item:hover::after { border-color: var(--gold); }\r\n  .pr-gallery-item img {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n    filter: brightness(.82) contrast(1.05);\r\n    transition: filter .5s, transform .5s;\r\n  }\r\n  .pr-gallery-item:hover img {\r\n    filter: brightness(.95) contrast(1.05);\r\n    transform: scale(1.04);\r\n  }\r\n\r\n  \/* \u2014 section ghost number \u2014 *\/\r\n  .sec-ghost {\r\n    position: absolute; top: 2rem; right: 2.5rem;\r\n    font-family: var(--serif); font-size: 5rem; font-weight: 300;\r\n    color: rgba(212,175,55,.04); line-height: 1;\r\n    pointer-events: none; user-select: none; letter-spacing: -.03em;\r\n  }\r\n\r\n  \/* \u2014 shimmer divider \u2014 *\/\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  \/* \u2014 marquee \u2014 *\/\r\n  .pr-marquee {\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; background: var(--bg-2);\r\n  }\r\n  .pr-marquee-track {\r\n    display: flex; gap: 0; white-space: nowrap;\r\n    animation: prScrollLeft 24s linear infinite;\r\n  }\r\n  .pr-marquee-track:hover { animation-play-state: paused; }\r\n  .pr-m-item {\r\n    flex-shrink: 0; padding: 0 2rem;\r\n    font-size: .65rem; letter-spacing: .22em;\r\n    text-transform: uppercase; color: rgba(184,150,90,.45);\r\n  }\r\n  .pr-m-dot { color: var(--gold); margin: 0 .25rem; font-size: .5rem; vertical-align: middle; }\r\n  @keyframes prScrollLeft {\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     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  .pr-hero {\r\n    min-height: 560px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    text-align: center; position: relative; overflow: hidden;\r\n    padding: 130px 24px; background: var(--bg);\r\n  }\r\n  .pr-hero-bg { position: absolute; inset: 0; z-index: 0; }\r\n  .pr-hero-bg img {\r\n    width: 100%; height: 100%; object-fit: cover;\r\n    filter: brightness(.18) contrast(1.1); display: block;\r\n  }\r\n  .pr-hero-grid {\r\n    position: absolute; inset: 0; z-index: 1;\r\n    background-image:\r\n      linear-gradient(rgba(212,175,55,.04) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(212,175,55,.04) 1px, transparent 1px);\r\n    background-size: 64px 64px;\r\n  }\r\n  .pr-hero-glow {\r\n    position: absolute; top: 50%; left: 50%;\r\n    transform: translate(-50%,-50%);\r\n    width: 800px; height: 340px;\r\n    background: radial-gradient(ellipse, rgba(212,175,55,.1) 0%, transparent 70%);\r\n    pointer-events: none; z-index: 1;\r\n    animation: prGlowPulse 6s ease-in-out infinite;\r\n  }\r\n  @keyframes prGlowPulse {\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  .pr-hero-inner { position: relative; z-index: 2; max-width: 820px; width: 100%; }\r\n  .pr-hero h1 {\r\n    font-family: var(--serif);\r\n    font-size: clamp(42px, 7vw, 88px);\r\n    font-weight: 300; line-height: 1.06;\r\n    color: var(--white); margin-bottom: 22px;\r\n    letter-spacing: -.01em;\r\n  }\r\n  .pr-hero h1 em { font-style: italic; color: var(--gold); }\r\n  .pr-hero-sub {\r\n    font-size: clamp(14px, 1.8vw, 17px); font-weight: 300;\r\n    color: var(--muted); line-height: 1.75; letter-spacing: .04em;\r\n    max-width: 560px; margin: 0 auto;\r\n  }\r\n\r\n  \/* \u2550\u2550 TWO-COL \u2550\u2550 *\/\r\n  .pr-cols {\r\n    display: grid; grid-template-columns: 1fr 1fr;\r\n    gap: 72px; align-items: center;\r\n  }\r\n\r\n  \/* \u2550\u2550 TEXT BLOCK \u2550\u2550 *\/\r\n  .pr-text-block h2 {\r\n    font-family: var(--serif);\r\n    font-size: clamp(28px, 4vw, 50px);\r\n    font-weight: 300; line-height: 1.15; color: var(--white);\r\n    margin-bottom: 24px;\r\n  }\r\n  .pr-text-block h2 em { font-style: italic; color: var(--gold); }\r\n  .pr-text-block p {\r\n    font-size: clamp(14px, 1.5vw, 15px); font-weight: 300;\r\n    line-height: 1.9; color: var(--muted); margin-bottom: 18px;\r\n  }\r\n  .pr-text-block p:last-child { margin-bottom: 0; }\r\n\r\n  \/* \u2550\u2550 CARDS HEADER \u2550\u2550 *\/\r\n  .pr-cards-header { text-align: center; margin-bottom: 60px; }\r\n  .pr-cards-header h2 {\r\n    font-family: var(--serif);\r\n    font-size: clamp(26px, 4vw, 50px);\r\n    font-weight: 300; color: var(--white);\r\n    margin-top: 8px; margin-bottom: 16px; line-height: 1.15;\r\n  }\r\n  .pr-cards-header h2 em { font-style: italic; color: var(--gold); }\r\n  .pr-cards-header p {\r\n    font-size: 15px; font-weight: 300; color: var(--muted);\r\n    max-width: 480px; margin: 0 auto; line-height: 1.7;\r\n  }\r\n\r\n  \/* \u2550\u2550 CARD GRIDS \u2550\u2550 *\/\r\n  .pr-grid-5 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }\r\n  .pr-grid-5-bottom {\r\n    display: grid; grid-template-columns: repeat(2,1fr);\r\n    gap: 20px;\r\n    max-width: calc(66.6% - 10px);\r\n    margin: 20px auto 0;\r\n  }\r\n  .pr-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }\r\n\r\n  \/* \u2550\u2550 GALLERY \u2550\u2550 *\/\r\n  .pr-gallery {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    grid-template-rows: 1fr 1fr;\r\n    gap: 12px; height: 520px;\r\n  }\r\n  .pr-gallery-main { grid-row: 1 \/ 3; }\r\n\r\n  \/* \u2550\u2550 CTA \u2550\u2550 *\/\r\n  .pr-cta { overflow: hidden; }\r\n  .pr-cta-glow {\r\n    position: absolute; top: 50%; left: 50%;\r\n    transform: translate(-50%,-50%);\r\n    width: 700px; height: 300px;\r\n    background: radial-gradient(ellipse, rgba(212,175,55,.07) 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n  .pr-cta-inner {\r\n    position: relative; z-index: 1;\r\n    max-width: 680px; margin: 0 auto; text-align: center;\r\n  }\r\n  .pr-cta h2 {\r\n    font-family: var(--serif);\r\n    font-size: clamp(32px, 5vw, 64px);\r\n    font-weight: 300; color: var(--white); line-height: 1.1;\r\n    margin-bottom: 28px;\r\n  }\r\n  .pr-cta h2 em { font-style: italic; color: var(--gold); }\r\n  .pr-cta p {\r\n    font-size: clamp(14px,1.6vw,16px); font-weight: 300;\r\n    line-height: 1.9; color: var(--muted); margin-bottom: 20px;\r\n  }\r\n  .pr-cta-closing {\r\n    font-family: var(--serif);\r\n    font-size: clamp(18px, 2.5vw, 26px);\r\n    font-weight: 300; font-style: italic;\r\n    display: block; margin-top: 36px;\r\n  }\r\n  .pr-cta-bar {\r\n    display: flex; align-items: center; justify-content: center;\r\n    gap: 12px; margin-top: 44px;\r\n  }\r\n  .pr-cta-bar::before, .pr-cta-bar::after {\r\n    content: ''; flex: 0 0 80px; height: 1px;\r\n    background: var(--gold-border);\r\n  }\r\n  .pr-cta-bar-diamond {\r\n    width: 8px; height: 8px;\r\n    border: 1px solid var(--gold);\r\n    transform: rotate(45deg); background: var(--gold-dim);\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  @media (max-width: 1024px) {\r\n    .pr-wrap { padding: 0 32px; }\r\n    .pr-cols { gap: 48px; }\r\n    .pr-grid-4 { grid-template-columns: repeat(2,1fr); }\r\n    .pr-grid-5 { grid-template-columns: repeat(2,1fr); }\r\n    .pr-grid-5-bottom { max-width: 100%; grid-template-columns: repeat(2,1fr); }\r\n    .pr-gallery { height: 420px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .pr-section { padding: 64px 0; }\r\n    .pr-wrap { padding: 0 20px; }\r\n    .pr-cols { grid-template-columns: 1fr !important; gap: 36px; }\r\n    .pr-cols .img-frame { order: 2; }\r\n    .pr-cols .pr-text-block { order: 1; }\r\n    .pr-cols .pr-gallery { order: 2; }\r\n    .img-frame img { min-height: 260px; max-height: 340px; }\r\n    .pr-hero { padding: 90px 20px; min-height: auto; }\r\n    .eyebrow-bar::before, .eyebrow-bar::after { width: 0 !important; }\r\n    .eyebrow-bar.bar-open::before, .eyebrow-bar.bar-open::after { width: 20px !important; }\r\n    .pr-grid-4 { grid-template-columns: repeat(2,1fr); gap: 14px; }\r\n    .pr-grid-5 { grid-template-columns: repeat(2,1fr); gap: 14px; }\r\n    .pr-grid-5-bottom { max-width: 100%; grid-template-columns: 1fr; }\r\n    .pr-gallery { grid-template-columns: 1fr; grid-template-rows: 220px 160px 160px; height: auto; }\r\n    .pr-gallery-main { grid-row: auto; }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .pr-section { padding: 52px 0; }\r\n    .pr-wrap { padding: 0 16px; }\r\n    .pr-grid-4 { grid-template-columns: 1fr; gap: 12px; }\r\n    .pr-grid-5 { grid-template-columns: 1fr; gap: 12px; }\r\n    .pr-grid-5-bottom { grid-template-columns: 1fr; }\r\n    .pr-card { padding: 26px 20px; }\r\n    .pr-cta-bar::before, .pr-cta-bar::after { flex: 0 0 36px; }\r\n  }\r\n<\/style>\r\n\r\n<!-- \u2550\u2550 CURSOR \u2550\u2550 -->\r\n<div id=\"pr-cursor-dot\"><\/div>\r\n<div id=\"pr-cursor-ring\"><\/div>\r\n<!-- \u2550\u2550 SCROLL BAR \u2550\u2550 -->\r\n<div id=\"pr-scroll-bar\"><\/div>\r\n\r\n<div class=\"pr-breakout\">\r\n<div class=\"pr-grain\"><\/div>\r\n<div class=\"pr-page\" id=\"pr-page\">\r\n\r\n  <!-- \u2550\u2550 S1: HERO \u2550\u2550 -->\r\n  <section class=\"pr-hero\">\r\n    <div class=\"pr-hero-bg\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6d349d87?w=1600&q=80\" alt=\"Luxury bathroom interior\" loading=\"lazy\"\/>\r\n    <\/div>\r\n    <div class=\"pr-hero-grid\"><\/div>\r\n    <div class=\"pr-hero-glow\"><\/div>\r\n    <div class=\"pr-hero-inner\">\r\n      <div class=\"eyebrow-bar\" id=\"pr-hero-eyebrow\"><span>Signature Reflections<\/span><\/div>\r\n      <h1 class=\"h-reveal\" id=\"pr-hero-h1\">\r\n        <span class=\"h-line\"><span class=\"h-line-inner\">Project<\/span><\/span>\r\n        <span class=\"h-line\"><span class=\"h-line-inner\"><em>Reflection<\/em><\/span><\/span>\r\n      <\/h1>\r\n      <p class=\"pr-hero-sub pr-sr d2\">Planning, inspiration, and strategy for successful bathroom remodeling projects.<\/p>\r\n      <div class=\"pulse-dots pr-sr d3\"><span><\/span><span><\/span><span><\/span><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550 MARQUEE 1 \u2550\u2550 -->\r\n  <div class=\"pr-marquee\">\r\n    <div class=\"pr-marquee-track\">\r\n      <span class=\"pr-m-item\">Project Reflection<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Planning &amp; Inspiration<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Signature Reflections<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Contractor Tools<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Design Strategy<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Bathroom Remodeling<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Premium Systems<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Built for Confidence<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Project Reflection<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Planning &amp; Inspiration<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Signature Reflections<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Contractor Tools<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Design Strategy<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Bathroom Remodeling<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Premium Systems<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Built for Confidence<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"gold-shimmer-line\"><\/div>\r\n\r\n  <!-- \u2550\u2550 S2: INTRODUCTION \u2550\u2550 -->\r\n  <section class=\"pr-section alt\" style=\"position:relative;\">\r\n    <span class=\"sec-ghost\">02<\/span>\r\n    <div class=\"pr-wrap\">\r\n      <div class=\"pr-cols\">\r\n\r\n        <div class=\"pr-text-block anim-left\">\r\n          <div class=\"ov-extend\"><span class=\"ov-extend-text\">Introduction<\/span><\/div>\r\n          <div class=\"rule-draw\"><\/div>\r\n          <h2 class=\"h-reveal\">\r\n            <span class=\"h-line\"><span class=\"h-line-inner\">Where Every<\/span><\/span>\r\n            <span class=\"h-line\"><span class=\"h-line-inner\"><em>Project Begins<\/em><\/span><\/span>\r\n          <\/h2>\r\n          <div class=\"body-reveal pr-sr d2\">\r\n            <span class=\"br-line\">Every successful remodel starts with a clear vision and a solid plan. Project Reflection is our dedicated planning and inspiration hub \u2014 designed to help contractors and homeowners move forward with confidence, clarity, and creativity.<\/span>\r\n            <span class=\"br-line\">Whether you're preparing for your next bathroom transformation or looking for fresh ideas to elevate your offerings, this guide brings together expert insight, practical planning tools, and design inspiration all in one place.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"img-frame anim-right\">\r\n          <div class=\"if-curtain\"><\/div>\r\n          <div class=\"if-bl\"><\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1588854337221-4cf9fa96059c?w=800&q=80\" alt=\"Modern bathroom showroom\" loading=\"lazy\"\/>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550 S3: PLAN WITH PURPOSE \u2014 5 CARDS \u2550\u2550 -->\r\n  <section class=\"pr-section\" style=\"position:relative;\">\r\n    <span class=\"sec-ghost\">03<\/span>\r\n    <div class=\"pr-wrap\">\r\n\r\n      <div class=\"pr-cards-header\">\r\n        <div class=\"ov-extend center\"><span class=\"ov-extend-text\">Planning Framework<\/span><\/div>\r\n        <div class=\"rule-draw center\"><\/div>\r\n        <h2 class=\"h-reveal\">\r\n          <span class=\"h-line\"><span class=\"h-line-inner\">Plan with <em>Purpose<\/em><\/span><\/span>\r\n        <\/h2>\r\n        <p class=\"pr-sr d2\">Five essential steps to guide your project from concept to completion.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"pr-grid-5\" id=\"pr-cards-5\">\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">01<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Define Your Vision<\/h3>\r\n          <p>Define your design goals and functional priorities before the project begins.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">02<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Choose the Right Systems<\/h3>\r\n          <p>Select bath systems, shower bases, and surrounds that deliver durability and performance.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">03<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Optimize Layouts<\/h3>\r\n          <p>Plan layouts that maximize space, usability, and installation efficiency.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"pr-grid-5-bottom\" id=\"pr-cards-5b\">\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">04<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Select Finishes<\/h3>\r\n          <p>Choose materials and finishes that balance beauty with long-term durability.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">05<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 11l3 3L22 4\"\/><path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Prepare for Installation<\/h3>\r\n          <p>Ensure your project is organized and ready before installation day.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550 S4: DESIGN INSPIRATION \u2550\u2550 -->\r\n  <section class=\"pr-section alt\" style=\"position:relative;\">\r\n    <span class=\"sec-ghost\">04<\/span>\r\n    <div class=\"pr-wrap\">\r\n      <div class=\"pr-cols\">\r\n\r\n        <div class=\"pr-gallery\" id=\"pr-gallery\">\r\n          <div class=\"pr-gallery-item pr-gallery-main\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507652313519-d4e9174996dd?w=800&q=80\" alt=\"Luxury bathroom design\" loading=\"lazy\"\/>\r\n          <\/div>\r\n          <div class=\"pr-gallery-item\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584622650111-993a426fbf0a?w=600&q=80\" alt=\"Minimalist bathroom\" loading=\"lazy\"\/>\r\n          <\/div>\r\n          <div class=\"pr-gallery-item\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552321554-5fefe8c9ef14?w=600&q=80\" alt=\"Contemporary shower\" loading=\"lazy\"\/>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pr-text-block anim-right\">\r\n          <div class=\"ov-extend\"><span class=\"ov-extend-text\">Design Inspiration<\/span><\/div>\r\n          <div class=\"rule-draw\"><\/div>\r\n          <h2 class=\"h-reveal\">\r\n            <span class=\"h-line\"><span class=\"h-line-inner\">Beyond<\/span><\/span>\r\n            <span class=\"h-line\"><span class=\"h-line-inner\"><em>Appearance<\/em><\/span><\/span>\r\n          <\/h2>\r\n          <div class=\"body-reveal pr-sr d2\">\r\n            <span class=\"br-line\">Great design isn't just about appearance \u2014 it's about performance, longevity, and everyday usability. Explore modern styles, timeless finishes, and practical solutions that meet real-world demands.<\/span>\r\n            <span class=\"br-line\">From clean, contemporary aesthetics to functional safety features, Project Reflection helps you discover combinations that elevate both value and visual appeal.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550 S5: BUILT FOR CONTRACTORS \u2014 4 CARDS \u2550\u2550 -->\r\n  <section class=\"pr-section\" style=\"position:relative;\">\r\n    <span class=\"sec-ghost\">05<\/span>\r\n    <div class=\"pr-wrap\">\r\n\r\n      <div class=\"pr-cards-header\">\r\n        <div class=\"ov-extend center\"><span class=\"ov-extend-text\">Built for Contractors<\/span><\/div>\r\n        <div class=\"rule-draw center\"><\/div>\r\n        <h2 class=\"h-reveal\">\r\n          <span class=\"h-line\"><span class=\"h-line-inner\">Tools That Drive<\/span><\/span>\r\n          <span class=\"h-line\"><span class=\"h-line-inner\"><em>Better Results<\/em><\/span><\/span>\r\n        <\/h2>\r\n        <p class=\"pr-sr d2\">Purpose-built resources that help contractors deliver with confidence on every project.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"pr-grid-4\" id=\"pr-cards-4\">\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">01<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Stronger Presentations<\/h3>\r\n          <p>Help contractors guide homeowners through confident product decisions.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">02<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"\/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Structured Planning<\/h3>\r\n          <p>Organize project details before installation begins.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">03<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Better Communication<\/h3>\r\n          <p>Clear planning improves collaboration between contractors and homeowners.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"pr-card\">\r\n          <span class=\"pr-card-num\">04<\/span>\r\n          <div class=\"pr-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Stronger Results<\/h3>\r\n          <p>Well-planned projects lead to smoother installations and satisfied clients.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- \u2550\u2550 MARQUEE 2 (reverse) \u2550\u2550 -->\r\n  <div class=\"pr-marquee\">\r\n    <div class=\"pr-marquee-track\" style=\"animation-direction:reverse;\">\r\n      <span class=\"pr-m-item\">Define Your Vision<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Choose Right Systems<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Optimize Layouts<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Select Finishes<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Prepare for Installation<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Stronger Results<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Better Communication<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Project Reflection<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Define Your Vision<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Choose Right Systems<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Optimize Layouts<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Select Finishes<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Prepare for Installation<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Stronger Results<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Better Communication<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n      <span class=\"pr-m-item\">Project Reflection<\/span><span class=\"pr-m-dot\">\u2726<\/span>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"gold-shimmer-line\"><\/div>\r\n\r\n  <!-- \u2550\u2550 S6: CTA \u2550\u2550 -->\r\n  <section class=\"pr-section alt pr-cta\" style=\"position:relative;\">\r\n    <div class=\"pr-cta-glow\"><\/div>\r\n    <div class=\"pr-wrap\">\r\n      <div class=\"pr-cta-inner\">\r\n        <div class=\"ov-extend center\"><span class=\"ov-extend-text\">Signature Reflections<\/span><\/div>\r\n        <div class=\"rule-draw center\"><\/div>\r\n        <h2 class=\"h-reveal\">\r\n          <span class=\"h-line\"><span class=\"h-line-inner\">Make Every<\/span><\/span>\r\n          <span class=\"h-line\"><span class=\"h-line-inner\"><em>Step Count<\/em><\/span><\/span>\r\n        <\/h2>\r\n        <div class=\"body-reveal pr-sr d2\">\r\n          <span class=\"br-line\">At Signature Reflections, we believe preparation is power. Project Reflection was created to help you stay ahead, stay organized, and stay inspired \u2014 so every project you take on reflects quality, confidence, and professionalism from start to finish.<\/span>\r\n        <\/div>\r\n        <span class=\"pr-cta-closing shimmer-text pr-sr d3\">Your next great project starts here.<\/span>\r\n        <div class=\"pr-cta-bar pr-sr d4\">\r\n          <div class=\"pr-cta-bar-diamond\"><\/div>\r\n          <div class=\"pr-cta-bar-diamond\"><\/div>\r\n          <div class=\"pr-cta-bar-diamond\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div><!-- \/.pr-page -->\r\n<\/div><!-- \/.pr-breakout -->\r\n\r\n<script>\r\n(function(){\r\n\r\n  \/* \u2500\u2500 SCROLL PROGRESS BAR \u2500\u2500 *\/\r\n  var bar = document.getElementById('pr-scroll-bar');\r\n  if(bar){\r\n    window.addEventListener('scroll', function(){\r\n      var 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  \/* \u2500\u2500 CUSTOM CURSOR \u2500\u2500 *\/\r\n  var dot  = document.getElementById('pr-cursor-dot');\r\n  var ring = document.getElementById('pr-cursor-ring');\r\n  var page = document.getElementById('pr-page');\r\n  if(dot && ring && page && !window.matchMedia('(hover:none)').matches){\r\n    var mx=-200, my=-200, rx=-200, ry=-200;\r\n    document.addEventListener('mousemove', function(e){\r\n      mx = e.clientX; my = e.clientY;\r\n      dot.style.left = mx+'px'; dot.style.top = my+'px';\r\n    });\r\n    (function loop(){\r\n      rx += (mx-rx) * .14; ry += (my-ry) * .14;\r\n      ring.style.left = rx+'px'; ring.style.top = ry+'px';\r\n      requestAnimationFrame(loop);\r\n    })();\r\n    document.querySelectorAll(\r\n      '.pr-breakout a, .pr-breakout button, .pr-card, .img-frame, .pr-gallery-item'\r\n    ).forEach(function(el){\r\n      el.addEventListener('mouseenter', function(){ page.classList.add('cur-hover'); });\r\n      el.addEventListener('mouseleave', function(){ page.classList.remove('cur-hover'); });\r\n    });\r\n    document.addEventListener('mousedown', function(){ page.classList.add('cur-click'); });\r\n    document.addEventListener('mouseup',   function(){ page.classList.remove('cur-click'); });\r\n    document.addEventListener('mouseleave',function(){ dot.style.opacity = ring.style.opacity = '0'; });\r\n    document.addEventListener('mouseenter',function(){ dot.style.opacity = ring.style.opacity = '1'; });\r\n  } else if(dot && ring){\r\n    dot.style.display = ring.style.display = 'none';\r\n  }\r\n\r\n  \/* \u2500\u2500 HERO IMMEDIATE TRIGGERS \u2500\u2500 *\/\r\n  setTimeout(function(){\r\n    var eb = document.getElementById('pr-hero-eyebrow');\r\n    if(eb) eb.classList.add('bar-open');\r\n    var h1 = document.getElementById('pr-hero-h1');\r\n    if(h1) setTimeout(function(){ h1.classList.add('hr-on'); }, 280);\r\n  }, 150);\r\n\r\n  \/* \u2500\u2500 MASTER INTERSECTION OBSERVER \u2500\u2500 *\/\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e){\r\n      if(!e.isIntersecting) return;\r\n      var el = e.target;\r\n      if(el.classList.contains('ov-extend'))   el.classList.add('oe-on');\r\n      if(el.classList.contains('rule-draw'))   el.classList.add('rd-on');\r\n      if(el.classList.contains('h-reveal'))    el.classList.add('hr-on');\r\n      if(el.classList.contains('img-frame'))   el.classList.add('frm-on');\r\n      if(el.classList.contains('pr-sr'))       el.classList.add('up');\r\n      if(el.classList.contains('anim-left'))   el.classList.add('revealed');\r\n      if(el.classList.contains('anim-right'))  el.classList.add('revealed');\r\n      if(el.classList.contains('body-reveal')) el.classList.add('br-on');\r\n      io.unobserve(el);\r\n    });\r\n  },{threshold: 0.12, rootMargin: '0px 0px -30px 0px'});\r\n\r\n  document.querySelectorAll(\r\n    '.ov-extend, .rule-draw, .h-reveal, .img-frame, .pr-sr, .anim-left, .anim-right, .body-reveal'\r\n  ).forEach(function(el){ io.observe(el); });\r\n\r\n  \/* \u2500\u2500 CARD STAGGER \u2014 5 cards top row \u2500\u2500 *\/\r\n  var c5 = document.getElementById('pr-cards-5');\r\n  if(c5){\r\n    new IntersectionObserver(function(entries){\r\n      entries.forEach(function(e){\r\n        if(e.isIntersecting){\r\n          c5.querySelectorAll('.pr-card').forEach(function(c,i){\r\n            setTimeout(function(){ c.classList.add('ac-on'); }, 120 + i*100);\r\n          });\r\n        }\r\n      });\r\n    },{threshold:0.1}).observe(c5);\r\n  }\r\n\r\n  \/* \u2500\u2500 CARD STAGGER \u2014 5 cards bottom row \u2500\u2500 *\/\r\n  var c5b = document.getElementById('pr-cards-5b');\r\n  if(c5b){\r\n    new IntersectionObserver(function(entries){\r\n      entries.forEach(function(e){\r\n        if(e.isIntersecting){\r\n          c5b.querySelectorAll('.pr-card').forEach(function(c,i){\r\n            setTimeout(function(){ c.classList.add('ac-on'); }, 120 + i*100);\r\n          });\r\n        }\r\n      });\r\n    },{threshold:0.1}).observe(c5b);\r\n  }\r\n\r\n  \/* \u2500\u2500 CARD STAGGER \u2014 4 cards \u2500\u2500 *\/\r\n  var c4 = document.getElementById('pr-cards-4');\r\n  if(c4){\r\n    new IntersectionObserver(function(entries){\r\n      entries.forEach(function(e){\r\n        if(e.isIntersecting){\r\n          c4.querySelectorAll('.pr-card').forEach(function(c,i){\r\n            setTimeout(function(){ c.classList.add('ac-on'); }, 120 + i*100);\r\n          });\r\n        }\r\n      });\r\n    },{threshold:0.1}).observe(c4);\r\n  }\r\n\r\n  \/* \u2500\u2500 GALLERY STAGGER \u2500\u2500 *\/\r\n  var gallery = document.getElementById('pr-gallery');\r\n  if(gallery){\r\n    new IntersectionObserver(function(entries){\r\n      entries.forEach(function(e){\r\n        if(e.isIntersecting){\r\n          gallery.querySelectorAll('.pr-gallery-item').forEach(function(item,i){\r\n            setTimeout(function(){ item.classList.add('gi-on'); }, 150 + i*130);\r\n          });\r\n        }\r\n      });\r\n    },{threshold:0.1}).observe(gallery);\r\n  }\r\n\r\n})();\r\n<\/script>\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 Project Reflection Planning, inspiration, and strategy for successful bathroom remodeling projects. Project Reflection\u2726 Planning &amp; Inspiration\u2726 Signature Reflections\u2726 Contractor Tools\u2726 Design Strategy\u2726 Bathroom Remodeling\u2726 Premium Systems\u2726 Built for Confidence\u2726 Project Reflection\u2726 Planning &amp; Inspiration\u2726 Signature Reflections\u2726 Contractor Tools\u2726 Design Strategy\u2726 Bathroom Remodeling\u2726 Premium Systems\u2726 Built for Confidence\u2726 02 Introduction Where Every Project Begins [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1465","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages\/1465","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=1465"}],"version-history":[{"count":7,"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages\/1465\/revisions"}],"predecessor-version":[{"id":1514,"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/pages\/1465\/revisions\/1514"}],"wp:attachment":[{"href":"https:\/\/signaturereflectionsbath.com\/index.php\/wp-json\/wp\/v2\/media?parent=1465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}