<!--
  Gathering Hour: Groups & Teams page (formerly "Corporate & Teams", then
  "Corporate & Groups")
  Created: 2026-08-14, restructured 2026-08-17
  Notes: Middle-of-page redesign per Sarah's detailed review of the first
  draft. Her core critique: the page read as "a competent corporate
  landing page wearing Gathering Hour typography" because everything
  after the hero had the same visual weight (text -> four cards -> four
  steps -> four cards -> photo -> form), with no editorial moments. Hero
  and the inquiry form stayed, per her note they were already solid
  anchors. Everything between them was restructured:

  1) The Pitch section is no longer a cream, centered text block. It's
     now a full-width aubergine band ("A Better Way to Get Together"),
     the page's one saturated color block, a genuine brand statement
     rather than transitional copy. New body copy per her exact wording.
     Two-tone headline here uses page-scoped .cpb-italic/.cpb-black
     spans (pink italic / paper black) rather than the shared
     .hl-italic/.hl-black, since those default to aubergine/tomato text,
     which would be invisible on an aubergine background.

  2) Use Cases and the old "What We Can Create" 4-card grid were two
     consecutive four-card grids back to back, which is what made the
     page feel templated. Use Cases stays a grid (kept, commercially
     important) but now uses real photos instead of "Photo coming"
     placeholders, see photo note below. "What We Can Create" is gone as
     a grid entirely, replaced by a new "Choose what you want us to
     handle" section: one large lifestyle image on the left, the four
     components (Gathering / Activity / Details / Custom Touches) stacked
     as a list on the right, matching the asymmetric rhythm Sarah pointed
     to (the Host Box section pattern used elsewhere on the site), giving
     this part of the page a different shape than the grids around it.

  3) How It Works kept its position and eyebrow ("From Idea to Table")
     but got Sarah's stronger headline ("You pick the occasion. We do the
     planning.") set larger and two-tone via page-scoped
     .corp-how-headline .hl-italic/.hl-black overrides, distinct from the
     plain monochrome secondary headlines used on Use Cases and the new
     "Choose what you want us to handle" section, giving it more presence
     as an editorial moment without adding a second color block. Steps
     rewritten to her tighter copy, including the "take the credit" line.

  4) The full-bleed photo now has a job instead of appearing between
     sections almost accidentally: her new two-line overlay statement
     ("Because nobody remembers the team-building exercise. They
     remember the night everyone actually had fun."), styled as a
     smaller lead line plus a larger punch line.

  5) Rename: nav dropdown and footer now say "Groups & Teams" (Sarah's
     pick over "Gathering Hour for Teams" and keeping "Corporate &
     Groups"), propagated to all other pages in the same pass. The hero
     eyebrow reverts to "For Teams" per her explicit note ("the eyebrow
     can still say FOR TEAMS"), the URL stays /corporate.html since nothing
     links by name, only by path.

  Inquiry form, CTA/email band, and footer structure otherwise unchanged
  from the first draft. All flags from the original build still apply
  and are restated where relevant below.

  IMPORTANT, read before sending this live:

  1) The hero's guest-range line ("For groups of [X-X]") is still the
     literal bracketed placeholder, a real business decision (minimum
     group size, capacity ceiling) still needs a real number before this
     goes live.

  2) Photos, updated for this pass:
     - Hero: unchanged, reuses LKXMKyo.jpeg (Painting Kit hero photo).
     - Aubergine pitch band: no photo, color block only.
     - Use Cases: NOW using real reused photos instead of placeholders,
       per Sarah's note that imagery doesn't need to be literally
       corporate as long as it communicates the experience. Team
       Gatherings reuses bjWD6Kr.jpeg (Friendsgiving, communal table),
       Client Events reuses TQUaiB8.jpeg (Tea in the Garden, an elegant
       hosting moment), Offsites + Retreats reuses egEF3gO.jpeg (Sicilian
       Aperitivo, relaxed evening mood), Employee Gifting reuses
       AAh4x4y.jpeg (Apartment Cafe, a cozy care-package feel). None of
       these are corporate-specific shoots, flagging the reuse plainly.
     - "Choose what you want us to handle": the large left-hand image
       reuses cxCyUEE.jpeg (the Host Box arrival photo from Founding
       Friends' "What Arrives" section), chosen since this section is
       about what arrives/what's handled for you, a thematic fit even
       though it's not a new shot.
     - Social-proof full-bleed section: unchanged, reuses bGHtMfy.jpeg
       (homepage hero photo).
     - Custom Touches no longer has its own card/placeholder now that
       "What We Can Create" is a stacked list instead of a grid, so
       there's no more empty "Photo coming" tile for it specifically.

  3) Inquiry form: still pills (not a dropdown) for "What are you
     planning?", matching the Contact page's established pattern. No
     backend wired yet, needs a real destination before launch.

  4) 2026-08-17: two changes, formalizing Sarah's "two-block design
     system" note.
     a) "The Pitch" band was promoted from page-scoped .corp-pitch-*/
        .cpb-* classes to the new shared .statement-band component (see
        styles.css), the "Statement Block" variant: eyebrow, two-tone
        headline, body copy, closer line, no button, used mid-page to
        break things up. Visual result is unchanged, same copy, same
        look, just pointing at the shared component now instead of a
        one-off copy of the same CSS.
     b) Added a new Action Band (the "always has a button" variant, see
        .closer-band in styles.css) between the social-proof photo and
        the inquiry form: "Tell us who's coming. We'll take it from
        there." -> "Start an Inquiry ->", button jumps to #inquiry. Same
        wording the form's own submit button already uses, so it reads
        as one continuous ask rather than two different pitches.

  5) 2026-08-18: applied the new Gathering Hour Web Type Scale (see
     styles.css). No hero exception on this page, so .corp-headline's two
     spans went from 46px/42px mismatched to a unified 52px/52px (Hero
     tier), 40px/40px mobile added. .corp-how-headline's two spans (36px/
     32px mismatched) -> 40px/40px (Editorial tier), 32px mobile unified.
     .corp-how-title 15px -> 20px (H3/card-title tier, matches the step-
     title pattern used on How It Works). .corp-inquiry-headline 32px ->
     40px (Editorial tier). .corp-proof-lead 19px -> 20px (Subheading
     tier). .corp-handle-name (a true eyebrow-style caps label) matched
     to the shared 13px/700/0.14em spec, 12px mobile added. Body/meta
     copy floored: .corp-hero-body, .corp-handle-desc, .corp-inquiry-body
     -> 16px (body); .corp-hero-meta, .corp-use-desc, .corp-how-desc ->
     14px (meta). .corp-how-num (a small decorative step numeral) and
     .corp-proof-punch (already on-scale at 30px) left alone. .corp-label
     (form field labels) and .corp-topic-pill-label (pill chips) left
     alone too, dense functional widget UI, same category as the product
     pages' build-widget internals.

  2026-08-19: two hero tweaks. (1) .corp-hero align-items start -> center,
  same fix as About/Founding Friends/homepage, so the hero text sits
  vertically centered against the photo instead of pinned to the top.
  (2) .corp-hero padding-bottom 0 -> 48px, the hero photo was sitting
  flush against the aubergine "A Better Way to Get Together" statement
  band directly below it, this gives the cream background some room to
  breathe before the purple starts.

  2026-08-19, later same day: .corp-headline's two spans were inline, so
  "to the" was wrapping up onto the italic line ("Bring everyone to the")
  with only "table." dropping to its own line. Added display: block to
  both .hl-italic and .hl-black so the whole bold red line ("to the
  table.") always sits together on its own line below the italic line,
  matching how the two-tone treatment behaves everywhere else on the site.

  2026-08-19, later same day: major compression pass per Sarah's review.
  Her read: the page had three separate persuasion sections between the
  hero and the form (statement band, Use Cases, "Choose what you want us
  to handle," the 4-step How It Works, a second photo banner) before
  ever letting a corporate buyer act, which is over-explaining for a lead
  form. New flow: Hero -> statement band (shortened) -> Use Cases,
  retitled "What are you planning?" -> Inquiry form -> newsletter/footer.
  Specifically:
  - Hero: removed the "For groups of [X-X] . Custom and ready-to-host
    options available" meta line entirely per her note ("unless there's
    an important minimum"), no minimum has been given yet, so it's gone
    rather than left as a placeholder blocking launch. Can come back once
    there's a real number and reason to state it.
  - Statement band: .statement-body cut down to one line ("Give people a
    beautiful table, something to do, and a reason to actually talk to
    each other."), dropped the "Skip the conference-room catering..."
    opening sentence. Closer line unchanged.
  - Use Cases: same four cards (Team Gatherings / Client Events /
    Offsites + Retreats / Employee Gifting), same photos, only the H2
    changed from "For work things that shouldn't feel like work." to
    "What are you planning?", which also now echoes the form's own
    "What are you planning?" pill question right after it.
  - Removed entirely, both markup and now-dead CSS: "Choose what you
    want us to handle" (the Gathering/Activity/Details/Custom Touches
    stacked list, .corp-handle-*), the 4-step "How It Works" section
    (.corp-how-*), the full-bleed social-proof photo band with the
    "nobody remembers the team-building exercise" overlay copy
    (.corp-proof-*, still like this line, just not earning its space
    here per Sarah, worth reusing in corporate marketing/social/email),
    and the closer-band Action Band that used to bridge the photo into
    the form (no longer needed since the form now follows Use Cases
    directly). Mobile media query cleaned up to match, removed
    .corp-handle-grid/.corp-how-grid/.corp-how-headline/.corp-handle-name
    overrides.
  - Inquiry form: eyebrow unchanged ("Let's Plan Something"), headline
    "Tell us who's coming." -> "Tell us what you have in mind." (the old
    line read like she wanted a literal attendee list), body copy ->
    "Whether it's dinner for twelve or something for the whole team,
    give us the basics. We'll take it from there." Form fields themselves
    unchanged.
  Net effect: page goes from 9 sections between nav and footer down to 4
  (hero, statement band, use cases, inquiry form), per Sarah's target of
  cutting the page 35-45% without losing selling information.

  2026-08-19, later same day: new sitewide corner-radius system (see
  styles.css). This page's photography (hero, Use Cases grid) had inline
  border-radius:4px reduced to 2px. .corp-card border-radius 10px -> 8px,
  matches the new small-not-bubbly card standard.

  2026-08-19, later same day: eyebrow reduction pass, per the new
  sitewide rule (max 1-2 per page, banners exempt). Cut "Made for
  Getting People Together" (Use Cases, redundant with the "What are
  you planning?" headline right below it) and "Let's Plan Something"
  (inquiry form, redundant with its own headline). Removed the now-
  unused .corp-inquiry-eyebrow-headline CSS rule. Kept "For Teams" in
  the hero, since the headline itself ("Bring everyone to the table.")
  doesn't signal this is the B2B/groups page on its own, that's real
  audience-defining information, not decoration. Kept the statement
  band's "A Better Way to Get Together", it lives inside the aubergine
  color block, which is one of the banner sections Sarah's rule
  exempts, same as the newsletter band's "From Gathering Hour".

  2026-08-21: sitewide Flamingo Estate rollout. The shared .statement-
  band now defaults to blush (pink) instead of aubergine, and its text
  colors flipped to suit a light background (see styles.css), so "A
  Better Way to Get Together" keeps its banner-exemption, this is still
  a genuine one-time content pivot, just a lighter brand tint now. No
  markup changes needed here, this page had no page-scoped override of
  .statement-band. Footer also dropped its now-meaningless divider-top
  class (garnet footer color reads as its own break).
  2026-08-21, later same day: migrated every i.imgur.com image reference
  on this page to Shopify's own file library (cdn.shopify.com), after
  discovering Imgur has been fully blocked in the UK since September
  2025 (an Online Safety Act/ICO issue with Imgur's parent company,
  not a temporary glitch) and has also had spotty blocks elsewhere
  (Taiwan uploads). Imgur was only ever meant as a placeholder host
  during early build, this closes that out. Each image was re-uploaded
  via Shopify's fileCreate mutation with its existing alt text carried
  over, same photos, same alt text, just reliable hosting on
  infrastructure Gathering Hour already depends on for checkout.
  2026-08-27: footer reverted from garnet back to cream sitewide (see
  styles.css), Sarah didn't like it live. Footer here picks up the
  shared default automatically, no page-scoped CSS to change. Restored
  the divider-top class on the <footer> tag, needed again now that
  footer matches the body's cream background.

  2026-09-09: SITEWIDE ROLLOUT, ninth page. Same pattern as the other
  rollout pages, plus one bigger change specific to this page:
  - Nav simplified to How it works / About / Shop pill, matching the
    homepage. toggleShopMenu() removed from the closing <script> block.
  - Corner radius squared off: all five inline border-radius:2px
    photos (hero, four Use Cases tiles) -> 0. .corp-card (the white
    inquiry-form card) left at 8px, it's a form container, not
    photography or the card-grid pattern this rollout touches.
  - Pink removed sitewide, last holdout: .statement-band (see
    styles.css) was the final live usage of var(--pink) anywhere on
    the site, deferred to this page since it's .statement-band's only
    real instantiation. Promoted to aubergine, same move already made
    on .cta-band. Text recolored to solid var(--paper) (was aubergine
    italic / espresso body / espresso closer, all of which would've
    gone invisible or muddy on the new dark background), tomato kept
    for the bold second headline line as the dark-background accent
    color used elsewhere on the site. No markup changes needed here,
    this page had no page-scoped override of .statement-band's colors.
  - Newsletter band: no page-scoped change needed, picks up the new
    aubergine default from the shared .cta-band in styles.css
    automatically.

2026-09-11: added the site favicon (Sarah's gh-mark-cream.png monogram, saved to /assets and rendered down to favicon.ico, 16x16, 32x32, and a 180x180 apple-touch-icon). Same four <link> tags added to every page's <head>, right after <title>.
2026-09-11, later still: rolled the homepage's bold-divider treatment (.divider-bold, see styles.css) onto this page too, per Sarah's sitewide request. Upgraded the "Use Cases" section's thin .divider-top line to .divider-bold.

2026-09-17: hero headline sized up, a scaled-down version of Gatherings' "oversized header treatment" (.corp-headline's own column is capped at 480px) -- see the CSS comment above .corp-headline for the full spec.

2026-10-03, later: Team Gatherings photo swapped from the dark Friendsgiving table to the garden party photo (people mingling with drinks), per Sarah.
2026-10-09: footer gets an "Affiliate Disclosure" link next to Privacy & Terms (Sarah's affiliate handoff).
2026-10-15: Sovrn Commerce (VigLink) affiliate script added before </body>.
2026-10-22: "Decorations" (/decorations.html) added to the Shop menu and footer Shop column, after Activity Kits (Sarah).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2026-09-21: Google Tag Manager added sitewide (container GTM-PCGXB7FK) -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PCGXB7FK');</script>
<!-- End Google Tag Manager -->
<!-- 2026-09-22: Klaviyo onsite tracking added sitewide, per Sarah -- unlocks
     Viewed Product tracking for the browse-abandonment flow. The object-
     loader script goes first so klaviyo.track() calls on product pages
     don't race the async klaviyo.js load. -->
<!-- Klaviyo -->
<script type="text/javascript">
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();
</script>
<script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=UhUBGL"></script>
<!-- End Klaviyo -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gathering Hour: Groups &amp; Teams</title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/styles.css?v=20261026a">
<link rel="stylesheet" href="/signup-popup.css?v=20261004a">
<style>

/* ── HERO ── */
.corp-hero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  padding-top: 32px;
  padding-bottom: 48px;
  align-items: center;
}
.corp-headline { margin-bottom: 20px; max-width: 480px; }
/* Two-tone hero headline (site standard, see styles.css). 2026-09-17:
   scaled version of the "oversized header treatment" nailed down on
   Gatherings (see that page's CSS comment for the full spec) -- this
   headline's own column is capped at 480px, less than half Gatherings'/
   FAQ's 1036px, so the ceiling is scaled down rather than copied
   verbatim, per Sarah's call. Floor (40px) matches the old fixed mobile
   size exactly, so mobile doesn't get smaller, only desktop scales
   further via vw. */
.corp-headline .hl-italic,
.corp-headline .hl-black {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.01em;
  display: block;
  line-height: 0.98;
}
.corp-headline .hl-italic { color: var(--hl-serif); }
.corp-headline .hl-black { color: var(--tomato); margin-top: 2px; }
@media (max-width: 1024px) {
  .corp-headline .hl-italic,
  .corp-headline .hl-black { line-height: 0.95; }
}
@media (max-width: 480px) {
  .corp-headline .hl-italic,
  .corp-headline .hl-black { line-height: 1.02; }
}
.corp-hero-body { font-size: 16px; color: var(--espresso-70); line-height: 1.65; max-width: 460px; margin-bottom: 24px; }
.corp-hero-img { aspect-ratio: 4 / 3.6; }

/* ── USE CASES / "What are you planning?" (visual grid, real photos) ── */
.corp-use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.corp-use-img { aspect-ratio: 3 / 3.4; margin-bottom: 14px; }
.corp-use-name { font-size: 14px; font-weight: 700; color: var(--aubergine); margin-bottom: 6px; letter-spacing: -0.2px; }
.corp-use-desc { font-size: 14px; color: var(--espresso-70); line-height: 1.5; }

/* ── INQUIRY CTA + FORM ── */
.corp-inquiry-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.corp-inquiry-headline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 40px;
  color: var(--hl-serif);
  margin-bottom: 14px;
  line-height: 1.15;
}
.corp-inquiry-body { font-size: 16px; color: var(--espresso-70); line-height: 1.65; max-width: 380px; }

.corp-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(42,27,21,0.04), 0 8px 24px rgba(42,27,21,0.05);
}
.corp-form-group { margin-bottom: 16px; }
.corp-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso-50);
  display: block;
  margin-bottom: 8px;
}
.corp-input, .corp-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--espresso-15);
  border-radius: 6px;
  background: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--espresso);
}
.corp-input::placeholder, .corp-textarea::placeholder { color: var(--espresso-50); }
.corp-input:focus, .corp-textarea:focus { outline: none; border-color: var(--aubergine); }
.corp-textarea { resize: vertical; min-height: 90px; font-family: 'Archivo', sans-serif; }
.corp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.corp-topic-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.corp-topic-pill { position: absolute; opacity: 0; width: 1px; height: 1px; }
.corp-topic-pill-label {
  display: inline-flex;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--espresso-15);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--espresso-70);
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
}
.corp-topic-pill-label:hover { border-color: var(--aubergine); color: var(--aubergine); }
.corp-topic-pill:checked + .corp-topic-pill-label {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--paper);
}
.corp-topic-pill:focus-visible + .corp-topic-pill-label { outline: 2px solid var(--aubergine); outline-offset: 2px; }

