/*
Theme Name: Fog Media Goa
Theme URI: https://fogmediapro.com/
Description: Child theme of Hello Elementor for the Fog Media Goa landing page. Holds only the styling Elementor Free cannot express on its own — everything else is edited visually in Elementor.
Author: Fog Media
Template: hello-elementor
Version: 1.0.0
Text Domain: fogmedia-goa
*/

/* =========================================================================
   Fog Media — Goa landing helpers
   -------------------------------------------------------------------------
   Every colour and font below is read from Elementor's Global Colors and
   Global Fonts (Site Settings), so changing a global in Elementor changes
   these too. You should not need to edit this file.
   ========================================================================= */

/* ---- 1. Image crops -----------------------------------------------------
   Elementor's Image widget cannot crop to a ratio. Add one of these classes
   to an Image widget (Advanced > CSS Classes) to crop it.                   */
.fg-crop-23 img { aspect-ratio: 2 / 3;  object-fit: cover; width: 100%; }
.fg-crop-34 img { aspect-ratio: 3 / 4;  object-fit: cover; width: 100%; }
.fg-crop-45 img { aspect-ratio: 4 / 5;  object-fit: cover; width: 100%; }
.fg-crop-11 img { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }
.fg-crop-169 img{ aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.fg-crop-23 img, .fg-crop-34 img, .fg-crop-45 img,
.fg-crop-11 img, .fg-crop-169 img { display: block; }

/* ---- 1b. Aspect ratios on a container -----------------------------------
   Same idea as the crops above, but for a container (used by the photo
   placeholders so an empty slot holds the same shape as a real photo).     */
.fg-ar-23  { aspect-ratio: 2 / 3;  min-height: 0; }
.fg-ar-34  { aspect-ratio: 3 / 4;  min-height: 0; }
.fg-ar-45  { aspect-ratio: 4 / 5;  min-height: 0; }
.fg-ar-169 { aspect-ratio: 16 / 9; min-height: 0; }

/* ---- 2. Staggered offsets ----------------------------------------------
   The design drops some images lower than their neighbours. Desktop only.  */
@media (min-width: 768px) {
  .fg-drop-32 { margin-top: 32px; }
  .fg-drop-36 { margin-top: 36px; }
  .fg-drop-48 { margin-top: 48px; }
}

/* ---- 3. Sticky header ---------------------------------------------------
   Sticky is an Elementor Pro motion effect, so it is done here instead.    */
.fg-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Clear the admin bar — but only while it is actually fixed. WordPress makes
   it position: absolute below 783px, where it scrolls away with the page, so
   offsetting the header there would leave a band for content to show through
   above it. Visitors never see either rule; only logged-in users do. */
@media screen and (min-width: 783px) {
  .admin-bar .fg-header { top: 32px; }
}
/* In the Elementor editor a sticky header covers the canvas — pin it flat. */
.elementor-editor-active .fg-header { position: relative; top: 0; }

/* ---- 3b. Where in-page links land ---------------------------------------
   Every "Check your Goa date" button jumps to #enquire. Without this the
   target sits underneath the sticky header. 72px header plus breathing room. */
#enquire, #portfolio, #packages, #process, #film, #reviews, #faq, #hero {
  scroll-margin-top: 88px;
}

/* On a phone, the enquiry section leads with the form itself — the buttons
   say "Check your date", so that is what should be on screen when you land.
   The intro and the WhatsApp alternative follow underneath. */
@media (max-width: 767px) {
  .fg-enquiry { order: -1; }
}

/* ---- 4. "Most booked" badge --------------------------------------------
   Sits on the top border of the featured package card.                     */
.fg-pkg-featured { position: relative; }
.fg-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: auto !important;
}
.fg-badge .elementor-heading-title {
  display: inline-block;
  white-space: nowrap;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-fgongold);
  padding: 6px 18px;
}

/* ---- 5. Sticky mobile action bar ---------------------------------------
   Slides up once the visitor has scrolled past the hero. Mobile only.      */
.fg-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: 100%;
  max-width: none;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.fg-sticky-bar.fg-on { transform: none; }
@media (min-width: 768px) { .fg-sticky-bar { display: none !important; } }
.elementor-editor-active .fg-sticky-bar {
  position: relative;
  transform: none;
  display: flex !important;
}
/* The bar overlaps the footer, so the footer buys back the height. */
@media (max-width: 767px) { .fg-footer { padding-bottom: 112px !important; } }

