// whs2-page-3.jsx
// Warehousing & Logistics Industry Page — Part 3
// WhsSubsectors (6 logistics facility-type cards)
// WhsDiscovery (3 process steps)
// WhsFAQ (5 sector questions)
// WhsClosingCTA (soft green)

// ============================================================
// WhsSubsectors — 6 logistics facility types in a 3×2 grid.
// Mirrors Municipal MunSubsectors layout exactly.
// ============================================================
const WHS_SUBSECTORS = [
  {
    n: '01', stamp: 'Continuous load · 24/7',
    title: 'Distribution Centres',
    desc: 'Large-scale distribution facilities operate extensive lighting, conveyor systems, dock equipment, and climate control systems around the clock. Energy strategies often focus on reducing operational costs while supporting high-throughput logistics operations.',
    src: `${window.GI_BASE}assets/industries/distribution_centres.webp`,
  },
  {
    n: '02', stamp: 'Refrigeration-led',
    title: 'Cold Storage Warehousing',
    desc: 'Temperature-controlled warehouses require continuous refrigeration systems to preserve perishable goods and maintain strict storage conditions. Refrigeration loads, backup power, and energy efficiency are critical to operational reliability.',
    src: `${window.GI_BASE}assets/industries/cold_storage_warehousing.webp`,
  },
  {
    n: '03', stamp: 'Fleet electrification',
    title: 'Transportation & Fleet Facilities',
    desc: 'Fleet depots, trucking terminals, and vehicle maintenance facilities consume energy through fueling systems, ventilation, lighting, and EV charging infrastructure. Modernization efforts increasingly focus on electrification and operational efficiency.',
    src: `${window.GI_BASE}assets/industries/transportation_fleet_facilities.webp`,
  },
  {
    n: '04', stamp: 'Automation-heavy',
    title: 'E-Commerce Fulfillment Centres',
    desc: 'High-volume fulfillment facilities rely on automation, robotics, sorting equipment, and extended operating hours to support rapid order processing. Managing electricity demand and equipment performance is essential for operational continuity.',
    src: `${window.GI_BASE}assets/industries/e-commerce_fulfillment_centres.webp`,
  },
  {
    n: '05', stamp: 'Mixed client load',
    title: 'Third-Party Logistics (3PL) Facilities',
    desc: '3PL operations support multiple clients with varying storage, handling, and distribution requirements. Flexible energy solutions help optimize warehouse operations while accommodating changing logistics demands.',
    src: `${window.GI_BASE}assets/industries/third-party_logistics.webp`,
  },
  {
    n: '06', stamp: 'Heavy material handling',
    title: 'Port, Rail & Intermodal Facilities',
    desc: 'Intermodal terminals and freight handling facilities require energy for material handling equipment, yard lighting, refrigeration connections, and transportation infrastructure. Energy resilience and operational uptime are key priorities in large-scale logistics environments.',
    src: `${window.GI_BASE}assets/industries/port_rail_intermodal.webp`,
  },
];