.corp-submit-row { display: flex; justify-content: flex-end; margin-top: 22px; }

@media (max-width: 900px) {
  .corp-hero, .corp-inquiry-grid { grid-template-columns: 1fr; gap: 32px; }
  .corp-use-grid { grid-template-columns: repeat(2, 1fr); }
  .corp-row-2 { grid-template-columns: 1fr; }
  /* Fixed 40px override removed 2026-09-17 -- clamp()'s own 40px floor
     (above) already matches it, no regression. */
  .eyebrow { font-size: 12px; }
}

/* ── 2026-10-03 REBUILD ── */
.corp-h2 { margin-bottom: 28px; }
.corp-h2 .hl-italic, .corp-h2 .hl-black { display: block; font-size: 40px; }
.corp-h2 .hl-black { color: var(--hl-accent); }
.corp-incl { background: var(--mushroom, #F2E9E2); padding-top: 56px; padding-bottom: 56px; }
.corp-incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.corp-incl-grid > div { background: var(--paper); border-radius: 2px; padding: 24px; }
.corp-incl-grid svg { width: 26px; height: 26px; color: var(--name); margin-bottom: 12px; }
.corp-incl-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--name); margin-bottom: 8px; }
.corp-incl-desc { font-size: 15px; color: var(--body); line-height: 1.55; }
.corp-incl-closer { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 26px; color: var(--name); text-align: center; margin-top: 32px; }
.corp-uses { padding-top: 56px; padding-bottom: 48px; }
.corp-use-name { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--name); }
.corp-choose { background: var(--mushroom, #F2E9E2); padding-top: 56px; padding-bottom: 56px; }
.corp-choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.corp-choose-card { display: block; text-decoration: none; color: inherit; }
.corp-choose-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; margin-bottom: 14px; }
.corp-choose-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.corp-choose-card:hover .corp-choose-img img { transform: scale(1.03); }
.corp-choose-card:hover .ready-arrow { transform: translateX(4px); }
.corp-choose-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hl-accent); display: block; margin-bottom: 6px; }
.corp-choose-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 24px; color: var(--name); margin-bottom: 4px; line-height: 1.15; }
.corp-choose-meta { font-size: 14px; color: var(--espresso-70); }
.corp-form-error { font-size: 14px; color: var(--tomato); margin-top: 14px; }
.corp-sent { padding: 24px 4px; }
.corp-sent-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 28px; color: var(--name); margin-bottom: 8px; }
@media (max-width: 900px) {
  .corp-h2 .hl-italic, .corp-h2 .hl-black { font-size: 30px; }
  .corp-incl-grid, .corp-choose-grid { grid-template-columns: 1fr; gap: 16px; }
}
</style>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCGXB7FK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- ── NAV ── -->
<nav>
  <a class='nav-logo' href='/'><em>gathering</em><strong>hour</strong></a>
  <button class="nav-toggle" aria-label="Open menu" onclick="document.querySelector('nav').classList.toggle('nav-open')">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-links">
    <li><a href='/how-it-works'>How it works</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/journal'>Journal</a></li>
    <li class="nav-shop">
      <a class='btn-pill btn-tomato' href='/gatherings' onclick='return toggleShopMenu(event)'>Shop</a>
      <div class="nav-shop-menu">
        <a href='/gatherings'>Gatherings</a>
        <a href='/activity-kits'>Activity Kits</a>
        <a href='/decorations'>Decorations</a>
        <a href='/gift-cards'>Gift Cards</a>
      </div>
    </li>
  </ul>
