/* ==============================================================
   Jacksonville Site Works — FAQ + Quote Form + Footer
   ============================================================== */

/* ------------------------------------------------------------------ */
/*  FAQ — accordion                                                     */
/* ------------------------------------------------------------------ */
function Faq() {
  const items = [
    {
      q: "How much does land clearing cost?",
      a: "Most jobs run $1,800–$3,500 per acre depending on density, terrain, and disposal method. A wooded acre with hauling sits at the high end; a brushy acre with on-site mulching sits at the low end. We always quote a fixed price after walking the site — no per-hour billing surprises."
    },
    {
      q: "What's the difference between clearing and forestry mulching?",
      a: "Traditional clearing removes everything to bare dirt — trees, stumps, roots — usually with a dozer, then hauls or burns the debris. Mulching uses a tracked cutter to grind underbrush and small trees in place, leaving the topsoil and root system intact. Mulching is faster and cheaper for selective work; clearing is the right call when you're prepping for a foundation."
    },
    {
      q: "How long does a typical job take?",
      a: "A residential 1–5 acre lot is usually one to three days on-site. Larger commercial jobs run one to six weeks. We'll give you a firm schedule in your quote, and you'll get daily progress photos so you always know where we are."
    },
    {
      q: "Do you handle permits?",
      a: "We pull whatever's required for the work — tree-removal permits in Duval, land-disturbing permits in St. Johns, etc. The cost is broken out separately in your quote so you can see exactly what's going to the county versus to us."
    },
    {
      q: "What about endangered trees or wetlands?",
      a: "We won't touch a property without checking against county GIS layers for wetlands, conservation easements, and protected species. If your lot has any of those, we'll tell you on the walk-through and route around them — that's part of the quote, no extra charge."
    },
    {
      q: "Are you licensed and insured?",
      a: "Yes — fully licensed contractor in the state of Florida, $2M general liability, workers' comp on every crew member. Certificate of insurance is available on request before work starts."
    },
    {
      q: "Do you offer financing?",
      a: "For jobs over $15,000 we can split into a 30/40/30 schedule: down, midpoint, completion. We don't carry traditional financing in-house but we have two local lenders we can refer you to if needed."
    },
  ];

  const [open, setOpen] = useState(0);

  return (
    <section id="faq" className="faq section-pad">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="eyebrow"><span className="dot" />FAQ / 05</div>
            <h2 className="h-display" style={{ marginTop: 20 }}>
              Straight<br/>answers.
            </h2>
          </div>
          <p className="lede">
            The questions every homeowner and contractor asks before signing a quote.
            Don't see yours? Call us — we'd rather talk you through it than make you read.
          </p>
        </div>

        <ul className="faq-list">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <li key={i} className={`faq-item ${isOpen ? "is-open" : ""}`}>
                <button
                  className="faq-q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                >
                  <span className="faq-n mono">0{i + 1}</span>
                  <span className="faq-text">{it.q}</span>
                  <span className="faq-toggle" aria-hidden="true">
                    {isOpen ? "—" : "+"}
                  </span>
                </button>
                <div className="faq-a-wrap" style={{ maxHeight: isOpen ? 320 : 0 }}>
                  <div className="faq-a">{it.a}</div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>

      <style>{`
        .faq { background: var(--bg); border-top: 1px solid var(--line); }
        .faq-list { list-style: none; padding: 0; margin: 0; }
        .faq-item { border-top: 1px solid var(--line); }
        .faq-item:last-child { border-bottom: 1px solid var(--line); }
        .faq-q {
          display: grid;
          grid-template-columns: 60px 1fr 28px;
          align-items: center;
          gap: 28px;
          width: 100%;
          padding: 28px 0;
          background: transparent;
          border: none;
          color: var(--ink);
          text-align: left;
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.03em;
          font-size: clamp(18px, 2vw, 26px);
          transition: color .15s ease, padding .15s ease;
        }
        .faq-q:hover { padding-left: 8px; }
        .faq-item.is-open .faq-q { color: var(--clay); }
        .faq-n { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-4); }
        .faq-item.is-open .faq-n { color: var(--clay); }
        .faq-toggle { font-size: 22px; color: var(--ink-3); justify-self: end; }
        .faq-item.is-open .faq-toggle { color: var(--clay); }

        .faq-a-wrap {
          overflow: hidden;
          transition: max-height .3s ease;
        }
        .faq-a {
          padding: 0 28px 32px 88px;
          color: var(--ink-2);
          max-width: 80ch;
          font-size: 16px;
          line-height: 1.65;
        }
        @media (max-width: 700px) {
          .faq-q { grid-template-columns: 36px 1fr 24px; gap: 14px; }
          .faq-a { padding-left: 50px; padding-right: 0; }
        }
      `}</style>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  QUOTE FORM — multi-step                                             */
/* ------------------------------------------------------------------ */
function QuoteForm() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    service: "",
    acres: "",
    timeline: "",
    name: "",
    phone: "",
    email: "",
    address: "",
    notes: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState("");

  const update = (k, v) => {
    setData(d => ({ ...d, [k]: v }));
    setError("");
  };

  const services = [
    { id: "clearing",   label: "Land Clearing" },
    { id: "mulching",   label: "Forestry Mulching" },
    { id: "tree",       label: "Tree Removal" },
    { id: "stump",      label: "Stump Grinding" },
    { id: "excavation", label: "Excavation" },
    { id: "other",      label: "Not sure / Other" },
  ];
  const acreOpts   = ["Under 1 ac", "1–5 ac", "5–20 ac", "20–50 ac", "50+ ac"];
  const timeOpts   = ["ASAP", "Within 30 days", "1–3 months", "Just exploring"];

  const canNext = () => {
    if (step === 0) return !!data.service;
    if (step === 1) return !!data.acres && !!data.timeline;
    if (step === 2) return data.name && data.phone && data.address;
    return false;
  };

  const submit = () => {
    if (!canNext()) {
      setError("Please fill in name, phone, and address.");
      return;
    }
    setSubmitted(true);
  };

  const steps = ["Scope", "Site", "Contact"];

  return (
    <section id="quote" className="quote section-pad">
      <div className="container">
        <div className="qf-grid">
          <aside className="qf-aside">
            <div className="eyebrow dark"><span className="dot" />Quote / 06</div>
            <h2 className="h-display qf-h">
              Get a fixed<br/>price in 48&nbsp;hrs.
            </h2>
            <p className="qf-lede">
              Tell us what needs to come down. We'll walk the site, mark hazards,
              and hand you a quote that doesn't move.
            </p>

            <ul className="qf-promises">
              <li><span className="x">✕</span>No high-pressure sales call</li>
              <li><span className="x">✕</span>No hidden disposal fees</li>
              <li><span className="x">✕</span>No bait-and-switch quotes</li>
            </ul>

            <div className="qf-or">
              <div className="qf-or-line" />
              <span className="mono">or call directly</span>
              <div className="qf-or-line" />
            </div>
            <a href="tel:9040000000" className="qf-phone">
              904-XXX-XXXX
            </a>
            <div className="qf-hours mono">
              Mon–Sat ⋅ 7am–7pm ⋅ ET
            </div>
          </aside>

          <div className="qf-form-wrap">
            {!submitted ? (
              <div className="qf-form">
                <div className="qf-steps">
                  {steps.map((s, i) => (
                    <div key={s} className={`qfs ${step === i ? "is-on" : ""} ${step > i ? "is-done" : ""}`}>
                      <span className="qfs-n mono">0{i + 1}</span>
                      <span className="qfs-l">{s}</span>
                      {i < steps.length - 1 && <span className="qfs-line" />}
                    </div>
                  ))}
                </div>

                {/* STEP 0 — service */}
                {step === 0 && (
                  <div className="qf-step">
                    <h3 className="h-head qf-q">What needs to be done?</h3>
                    <div className="qf-options">
                      {services.map(s => (
                        <button
                          key={s.id}
                          className={`qf-opt ${data.service === s.id ? "is-on" : ""}`}
                          onClick={() => update("service", s.id)}
                        >
                          {s.label}
                          <span className="qfo-check" aria-hidden="true">✓</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                {/* STEP 1 — acres + timeline */}
                {step === 1 && (
                  <div className="qf-step">
                    <h3 className="h-head qf-q">How big &amp; how soon?</h3>
                    <div className="qf-sub mono">SIZE OF JOB</div>
                    <div className="qf-options qf-options--row">
                      {acreOpts.map(a => (
                        <button
                          key={a}
                          className={`qf-opt qf-opt--sm ${data.acres === a ? "is-on" : ""}`}
                          onClick={() => update("acres", a)}
                        >{a}</button>
                      ))}
                    </div>
                    <div className="qf-sub mono">TIMELINE</div>
                    <div className="qf-options qf-options--row">
                      {timeOpts.map(t => (
                        <button
                          key={t}
                          className={`qf-opt qf-opt--sm ${data.timeline === t ? "is-on" : ""}`}
                          onClick={() => update("timeline", t)}
                        >{t}</button>
                      ))}
                    </div>
                  </div>
                )}

                {/* STEP 2 — contact */}
                {step === 2 && (
                  <div className="qf-step">
                    <h3 className="h-head qf-q">Where do we send the quote?</h3>
                    <div className="qf-fields">
                      <label className="qf-field">
                        <span className="mono">NAME *</span>
                        <input type="text" value={data.name} onChange={e => update("name", e.target.value)} placeholder="Jane Doe" />
                      </label>
                      <label className="qf-field">
                        <span className="mono">PHONE *</span>
                        <input type="tel" value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="904-555-0123" />
                      </label>
                      <label className="qf-field qf-field--full">
                        <span className="mono">EMAIL</span>
                        <input type="email" value={data.email} onChange={e => update("email", e.target.value)} placeholder="jane@email.com" />
                      </label>
                      <label className="qf-field qf-field--full">
                        <span className="mono">PROPERTY ADDRESS *</span>
                        <input type="text" value={data.address} onChange={e => update("address", e.target.value)} placeholder="123 Pine Ln, Jacksonville, FL" />
                      </label>
                      <label className="qf-field qf-field--full">
                        <span className="mono">NOTES (OPTIONAL)</span>
                        <textarea rows="3" value={data.notes} onChange={e => update("notes", e.target.value)} placeholder="Anything we should know — boundary lines, trees to save, access concerns..." />
                      </label>
                    </div>
                    {error && <div className="qf-err mono">! {error}</div>}
                  </div>
                )}

                <div className="qf-actions">
                  {step > 0 && (
                    <button className="btn btn--ghost" onClick={() => setStep(step - 1)}>
                      ← Back
                    </button>
                  )}
                  <div className="qf-spacer" />
                  {step < 2 && (
                    <button
                      className="btn"
                      disabled={!canNext()}
                      onClick={() => canNext() && setStep(step + 1)}
                      style={{ opacity: canNext() ? 1 : 0.4 }}
                    >
                      Next
                      <span className="arrow" />
                    </button>
                  )}
                  {step === 2 && (
                    <button className="btn" onClick={submit}>
                      Send request
                      <span className="arrow" />
                    </button>
                  )}
                </div>
              </div>
            ) : (
              <div className="qf-done">
                <div className="qfd-check">✓</div>
                <h3 className="h-display qfd-h">Got it.</h3>
                <p className="qfd-p">
                  We'll call you within one business day to schedule a site walk
                  at <strong>{data.address}</strong>. Watch for a call from a 904 number.
                </p>
                <div className="qfd-recap">
                  <div className="qfd-recap-row">
                    <span className="mono">SERVICE</span>
                    <span>{services.find(s => s.id === data.service)?.label || "—"}</span>
                  </div>
                  <div className="qfd-recap-row">
                    <span className="mono">SIZE</span>
                    <span>{data.acres || "—"}</span>
                  </div>
                  <div className="qfd-recap-row">
                    <span className="mono">TIMELINE</span>
                    <span>{data.timeline || "—"}</span>
                  </div>
                  <div className="qfd-recap-row">
                    <span className="mono">CONTACT</span>
                    <span>{data.name} ⋅ {data.phone}</span>
                  </div>
                </div>
                <button className="btn btn--ghost" onClick={() => { setSubmitted(false); setStep(0); setData({ service: "", acres: "", timeline: "", name: "", phone: "", email: "", address: "", notes: "" }); }}>
                  Submit another
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        .quote {
          background: var(--clay);
          color: var(--bg);
          position: relative;
          overflow: hidden;
        }
        .quote::before {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 14px;
          background-image: repeating-linear-gradient(
            -45deg,
            #14171a 0 14px,
            #d97706 14px 28px
          );
        }
        .quote::after {
          content: "";
          position: absolute;
          bottom: 0; left: 0; right: 0;
          height: 14px;
          background-image: repeating-linear-gradient(
            -45deg,
            #14171a 0 14px,
            #d97706 14px 28px
          );
        }

        .qf-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 80px;
          align-items: start;
        }
        .qf-aside { color: var(--bg); }
        .qf-h {
          font-size: clamp(48px, 6vw, 96px);
          margin: 20px 0 24px;
          color: var(--bg);
        }
        .qf-lede {
          font-size: 18px;
          line-height: 1.5;
          max-width: 42ch;
          margin: 0 0 32px;
          color: #2a1a05;
        }
        .qf-promises {
          list-style: none; padding: 0; margin: 0 0 32px;
          display: grid; gap: 4px;
        }
        .qf-promises li {
          display: flex; align-items: center; gap: 12px;
          padding: 12px 0;
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.04em;
          font-size: 14px;
          border-bottom: 1px solid rgba(20,23,26,0.2);
        }
        .qf-promises .x {
          font-family: var(--mono);
          color: var(--bg);
          background: var(--bg);
          color: var(--clay);
          width: 22px; height: 22px;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 12px;
        }

        .qf-or {
          display: flex; align-items: center; gap: 14px;
          margin: 32px 0 18px;
        }
        .qf-or-line { flex: 1; height: 1px; background: rgba(20,23,26,0.3); }
        .qf-or .mono { font-size: 10px; letter-spacing: 0.2em; color: #2a1a05; }

        .qf-phone {
          display: block;
          font-family: var(--display);
          font-size: clamp(40px, 5vw, 64px);
          color: var(--bg);
          letter-spacing: -0.01em;
        }
        .qf-phone:hover { color: #2a1a05; }
        .qf-hours { font-size: 11px; letter-spacing: 0.18em; color: #2a1a05; margin-top: 4px; }

        /* Form panel */
        .qf-form-wrap {
          background: var(--bg-2);
          color: var(--ink);
          border: 2px solid var(--bg);
          padding: 40px;
          box-shadow: 16px 16px 0 var(--bg);
        }

        .qf-steps {
          display: flex; align-items: center; gap: 0;
          margin-bottom: 36px;
          padding-bottom: 24px;
          border-bottom: 1px solid var(--line);
        }
        .qfs {
          display: flex; align-items: center; gap: 10px;
          color: var(--ink-4);
        }
        .qfs.is-on, .qfs.is-done { color: var(--ink); }
        .qfs-n {
          width: 28px; height: 28px; border-radius: 0;
          background: var(--bg-4);
          color: var(--ink-3);
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 11px; letter-spacing: 0;
        }
        .qfs.is-on .qfs-n { background: var(--clay); color: var(--bg); }
        .qfs.is-done .qfs-n { background: var(--ink); color: var(--bg); }
        .qfs-l {
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          font-size: 13px;
        }
        .qfs-line {
          width: 32px; height: 1px;
          background: var(--line-2);
          margin: 0 14px;
        }
        .qfs.is-done + .qfs .qfs-line,
        .qfs.is-on  .qfs-line { background: var(--ink-3); }

        .qf-step { min-height: 320px; }
        .qf-q {
          font-size: 24px;
          margin: 0 0 24px;
          color: var(--ink);
        }
        .qf-sub {
          font-size: 10px; letter-spacing: 0.2em; color: var(--ink-4);
          margin: 24px 0 10px;
        }
        .qf-sub:first-child { margin-top: 0; }

        .qf-options {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }
        .qf-options--row {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        .qf-opt {
          background: var(--bg-3);
          border: 1px solid var(--line);
          color: var(--ink-2);
          padding: 18px 20px;
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.04em;
          font-size: 14px;
          text-align: left;
          display: flex; align-items: center; justify-content: space-between;
          transition: all .15s ease;
        }
        .qf-opt:hover { border-color: var(--ink-4); color: var(--ink); }
        .qf-opt.is-on {
          background: var(--clay);
          color: var(--bg);
          border-color: var(--clay);
        }
        .qf-opt--sm { padding: 12px 16px; font-size: 13px; }
        .qfo-check { opacity: 0; }
        .qf-opt.is-on .qfo-check { opacity: 1; }

        .qf-fields {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        .qf-field { display: flex; flex-direction: column; gap: 6px; }
        .qf-field--full { grid-column: span 2; }
        .qf-field .mono { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); }
        .qf-field input, .qf-field textarea {
          background: var(--bg);
          border: 1px solid var(--line-2);
          color: var(--ink);
          padding: 14px;
          font-family: var(--body);
          font-size: 15px;
          border-radius: 0;
        }
        .qf-field input:focus, .qf-field textarea:focus {
          outline: none;
          border-color: var(--clay);
        }
        .qf-err {
          margin-top: 16px;
          color: var(--clay);
          font-size: 12px;
          letter-spacing: 0.1em;
        }

        .qf-actions {
          display: flex; align-items: center;
          margin-top: 32px;
          padding-top: 24px;
          border-top: 1px solid var(--line);
          gap: 12px;
        }
        .qf-spacer { flex: 1; }

        /* Done state */
        .qf-done { text-align: left; }
        .qfd-check {
          width: 64px; height: 64px;
          background: var(--clay);
          color: var(--bg);
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 36px;
          margin-bottom: 20px;
        }
        .qfd-h { font-size: 72px; margin: 0 0 16px; color: var(--ink); }
        .qfd-p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 50ch; margin: 0 0 28px; }
        .qfd-p strong { color: var(--clay); font-weight: 600; }
        .qfd-recap {
          background: var(--bg);
          border: 1px solid var(--line);
          padding: 4px 20px;
          margin-bottom: 28px;
        }
        .qfd-recap-row {
          display: grid;
          grid-template-columns: 110px 1fr;
          gap: 16px;
          padding: 12px 0;
          border-bottom: 1px solid var(--line);
          font-size: 14px;
        }
        .qfd-recap-row:last-child { border-bottom: none; }
        .qfd-recap-row .mono { font-size: 10px; letter-spacing: 0.16em; color: var(--ink-4); align-self: center; }

        @media (max-width: 1000px) {
          .qf-grid { grid-template-columns: 1fr; gap: 48px; }
          .qf-form-wrap { padding: 28px; box-shadow: 8px 8px 0 var(--bg); }
          .qf-fields { grid-template-columns: 1fr; }
          .qf-field--full { grid-column: auto; }
          .qfs-line { width: 16px; margin: 0 8px; }
          .qf-options { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  FOOTER                                                              */
/* ------------------------------------------------------------------ */
function Footer({ phone }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="ft-top">
          <div className="ft-brand">
            <Logo />
            <p className="ft-tag">
              Forestry mulching, land clearing, and site prep across Northeast Florida since 2011.
            </p>
          </div>

          <div className="ft-cols">
            <div className="ft-col">
              <h4 className="mono">Services</h4>
              <ul>
                <li><a href="#services">Land Clearing</a></li>
                <li><a href="#services">Forestry Mulching</a></li>
                <li><a href="#services">Tree Removal</a></li>
                <li><a href="#services">Stump Grinding</a></li>
                <li><a href="#services">Excavation</a></li>
              </ul>
            </div>
            <div className="ft-col">
              <h4 className="mono">Service Area</h4>
              <ul>
                <li>Duval County</li>
                <li>St. Johns County</li>
                <li>Clay County</li>
                <li>Nassau County</li>
                <li>Baker County</li>
              </ul>
            </div>
            <div className="ft-col">
              <h4 className="mono">Contact</h4>
              <ul>
                <li><a href={`tel:${phone.replace(/[^\d]/g, "")}`} className="ft-link">{phone}</a></li>
                <li><a href="mailto:hello@jaxsiteworks.com">hello@jaxsiteworks.com</a></li>
                <li>3204 Phillips Hwy</li>
                <li>Jacksonville, FL 32207</li>
                <li className="ft-hours">Mon–Sat ⋅ 7am–7pm</li>
              </ul>
            </div>
          </div>
        </div>

        <div className="ft-cta">
          <div className="ft-cta-l">
            <div className="mono ft-cta-eyebrow">Got a job?</div>
            <div className="h-display ft-cta-h">Let's walk it.</div>
          </div>
          <a href="#quote" className="btn">
            Request a quote
            <span className="arrow" />
          </a>
        </div>

        <div className="ft-bottom">
          <div className="mono ft-credit">
            © 2026 Jacksonville Site Works LLC ⋅ Florida Lic. #CGC-XXXXXX ⋅ Fully Insured
          </div>
          <div className="ft-legal mono">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Accessibility</a>
          </div>
        </div>
      </div>

      <div className="ft-banner" aria-hidden="true">
        JACKSONVILLE&nbsp;&nbsp;SITE&nbsp;&nbsp;WORKS&nbsp;&nbsp;·&nbsp;&nbsp;JACKSONVILLE&nbsp;&nbsp;SITE&nbsp;&nbsp;WORKS&nbsp;&nbsp;·&nbsp;&nbsp;JACKSONVILLE&nbsp;&nbsp;SITE&nbsp;&nbsp;WORKS
      </div>

      <style>{`
        .footer {
          background: var(--bg-2);
          color: var(--ink);
          border-top: 1px solid var(--line);
          padding-top: 96px;
          position: relative;
          overflow: hidden;
        }
        .ft-top {
          display: grid;
          grid-template-columns: 1fr 1.6fr;
          gap: 80px;
          padding-bottom: 80px;
          border-bottom: 1px solid var(--line);
        }
        .ft-brand .logo { margin-bottom: 24px; }
        .ft-tag {
          color: var(--ink-2);
          max-width: 32ch;
          font-size: 15px;
          line-height: 1.55;
        }
        .ft-cols {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 48px;
        }
        .ft-col h4 {
          font-size: 10px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--ink-4);
          margin: 0 0 16px;
        }
        .ft-col ul {
          list-style: none; padding: 0; margin: 0;
          display: grid; gap: 10px;
        }
        .ft-col li, .ft-col a {
          color: var(--ink-2);
          font-size: 15px;
        }
        .ft-col a:hover { color: var(--clay); }
        .ft-link { color: var(--ink) !important; font-family: var(--head); letter-spacing: 0.04em; }
        .ft-hours { color: var(--ink-4) !important; font-family: var(--mono); font-size: 11px !important; letter-spacing: 0.16em; }

        .ft-cta {
          padding: 60px 0;
          display: flex; align-items: center; justify-content: space-between;
          gap: 32px;
          border-bottom: 1px solid var(--line);
          flex-wrap: wrap;
        }
        .ft-cta-eyebrow { font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); margin-bottom: 8px; }
        .ft-cta-h { font-size: clamp(48px, 6vw, 80px); }

        .ft-bottom {
          display: flex; justify-content: space-between; align-items: center;
          padding: 32px 0;
          gap: 16px;
          flex-wrap: wrap;
        }
        .ft-credit, .ft-legal { font-size: 10px; letter-spacing: 0.16em; color: var(--ink-4); }
        .ft-legal { display: flex; gap: 24px; }
        .ft-legal a:hover { color: var(--clay); }

        .ft-banner {
          font-family: var(--display);
          font-size: clamp(80px, 16vw, 220px);
          color: transparent;
          -webkit-text-stroke: 1px var(--line-2);
          line-height: 0.9;
          letter-spacing: -0.02em;
          padding: 60px 0 20px;
          white-space: nowrap;
          overflow: hidden;
          user-select: none;
        }

        @media (max-width: 900px) {
          .ft-top { grid-template-columns: 1fr; gap: 48px; padding-bottom: 48px; }
          .ft-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
        }
        @media (max-width: 560px) {
          .ft-cols { grid-template-columns: 1fr; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Faq, QuoteForm, Footer });
