<!--
  Gathering Hour: Contact page
  Created: 2026-08-14
  Notes: Small hero (eyebrow, headline, one line of body copy, a direct
  mailto link), then a two-column section: left is "send us a note"
  context plus FAQ/Shipping & Returns links, right is the form inside a
  white card so it reads as its own tidy object against the cream page.
  Topic selection uses pills (not a dropdown), Sarah found the pills
  easier to read and click on after seeing both. No CTA/email band on
  this page, goes straight from the form to the footer.
  Spacing tightened throughout (hero, grid top/bottom padding, form group
  gaps) so the whole left column and the form both fit on one screen on a
  normal desktop viewport, and both columns start at the same vertical
  position for a tidy, lined-up look.

  The form doesn't send anywhere yet, no backend or email service is
  wired up. Flagging that the same way the waitlist form was flagged
  before Klaviyo was connected, this needs a real destination (a mailto:
  fallback, a form service, or a backend) before launch.

  2026-08-14, later same day: hero headline converted to the site's new
  two-tone treatment (see styles.css), "We'd love to hear" stays italic
  aubergine, "from you." is now bold tomato Archivo Black.

  Later still: the hero body line ("Questions about an order...") was
  wide enough (560px) to run nearly the full width of the page on one
  line, reading like it bled into where the form sits below. Narrowed
  .contact-hero-body to 420px so it wraps and stays visually within the
  left side, matching the two-column split ("Send us a note" / form)
  right underneath it.

  2026-08-17: the hero used to be its own full-width section, with the
  two-column grid (context / form) starting well below it, so the form
  card sat noticeably lower than the "We'd love to hear from you."
  headline. Folded the hero content (eyebrow, headline, body line, email
  link) into the top of the grid's left column instead, directly above
  "Send us a note.", so the whole thing is one aligned two-column section
  and the form card's top edge now lines up with the headline. .contact-hero
  as a wrapping section is gone, .contact-headline/.contact-hero-body/
  .contact-hero-email rules are unchanged and still apply, just nested one
  level differently now.

  Also re-added the CTA/email band ("Stay at the table.") right above the
  footer, same as every other page site-wide. It had been left off Contact
  originally since the page already has a form, but Sarah wants it kept for
  consistency across the site.

  2026-08-18: applied the new Gathering Hour Web Type Scale (see
  styles.css). Not on Sarah's exception list, so .contact-headline's two
  spans (40px/36px mismatched) unified to 52px/52px (Hero tier), mobile
  30px/26px mismatched -> 40px/40px. .contact-left-title ("Send us a
  note.") 24px -> 20px (Subheading tier, it's a form-card-level intro
  line, not a second page headline). .contact-before-label (a true
  eyebrow-style caps label) matched to the shared 13px/700/0.14em spec,
  12px mobile added. Body copy floored: .contact-hero-body, .contact-
  left-body -> 16px. .contact-hero-email already matched Lead tier
  (18px), left alone. .contact-label (form field labels) and .topic-
  pill-label (pill chips) left alone, same dense functional UI category
  as the product pages' build-widget internals.

  2026-08-19, later same day: new sitewide corner-radius system (see
  styles.css). .contact-card border-radius 10px -> 8px, matches the new
  small-not-bubbly card standard. This page has no photography, so no
  photo radius changes apply here.

  2026-08-19, later same day: eyebrow reduction pass, per the new
  sitewide rule (max 1-2 per page, banners exempt). Cut the hero's
  "Contact" eyebrow, redundant with the page title/nav/headline. Kept
  "Before you write" (.contact-before-label), that's a functional
  mini-nav header above the FAQ/Shipping & Returns links, not page
  decoration. Kept the newsletter band's "From Gathering Hour", inside
  the pink banner, exempt per Sarah's rule.

  2026-08-20: "from you." (the tomato half of the headline) was running
  on the same line as "We'd love to hear" instead of breaking onto its
  own line like every other page's two-tone headline. Cause: this page's
  .contact-headline .hl-italic/.hl-black never got display: block, which
  every other page sets in its own <style> block per the shared two-tone
  headline pattern (see styles.css). Added it here to match.
  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, eleventh page. This page has no photos
  and no pink usage, so the only change is the nav: simplified to How
  it works / About / Shop pill, matching the homepage. toggleShopMenu()
  removed from the closing <script> block. Newsletter band needs no
  page-scoped change, 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: Sarah found the newsletter band sitting too close to the
