{ "id": 16183, "date": "2026-04-17T02:36:50", "date_gmt": "2026-04-17T02:36:50", "guid": { "rendered": "https:\/\/interpoolspa.com\/?page_id=16183" }, "modified": "2026-05-14T03:08:46", "modified_gmt": "2026-05-14T03:08:46", "slug": "instant-estimate", "status": "publish", "type": "page", "link": "https:\/\/interpoolspa.com\/en\/instant-estimate\/", "title": { "rendered": "Estimator Tool" }, "content": { "rendered": "
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\nInterpool Spa \u2014 Wellness Space Estimator<\/title>\n<style>\n\/* \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Interpool Spa - Guided Estimator v21\n All styles scoped under `.ips-estimator` so the tool can be\n dropped into an Elementor HTML widget without leaking CSS.\n No html\/body resets \u2014 host page styles are untouched.\n \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\n.ips-estimator{\n --ips-gold:#d0b476;\n --ips-gold-2:#8b7b4d;\n --ips-gold-soft:rgba(208,180,118,.16);\n --ips-ink:#1c1208;\n --ips-text:#211810;\n --ips-muted:#6e5c4e;\n --ips-line:rgba(60,42,28,.12);\n --ips-card-bg:rgba(28,20,13,.52);\n --ips-card-border:rgba(255,255,255,.10);\n --ips-card-shadow:0 40px 120px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.25);\n --ips-pad:28px;\n font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif !important;\n color:#fff;\n background:#120c08;\n position:relative;\n width:100%;\n min-height:100vh;\n overflow:visible;\n isolation:isolate;\n -webkit-font-smoothing:antialiased;\n line-height:1.5;\n}\n.ips-estimator *,\n.ips-estimator *::before,\n.ips-estimator *::after{box-sizing:border-box}\n.ips-estimator img{display:block;max-width:100%}\n.ips-estimator button{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit}\n.ips-estimator input,\n.ips-estimator textarea,\n.ips-estimator select{font:inherit !important;color:inherit !important}\n.ips-estimator a{color:inherit;text-decoration:none}\n\n\/* \u2500\u2500 Stage background \u2500\u2500 *\/\n.ips-stage{position:fixed;inset:0;z-index:0;pointer-events:none}\n.ips-stage-bg{\n position:absolute;inset:0;\n background-size:cover;\n background-position:center center;\n}\n.ips-stage-bg-next{\n position:absolute;inset:0;\n background-size:cover;\n background-position:center center;\n opacity:0;\n animation:none;\n}\n@keyframes ips-bg-in{\n from{opacity:0}\n to{opacity:1}\n}\n.ips-stage-mask{\n position:absolute;inset:0;\n background:linear-gradient(180deg,rgba(10,5,2,.25) 0%,rgba(10,5,2,.50) 45%,rgba(10,5,2,.80) 100%);\n}\n\n\/* \u2500\u2500 Top pills (brand + back-to-site) float above card \u2500\u2500 *\/\n.ips-topbar{\n position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4;\n width:min(1120px,calc(100% - 48px));\n display:flex;justify-content:space-between;align-items:center;\n padding:18px 0;gap:12px;pointer-events:none;\n}\n.ips-brand,\n.ips-return{\n display:inline-flex;align-items:center;gap:8px;\n padding:9px 14px;border-radius:999px;\n background:rgba(20,13,8,.55);\n border:1px solid rgba(255,255,255,.12);\n backdrop-filter:blur(10px);\n -webkit-backdrop-filter:blur(10px);\n font-size:.82rem;font-weight:700;letter-spacing:.01em;\n pointer-events:auto;\n color:#fff;\n}\n.ips-brand{\n padding:10px 16px 10px 14px;\n gap:12px;\n}\n.ips-brand-logo{\n display:block;\n height:42px;\n width:auto;\n flex-shrink:0;\n}\n.ips-brand-label{\n display:inline-flex;align-items:center;\n padding:8px 12px;border-radius:999px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.10);\n font-size:.82rem;font-weight:800;letter-spacing:.02em;\n color:#fff;\n white-space:nowrap;\n}\n.ips-return{font-weight:600;transition:background .18s}\n.ips-return:hover{background:rgba(40,28,18,.75)}\n\n\/* \u2500\u2500 Outer shell centres the glass card \u2500\u2500 *\/\n.ips-shell{\n position:relative;z-index:2;\n min-height:100vh;\n display:flex;align-items:center;justify-content:center;\n padding:56px 24px 28px;\n}\n\n\/* \u2500\u2500 The glass card \u2500\u2500 *\/\n.ips-card{\n width:100%;\n max-width:1120px;\n height:auto;min-height:0;\n display:flex;flex-direction:column;\n background:var(--ips-card-bg);\n backdrop-filter:blur(24px) saturate(115%);\n -webkit-backdrop-filter:blur(24px) saturate(115%);\n border:1px solid var(--ips-card-border);\n border-radius:28px;\n box-shadow:var(--ips-card-shadow);\n overflow:hidden;\n}\n\/* Intro step is short on content \u2014 shrink the card so it doesn't\n leave a wide dead zone next to the 680px intro column on desktop.\n Other steps keep the full 1120px for their 3-col grids\/galleries. *\/\n.ips-estimator.ips-at-intro .ips-card{max-width:760px}\n\n\/* Card head holds progress label + bar (matches reference screenshot 1) *\/\n.ips-card-head{\n flex-shrink:0;\n display:flex;align-items:center;justify-content:space-between;gap:20px;\n padding:22px var(--ips-pad) 0;\n}\n.ips-prog-label strong{display:block;font-size:.95rem;font-weight:700;letter-spacing:.005em}\n.ips-prog-label span{display:block;font-size:.76rem;color:rgba(255,255,255,.58);margin-top:2px}\n.ips-prog-track{\n flex:0 1 320px;max-width:320px;min-width:160px;\n height:4px;border-radius:999px;\n background:rgba(255,255,255,.14);overflow:hidden;\n}\n.ips-prog-fill{\n height:100%;border-radius:999px;\n background:linear-gradient(90deg,#e2c686,#a08855);\n transition:width .4s ease;\n}\n\n\/* Slide viewport *\/\n.ips-viewport{flex:0 0 auto;min-height:0;overflow:visible;position:relative}\n.ips-view{\n min-width:100%;height:auto;\n padding:26px var(--ips-pad) 24px;\n overflow:visible;display:flex;flex-direction:column;\n scrollbar-width:none;\n}\n.ips-view::-webkit-scrollbar{display:none}\n\n\/* \u2500\u2500 Shared typography \u2500\u2500 *\/\n.ips-eyebrow{\n font-size:.84rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;\n color:var(--ips-gold);margin-bottom:12px;\n}\n.ips-title{\n font-family:Georgia,\"Times New Roman\",serif !important;\n font-size:clamp(2.1rem,3.5vw,2.7rem);line-height:1.08;\n margin-bottom:12px;text-wrap:balance;\n color:#fff !important;\n}\n.ips-lead{\n font-size:1.12rem;color:rgba(255,255,255,.88);line-height:1.6;\n max-width:58ch;margin-bottom:4px;\n}\n.ips-step-head{margin-bottom:22px;flex-shrink:0}\n\n\/* \u2500\u2500 Action buttons \u2500\u2500 *\/\n.ips-actions{\n display:flex;gap:16px;flex-wrap:wrap;flex-shrink:0;\n margin-top:28px;padding-top:20px;align-items:center;\n border-top:1px solid rgba(255,255,255,.08);\n}\n.ips-actions .ips-btn{min-width:180px}\n.ips-btn{\n appearance:none;cursor:pointer;\n min-height:58px;\n padding:14px 34px;\n border-radius:999px;\n font-weight:800;font-size:1rem;letter-spacing:.005em;\n display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;\n transition:transform .18s ease,box-shadow .18s ease,background .18s,opacity .18s,border-color .18s,color .18s;\n}\n.ips-btn:hover:not(:disabled){transform:translateY(-1px)}\n.ips-btn:active:not(:disabled){transform:translateY(0)}\n.ips-btn:disabled{opacity:.45;cursor:not-allowed}\n.ips-btn-primary{\n background:#cfb36f;\n color:#20150b;\n border:1px solid rgba(231,213,165,.52);\n box-shadow:0 14px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.18);\n}\n.ips-btn-primary:hover:not(:disabled){background:#d5bb79;box-shadow:0 16px 34px rgba(0,0,0,.24)}\n.ips-btn-ghost{\n background:rgba(255,255,255,.04);\n color:#fff;\n border:1.5px solid rgba(255,255,255,.18);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.04);\n}\n.ips-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26)}\n.ips-btn-line{background:#06C755;color:#fff;box-shadow:0 10px 24px rgba(6,199,85,.25);border:0;gap:8px}\n.ips-btn-line:hover:not(:disabled){background:#05b34d}\n.ips-btn-line svg{width:22px;height:22px;flex-shrink:0}\n.ips-btn-close-result{background:#b8a472;color:#fff;box-shadow:0 10px 24px rgba(138,122,76,.25);border:0}\n.ips-btn-close-result:hover:not(:disabled){background:#a8955f}\n\n\/* \u2500\u2500\u2500 Step: intro \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\u2500\u2500\u2500\u2500\u2500 *\/\n.ips-intro{display:flex;flex-direction:column;justify-content:flex-start;max-width:680px}\n.ips-intro .ips-eyebrow{margin-bottom:16px}\n.ips-display{\n font-family:Georgia,\"Times New Roman\",serif !important;\n font-size:clamp(2.6rem,5vw,4rem);line-height:1.0;\n margin-bottom:18px;text-wrap:balance;\n color:#fff !important;\n}\n.ips-pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}\n.ips-pill{\n display:inline-flex;align-items:center;gap:9px;\n padding:9px 14px;border-radius:999px;\n background:rgba(20,13,8,.55);\n border:1px solid rgba(255,255,255,.12);\n font-size:.85rem;\n backdrop-filter:blur(6px);\n -webkit-backdrop-filter:blur(6px);\n}\n.ips-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--ips-gold);flex-shrink:0}\n\n\/* \u2500\u2500\u2500 Step: setting (3 image cards) \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 *\/\n.ips-choice-grid{\n display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;\n flex:1;min-height:0;\n}\n.ips-choice{\n position:relative;border-radius:22px;overflow:hidden;cursor:pointer;\n min-height:240px;\n border:2px solid rgba(255,255,255,.10);\n background:rgba(255,255,255,.04);\n transition:transform .22s ease,border-color .22s,box-shadow .22s;\n text-align:left;\n}\n.ips-choice:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.22)}\n.ips-choice.sel{\n border-color:rgba(208,180,118,.85);\n box-shadow:0 0 0 3px rgba(208,180,118,.15),0 18px 40px rgba(0,0,0,.25);\n}\n.ips-choice-bg{\n position:absolute;inset:0;background-size:cover;background-position:center;\n transform:scale(1.03);transition:transform .4s ease;\n}\n.ips-choice:hover .ips-choice-bg{transform:scale(1.07)}\n.ips-choice::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(180deg,rgba(10,5,2,.05) 40%,rgba(10,5,2,.78) 100%);\n}\n\/* Real DOM overlay \u2014 replaces ::after so Elementor can't reset it *\/\n.ips-choice-overlay{\n position:absolute;inset:0;pointer-events:none;\n background:linear-gradient(180deg,rgba(10,5,2,.05) 40%,rgba(10,5,2,.78) 100%);\n z-index:0;\n}\n.ips-choice-body{\n position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 18px 18px;\n}\n.ips-choice-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}\n.ips-choice-name{font-size:1.2rem;font-weight:800}\n.ips-choice-desc{font-size:.98rem;color:rgba(255,255,255,.82);line-height:1.5}\n.ips-check{\n width:26px;height:26px;border-radius:50%;\n display:grid;place-items:center;\n border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);\n font-size:.78rem;font-weight:900;color:transparent;flex-shrink:0;\n transition:.18s;\n}\n.ips-choice.sel .ips-check{background:var(--ips-gold);border-color:var(--ips-gold);color:var(--ips-ink)}\n\n\/* \u2500\u2500\u2500 Step: build type \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 *\/\n.ips-build-wrap{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}\n.ips-build-tabs{\n display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;\n flex-shrink:0;\n}\n.ips-build-tab{\n padding:15px 12px;border-radius:14px;\n background:rgba(255,255,255,.08);\n border:1.5px solid rgba(255,255,255,.16);\n color:rgba(255,255,255,.78);\n font-family:Georgia,\"Times New Roman\",serif !important;\n font-weight:400;font-size:clamp(.95rem,1.2vw,1.12rem);letter-spacing:.02em;text-align:center;\n transition:.18s;\n}\n.ips-build-tab:hover{background:rgba(255,255,255,.14);color:#fff}\n.ips-build-tab.sel{\n background:var(--ips-gold-soft);\n border-color:var(--ips-gold);\n color:#fff;\n box-shadow:0 6px 18px rgba(0,0,0,.18);\n}\n.ips-build-panel{\n flex:1;min-height:260px;\n display:grid;grid-template-columns:.92fr 1.08fr;gap:18px;\n padding:18px;border-radius:22px;\n background:rgba(255,255,255,.04);\n border:1px solid rgba(255,255,255,.09);\n}\n.ips-build-info{display:flex;flex-direction:column;justify-content:center}\n.ips-build-info-eyebrow{\n font-size:clamp(.72rem,1vw,.82rem);font-weight:800;letter-spacing:.16em;text-transform:uppercase;\n color:var(--ips-gold);margin-bottom:10px;\n}\n.ips-build-info-name{\n font-family:Georgia,serif !important;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;\n margin-bottom:10px;\n}\n.ips-build-info-desc{\n font-size:clamp(.9rem,1.2vw,1.06rem);color:rgba(255,255,255,.76);line-height:1.58;margin-bottom:16px;\n}\n.ips-build-info-action{\n display:inline-flex;align-items:center;gap:8px;\n padding:10px 14px;border-radius:999px;\n background:rgba(255,255,255,.10);\n border:1px solid rgba(255,255,255,.16);\n color:#fff;font-size:clamp(.85rem,1vw,.96rem);font-weight:700;\n width:fit-content;transition:.18s;\n}\n.ips-build-info-action:hover{background:rgba(255,255,255,.18)}\n.ips-gallery-icon{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:14px;flex-shrink:0}\n.ips-gallery-icon span{display:block;height:6px;border-radius:2px;background:currentColor}\n\n.ips-build-gallery{\n display:grid;\n grid-template-columns:1.1fr 1fr;\n grid-template-rows:1fr 1fr;\n gap:10px;min-height:0;\n}\n.ips-gallery-tile{\n border-radius:16px;overflow:hidden;\n background-size:cover;background-position:center;\n min-height:100px;\n transition:transform .28s ease,box-shadow .28s ease;\n cursor:pointer;\n position:relative;\n}\n.ips-gallery-tile:hover{transform:scale(1.02);box-shadow:0 14px 30px rgba(0,0,0,.25)}\n.ips-gallery-tile.tall{grid-row:span 2}\n.ips-gallery-more{\n position:absolute;inset:0;\n display:grid;place-items:center;\n background:linear-gradient(180deg,rgba(10,5,2,.20),rgba(10,5,2,.72));\n color:#fff;font-size:.9rem;font-weight:700;\n opacity:0;transition:opacity .2s;\n}\n.ips-gallery-tile.more-overlay .ips-gallery-more{opacity:1}\n.ips-gallery-tile:hover .ips-gallery-more{opacity:1}\n\n\/* \u2500\u2500\u2500 Step: style (2 large cards) \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 *\/\n.ips-style-grid{\n display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;\n flex:1;min-height:0;\n}\n.ips-style-card{\n position:relative;border-radius:24px;overflow:hidden;cursor:pointer;\n border:2px solid rgba(255,255,255,.10);\n transition:transform .22s,border-color .22s,box-shadow .22s;\n min-height:210px;text-align:left;\n}\n.ips-style-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.2)}\n.ips-style-card.sel{\n border-color:rgba(208,180,118,.85);\n box-shadow:0 0 0 3px rgba(208,180,118,.15);\n}\n.ips-style-bg{\n position:absolute;inset:0;background-size:cover;background-position:center;\n transition:transform .4s ease;\n}\n.ips-style-card:hover .ips-style-bg{transform:scale(1.04)}\n.ips-style-card::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(180deg,rgba(8,4,2,.08),rgba(8,4,2,.72));\n}\n.ips-style-check{\n position:absolute;top:14px;right:14px;z-index:2;\n width:28px;height:28px;border-radius:50%;\n display:grid;place-items:center;\n border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);\n font-weight:900;font-size:.84rem;color:transparent;transition:.18s;\n}\n.ips-style-card.sel .ips-style-check{background:var(--ips-gold);border-color:var(--ips-gold);color:var(--ips-ink)}\n\/* Real DOM overlay for style cards *\/\n.ips-style-overlay{\n position:absolute;inset:0;pointer-events:none;\n background:linear-gradient(180deg,rgba(8,4,2,.08),rgba(8,4,2,.72));\n z-index:0;\n}\n.ips-style-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px}\n.ips-style-name{font-family:Georgia,serif !important;font-size:1.45rem;margin-bottom:6px}\n.ips-style-desc{font-size:.88rem;color:rgba(255,255,255,.78);line-height:1.5}\n.ips-style-card:last-child{grid-column:auto}\n\n\/* \u2500\u2500\u2500 Step: scale (slider + photo) \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 *\/\n.ips-scale-grid{\n display:grid;grid-template-columns:1fr 1fr;gap:16px;\n flex:1;min-height:240px;align-items:stretch;\n}\n.ips-scale-panel{\n border-radius:24px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.10);\n padding:20px;display:flex;flex-direction:column;justify-content:flex-start;\n}\n.ips-scale-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:8px}\n.ips-scale-row h3{font-size:clamp(.75rem,1vw,.88rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ips-gold)}\n.ips-scale-val{font-family:Georgia,\"Times New Roman\",serif !important;font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:400;color:#fff;line-height:1.1}\n.ips-scale-slider{\n width:100%;accent-color:#d2b973;\n height:6px;margin:8px 0 8px;cursor:pointer;\n}\n.ips-scale-ticks{display:flex;justify-content:space-between;color:rgba(255,255,255,.58);font-size:clamp(.8rem,1vw,.92rem)}\n.ips-scale-desc{\n margin-top:12px;padding-top:0;\n font-size:clamp(.92rem,1.2vw,1.06rem);color:rgba(255,255,255,.74);line-height:1.5;\n}\n.ips-scale-photo{\n border-radius:24px;overflow:hidden;position:relative;min-height:220px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.10);\n}\n.ips-scale-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .28s}\n.ips-scale-photo::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(180deg,transparent 50%,rgba(8,4,2,.45));\n}\n\n\/* \u2500\u2500\u2500 Step: timing \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\u2500\u2500\u2500\u2500 *\/\n.ips-timing-view .ips-step-head{margin-bottom:12px}\n.ips-timing-view .ips-timing-grid{flex:0 0 auto}\n.ips-timing-view .ips-actions{margin-top:20px !important;padding-top:16px !important}\n.ips-timing-grid{\n display:grid;grid-template-columns:1fr;gap:12px;\n flex:0 0 auto;min-height:auto;align-content:start;\n}\n.ips-timing-card{\n text-align:left;padding:0;border-radius:20px;overflow:hidden;\n background:rgba(255,255,255,.10);\n border:1.5px solid rgba(255,255,255,.18);\n transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;\n}\n.ips-timing-card-inner{\n display:flex;align-items:center;justify-content:space-between;gap:20px;\n padding:26px 30px;\n}\n.ips-timing-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.18)}\n.ips-timing-card.sel{\n border-color:rgba(208,180,118,.90);\n background:rgba(208,180,118,.13);\n box-shadow:0 0 0 2px rgba(208,180,118,.22),0 10px 28px rgba(0,0,0,.18);\n}\n.ips-timing-copy{display:flex;flex-direction:column;gap:5px;flex:1 1 auto}\n.ips-timing-label{\n display:block;\n font-family:Georgia,\"Times New Roman\",serif !important;\n font-size:clamp(1.18rem,2.2vw,1.9rem);font-weight:400;line-height:1.1;\n color:var(--ips-gold);\n}\n.ips-timing-copy span{display:block;font-size:clamp(.88rem,1.4vw,1.12rem);line-height:1.5;color:rgba(255,255,255,.80)}\n.ips-timing-radio{\n width:28px;height:28px;border-radius:50%;flex-shrink:0;\n border:2px solid rgba(255,255,255,.30);\n background:transparent;\n transition:border-color .18s,background .18s;\n}\n.ips-timing-card.sel .ips-timing-radio{\n border-color:var(--ips-gold);\n background:var(--ips-gold);\n box-shadow:0 0 0 3px rgba(208,180,118,.20);\n}\n\n\/* \u2500\u2500\u2500 Step: contact \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\u2500\u2500\u2500 *\/\n.ips-contact-grid{\n display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;\n flex:1;min-height:0;align-items:start;\n}\n.ips-summary{\n border-radius:18px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.10);\n padding:20px;position:sticky;top:0;\n}\n.ips-summary-title{\n font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;\n color:rgba(255,255,255,.58);margin-bottom:10px;\n}\n.ips-form{\n border-radius:18px;\n background:rgba(255,255,255,.06);\n border:1px solid rgba(255,255,255,.10);\n padding:20px;\n}\n.ips-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}\n.ips-field{display:grid;gap:4px}\n.ips-field.full{grid-column:1\/-1}\n.ips-field-label{font-size:clamp(.78rem,1vw,.9rem);font-weight:700;color:rgba(255,255,255,.82)}\n.ips-input,\n.ips-select,\n.ips-textarea{\n width:100%;border-radius:10px;\n border:1px solid rgba(255,255,255,.14);\n background:rgba(255,255,255,.08);\n color:#fff;padding:9px 12px;outline:none;\n transition:border-color .16s,box-shadow .16s,background .16s;\n}\n.ips-input::placeholder,\n.ips-textarea::placeholder{color:rgba(255,255,255,.38)}\n.ips-input:focus,\n.ips-select:focus,\n.ips-textarea:focus{\n border-color:rgba(208,180,118,.85);\n box-shadow:0 0 0 3px rgba(208,180,118,.14);\n background:rgba(255,255,255,.12);\n}\n.ips-select option{color:#111;background:#fff}\n.ips-textarea{min-height:86px;resize:vertical}\n\n.ips-contact-view{padding-top:10px}\n.ips-contact-view .ips-step-head{margin-bottom:8px}\n.ips-contact-view .ips-title{font-size:clamp(1.9rem,2.55vw,2.35rem);line-height:1.02;margin-bottom:6px}\n.ips-contact-view .ips-lead{font-size:.95rem;max-width:48ch;margin-bottom:0}\n.ips-contact-grid.compact{grid-template-columns:.76fr 1.24fr;gap:10px;align-items:stretch}\n.ips-summary-compact{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n.ips-summary-chip{\n padding:9px 11px;border-radius:14px;\n background:rgba(255,255,255,.05);\n border:1px solid rgba(255,255,255,.08);\n}\n.ips-summary-chip span{display:block}\n.ips-summary-chip span:first-child{font-size:clamp(.66rem,.9vw,.76rem);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.54);margin-bottom:4px}\n.ips-summary-chip span:last-child{font-size:clamp(.86rem,1.1vw,1rem);font-weight:700;line-height:1.28}\n.ips-form.compact{padding:12px}\n.ips-form.compact .ips-form-grid{gap:6px}\n.ips-form.compact .ips-input,\n.ips-form.compact .ips-select,\n.ips-form.compact .ips-textarea{padding:9px 12px}\n.ips-contact-actions{\n display:flex;gap:10px;align-items:center;flex-wrap:nowrap;\n margin-top:6px;padding-top:6px;\n}\n.ips-contact-actions .ips-btn{min-width:150px}\n.ips-contact-submit{\n min-width:220px;\n padding-left:26px;padding-right:26px;\n box-shadow:0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24);\n}\n.ips-privacy{margin-top:4px;font-size:.72rem;color:rgba(255,255,255,.50);line-height:1.3}\n\n\/* \u2500\u2500\u2500 Lightbox (expanded gallery) \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 *\/\n.ips-lightbox{\n position:fixed;inset:0;z-index:9998;display:none;\n background:rgba(8,4,2,.88);\n backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\n padding:24px;align-items:center;justify-content:center;\n}\n.ips-lightbox.open{display:flex}\n.ips-lightbox-inner{\n width:min(1100px,100%);\n height:92vh;\n display:flex;\n flex-direction:column;\n overflow:hidden;\n}\n.ips-lightbox-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-shrink:0}\n.ips-lightbox-name{font-family:Georgia,serif !important;font-size:2rem;line-height:1.1}\n.ips-lightbox-desc{margin-top:6px;font-size:.92rem;color:rgba(255,255,255,.72);max-width:58ch;line-height:1.55}\n.ips-lightbox-close{\n width:40px;height:40px;border-radius:50%;\n background:rgba(255,255,255,.10);\n border:1px solid rgba(255,255,255,.14);\n color:#fff;font-size:1.05rem;flex-shrink:0;\n display:grid;place-items:center;transition:.18s;\n}\n.ips-lightbox-close:hover{background:rgba(255,255,255,.20)}\n.ips-lightbox-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;flex:1;min-height:0}\n.ips-lb-tile{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.06)}\n.ips-lb-tile.tall{grid-row:span 2}\n.ips-lb-tile img{width:100%;height:100%;object-fit:cover}\n.ips-lightbox-footer{\n margin-top:20px;\n padding-top:18px;\n border-top:1px solid rgba(255,255,255,.14);\n background:rgba(8,4,2,.88);\n display:flex;\n gap:12px;\n flex-shrink:0;\n}\n.ips-lb-back-btn{\n flex:1;\n background:rgba(255,255,255,.13);\n color:#fff;\n border:none;\n}\n.ips-lb-back-btn:hover:not(:disabled){background:rgba(255,255,255,.20)}\n.ips-lb-select-btn{\n flex:1;\n background:#cfb36f;\n color:#20150b;\n border:none;\n box-shadow:0 14px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.18);\n font-weight:800;\n}\n.ips-lb-select-btn:hover:not(:disabled){background:#d5bb79}\n\n\/* \u2500\u2500\u2500 Result modal \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\u2500\u2500\u2500\u2500 *\/\n.ips-result{\n position:fixed;inset:0;z-index:9999;display:none;\n background:rgba(8,4,2,.72);\n backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\n padding:20px;align-items:center;justify-content:center;\n}\n.ips-result.open{display:flex}\n.ips-result-card{\n width:min(1120px,100%);max-height:94vh;overflow:auto;\n background:linear-gradient(160deg,#f8f1e7,#ecdfd0);\n color:var(--ips-text);border-radius:28px;\n border:1px solid var(--ips-line);\n box-shadow:0 44px 120px rgba(8,4,2,.32);\n padding:24px;scrollbar-width:none;\n}\n.ips-result-card::-webkit-scrollbar{display:none}\n.ips-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}\n.ips-result-eyebrow{font-size:clamp(.74rem,1vw,.85rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ips-gold-2);margin-bottom:10px}\n.ips-result-head h3{font-family:Georgia,serif !important;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;color:var(--ips-text)}\n.ips-result-sub{margin-top:10px;color:var(--ips-muted);font-size:clamp(.88rem,1.1vw,1.02rem);line-height:1.5;max-width:62ch}\n.ips-result-close{\n width:40px;height:40px;border-radius:50%;\n background:#fff;border:1px solid var(--ips-line);\n font-size:1.05rem;cursor:pointer;\n box-shadow:0 6px 16px rgba(0,0,0,.08);\n flex-shrink:0;display:grid;place-items:center;transition:.18s;\n}\n.ips-result-close:hover{background:#f5ede1}\n.ips-result-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:14px;margin-bottom:8px}\n.ips-result-box{background:rgba(255,255,255,.64);border:1px solid var(--ips-line);border-radius:18px;padding:18px}\n.ips-result-box-label{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ips-muted);margin-bottom:10px}\n.ips-price{font-size:clamp(1.8rem,3.3vw,2.8rem);font-weight:900;line-height:1.02;color:var(--ips-text)}\n.ips-price-caveat{margin-top:10px;font-size:clamp(.82rem,1vw,.95rem);color:var(--ips-muted);line-height:1.48}\n.ips-result-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--ips-line);font-size:.88rem}\n.ips-result-row:last-child{border-bottom:0}\n.ips-result-row span:first-child{color:var(--ips-muted)}\n.ips-result-row span:last-child{font-weight:700;text-align:right}\n.ips-next{border-radius:18px;background:rgba(138,122,76,.07);border:1px solid rgba(138,122,76,.16);padding:12px 16px 10px;margin-bottom:10px}\n.ips-next h4{font-size:.94rem;font-weight:800;margin-bottom:6px}\n.ips-next-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}\n.ips-next-item{display:flex;gap:10px;align-items:flex-start}\n.ips-next-num{\n width:26px;height:26px;border-radius:50%;\n background:var(--ips-gold-2);color:#fff;\n font-size:.8rem;font-weight:800;\n display:grid;place-items:center;flex-shrink:0;\n}\n.ips-next-item strong{display:block;font-size:.85rem;margin-bottom:1px}\n.ips-next-item span{font-size:.79rem;color:var(--ips-muted);line-height:1.38}\n.ips-result-actions{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;align-items:center}\n\n@media (max-width:1180px){\n .ips-shell{padding-top:56px}\n .ips-brand{padding:8px 14px 8px 12px;gap:10px}\n .ips-brand-logo{height:36px}\n .ips-brand-label{font-size:.76rem;padding:7px 10px}\n}\n\/* \u2500\u2500\u2500 Responsive \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\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width:960px){\n .ips-estimator{min-height:100svh;overflow:visible}\n .ips-intro,\n .ips-choice-grid,\n .ips-build-wrap,\n .ips-style-grid,\n .ips-scale-grid,\n .ips-timing-grid,\n .ips-contact-grid{flex:0 0 auto;min-height:auto}\n .ips-shell{padding:78px 16px 20px;align-items:flex-start}\n \/* Intro step only: re-centre vertically so the compact welcome screen\n doesn't leave a pool of empty space below on short mobile viewports. *\/\n .ips-estimator.ips-at-intro .ips-shell{align-items:center;padding-top:78px;padding-bottom:78px}\n .ips-card{\n height:auto;min-height:0;\n max-height:none;\n border-radius:24px;\n }\n .ips-viewport{overflow:visible}\n .ips-view{padding:22px 22px 18px;overflow:visible;height:auto}\n .ips-card-head{padding:20px 22px 0}\n .ips-choice-grid{grid-template-columns:1fr;gap:10px}\n .ips-choice{min-height:185px}\n .ips-build-tabs{\n grid-auto-flow:row;\n grid-auto-columns:unset;\n grid-template-columns:repeat(2,1fr);\n gap:8px;\n }\n .ips-build-panel{\n grid-template-columns:1fr;\n padding:12px;gap:10px;min-height:0;\n }\n .ips-build-gallery{\n grid-template-columns:1fr 1fr;\n grid-template-rows:repeat(2,120px);\n }\n .ips-gallery-tile.tall{grid-row:span 1}\n .ips-style-grid{grid-template-columns:1fr;gap:10px}\n .ips-style-card{min-height:200px}\n .ips-scale-grid{grid-template-columns:1fr;gap:12px}\n .ips-scale-panel{padding:18px}\n .ips-scale-photo{min-height:180px}\n .ips-timing-grid{grid-template-columns:1fr;gap:10px}\n .ips-timing-card-inner{padding:18px 20px}\n .ips-timing-label{font-size:1.18rem}\n .ips-timing-copy span{font-size:.88rem}\n .ips-contact-grid,\n .ips-contact-grid.compact{grid-template-columns:1fr;gap:10px}\n .ips-summary{display:none}\n .ips-summary-compact{grid-template-columns:1fr 1fr}\n .ips-textarea{display:none}\n .ips-field:has(.ips-textarea){display:none}\n .ips-actions{margin-top:16px !important;padding-top:14px !important}\n .ips-lightbox-inner{height:auto;max-height:92vh;overflow:auto;scrollbar-width:none}\n .ips-lightbox-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;flex:none}\n .ips-lb-tile.tall{grid-row:span 1}\n .ips-lb-tile{aspect-ratio:4\/3}\n .ips-result-grid{grid-template-columns:1fr}\n .ips-next-list{grid-template-columns:1fr}\n}\n@media (max-width:620px){\n .ips-estimator{min-height:100svh}\n .ips-intro,\n .ips-choice-grid,\n .ips-build-wrap,\n .ips-style-grid,\n .ips-scale-grid,\n .ips-timing-grid,\n .ips-contact-grid{flex:0 0 auto;min-height:auto}\n .ips-shell{padding:72px 10px 16px;align-items:flex-start}\n \/* Intro step only: vertical centring for the welcome screen. *\/\n .ips-estimator.ips-at-intro .ips-shell{align-items:center;padding-top:72px;padding-bottom:72px}\n .ips-card{border-radius:20px;min-height:auto}\n .ips-card-head{padding:18px 18px 0;gap:12px}\n .ips-prog-track{flex:0 1 140px;min-width:120px}\n .ips-view{padding:18px 16px 14px;overflow:visible}\n .ips-topbar{width:calc(100% - 20px);padding:14px 0;gap:8px}\n .ips-brand,.ips-return{padding:8px 12px;font-size:.76rem}\n .ips-brand{gap:8px;padding:8px 12px 8px 10px}\n .ips-brand-logo{height:28px}\n .ips-brand-label{font-size:.72rem;padding:6px 10px}\n .ips-return span.ips-full{display:none}\n .ips-display{font-size:2.7rem}\n .ips-intro{justify-content:center;text-align:center;align-items:center}\n .ips-step-head{margin-bottom:16px}\n .ips-title{font-size:2rem}\n .ips-pills{gap:10px;justify-content:center}\n .ips-pill{padding:11px 16px;font-size:1rem}\n .ips-form-grid{grid-template-columns:1fr}\n .ips-scale-panel{padding:16px}\n .ips-actions{flex-direction:row;gap:10px;justify-content:center;margin-top:14px !important;padding-top:12px !important}\n .ips-timing-view .ips-actions{margin-top:14px !important;padding-top:12px !important}\n .ips-summary{display:none}\n .ips-textarea{display:none}\n .ips-field:has(.ips-textarea){display:none}\n .ips-summary-compact{grid-template-columns:1fr 1fr}\n .ips-actions .ips-btn{width:auto;min-width:150px;justify-content:center}\n .ips-contact-actions{flex-direction:column;align-items:stretch}\n .ips-contact-actions .ips-btn,.ips-contact-submit{width:100%;min-width:0}\n .ips-build-tabs{grid-template-columns:repeat(2,1fr)}\n .ips-build-tab{font-size:1rem;padding:16px 10px}\n .ips-build-info-name{font-size:1.3rem}\n .ips-build-info-desc{margin-bottom:10px}\n .ips-result-card{padding:20px;border-radius:22px}\n .ips-result-actions{flex-direction:column;gap:12px}\n .ips-result-actions .ips-btn{width:100%;justify-content:center}\n .ips-lightbox{padding:14px}\n .ips-lightbox-name{font-size:1.5rem}\n .ips-lightbox-desc{display:none}\n .ips-lightbox-grid{grid-template-rows:130px 130px 130px}\n .ips-lightbox-footer{margin-top:28px;padding-top:18px;gap:10px}\n}\n\n\/* \u2500\u2500\u2500 Live-site CSS bleed defence \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\n Elementor's global stylesheet can override font-family and\n text-transform on arbitrary descendants. These rules use\n !important only on properties that Elementor is known to clobber.\n Eyebrow elements intentionally keep text-transform:uppercase so\n they are excluded here. \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 *\/\n\n\/* Block Elementor text-transform on non-eyebrow elements *\/\n.ips-estimator .ips-title,\n.ips-estimator .ips-display,\n.ips-estimator .ips-lead,\n.ips-estimator .ips-choice-name,\n.ips-estimator .ips-choice-desc,\n.ips-estimator .ips-build-info-name,\n.ips-estimator .ips-build-info-desc,\n.ips-estimator .ips-build-tab,\n.ips-estimator .ips-style-name,\n.ips-estimator .ips-style-desc,\n.ips-estimator .ips-timing-label,\n.ips-estimator .ips-timing-copy span,\n.ips-estimator .ips-scale-val,\n.ips-estimator .ips-scale-desc,\n.ips-estimator .ips-lightbox-name,\n.ips-estimator .ips-lightbox-desc,\n.ips-estimator .ips-prog-label strong,\n.ips-estimator .ips-prog-label span,\n.ips-estimator .ips-pill,\n.ips-estimator .ips-btn,\n.ips-estimator .ips-field-label,\n.ips-estimator .ips-input,\n.ips-estimator .ips-select,\n.ips-estimator .ips-textarea,\n.ips-estimator .ips-privacy {\n text-transform: none !important;\n}\n\n\/* Block Elementor heading\/link colour on white-text elements *\/\n.ips-estimator .ips-choice-name,\n.ips-estimator .ips-style-name,\n.ips-estimator .ips-scale-val,\n.ips-estimator .ips-lightbox-name,\n.ips-estimator .ips-prog-label strong,\n.ips-estimator .ips-build-info-name {\n color: #fff !important;\n}\n.ips-estimator .ips-choice-desc,\n.ips-estimator .ips-style-desc,\n.ips-estimator .ips-build-info-desc,\n.ips-estimator .ips-scale-desc,\n.ips-estimator .ips-lightbox-desc,\n.ips-estimator .ips-lead {\n color: rgba(255,255,255,.82) !important;\n}\n\n\/* Ensure card body text stays above the DOM overlay divs *\/\n.ips-estimator .ips-choice-body {\n position: absolute !important;\n z-index: 1 !important;\n}\n.ips-estimator .ips-style-body {\n position: absolute !important;\n z-index: 1 !important;\n}\n\/* DOM overlay divs must be positioned \u2014 Elementor can't reset a real element *\/\n.ips-estimator .ips-choice-overlay,\n.ips-estimator .ips-style-overlay {\n position: absolute !important;\n inset: 0 !important;\n pointer-events: none !important;\n z-index: 0 !important;\n}\n\n\/* Ensure photo card containers stay positioned so ::after overlays render *\/\n.ips-estimator .ips-choice,\n.ips-estimator .ips-style-card {\n position: relative !important;\n overflow: hidden !important;\n}\n.ips-estimator .ips-choice-bg,\n.ips-estimator .ips-style-bg {\n position: absolute !important;\n}\n.ips-estimator .ips-scale-photo {\n position: relative !important;\n overflow: hidden !important;\n}\n\n\/* \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* Standalone body reset \u2014 scoped so it won't fight Elementor when embedded.\n Host pages should wrap the markup in <div class=\"ips-standalone\">.\n Elementor widget embeds should omit this wrapper. *\/\n.ips-standalone,\n.ips-standalone body{\n margin:0;padding:0;background:#120c08;\n overflow-x:hidden;overflow-y:auto;min-height:100%;\n}\n<\/style>\n<\/head>\n<body class=\"ips-standalone\">\n\n<!-- Root wrapper \u2014 all styles scoped under this class. Safe to drop into\n an Elementor HTML widget; outer <body class=\"ips-standalone\"> is only\n used for the standalone demo page. -->\n<div class=\"ips-estimator\" id=\"ipsEstimator\">\n\n <!-- Stage background (cross-fades between steps) -->\n <div class=\"ips-stage\" id=\"ipsStage\">\n <div class=\"ips-stage-bg\" id=\"ipsStageBg\"><\/div>\n <div class=\"ips-stage-bg-next\" id=\"ipsStageBgNext\"><\/div>\n <div class=\"ips-stage-mask\"><\/div>\n <\/div>\n\n <!-- Floating top pills -->\n <div class=\"ips-topbar\">\n <div class=\"ips-brand\"><span class=\"ips-brand-label\">INTERPOOL SPA<\/span><\/div>\n <a class=\"ips-return\" href=\"\/en\/\" aria-label=\"Back to site\">\u2190 <span class=\"ips-full\">Back to site<\/span><\/a>\n <\/div>\n\n <!-- Centred glass card -->\n <div class=\"ips-shell\">\n <div class=\"ips-card\">\n <div class=\"ips-card-head\">\n <div class=\"ips-prog-label\">\n <strong id=\"ipsProgLabel\">Welcome<\/strong>\n <span id=\"ipsProgMeta\">Step 1 of 7<\/span>\n <\/div>\n <div class=\"ips-prog-track\"><div class=\"ips-prog-fill\" id=\"ipsProgFill\"><\/div><\/div>\n <\/div>\n <div class=\"ips-viewport\">\n <div class=\"ips-track\" id=\"ipsTrack\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Gallery lightbox -->\n <div class=\"ips-lightbox\" id=\"ipsLightbox\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ipsLbName\">\n <div class=\"ips-lightbox-inner\">\n <div class=\"ips-lightbox-top\">\n <div>\n <div class=\"ips-lightbox-name\" id=\"ipsLbName\"><\/div>\n <div class=\"ips-lightbox-desc\" id=\"ipsLbDesc\"><\/div>\n <\/div>\n <button class=\"ips-lightbox-close\" id=\"ipsLbClose\" aria-label=\"Close gallery\">\u2715<\/button>\n <\/div>\n <div class=\"ips-lightbox-grid\" id=\"ipsLbGrid\"><\/div>\n <div class=\"ips-lightbox-footer\">\n <button class=\"ips-btn ips-lb-back-btn\" id=\"ipsLbBack\" type=\"button\">\u2190 Back<\/button>\n <button class=\"ips-btn ips-lb-select-btn\" id=\"ipsLbSelect\" type=\"button\">I Want This<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Result modal -->\n <div class=\"ips-result\" id=\"ipsResult\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"ips-result-card\">\n <div class=\"ips-result-head\">\n <div>\n <div class=\"ips-result-eyebrow\">Your personalised estimate<\/div>\n <h3>Let's bring your vision to life.<\/h3>\n <p class=\"ips-result-sub\">Here is your indicative investment range based on the selections you've made. Our team will reach out personally to discuss your project, refine the scope, and provide a detailed proposal \u2014 at no cost.<\/p>\n <\/div>\n <button class=\"ips-result-close\" id=\"ipsResultClose\" aria-label=\"Close\">\u2715<\/button>\n <\/div>\n <div class=\"ips-result-grid\">\n <div class=\"ips-result-box\">\n <div class=\"ips-result-box-label\">Estimated investment range<\/div>\n <div class=\"ips-price\" id=\"ipsPrice\">\u2014<\/div>\n <div class=\"ips-price-caveat\">This is a planning guide to help you budget with confidence. Final pricing is confirmed after a site visit, design consultation, and review of your property's specific requirements.<\/div>\n <\/div>\n <div class=\"ips-result-box\">\n <div class=\"ips-result-box-label\">Your project<\/div>\n <div id=\"ipsResultSummary\"><\/div>\n <\/div>\n <\/div>\n <div class=\"ips-next\">\n <h4>What happens next<\/h4>\n <div class=\"ips-next-list\">\n <div class=\"ips-next-item\"><div class=\"ips-next-num\">1<\/div><div><strong>We receive your request<\/strong><span>Your details and selections go directly to the Interpool project team.<\/span><\/div><\/div>\n <div class=\"ips-next-item\"><div class=\"ips-next-num\">2<\/div><div><strong>A consultant calls you within 24 hours<\/strong><span>We'll discuss your vision, answer questions, and refine the scope together.<\/span><\/div><\/div>\n <div class=\"ips-next-item\"><div class=\"ips-next-num\">3<\/div><div><strong>You receive a full proposal \u2014 free<\/strong><span>A detailed concept and itemised quote, tailored to your project and property.<\/span><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"ips-result-actions\">\n <button class=\"ips-btn ips-btn-close-result\" id=\"ipsResultClose2\" type=\"button\">Close<\/button>\n <a class=\"ips-btn ips-btn-line\" id=\"ipsLineLink\" href=\"https:\/\/page.line.me\/interpoolspa\" target=\"_blank\" rel=\"noopener\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 5.83 2 10.43c0 4.07 3.42 7.49 8.05 8.14.31.07.74.21.85.48.1.25.06.63.03.88l-.14.83c-.04.25-.2.97.85.53s5.61-3.3 7.66-5.65h-.01C21.36 13.36 22 11.96 22 10.43 22 5.83 17.52 2 12 2zm-3.08 11.11h-2.2a.5.5 0 0 1-.5-.5V8.56a.5.5 0 0 1 1 0v3.55h1.7a.5.5 0 1 1 0 1zm1.62-.5a.5.5 0 0 1-1 0V8.56a.5.5 0 0 1 1 0v4.05zm4.14 0a.5.5 0 0 1-.34.47.5.5 0 0 1-.56-.12L11.97 10v2.61a.5.5 0 0 1-1 0V8.56a.5.5 0 0 1 .34-.47.5.5 0 0 1 .56.12l1.81 2.46V8.56a.5.5 0 0 1 1 0v4.05zm3.12-2.85a.5.5 0 1 1 0 1h-1.7v.85h1.7a.5.5 0 1 1 0 1h-2.2a.5.5 0 0 1-.5-.5V8.56a.5.5 0 0 1 .5-.5h2.2a.5.5 0 1 1 0 1h-1.7v.7h1.7z\"\/><\/svg> Chat on LINE<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n(function(){\n\n\/\/ \u2500\u2500\u2500 Data \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst D = {\n bg:{\n intro: 'https:\/\/images.unsplash.com\/photo-1644413638617-02369c89c156?auto=format&fit=crop&w=1800&q=80',\n setting: 'https:\/\/images.unsplash.com\/photo-1707327085506-c4f31c951a1a?auto=format&fit=crop&w=1800&q=80',\n build: 'https:\/\/images.unsplash.com\/photo-1728404259075-209cfb5bb89c?auto=format&fit=crop&w=1800&q=80',\n style: 'https:\/\/images.pexels.com\/photos\/31817157\/pexels-photo-31817157.jpeg?auto=compress&cs=tinysrgb&w=1800',\n scale: 'https:\/\/images.unsplash.com\/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1800&q=80',\n timing: 'https:\/\/images.unsplash.com\/photo-1507652313519-d4e9174996dd?auto=format&fit=crop&w=1800&q=80',\n contact: 'https:\/\/images.unsplash.com\/photo-1713270176378-45fbf4a27099?auto=format&fit=crop&w=1800&q=80'\n },\n setting:[\n {id:'home', name:'My Home', desc:'Private villa, residence, or personal wellness retreat.', img:'https:\/\/images.unsplash.com\/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1200&q=80'},\n {id:'hotel', name:'Hotel & Resort', desc:'Guest-facing wellness experience with hospitality-grade finish.',img:'https:\/\/images.unsplash.com\/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=1200&q=80'},\n {id:'business', name:'My Business', desc:'Commercial spa, wellness venue, or branded concept space.', img:'https:\/\/images.unsplash.com\/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&w=1200&q=80'}\n ],\n build:[\n {id:'pool', name:'Pool', desc:'Custom pools, infinity edges, and swim spas built for visual impact and lasting enjoyment.',\n img:'https:\/\/images.pexels.com\/photos\/31817156\/pexels-photo-31817156.jpeg?auto=compress&cs=tinysrgb&w=1400',\n gallery:['https:\/\/images.pexels.com\/photos\/31817156\/pexels-photo-31817156.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/31817150\/pexels-photo-31817150.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/31817157\/pexels-photo-31817157.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/27626186\/pexels-photo-27626186.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/32226001\/pexels-photo-32226001.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/24807139\/pexels-photo-24807139.jpeg?auto=compress&cs=tinysrgb&w=1400']},\n {id:'onsen', name:'Onsen Bath', desc:'Ritual-led hot soaking baths with premium stone, timber, and mineral water design.',\n img:'https:\/\/images.unsplash.com\/photo-1708789715236-e5060618d118?auto=format&fit=crop&w=1400&q=80',\n gallery:['https:\/\/images.unsplash.com\/photo-1708789715236-e5060618d118?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1644413638617-02369c89c156?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1707327085506-c4f31c951a1a?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1708789715218-e1d9e8ae68ca?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1610375233775-6e0166927193?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1706017597480-24b0a4d9a943?auto=format&fit=crop&w=1400&q=80']},\n {id:'sauna', name:'Sauna', desc:'Traditional Finnish or infrared sauna spaces with artisan timber craftsmanship and cedar finishes.',\n img:'https:\/\/images.unsplash.com\/photo-1755610146287-2dcdbec596b6?auto=format&fit=crop&w=1400&q=80',\n gallery:['https:\/\/images.unsplash.com\/photo-1755610146287-2dcdbec596b6?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1728404259075-209cfb5bb89c?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1713270176378-45fbf4a27099?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1676452458169-318fd3b9a98f?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1592990379716-aec6e89a6a69?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1655194911126-6032bdcccc9d?auto=format&fit=crop&w=1400&q=80']},\n {id:'steam', name:'Steam Room', desc:'Wet steam enclosures with full mosaic tile finish \u2014 built for home sanctuaries and commercial spas alike.',\n img:'https:\/\/images.unsplash.com\/photo-1557415750-61d89e10368b?auto=format&fit=crop&w=1400&q=80',\n gallery:['https:\/\/images.unsplash.com\/photo-1557415750-61d89e10368b?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1583417657209-d3dd44dc9c09?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1657803778483-2b289d0f22c3?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1706017597480-24b0a4d9a943?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1610375233775-6e0166927193?auto=format&fit=crop&w=1400&q=80','https:\/\/images.unsplash.com\/photo-1644413638617-02369c89c156?auto=format&fit=crop&w=1400&q=80']},\n {id:'plunge',name:'Cold Plunge', desc:'Cold therapy and contrast recovery pools \u2014 a growing essential for performance-oriented wellness spaces.',\n img:'https:\/\/images.pexels.com\/photos\/22661869\/pexels-photo-22661869.jpeg?auto=compress&cs=tinysrgb&w=1400',\n gallery:['https:\/\/images.pexels.com\/photos\/22661869\/pexels-photo-22661869.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/9899878\/pexels-photo-9899878.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/9899894\/pexels-photo-9899894.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/30302449\/pexels-photo-30302449.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/12748396\/pexels-photo-12748396.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/33405520\/pexels-photo-33405520.jpeg?auto=compress&cs=tinysrgb&w=1400']},\n {id:'hydro', name:'Hydrotherapy',desc:'Therapeutic jet pools, contrast circuits, and water massage systems designed for recovery and deep wellness.',\n img:'https:\/\/images.pexels.com\/photos\/27777826\/pexels-photo-27777826.jpeg?auto=compress&cs=tinysrgb&w=1400',\n gallery:['https:\/\/images.pexels.com\/photos\/27777826\/pexels-photo-27777826.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/30583644\/pexels-photo-30583644.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/31189380\/pexels-photo-31189380.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/19737856\/pexels-photo-19737856.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/18971223\/pexels-photo-18971223.jpeg?auto=compress&cs=tinysrgb&w=1400','https:\/\/images.pexels.com\/photos\/24805054\/pexels-photo-24805054.jpeg?auto=compress&cs=tinysrgb&w=1400']}\n ],\n style:[\n {id:'natural', name:'Natural & Organic',desc:'Stone, timber, and earthy materials. A warm spa-retreat energy that feels rooted in the landscape.', img:'https:\/\/images.pexels.com\/photos\/28054849\/pexels-photo-28054849.jpeg?auto=compress&cs=tinysrgb&w=1400', mult:1.0},\n {id:'modern', name:'Modern & Minimal', desc:'Clean lines, polished surfaces, and precise detailing. A contemporary luxury statement.', img:'https:\/\/images.pexels.com\/photos\/26859026\/pexels-photo-26859026.jpeg?auto=compress&cs=tinysrgb&w=1400', mult:1.12},\n {id:'bespoke', name:'Bespoke', desc:'No templates, no boundaries. Your vision \u2014 materials, mood, and atmosphere \u2014 designed from scratch with our team.', img:'https:\/\/images.pexels.com\/photos\/27626185\/pexels-photo-27626185.jpeg?auto=compress&cs=tinysrgb&w=1800', mult:1.30}\n ],\n scale:{\n 1:{name:'Small', desc:'A focused, intimate scale \u2014 ideal for smaller sites or a more contained vision with thoughtful detailing.', img:'https:\/\/images.pexels.com\/photos\/27195984\/pexels-photo-27195984.jpeg?auto=compress&cs=tinysrgb&w=1400&h=900&fit=crop', mult:0.70},\n 2:{name:'Medium', desc:'A comfortable premium scale \u2014 the most popular choice for residential projects and boutique hotel features.',img:'https:\/\/images.unsplash.com\/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1400&h=900&q=80', mult:1.00},\n 3:{name:'Large', desc:'A more expansive build with greater visual presence, layered features, and experiential depth.', img:'https:\/\/images.pexels.com\/photos\/31817150\/pexels-photo-31817150.jpeg?auto=compress&cs=tinysrgb&w=1400&h=900&fit=crop', mult:1.62},\n 4:{name:'Luxury', desc:'A flagship-level direction. Highest complexity, premium imported materials, and presence that defines the property.',img:'https:\/\/images.pexels.com\/photos\/18971223\/pexels-photo-18971223.jpeg?auto=compress&cs=tinysrgb&w=1400&h=900&fit=crop', mult:2.45}\n },\n pricing:{\n base:{pool:1450000, onsen:950000, sauna:480000, steam:420000, plunge:380000, hydro:1100000},\n setting:{home:1.0, hotel:1.45, business:1.28}\n },\n timing:[\n {id:'asap', label:'Now', desc:'Ready to begin. Looking for a build partner.'},\n {id:'soon', label:'Soon', desc:'Serious about the project. Still working out the details.'},\n {id:'planning', label:'Later', desc:'Exploring options. Building toward a future launch.'}\n ],\n wa:'https:\/\/wa.me\/66818155934?text='\n};\n\nconst STEPS = ['intro','setting','build','style','scale','timing','contact'];\nconst STEP_LABELS = {\n intro:'Welcome',\n setting:'Project setting',\n build:'Build type',\n style:'Preferred style',\n scale:'Project scale',\n timing:'Build timing',\n contact:'Your details'\n};\n\n\/\/ App state\nconst st = {step:0, setting:null, build:'pool', style:null, scale:2, timeline:null,\n name:'', email:'', phone:'', location:'', notes:''};\n\n\/\/ \u2500\u2500\u2500 Element refs \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\u2500\u2500\u2500\u2500\u2500\u2500\nconst root = document.getElementById('ipsEstimator');\nconst stageBg = document.getElementById('ipsStageBg');\nconst stageBgNext= document.getElementById('ipsStageBgNext');\nconst track = document.getElementById('ipsTrack');\nconst progLabel = document.getElementById('ipsProgLabel');\nconst progMeta = document.getElementById('ipsProgMeta');\nconst progFill = document.getElementById('ipsProgFill');\n\n\/\/ \u2500\u2500\u2500 Helpers \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction thb(v){return '\u0e3f'+Math.round(v).toLocaleString('en-US')}\nfunction esc(s){return String(s||'').replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"')}\nfunction buildById(id){return D.build.find(x=>x.id===id) || D.build[0]}\nfunction settingById(id){return D.setting.find(x=>x.id===id)}\n\nfunction calcRange(){\n if(!st.setting || !st.build) return null;\n const styleMult = st.style ? (D.style.find(x=>x.id===st.style)?.mult || 1.0) : 1.0;\n const scaleMult = D.scale[st.scale].mult; \/\/ fixed bug: was D.scale_data(...)\n const mid = D.pricing.base[st.build] * D.pricing.setting[st.setting] * scaleMult * styleMult;\n return { lo: Math.round(mid*0.84 \/ 10000) * 10000,\n hi: Math.round(mid*1.30 \/ 10000) * 10000 };\n}\n\n\/\/ Preload every stage + step image so the cross-fade never triggers a\n\/\/ layout shift \/ flash while decoding.\nfunction preloadAll(){\n const urls = new Set();\n Object.values(D.bg).forEach(u=>urls.add(u));\n D.setting.forEach(s=>urls.add(s.img));\n D.build.forEach(b=>{urls.add(b.img); b.gallery.forEach(g=>urls.add(g));});\n D.style.forEach(s=>urls.add(s.img));\n Object.values(D.scale).forEach(s=>urls.add(s.img));\n urls.forEach(u=>{const i=new Image(); i.src=u;});\n}\n\nfunction setBg(key){\n const url = D.bg[key] || D.bg.intro;\n \/\/ If the background hasn't changed, do nothing at all.\n const current = stageBg.style.backgroundImage;\n const incoming = `url('${url}')`;\n if(current === incoming) return;\n\n \/\/ Load the new image into the top layer and animate it in.\n stageBgNext.style.backgroundImage = incoming;\n stageBgNext.style.animation = 'none';\n \/\/ Force reflow so removing 'none' triggers a fresh animation.\n stageBgNext.offsetWidth; \/\/ eslint-disable-line no-unused-expressions\n stageBgNext.style.animation = 'ips-bg-in .7s ease forwards';\n\n \/\/ Once faded in, promote to base layer and reset the top layer silently.\n clearTimeout(setBg._t);\n setBg._t = setTimeout(()=>{\n stageBg.style.backgroundImage = incoming;\n stageBgNext.style.animation = 'none';\n stageBgNext.style.backgroundImage = '';\n }, 720);\n}\n\n\/\/ \u2500\u2500\u2500 Templates \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction tplIntro(){return `\n <div class=\"ips-view\">\n <div class=\"ips-intro\">\n <div class=\"ips-eyebrow\">Luxury Wellness \u2014 Thailand<\/div>\n <h1 class=\"ips-display\">Design your dream<br>wellness space<\/h1>\n <p class=\"ips-lead\">A few visual choices. Your real budget range. Ready in under 2 minutes.<\/p>\n <div class=\"ips-pills\">\n <div class=\"ips-pill\"><span class=\"ips-pill-dot\"><\/span>No commitment<\/div>\n <div class=\"ips-pill\"><span class=\"ips-pill-dot\"><\/span>Real price ranges<\/div>\n <div class=\"ips-pill\"><span class=\"ips-pill-dot\"><\/span>Personal follow-up<\/div>\n <\/div>\n <div class=\"ips-actions\"><button class=\"ips-btn ips-btn-primary\" data-next>Start<\/button><\/div>\n <\/div>\n <\/div>`}\n\nfunction tplSetting(){return `\n <div class=\"ips-view\">\n <div class=\"ips-step-head\">\n <h2 class=\"ips-title\">Where will we build?<\/h2>\n <p class=\"ips-lead\">Choose the setting for your project.<\/p>\n <\/div>\n <div class=\"ips-choice-grid\">\n ${D.setting.map(s=>`\n <button class=\"ips-choice${st.setting===s.id?' sel':''}\" type=\"button\" data-set=\"${s.id}\">\n <div class=\"ips-choice-bg\" style=\"background-image:url('${s.img}')\"><\/div>\n <div class=\"ips-choice-overlay\"><\/div>\n <div class=\"ips-choice-body\">\n <div class=\"ips-choice-header\">\n <div class=\"ips-choice-name\">${s.name}<\/div>\n <div class=\"ips-check\">\u2713<\/div>\n <\/div>\n <div class=\"ips-choice-desc\">${s.desc}<\/div>\n <\/div>\n <\/button>`).join('')}\n <\/div>\n <div class=\"ips-actions\">\n <button class=\"ips-btn ips-btn-ghost\" data-back>Back<\/button>\n <button class=\"ips-btn ips-btn-primary\" data-next${st.setting?'':' disabled'}>Continue<\/button>\n <\/div>\n <\/div>`}\n\nfunction tplBuild(){\n const b = buildById(st.build);\n \/\/ Gallery: first 4 tiles shown inline; 4th overlay invites viewing more.\n const tiles = b.gallery.slice(0,4).map((src,i)=>{\n const isMore = (i===3 && b.gallery.length>4);\n return `\n <div class=\"ips-gallery-tile${i===0?' tall':''}${isMore?' more-overlay':''}\"\n style=\"background-image:url('${src}')\"\n data-gallery=\"${b.id}\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"${b.name} example ${i+1}${isMore?' \u2014 view all':''}\">\n ${isMore?`<div class=\"ips-gallery-more\">+${b.gallery.length-4} more \u2192<\/div>`:''}\n <\/div>`;\n }).join('');\n\n return `\n <div class=\"ips-view\">\n <div class=\"ips-step-head\">\n <h2 class=\"ips-title\">What are we building?<\/h2>\n <p class=\"ips-lead\">Select a build type. Tap any image to explore examples.<\/p>\n <\/div>\n <div class=\"ips-build-wrap\">\n <div class=\"ips-build-tabs\" role=\"tablist\">\n ${D.build.map(item=>`\n <button class=\"ips-build-tab${st.build===item.id?' sel':''}\"\n type=\"button\" role=\"tab\" aria-selected=\"${st.build===item.id}\"\n data-tab=\"${item.id}\">${item.name}<\/button>`).join('')}\n <\/div>\n <div class=\"ips-build-panel\">\n <div class=\"ips-build-info\">\n <div class=\"ips-build-info-eyebrow\">Selected build<\/div>\n <div class=\"ips-build-info-name\">${b.name}<\/div>\n <div class=\"ips-build-info-desc\">${b.desc}<\/div>\n <button class=\"ips-build-info-action\" type=\"button\" data-gallery=\"${b.id}\">\n <span class=\"ips-gallery-icon\"><span><\/span><span><\/span><span><\/span><span><\/span><\/span>\n Explore all examples \u2192\n <\/button>\n <\/div>\n <div class=\"ips-build-gallery\">${tiles}<\/div>\n <\/div>\n <\/div>\n <div class=\"ips-actions\">\n <button class=\"ips-btn ips-btn-ghost\" data-back>Back<\/button>\n <button class=\"ips-btn ips-btn-primary\" data-next>Continue<\/button>\n <\/div>\n <\/div>`;\n}\n\nfunction tplStyle(){return `\n <div class=\"ips-view\">\n <div class=\"ips-step-head\">\n <h2 class=\"ips-title\">Choose your aesthetic<\/h2>\n <p class=\"ips-lead\">Your style shapes the materials and overall atmosphere.<\/p>\n <\/div>\n <div class=\"ips-style-grid\">\n ${D.style.map(s=>`\n <button class=\"ips-style-card${st.style===s.id?' sel':''}\" type=\"button\" data-style=\"${s.id}\">\n <div class=\"ips-style-bg\" style=\"background-image:url('${s.img}')\"><\/div>\n <div class=\"ips-style-overlay\"><\/div>\n <div class=\"ips-style-check\">\u2713<\/div>\n <div class=\"ips-style-body\">\n <div class=\"ips-style-name\">${s.name}<\/div>\n <div class=\"ips-style-desc\">${s.desc}<\/div>\n <\/div>\n <\/button>`).join('')}\n <\/div>\n <div class=\"ips-actions\">\n <button class=\"ips-btn ips-btn-ghost\" data-back>Back<\/button>\n <button class=\"ips-btn ips-btn-primary\" data-next${st.style?'':' disabled'}>Continue<\/button>\n <\/div>\n <\/div>`}\n\nfunction tplScale(){\n const s = D.scale[st.scale];\n return `\n <div class=\"ips-view\">\n <div class=\"ips-step-head\">\n <h2 class=\"ips-title\">How large should this be?<\/h2>\n <\/div>\n <div class=\"ips-scale-grid\">\n <div class=\"ips-scale-panel\">\n <div class=\"ips-scale-row\">\n <h3>Project scale<\/h3>\n <div class=\"ips-scale-val\" id=\"ipsScaleLabel\">${s.name}<\/div>\n <\/div>\n <input class=\"ips-scale-slider\" id=\"ipsScaleSlider\" type=\"range\" min=\"1\" max=\"4\" step=\"1\" value=\"${st.scale}\" aria-label=\"Project scale\">\n <div class=\"ips-scale-ticks\"><span>Small<\/span><span>Medium<\/span><span>Large<\/span><span>Luxury<\/span><\/div>\n <div class=\"ips-scale-desc\" id=\"ipsScaleDesc\">${s.desc}<\/div>\n <\/div>\n <div class=\"ips-scale-photo\">\n <img decoding=\"async\" id=\"ipsScaleImg\" src=\"${s.img}\" alt=\"${s.name}\">\n <div class=\"ips-scale-badge\" id=\"ipsScaleBadge\">${s.name}<\/div>\n <\/div>\n <\/div>\n <div class=\"ips-actions\">\n <button class=\"ips-btn ips-btn-ghost\" data-back>Back<\/button>\n <button class=\"ips-btn ips-btn-primary\" data-next>Continue<\/button>\n <\/div>\n <\/div>`;\n}\n\nfunction tplTiming(){return `\n <div class=\"ips-view ips-timing-view\">\n <div class=\"ips-step-head\">\n <h2 class=\"ips-title\">When are you hoping to build?<\/h2>\n <\/div>\n <div class=\"ips-timing-grid\">\n ${D.timing.map(t=>`\n <button class=\"ips-timing-card${st.timeline===t.id?' sel':''}\" type=\"button\" data-time=\"${t.id}\">\n <div class=\"ips-timing-card-inner\">\n <div class=\"ips-timing-copy\">\n <strong class=\"ips-timing-label\">${t.label}<\/strong>\n <span>${t.desc}<\/span>\n <\/div>\n <div class=\"ips-timing-radio\" aria-hidden=\"true\"><\/div>\n <\/div>\n <\/button>`).join('')}\n <\/div>\n <div class=\"ips-actions\">\n <button class=\"ips-btn ips-btn-ghost\" data-back>Back<\/button>\n <button class=\"ips-btn ips-btn-primary\" data-next${st.timeline?'':' disabled'}>Continue<\/button>\n <\/div>\n <\/div>`}\n\nfunction tplContact(){\n const b = buildById(st.build);\n const sv = settingById(st.setting);\n const sc = D.scale[st.scale];\n const sty= D.style.find(x=>x.id===st.style);\n return `\n <div class=\"ips-view ips-contact-view\">\n <div class=\"ips-step-head\">\n <div class=\"ips-eyebrow\">Final step<\/div>\n <h2 class=\"ips-title\">Your estimate is ready<\/h2>\n <p class=\"ips-lead\">Enter your details to reveal your number. No commitment \u2014 our team follows up personally within 24 hours.<\/p>\n <\/div>\n <div class=\"ips-contact-grid compact\">\n <div class=\"ips-summary\">\n <div class=\"ips-summary-title\">Your selections<\/div>\n <div class=\"ips-summary-compact\">\n <div class=\"ips-summary-chip\"><span>Setting<\/span><span>${sv?.name || '\u2014'}<\/span><\/div>\n <div class=\"ips-summary-chip\"><span>Build type<\/span><span>${b.name}<\/span><\/div>\n <div class=\"ips-summary-chip\"><span>Style<\/span><span>${sty?.name || '\u2014'}<\/span><\/div>\n <div class=\"ips-summary-chip\"><span>Scale<\/span><span>${sc.name}<\/span><\/div>\n <div class=\"ips-summary-chip\"><span>Timing<\/span><span>${D.timing.find(x=>x.id===st.timeline)?.label || '\u2014'}<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"ips-form compact\">\n <div class=\"ips-form-grid\">\n <div class=\"ips-field\">\n <label class=\"ips-field-label\" for=\"ips-f-name\">Full name *<\/label>\n <input class=\"ips-input\" id=\"ips-f-name\" type=\"text\" placeholder=\"Your name\" value=\"${esc(st.name)}\">\n <\/div>\n <div class=\"ips-field\">\n <label class=\"ips-field-label\" for=\"ips-f-email\">Email *<\/label>\n <input class=\"ips-input\" id=\"ips-f-email\" type=\"email\" placeholder=\"you@example.com\" value=\"${esc(st.email)}\">\n <\/div>\n <div class=\"ips-field\">\n <label class=\"ips-field-label\" for=\"ips-f-phone\">Phone \/ WhatsApp *<\/label>\n <input class=\"ips-input\" id=\"ips-f-phone\" type=\"tel\" placeholder=\"+66...\" value=\"${esc(st.phone)}\">\n <\/div>\n <div class=\"ips-field\">\n <label class=\"ips-field-label\" for=\"ips-f-loc\">Project location<\/label>\n <select class=\"ips-select\" id=\"ips-f-loc\">\n <option value=\"\">Select region<\/option>\n ${['Bangkok','Chiang Mai','Chiang Rai','Phuket','Koh Samui','Pattaya','Hua Hin','Other']\n .map(l=>`<option${st.location===l?' selected':''}>${l}<\/option>`).join('')}\n <\/select>\n <\/div>\n <div class=\"ips-field full\">\n <label class=\"ips-field-label\" for=\"ips-f-notes\">About your project <span style=\"font-weight:400;opacity:.7\">(optional)<\/span><\/label>\n <textarea class=\"ips-textarea\" id=\"ips-f-notes\" placeholder=\"Vision, property details, specific requirements\u2026\">${esc(st.notes)}<\/textarea>\n <\/div>\n <\/div>\n <div class=\"ips-privacy\">\ud83d\udd12 Your details are kept private and used only to follow up on your enquiry.<\/div>\n <div class=\"ips-contact-actions\">\n <button class=\"ips-btn ips-btn-ghost\" data-back type=\"button\">Back<\/button>\n <button class=\"ips-btn ips-btn-primary ips-contact-submit\" data-submit type=\"button\">Reveal estimate<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>`;\n}\n\n\/\/ \u2500\u2500\u2500 Render loop \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction render(){\n const key = STEPS[st.step];\n setBg(key);\n progLabel.textContent = STEP_LABELS[key];\n progMeta.textContent = `Step ${st.step+1} of ${STEPS.length}`;\n progFill.style.width = `${((st.step+1)\/STEPS.length)*100}%`;\n\n const views = [tplIntro,tplSetting,tplBuild,tplStyle,tplScale,tplTiming,tplContact];\n track.innerHTML = views[st.step]();\n \/\/ Flag the intro step so mobile CSS can re-centre the compact welcome card.\n root.classList.toggle('ips-at-intro', key==='intro');\n bind();\n}\n\n\/\/ \u2500\u2500\u2500 Event bindings (re-bound on each render) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bind(){\n track.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>{if(validate())goTo(st.step+1)}));\n track.querySelectorAll('[data-back]').forEach(b=>b.addEventListener('click',()=>goTo(st.step-1)));\n\n track.querySelectorAll('[data-set]').forEach(b=>b.addEventListener('click',()=>{st.setting=b.dataset.set;render()}));\n track.querySelectorAll('[data-tab]').forEach(b=>b.addEventListener('click',()=>{st.build=b.dataset.tab;render()}));\n track.querySelectorAll('[data-style]').forEach(b=>b.addEventListener('click',()=>{st.style=b.dataset.style;render()}));\n track.querySelectorAll('[data-time]').forEach(b=>b.addEventListener('click',()=>{st.timeline=b.dataset.time;render()}));\n track.querySelectorAll('[data-gallery]').forEach(el=>{\n el.addEventListener('click',()=>openGallery(el.dataset.gallery));\n el.addEventListener('keydown',e=>{\n if(e.key==='Enter' || e.key===' '){e.preventDefault(); openGallery(el.dataset.gallery);}\n });\n });\n track.querySelector('[data-submit]')?.addEventListener('click',()=>{if(validate(true))showResult()});\n\n const slider = document.getElementById('ipsScaleSlider');\n if(slider){\n slider.addEventListener('input',e=>{\n st.scale = +e.target.value;\n const s = D.scale[st.scale];\n document.getElementById('ipsScaleLabel').textContent = s.name;\n document.getElementById('ipsScaleDesc').textContent = s.desc;\n document.getElementById('ipsScaleBadge').textContent = s.name;\n const img = document.getElementById('ipsScaleImg');\n img.style.opacity='0';\n setTimeout(()=>{img.src=s.img; img.alt=s.name; img.style.opacity='1';},180);\n });\n }\n ['ips-f-name','ips-f-email','ips-f-phone','ips-f-loc','ips-f-notes'].forEach(id=>{\n const el=document.getElementById(id);\n const map={'ips-f-name':'name','ips-f-email':'email','ips-f-phone':'phone','ips-f-loc':'location','ips-f-notes':'notes'};\n if(el) el.addEventListener('input',()=>st[map[id]]=el.value);\n });\n}\n\nfunction goTo(n){\n saveContactFields();\n st.step = Math.max(0, Math.min(STEPS.length-1, n));\n render();\n requestAnimationFrame(()=>{\n track.querySelectorAll('.ips-view').forEach(v=>v.scrollTop=0);\n \/\/ Only scroll the page if the estimator has been scrolled past.\n \/\/ Prevents a jarring jump when the user is already looking at the tool.\n const top = root.getBoundingClientRect().top;\n if(top < -40){\n root.scrollIntoView({block:'start', behavior:'smooth'});\n }\n });\n}\nfunction saveContactFields(){\n ['ips-f-name','ips-f-email','ips-f-phone','ips-f-loc','ips-f-notes'].forEach(id=>{\n const el=document.getElementById(id);\n const map={'ips-f-name':'name','ips-f-email':'email','ips-f-phone':'phone','ips-f-loc':'location','ips-f-notes':'notes'};\n if(el) st[map[id]] = el.value;\n });\n}\nfunction validate(isFinal=false){\n const key=STEPS[st.step];\n if(key==='setting' && !st.setting){alert('Please choose your project setting.'); return false;}\n if(key==='style' && !st.style){ alert('Please choose a preferred style.'); return false;}\n if(key==='timing' && !st.timeline){alert('Please choose your preferred build timing.'); return false;}\n if(isFinal || key==='contact'){\n saveContactFields();\n if(!st.name || !st.email || !st.phone){alert('Please fill in your name, email, and phone number.'); return false;}\n if(!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(st.email)){alert('Please enter a valid email address.'); return false;}\n }\n return true;\n}\n\n\/\/ \u2500\u2500\u2500 Lightbox \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction openGallery(id){\n const b = buildById(id);\n document.getElementById('ipsLbName').textContent = b.name;\n document.getElementById('ipsLbDesc').textContent = b.desc;\n const grid = document.getElementById('ipsLbGrid');\n grid.innerHTML = b.gallery.map((src,i)=>\n `<div class=\"ips-lb-tile${i===0?' tall':''}\"><img decoding=\"async\" src=\"${src}\" alt=\"${b.name} example ${i+1}\" loading=\"lazy\"><\/div>`\n ).join('');\n const selBtn = document.getElementById('ipsLbSelect');\n selBtn.textContent = 'I Want This';\n selBtn.onclick = ()=>{\n st.build = id;\n closeLightbox();\n render();\n };\n document.getElementById('ipsLbBack').onclick = closeLightbox;\n document.getElementById('ipsLightbox').classList.add('open');\n}\nfunction closeLightbox(){document.getElementById('ipsLightbox').classList.remove('open')}\ndocument.getElementById('ipsLbClose').addEventListener('click',closeLightbox);\ndocument.getElementById('ipsLightbox').addEventListener('click',e=>{\n if(e.target.id==='ipsLightbox') closeLightbox();\n});\n\n\/\/ \u2500\u2500\u2500 Result modal \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\u2500\u2500\u2500\u2500\u2500\u2500\nfunction showResult(){\n const r = calcRange();\n if(!r) return;\n const b = buildById(st.build);\n const sv = settingById(st.setting);\n const sty= D.style.find(x=>x.id===st.style);\n document.getElementById('ipsPrice').textContent = `${thb(r.lo)} \u2013 ${thb(r.hi)}`;\n document.getElementById('ipsResultSummary').innerHTML = [\n ['Setting',sv?.name || '\u2014'],\n ['Build type',b.name],\n ['Style',sty?.name || '\u2014'],\n ['Scale',D.scale[st.scale].name],\n ['Timing',D.timing.find(x=>x.id===st.timeline)?.label || '\u2014'],\n ['Location',st.location || 'Not specified']\n ].map(row=>`<div class=\"ips-result-row\"><span>${row[0]}<\/span><span>${row[1]}<\/span><\/div>`).join('');\n const msg = encodeURIComponent(`Hi, I just completed the Interpool Spa project estimator. I'm interested in a ${b.name} (${sty?.name || 'style TBD'}, ${D.scale[st.scale].name} scale) for ${sv?.name || 'my property'} in ${st.location || 'Thailand'}. Build timing: ${D.timing.find(x=>x.id===st.timeline)?.label || 'Not specified'}. My estimate showed ${thb(r.lo)}\u2013${thb(r.hi)}. Looking forward to discussing further.`);\n \/\/ LINE link is static \u2014 no dynamic message needed\n document.getElementById('ipsResult').classList.add('open');\n}\nfunction closeResult(){document.getElementById('ipsResult').classList.remove('open')}\ndocument.getElementById('ipsResultClose').addEventListener('click',closeResult);\ndocument.getElementById('ipsResultClose2').addEventListener('click',closeResult);\ndocument.getElementById('ipsResult').addEventListener('click',e=>{\n if(e.target.id==='ipsResult') closeResult();\n});\ndocument.addEventListener('keydown',e=>{\n if(e.key==='Escape'){closeLightbox(); closeResult();}\n});\n\n\/\/ \u2500\u2500\u2500 Boot \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\npreloadAll();\nstageBg.style.backgroundImage = `url('${D.bg.intro}')`;\nstageBg.style.backgroundPosition= 'center center';\nrender();\n\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>", "protected": false }, "excerpt": { "rendered": "<p>Interpool Spa \u2014 Wellness Space Estimator INTERPOOL SPA \u2190 Back to site Welcome Step 1 of 7 \u2715 \u2190 Back I Want This Your personalised estimate Let’s bring your vision to life. Here is your indicative investment range based on the selections you’ve made. Our team will reach out personally to discuss your project, refine […]<\/p>", "protected": false }, "author": 1, "featured_media": 0, "parent": 0, "menu_order": 0, "comment_status": "closed", "ping_status": "closed", "template": "elementor_canvas", "meta": { "inline_featured_image": false, "footnotes": "" }, "class_list": [ "post-16183", "page", "type-page", "status-publish", "hentry" ], "_links": { "self": [ { "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/pages\/16183", "targetHints": { "allow": [ "GET" ] } } ], "collection": [ { "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/pages" } ], "about": [ { "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/types\/page" } ], "author": [ { "embeddable": true, "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/users\/1" } ], "replies": [ { "embeddable": true, "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/comments?post=16183" } ], "version-history": [ { "count": 47, "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/pages\/16183\/revisions" } ], "predecessor-version": [ { "id": 17353, "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/pages\/16183\/revisions\/17353" } ], "wp:attachment": [ { "href": "https:\/\/interpoolspa.com\/en\/wp-json\/wp\/v2\/media?parent=16183" } ], "curies": [ { "name": "wp", "href": "https:\/\/api.w.org\/{rel}", "templated": true } ] } }