/* ═══════════════════════════════════════════════════════════════════════
   webgold-newsletter.css  ·  v10
   Dark newsletter band in the shared Site Footer (template 1214).
   v9 (2026-10-30): the band is the same on every page again. v8's /products/-only block (shorter band,
   no circles) was removed at the user's request.
   v10 (2026-10-30): the button sits the same gap from the pill's edge on top, right and bottom
   (pill height × --wg-inset-ratio, defined in wg-header.css), so the curves are concentric.

   Every selector starts with the band's Elementor id (d448ad7) behind
   .elementor-1214 .elementor-element — three classes. That is deliberate:
   Elementor's generated post-1214.css sets widget widths, offsets, the
   form's flex-wrap and the button's icon circle, several of them
   !important, at four to six classes. This file sits above them.

   Literal values only: the --wg-* tokens live in webgold-rail.css, which is
   homepage-only, and this band is on every page.

   Tokens
     band #191919 · pill #222222 · button #FC4521 on #191919 (5.0:1)
     eyebrow #F1C36D · cream #FFF0D9 · small print #B5A898 (7.6:1)
     decoration rgba(252,69,33,.15) · hairline #262626
   ═══════════════════════════════════════════════════════════════════════ */

/* ── band ── */
.elementor-1214 .elementor-element.elementor-element-d448ad7{
  --wg-nl-bg: #191919;
  --wg-nl-pill: #222222;
  --wg-nl-orange: #FC4521;
  --wg-nl-gold: #F1C36D;
  --wg-nl-cream: #FFF0D9;
  --wg-nl-fine: #B5A898;
  /* pill: 104px tall on a 1600px screen, scaling with the viewport */
  --wg-nl-pill-h: clamp(64px, 6.75vw, 108px);               /* 108px at 1600, as measured in the design */
  --wg-nl-inset: calc(var(--wg-nl-pill-h) * var(--wg-inset-ratio, .095));   /* ≈10px at 1600: the gap above, right of and below the button, which fills the rest */
  --wg-nl-fs: clamp(15px, 1.1vw, 18px);
  position: relative;
  overflow: hidden;                        /* the decoration is clipped by the band */
  background: var(--wg-nl-bg) !important;
  background-image: none !important;
  padding: clamp(56px, 9.5vw, 152px) clamp(22px, 5vw, 72px) !important;   /* 152px at 1600: a ~679px band, as in the design */
  /* 1px hairline on the bottom edge: the block below is the same #191919 */
  box-shadow: inset 0 -1px 0 #262626;
}