const WhsSubsectorTile = ({ s }) => {
  const [hover, setHover] = React.useState(false);
  return (
  <article
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    style={{
    background: 'transparent',
    display: 'flex', flexDirection: 'column', gap: 0,
    height: '100%',
  }}>
    <div style={{
      position: 'relative',
      aspectRatio: '4 / 3',
      overflow: 'hidden',
      background:
        'repeating-linear-gradient(45deg, rgba(15,33,51,0.04) 0 1px, transparent 1px 18px),' +
        'linear-gradient(135deg, var(--gi-wise-blue) 0%, #1B3450 100%)',
      border: '1px solid rgba(15,33,51,0.10)',
    }}>
      {/* corner crops */}
      {[
        { top: 10, left: 10 },
        { top: 10, right: 10 },
        { bottom: 10, left: 10 },
        { bottom: 10, right: 10 },
      ].map((c, i) => (
        <span key={i} aria-hidden="true" style={{
          position: 'absolute',
          top: c.top, left: c.left, right: c.right, bottom: c.bottom,
          width: 14, height: 14,
          borderTop:    c.top    != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
          borderBottom: c.bottom != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
          borderLeft:   c.left   != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
          borderRight:  c.right  != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
        }} />
      ))}

      {/* stamp top-left */}
      <span style={{
        position: 'absolute', left: 14, top: 14,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 9px',
        background: 'rgba(15,33,51,0.85)',
        backdropFilter: 'blur(4px)',
        fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: '#fff', fontWeight: 500,
      }}>
        <span>{s.stamp}</span>
      </span>

      <img src={s.src} alt={s.title}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>

    <h3 style={{
      font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.012em',
      color: 'var(--gi-deep-ink)', margin: '20px 0 10px',
      textWrap: 'balance',
    }}>{s.title}</h3>
    <p style={{
      font: '400 14px/22px var(--ff-sans)',
      color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
    }}>{s.desc}</p>

    {/* <div style={{
      marginTop: 'auto', paddingTop: 14,
      borderTop: '1px solid rgba(15,33,51,0.16)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'var(--ff-mono)', fontSize: 10.5,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'var(--gi-deep-ink)', fontWeight: 500,
    }}>
      <span>Explore application</span>
      <span aria-hidden="true" style={{
        color: 'var(--gi-amber)', fontSize: 14,
        transform: hover ? 'translateX(6px)' : 'none',
        transition: 'transform 300ms cubic-bezier(.2,.6,.2,1)',
      }}>→</span>
    </div> */}
  </article>
  );
};

const WhsSubsectors = () => (
  <section data-gi-resp="whs-subsectors" data-screen-label="07 Subsectors" style={{
    background: 'var(--gi-paper-cream)', padding: '128px 0 0',
  }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1440, margin: '0 auto', padding: '0 48px',
    }}>
      <div data-gi-reveal className="gi-section-head" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 96,
        marginBottom: 56,
      }}>
        <div>
          <div style={{ marginBottom: 22 }}>
            <Eyebrow className="gi-eyebrow--green">Sector applications</Eyebrow>
          </div>
          <h2 style={{
            font: '500 44px/52px var(--ff-sans)', letterSpacing: '-0.024em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
          }}>
            Different logistics operations.{' '}
            <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
              Different energy profiles.
            </span>
          </h2>
        </div>
        <p style={{
          font: '400 16px/26px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          textWrap: 'pretty',
        }}>
          Warehousing and logistics facilities span very different operating profiles —
          from continuous distribution centres to refrigeration-heavy cold storage to
          fleet depots planning electrification. Each calls for a different sequencing
          of measures.
        </p>
      </div>

      <div data-gi-reveal-stagger data-gi-resp="whs-subsectors-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '40px 28px',
      }}>
        {WHS_SUBSECTORS.map((s) => <WhsSubsectorTile key={s.n} s={s} />)}
      </div>

      <div data-gi-resp="whs-subsectors-cta" style={{
        marginTop: 56, paddingTop: 32,
        borderTop: '1px solid rgba(15,33,51,0.18)',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
        alignItems: 'center',
      }}>
        <p style={{
          font: '400 15px/24px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty', maxWidth: 640,
        }}>
          Not sure which sub-sector best describes your facility?{' '}
          <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic' }}>
            That's usually the right place to start a conversation.
          </span>{' '}
          A 20-minute call is enough to map your load profile against the right scope of work.
        </p>
        <div data-gi-resp="whs-subsectors-cta-buttons" style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <Button target="_blank" variant="ink" size="md" href="https://zfrmz.com/BnwyQdPWyiVX0XNZ9Uap">Book a sector consult →</Button>
          <Button variant="outline" size="md" href="/projects/?category=warehousing">See all logistics projects</Button>
        </div>
      </div>
    </div>
  </section>
);