</nav>

<script>
// 2026-09-23, per Sarah: "Shop" nav pill becomes a dropdown again (Themes,
// Activities -- Gift Shop to follow once that's live). Reuses the
// .nav-shop/.nav-shop-menu CSS already in styles.css from the 2026-08-14
// version of this same idea (hover opens it on desktop via CSS alone;
// touch devices need this JS since :hover doesn't fire on tap). The Shop
// pill keeps its real href to gatherings.html so it still works with JS
// off or on desktop hover; on touch, tapping it just opens the menu
// instead of navigating immediately.
function toggleShopMenu(e){
  if (!window.matchMedia('(hover: none)').matches) return true;
  e.preventDefault();
  var el = e.currentTarget.closest('.nav-shop');
  if (el) el.classList.toggle('open');
  return false;
}
document.addEventListener('click', function(e){
  var open = document.querySelector('.nav-shop.open');
  if (open && !open.contains(e.target)) open.classList.remove('open');
});
</script>


<!-- ── HERO ── -->
<section class="corp-hero">
  <div>
    <span class="eyebrow">Groups &amp; Teams</span>
    <h1 class="corp-headline">
      <span class="hl-italic headline-serif">Bring everyone</span>
      <span class="hl-black headline-black">to the table.</span>
    </h1>
    <p class="corp-hero-body">Ready-to-host gatherings for teams, clients and companies. Choose the gathering, tell us how many people are coming, and we&rsquo;ll take care of the plan, activity and supplies.</p>
    <a href="#inquiry" class="btn-pill btn-tomato">Plan a group gathering →</a>
  </div>
  <div class="img-slot corp-hero-img has-photo" data-slot="corp-hero-main">
    <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-LKXMKyo.jpg?v=1787475893" alt="A team gathered together at a table" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
  </div>
