import { useState, useRef } from "react"; const gold = "#c9a96e"; const goldDark = "#a67c4a"; const bg = "#0f0f0f"; const card = "#181818"; const border = "#252525"; const textPrimary = "#f0ede6"; const textMuted = "#777"; const textDim = "#444"; const STEPS = [ { id: "business", label: "Business", icon: "🏢" }, { id: "client", label: "Client", icon: "👤" }, { id: "scope", label: "Scope", icon: "📋" }, { id: "pricing", label: "Pricing", icon: "💰" }, { id: "generate", label: "Send", icon: "✨" }, ]; const PROJECT_TYPES = [ "Kitchen Remodel","Bathroom Remodel","Full Home Renovation", "Addition / Extension","Basement Finish","Deck / Outdoor Living", "Custom Home Build","Commercial TI","Interior Design", ]; const DURATIONS = [ "1–2 weeks","3–4 weeks","5–6 weeks","6–8 weeks", "2–3 months","3–4 months","4–6 months","6–12 months", ]; // Big mobile-friendly input function MInput({ label, hint, optional, type="text", ...props }) { const [focused, setFocused] = useState(false); return (

{label} {optional && optional}

{hint &&

{hint}

} setFocused(true)} onBlur={() => setFocused(false)} />

); } function MTextarea({ label, hint, optional, ...props }) { const [focused, setFocused] = useState(false); return (

{label} {optional && optional}

{hint &&

{hint}

}

setFocused(true)}
        onBlur={() => setFocused(false)}
      />
    </div>
  );
}

