/* wg-home.css · v1 (2026-10-09)
   Homepage (Elementor post 22486) feedback-round changes. Enqueued site-wide on
   purpose: Zeyna's Barba transitions bring in the next page's Elementor CSS but
   not child stylesheets enqueued per page. Every rule is scoped to .elementor-22486.
   The rail and iris live in webgold-rail.css; nothing here touches them. */

/* ── H3a · Sign-up block 1e7df83: the photo fades into black ──
   The sections directly above (Future Events) and below (marquee band) are
   black, so the photo's top and bottom edges fade to #000 instead of ending on
   a hard line. Inside the background layer (.container--bg, z -1): photo → corner
   glows (webgold-rail.css, .cont--bg--wrap::after, z 1) → this scrim (z 2). The
   text and form sit above the whole background layer, so the fade never dims them. */
.elementor-22486 .elementor-element-1e7df83 .cont--bg--wrap::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #000 0%,
    rgba(0, 0, 0, .55) 12%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, .6) 86%,
    #000 100%);
}

/* ── H3b · Sign-up button (form 6ff652f) in the footer's "Join The List" style ──
   Same look as the newsletter band's button (webgold-newsletter.css, 491e567b):
   orange pill, #191919 bold DM Sans label, stroked forward arrow, lighter orange
   on hover, cream focus ring. Layout (inline on desktop, full width ≤900px) stays
   with the .wg-cta-form rules in webgold-rail.css. */
.elementor-22486 .elementor-element.elementor-element-6ff652f button[type="submit"],
.elementor-22486 .elementor-element.elementor-element-6ff652f .pb--handle{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: .6em !important;
  height: 52px !important;
  padding: 0 clamp(16px, 1.85vw, 30px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #FC4521 !important;
  color: #191919 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  transform: none !important;
  filter: none !important;
  transition: background-color .2s ease;
}
.elementor-22486 .elementor-element.elementor-element-6ff652f button[type="submit"]:hover,
.elementor-22486 .elementor-element.elementor-element-6ff652f .pb--handle:hover{
  background: #FF5A38 !important;
}
.elementor-22486 .elementor-element.elementor-element-6ff652f button[type="submit"]:focus-visible,
.elementor-22486 .elementor-element.elementor-element-6ff652f .pb--handle:focus-visible{
  outline: 2px solid #FFF0D9 !important;
  outline-offset: 2px;
}
.elementor-22486 .elementor-element.elementor-element-6ff652f .pe--button--text{
  color: #191919 !important;
  background: transparent !important;
  padding: 0 !important;
}
/* pe-core's underlined button style draws a line under the label */
.elementor-22486 .elementor-element.elementor-element-6ff652f .pe--button::after,
.elementor-22486 .elementor-element.elementor-element-6ff652f .pe--button::before,
.elementor-22486 .elementor-element.elementor-element-6ff652f .pb--handle::after,
.elementor-22486 .elementor-element.elementor-element-6ff652f .pb--handle::before{
  content: none !important;
  display: none !important;
}
.elementor-22486 .elementor-element.elementor-element-6ff652f .pe--button--icon{
  display: flex;
  align-items: center;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: #191919 !important;
}
.elementor-22486 .elementor-element.elementor-element-6ff652f .pe--button--icon i{
  display: block !important;
  width: calc(clamp(15px, 1.1vw, 18px) * 1.15) !important;
  height: calc(clamp(15px, 1.1vw, 18px) * 1.15) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: #191919 !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
}
.elementor-22486 .elementor-element.elementor-element-6ff652f .pe--button--icon i::before{
  content: none !important;
}
@media (prefers-reduced-motion: reduce){
  .elementor-22486 .elementor-element.elementor-element-6ff652f .pb--handle{ transition: none; }
}

/* ── H4 · Hero 7cdfbf5: the text block sits below the face (2026-10) ──
   The Mux video (and its poster, the 5.04 s frame) fills the hero with object-fit: cover at 50% 50%.
   Across the whole 10 s clip her head runs from 2% to 44% of the frame's height, centred, so the
   text has to start below 46% of the video. The first grid row is the face's room:
     video height once covered   Vs = max(H, 56.25vw)          (16:9)
     face bottom in the hero     (H - Vs) / 2 + .46 * Vs = .5H - .04Vs
   minus the hero's and the text block's 10px top padding, plus a 24px gap.
   Desktop: eyebrow + headline across, then the buttons with the wordmark (scaled to fit beside
   them) on the right, then the logos. 6e810ba and 680c3e2 become display: contents so their
   widgets are placed in the hero's grid; their 10px padding moves onto the widgets.
   Tablet: one column, same face rule. Phone: Elementor's stacked layout, the text block pushed
   just below the face. */
@media (min-width: 1025px){
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5.e-con{
    --wg-hh: max(calc(90vh + 20px), 810px); /* +20px given back by the shorter plugin strip (2026-10-27) */
    --wg-vs: max(var(--wg-hh), 56.25vw);
    --min-height: var(--wg-hh);
    --display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(calc(.5 * var(--wg-hh) - .04 * var(--wg-vs) + 4px), 1fr) auto auto auto auto;
    grid-template-areas: ". ." "text text" "cta mark" "trust mark" "logos logos";
    column-gap: 32px;
  }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-6e810ba,
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 .elementor-element-680c3e2{ --display: contents; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-895d765{ grid-area: text; --margin-top: 0px; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-154889d{ grid-area: cta; align-self: start; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 .elementor-element-67c3307{
    grid-area: mark; align-self: end; justify-self: end; margin: 0 10px 0 0;
  }
  /* 869 x 152 as drawn; about 75% of that beside the buttons, smaller below 1300px so it never reaches them */
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 .elementor-element-67c3307 svg{
    width: clamp(300px, calc(100vw - 640px), 652px); height: auto;
  }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 .elementor-element-7b26024{ grid-area: trust; align-self: end; margin: 0 0 0 10px; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 .elementor-element-ba6d4fe{ grid-area: logos; margin: 0 10px 10px; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1024px){
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5.e-con{
    --wg-hh: max(90vh, 1000px);
    --wg-vs: max(var(--wg-hh), 56.25vw);
    --min-height: var(--wg-hh);
    --display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(calc(.5 * var(--wg-hh) - .04 * var(--wg-vs) + 4px), 1fr) auto auto auto;
    grid-template-areas: "." "text" "cta" "foot";
  }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-895d765{ grid-area: text; --margin-top: 0px; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-154889d{ grid-area: cta; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-6e810ba{ grid-area: foot; }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 .elementor-element-67c3307 svg{ max-width: 100%; height: auto; }
}
@media (max-width: 767px){
  /* 6e810ba (wordmark + logos) ends 305px down; the headline starts at 46% of the 100vh hero + 16px */
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-895d765{ --margin-top: max(65px, calc(46vh - 299px)); }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-154889d{ --margin-top: 24px; }
}

/* ── H5 · Rail panel 4 (f3fbc57): drawn "//" background (2026-10) ──
   The layer is built and drawn by webgold-rail.js (v2.7). Driftwood at half strength on Sandstone,
   under the text: #191919 stays above 10:1 even where a stroke passes behind a letter. */
.elementor-22486 .elementor-element-f3fbc57{
  position: relative;
  isolation: isolate;
}
.elementor-22486 .elementor-element-f3fbc57 > .wg-slashes{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.elementor-22486 .elementor-element-f3fbc57 > .wg-slashes path{
  fill: none;
  stroke: #B5A898;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .5;
}