/* ---- 6. WhatsApp mark ---------------------------------------------------
   The WhatsApp glyph before a link's text. Add .fg-wa-icon to the widget;
   add .fg-wa-icon-plain as well when the button's own text colour should
   carry it (on the green bar and on gold buttons).                          */
.fg-wa-icon .elementor-button-content-wrapper {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.fg-wa-icon .elementor-button-content-wrapper::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  background-color: var(--e-global-color-fgwa);
  -webkit-mask: var(--fg-wa-mark) center / contain no-repeat;
  mask: var(--fg-wa-mark) center / contain no-repeat;
}
.fg-wa-icon-plain .elementor-button-content-wrapper::before {
  background-color: currentColor;
}

/* The WhatsApp mark, as a mask so it takes whichever colour is set above. */
:root {
  --fg-wa-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.04 3.2c-7.1 0-12.87 5.77-12.87 12.87 0 2.27.6 4.49 1.73 6.44L3.1 28.8l6.45-1.69a12.83 12.83 0 0 0 6.49 1.75h.01c7.1 0 12.87-5.77 12.87-12.87S23.14 3.2 16.04 3.2Zm0 23.16h-.01a10.7 10.7 0 0 1-5.45-1.49l-.39-.23-4.05 1.06 1.08-3.95-.25-.4a10.67 10.67 0 0 1-1.64-5.7c0-5.9 4.81-10.7 10.72-10.7 2.86 0 5.55 1.12 7.57 3.14a10.63 10.63 0 0 1 3.14 7.57c0 5.9-4.81 10.7-10.72 10.7Zm5.88-8.01c-.32-.16-1.9-.94-2.2-1.05-.3-.11-.51-.16-.73.16-.21.32-.83 1.05-1.02 1.26-.19.22-.38.24-.7.08-.32-.16-1.36-.5-2.59-1.6-.96-.85-1.6-1.91-1.79-2.23-.19-.32-.02-.5.14-.66.15-.14.32-.38.48-.57.16-.19.21-.32.32-.54.11-.21.05-.4-.03-.56-.08-.16-.73-1.75-1-2.4-.26-.63-.53-.54-.73-.55l-.62-.01c-.21 0-.56.08-.86.4-.29.32-1.12 1.1-1.12 2.68s1.15 3.1 1.31 3.32c.16.21 2.26 3.45 5.48 4.84.77.33 1.36.53 1.82.68.77.24 1.47.21 2.02.13.62-.09 1.9-.78 2.17-1.53.27-.75.27-1.39.19-1.53-.08-.13-.29-.21-.61-.37Z'/%3E%3C/svg%3E");
}

/* ---- 7. Underlined gold link -------------------------------------------- */
.fg-link-ul .elementor-button {
  border-bottom: 1px solid var(--e-global-color-primary) !important;
  padding-bottom: 6px !important;
}

/* ---- 8. Numbered "why us" rows ------------------------------------------ */
.fg-rows-wrap { border-bottom: 1px solid var(--e-global-color-fgline3); }
.fg-row { border-top: 1px solid var(--e-global-color-fgline3); }
.fg-rownum .elementor-heading-title { color: var(--e-global-color-primary); }

/* ---- 9. Testimonial quote mark ------------------------------------------ */
.fg-quotemark .elementor-heading-title { line-height: .5; }

/* ---- 10. FAQ accordion --------------------------------------------------
   Strips Elementor's box look back to the design's hairline rules.         */
.fg-faq .elementor-accordion .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid var(--e-global-color-fgline3);
}
.fg-faq .elementor-tab-title { padding: 21px 4px; }
.fg-faq .elementor-tab-content { padding: 0 4px 24px; border-top: none; }
.fg-faq .elementor-accordion-icon { color: var(--e-global-color-primary); }

/* ---- 11. Enquiry form ---------------------------------------------------
   Colours, fonts and spacing come from the Fluent Forms widget's own
   Elementor controls (select the form widget > Style). Only the handful of
   bits those controls do not reach live here.                               */