footer on this page specifically. The shared .cta-band bottom padding
(64px, from the sitewide `section` rule in styles.css) plus the footer's
own 64px top padding is the sitewide default everywhere else, so rather
than change that shared rule for every page, added a page-scoped
.contact-cta-band modifier bumping this page's cta-band bottom padding to
96px.

2026-09-17: hero headline sized up, a scaled-down version of Gatherings' "oversized header treatment" (this headline sits in the narrower 0.75fr column of .contact-grid) -- see the CSS comment above .contact-headline for the full spec.
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: Contact</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 (tightened, now nested at the top of the left grid column,
   see .contact-grid below) ── */
.contact-headline { margin-bottom: 14px; }
/* 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 sits in the narrower 0.75fr column of .contact-grid, not a
   full-width single column like Gatherings/FAQ, 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. */
.contact-headline .hl-italic,
.contact-headline .hl-black {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.01em;
  display: block;
  line-height: 0.98;
}
.contact-headline .hl-italic { color: var(--hl-serif); }
.contact-headline .hl-black { color: var(--tomato); margin-top: 2px; }
@media (max-width: 1024px) {
  .contact-headline .hl-italic,
  .contact-headline .hl-black { line-height: 0.95; }
}
@media (max-width: 480px) {
  .contact-headline .hl-italic,
  .contact-headline .hl-black { line-height: 1.02; }
}
.contact-hero-body { font-size: 16px; color: var(--espresso-70); line-height: 1.55; max-width: 420px; margin-bottom: 10px; }
.contact-hero-email {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--aubergine);
  text-decoration: none;
  transition: color 0.2s;
}
.contact-hero-email:hover { color: var(--tomato); }

/* Page-scoped: extra breathing room before the footer, per Sarah's
   2026-09-11 feedback — see header comment for reasoning. */
.contact-cta-band { padding-bottom: 96px; }

/* ── TWO-COLUMN BODY (aligned, tightened) ── */
.contact-grid {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 56px;
}

.contact-left-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--aubergine);
  margin-top: 34px;
  margin-bottom: 8px;
}
.contact-left-body { font-size: 16px; color: var(--espresso-70); line-height: 1.55; margin-bottom: 24px; max-width: 300px; }
.contact-before-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso-50);
  margin-bottom: 12px;
}
.contact-before-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Form card, white against the cream page so it reads as its own object */
.contact-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);
}

.contact-form-group { margin-bottom: 16px; }
.contact-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso-50);
  display: block;
  margin-bottom: 8px;
}
.contact-input, .contact-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);
}
.contact-input::placeholder, .contact-textarea::placeholder { color: var(--espresso-50); }
.contact-input:focus, .contact-textarea:focus { outline: none; border-color: var(--aubergine); }
.contact-textarea { resize: vertical; min-height: 100px; font-family: 'Archivo', sans-serif; }

.contact-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Topic pills, replacing the dropdown */
.topic-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-pill { position: absolute; opacity: 0; width: 1px; height: 1px; }
.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;
}
.topic-pill-label:hover { border-color: var(--aubergine); color: var(--aubergine); }
.topic-pill:checked + .topic-pill-label {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--paper);
}
.topic-pill:focus-visible + .topic-pill-label { outline: 2px solid var(--aubergine); outline-offset: 2px; }

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

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Fixed 40px override removed 2026-09-17 -- clamp()'s own 40px floor
     (above) already matches it, no regression. */
  .contact-row-2 { grid-template-columns: 1fr; }
  .eyebrow, .contact-before-label { font-size: 12px; }
}
</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 + FORM, one aligned two-column section, form card top lines
     up with the headline below ── -->