</section>

<!-- ── WHAT'S INCLUDED (2026-10-03, replaces the burgundy statement band) ── -->
<section class="corp-incl">
  <h2 class="corp-h2">
    <span class="hl-italic headline-serif">Everything you need to</span>
    <span class="hl-black headline-black">bring people together.</span>
  </h2>
  <div class="corp-incl-grid">
    <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg><p class="corp-incl-label">The Plan</p><p class="corp-incl-desc">Invitations, guest management, menu, shopping list, host guide and playlist.</p></div>
    <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="3.5"/><path d="M2.5 5v14M21.5 5v4a2 2 0 01-2 2v8"/></svg><p class="corp-incl-label">The Table</p><p class="corp-incl-desc">Host Boxes with the pieces and details that bring the gathering to life.</p></div>
    <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M18.4 2.6a2 2 0 012.9 2.9L12 14.8 9.2 12z"/><path d="M9.2 12c-2 0-3.6 1.6-3.6 3.6 0 1.5-1.1 2.7-2.6 2.9 1 1.5 2.7 2.5 4.6 2.5 3.1 0 5.4-2.4 5.4-5.4"/></svg><p class="corp-incl-label">The Activity</p><p class="corp-incl-desc">Painting, flower arranging and other activities designed for everyone to do together.</p></div>
  </div>
  <p class="corp-incl-closer">We plan it. We send it. You gather.</p>