/* the row: two columns, centred in the band. The row, its inner box and the
   right column are made position:static so the decoration positions against
   the BAND, not against a column. */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-news-row{
  position: static !important;
  width: 100%;
  max-width: none !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-news-row > .e-con-inner{
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(668px, 47%));
  column-gap: clamp(32px, 5vw, 96px);
  align-items: center;
  justify-content: initial !important;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* ── left column: eyebrow (43210631), heading (7c106da), paragraph (4a124e6).
   The eyebrow and heading widgets share the class wg-new-h in the editor, so
   they are targeted by their Elementor ids. ── */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-left{
  position: relative; z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(16px, 1.8vw, 24px);
  width: 100% !important;
  padding: 0 !important;
}
/* Elementor gives both text widgets width:315px (the old design). Reset it. */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-4a124e6{
  width: auto !important;
  max-width: none !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-4a124e6{ width: 100% !important; max-width: 570px !important; }

.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631 p,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631 .text-wrapper p{
  margin: 0 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;            /* the stored text stays "Digital strategy from the Caribbean" */
  color: var(--wg-nl-gold) !important;
  white-space: nowrap;                  /* one line at desktop widths */
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-7c106da .elementor-heading-title{
  margin: 0 !important;
  font-family: 'QuantaGroteskPro-ExtraBold-BF6459a54cb400b', 'DM Sans', system-ui, sans-serif !important;   /* brand H1 = bold; the heaviest upright Quanta face loaded */
  font-size: clamp(36px, 4.4vw, 64px) !important;
  font-weight: 400 !important;          /* each Quanta face is declared as one weight; 700 would be faux bold */
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  color: var(--wg-nl-cream) !important;
  max-width: 9.2em;                     /* the design sets the heading in three lines */
  text-wrap: balance;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-news-sub p,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-news-sub .text-wrapper p{
  margin: 0 !important;
  max-width: none !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(16px, 1.3vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: var(--wg-nl-cream) !important;
  text-wrap: pretty;
}

/* ── right column: form, then small print + link ── */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-right{
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px;
  width: 100% !important;
  padding: 0 !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-right > .elementor-widget-peforms,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-right > .wg-nl-meta{ position: relative; z-index: 1; }

/* ── decoration: two equal circles and three diagonal stripes, behind the form.
   Both are images (aria-hidden, empty alt), positioned against the band and
   clipped by it. Offsets are !important because Elementor writes top/left:0
   for every absolutely-positioned widget. ── */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-deco{
  position: absolute !important;
  z-index: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  transform: none !important;
  pointer-events: none;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-deco .elementor-widget-container,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-deco .single-image{ display: block; width: 100%; height: 100%; margin: 0; }
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-deco img{ display: block; max-width: none !important; }
/* circles: ~228px across at 1600px; one behind the pill's top-left, one
   clipped by the band's bottom edge. One image holds both. */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-circle{
  width: 20.44vw !important;             /* 327px at 1600 */
  left: 49.8vw !important; right: auto !important;
  top: auto !important; bottom: -1px !important;   /* the lower circle just touches the band's bottom edge */
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-circle img{ width: 100%; height: auto; }
/* stripes: full band height, ~17.5 degrees off vertical, to the right of the circles */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-slash{
  height: 100% !important; width: auto !important;
  left: 67.7vw !important; right: auto !important;
  top: 0 !important; bottom: auto !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-slash img{ height: 100%; width: auto; }

/* ── the form: ONE pill. The <form> itself is the pill (so the button can
   never overlap the placeholder, whatever the font does); the input fills it
   and the button sits inset at the right. ── */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form{ width: 100%; margin: 0; }
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form form.custom-form-widget-form{
  display: flex !important;
  flex-wrap: nowrap !important;          /* post-1214.css sets wrap !important */
  row-gap: 0 !important; column-gap: 0 !important;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--wg-nl-pill-h);
  margin: 0;
  padding: var(--wg-nl-inset) var(--wg-nl-inset) var(--wg-nl-inset) calc(var(--wg-nl-pill-h) * .1667);   /* equal gap on top, right and bottom; the left keeps its old inset, so the text doesn't move */
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--wg-nl-pill);
}
/* visible focus ring on the whole pill: the 1px gold border alone, no glow (gold on #191919 is well over 3:1) */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form form.custom-form-widget-form:focus-within{
  border-color: var(--wg-nl-gold);
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form form .form-field{
  position: relative;
  flex: 1 1 0 !important;                /* widget-styles.css sets width:100%, which forced the wrap */
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .form-field::after{ content: none !important; }
/* a real <label>, hidden visually but still read by screen readers */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .form-field label.label--main{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b input[type="email"],
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b input[type="text"]{
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 clamp(18px, 2vw, 32px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--wg-nl-cream) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: var(--wg-nl-fs) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  outline: none !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b input::placeholder{
  color: var(--wg-nl-fine) !important;   /* 6.8:1 on #222222 */
  opacity: 1;
}

/* the inset button (the widget positions it absolutely; here it joins the row) */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form--button--wrap{
  position: static !important;
  flex: 0 0 auto !important;
  align-self: stretch;
  width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
  display: flex;
  transform: none !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--wrapper{
  display: flex !important;
  width: auto !important; height: 100%;
  max-width: none !important;
  margin: 0 !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b button[type="submit"],
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pb--handle{
  display: inline-flex !important;
  flex-direction: row !important;        /* text, then the arrow */
  align-items: center;
  gap: .6em !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 clamp(16px, 1.85vw, 30px) !important;   /* ~197px wide at 1600 */
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wg-nl-orange) !important;
  color: #191919 !important;             /* 5.0:1 on the orange */
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: var(--wg-nl-fs) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--text,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .button--text--main{
  color: #191919 !important;
  background: transparent !important;
  padding: 0 !important;
}
/* The widget draws a dark circle behind the arrow: padding 12px !important and
   --radius 50px !important on .pe--button--icon, plus a ::before filled #191919.
   Both go; the arrow is drawn here as a mask in the button's dark text colour,
   so it shows whether or not the Material Icons font is on the page. */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b.submit_button_button_icon--pop--styled .pe--button--wrapper .pe--button--icon{
  --radius: 0 !important;
  display: flex;
  align-items: center;
  width: auto !important; height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #191919 !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b.submit_button_button_icon--pop--styled .pe--button--wrapper .pe--button--icon::before{
  content: none !important;
  display: none !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--icon .button--icon--main{ display: flex; align-items: center; }
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--icon i{
  display: block !important;
  width: calc(var(--wg-nl-fs) * 1.15) !important;
  height: calc(var(--wg-nl-fs) * 1.15) !important;
  font-size: 0 !important;               /* hides the ligature text if the icon font loads */
  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-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--icon i::before{ content: none !important; }
/* hover: the theme's own effect, as on the homepage hero buttons: the label's characters roll up
   (chars-up) and the arrow slides right, plus a lighter orange. v5 hid the incoming label and arrow,
   so the outgoing ones left the button blank; v7 (2026-10-20) lets the theme run both. */
/* The theme places and slides the incoming arrow by the icon circle's padding (12px, from the widget's
   --padding* variables). The circle is gone (padding 0 above), so zero the variables too, or the arrow
   lands 12px low and right, outside the clipped icon box. */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--icon,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--icon > span{
  --paddingTop: 0px !important; --paddingRight: 0px !important; --paddingBottom: 0px !important; --paddingLeft: 0px !important;
  --pTop: 0px !important; --pRight: 0px !important; --pBottom: 0px !important; --pLeft: 0px !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--icon .button--icon--hover{ top: 0 !important; }
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b button[type="submit"]:hover,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pb--handle:hover{ background: #FF5A38 !important; }
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b button[type="submit"]:focus-visible,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pb--handle:focus-visible{
  outline: 2px solid var(--wg-nl-cream) !important;
  outline-offset: 2px;
}

/* ── small print (left) and link (right), under the form ── */
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-meta{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px 24px;
  padding: 0 clamp(18px, 2vw, 32px) !important;   /* lines up with the text inside the pill */
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-fine,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-fine p,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-fine .text-wrapper p{
  margin: 0 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--wg-nl-fine) !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-link,
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-link p{
  margin: 0 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-link a{
  color: var(--wg-nl-cream) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .2s ease;
}
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-link a:hover{ color: var(--wg-nl-gold) !important; }
.elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-link a:focus-visible{
  outline: 2px solid var(--wg-nl-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── below 900px: one column — eyebrow, heading, paragraph, form, small print, link ── */
@media (max-width: 900px){
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-news-row > .e-con-inner{
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 6vw, 44px);
  }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-4a124e6{ max-width: none !important; }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-circle{ width: 52vw !important; left: auto !important; right: -10vw !important; top: auto !important; bottom: -6vw !important; }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .wg-nl-slash{ left: 56vw !important; }
}
/* the eyebrow may wrap on very narrow screens */
@media (max-width: 480px){
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631,
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631 p,
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-43210631 .text-wrapper p{ white-space: normal; }
}
/* very narrow screens: the pill becomes a stack so the placeholder and button both fit */
@media (max-width: 420px){
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form form.custom-form-widget-form{
    flex-direction: column !important;     /* the widget sets row !important */
    height: auto;
    border-radius: 28px;
    padding: 8px;
    row-gap: 8px !important;
  }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form form .form-field{ width: 100% !important; flex: 0 0 auto !important; }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b input[type="email"],
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b input[type="text"]{ height: 52px; }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--form--button--wrap,
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button,
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pe--button--wrapper{ width: 100% !important; }
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b button[type="submit"],
  .elementor-1214 .elementor-element.elementor-element-d448ad7 .elementor-element-491e567b .pb--handle{ width: 100% !important; height: 52px !important; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .elementor-1214 .elementor-element.elementor-element-d448ad7 *{ transition: none !important; animation: none !important; }
}