<section class="contact-grid">
  <div>
    <h1 class="contact-headline">
      <span class="hl-italic headline-serif">We'd love to hear</span>
      <span class="hl-black headline-black">from you.</span>
    </h1>
    <p class="contact-hero-body">Questions about an order, your Gathering Plan, an Activity Kit, or just want to say hello? Send us a note.</p>
    <a href="mailto:hello@thegatheringhour.com" class="contact-hero-email">hello@thegatheringhour.com →</a>

    <p class="contact-left-title">Send us a note.</p>
    <p class="contact-left-body">We typically reply within 24 hours, Monday through Friday.</p>
    <p class="contact-before-label">Before you write</p>
    <div class="contact-before-links">
      <a class='link-arrow' href='/faq'>FAQ →</a>
      <a class='link-arrow' href='/shipping-returns'>Shipping &amp; Returns →</a>
    </div>
  </div>

  <div class="contact-card">
    <form id="contactForm">
      <div class="contact-form-group">
        <label class="contact-label">What can we help with?</label>
        <div class="topic-pills">
          <input type="radio" name="contactTopic" id="topicOrder" class="topic-pill" checked>
          <label for="topicOrder" class="topic-pill-label">Order / Shipping</label>

          <input type="radio" name="contactTopic" id="topicPlan" class="topic-pill">
          <label for="topicPlan" class="topic-pill-label">Your Gathering Plan</label>

          <input type="radio" name="contactTopic" id="topicKit" class="topic-pill">
          <label for="topicKit" class="topic-pill-label">Host Box / Activity Kit</label>

          <input type="radio" name="contactTopic" id="topicPress" class="topic-pill">
          <label for="topicPress" class="topic-pill-label">Press</label>

          <input type="radio" name="contactTopic" id="topicHi" class="topic-pill">
          <label for="topicHi" class="topic-pill-label">Just to say hi</label>
        </div>
      </div>

      <div class="contact-row-2">
        <div class="contact-form-group">
          <label class="contact-label" for="contactName">Name</label>
          <input class="contact-input" type="text" id="contactName" placeholder="Sarah" required>
        </div>
        <div class="contact-form-group">
          <label class="contact-label" for="contactEmail">Email</label>
          <input class="contact-input" type="email" id="contactEmail" placeholder="sarah@example.com" required>
        </div>
      </div>

      <div class="contact-form-group">
        <label class="contact-label" for="contactMessage">Message</label>
        <textarea class="contact-textarea" id="contactMessage" placeholder="Tell us what's going on..." required></textarea>
      </div>

      <div class="contact-submit-row">
        <button type="submit" class="btn-pill btn-tomato">Send note →</button>
      </div>
    </form>
    <p class="contact-form-error" id="contactError" hidden style="font-size:14px;color:var(--tomato);margin-top:12px;">Something went wrong sending that. Please email <a href="mailto:hello@thegatheringhour.com">hello@thegatheringhour.com</a> instead.</p>
    <div id="contactSent" hidden style="padding:20px 0;">
      <p style="font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:28px;color:var(--name);margin-bottom:8px;">Thank you, we&rsquo;ve got your note.</p>
      <p style="font-size:16px;color:var(--body);">We usually reply within a day.</p>
    </div>
  </div>
</section>

<!-- ── CTA / EMAIL BAND ── -->
<section class="cta-band contact-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'>Groups &amp; Teams</a>
      <a href='/gatherings'>Gatherings</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' style='opacity:1; color: var(--aubergine);'>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: this form previously did nothing on submit (messages were
// silently lost). It now sends a "Contact Form Submitted" event to Klaviyo;
// a Klaviyo flow emails it to hello@thegatheringhour.com.
(function () {
  var form = document.getElementById('contactForm');
  if (!form) return;
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var v = function (id) { return (document.getElementById(id).value || '').trim(); };
    var t = form.querySelector('input[name="contactTopic"]:checked');
    var topic = t ? ((form.querySelector('label[for="' + t.id + '"]') || {}).textContent || t.id).trim() : '';
    var btn = form.querySelector('button[type="submit"]');
    var label = btn.textContent;
    btn.disabled = true; btn.textContent = 'Sending…';
    var props = { name: v('contactName'), email: v('contactEmail'), topic: topic, message: v('contactMessage'), 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: 'Contact Form Submitted' } } },
        profile: { data: { type: 'profile', attributes: { email: props.email, first_name: props.name.split(' ')[0] } } }
      } } })
    }).then(function (r) {
      if (!r.ok) throw new Error(r.status);
      form.hidden = true;
      document.getElementById('contactSent').hidden = false;
    }).catch(function () {
      document.getElementById('contactError').hidden = false;
      btn.disabled = false; btn.textContent = label;
    });
  });
})();
</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>