{"id":7,"date":"2026-06-11T08:37:46","date_gmt":"2026-06-11T08:37:46","guid":{"rendered":"https:\/\/stillalondon.com\/?page_id=7"},"modified":"2026-06-11T08:47:16","modified_gmt":"2026-06-11T08:47:16","slug":"stillalondon","status":"publish","type":"page","link":"https:\/\/stillalondon.com\/","title":{"rendered":"stillalondon"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nStilla \u2014 Premium Showercare for Hard-Water Cities<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Google Analytics (replace G-XXXXXXXXXX with real ID) -->\r\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-XXXXXXXXXX\"><\/script>\r\n<script>\r\n window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n gtag('config', 'G-XXXXXXXXXX');\r\n function fireEvent(name, params) {\r\n if(typeof gtag !== 'undefined') gtag('event', name, params || {});\r\n }\r\n<\/script>\r\n\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --ivory: #F7F4EE;\r\n --beige: #EDE8DF;\r\n --warm-grey: #C8C4BB;\r\n --sage: #8A9E88;\r\n --deep-sage: #4A6148;\r\n --charcoal: #2C2C2A;\r\n --muted: #6B6B67;\r\n --dark: #1A1916;\r\n --serif: 'Cormorant Garamond', Georgia, serif;\r\n --sans: 'DM Sans', sans-serif;\r\n --step-0: clamp(1rem, 1.1vw, 1.15rem);\r\n --step-1: clamp(1.25rem,1.8vw, 1.6rem);\r\n --step-2: clamp(1.7rem, 2.8vw, 2.8rem);\r\n --step-3: clamp(2.2rem, 4vw, 4rem);\r\n --step-4: clamp(2.8rem, 5.5vw, 6rem);\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\nhtml { scroll-behavior: smooth; font-size: 17px; }\r\nbody {\r\n font-family: var(--sans);\r\n background: var(--ivory);\r\n color: var(--charcoal);\r\n line-height: 1.72;\r\n overflow-x: hidden;\r\n cursor: none;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n\/* \u2500\u2500 CURSOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.cursor {\r\n position: fixed; width: 9px; height: 9px;\r\n background: var(--deep-sage); border-radius: 50%;\r\n pointer-events: none; z-index: 9999;\r\n transform: translate(-50%,-50%);\r\n transition: transform .1s, width .3s, height .3s;\r\n mix-blend-mode: multiply;\r\n}\r\n.cursor-ring {\r\n position: fixed; width: 36px; height: 36px;\r\n border: 1px solid var(--deep-sage); border-radius: 50%;\r\n pointer-events: none; z-index: 9998;\r\n transform: translate(-50%,-50%);\r\n transition: transform .2s ease, width .3s, height .3s, opacity .3s;\r\n opacity: .45;\r\n}\r\n@media(max-width:900px){\r\n .cursor, .cursor-ring { display:none !important; }\r\n body { cursor:auto; }\r\n a, button { cursor:pointer; }\r\n}\r\n\r\n\/* \u2500\u2500 NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\nnav {\r\n position: fixed; top:0; left:0; right:0; z-index:200;\r\n padding: 26px 6%;\r\n display: flex; align-items: center; justify-content: space-between;\r\n transition: background .4s, backdrop-filter .4s, padding .3s;\r\n}\r\nnav.scrolled {\r\n background: rgba(247,244,238,.92);\r\n backdrop-filter: blur(18px);\r\n padding: 16px 6%;\r\n border-bottom: 1px solid var(--warm-grey);\r\n}\r\n.nav-logo {\r\n font-family: var(--serif);\r\n font-size: 1.65rem; font-weight: 300; letter-spacing: .14em;\r\n color: var(--charcoal); text-decoration: none;\r\n display: flex; align-items: center; gap: 10px;\r\n}\r\n.nav-logo-mark {\r\n width: 28px; height: 28px;\r\n border: 1.5px solid var(--deep-sage); border-radius: 50%;\r\n display: grid; place-items: center;\r\n}\r\n.nav-logo-mark::after {\r\n content: ''; width: 6px; height: 6px;\r\n background: var(--deep-sage); border-radius: 50%;\r\n}\r\n.nav-links { display:flex; gap:36px; list-style:none; }\r\n.nav-links a {\r\n font-size: .75rem; font-weight: 500; letter-spacing: .1em;\r\n color: var(--muted); text-decoration: none; text-transform: uppercase;\r\n transition: color .2s;\r\n}\r\n.nav-links a:hover { color: var(--deep-sage); }\r\n.nav-cta {\r\n background: var(--deep-sage) !important;\r\n color: #fff !important; padding: 11px 26px;\r\n border-radius: 2px; font-size: .74rem !important;\r\n letter-spacing: .1em !important; transition: background .2s !important;\r\n}\r\n.nav-cta:hover { background: var(--charcoal) !important; }\r\n@media(max-width:800px){ .nav-links { display:none; } }\r\n\r\n\/* \u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.btn-primary {\r\n display: inline-block;\r\n background: var(--deep-sage); color: #fff;\r\n font-family: var(--sans); font-size: .82rem; font-weight: 500;\r\n letter-spacing: .12em; text-transform: uppercase; text-decoration: none;\r\n padding: 18px 44px; border: none; cursor: pointer;\r\n transition: background .25s, transform .2s;\r\n}\r\n.btn-primary:hover { background: var(--charcoal); transform: translateY(-2px); }\r\n\r\n.btn-secondary {\r\n display: inline-block;\r\n background: transparent; color: var(--charcoal);\r\n font-family: var(--sans); font-size: .82rem; font-weight: 500;\r\n letter-spacing: .12em; text-transform: uppercase; text-decoration: none;\r\n padding: 17px 44px; border: 1.5px solid var(--charcoal); cursor: pointer;\r\n transition: background .25s, color .25s;\r\n}\r\n.btn-secondary:hover { background: var(--charcoal); color: #fff; }\r\n\r\n.btn-light {\r\n display: inline-block;\r\n background: var(--ivory); color: var(--charcoal);\r\n font-family: var(--sans); font-size: .82rem; font-weight: 500;\r\n letter-spacing: .12em; text-transform: uppercase; text-decoration: none;\r\n padding: 18px 44px; border: none; cursor: pointer;\r\n transition: background .25s, transform .2s;\r\n}\r\n.btn-light:hover { background: var(--beige); transform: translateY(-2px); }\r\n\r\n\/* \u2500\u2500 REVEAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.reveal {\r\n opacity: 0; transform: translateY(30px);\r\n transition: opacity .85s var(--ease), transform .85s var(--ease);\r\n}\r\n.reveal.visible { opacity: 1; transform: none; }\r\n.reveal-delay-1 { transition-delay: .1s; }\r\n.reveal-delay-2 { transition-delay: .2s; }\r\n.reveal-delay-3 { transition-delay: .3s; }\r\n.reveal-delay-4 { transition-delay: .4s; }\r\n\r\n\/* \u2500\u2500 SECTION SHARED \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.section-label {\r\n font-family: var(--sans); font-size: .72rem; font-weight: 500;\r\n letter-spacing: .22em; text-transform: uppercase;\r\n color: var(--sage); margin-bottom: 20px;\r\n display: flex; align-items: center; gap: 14px;\r\n}\r\n.section-label::before { content:''; width:28px; height:1px; background:var(--sage); }\r\n.section-h2 {\r\n font-family: var(--serif);\r\n font-size: var(--step-3);\r\n font-weight: 300; line-height: 1.12; letter-spacing: -.01em;\r\n color: var(--charcoal); margin-bottom: 24px;\r\n}\r\n\r\n\/* \u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#hero {\r\n position: relative; min-height: 100vh;\r\n display: flex; align-items: center; overflow: hidden;\r\n background: var(--ivory);\r\n}\r\n.hero-image-wrap {\r\n position: absolute; right: 0; top: 0;\r\n width: 54%; height: 100%;\r\n}\r\n.hero-image-wrap img {\r\n width: 100%; height: 100%;\r\n object-fit: cover; object-position: 50% 15%;\r\n filter: sepia(18%) brightness(.96) contrast(1.04);\r\n}\r\n.hero-image-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(to right, var(--ivory) 0%, var(--ivory) 8%, rgba(247,244,238,.55) 38%, transparent 68%);\r\n}\r\n.hero-content {\r\n position: relative; z-index: 2;\r\n padding: 160px 6% 110px;\r\n max-width: 700px;\r\n}\r\n.hero-eyebrow {\r\n font-size: .72rem; font-weight: 500; letter-spacing: .2em;\r\n text-transform: uppercase; color: var(--deep-sage);\r\n margin-bottom: 30px; display: flex; align-items: center; gap: 14px;\r\n}\r\n.hero-eyebrow::before { content:''; width:32px; height:1px; background:var(--deep-sage); }\r\n.hero-h1 {\r\n font-family: var(--serif);\r\n font-size: var(--step-4);\r\n font-weight: 300; line-height: 1.06; letter-spacing: -.02em;\r\n color: var(--charcoal); margin-bottom: 30px;\r\n}\r\n.hero-h1 em { font-style: italic; color: var(--deep-sage); }\r\n.hero-sub {\r\n font-size: var(--step-0); color: var(--muted);\r\n line-height: 1.8; max-width: 500px;\r\n margin-bottom: 48px; font-weight: 300;\r\n}\r\n.hero-ctas {\r\n display: flex; gap: 16px; flex-wrap: wrap;\r\n margin-bottom: 38px;\r\n}\r\n.hero-tag {\r\n font-size: .72rem; color: var(--muted); letter-spacing: .1em;\r\n display: flex; align-items: center; gap: 10px;\r\n}\r\n.hero-tag::before { content:''; width:18px; height:1px; background:var(--warm-grey); }\r\n\r\n.scroll-indicator span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }\r\n.scroll-indicator i { width:1px; height:52px; background:var(--deep-sage); animation: linePulse 2.5s 1.6s ease-in-out infinite; display:block; }\r\n@keyframes linePulse { 0%,100%{opacity:.25;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.12)} }\r\n@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }\r\n\r\n@media(max-width:900px){\r\n #hero { min-height:100svh; }\r\n .hero-image-wrap { width:100%; opacity:.2; }\r\n .hero-image-overlay { background:rgba(247,244,238,.55); }\r\n .hero-content { padding:130px 6% 80px; max-width:100%; }\r\n .scroll-indicator { display:none; }\r\n}\r\n\r\n\/* \u2500\u2500 MARQUEE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.marquee-wrap {\r\n background: var(--deep-sage); padding: 16px 0;\r\n overflow: hidden; white-space: nowrap;\r\n}\r\n.marquee-inner {\r\n display: inline-flex;\r\n animation: marquee 32s linear infinite;\r\n}\r\n.marquee-inner span {\r\n font-size: .73rem; font-weight: 500; letter-spacing: .22em;\r\n text-transform: uppercase; color: rgba(255,255,255,.82);\r\n padding: 0 44px;\r\n}\r\n.marquee-inner .dot { color: rgba(255,255,255,.35); padding: 0 4px; }\r\n@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }\r\n\r\n\/* \u2500\u2500 PROBLEM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#problem {\r\n background: var(--beige); padding: 140px 0;\r\n position: relative; overflow: hidden;\r\n}\r\n#problem::after {\r\n content:''; position:absolute; bottom:-80px; right:-100px;\r\n width:500px; height:500px;\r\n background: url('https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/pngtree-brown-design-background-with-water-ripple-texture-picture-image_15244992.png') center\/cover;\r\n opacity:.07; border-radius:50%; pointer-events:none; z-index:0;\r\n}\r\n.problem-inner {\r\n max-width: 1340px; margin: 0 auto; padding: 0 6%;\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 100px; align-items: center; position:relative; z-index:1;\r\n}\r\n.problem-image-col { position: relative; }\r\n.problem-image-col img {\r\n width: 100%; height: 640px;\r\n object-fit: cover; object-position: 60% 12%;\r\n filter: sepia(15%) brightness(.97) contrast(1.04);\r\n display: block;\r\n}\r\n.problem-pull-quote {\r\n position: absolute; bottom: -36px; right: -44px;\r\n background: var(--deep-sage); color: #fff;\r\n padding: 32px 36px; max-width: 260px;\r\n font-family: var(--serif); font-size: 1.15rem;\r\n font-style: italic; font-weight: 300; line-height: 1.5;\r\n}\r\n.problem-text-col {}\r\n.problem-body {\r\n font-size: var(--step-0); color: var(--muted);\r\n line-height: 1.88; margin-bottom: 28px; font-weight: 300;\r\n}\r\n.symptom-list { list-style: none; margin-bottom: 36px; }\r\n.symptom-list li {\r\n font-size: .96rem; color: var(--charcoal);\r\n padding: 14px 0; border-bottom: 1px solid var(--warm-grey);\r\n display: flex; align-items: center; gap: 16px;\r\n opacity: 0; transform: translateX(18px);\r\n transition: opacity .5s ease, transform .5s ease; font-weight: 300;\r\n}\r\n.symptom-list li.show { opacity: 1; transform: none; }\r\n.symptom-list li::before { content:'\u2014'; color:var(--sage); font-size:.85rem; }\r\n.problem-close {\r\n font-family: var(--serif); font-size: 1.15rem;\r\n font-style: italic; color: var(--deep-sage); font-weight: 300;\r\n}\r\n@media(max-width:900px){\r\n .problem-inner { grid-template-columns:1fr; gap:60px; }\r\n .problem-pull-quote { right:16px; bottom:-24px; }\r\n .problem-image-col img { height:420px; }\r\n}\r\n\r\n\/* \u2500\u2500 SOLUTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#solution { background: var(--ivory); padding: 140px 0; }\r\n.solution-inner { max-width: 1340px; margin: 0 auto; padding: 0 6%; }\r\n.solution-header { text-align: center; max-width: 680px; margin: 0 auto 80px; }\r\n.solution-header .section-label { justify-content: center; }\r\n.solution-header .section-h2 { font-size: var(--step-3); }\r\n\r\n.solution-images {\r\n display: grid; grid-template-columns: 1fr 1.3fr 1fr;\r\n gap: 20px; align-items: end; margin-bottom: 80px;\r\n}\r\n.solution-img-wrap { overflow: hidden; }\r\n.solution-img-wrap:nth-child(1) { padding-top: 48px; }\r\n.solution-img-wrap:nth-child(3) { padding-top: 88px; }\r\n.solution-img-wrap img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n filter: sepia(10%) brightness(.98);\r\n transition: transform .65s ease; display: block;\r\n}\r\n.solution-img-wrap:nth-child(1) img { height: 400px; }\r\n.solution-img-wrap:nth-child(2) img { height: 540px; }\r\n.solution-img-wrap:nth-child(3) img { height: 340px; }\r\n.solution-img-wrap:hover img { transform: scale(1.04); }\r\n\r\n.solution-text { text-align: center; max-width: 680px; margin: 0 auto; }\r\n.solution-text p { font-size: var(--step-0); color: var(--muted); line-height:1.88; margin-bottom:22px; font-weight:300; }\r\n.solution-tagline { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--charcoal); margin-top:36px; font-weight:300; }\r\n@media(max-width:900px){\r\n .solution-images { grid-template-columns:1fr; gap:14px; }\r\n .solution-img-wrap:nth-child(n){ padding-top:0; }\r\n .solution-img-wrap img { height: 300px !important; }\r\n}\r\n\r\n\/* \u2500\u2500 HOW IT WORKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#howitworks {\r\n background: var(--dark); padding: 140px 0;\r\n position: relative; overflow: hidden;\r\n}\r\n#howitworks::before {\r\n content:''; position:absolute; inset:0;\r\n background: url('https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/pngtree-brown-design-background-with-water-ripple-texture-picture-image_15244992.png') center\/cover;\r\n opacity:.1; pointer-events:none;\r\n}\r\n.hiw-watermark {\r\n position: absolute; font-family: var(--serif);\r\n font-size: clamp(140px,20vw,300px); font-weight:300;\r\n color: rgba(255,255,255,.025); top:50%; left:50%;\r\n transform: translate(-50%,-50%); white-space:nowrap;\r\n pointer-events:none; user-select:none; letter-spacing:.05em;\r\n}\r\n.hiw-inner { max-width:1340px; margin:0 auto; padding:0 6%; position:relative; z-index:1; }\r\n.hiw-header { text-align:center; margin-bottom:88px; }\r\n.hiw-header .section-label { justify-content:center; color:rgba(255,255,255,.38); }\r\n.hiw-header .section-label::before { background:rgba(255,255,255,.18); }\r\n.hiw-header .section-h2 { color:#fff; font-size:var(--step-3); }\r\n.hiw-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }\r\n.hiw-card {\r\n padding: 64px 52px; background: rgba(26,25,22,.6);\r\n border: 1px solid rgba(255,255,255,.08); backdrop-filter:blur(4px);\r\n transition: background .3s, border-color .3s; position:relative;\r\n}\r\n.hiw-card:hover { background:rgba(26,25,22,.78); border-color:rgba(138,158,136,.4); }\r\n.hiw-number {\r\n font-family: var(--serif); font-size: 3.5rem; font-weight:300;\r\n color: rgba(138,158,136,.22); line-height:1; margin-bottom:28px;\r\n transition: color .3s;\r\n}\r\n.hiw-card:hover .hiw-number { color:rgba(138,158,136,.48); }\r\n.hiw-icon {\r\n width:48px; height:48px; border:1px solid rgba(138,158,136,.45);\r\n border-radius:50%; display:flex; align-items:center; justify-content:center;\r\n margin-bottom:28px; transition: background .3s, border-color .3s;\r\n}\r\n.hiw-icon svg { width:22px; height:22px; stroke:var(--sage); fill:none; stroke-width:1.2; transition: stroke .3s; }\r\n.hiw-card:hover .hiw-icon { background:var(--deep-sage); border-color:var(--deep-sage); }\r\n.hiw-card:hover .hiw-icon svg { stroke:#fff; }\r\n.hiw-title { font-family:var(--serif); font-size:2.2rem; font-weight:300; color:#fff; margin-bottom:18px; }\r\n.hiw-desc { font-size:.94rem; color:rgba(255,255,255,.6); line-height:1.88; font-weight:300; }\r\n@media(max-width:900px){ .hiw-cards { grid-template-columns:1fr; } .hiw-card { padding:44px 40px; } }\r\n\r\n\/* \u2500\u2500 BLOOMS \u2500\u2500 original desktop layout + mobile compact accordion (only on mobile) *\/\r\n#blooms { background: var(--beige); padding: 140px 0; }\r\n.blooms-inner { max-width:1340px; margin:0 auto; padding:0 6%; }\r\n.blooms-header { text-align:center; max-width:600px; margin:0 auto 80px; }\r\n.blooms-header .section-label { justify-content:center; }\r\n.blooms-header p { font-size:var(--step-0); color:var(--muted); font-weight:300; margin-top:18px; }\r\n.bloom-cards {\r\n display: grid; grid-template-columns: repeat(4,1fr);\r\n gap: 24px;\r\n}\r\n.bloom-card {\r\n background: var(--ivory); padding: 44px 36px;\r\n transition: transform .3s, box-shadow .3s;\r\n position: relative; overflow: hidden;\r\n}\r\n.bloom-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(44,44,42,.09); }\r\n.bloom-card-stripe { position:absolute; top:0; left:0; right:0; height:4px; }\r\n.bloom-dot { width:40px; height:40px; border-radius:50%; margin-bottom:26px; flex-shrink:0; }\r\n.bloom-name { font-family:var(--serif); font-size:2rem; font-weight:300; color:var(--charcoal); margin-bottom:10px; letter-spacing:.02em; }\r\n.bloom-tagline { font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); margin-bottom:18px; }\r\n.bloom-desc { font-size:.9rem; color:var(--muted); line-height:1.78; margin-bottom:24px; font-weight:300; }\r\n.bloom-ingredients { font-size:.78rem; color:var(--muted); letter-spacing:.03em; margin-bottom:20px; padding-top:18px; border-top:1px solid var(--warm-grey); line-height:1.65; font-weight:300; }\r\n.bloom-ingredients strong { display:block; font-weight:500; color:var(--charcoal); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }\r\n.bloom-mood-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }\r\n.bloom-mood-tag { font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:5px 12px; border:1px solid var(--warm-grey); }\r\n\r\n\/* \u2500\u2500 MOBILE COMPACT BLOOM CARDS (only \u2264768px) \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .bloom-cards { grid-template-columns: 1fr; gap: 16px; }\r\n .bloom-card {\r\n padding: 24px 20px;\r\n cursor: pointer;\r\n }\r\n \/* Hide detailed content by default *\/\r\n .bloom-card .bloom-desc,\r\n .bloom-card .bloom-ingredients,\r\n .bloom-card .bloom-mood-tags {\r\n display: none;\r\n }\r\n \/* When expanded, show them *\/\r\n .bloom-card.expanded .bloom-desc,\r\n .bloom-card.expanded .bloom-ingredients,\r\n .bloom-card.expanded .bloom-mood-tags {\r\n display: block;\r\n }\r\n \/* Make the tagline more compact *\/\r\n .bloom-tagline { margin-bottom: 8px; }\r\n \/* Ensure the dot stays visible *\/\r\n .bloom-dot { width: 32px; height: 32px; margin-bottom: 16px; }\r\n .bloom-name { font-size: 1.6rem; }\r\n}\r\n\r\n\/* \u2500\u2500 BLOOM FINDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#bloomfinder { background: var(--beige); padding: 140px 0; }\r\n.finder-inner { max-width: 840px; margin:0 auto; padding:0 6%; }\r\n@media(max-width:600px){\r\n #bloomfinder { padding: 80px 0; }\r\n .finder-inner { padding: 0 4%; }\r\n .quiz-wrap { padding: 28px 16px; }\r\n .quiz-option { padding: 14px 14px; font-size: .88rem; }\r\n}\r\n.finder-header { text-align:center; margin-bottom:72px; }\r\n.finder-header .section-label { justify-content:center; }\r\n.finder-header p { font-size:var(--step-0); color:var(--muted); font-weight:300; max-width:520px; margin:18px auto 0; }\r\n\r\n.quiz-wrap {\r\n background: var(--ivory); padding: 72px 80px;\r\n border: 1px solid var(--warm-grey); position:relative;\r\n}\r\n.quiz-progress { display:flex; align-items:center; gap:18px; margin-bottom:58px; }\r\n.quiz-progress-track { flex:1; height:2px; background:var(--warm-grey); border-radius:2px; }\r\n.quiz-progress-fill { height:100%; background:var(--deep-sage); transition:width .5s var(--ease); border-radius:2px; }\r\n.quiz-step-label { font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--deep-sage); white-space:nowrap; }\r\n\r\n.quiz-question { display:none; }\r\n.quiz-question.active { display:block; animation:slideIn .35s var(--ease); }\r\n@keyframes slideIn { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} }\r\n\r\n.quiz-q-text {\r\n font-family: var(--serif);\r\n font-size: var(--step-2);\r\n font-weight:300; color:var(--charcoal);\r\n margin-bottom:44px; line-height:1.22; letter-spacing:-.01em;\r\n}\r\n.quiz-options { display:flex; flex-direction:column; gap:10px; width:100%; }\r\n.quiz-option {\r\n display:flex; align-items:center; gap:16px;\r\n width:100%; max-width:100%; box-sizing:border-box;\r\n padding:18px 24px;\r\n background:#fff; border:1.5px solid var(--warm-grey);\r\n font-family:var(--sans); font-size:.96rem; color:var(--charcoal);\r\n text-align:left; cursor:pointer;\r\n transition:all .2s ease; font-weight:300;\r\n white-space:normal; word-wrap:break-word;\r\n overflow-wrap:break-word; word-break:normal;\r\n line-height:1.55; min-height:0;\r\n}\r\n.quiz-option::before {\r\n content:''; display:block;\r\n width:20px; height:20px; min-width:20px; min-height:20px;\r\n flex-shrink:0; flex-grow:0;\r\n border:1.5px solid var(--warm-grey); border-radius:50%;\r\n transition:all .2s ease;\r\n}\r\n.quiz-option:hover { border-color:var(--sage); background:rgba(138,158,136,.04); }\r\n.quiz-option:hover::before { border-color:var(--sage); }\r\n.quiz-option.selected { border-color:var(--deep-sage); background:rgba(74,97,72,.05); color:var(--deep-sage); font-weight:400; }\r\n.quiz-option.selected::before { border-color:var(--deep-sage); background:var(--deep-sage); box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 6px var(--deep-sage); }\r\n\r\n.quiz-nav {\r\n display:flex; justify-content:space-between; align-items:center;\r\n margin-top:52px; padding-top:36px; border-top:1px solid var(--warm-grey);\r\n}\r\n.quiz-back {\r\n background:none; border:none; font-family:var(--sans);\r\n font-size:.74rem; font-weight:500; letter-spacing:.12em;\r\n text-transform:uppercase; color:var(--muted); cursor:pointer;\r\n display:flex; align-items:center; gap:8px; transition:color .2s; padding:0;\r\n}\r\n.quiz-back:hover { color:var(--charcoal); }\r\n.quiz-back:disabled { opacity:.22; cursor:not-allowed; }\r\n\r\n\/* Result *\/\r\n.quiz-result { display:none; animation:slideIn .4s var(--ease); }\r\n.quiz-result.active { display:block; }\r\n.result-label { font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--deep-sage); margin-bottom:18px; display:flex; align-items:center; gap:12px; }\r\n.result-label::before { content:''; width:28px; height:1px; background:var(--deep-sage); }\r\n.result-bloom-name { font-family:var(--serif); font-size:var(--step-3); font-weight:300; color:var(--charcoal); margin-bottom:10px; line-height:1; letter-spacing:-.01em; }\r\n.result-dot { width:20px; height:20px; border-radius:50%; display:inline-block; margin-right:14px; vertical-align:middle; flex-shrink:0; }\r\n.result-tagline { font-family:var(--serif); font-size:1.2rem; font-style:italic; color:var(--muted); margin-bottom:26px; }\r\n.result-text { font-size:.94rem; color:var(--muted); font-weight:300; margin-bottom:36px; line-height:1.82; max-width:480px; }\r\n.result-mood { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px; }\r\n.result-mood-tag { font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--deep-sage); padding:6px 16px; border:1px solid var(--sage); background:rgba(138,158,136,.08); }\r\n\r\n@media(max-width:768px){\r\n .quiz-wrap {\r\n padding: 36px 20px;\r\n }\r\n .quiz-q-text {\r\n font-size: 1.35rem;\r\n margin-bottom: 28px;\r\n }\r\n .quiz-option {\r\n padding: 15px 16px;\r\n font-size: .9rem;\r\n gap: 12px;\r\n }\r\n .quiz-option::before {\r\n width: 18px; height: 18px;\r\n min-width: 18px; min-height: 18px;\r\n }\r\n .quiz-nav {\r\n margin-top: 32px; padding-top: 24px;\r\n flex-wrap: wrap; gap: 12px;\r\n }\r\n .quiz-nav .btn-primary {\r\n width: 100%; text-align: center; order: -1;\r\n }\r\n .quiz-back { order: 1; }\r\n .quiz-progress { flex-direction: column; align-items: flex-start; gap: 8px; }\r\n .quiz-progress-track { width: 100%; }\r\n .quiz-step-label { white-space: normal; }\r\n}\r\n\r\n\/* \u2500\u2500 WAITLIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#waitlist { background:var(--dark); padding:0; position:relative; overflow:hidden; }\r\n.waitlist-inner { display:grid; grid-template-columns:1fr 1fr; min-height:720px; }\r\n.waitlist-image-col { position:relative; overflow:hidden; }\r\n.waitlist-image-col img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:sepia(20%) brightness(.68) contrast(1.06); }\r\n.waitlist-image-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,25,22,.5) 0%,rgba(74,97,72,.2) 100%); }\r\n.waitlist-quote {\r\n position:absolute; bottom:60px; left:52px; right:52px;\r\n font-family:var(--serif); font-size:1.4rem; font-style:italic;\r\n font-weight:300; color:rgba(255,255,255,.85); line-height:1.5;\r\n border-left:2px solid var(--sage); padding-left:22px;\r\n}\r\n.waitlist-form-col { padding:88px 80px; display:flex; flex-direction:column; justify-content:center; }\r\n.waitlist-form-col .section-label { color:rgba(255,255,255,.32); }\r\n.waitlist-form-col .section-label::before { background:rgba(255,255,255,.14); }\r\n.waitlist-form-col .section-h2 { color:#fff; font-size:var(--step-3); }\r\n.waitlist-sub { font-size:var(--step-0); color:rgba(255,255,255,.42); font-weight:300; margin-bottom:44px; line-height:1.78; }\r\n.form-group { margin-bottom:18px; }\r\n.form-group label { display:block; font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:9px; }\r\n.form-group input, .form-group select {\r\n width:100%; background:rgba(255,255,255,.06);\r\n border:1px solid rgba(255,255,255,.13); color:#fff;\r\n font-family:var(--sans); font-size:.96rem; font-weight:300;\r\n padding:16px 20px; outline:none;\r\n transition:border-color .2s, background .2s;\r\n appearance:none; -webkit-appearance:none;\r\n}\r\n.form-group input::placeholder { color:rgba(255,255,255,.28); }\r\n.form-group input:focus, .form-group select:focus { border-color:var(--sage); background:rgba(255,255,255,.09); }\r\n.form-group select option { background:var(--dark); color:#fff; }\r\n.form-disclaimer { font-size:.74rem; color:rgba(255,255,255,.28); margin-top:18px; font-weight:300; }\r\n.form-success { display:none; text-align:center; padding:44px 0; }\r\n.form-success.show { display:block; }\r\n.form-success-icon { width:60px; height:60px; border:1px solid var(--sage); border-radius:50%; margin:0 auto 26px; display:flex; align-items:center; justify-content:center; }\r\n.form-success-icon svg { width:26px; height:26px; stroke:var(--sage); fill:none; }\r\n.form-success h3 { font-family:var(--serif); font-size:1.8rem; font-weight:300; color:#fff; margin-bottom:14px; }\r\n.form-success p { font-size:.9rem; color:rgba(255,255,255,.38); font-weight:300; }\r\n@media(max-width:900px){\r\n .waitlist-inner { grid-template-columns:1fr; }\r\n .waitlist-image-col { display:none; }\r\n .waitlist-form-col { padding:72px 36px; }\r\n}\r\n\r\n\/* \u2500\u2500 CLOSING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#closing { background:var(--ivory); padding:180px 6%; text-align:center; position:relative; overflow:hidden; }\r\n.closing-watermark {\r\n position:absolute; font-family:var(--serif); font-size:clamp(100px,18vw,240px);\r\n font-weight:300; color:rgba(44,44,42,.03); top:50%; left:50%;\r\n transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; user-select:none;\r\n}\r\n.closing-inner { position:relative; z-index:1; max-width:780px; margin:0 auto; }\r\n.closing-h2 {\r\n font-family:var(--serif);\r\n font-size:var(--step-4);\r\n font-weight:300; line-height:1.08; color:var(--charcoal);\r\n margin-bottom:52px; letter-spacing:-.02em;\r\n}\r\n.closing-h2 em { font-style:italic; color:var(--deep-sage); }\r\n\r\n\/* \u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\nfooter {\r\n background:var(--charcoal); padding:36px 6%;\r\n display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;\r\n}\r\nfooter .footer-logo { font-family:var(--serif); font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.55); letter-spacing:.1em; text-decoration:none; }\r\nfooter .footer-copy { font-size:.74rem; color:rgba(255,255,255,.24); font-weight:300; }\r\n@media(max-width:600px){ footer { flex-direction:column; text-align:center; padding:28px; } }\r\n\r\n\/* Bloom product image \u2013 premium look *\/\r\n.bloom-image {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n background: var(--beige);\r\n padding: 10px;\r\n border-radius: 12px;\r\n box-shadow: 0 12px 24px -12px rgba(0,0,0,0.08);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n.bloom-card:hover .bloom-image {\r\n transform: translateY(-4px);\r\n box-shadow: 0 20px 28px -12px rgba(0,0,0,0.12);\r\n}\r\n.bloom-image img {\r\n max-width: 100%;\r\n border-radius: 12px;\r\n height: auto;\r\n display: block;\r\n margin: 0 auto;\r\n filter: drop-shadow(0 6px 8px rgba(0,0,0,0.05));\r\n}\r\n\r\n\/* Mobile compact: keep card short \u2013 image, name, tagline visible *\/\r\n@media (max-width: 768px) {\r\n .bloom-card .bloom-desc,\r\n .bloom-card .bloom-ingredients,\r\n .bloom-card .bloom-mood-tags {\r\n display: none;\r\n }\r\n .bloom-card.expanded .bloom-desc,\r\n .bloom-card.expanded .bloom-ingredients,\r\n .bloom-card.expanded .bloom-mood-tags {\r\n display: block;\r\n }\r\n \/* Smaller image on mobile to save space *\/\r\n .bloom-image {\r\n padding: 8px;\r\n margin-bottom: 12px;\r\n }\r\n \r\n \/* Name and tagline remain visible *\/\r\n .bloom-name {\r\n font-size: 1.4rem;\r\n margin-bottom: 4px;\r\n }\r\n .bloom-tagline {\r\n font-size: 0.7rem;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"cursor\" id=\"cursor\"><\/div>\r\n<div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\r\n\r\n<!-- \u2500\u2500 NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<nav id=\"mainNav\">\r\n <a href=\"#\" class=\"nav-logo\">\r\n <span class=\"nav-logo-mark\"><\/span>\r\n Stilla\r\n <\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#problem\">The water<\/a><\/li>\r\n <li><a href=\"#blooms\">Bloom<\/a><\/li>\r\n <li><a href=\"#bloomfinder\">Find your Bloom<\/a><\/li>\r\n <li><a href=\"#waitlist\" class=\"nav-cta\">Join waitlist<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<!-- \u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"hero\">\r\n <div class=\"hero-image-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/fde9e9d0-17af-4f9e-ab2a-bbeaf8ebd987.png\" alt=\"Soft spa bathroom ritual\" loading=\"eager\">\r\n <div class=\"hero-image-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"hero-content\">\r\n <div class=\"hero-eyebrow reveal\">London showercare ritual<\/div>\r\n <h1 class=\"hero-h1 reveal reveal-delay-1\">\r\n Your London shower,<br>\r\n <em>reimagined<\/em> for<br>\r\n hair, skin and ritual.\r\n <\/h1>\r\n <p class=\"hero-sub reveal reveal-delay-2\">\r\n A premium showercare system for hard-water cities, designed for New Londoners noticing dry-feeling hair, tighter-feeling skin, and a beauty routine that no longer feels the same.\r\n <\/p>\r\n <div class=\"hero-ctas reveal reveal-delay-3\">\r\n <a href=\"#waitlist\" class=\"btn-primary\" onclick=\"fireEvent('waitlist_cta_click',{location:'hero'})\">Join the Waitlist<\/a>\r\n <a href=\"#bloomfinder\" class=\"btn-secondary\" onclick=\"fireEvent('quiz_started',{location:'hero'})\">Find Your Bloom<\/a>\r\n <\/div>\r\n <div class=\"hero-tag reveal reveal-delay-4\">Launching first in London<\/div>\r\n <\/div>\r\n <div class=\"scroll-indicator\" aria-hidden=\"true\">\r\n <span>Scroll<\/span>\r\n <i><\/i>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 MARQUEE (British spelling) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"marquee-wrap\">\r\n <div class=\"marquee-inner\">\r\n <span>Premium Showercare<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Hard-Water Cities<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Bloom Rituals<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Before the Serum<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Personalisation<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>London Ritual<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Filter First<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Premium Showercare<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Hard-Water Cities<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Bloom Rituals<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Before the Serum<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Personalisation<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>London Ritual<\/span><span class=\"dot\">\u00b7<\/span>\r\n <span>Filter First<\/span><span class=\"dot\">\u00b7<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2500\u2500 PROBLEM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"problem\">\r\n <div class=\"problem-inner\">\r\n <div class=\"problem-image-col reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/woman-with-water-streaming-over-her-head-in-shower-free-photo.jpg\" alt=\"Woman in London shower\" loading=\"lazy\">\r\n <div class=\"problem-pull-quote\">\"The first thing touching your beauty routine is the water.\"<\/div>\r\n <\/div>\r\n <div class=\"problem-text-col\">\r\n <div class=\"section-label reveal\">Water & skin<\/div>\r\n <h2 class=\"section-h2 reveal\">Hard water touches your routine before anything else does.<\/h2>\r\n <p class=\"problem-body reveal\">\r\n You see hard water as limescale on your kettle, your glass, your taps. But the same mineral-heavy water runs through your shower every day \u2014 touching your hair, scalp and skin before your serum, hair mask, or body oil ever gets the chance.\r\n <\/p>\r\n <p class=\"problem-body reveal\" style=\"margin-bottom:12px; font-style:italic; font-family:var(--serif); font-size:1.08rem; color:var(--charcoal);\">For many New Londoners, the change is subtle at first.<\/p>\r\n <ul class=\"symptom-list\" id=\"symptomList\">\r\n <li>Hair feels drier.<\/li>\r\n <li>Skin feels tighter.<\/li>\r\n <li>Scalp feels more sensitive.<\/li>\r\n <li>Colour looks duller.<\/li>\r\n <li>Your usual routine starts working less beautifully.<\/li>\r\n <\/ul>\r\n <p class=\"problem-body reveal\">So you buy another mask, another oil, another treatment. But the first thing touching your beauty routine is still the water.<\/p>\r\n <p class=\"problem-close reveal\">Stilla starts where beauty begins: in the shower.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 SOLUTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"solution\">\r\n <div class=\"solution-inner\">\r\n <div class=\"solution-header\">\r\n <div class=\"section-label reveal\">The concept<\/div>\r\n <h2 class=\"section-h2 reveal\">Filter first.<br>Bloom second.<\/h2>\r\n <\/div>\r\n <div class=\"solution-images\">\r\n <div class=\"solution-img-wrap reveal\">\r\n <!-- Shower filter mockup (real product visual) -->\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-5-2026-03_34_03-PM.png\" alt=\"Premium shower filter\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"solution-img-wrap reveal reveal-delay-1\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/4a8f67d5-c001-4882-9f21-0d44b82bb64f.png\" alt=\"Beauty wellness moment\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"solution-img-wrap reveal reveal-delay-2\">\r\n <!-- Bloom pod mockup -->\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/1d029214-09e5-439e-abba-052e4f6d27ca.png\" alt=\"Bloom pod\" loading=\"lazy\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"solution-text\">\r\n <p class=\"reveal\">Stilla is a premium showercare concept designed to make hard-water living feel softer, more intentional, and more beautiful.<\/p>\r\n <p class=\"reveal reveal-delay-1\">It pairs a shower filtration product with Bloom Refills \u2014 sensorial rituals inspired by skincare, fragrance and mood. Each Bloom is designed to elevate the shower from a basic rinse into a beauty-wellness moment: cleaner-feeling, more personal, and quietly indulgent.<\/p>\r\n <p class=\"solution-tagline reveal reveal-delay-2\">Because before the serum, the mask or the hair oil \u2014 there is water.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 HOW IT WORKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"howitworks\">\r\n <div class=\"hiw-watermark\" aria-hidden=\"true\">ritual<\/div>\r\n <div class=\"hiw-inner\">\r\n <div class=\"hiw-header\">\r\n <div class=\"section-label reveal\">The ritual<\/div>\r\n <h2 class=\"section-h2 reveal\">A new ritual for hard-water cities.<\/h2>\r\n <\/div>\r\n <div class=\"hiw-cards\">\r\n <div class=\"hiw-card reveal\">\r\n <div class=\"hiw-number\">01<\/div>\r\n <div class=\"hiw-icon\">\r\n <svg viewBox=\"0 0 24 24\" stroke-width=\"1.2\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\r\n <\/div>\r\n <div class=\"hiw-title\">Filter<\/div>\r\n <div class=\"hiw-desc\">Start with watercare designed for life in hard-water cities. The first step your skin and hair actually needs.<\/div>\r\n <\/div>\r\n <div class=\"hiw-card reveal reveal-delay-1\">\r\n <div class=\"hiw-number\">02<\/div>\r\n <div class=\"hiw-icon\">\r\n <svg viewBox=\"0 0 24 24\" stroke-width=\"1.2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"hiw-title\">Bloom<\/div>\r\n <div class=\"hiw-desc\">Choose a sensorial Bloom ritual inspired by scent, mood and skincare-led care. Four rituals, each designed for a different moment.<\/div>\r\n <\/div>\r\n <div class=\"hiw-card reveal reveal-delay-2\">\r\n <div class=\"hiw-number\">03<\/div>\r\n <div class=\"hiw-icon\">\r\n <svg viewBox=\"0 0 24 24\" stroke-width=\"1.2\"><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 <div class=\"hiw-title\">Personalise<\/div>\r\n <div class=\"hiw-desc\">Find the Bloom that fits your hair, skin, routine and the way you want your shower to feel. Yours to refine over time.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 BLOOMS (desktop full, mobile compact) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"blooms\">\r\n <div class=\"blooms-inner\">\r\n <div class=\"blooms-header\">\r\n <div class=\"section-label reveal\">The Blooms<\/div>\r\n <h2 class=\"section-h2 reveal\">Meet the Bloom rituals.<\/h2>\r\n <p class=\"reveal\">Four sensorial shower refills designed around mood, scent and skincare-inspired ingredients.<\/p>\r\n <\/div>\r\n <div class=\"bloom-cards\">\r\n <!-- BARE -->\r\n <div class=\"bloom-card reveal\">\r\n <div class=\"bloom-card-stripe\" style=\"background:#dfd3a4\"><\/div>\r\n <!-- Product image on top (remove dot) -->\r\n <div class=\"bloom-image\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/06\/Bare.png\" alt=\"Bare Bloom Pod\">\r\n <\/div>\r\n <div class=\"bloom-name\">Bare<\/div>\r\n <div class=\"bloom-tagline\">The fragrance-free daily reset<\/div>\r\n <div class=\"bloom-desc\">Clean, minimal and quietly soft \u2014 for those who want their showercare simple, gentle and barely there.<\/div>\r\n <div class=\"bloom-ingredients\"><strong>Skincare ingredients<\/strong>Panthenol \u00b7 Sodium PCA \u00b7 Allantoin<\/div>\r\n <div class=\"bloom-ingredients\" style=\"border-top:none;padding-top:0;margin-bottom:0\"><strong>Best for<\/strong>Sensitive routines, fragrance-free preferences, everyday reset<\/div>\r\n <div class=\"bloom-mood-tags\"><span class=\"bloom-mood-tag\">Clean<\/span><span class=\"bloom-mood-tag\">Soft<\/span><span class=\"bloom-mood-tag\">Minimal<\/span><\/div>\r\n <\/div>\r\n\r\n <!-- CLARITY -->\r\n <div class=\"bloom-card reveal reveal-delay-1\">\r\n <div class=\"bloom-card-stripe\" style=\"background:#9FBF9E\"><\/div>\r\n <div class=\"bloom-image\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/06\/Clarity.png\" alt=\"Clarity Bloom Pod\">\r\n <\/div>\r\n <div class=\"bloom-name\">Clarity<\/div>\r\n <div class=\"bloom-tagline\">The fresh green morning ritual<\/div>\r\n <div class=\"bloom-desc\">Inspired by green tea, clean air and that first quiet moment before the city begins.<\/div>\r\n <div class=\"bloom-ingredients\"><strong>Skincare ingredients<\/strong>Green Tea \u00b7 Sodium PCA \u00b7 Zinc PCA<\/div>\r\n <div class=\"bloom-ingredients\" style=\"border-top:none;padding-top:0;margin-bottom:0\"><strong>Scent world<\/strong>Green tea \u00b7 soft herbs \u00b7 clean florals<\/div>\r\n <div class=\"bloom-mood-tags\"><span class=\"bloom-mood-tag\">Fresh<\/span><span class=\"bloom-mood-tag\">Clear<\/span><span class=\"bloom-mood-tag\">Energised<\/span><\/div>\r\n <\/div>\r\n\r\n <!-- GLOW -->\r\n <div class=\"bloom-card reveal reveal-delay-2\">\r\n <div class=\"bloom-card-stripe\" style=\"background:#E8C97A\"><\/div>\r\n <div class=\"bloom-image\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/06\/Glow.png\" alt=\"Glow Bloom Pod\">\r\n <\/div>\r\n <div class=\"bloom-name\">Glow<\/div>\r\n <div class=\"bloom-tagline\">The golden citrus lift<\/div>\r\n <div class=\"bloom-desc\">A warm, luminous shower ritual inspired by citrus mornings and skin that looks rested, not overworked.<\/div>\r\n <div class=\"bloom-ingredients\"><strong>Skincare ingredients<\/strong>Vitamin C derivative \u00b7 Glycerin \u00b7 Panthenol<\/div>\r\n <div class=\"bloom-ingredients\" style=\"border-top:none;padding-top:0;margin-bottom:0\"><strong>Scent world<\/strong>Yuzu \u00b7 bergamot \u00b7 orange blossom<\/div>\r\n <div class=\"bloom-mood-tags\"><span class=\"bloom-mood-tag\">Warm<\/span><span class=\"bloom-mood-tag\">Bright<\/span><span class=\"bloom-mood-tag\">Luminous<\/span><\/div>\r\n <\/div>\r\n\r\n <!-- CALM -->\r\n <div class=\"bloom-card reveal reveal-delay-3\">\r\n <div class=\"bloom-card-stripe\" style=\"background:#B8A8C8\"><\/div>\r\n <div class=\"bloom-image\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/06\/Calm.png\" alt=\"Calm Bloom Pod\">\r\n <\/div>\r\n <div class=\"bloom-name\">Calm<\/div>\r\n <div class=\"bloom-tagline\">The evening wind-down<\/div>\r\n <div class=\"bloom-desc\">A soft lavender-toned ritual for slowing down, washing off the city and coming back to yourself.<\/div>\r\n <div class=\"bloom-ingredients\"><strong>Skincare ingredients<\/strong>Centella \u00b7 Beta-glucan \u00b7 Colloidal Oat<\/div>\r\n <div class=\"bloom-ingredients\" style=\"border-top:none;padding-top:0;margin-bottom:0\"><strong>Scent world<\/strong>Lavender \u00b7 soft chamomile \u00b7 white musk<\/div>\r\n <div class=\"bloom-mood-tags\"><span class=\"bloom-mood-tag\">Soft<\/span><span class=\"bloom-mood-tag\">Still<\/span><span class=\"bloom-mood-tag\">Restored<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 BLOOM FINDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"bloomfinder\">\r\n <div class=\"finder-inner\">\r\n <div class=\"finder-header\">\r\n <div class=\"section-label reveal\">Personalise<\/div>\r\n <h2 class=\"section-h2 reveal\" style=\"text-align:center\">Find your Bloom.<\/h2>\r\n <p class=\"reveal\">Your shower should match the way you live. Answer a few quick questions to discover the Bloom ritual that best fits you.<\/p>\r\n <\/div>\r\n <div class=\"quiz-wrap reveal\">\r\n <div class=\"quiz-progress\">\r\n <div class=\"quiz-step-label\" id=\"stepLabel\">Step 1 of 5<\/div>\r\n <div class=\"quiz-progress-track\">\r\n <div class=\"quiz-progress-fill\" id=\"progressFill\" style=\"width:20%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz-question active\" id=\"q1\">\r\n <div class=\"quiz-q-text\">What have you noticed most since living in London?<\/div>\r\n <div class=\"quiz-options\">\r\n <button class=\"quiz-option\" data-q=\"1\" data-val=\"drier\">My hair feels drier<\/button>\r\n <button class=\"quiz-option\" data-q=\"1\" data-val=\"tighter\">My skin feels tighter<\/button>\r\n <button class=\"quiz-option\" data-q=\"1\" data-val=\"scalp\">My scalp feels more sensitive<\/button>\r\n <button class=\"quiz-option\" data-q=\"1\" data-val=\"duller\">My hair colour looks duller<\/button>\r\n <button class=\"quiz-option\" data-q=\"1\" data-val=\"routine\">My routine just doesn't feel the same<\/button>\r\n <button class=\"quiz-option\" data-q=\"1\" data-val=\"luxurious\">I want my shower to feel more luxurious<\/button>\r\n <\/div>\r\n <div class=\"quiz-nav\">\r\n <button class=\"quiz-back\" disabled>\u2190 Back<\/button>\r\n <button class=\"btn-primary\" onclick=\"nextQ(1)\">Continue<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz-question\" id=\"q2\">\r\n <div class=\"quiz-q-text\">What do you want your shower to feel like?<\/div>\r\n <div class=\"quiz-options\">\r\n <button class=\"quiz-option\" data-q=\"2\" data-val=\"reset\">A clean daily reset<\/button>\r\n <button class=\"quiz-option\" data-q=\"2\" data-val=\"morning\">A fresh morning boost<\/button>\r\n <button class=\"quiz-option\" data-q=\"2\" data-val=\"glow\">A golden glow moment<\/button>\r\n <button class=\"quiz-option\" data-q=\"2\" data-val=\"calm\">A calm evening wind-down<\/button>\r\n <\/div>\r\n <div class=\"quiz-nav\">\r\n <button class=\"quiz-back\" onclick=\"prevQ(2)\">\u2190 Back<\/button>\r\n <button class=\"btn-primary\" onclick=\"nextQ(2)\">Continue<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz-question\" id=\"q3\">\r\n <div class=\"quiz-q-text\">Which scent world do you prefer?<\/div>\r\n <div class=\"quiz-options\">\r\n <button class=\"quiz-option\" data-q=\"3\" data-val=\"bare\">Fragrance-free \/ barely there<\/button>\r\n <button class=\"quiz-option\" data-q=\"3\" data-val=\"clarity\">Fresh and green<\/button>\r\n <button class=\"quiz-option\" data-q=\"3\" data-val=\"glow\">Warm and citrusy<\/button>\r\n <button class=\"quiz-option\" data-q=\"3\" data-val=\"calm\">Soft and calming<\/button>\r\n <\/div>\r\n <div class=\"quiz-nav\">\r\n <button class=\"quiz-back\" onclick=\"prevQ(3)\">\u2190 Back<\/button>\r\n <button class=\"btn-primary\" onclick=\"nextQ(3)\">Continue<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz-question\" id=\"q4\">\r\n <div class=\"quiz-q-text\">When do you usually take your everything shower?<\/div>\r\n <div class=\"quiz-options\">\r\n <button class=\"quiz-option\" data-q=\"4\" data-val=\"morning\">Morning before the day starts<\/button>\r\n <button class=\"quiz-option\" data-q=\"4\" data-val=\"gym\">After the gym<\/button>\r\n <button class=\"quiz-option\" data-q=\"4\" data-val=\"evening\">Evening wind-down<\/button>\r\n <button class=\"quiz-option\" data-q=\"4\" data-val=\"weekend\">Weekend self-care ritual<\/button>\r\n <\/div>\r\n <div class=\"quiz-nav\">\r\n <button class=\"quiz-back\" onclick=\"prevQ(4)\">\u2190 Back<\/button>\r\n <button class=\"btn-primary\" onclick=\"nextQ(4)\">Continue<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz-question\" id=\"q5\">\r\n <div class=\"quiz-q-text\">Which Bloom sounds most like you?<\/div>\r\n <div class=\"quiz-options\">\r\n <button class=\"quiz-option\" data-q=\"5\" data-val=\"bare\">Bare \u2014 the fragrance-free daily reset<\/button>\r\n <button class=\"quiz-option\" data-q=\"5\" data-val=\"clarity\">Clarity \u2014 the fresh green morning ritual<\/button>\r\n <button class=\"quiz-option\" data-q=\"5\" data-val=\"glow\">Glow \u2014 the golden citrus lift<\/button>\r\n <button class=\"quiz-option\" data-q=\"5\" data-val=\"calm\">Calm \u2014 the evening wind-down<\/button>\r\n <\/div>\r\n <div class=\"quiz-nav\">\r\n <button class=\"quiz-back\" onclick=\"prevQ(5)\">\u2190 Back<\/button>\r\n <button class=\"btn-primary\" onclick=\"showResult()\">See my Bloom<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz-result\" id=\"quizResult\">\r\n <div class=\"result-label\">Your Bloom match<\/div>\r\n <div style=\"display:flex;align-items:center;margin-bottom:18px\">\r\n <span class=\"result-dot\" id=\"resultDot\"><\/span>\r\n <div class=\"result-bloom-name\" id=\"resultName\"><\/div>\r\n <\/div>\r\n <div class=\"result-tagline\" id=\"resultTagline\"><\/div>\r\n <div class=\"result-text\">Join the waitlist to be first to try Stilla when we launch in London.<\/div>\r\n <div class=\"result-mood\" id=\"resultMood\"><\/div>\r\n <a href=\"#waitlist\" class=\"btn-primary\" onclick=\"scrollToWaitlist()\" style=\"display:inline-block\">Join the Waitlist<\/a>\r\n <p style=\"margin-top:28px;font-size:.8rem;color:var(--muted);font-weight:300\">\r\n <a href=\"#\" onclick=\"restartQuiz();return false\" style=\"color:var(--muted);text-decoration:underline\">Retake the quiz<\/a>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 WAITLIST (Google Sheets integrated) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"waitlist\">\r\n <div class=\"waitlist-inner\">\r\n <div class=\"waitlist-image-col\">\r\n <img decoding=\"async\" src=\"https:\/\/makeasiteplan.com\/wp-content\/uploads\/2026\/05\/powerful-shower-head-cleaning-with-effective-lime-scale-removerfocusing-water-droplet-details-product-effectiveness_38013-8985.avif\" alt=\"Stilla shower ritual\" loading=\"lazy\">\r\n <div class=\"waitlist-image-overlay\"><\/div>\r\n <div class=\"waitlist-quote\">The future of beauty starts before the serum.<br>It starts with the water.<\/div>\r\n <\/div>\r\n <div class=\"waitlist-form-col\">\r\n <div class=\"section-label reveal\">Early access<\/div>\r\n <h2 class=\"section-h2 reveal\" style=\"margin-bottom:18px\">Be first in the showercare shift.<\/h2>\r\n <p class=\"waitlist-sub reveal\">Stilla is currently in early validation, launching first in London. Join the waitlist for early access, product updates and first launch availability.<\/p>\r\n <div id=\"waitlistFormWrap\">\r\n <!-- The form now submits to your Google Sheet using Apps Script -->\r\n <form id=\"waitlistForm\" action=\"https:\/\/script.google.com\/macros\/s\/AKfycbxExample\/exec\" method=\"POST\">\r\n <input type=\"hidden\" name=\"_subject\" value=\"\ud83c\udf3f New Stilla Waitlist Sign-up\">\r\n <input type=\"hidden\" name=\"_captcha\" value=\"false\">\r\n <input type=\"hidden\" name=\"source\" id=\"formSource\" value=\"direct\">\r\n <input type=\"hidden\" name=\"bloom_result\" id=\"formBloomResult\" value=\"\">\r\n <div class=\"form-group reveal\"><label for=\"fname\">Name<\/label><input type=\"text\" id=\"fname\" name=\"name\" placeholder=\"Your name\" autocomplete=\"name\"><\/div>\r\n <div class=\"form-group reveal reveal-delay-1\"><label for=\"femail\">Email <span style=\"color:rgba(255,255,255,.18);font-size:.6rem\">required<\/span><\/label><input type=\"email\" id=\"femail\" name=\"email\" placeholder=\"your@email.com\" required autocomplete=\"email\"><\/div>\r\n <div class=\"form-group reveal reveal-delay-2\"><label for=\"fcity\">City<\/label><input type=\"text\" id=\"fcity\" name=\"city\" placeholder=\"London\" autocomplete=\"address-level2\"><\/div>\r\n <div class=\"form-group reveal reveal-delay-3\">\r\n <label for=\"fbloom\">Which Bloom are you most interested in? <span style=\"color:rgba(255,255,255,.18);font-size:.6rem\">optional<\/span><\/label>\r\n <select id=\"fbloom\" name=\"bloom_interest\">\r\n <option value=\"\" disabled selected>Select a Bloom<\/option>\r\n <option value=\"Bare\">Bare \u2014 fragrance-free daily reset<\/option>\r\n <option value=\"Clarity\">Clarity \u2014 fresh green morning ritual<\/option>\r\n <option value=\"Glow\">Glow \u2014 golden citrus lift<\/option>\r\n <option value=\"Calm\">Calm \u2014 evening wind-down<\/option>\r\n <\/select>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-light reveal reveal-delay-4\" style=\"width:100%;margin-top:10px;text-align:center\">Join the Waitlist<\/button>\r\n <p class=\"form-disclaimer reveal\">No spam. Just early access, product updates and first launch news.<\/p>\r\n <\/form>\r\n <div class=\"form-success\" id=\"formSuccess\">\r\n <div class=\"form-success-icon\"><svg viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <h3>You're on the list.<\/h3>\r\n <p>We'll be in touch as we get closer to launch.<br>Something softer is coming.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 CLOSING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"closing\">\r\n <div class=\"closing-watermark\" aria-hidden=\"true\">water<\/div>\r\n <div class=\"closing-inner\">\r\n <h2 class=\"closing-h2 reveal\">\r\n The future of beauty starts<br>\r\n before the serum.<br>\r\n <em>It starts with the water.<\/em>\r\n <\/h2>\r\n <a href=\"#waitlist\" class=\"btn-primary reveal reveal-delay-1\">Join the Waitlist<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <a href=\"#\" class=\"footer-logo\">Stilla<\/a>\r\n <span class=\"footer-copy\">\u00a9 2026 Stilla. Launching first in London.<\/span>\r\n<\/footer>\r\n\r\n<script>\r\n\/* Cursor *\/\r\nconst cursor = document.getElementById('cursor');\r\nconst ring = document.getElementById('cursorRing');\r\ndocument.addEventListener('mousemove', e => {\r\n cursor.style.left = e.clientX + 'px';\r\n cursor.style.top = e.clientY + 'px';\r\n setTimeout(() => { ring.style.left = e.clientX + 'px'; ring.style.top = e.clientY + 'px'; }, 55);\r\n});\r\n\r\n\/* Nav *\/\r\nwindow.addEventListener('scroll', () => {\r\n document.getElementById('mainNav').classList.toggle('scrolled', window.scrollY > 40);\r\n}, { passive: true });\r\n\r\n\/* Reveal *\/\r\nconst revObs = new IntersectionObserver(entries => {\r\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\r\n}, { threshold: 0.1 });\r\ndocument.querySelectorAll('.reveal').forEach(el => revObs.observe(el));\r\n\r\n\/* Symptom stagger *\/\r\nconst symObs = new IntersectionObserver(entries => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n document.querySelectorAll('#symptomList li').forEach((li, i) => {\r\n setTimeout(() => li.classList.add('show'), i * 150);\r\n });\r\n symObs.disconnect();\r\n }\r\n });\r\n}, { threshold: 0.3 });\r\nconst sl = document.getElementById('symptomList');\r\nif (sl) symObs.observe(sl);\r\n\r\n\/* ----------------- BLOOM MOBILE ACCORDION (only on \u2264768px) ----------------- *\/\r\nfunction initMobileBloomAccordion() {\r\n const cards = document.querySelectorAll('.bloom-card');\r\n if (window.innerWidth > 768) {\r\n \/\/ Remove expanded class from all cards on desktop\r\n cards.forEach(c => c.classList.remove('expanded'));\r\n return;\r\n }\r\n cards.forEach(card => {\r\n \/\/ Remove existing listener to avoid duplicates\r\n card.removeEventListener('click', card._clickHandler);\r\n const handler = () => {\r\n card.classList.toggle('expanded');\r\n };\r\n card.addEventListener('click', handler);\r\n card._clickHandler = handler;\r\n \/\/ Ensure none is expanded by default on mobile\r\n card.classList.remove('expanded');\r\n });\r\n}\r\nwindow.addEventListener('resize', initMobileBloomAccordion);\r\ninitMobileBloomAccordion();\r\n\r\n\/* Quiz logic (unchanged) *\/\r\nconst answers = {};\r\nconst bloomData = {\r\n bare: { name: 'Bare', dot: '#E8E4DC', tagline: 'The fragrance-free daily reset.', mood: ['Clean','Soft','Minimal'] },\r\n clarity: { name: 'Clarity', dot: '#9FBF9E', tagline: 'The fresh green morning ritual.', mood: ['Fresh','Clear','Energised'] },\r\n glow: { name: 'Glow', dot: '#E8C97A', tagline: 'The golden citrus lift.', mood: ['Warm','Bright','Luminous'] },\r\n calm: { name: 'Calm', dot: '#B8A8C8', tagline: 'The evening wind-down.', mood: ['Soft','Still','Restored'] }\r\n};\r\n\r\nfunction goToQ(n) {\r\n document.querySelectorAll('.quiz-question, .quiz-result').forEach(el => el.classList.remove('active'));\r\n const target = n === 'result' ? document.getElementById('quizResult') : document.getElementById('q' + n);\r\n if (target) target.classList.add('active');\r\n if (n !== 'result') {\r\n document.getElementById('progressFill').style.width = (n \/ 5 * 100) + '%';\r\n document.getElementById('stepLabel').textContent = 'Step ' + n + ' of 5';\r\n }\r\n}\r\n\r\ndocument.querySelectorAll('.quiz-option').forEach(btn => {\r\n btn.addEventListener('click', function () {\r\n const q = this.dataset.q;\r\n document.querySelectorAll(`.quiz-option[data-q=\"${q}\"]`).forEach(b => b.classList.remove('selected'));\r\n this.classList.add('selected');\r\n answers['q' + q] = this.dataset.val;\r\n });\r\n});\r\n\r\nfunction nextQ(current) {\r\n if (!answers['q' + current]) return;\r\n goToQ(current + 1);\r\n}\r\nfunction prevQ(current) { goToQ(current - 1); }\r\n\r\nfunction calcBloom() {\r\n const votes = { bare: 0, clarity: 0, glow: 0, calm: 0 };\r\n const maps = {\r\n q1: { drier:'bare', tighter:'calm', scalp:'bare', duller:'glow', routine:'clarity', luxurious:'glow' },\r\n q2: { reset:'bare', morning:'clarity', glow:'glow', calm:'calm' },\r\n q3: { bare:'bare', clarity:'clarity', glow:'glow', calm:'calm' },\r\n q4: { morning:'clarity', gym:'clarity', evening:'calm', weekend:'bare' },\r\n q5: { bare:'bare', clarity:'clarity', glow:'glow', calm:'calm' }\r\n };\r\n const weights = { q1:1, q2:1, q3:2, q4:1, q5:2 };\r\n Object.entries(maps).forEach(([q, map]) => {\r\n const pick = map[answers[q]];\r\n if (pick) votes[pick] += weights[q];\r\n });\r\n return Object.entries(votes).sort((a, b) => b[1] - a[1])[0][0];\r\n}\r\n\r\nfunction showResult() {\r\n if (!answers.q5) return;\r\n const bloom = calcBloom();\r\n const data = bloomData[bloom];\r\n document.getElementById('resultName').textContent = data.name;\r\n document.getElementById('resultDot').style.background = data.dot;\r\n document.getElementById('resultTagline').textContent = data.tagline;\r\n document.getElementById('resultMood').innerHTML = data.mood.map(m => `<span class=\"result-mood-tag\">${m}<\/span>`).join('');\r\n document.getElementById('progressFill').style.width = '100%';\r\n document.getElementById('stepLabel').textContent = 'Complete';\r\n goToQ('result');\r\n const sel = document.getElementById('fbloom');\r\n for (let i = 0; i < sel.options.length; i++) { if (sel.options[i].value === data.name) { sel.selectedIndex = i; break; } }\r\n document.getElementById('formBloomResult').value = data.name;\r\n document.getElementById('formSource').value = 'quiz';\r\n fireEvent('quiz_completed', {});\r\n fireEvent('bloom_result', { bloom: data.name });\r\n}\r\n\r\nfunction scrollToWaitlist() { document.getElementById('waitlist').scrollIntoView({ behavior: 'smooth' }); }\r\n\r\nfunction restartQuiz() {\r\n Object.keys(answers).forEach(k => delete answers[k]);\r\n document.querySelectorAll('.quiz-option').forEach(b => b.classList.remove('selected'));\r\n goToQ(1);\r\n}\r\n\r\n\/* Google Sheets integration \u2013 replace the script URL with your deployed Apps Script URL *\/\r\nconst WAITLIST_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyLypXQ4DdKfzt0GLdCQpdZuWd67640iAecS6NAnG6QZWXP5pbYtOsLiwu1j4BfL0fdKQ\/exec\"; \/\/ <-- REPLACE with your real URL\r\ndocument.getElementById('waitlistForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n const email = document.getElementById('femail').value;\r\n if (!email) return;\r\n \r\n \/\/ Build URL-encoded string from all form fields\r\n const formData = new FormData(this);\r\n const params = new URLSearchParams();\r\n for (let [key, value] of formData.entries()) {\r\n params.append(key, value);\r\n }\r\n params.append('timestamp', new Date().toISOString());\r\n \r\n fireEvent('waitlist_signup', { bloom: formData.get('bloom_interest') });\r\n \r\n try {\r\n const response = await fetch(WAITLIST_SCRIPT_URL, {\r\n method: 'POST',\r\n body: params,\r\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' }\r\n });\r\n const result = await response.json();\r\n console.log(\"Script response:\", result);\r\n } catch(e) {\r\n console.error(\"Fetch error:\", e);\r\n }\r\n \r\n \/\/ Always show success message to user\r\n document.getElementById('waitlistForm').style.display = 'none';\r\n document.getElementById('formSuccess').classList.add('show');\r\n});\r\n<\/script>\r\n<!-- Instruction: To connect Google Sheet, create an Apps Script, paste the code from the client brief, deploy as web app, and share sheet with kelly.sihang326@gmail.com. Replace WAITLIST_SCRIPT_URL above. -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Stilla \u2014 Premium Showercare for Hard-Water Cities Stilla The water Bloom Find your Bloom Join waitlist London showercare ritual Your London shower, reimagined for hair, skin and ritual. A premium showercare system for hard-water cities, designed for New Londoners noticing dry-feeling hair, tighter-feeling skin, and a beauty routine that no longer feels the same. Join […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stillalondon.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stillalondon.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stillalondon.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stillalondon.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stillalondon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":11,"href":"https:\/\/stillalondon.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/stillalondon.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/stillalondon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}