.elementor-kit-14{--e-global-color-primary:#071335;--e-global-color-secondary:#BFC6CF;--e-global-color-text:#17181D;--e-global-color-accent:#C8A34D;--e-global-color-275306b:#F7F6F3;--e-global-color-743ef13:#7A5223;--e-global-color-dfcb827:#F7F6F3;--e-global-color-0c436f5:#7A5223;--e-global-color-cad11eb:#FFFFFF;--e-global-color-e065530:#050D24;--e-global-color-ac0c623:#9B7A2E;--e-global-color-70eb551:#5A3C18;--e-global-color-eff1288:#8F99A6;--e-global-color-00349d9:#6F571F;--e-global-color-b2bae94:#C8A34D;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:900;--e-global-typography-accent-text-transform:uppercase;color:#BFC6CF;font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:400;line-height:1.6em;}.elementor-kit-14 button,.elementor-kit-14 input[type="button"],.elementor-kit-14 input[type="submit"],.elementor-kit-14 .elementor-button{background-color:#C8A34D;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:0.14em;color:#071335;border-radius:3px 3px 3px 3px;padding:21px 44px 21px 44px;}.elementor-kit-14 button:hover,.elementor-kit-14 button:focus,.elementor-kit-14 input[type="button"]:hover,.elementor-kit-14 input[type="button"]:focus,.elementor-kit-14 input[type="submit"]:hover,.elementor-kit-14 input[type="submit"]:focus,.elementor-kit-14 .elementor-button:hover,.elementor-kit-14 .elementor-button:focus{background-color:#7A5223;color:#F7F6F3;}.elementor-kit-14 e-page-transition{background-color:#FFBC7D;}.elementor-kit-14 a{color:#BFC6CF;}.elementor-kit-14 a:hover{color:#C8A34D;}.elementor-kit-14 h1{color:#F7F6F3;font-family:"Montserrat", Sans-serif;font-size:82px;font-weight:900;text-transform:uppercase;line-height:1.02em;letter-spacing:-0.02em;}.elementor-kit-14 h2{color:#F7F6F3;font-family:"Montserrat", Sans-serif;font-size:54px;font-weight:900;text-transform:uppercase;line-height:1.02em;letter-spacing:-0.02em;}.elementor-kit-14 h3{color:#F7F6F3;font-family:"Montserrat", Sans-serif;font-size:26px;font-weight:700;line-height:1.2em;}.elementor-kit-14 h4{color:#F7F6F3;font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:700;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-14 h5{color:#F7F6F3;font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:700;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-14 h6{color:#F7F6F3;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;line-height:1.4em;letter-spacing:0.24em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-14{font-size:19px;}.elementor-kit-14 h1{font-size:59px;}.elementor-kit-14 h2{font-size:39px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-14{font-size:18px;}.elementor-kit-14 h1{font-size:40px;}.elementor-kit-14 h2{font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════
   KMGA — Elementor → Site Settings → Custom CSS
   Header, hero, motion, buttons, marquee

   Requires these CSS classes, set in Advanced → CSS Classes:
     hero container ................ km-hero
     header nav container .......... site-header
     empty container in hero ....... km-sheen
     announcement ticker widget .... km-ticker
     LIVE nav <li> ................. km-nav-live
     gold buttons .................. km-btn-gold
     navy buttons .................. km-btn-navy
   ═══════════════════════════════════════════════════════════════ */


/* ── ANNOUNCEMENT MARQUEE ─────────────────────────────────────── */
/* Scoped to .km-ticker so it can't reach the homepage marquee,
   whose type is set on the widget panel. */

.km-ticker .ue-marquee .ue_marq_text_wrap {
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.km-ticker .ue-marquee .ue-marquee-tag {
  padding: 11px 0 !important;   /* ← bar height lives here */
  margin: 0 14px !important;
}

.km-ticker .ue-marquee .ue-marquee-tag a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.km-ticker .ue-marquee .ue-marquee-tag-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 1em !important;
}

.km-ticker .ue-marquee .ue-marquee-tag-icon i {
  display: block !important;
  font-size: 5px !important;
  line-height: 1 !important;
}


/* ── LIVE NAV ITEM ────────────────────────────────────────────── */

.km-nav-live .elementor-item::before { content: none !important; }

.km-nav-live {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.km-nav-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c8a34d;
  flex: 0 0 auto;
}

.km-nav-live .elementor-item {
  color: #c8a34d !important;
  font-weight: 800 !important;
}
.km-nav-live .elementor-item:hover { color: #f7f6f3 !important; }


/* ── HEADER ───────────────────────────────────────────────────── */
/* Was two separate .site-header blocks. The lower one's transition
   was being beaten by the upper one's !important and never ran, so
   the two are merged here into a single declaration. */

.site-header {
  background-color: rgba(7, 19, 53, 0) !important;
  background-image: linear-gradient(180deg,
    rgba(7,19,53,.6) 0%,
    rgba(7,19,53,0) 100%) !important;
  /* 1px transparent rather than 0 — a zero-width border can't show a
     color, which is what silently killed the sticky gold under-rule
     below. Transparent keeps it invisible at rest with no layout shift
     when it activates. */
  border-bottom: 1px solid transparent !important;
  transition:
    background-color 700ms cubic-bezier(.37,0,.63,1),
    box-shadow .25s ease,
    border-color .25s ease !important;
}

/* Sticky scroll state. Both .elementor-kit-14 shapes kept — sticky is not yet
   enabled on this header, so which one fires depends on whether
   Elementor puts the class on .site-header itself or an ancestor. */
.elementor-sticky--effects .site-header,
.site-header.elementor-sticky--effects {
  background-image: none !important;
  background-color: rgba(7,19,53,.97) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200,163,77,.45) !important;
  box-shadow: 0 10px 30px rgba(5,13,36,.35);
}

/* Solid header while the mobile menu is open, so the nav row reads as
   one panel with the dropdown instead of floating over the photo.
   Elementor puts .elementor-active on the toggle; :has() lets the
   parent container react to it without JS. */
.site-header:has(.elementor-menu-toggle.elementor-active) {
  background-color: #071335 !important;
  background-image: none !important;
}

/* Elementor's dropdown animates at 300ms — 700ms leaves the navy still
   creeping in after the panel has landed. Mobile only, so the desktop
   scroll fade keeps its slower, more deliberate 700ms. */
@media (max-width: 1024px) {
  .site-header {
    transition:
      background-color 300ms cubic-bezier(.2,.7,.2,1),
      box-shadow .25s ease,
      border-color .25s ease !important;
  }
}

/* Center dropdown items. Elementor renders these anchors as flex
   containers, so text-align has nothing to act on — justify-content
   is the property that positions the text. The second .elementor-kit-14 keeps
   the LIVE dot attached to its label instead of pinned left. */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown a.elementor-item { justify-content: center !important; }
  .elementor-nav-menu--dropdown li.km-nav-live   { justify-content: center !important; }
}