</section>

<!-- ── USE CASES ── -->
<section class="corp-uses">
  <h2 class="corp-h2"><span class="hl-italic headline-serif">What are you</span> <span class="hl-black headline-black">planning?</span></h2>
  <div class="corp-use-grid">
    <div>
      <div class="img-slot corp-use-img has-photo" data-slot="corp-use-team">
        <img src="/assets/founding-friends-garden-tea.jpg" alt="A group mingling with drinks at an outdoor garden gathering" style="width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; border-radius:2px;">
      </div>
      <p class="corp-use-name">Team Gatherings</p>
      <p class="corp-use-desc">Dinner, drinks or an activity that gets everyone away from their desks and around the same table.</p>
    </div>
    <div>
      <div class="img-slot corp-use-img has-photo" data-slot="corp-use-client">
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-TQUaiB8.jpg?v=1787475893" alt="An elegant garden table set for guests" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
      <p class="corp-use-name">Client Events</p>
      <p class="corp-use-desc">A designed gathering for clients, partners or your community, without building the event from scratch.</p>
    </div>
    <div>
      <div class="img-slot corp-use-img has-photo" data-slot="corp-use-offsite">
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-egEF3gO.jpg?v=1787475892" alt="A relaxed evening aperitivo spread" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
      <p class="corp-use-name">Offsites + Retreats</p>
      <p class="corp-use-desc">Add a dinner or creative activity to the itinerary. We handle the plan and supplies.</p>
    </div>
    <div>
      <div class="img-slot corp-use-img has-photo" data-slot="corp-use-gifting">
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-AAh4x4y.jpg?v=1787475892" alt="A cozy pastry spread on a kitchen counter" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
      <p class="corp-use-name">Employee Gifting</p>
      <p class="corp-use-desc">Send the same Gathering Hour experience to teams in one place or across multiple locations.</p>
    </div>
  </div>