// Pill-button selector (replaces dropdowns for short lists)
function PillSelect({ label, options, value, onChange }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "#b8a98a", letterSpacing: "0.05em", marginBottom: 10, fontFamily: "system-ui, sans-serif" }}>{label}</label>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {options.map(o => {
          const val = typeof o === "object" ? o.value : o;
          const lbl = typeof o === "object" ? o.label : o;
          const active = value === val;
          return (
            <button key={val} onClick={() => onChange(val)} style={{
              padding: "10px 16px", borderRadius: 100,
              border: `1.5px solid ${active ? gold : border}`,
              background: active ? "rgba(201,169,110,0.12)" : "#111",
              color: active ? gold : textMuted,
              fontSize: 14, fontFamily: "system-ui, sans-serif",
              cursor: "pointer", transition: "all 0.15s",
              fontWeight: active ? 600 : 400,
            }}>
              {lbl}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// Native select for long lists
function MSelect({ label, optional, children, ...props }) {
  const [focused, setFocused] = useState(false);
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
        <label style={{ fontSize: 13, fontWeight: 600, color: "#b8a98a", letterSpacing: "0.05em", fontFamily: "system-ui, sans-serif" }}>{label}</label>
        {optional && <span style={{ fontSize: 12, color: textDim, fontFamily: "system-ui, sans-serif" }}>optional</span>}
      </div>
      <div style={{ position: "relative" }}>
        <select
          {...props}
          style={{
            width: "100%", boxSizing: "border-box",
            background: "#111", border: `1.5px solid ${focused ? gold : border}`,
            borderRadius: 12, padding: "14px 44px 14px 16px",
            color: textPrimary, fontSize: 16, fontFamily: "system-ui, sans-serif",
            outline: "none", appearance: "none", cursor: "pointer",
          }}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
        >
          {children}
        </select>
        <span style={{ position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)", color: textMuted, pointerEvents: "none", fontSize: 12 }}>▼</span>
      </div>
    </div>
  );
}

export default function App() {
  const [step, setStep] = useState(0);
  const [logoUrl, setLogoUrl] = useState(null);
  const logoInputRef = useRef();
  const [proposal, setProposal] = useState("");
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);
  const [shared, setShared] = useState(false);

const [form, setForm] = useState({
    contractorName: "", contractorTitle: "", contractorCompany: "",
    contractorPhone: "", contractorEmail: "", contractorWebsite: "",
    contractorAddress: "", contractorLicense: "", contractorInsurance: "",
    clientName: "", clientEmail: "", clientPhone: "",
    projectType: "Kitchen Remodel", projectAddress: "",
    scopeDescription: "", startDate: "", duration: "",
    totalPrice: "", depositPercent: "30", paymentSchedule: "milestone", warranty: "1 year",
  });

const u = (k, v) => setForm(f => ({ ...f, [k]: v }));

const handleLogoUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => setLogoUrl(ev.target.result);
    reader.readAsDataURL(file);
  };

const canProceed = () => {
    if (step === 0) return form.contractorName && form.contractorCompany && form.contractorPhone && form.contractorEmail;
    if (step === 1) return form.clientName && form.projectAddress;
    if (step === 2) return form.scopeDescription && form.duration;
    if (step === 3) return form.totalPrice;
    return true;
  };

const generateProposal = async () => {
    setLoading(true);
    setProposal("");
    try {
      const prompt = `You are an expert construction proposal writer. Generate a professional, detailed project proposal.

CONTRACTOR: ${form.contractorName}${form.contractorTitle ? `, ${form.contractorTitle}` : ""} | ${form.contractorCompany}
Phone: ${form.contractorPhone} | Email: ${form.contractorEmail}${form.contractorWebsite ? ` | ${form.contractorWebsite}` : ""}
${form.contractorAddress ? `Address: ${form.contractorAddress}` : ""}
${form.contractorLicense ? `License: ${form.contractorLicense}` : ""}
${form.contractorInsurance ? `Insurance: ${form.contractorInsurance}` : ""}

CLIENT: ${form.clientName}${form.clientEmail ? ` | ${form.clientEmail}` : ""}${form.clientPhone ? ` | ${form.clientPhone}` : ""}

PROJECT: ${form.projectType} at ${form.projectAddress}
Scope: ${form.scopeDescription}
${form.startDate ? `Start: ${form.startDate}` : ""} | Duration: ${form.duration}
Total: $${parseInt(form.totalPrice).toLocaleString()} | Deposit: ${form.depositPercent}% | Payment: ${form.paymentSchedule} | Warranty: ${form.warranty}

Write a complete professional proposal:
1. Cover Letter (warm, 2–3 sentences to client)
2. Project Overview
3. Scope of Work (bullet points)
4. Timeline
5. Investment Summary (show deposit $amount and remaining balance)
6. Terms & Conditions (4 points)
7. Warranty
8. Signature Block (lines for both parties)

Premium, trustworthy tone. Include license/insurance where relevant.`;

const deposit = form.totalPrice ? Math.round(form.totalPrice * form.depositPercent / 100) : 0;
  const remaining = form.totalPrice ? Math.round(form.totalPrice * (1 - form.depositPercent / 100)) : 0;

return (
    <div style={{ minHeight: "100vh", background: bg, color: textPrimary, fontFamily: "system-ui, -apple-system, sans-serif", maxWidth: 480, margin: "0 auto", position: "relative" }}>
      <style>{`
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        .slide { animation: slideUp 0.2s ease; }
        * { -webkit-tap-highlight-color: transparent; }
        input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.6); width:24px;height:24px; }
        input[type="number"] { -moz-appearance: textfield; }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
      `}</style>

{/* ── TOP BAR ── */}
      <div style={{ position: "sticky", top: 0, zIndex: 50, background: "rgba(15,15,15,0.95)", backdropFilter: "blur(12px)", borderBottom: `1px solid ${border}`, padding: "12px 16px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
          {logoUrl
            ? <img src={logoUrl} alt="logo" style={{ height: 28, width: "auto", maxWidth: 80, objectFit: "contain", borderRadius: 4 }} />
            : <span style={{ fontSize: 20 }}>🏗️</span>}
          <div>
            <div style={{ fontSize: 10, color: gold, letterSpacing: "0.15em", textTransform: "uppercase" }}>BuildProposal AI</div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>{form.contractorCompany || "Proposal Generator"}</div>
          </div>
        </div>

{/* Step dots */}
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          {STEPS.map((s, i) => (
            <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 6, flex: i < STEPS.length - 1 ? 1 : "none" }}>
              <div style={{
                width: 28, height: 28, borderRadius: "50%", flexShrink: 0,
                background: i < step ? gold : i === step ? "rgba(201,169,110,0.15)" : "#1a1a1a",
                border: `1.5px solid ${i <= step ? gold : border}`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: i < step ? 11 : 13,
                color: i < step ? "#000" : i === step ? gold : textDim,
                fontWeight: 700, transition: "all 0.2s",
              }}>
                {i < step ? "✓" : s.icon}
              </div>
              {i < STEPS.length - 1 && (
                <div style={{ flex: 1, height: 1.5, borderRadius: 1, background: i < step ? gold : border, transition: "background 0.3s" }} />
              )}
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, color: textMuted, marginTop: 6, textAlign: "center" }}>
          Step {step + 1} of {STEPS.length} — {STEPS[step].label}
        </div>
      </div>

{/* ── CONTENT ── */}
      <div style={{ padding: "20px 16px 120px" }}>

{/* STEP 0 — Business */}
        {step === 0 && (
          <div className="slide">
            <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Your business</h2>
            <p style={{ color: textMuted, fontSize: 14, marginBottom: 24, lineHeight: 1.5 }}>Set this once — it'll appear on every proposal.</p>

{/* Logo upload */}
            <input ref={logoInputRef} type="file" accept="image/*" style={{ display: "none" }} onChange={handleLogoUpload} />
            <div onClick={() => logoInputRef.current.click()} style={{
              border: `2px dashed ${logoUrl ? gold : border}`, borderRadius: 16,
              padding: 20, marginBottom: 20, display: "flex", alignItems: "center", gap: 16,
              cursor: "pointer", background: "#111", transition: "border-color 0.2s",
            }}>
              {logoUrl
                ? <img src={logoUrl} alt="logo" style={{ height: 52, width: "auto", maxWidth: 120, objectFit: "contain", borderRadius: 6 }} />
                : <div style={{ width: 52, height: 52, background: "#1a1a1a", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, flexShrink: 0 }}>🖼️</div>}
              <div>
                <div style={{ fontSize: 15, color: logoUrl ? textPrimary : textMuted, fontWeight: 500, marginBottom: 3 }}>
                  {logoUrl ? "Logo uploaded ✓" : "Upload company logo"}
                </div>
                <div style={{ fontSize: 12, color: textDim }}>PNG or JPG · Tap to {logoUrl ? "change" : "add"}</div>
              </div>
            </div>

<MInput label="Your Name" placeholder="Mike Torres" value={form.contractorName} onChange={e => u("contractorName", e.target.value)} />
            <MInput label="Your Title" placeholder="Owner / Project Manager" value={form.contractorTitle} onChange={e => u("contractorTitle", e.target.value)} optional />
            <MInput label="Company Name" placeholder="Torres Build Co." value={form.contractorCompany} onChange={e => u("contractorCompany", e.target.value)} />
            <MInput label="Phone" type="tel" placeholder="(512) 555-0100" value={form.contractorPhone} onChange={e => u("contractorPhone", e.target.value)} />
            <MInput label="Email" type="email" placeholder="mike@torresbuild.com" value={form.contractorEmail} onChange={e => u("contractorEmail", e.target.value)} />
            <MInput label="Website" placeholder="www.torresbuild.com" value={form.contractorWebsite} onChange={e => u("contractorWebsite", e.target.value)} optional />
            <MInput label="Business Address" placeholder="123 Main St, Austin TX" value={form.contractorAddress} onChange={e => u("contractorAddress", e.target.value)} optional />
            <MInput label="License #" placeholder="TX-GC-048291" value={form.contractorLicense} onChange={e => u("contractorLicense", e.target.value)} optional hint="Adds credibility — shown on proposal" />
            <MInput label="Insurance / Bond" placeholder="Insured via Acme Ins. #8821" value={form.contractorInsurance} onChange={e => u("contractorInsurance", e.target.value)} optional />
          </div>
        )}

{/* STEP 1 — Client */}
        {step === 1 && (
          <div className="slide">
            <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Client & project</h2>
            <p style={{ color: textMuted, fontSize: 14, marginBottom: 24, lineHeight: 1.5 }}>Who are you building the proposal for?</p>

<MInput label="Client Name" placeholder="Sarah & James Mitchell" value={form.clientName} onChange={e => u("clientName", e.target.value)} />
            <MInput label="Client Email" type="email" placeholder="sarah@email.com" value={form.clientEmail} onChange={e => u("clientEmail", e.target.value)} optional />
            <MInput label="Client Phone" type="tel" placeholder="(512) 555-0199" value={form.clientPhone} onChange={e => u("clientPhone", e.target.value)} optional />

<MSelect label="Project Type" value={form.projectType} onChange={e => u("projectType", e.target.value)}>
              {PROJECT_TYPES.map(t => <option key={t}>{t}</option>)}
            </MSelect>

<MInput label="Project Address" placeholder="4821 Maplewood Dr, Austin TX" value={form.projectAddress} onChange={e => u("projectAddress", e.target.value)} hint="Where the work is happening" />
          </div>
        )}

{/* STEP 2 — Scope */}
        {step === 2 && (
          <div className="slide">
            <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Scope & timeline</h2>
            <p style={{ color: textMuted, fontSize: 14, marginBottom: 24, lineHeight: 1.5 }}>Bullet points are fine — AI will expand it.</p>

<MTextarea
              label="What's included in this job?"
              placeholder={"- Demo existing kitchen\n- New custom cabinets\n- Quartz countertops\n- Tile backsplash\n- New appliances\n- Update electrical & plumbing"}
              value={form.scopeDescription}
              onChange={e => u("scopeDescription", e.target.value)}
            />

<MInput label="Start Date" type="date" value={form.startDate} onChange={e => u("startDate", e.target.value)} optional />

<PillSelect
              label="How long will it take?"
              options={DURATIONS}
              value={form.duration}
              onChange={v => u("duration", v)}
            />
          </div>
        )}

{/* STEP 3 — Pricing */}
        {step === 3 && (
          <div className="slide">
            <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Price & payment</h2>
            <p style={{ color: textMuted, fontSize: 14, marginBottom: 24, lineHeight: 1.5 }}>Set the numbers — proposal does the math.</p>

<MInput label="Total Project Price ($)" type="number" placeholder="85000" value={form.totalPrice} onChange={e => u("totalPrice", e.target.value)} />

<PillSelect
              label="Deposit required"
              options={["10%","20%","25%","30%","33%","40%","50%"].map(p => ({ label: p, value: p.replace("%","") }))}
              value={form.depositPercent}
              onChange={v => u("depositPercent", v)}
            />

<PillSelect
              label="Payment schedule"
              options={[
                { label: "Milestones", value: "milestone" },
                { label: "Monthly draws", value: "monthly" },
                { label: "3 equal parts", value: "thirds" },
                { label: "Deposit + final", value: "deposit-completion" },
              ]}
              value={form.paymentSchedule}
              onChange={v => u("paymentSchedule", v)}
            />

<PillSelect
              label="Workmanship warranty"
              options={["6 months","1 year","2 years","5 years"]}
              value={form.warranty}
              onChange={v => u("warranty", v)}
            />

{/* Live payment summary */}
            {form.totalPrice && (
              <div style={{ background: "#111", border: `1px solid ${border}`, borderRadius: 16, padding: "16px 18px", marginTop: 8 }}>
                <div style={{ fontSize: 11, color: textDim, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 12 }}>Payment Summary</div>
                {[
                  ["Deposit at signing", `$${deposit.toLocaleString()}`],
                  ["Remaining balance", `$${remaining.toLocaleString()}`],
                  ["Total investment", `$${parseInt(form.totalPrice).toLocaleString()}`],
                ].map(([l, v]) => (
                  <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: `1px solid ${border}`, fontSize: 15 }}>
                    <span style={{ color: textMuted }}>{l}</span>
                    <span style={{ color: l.includes("Total") ? gold : textPrimary, fontWeight: l.includes("Total") ? 700 : 400 }}>{v}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

{/* STEP 4 — Generate */}
        {step === 4 && (
          <div className="slide">
            {/* Proposal header card */}
            <div style={{ background: "#111", border: `1px solid ${border}`, borderRadius: 16, padding: "16px", marginBottom: 20, display: "flex", alignItems: "center", gap: 12 }}>
              {logoUrl
                ? <img src={logoUrl} alt="logo" style={{ height: 40, width: "auto", maxWidth: 100, objectFit: "contain", borderRadius: 6, flexShrink: 0 }} />
                : <div style={{ width: 40, height: 40, background: "#1a1a1a", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, flexShrink: 0 }}>🏗️</div>}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{form.contractorCompany}</div>
                <div style={{ fontSize: 12, color: textMuted, marginTop: 2 }}>{form.contractorPhone}</div>
              </div>
              <div style={{ textAlign: "right", flexShrink: 0 }}>
                <div style={{ fontSize: 11, color: textDim }}>For</div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{form.clientName}</div>
              </div>
            </div>

<h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Your proposal</h2>
            <p style={{ color: textMuted, fontSize: 14, marginBottom: 20 }}>Ready in seconds. Review and send.</p>

{!proposal && !loading && (
              <div style={{ textAlign: "center", padding: "48px 0" }}>
                <div style={{ fontSize: 56, marginBottom: 16 }}>📄</div>
                <p style={{ color: textMuted, fontSize: 15 }}>Tap "Generate" to build your proposal</p>
              </div>
            )}

{loading && (
              <div style={{ textAlign: "center", padding: "56px 0" }}>
                <div style={{ width: 44, height: 44, border: `3px solid ${border}`, borderTop: `3px solid ${gold}`, borderRadius: "50%", animation: "spin 0.7s linear infinite", margin: "0 auto 20px" }} />
                <div style={{ color: textMuted, fontSize: 15 }}>Writing your proposal…</div>
                <div style={{ color: textDim, fontSize: 13, marginTop: 6 }}>Usually takes 10–15 seconds</div>
              </div>
            )}

{proposal && (
              <div>
                <div style={{
                  background: "#111", border: `1px solid ${border}`, borderRadius: 16,
                  padding: "20px 18px", maxHeight: 400, overflowY: "auto",
                  fontSize: 14, lineHeight: 1.8, color: "#ccc",
                  whiteSpace: "pre-wrap", fontFamily: "system-ui, sans-serif",
                }}>
                  {proposal}
                </div>

<div style={{ display: "flex", gap: 10, marginTop: 14 }}>
                  <button onClick={handleShare} style={{
                    flex: 1, padding: "15px", borderRadius: 14,
                    background: `linear-gradient(135deg, ${gold}, ${goldDark})`,
                    border: "none", color: "#000", fontSize: 15, fontWeight: 700,
                    cursor: "pointer", fontFamily: "system-ui, sans-serif",
                  }}>
                    {shared ? "✓ Shared!" : copied ? "✓ Copied!" : navigator.share ? "📤 Share Proposal" : "📋 Copy Proposal"}
                  </button>
                  <button onClick={generateProposal} style={{
                    padding: "15px 18px", borderRadius: 14,
                    background: "#1a1a1a", border: `1px solid ${border}`,
                    color: textMuted, fontSize: 14, cursor: "pointer",
                    fontFamily: "system-ui, sans-serif",
                  }}>
                    ↺ Redo
                  </button>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

{/* ── STICKY BOTTOM NAV ── */}
      <div style={{
        position: "fixed", bottom: 0, left: "50%", transform: "translateX(-50%)",
        width: "100%", maxWidth: 480,
        background: "rgba(15,15,15,0.97)", backdropFilter: "blur(16px)",
        borderTop: `1px solid ${border}`, padding: "12px 16px 20px",
        boxSizing: "border-box",
      }}>
        <div style={{ display: "flex", gap: 10 }}>
          {step > 0 && (
            <button onClick={() => setStep(s => s - 1)} style={{
              padding: "15px 20px", borderRadius: 14,
              background: "#1a1a1a", border: `1px solid ${border}`,
              color: textMuted, fontSize: 15, cursor: "pointer",
              fontFamily: "system-ui, sans-serif",
            }}>
              ←
            </button>
          )}

{step < 4 ? (
            <button
              onClick={() => { if (canProceed()) setStep(s => s + 1); }}
              style={{
                flex: 1, padding: "15px", borderRadius: 14,
                background: canProceed() ? `linear-gradient(135deg, ${gold}, ${goldDark})` : "#1a1a1a",
                border: canProceed() ? "none" : `1px solid ${border}`,
                color: canProceed() ? "#000" : textDim,
                fontSize: 16, fontWeight: 700, cursor: canProceed() ? "pointer" : "default",
                fontFamily: "system-ui, sans-serif", transition: "all 0.2s",
              }}
            >
              {canProceed() ? `Continue to ${STEPS[step + 1].label} →` : "Fill in required fields"}
            </button>
          ) : (
            <button
              onClick={generateProposal}
              disabled={loading}
              style={{
                flex: 1, padding: "15px", borderRadius: 14,
                background: loading ? "#1a1a1a" : `linear-gradient(135deg, ${gold}, ${goldDark})`,
                border: loading ? `1px solid ${border}` : "none",
                color: loading ? textDim : "#000",
                fontSize: 16, fontWeight: 700, cursor: loading ? "default" : "pointer",
                fontFamily: "system-ui, sans-serif",
              }}
            >
              {loading ? "Generating…" : proposal ? "✨ Regenerate" : "✨ Generate Proposal"}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
        
        
        
      
    
  
</div>
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</article>

</main>
      
        <footer class="sections" id="footer-sections" data-footer-sections>

<section
  data-test="page-section"
  
  data-section-theme="dark"
  class='page-section 
    
      full-bleed-section
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--small
    
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--middle
    
      
    
    
    dark'
  
  data-section-id="66fee0d0c1d0597a1ca0f296"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
"imageOverlayOpacity": 0.15,
"backgroundWidth": "background-width--full-bleed",
"sectionHeight": "section-height--small",
"customSectionHeight": 10,
"horizontalAlignment": "horizontal-alignment--center",
"verticalAlignment": "vertical-alignment--middle",
"contentWidth": "content-width--wide",
"customContentWidth": 50,
"sectionTheme": "dark",
"sectionAnimation": "none",
"backgroundMode": "image"
}"
  data-current-context="{
"video": {
"playbackSpeed": 0.5,
"filter": 1,
"filterStrength": 0,
"zoom": 0,
"videoSourceProvider": "none"
},
"backgroundImageId": null,
"backgroundMediaEffect": {
"type": "none"
},
"divider": {
"enabled": false
},
"typeName": "page"
}"
  data-animation="none"
  data-fluid-engine-section

data-sqsp-section="fluid-engine"

>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
      
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
        
      
    '
  >
    <div
      class="content"
      
    >
      
      
      
      
      
      
      
      
      
      
      <div data-fluid-engine="true"><style>

.fe-66fee0d0c1d0597a1ca0f295 {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - 0.0px);
  --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (0.0px * (8 - 1)) ) / 8 );

display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(32,minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 0.0px;
  column-gap: 0.0px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .background-width--inset .fe-66fee0d0c1d0597a1ca0f295 {
    --inset-padding: calc(var(--sqs-site-gutter) * 2);
  }

.fe-66fee0d0c1d0597a1ca0f295 {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - 0.0px);
    --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (0.0px * (24 - 1)) ) / 24 );
    --inset-padding: 0vw;

--row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding) ));

grid-template-rows: repeat(10,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.fe-block-473180213fc0ae41e9fe {
    grid-area: 1/2/3/10;
    z-index: 1;

@media (max-width: 767px) {
      
      
    }
  }

.fe-block-473180213fc0ae41e9fe .sqs-block {
    justify-content: flex-start;
  }

.fe-block-473180213fc0ae41e9fe .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-473180213fc0ae41e9fe {
      grid-area: 1/2/3/9;
      z-index: 1;

}

.fe-block-473180213fc0ae41e9fe .sqs-block {
      justify-content: flex-start;
    }

.fe-block-473180213fc0ae41e9fe .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-yui_3_17_2_1_1772512138673_2748 {
    grid-area: 3/2/9/10;
    z-index: 7;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1772512138673_2748 .sqs-block {
    justify-content: center;
  }

.fe-block-yui_3_17_2_1_1772512138673_2748 .sqs-block-alignment-wrapper {
    align-items: center;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1772512138673_2748 {
      grid-area: 2/6/10/12;
      z-index: 7;

}

.fe-block-yui_3_17_2_1_1772512138673_2748 .sqs-block {
      justify-content: center;
    }

.fe-block-yui_3_17_2_1_1772512138673_2748 .sqs-block-alignment-wrapper {
      align-items: center;
    }
  }

.fe-block-yui_3_17_2_1_1770669509653_3724 {
    grid-area: 9/2/17/10;
    z-index: 4;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1770669509653_3724 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-yui_3_17_2_1_1770669509653_3724 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1770669509653_3724 {
      grid-area: 2/21/11/26;
      z-index: 4;

}

.fe-block-yui_3_17_2_1_1770669509653_3724 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-yui_3_17_2_1_1770669509653_3724 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-yui_3_17_2_1_1759760166188_3926 {
    grid-area: 17/2/19/10;
    z-index: 2;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1759760166188_3926 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-yui_3_17_2_1_1759760166188_3926 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1759760166188_3926 {
      grid-area: 5/2/6/8;
      z-index: 2;

}

.fe-block-yui_3_17_2_1_1759760166188_3926 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-yui_3_17_2_1_1759760166188_3926 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-yui_3_17_2_1_1772061706507_5713 {
    grid-area: 19/2/25/10;
    z-index: 5;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1772061706507_5713 .sqs-block {
    justify-content: center;
  }

.fe-block-yui_3_17_2_1_1772061706507_5713 .sqs-block-alignment-wrapper {
    align-items: center;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1772061706507_5713 {
      grid-area: 2/16/9/21;
      z-index: 5;

}

.fe-block-yui_3_17_2_1_1772061706507_5713 .sqs-block {
      justify-content: center;
    }

.fe-block-yui_3_17_2_1_1772061706507_5713 .sqs-block-alignment-wrapper {
      align-items: center;
    }
  }

.fe-block-c38fa2db40b970a4d910 {
    grid-area: 25/2/27/10;
    z-index: 1;

@media (max-width: 767px) {
      
      
    }
  }

.fe-block-c38fa2db40b970a4d910 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-c38fa2db40b970a4d910 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-c38fa2db40b970a4d910 {
      grid-area: 8/2/11/8;
      z-index: 1;

}

.fe-block-c38fa2db40b970a4d910 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-c38fa2db40b970a4d910 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-yui_3_17_2_1_1772512138673_2034 {
    grid-area: 27/2/33/10;
    z-index: 6;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1772512138673_2034 .sqs-block {
    justify-content: center;
  }

.fe-block-yui_3_17_2_1_1772512138673_2034 .sqs-block-alignment-wrapper {
    align-items: center;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1772512138673_2034 {
      grid-area: 1/11/11/17;
      z-index: 6;

}

.fe-block-yui_3_17_2_1_1772512138673_2034 .sqs-block {
      justify-content: center;
    }

.fe-block-yui_3_17_2_1_1772512138673_2034 .sqs-block-alignment-wrapper {
      align-items: center;
    }
  }

</style><div class="fluid-engine fe-66fee0d0c1d0597a1ca0f295"><div class="fe-block fe-block-473180213fc0ae41e9fe"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/1689331c-889e-454a-915d-0b055ec12ba0_506/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/1689331c-889e-454a-915d-0b055ec12ba0_506/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="473180213fc0ae41e9fe" id="block-473180213fc0ae41e9fe"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><h4 style="white-space:pre-wrap;">Lake Hazel Design</h4></div>

}

#block-473180213fc0ae41e9fe .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}
    
  .fe-block-473180213fc0ae41e9fe {
    mix-blend-mode: var(--tweak-text-block-blend
  );
  }
  
  
  .fe-block-473180213fc0ae41e9fe {
      --tweak-text-block-blend
  : normal;
    }
  
  
  .fe-block-473180213fc0ae41e9fe {
    --blur-value: blur(15px);}

</style>
<style id="override-container-styles">
    @media screen and (max-width: 767px) {
          #block-473180213fc0ae41e9fe {
            
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-473180213fc0ae41e9fe .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>
<style class="transform-overrides-vars">
      
    </style>

</div>
</div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1772512138673_2748"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-image image-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/748.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/8018.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/9882.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-film-grain.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-liquid.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-parallax.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-refracted-circles.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-refracted-lines.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.shared.constants.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.visitor.js"]" data-block-type="1337" data-definition-name="website.components.imageFluid" data-sqsp-block="image" data-website-component-id="yui_3_17_2_1_1772512138673_2748" id="block-yui_3_17_2_1_1772512138673_2748"><div class="sqs-block-content">

</div>
      
    
  </div>

</div>
    </div>
    <style>
      
      
      
      #block-yui_3_17_2_1_1772512138673_2748 {
        --image-component-focal-point: 50% 50%;
        
  --image-component-object-fit: contain;
  --image-component-overlay-opacity: 0;
  --image-component-overlay-blend-mode: normal;
  
  --image-component-native-aspect-ratio: 400/348;

}
      #block-yui_3_17_2_1_1772512138673_2748 .fluid-image-container.visitor-mode {
        
  
  overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);clip-path: none;-webkit-clip-path: none;

}
      #block-yui_3_17_2_1_1772512138673_2748 .js-content-mode-element-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: none;
      }
      #block-yui_3_17_2_1_1772512138673_2748 .js-content-mode-element-system_desktop {
        display: block;
      }
    </style>
    <style class="transform-overrides-vars">
      
    </style>

</div>

</div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1770669509653_3724"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-embed embed-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.embed/5bdf1158-5bd8-42fe-bf1b-ff0686664d27_251/website.components.embed.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.embed/5bdf1158-5bd8-42fe-bf1b-ff0686664d27_251/website.components.embed.visitor.js"]" data-block-type="1337" data-definition-name="website.components.embed" data-sqsp-block="embed" data-website-component-id="yui_3_17_2_1_1770669509653_3724" id="block-yui_3_17_2_1_1770669509653_3724"><div class="sqs-block-content"><div
  class="sqs-embed-container"
  data-localized="{"embedInvalid":"Enter a valid embed URL or code.","embedTitle":"Embed Block","embedUninitialized":"Add an embed URL or code.","enableSafeModeButton":"Preview in safe mode","enableSafeModeText":"This block contains embedded scripts. Embedded scripts are disabled while you're logged in and editing your site.","enableSafeModeTitle":"Embedded Scripts","exitSafeModeButton":"Exit safe preview","exitSafeModeText":"Please view the page after logging out for accurate rendering.","exitSafeModeTitle":"Safe Preview","globalSafeMode":"Embedded Code: This block contains embedded code that has been disabled.","invalidThumbnail":"Custom featured images only available with embedded videos. Go back into embed settings to turn off featured images.","invalidVideo":"Invalid video embed.","playButton":"Play","scriptDisabled":"Script Disabled"}"
  
>
  
  
    
    
      
        
        
        
        
          <div id="mni-membership-639062446857628486"></div>
<script src="https://saltlakehba.memberzone.com/Content/Script/Member.js" type="text/javascript"></script>
<script type="text/javascript">
new MNI.Widgets.Member("mni-membership-639062446857628486",{member:6502,styleTemplate:"#@id{text-align:center;position:relative}#@id .mn-widget-member-name{font-weight:700}#@id .mn-widget-member-logo{max-width:100%}"}).create();
</script>
        
        
        
      
    
  
</div>
</div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1759760166188_3926"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/1689331c-889e-454a-915d-0b055ec12ba0_506/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/1689331c-889e-454a-915d-0b055ec12ba0_506/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="yui_3_17_2_1_1759760166188_3926" id="block-yui_3_17_2_1_1759760166188_3926"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><p class="" style="white-space:pre-wrap;"><a href="/privacypolicy" target="_blank">Lake Hazel Privacy Policy</a></p></div>

--tweak-text-block-background-color: initial;

}

#block-yui_3_17_2_1_1759760166188_3926 .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}
    
  .fe-block-yui_3_17_2_1_1759760166188_3926 {
    mix-blend-mode: var(--tweak-text-block-blend
  );
  }
  
  
  .fe-block-yui_3_17_2_1_1759760166188_3926 {
      --tweak-text-block-blend
  : normal;
    }
  
  
  .fe-block-yui_3_17_2_1_1759760166188_3926 {
    --blur-value: blur(15px);}

</style>
<style id="override-container-styles">
    @media screen and (max-width: 767px) {
          #block-yui_3_17_2_1_1759760166188_3926 {
            
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-yui_3_17_2_1_1759760166188_3926 .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>
<style class="transform-overrides-vars">
      
    </style>

</div>
</div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1772061706507_5713"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-image image-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/748.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/8018.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/9882.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-film-grain.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-liquid.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-parallax.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-refracted-circles.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-refracted-lines.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.shared.constants.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.visitor.js"]" data-block-type="1337" data-definition-name="website.components.imageFluid" data-sqsp-block="image" data-website-component-id="yui_3_17_2_1_1772061706507_5713" id="block-yui_3_17_2_1_1772061706507_5713"><div class="sqs-block-content">

</div>
      
    
  </div>

</div>
    </div>
    <style>
      
      
      
      #block-yui_3_17_2_1_1772061706507_5713 {
        --image-component-focal-point: 50% 50%;
        
  --image-component-object-fit: contain;
  --image-component-overlay-opacity: 0;
  --image-component-overlay-blend-mode: normal;
  
  --image-component-native-aspect-ratio: 1075/958;

}
      #block-yui_3_17_2_1_1772061706507_5713 .fluid-image-container.visitor-mode {
        
  
  overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);clip-path: none;-webkit-clip-path: none;

}
      #block-yui_3_17_2_1_1772061706507_5713 .js-content-mode-element-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: none;
      }
      #block-yui_3_17_2_1_1772061706507_5713 .js-content-mode-element-system_desktop {
        display: block;
      }
    </style>
    <style class="transform-overrides-vars">
      
    </style>

</div>

</div></div></div><div class="fe-block fe-block-c38fa2db40b970a4d910"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/1689331c-889e-454a-915d-0b055ec12ba0_506/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/1689331c-889e-454a-915d-0b055ec12ba0_506/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="c38fa2db40b970a4d910" id="block-c38fa2db40b970a4d910"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><p class="sqsrte-small" style="white-space:pre-wrap;"><span class="sqsrte-text-color--lightAccent">All Rights Reserved, 2024</span></p><p class="" style="white-space:pre-wrap;"><span class="sqsrte-text-color--lightAccent">Designed by </span><a href="https://blueberrywebservices.com" target="_blank"><span class="sqsrte-text-color--lightAccent">Blueberry Webservices</span></a></p></div>

}

#block-c38fa2db40b970a4d910 .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}
    
  .fe-block-c38fa2db40b970a4d910 {
    mix-blend-mode: var(--tweak-text-block-blend
  );
  }
  
  
  .fe-block-c38fa2db40b970a4d910 {
      --tweak-text-block-blend
  : normal;
    }
  
  
  .fe-block-c38fa2db40b970a4d910 {
    --blur-value: blur(15px);}

</style>
<style id="override-container-styles">
    @media screen and (max-width: 767px) {
          #block-c38fa2db40b970a4d910 {
            
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-c38fa2db40b970a4d910 .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>
<style class="transform-overrides-vars">
      
    </style>

</div>
</div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1772512138673_2034"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-image image-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/748.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/8018.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/9882.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-film-grain.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-liquid.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-parallax.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-refracted-circles.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/image-effect-refracted-lines.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.shared.constants.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/40a5818a-5f7f-43a6-9522-19e05a8909d5_493/website.components.imageFluid.visitor.js"]" data-block-type="1337" data-definition-name="website.components.imageFluid" data-sqsp-block="image" data-website-component-id="yui_3_17_2_1_1772512138673_2034" id="block-yui_3_17_2_1_1772512138673_2034"><div class="sqs-block-content">

</div>
      
    
  </div>

</div>
    </div>
    <style>
      
      
      
      #block-yui_3_17_2_1_1772512138673_2034 {
        --image-component-focal-point: 50% 50%;
        
  --image-component-object-fit: contain;
  --image-component-overlay-opacity: 0;
  --image-component-overlay-blend-mode: normal;
  
  --image-component-native-aspect-ratio: 1000/1000;

}
      #block-yui_3_17_2_1_1772512138673_2034 .fluid-image-container.visitor-mode {
        
  
  overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);clip-path: none;-webkit-clip-path: none;

}
      #block-yui_3_17_2_1_1772512138673_2034 .js-content-mode-element-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: none;
      }
      #block-yui_3_17_2_1_1772512138673_2034 .js-content-mode-element-system_desktop {
        display: block;
      }
    </style>
    <style class="transform-overrides-vars">
      
    </style>

</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</footer>

</div>

</body>
</html>