/* ── HERO LAYOUT ──────────────────────────────────────────────── */

.km-hero{
  position:relative;
  overflow:hidden;
  margin-top:-135px !important;      /* = nav row height; slides hero under the nav */
  background-size:0 0 !important;   /* hides the section's own copy of the photo —
                                       the URL stays live so ::before can inherit it,
                                       which keeps the image swappable in Elementor */
  background-color:#071335 !important;
}

/* Photo panel — right 64%. Narrower than the section means `cover`
   scales by HEIGHT, which is what makes horizontal positioning work. */
.km-hero::before{
  background-image:inherit !important;
  background-size:cover !important;
  background-position:30% 22% !important;
  background-repeat:no-repeat !important;
  inset:0 0 0 24% !important;
  opacity:1 !important;
  animation:kmKen 26s ease-in-out infinite alternate;
  transform-origin:34% 30%;
}

/* Navy wipe, left → right, above the photo */
.km-hero::after{
  content:"";
  position:absolute;
  inset:0;                 /* MUST span the whole hero, not just the panel —
                              scoping it to 44% leaves the panel's hard left
                              edge (and any Ken Burns overshoot) uncovered,
                              which is the vertical seam. */
  pointer-events:none;
  z-index:0;
  /* Mockup's stops are panel-relative (panel = right 56%). Converted to
     hero-relative: 0%->44%, 22%->56.3%, 48%->70.9%, 100%->100%.
     Vertical scrim listed first so it paints on top — that's what keeps
     the stats row legible over the building. */
  background-image:
    linear-gradient(180deg,
      rgba(7,19,53,.5) 0%,
      rgba(7,19,53,0) 30%,
      rgba(7,19,53,0) 52%,
      rgba(7,19,53,.94) 96%),
    linear-gradient(90deg,
      #071335 0%,
      #071335 44%,
      rgba(7,19,53,.55) 56.3%,
      rgba(7,19,53,.12) 70.9%,
      rgba(7,19,53,.05) 100%);
}