</section>

<!-- ── CHOOSE WHAT YOU GATHER AROUND (2026-10-03) ──
     Shows that groups choose from real Gathering Hour products. -->
<section class="corp-choose">
  <h2 class="corp-h2">
    <span class="hl-italic headline-serif">Choose what you</span>
    <span class="hl-black headline-black">gather around.</span>
  </h2>
  <div class="corp-choose-grid">
    <a class='corp-choose-card' href='/gatherings'>
      <div class="corp-choose-img"><img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-z4MgD8q.jpg?v=1787475892" alt="Golden Hour, candlelit table" loading="lazy"></div>
      <span class="corp-choose-tag">A Gathering</span>
      <p class="corp-choose-name">Golden Hour, Tea in the Garden and more <span class="ready-arrow">→</span></p>
      <p class="corp-choose-meta">Gathering Plan + optional Host Box</p>
    </a>
    <a class='corp-choose-card' href='/painting-kit'>
      <div class="corp-choose-img"><img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-7r19nQX.jpg?v=1787475893" alt="The Painting Kit" loading="lazy"></div>
      <span class="corp-choose-tag">An Activity</span>
      <p class="corp-choose-name">The Painting Kit <span class="ready-arrow">→</span></p>
      <p class="corp-choose-meta">Everything for 6, 12, 18 or larger groups</p>
    </a>
    <a href="#inquiry" class="corp-choose-card">
      <div class="corp-choose-img"><img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-T5iu1YJ.jpg?v=1787475892" alt="Friends painting together around a candlelit table" loading="lazy"></div>
      <span class="corp-choose-tag">A Custom Combination</span>
      <p class="corp-choose-name">Gathering + Activity <span class="ready-arrow">→</span></p>
      <p class="corp-choose-meta">We&rsquo;ll help you put the pieces together.</p>
    </a>
  </div>
</section>