.fg-form .fluentform .ff-el-input--label label { margin-bottom: 8px; }
.fg-form .fluentform .ff-el-form-control { box-shadow: none; }
.fg-form .fluentform .ff-el-form-control:focus { outline: none; box-shadow: none; }
.fg-form .fluentform .ff-el-is-error .ff-el-form-control { border-color: #A3402F; }
.fg-form .fluentform .error-text { font-size: 12.5px; }
.fg-form .fluentform .ff-btn-submit { cursor: pointer; transition: background-color .2s ease; }

/* Event and budget choices are selectable tiles, the way the CRM's own quote
   form presents them — but in this page's palette rather than the CRM's.    */
.fg-form .fluentform .ff-el-input--content:has(.ff-el-form-check-checkbox),
.fg-form .fluentform .ff-el-input--content:has(.ff-el-form-check-radio) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 479px) {
  .fg-form .fluentform .ff-el-input--content:has(.ff-el-form-check-checkbox),
  .fg-form .fluentform .ff-el-input--content:has(.ff-el-form-check-radio) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fg-form .fluentform .ff-el-form-check { margin: 0; }
.fg-form .fluentform .ff-el-form-check-label {
  display: block;
  margin: 0;
  padding: 13px 15px;
  min-height: 100%;
  border: 1px solid var(--e-global-color-fgline3);
  background: var(--e-global-color-fgcanvas);
  color: var(--e-global-color-secondary);
  font-size: 14.5px;
  letter-spacing: .02em;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.fg-form .fluentform .ff-el-form-check-label:hover {
  border-color: var(--e-global-color-primary);
}
/* Hide the native control; the tile itself carries the selected state. */
.fg-form .fluentform .ff-el-form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fg-form .fluentform .ff-el-form-check-label:has(input:checked) {
  border-color: var(--e-global-color-primary);
  background: var(--e-global-color-fgpanelgold);
}
.fg-form .fluentform .ff-el-form-check-label:has(input:focus-visible) {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: 2px;
}

/* The CRM labels each event with what it is; same here, as a second line. */
.fg-form .fluentform .ff-el-form-check-label span { display: block; }
.fg-form .fluentform .ff-el-form-check-label span::after {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--e-global-color-fgmuted);
}
.fg-form .fluentform .ff-el-form-check-label:has([value="Mehndi"]) span::after { content: "Henna ceremony"; }
.fg-form .fluentform .ff-el-form-check-label:has([value="Haldi"])       span::after { content: "Turmeric ritual"; }
.fg-form .fluentform .ff-el-form-check-label:has([value="Sangeet"])     span::after { content: "Musical night"; }
.fg-form .fluentform .ff-el-form-check-label:has([value="Wedding"])     span::after { content: "Main ceremony"; }
.fg-form .fluentform .ff-el-form-check-label:has([value="Reception"])   span::after { content: "Evening gala"; }
.fg-form .fluentform .ff-el-form-check-label:has([value="Engagement"])  span::after { content: "Ring exchange"; }
.fg-form .fluentform .ff-el-form-check-label:has([value="Pre-wedding"]) span::after { content: "Candid shoot"; }

/* ---- 11b. The two steps ------------------------------------------------
   Added by assets/js/site.js, which splits the form at its section break.
   Fluent Forms' own Form Step element is Pro only.                         */
.fg-form .fg-step-2 { display: none; }
.fg-form form.fg-on-step-2 .fg-step-1 { display: none; }
.fg-form form.fg-on-step-2 .fg-step-2 { display: block; }
/* Send enquiry belongs to step two; the step wrappers leave it in place. */
.fg-form form[data-fg-steps]:not(.fg-on-step-2) .ff-el-group:has(.ff-btn-submit) { display: none; }

.fg-form .fg-step-count {
  font-family: var(--e-global-typography-fgeyebrow-font-family), sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--e-global-color-fgmuted);
  text-align: right;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.fg-form .fg-step-nav { margin-top: 6px; }
.fg-form .fg-step-next {
  width: 100%;
  border: none;
  padding: 17px 26px;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-fgongold);
  font-family: var(--e-global-typography-fgbutton-font-family), sans-serif;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}