/* Glass sheer sweep. Add an EMPTY Elementor Container as the first
   child of the hero and give it this class — no HTML widget needed.
   Constrained to the photo panel so the band doesn't leave a visible
   edge crossing the flat navy behind the headline. */
.km-hero .km-sheen{
  position:absolute !important;
  inset:0 0 0 44%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  margin:0;
  padding:0;
  min-height:0;
}
.km-hero .km-sheen::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,
    rgba(247,246,243,0) 42%,
    rgba(247,246,243,.13) 50%,
    rgba(247,246,243,0) 58%);
  animation:kmSweep 7.5s ease-in-out 2.5s infinite;
}

/* Hero content above both layers */
.km-hero > .e-con{position:relative;z-index:2;}

@media (max-width:1024px){
  .km-hero{margin-top:-150px !important;}
  .km-hero::before{inset:0 0 0 22% !important;}
  .km-hero::after{background-image:
    linear-gradient(180deg,rgba(7,19,53,.5) 0%,rgba(7,19,53,0) 30%,rgba(7,19,53,0) 52%,rgba(7,19,53,.94) 96%),
    linear-gradient(90deg,#071335 0%,#071335 22%,rgba(7,19,53,.55) 39%,rgba(7,19,53,.12) 60%,rgba(7,19,53,.05) 100%);}
  .km-hero .km-sheen{inset:0 0 0 22%;}
}
@media (max-width:767px){
  .km-hero{margin-top:-280px !important;}
  .km-hero::before{inset:0 !important;
      transform-origin:34% 30%;
      background-position:39% 22% !important;
  }
  .km-hero .km-sheen{inset:0;}
  .km-hero::after{
    background-image:linear-gradient(0deg,
      #071335 14%,
      rgba(7,19,53,.6) 48%,
      rgba(7,19,53,0) 85%);
  }
}

@media (max-width:667px){
  .km-hero{margin-top:-156px !important;}
  .km-hero::before{inset:0 !important;
      transform-origin:34% 30%;
      background-position:39% 22% !important;
  }
  .km-hero .km-sheen{inset:0;}
  .km-hero::after{
    background-image:linear-gradient(0deg,
      #071335 14%,
      rgba(7,19,53,.6) 48%,
      rgba(7,19,53,0) 85%);
  }
}

/* ── KEYFRAMES (names match the About Kevin / RGA mockups) ─────── */
@keyframes kmKen   { from{transform:scale(1);}   to{transform:scale(1.08);} }
@keyframes kmSweep { from{transform:translateX(-130%) skewX(-12deg);}
                     to  {transform:translateX(130%)  skewX(-12deg);} }

@media (prefers-reduced-motion: reduce){
  .km-hero::before{animation:none !important;}
  .km-hero .km-sheen{display:none !important;}
  .km-hero .wcf--title .highlight::after{animation:none !important;clip-path:none !important;}
}


/* ── HERO H1 (AAE Animated Title) ─────────────────────────────── */
/* The widget wraps the [bracketed] word in <span class="highlight">.
   No widget on this install except Elementor Pro's Animated Headline
   has a marker/underline control, so the mockup's hand-drawn stroke
   is an SVG background here, revealed left-to-right after the reveal
   animation lands (900ms duration + 100ms delay = start at 1.1s). */

/* Forces the mockup's four-line break. Measured against Montserrat 900
   at 76px with -0.02em tracking: the longest kept line
   ("grow by accident.") is 843px, the shortest line that MUST break
   ("grow by accident. It") is 938px — so anything 850–930 works. */
.km-hero .wcf--title{max-width:890px;}
@media (max-width:1024px){ .km-hero .wcf--title{max-width:none;} }

.km-hero .wcf--title{
  /* AAE's "reveal" animation leaves clip-path:inset(0) on the h1, so a rule
     sitting below the text box gets clipped away. This is the mockup's own
     padding/negative-margin trick — it opens room inside the clip without
     changing layout. */
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
.km-hero .wcf--title .highlight{position:relative;}
.km-hero .wcf--title .highlight::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  bottom:-.16em;
  height:.15em;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2014'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010%20C%2050%203,%20150%203,%20196%208'%20stroke='%23c8a34d'%20stroke-width='6'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
  animation:kmDraw .9s ease 1.35s both;
}
@keyframes kmDraw{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }


/* ── BUTTONS ──────────────────────────────────────────────────── */
/* The gold is already correct (#c8a34d). What went missing on import
   is box_shadow_box_shadow — the JSON specifies 0 14px 36px
   rgba(200,163,77,.3) but it computes to `none` on the live page. */
.elementor-widget-button .elementor-button{
  transition:transform .18s ease, box-shadow .25s ease,
             background-color .2s ease, color .2s ease;
}
.km-btn-gold .elementor-button{
  box-shadow:0 14px 36px rgba(200,163,77,.30) !important;
}
.km-btn-gold .elementor-button:hover{
  background-color:#7a5223 !important;
  color:#f7f6f3 !important;
  transform:translateY(-2px);
}
.km-btn-navy .elementor-button{
  box-shadow:0 14px 36px rgba(7,19,53,.25) !important;
}
.km-btn-navy .elementor-button:hover{
  box-shadow:0 18px 46px rgba(7,19,53,.38) !important;
  transform:translateY(-2px);
}

/* ── WORK WITH KEVIN FORM (Fluent Forms #3) ───────────────────── */

/* FF's default skin paints its own white card inside the ivory panel */
.fluentform_wrapper_3,
.fluentform_wrapper_3 form.frm-fluent-form {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Title + description duplicate the left column — mockup has neither */
.fluentform_wrapper_3 .kevin-header-break { display: none !important; }

.fluentform_wrapper_3 .ff-el-group { margin-bottom: 20px !important; }
.fluentform_wrapper_3 .ff-el-input--label { margin-bottom: 9px !important; }

.fluentform_wrapper_3 .ff-el-input--label label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: #071335 !important;
  line-height: 1 !important;
}

.fluentform_wrapper_3 .ff-el-form-control {
  background: #fff !important;
  border: 1px solid #d9dde4 !important;
  border-radius: 3px !important;
  padding: 16px 18px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  color: #071335 !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fluentform_wrapper_3 textarea.ff-el-form-control {
  min-height: 132px !important;
  resize: vertical;
}
.fluentform_wrapper_3 .ff-el-form-control:focus {
  border-color: #c8a34d !important;
  box-shadow: 0 0 0 3px rgba(200,163,77,.18) !important;
  outline: none !important;
}

.fluentform_wrapper_3 .ff-btn-submit {
  width: 100% !important;
  background: #c8a34d !important;
  color: #071335 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  padding: 21px 32px !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: 0 14px 36px rgba(200,163,77,.30) !important;
  transition: transform .18s ease, background-color .2s ease,
              color .2s ease, box-shadow .25s ease !important;
}
.fluentform_wrapper_3 .ff-btn-submit:hover {
  background: #7a5223 !important;
  color: #f7f6f3 !important;
  transform: translateY(-2px);
}

.fluentform_wrapper_3 .ff-el-is-required.asterisk-right label:after {
  color: #c8a34d !important;
  font-weight: 900;
}

@media (max-width: 767px) {
  .fluentform_wrapper_3 .ff-btn-submit {
    white-space: normal !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    padding: 18px 16px !important;
  }
}
/* ===== Single Event template (513) ===== */

/* TEC page-template wrapper — release the 1048px clamp so sections go full-bleed */
#tribe-events-pg-template {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Event datetime — "Saturday, September 19" treatment from the RGA hero */
.km-ev-date .tec-events-elementor-event-widget__datetime {
  margin: 0;
  color: rgba(247, 246, 243, 0.92);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.6;
}

/* Event cost — gold pill, same spec as the countdown pill */
.km-ev-cost .tec-events-elementor-event-widget__cost {
  margin: 0;
  display: inline-block;
  background: rgba(200, 163, 77, 0.14);
  border: 1px solid rgba(200, 163, 77, 0.5);
  color: var(--ac, #c8a34d);
  padding: 8px 14px;
  border-radius: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
}
.km-ev-cost .tec-events-elementor-event-widget__cost::after {
  content: "\00a0 per seat";
}
/* Venue card — ink text was invisible on navy; render as ivory card */
.km-ev-venue .tec-events-elementor-event-widget__venue {
  background: #f7f6f3;
  border-radius: 3px;
  padding: 28px 32px;
}
.km-ev-venue .tec-events-elementor-event-widget__venue-name {
  color: #17181d;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.km-ev-venue .tec-events-elementor-event-widget__venue address,
.km-ev-venue .tribe-street-address,
.km-ev-venue .tribe-locality,
.km-ev-venue .tribe-region,
.km-ev-venue .tribe-postal-code,
.km-ev-venue .tribe-delimiter {
  color: #17181d;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
}
.km-ev-venue a {
  color: #7a5223;
  font-weight: 700;
}
.km-ev-venue iframe {
  width: 100%;
  min-height: 280px;
  border: 0;
  border-radius: 3px;
  margin-top: 16px;
}

/* Add to Calendar — TEC blue → brand ghost-gold button */
.km-ev-export button,
.km-ev-export .tec-events-elementor-event-widget__export-dropdown button {
  background: rgba(200, 163, 77, 0.14) !important;
  border: 1px solid rgba(200, 163, 77, 0.5) !important;
  color: var(--ac, #c8a34d) !important;
  border-radius: 3px;
  padding: 12px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.km-ev-export a {
  color: #f7f6f3 !important;
  font-family: 'Montserrat', sans-serif;
}
/* ===== Mobile: solid header + no hero underlap ===== */
@media (max-width: 1024px) {
  /* Header always solid navy — covers the menu-open case for free */
  .elementor-location-header {
    background-color: #071335 !important;
  }

  /* Heroes flow below the header instead of sliding under it */
  .km-hero {
    margin-top: 0 !important;
    padding-top: 72px !important;
  }

  .km-sheen {
    display: none !important;
  }

  /* Darker scrim — targets ::after (the real overlay layer);
     ::before is the Ken Burns photo layer — never restyle it */
  .km-hero::after {
    background-image: linear-gradient(
      180deg,
      rgba(7, 19, 53, 0.88) 0%,
      rgba(7, 19, 53, 0.62) 60%,
      rgba(7, 19, 53, 0.45) 100%
    ) !important;
  }
}/* End custom CSS */