<!-- ── INQUIRY CTA + FORM ── -->
<section class="section-roomy-top corp-inquiry-grid" id="inquiry">
  <div>
    <h2 class="corp-inquiry-headline">Tell us what you have in mind.</h2>
    <p class="corp-inquiry-body">Whether it's dinner for twelve or something for the whole team, give us the basics. We'll take it from there.</p>
  </div>

  <div class="corp-card">
    <form id="corpForm">
      <div class="corp-row-2">
        <div class="corp-form-group">
          <label class="corp-label" for="corpName">Name</label>
          <input class="corp-input" type="text" id="corpName" placeholder="Your name" required>
        </div>
        <div class="corp-form-group">
          <label class="corp-label" for="corpCompany">Company</label>
          <input class="corp-input" type="text" id="corpCompany" placeholder="Company name" required>
        </div>
      </div>

      <div class="corp-row-2">
        <div class="corp-form-group">
          <label class="corp-label" for="corpEmail">Email</label>
          <input class="corp-input" type="email" id="corpEmail" placeholder="you@company.com" required>
        </div>
        <div class="corp-form-group">
          <label class="corp-label" for="corpGuests">Approximate guest count</label>
          <input class="corp-input" type="text" id="corpGuests" placeholder="e.g. 25" required>
        </div>
      </div>

      <div class="corp-row-2">
        <div class="corp-form-group">
          <label class="corp-label" for="corpLocation">Location</label>
          <input class="corp-input" type="text" id="corpLocation" placeholder="City, state">
        </div>
        <div class="corp-form-group">
          <label class="corp-label" for="corpDate">Date or timeframe</label>
          <input class="corp-input" type="text" id="corpDate" placeholder="e.g. Mid-October">
        </div>
      </div>

      <div class="corp-form-group">
        <label class="corp-label">What are you planning?</label>
        <div class="corp-topic-pills">
          <input type="radio" name="corpTopic" id="corpTopicTeam" class="corp-topic-pill" value="Team Gathering" checked>
          <label for="corpTopicTeam" class="corp-topic-pill-label">Team Gathering</label>

          <input type="radio" name="corpTopic" id="corpTopicClient" class="corp-topic-pill" value="Client Event">
          <label for="corpTopicClient" class="corp-topic-pill-label">Client Event</label>

          <input type="radio" name="corpTopic" id="corpTopicOffsite" class="corp-topic-pill" value="Offsite or Retreat">
          <label for="corpTopicOffsite" class="corp-topic-pill-label">Offsite or Retreat</label>

          <input type="radio" name="corpTopic" id="corpTopicGifting" class="corp-topic-pill" value="Gifting">
          <label for="corpTopicGifting" class="corp-topic-pill-label">Gifting</label>

          <input type="radio" name="corpTopic" id="corpTopicOther" class="corp-topic-pill" value="Something Else">
          <label for="corpTopicOther" class="corp-topic-pill-label">Something Else</label>
        </div>
      </div>

      <div class="corp-form-group">
        <label class="corp-label">Budget</label>
        <div class="corp-topic-pills">
          <input type="radio" name="corpBudget" id="corpBudget1" class="corp-topic-pill" value="Under $500"><label for="corpBudget1" class="corp-topic-pill-label">Under $500</label>
          <input type="radio" name="corpBudget" id="corpBudget2" class="corp-topic-pill" value="$500–1,000"><label for="corpBudget2" class="corp-topic-pill-label">$500–1,000</label>
          <input type="radio" name="corpBudget" id="corpBudget3" class="corp-topic-pill" value="$1,000–2,500"><label for="corpBudget3" class="corp-topic-pill-label">$1,000–2,500</label>
          <input type="radio" name="corpBudget" id="corpBudget4" class="corp-topic-pill" value="$2,500+"><label for="corpBudget4" class="corp-topic-pill-label">$2,500+</label>
          <input type="radio" name="corpBudget" id="corpBudget5" class="corp-topic-pill" value="Not sure yet" checked><label for="corpBudget5" class="corp-topic-pill-label">Not sure yet</label>
        </div>
      </div>

      <div class="corp-form-group">
        <label class="corp-label" for="corpDetails">Tell us more</label>
        <textarea class="corp-textarea" id="corpDetails" placeholder="What are you planning?"></textarea>
      </div>

      <div class="corp-submit-row">
        <button type="submit" class="btn-pill btn-tomato" id="corpSubmit">Tell us what you&rsquo;re planning →</button>
      </div>
      <p class="corp-form-error" id="corpError" hidden>Something went wrong sending that. Please email <a href="mailto:hello@thegatheringhour.com">hello@thegatheringhour.com</a> instead.</p>
    </form>
    <div class="corp-sent" id="corpSent" hidden>
      <p class="corp-sent-title">Thank you, we&rsquo;ve got it.</p>
      <p>We&rsquo;ll be in touch within two working days with ideas and pricing for your group.</p>
    </div>
  </div>
</section>

<!-- ── CTA / EMAIL BAND ── -->
<section class="cta-band">
  <div>
    <p class="cta-eyebrow">From Gathering Hour</p>
    <p class="cta-headline">Stay at the table.</p>
    <p class="cta-body">New gatherings, first looks and hosting inspiration.</p>
  </div>
  <div>
    <form class="cta-form" onsubmit="return false;">
      <input type="email" placeholder="Your email address" required />
      <button type="submit" class="link-arrow" style="background:none;border:none;cursor:pointer;">Join us →</button>
    </form>
      <p class="cta-consent">By signing up, you agree to receive marketing emails from Gathering Hour. Unsubscribe any time. See our <a href='/privacy-terms'>Privacy Policy</a>.</p>
    <!-- 2026-10-26 (Sarah): social icons under the sign-up, cream on burgundy -->
    <div class="cta-social">
      <a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a>
      <a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a>
      <a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener" aria-label="Gathering Hour on TikTok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a>
    </div>
  </div>
</section>

<!-- ── FOOTER ── -->
<footer class="divider-top">
  <div class="footer-top">
    <div class="footer-col">
      <h5>Gathering Hour</h5>
      <a href='/how-it-works'>How it Works</a>
      <a href='/founding-friends'>Founding Friends</a>
      <a href='/corporate' style='opacity:1; color: var(--aubergine);'>Groups &amp; Teams</a>
    </div>
    <div class="footer-col">
      <h5>Shop</h5>
      <a href='/gatherings'>Browse Gatherings</a>
      <a href='/activity-kits'>Activity Kits</a>
      <a href='/decorations'>Decorations</a>
      <a href='/gift-cards'>Gift Cards</a>
    </div>
    <div class="footer-col">
      <h5>Support</h5>
      <a href='/faq'>FAQ</a>
      <a href='/shipping-returns'>Shipping &amp; Returns</a>
      <a href='/order-tracking'>Order Tracking</a>
      <a href='/contact'>Contact</a>
      <a href='/privacy-terms'>Privacy &amp; Terms</a>
      <a href='/affiliate-disclosure'>Affiliate Disclosure</a>
      <a href="#" class="cookie-prefs-link">Cookie Preferences</a>
    </div>
    <div class="footer-col">
      <h5>Company</h5>
      <a href='/about'>About</a>
      <a href='/journal'>Journal</a>
      <a href='/contact'>Contact</a>
    </div>
  </div>

  <hr class="footer-divider">

  <div class="footer-brand">
    <img src="/assets/gh-logo-transp.png" alt="" class="footer-brand-logo">
    <p class="footer-tagline">Beautiful gatherings, already planned.</p>
    <ul class="footer-social">
      <li><a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener">Instagram</a></li>
      <li><a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener">Pinterest</a></li>
      <li><a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener">TikTok</a></li>
    </ul>
  </div>

  <div class="footer-bottom">
    <p>© 2026 Gathering Hour</p>
  </div>