.fg-form .fg-step-next:hover { background: var(--e-global-color-accent); }
.fg-form .fg-step-back {
  border: none;
  background: none;
  padding: 0 0 18px;
  font-family: var(--e-global-typography-fgeyebrow-font-family), sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--e-global-color-primary);
  cursor: pointer;
}
.fg-form .fg-step-back:hover { color: var(--e-global-color-accent); }
.fg-form .fg-step-invalid .ff-el-input--label label { color: #B3452F; }
.fg-form .fg-step-invalid .ff-el-form-control,
.fg-form .fg-step-invalid .ff-el-form-check-label { border-color: #A3402F; }

/* The section break is the step marker, so it needs no visible chrome. */
.fg-form .fluentform .ff-el-section-break { border: none; padding: 0; margin: 0 0 4px; }
.fg-form .fluentform .ff-el-section-break h3 {
  font-family: var(--e-global-typography-fgcardtitle-font-family), sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
  margin: 0 0 4px;
}

/* ---- 12. Empty photo placeholder ----------------------------------------
   Marks a slot that still needs a real photo. Replace the image in
   Elementor and the placeholder look goes with it.                         */
.fg-placeholder {
  background: var(--e-global-color-fgslot);
  border: 1px solid var(--e-global-color-fgline);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  padding: 16px;
}
.fg-placeholder .elementor-heading-title {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A69F88;
  line-height: 1.6;
}

/* ---- 12b. Star rating ---------------------------------------------------
   Elementor renders the label before the stars; the design has it after.   */
.fg-stars .elementor-star-rating__wrapper {
  flex-direction: row-reverse;
  justify-content: center;
  gap: 12px;
}
.fg-stars .elementor-star-rating__title { margin: 0; }

/* ---- 12c. Film ----------------------------------------------------------
   Hold the poster frame at 16:9 and draw the design's gold play ring.      */
.fg-film .elementor-custom-embed-image-overlay { position: relative; display: block; }
.fg-film .elementor-custom-embed-image-overlay img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.fg-film .elementor-custom-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(63, 32, 33, .55);
  border-radius: 50%;
  background: rgba(63, 32, 33, .35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.fg-film .elementor-custom-embed-play:hover { background: rgba(63, 32, 33, .55); }
.fg-film .elementor-custom-embed-play i,
.fg-film .elementor-custom-embed-play svg { text-shadow: none; filter: none; }

/* ---- 13. Horizontal scroll for testimonials on small screens ------------ */
@media (max-width: 767px) {
  .fg-scroll-x {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .fg-scroll-x > .e-con,
  .fg-scroll-x > .elementor-column {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* ---- 14. Small niceties ------------------------------------------------- */
::selection { background: #E7D8C4; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.fg-hairline { border-top: 1px solid var(--e-global-color-fgline); }
.fg-nowrap { white-space: nowrap; }

/* ---- 15. Section motion -------------------------------------------------
   Entrance and hover, using Framer Motion's curves rather than its code
   (it is a React library; this page is not React).

     initial  opacity 0, y 14px, blur 4px
     animate  opacity 1, y 0,    blur 0
     ease     cubic-bezier(.16, 1, .3, 1)   — easeOutExpo
     stagger  70ms per child, set by assets/js/motion.js as --fg-delay

   Only elements that are already below the fold are hidden, and only by
   JavaScript. Nothing on screen is ever hidden, so a failure here means no
   animation — never invisible content.                                     */

[data-fg-motion] {
  transition:
    opacity   .62s cubic-bezier(.16, 1, .3, 1) var(--fg-delay, 0ms),
    transform .62s cubic-bezier(.16, 1, .3, 1) var(--fg-delay, 0ms),
    filter    .62s cubic-bezier(.16, 1, .3, 1) var(--fg-delay, 0ms);
}
[data-fg-motion].fg-hidden {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}
[data-fg-motion].fg-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* The hero settles in on load. Pure CSS, so it cannot stall half-done. */
.fg-hero-load { animation: fg-rise .75s cubic-bezier(.16, 1, .3, 1) both; }
.fg-hero-load-late { animation: fg-rise .75s cubic-bezier(.16, 1, .3, 1) .14s both; }
@keyframes fg-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- 15b. Hover ---------------------------------------------------------
   Small, spring-flavoured moves. Nothing shifts layout — transforms only. */

/* Photos breathe a little inside their crop. */
.fg-motion .elementor-widget-image,
.fg-gallery-hover { overflow: hidden; }
.fg-motion .elementor-widget-image img {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.fg-motion .elementor-widget-image:hover img { transform: scale(1.035); }

/* Package and testimonial cards lift. */
.fg-lift {
  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s cubic-bezier(.16, 1, .3, 1),
    border-color .35s ease;
}
.fg-lift:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 14px 34px rgba(63, 32, 33, .10);
}
.fg-pkg-featured.fg-lift:hover { box-shadow: 0 16px 40px rgba(63, 32, 33, .16); }

/* Button hovers live in section 16, applied to every button on the page
   rather than only the ones inside an animated section. */

/* Process steps and trust stats warm up on hover. */
.fg-step-card { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.fg-step-card:hover { transform: translate3d(0, -3px, 0); }

/* The FAQ rows and their icon. */
.fg-faq .elementor-tab-title { transition: color .2s ease; }
.fg-faq .elementor-accordion-icon i,
.fg-faq .elementor-accordion-icon svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

/* Respect the setting, always. */
@media (prefers-reduced-motion: reduce) {
  [data-fg-motion],
  [data-fg-motion].fg-hidden {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .fg-hero-load, .fg-hero-load-late { animation: none; }
  .fg-motion .elementor-widget-image img,
  .fg-lift,
  .fg-motion .elementor-button,
  .fg-step-card { transition: none; }
  .fg-motion .elementor-widget-image:hover img,
  .fg-lift:hover,
  .fg-motion .elementor-button:hover,
  .fg-step-card:hover { transform: none; box-shadow: none; }
}


/* ---- 16. Button hovers --------------------------------------------------
   Every button carries its variant as a class (fg-btn-gold, -outline,
   -ghost, -plain, -goldlink), added by the page builder, so each kind can
   move in the way that suits it. Same easing as the section motion.        */

.fg-btn-gold .elementor-button,
.fg-btn-outline .elementor-button,
.fg-btn-ghost .elementor-button,
.fg-btn-plain .elementor-button,
.fg-btn-goldlink .elementor-button {
  transition:
    transform .3s cubic-bezier(.16, 1, .3, 1),
    box-shadow .3s cubic-bezier(.16, 1, .3, 1),
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
  will-change: transform;
}

/* Filled: lifts and casts a soft shadow in its own colour. */
.fg-btn-gold .elementor-button:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--e-global-color-primary) 28%, transparent);
}

/* Outline: fills in on hover, so the border becomes the button. */
.fg-btn-outline .elementor-button:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--e-global-color-primary) 22%, transparent);
}

/* Ghost: a quiet wash rather than a full fill. */
.fg-btn-ghost .elementor-button:hover {
  transform: translate3d(0, -2px, 0);
  background-color: color-mix(in srgb, var(--e-global-color-primary) 6%, transparent) !important;
}

/* Text links: an underline that draws itself from the left. */
.fg-btn-plain .elementor-button { position: relative; }
.fg-btn-plain .elementor-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.fg-btn-plain .elementor-button:hover::after { transform: scaleX(1); }

/* The gold underlined link already has a rule; thicken it on hover. */
.fg-btn-goldlink .elementor-button:hover {
  transform: translate3d(0, -1px, 0);
  border-bottom-color: var(--e-global-color-accent) !important;
}

/* Everything presses back down when clicked. */
.fg-btn-gold .elementor-button:active,
.fg-btn-outline .elementor-button:active,
.fg-btn-ghost .elementor-button:active,
.fg-btn-goldlink .elementor-button:active {
  transform: translate3d(0, 0, 0);
  box-shadow: none;
}

/* The header's primary action sits apart from the two info links. */
@media (min-width: 768px) {
  .fg-headernav .fg-btn-gold { margin-left: 10px; }
}

/* The sticky mobile bar brightens rather than lifting — it is pinned. */
.fg-sticky-bar .elementor-button { transition: filter .2s ease; }
.fg-sticky-bar .elementor-button:hover { filter: brightness(1.08); }

/* The form's own buttons, which are not Elementor widgets. */
.fgq-cta, .fgq-step-next, .fgq-modal-add {
  transition:
    transform .3s cubic-bezier(.16, 1, .3, 1),
    box-shadow .3s cubic-bezier(.16, 1, .3, 1),
    background-color .22s ease;
}
.fgq-cta:hover, .fgq-step-next:hover, .fgq-modal-add:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fgq-gold) 28%, transparent);
}
.fgq-cta:active, .fgq-step-next:active, .fgq-modal-add:active {
  transform: none;
  box-shadow: none;
}
.fgq-modal-cancel, .fgq-btn-back {
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.fgq-modal-cancel:hover, .fgq-btn-back:hover {
  border-color: var(--fgq-gold);
  color: var(--fgq-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .fg-btn-gold .elementor-button,
  .fg-btn-outline .elementor-button,
  .fg-btn-ghost .elementor-button,
  .fg-btn-plain .elementor-button::after,
  .fg-btn-goldlink .elementor-button,
  .fgq-cta, .fgq-step-next, .fgq-modal-add { transition: none; }
  .fg-btn-gold .elementor-button:hover,
  .fg-btn-outline .elementor-button:hover,
  .fg-btn-ghost .elementor-button:hover,
  .fg-btn-goldlink .elementor-button:hover,
  .fgq-cta:hover, .fgq-step-next:hover, .fgq-modal-add:hover {
    transform: none;
    box-shadow: none;
  }
  .fg-btn-plain .elementor-button:hover::after { transform: scaleX(1); }
}