// ============================================================
// WhsDiscovery — 3 process steps on Paper Cream.
// Replaces the prior "Our approach" section.
// ============================================================
const WhsDiscovery = () => {
  const step02bullets = [
    'demand-charge exposure',
    'operating load profile',
    'time-of-use consumption',
    'refrigeration & lighting load',
    'potential solar, storage & LED economics',
  ];

  return (
    <section data-gi-resp="whs-discovery" data-screen-label="08 Discovery Process" style={{
      background: 'var(--gi-paper-cream)', padding: '128px 0',
    }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <div data-gi-reveal className="gi-section-head" data-gi-resp="whs-discovery-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
          alignItems: 'end', justifyItems: 'flex-end',
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--green">Our discovery process</Eyebrow>
            </div>
            <h2 style={{
              font: '500 56px/62px var(--ff-sans)', letterSpacing: '-0.028em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
            }}>
              Start with a baseline.{' '}
              <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
                Not a commitment.
              </span>
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
            textWrap: 'pretty',
          }}>
            Most distribution and logistics facilities already have enough operational
            and utility data to identify meaningful energy-saving opportunities. The
            first step is understanding how the facility consumes power and where the
            strongest payback exists.
          </p>
        </div>

        <div data-gi-reveal-stagger data-gi-resp="whs-discovery-grid" style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {/* Step 01 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 01</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Quick 20-minute discovery call.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We review your facility type, square footage, operating hours, fleet
              electrification plans, and current priorities. No commitment required.
            </p>
          </article>

          {/* Step 02 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 02</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 14px',
              textWrap: 'balance',
            }}>12 months of utility bills.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
            }}>
              Interval and utility billing data help identify:
            </p>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              {step02bullets.map((b) => (
                <li key={b} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12,
                  font: '400 14px/22px var(--ff-sans)',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span aria-hidden="true" style={{
                    width: 6, height: 6, marginTop: 8,
                    background: 'var(--gi-sage-accent)', display: 'inline-block',
                  }} />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </article>

          {/* Step 03 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 03</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Documented facility baseline.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We produce a facility-specific baseline covering consumption, demand
              charges, and a ranked list of measures — the reference point for capital
              planning and procurement.
            </p>
          </article>
        </div>

        <div data-gi-resp="whs-discovery-cta" style={{
          marginTop: 48, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <Button target="_blank" variant="primary" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute discovery call</Button>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.10em',
            color: 'var(--gi-graphite)', textTransform: 'uppercase',
          }}>No commitment required.</span>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// WhsFAQ — Paper White. 5 sector questions.
// ============================================================
const WhsFAQ = () => {
  const items = [
    {
      q: 'Is my warehouse roof a good candidate for solar?',
      a: "Most modern distribution facilities have large, unobstructed flat roofs ideal for solar. A short structural assessment confirms whether the existing roof can carry the additional dead load and where mechanical penetrations, skylights, and roof drainage place constraints on the array layout.\n\nFor older buildings or buildings with a near-term re-roofing schedule, we coordinate solar timing against the re-roof so the array is installed on a fresh membrane."
    },
    {
      q: 'How does battery storage reduce demand charges?',
      a: "Large warehouses commonly pay both energy charges (cents per kWh) and demand charges (dollars per kW of peak draw). Demand charges are set by the highest 15-minute interval each month and can represent a substantial fraction of the bill.\n\nBattery storage discharges during short peak events to keep the metered demand below the threshold that sets the monthly bill, producing operating cost reductions independent of energy savings — and providing resilience for cold-chain, automation, and security systems."
    },
    {
      q: 'Can EV and forklift charging be added without a service upgrade?',
      a: "Sometimes — but only after the existing service capacity and load profile are reviewed. We assess available capacity, model the proposed charging load, and identify whether smart load management can defer or eliminate the need for a service upgrade.\n\nFor higher-power fleet charging or sites already near service capacity, an upgrade may be unavoidable. Identifying that early avoids emergency electrical work under deadline pressure from a fleet replacement schedule."
    },
    {
      q: 'What is the typical payback for a high-bay LED retrofit?',
      a: "High-bay LED retrofits in 24/7 warehouses typically pay back within two to four years through reduced electricity consumption, lower lamp-replacement and maintenance costs, and reduced HVAC heat-rejection load on cooled spaces.\n\nThis is usually the fastest-payback measure in the building. We size it against your operating hours, current fixture inventory, and saveONenergy incentive eligibility."
    },
    {
      q: 'Do incentive programmes apply to leased warehouse facilities?',
      a: "Yes — most federal and provincial programmes are available to both owners and tenants, with the eligible party determined by who owns the equipment and bears the project cost.\n\nWe help structure the project so that the right party captures the incentive and the savings flow through the lease in a defensible way. For long-term tenants, this typically involves a green-lease amendment or a side agreement covering equipment ownership, capital allocation, and incentive attribution."
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section data-gi-resp="whs-faq" data-screen-label="09 FAQ" style={{ background: 'var(--gi-paper-white)', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal data-gi-resp="whs-faq-head" style={{
          display: 'flex', justifyContent: 'space-between', gap: 96,
          alignItems: 'flex-end', marginBottom: 64,
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Questions from facility managers &amp; operations directors</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
            }}>Frequently asked questions.</h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          }}>
            Warehousing and logistics energy questions — specific to distribution,
            fulfillment, cold-chain, and fleet operations.
          </p>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid rgba(15,33,51,0.14)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.14)',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} data-gi-resp="faq-trigger" style={{
                  width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '32px 0', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24, alignItems: 'center',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em',
                    color: 'var(--gi-sage-accent)', fontWeight: 600,
                  }}>Q · {String(i+1).padStart(2, '0')}</span>
                  <h3 style={{
                    font: '500 22px/30px var(--ff-sans)', letterSpacing: '-0.014em',
                    color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
                  }}>{it.q}</h3>
                  <span style={{
                    fontFamily: 'var(--ff-sans)', fontSize: 26, fontWeight: 300,
                    color: 'var(--gi-deep-ink)', justifySelf: 'end',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 260ms cubic-bezier(.2,0,0,1)', lineHeight: 1,
                  }}>+</span>
                </button>
                <div className="gi-faq-answer" data-open={isOpen ? 'true' : 'false'}>
                  <div className="gi-faq-answer-inner" data-gi-resp="faq-answer-inner" style={{
                    padding: isOpen ? '0 0 32px' : '0',
                    transition: 'padding 260ms cubic-bezier(0.4,0,0.2,1)',
                    display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24,
                  }}>
                    <span />
                    <p style={{
                      font: '400 16px/28px var(--ff-sans)',
                      color: 'var(--gi-slate)', margin: 0,
                      textWrap: 'pretty', maxWidth: 820, whiteSpace: 'pre-line',
                    }}>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};


// ============================================================
// WhsClosingCTA — Soft Green
// ============================================================
const WhsClosingCTA = () => (
  <section data-gi-resp="whs-closing-cta" data-screen-label="10 Closing CTA" style={{
    background: 'var(--gi-soft-green)', color: '#fff',
    padding: '128px 0', position: 'relative', overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', right: -120, top: -120, opacity: 0.08, pointerEvents: 'none',
    }}>
      <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 640, height: 640 }} />
    </div>
    <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark className="gi-eyebrow--gold">Start your assessment</Eyebrow>
        </div>
        <h2 style={{
          font: '500 64px/70px var(--ff-sans)', letterSpacing: '-0.03em',
          color: '#fff', margin: 0, textWrap: 'balance',
        }}>
          Energy infrastructure for{' '}
          <span style={{ color: '#D4A24C' }}>warehousing & logistics</span>.
        </h2>
        <p style={{
          font: '400 19px/30px var(--ff-sans)',
          color: 'rgba(255,255,255,0.86)', margin: '28px 0 44px', maxWidth: 720, textWrap: 'pretty',
        }}>
          Distribution and logistics facilities operate at scale, around the clock, with
          rising electricity demand. We identify practical upgrades that reduce operating
          cost and support modern logistics operations.
        </p>
        <div data-gi-resp="whs-closing-cta-buttons" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/">Start your assessment</Button>
          <Button target="_blank" variant="outlineOnDark" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
        </div>
        <p data-gi-resp="whs-closing-cta-no-commitment" style={{
          font: '400 13px/20px var(--ff-sans)',
          color: 'rgba(255,255,255,0.62)', margin: '32px 0 0', fontStyle: 'italic',
        }}>
          No commitment required.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { WhsSubsectors, WhsDiscovery, WhsFAQ, WhsClosingCTA });