</footer>

<!-- ── COOKIE CONSENT BANNER ──
     Notice + opt-out style, see styles.css for the reasoning. Shown
     once per browser until dismissed; "Turn off analytics cookies"
     sets a persistent opt-out flag for when GA4 is wired in. Same
     block duplicated on every page, kept in sync, per this site's
     established "no shared JS file" pattern. -->
<div class="cookie-banner" id="cookieBanner" role="region" aria-label="Cookie notice">
  <div class="cookie-banner-inner">
    <p class="cookie-banner-text">We use cookies to keep your cart working and understand how visitors use this site. See our <a href='/privacy-terms#cookies'>Cookie Policy</a> for details.</p>
    <div class="cookie-banner-btns">
      <button type="button" class="cookie-banner-optout" id="cookieOptOutBtn">Turn off analytics cookies</button>
      <button type="button" class="cookie-banner-accept" id="cookieAcceptBtn">Got it</button>
    </div>
  </div>
</div>


<script>
  (function () {
    var nav = document.querySelector('nav');
    function onScroll() {
      if (window.scrollY > 24) {
        nav.classList.add('nav-scrolled');
      } else {
        nav.classList.remove('nav-scrolled');
      }
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();

</script>


<script>
  // ── COOKIE CONSENT BANNER ──
  // Notice + opt-out (not block-until-accept), see styles.css header
  // comment for why. Preference lives in localStorage, not a cookie,
  // so the cookie notice itself doesn't need a cookie to work.
  (function () {
    var DISMISSED_KEY = 'gh_cookie_notice_dismissed';
    var OPTOUT_KEY = 'gh_analytics_optout';
    var banner = document.getElementById('cookieBanner');
    if (!banner) return;

    function updateOptOutLabel() {
      var btn = document.getElementById('cookieOptOutBtn');
      if (!btn) return;
      var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
      btn.textContent = isOut ? 'Analytics cookies are off' : 'Turn off analytics cookies';
    }

    if (localStorage.getItem(DISMISSED_KEY) !== 'true') {
      banner.classList.add('visible');
    }

    var acceptBtn = document.getElementById('cookieAcceptBtn');
    if (acceptBtn) {
      acceptBtn.addEventListener('click', function () {
        localStorage.setItem(DISMISSED_KEY, 'true');
        banner.classList.remove('visible');
      });
    }

    var optOutBtn = document.getElementById('cookieOptOutBtn');
    if (optOutBtn) {
      optOutBtn.addEventListener('click', function () {
        var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
        localStorage.setItem(OPTOUT_KEY, isOut ? 'false' : 'true');
        updateOptOutLabel();
      });
    }

    document.querySelectorAll('.cookie-prefs-link').forEach(function (el) {
      el.addEventListener('click', function (e) {
        e.preventDefault();
        banner.classList.add('visible');
      });
    });

    updateOptOutLabel();
  })();
</script>

<script>
// 2026-10-03: the inquiry form previously did nothing on submit (inquiries
// were silently lost). It now sends a "Group Inquiry" event to Klaviyo with
// every field; a Klaviyo flow emails the details to hello@thegatheringhour.com.
(function () {
  var form = document.getElementById('corpForm');
  if (!form) return;
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var v = function (id) { return (document.getElementById(id).value || '').trim(); };
    var pick = function (name) { var el = form.querySelector('input[name="' + name + '"]:checked'); return el ? el.value : ''; };
    var btn = document.getElementById('corpSubmit');
    btn.disabled = true; btn.textContent = 'Sending…';
    var props = {
      name: v('corpName'), company: v('corpCompany'), email: v('corpEmail'),
      guest_count: v('corpGuests'), location: v('corpLocation'), timeframe: v('corpDate'),
      planning: pick('corpTopic'), budget: pick('corpBudget'), details: v('corpDetails'),
      page: location.pathname
    };
    fetch('https://a.klaviyo.com/client/events/?company_id=UhUBGL', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', revision: '2026-07-15' },
      body: JSON.stringify({ data: { type: 'event', attributes: {
        properties: props,
        metric: { data: { type: 'metric', attributes: { name: 'Group Inquiry' } } },
        profile: { data: { type: 'profile', attributes: { email: props.email, first_name: props.name.split(' ')[0], organization: props.company } } }
      } } })
    }).then(function (r) {
      if (!r.ok) throw new Error(r.status);
      form.hidden = true;
      document.getElementById('corpSent').hidden = false;
    }).catch(function () {
      document.getElementById('corpError').hidden = false;
      btn.disabled = false; btn.textContent = 'Tell us what you\u2019re planning →';
    });
  });
})();
</script>
<script src="/signup-popup.js?v=20261004a"></script>
<!-- Sovrn Commerce (VigLink): turns plain retailer links into affiliate links (2026-10-15, affiliate handoff) -->
<script type="text/javascript">
  var vglnk = {key: '0e9a4c55bc62b5523d88dc826290b18e'};
  (function(d, t) {var s = d.createElement(t);
    s.type = 'text/javascript';s.async = true;
    s.src = '//cdn.viglink.com/api/vglnk.js';
    var r = d.getElementsByTagName(t)[0];
    r.parentNode.insertBefore(s, r);
  }(document, 'script'));
</script>
</body>
</html>