@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

/* ==========================================================================
   TOKENS — held on the container, so nothing leaks into the theme
   ========================================================================== */
/* The Queen design tokens now come from Queen Forms Core, so one change of
   the gold reaches every Queen form. What remains here is this form's own. */
.qej-app{
  /* Reads as a horizon at golden hour: cool high sky, warm haze, a band of
     light on the horizon, then land falling into shadow. It is a stand-in, not
     a destination - a photograph will replace it. */
  position:relative;
  color:var(--qej-espresso);background:var(--qej-ivory);
  font-family:var(--qej-sans);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* The widget is simply as wide as the column it is placed in. There is no
     viewport-escaping margin and no overflow rule anywhere on this element:
     `overflow-x:clip` with a visible Y axis silently promotes Y to `auto`,
     which is what boxes a form inside its own scrollbar. The WordPress page
     does all the scrolling.
     For edge-to-edge ivory, set the Elementor SECTION background to #F9F5ED
     and give the section Full Width / no padding. Nothing here needs to
     change for that to work. */
  width:100%;max-width:100%;padding:0;
}
/* the form's own breathing room, now that the hero owns the top of the widget */
/* The page is warm ivory, but flat ivory reads as a blank browser background.
   Three very light layers give it the depth of printed stock without touching
   a single colour of the type:
     1. light falling from the top, as it would on a page held up to read
     2. a very soft warm bowl toward the outer edges, like a photographed page
     3. a fine paper grain, drawn as SVG noise so there is no image to load
   Total tonal range is about 3%. Nothing here reduces contrast - the top of
   the page is actually lighter than the flat ivory was. */
.qej-body{
  /* the gutter is where the photograph shows around the sheet */
  padding:clamp(18px,2.6vw,40px) clamp(14px,3.2vw,44px) clamp(22px,3vw,48px);
  /* THE PHOTOGRAPH
     Set QEJ_CONFIG.backgroundImage to a URL and it is used here. Until then a
     golden-hour wash stands in, so the page is never a blank grey while you
     find the right frame. Cover, centred slightly high so a horizon sits in
     the upper third rather than behind the sheet. */
  background-color:#241A12;
  background-image:
    linear-gradient(to bottom, rgba(26,18,11,.34) 0%, rgba(26,18,11,.22) 38%,
                               rgba(26,18,11,.30) 70%, rgba(26,18,11,.50) 100%),
    var(--qej-photo, var(--qej-photo-fallback));
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center,center 32%;}

/* THE SHEET
   The form sits on the photograph as a sheet of warm ivory. It is opaque, so
   nothing shows through a field, and it carries the paper grain that used to
   be on the page itself. */
.qej-wrap{
  background-color:var(--qej-ivory);
  background-image:
    radial-gradient(120% 58% at 50% -6%, rgba(255,253,248,.98) 0%, rgba(255,253,248,0) 62%),
    radial-gradient(150% 120% at 50% 42%, rgba(255,253,248,0) 52%, rgba(146,120,74,.05) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.085'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:auto,auto,150px 150px;
  background-position:center top,center center,center top;
  border-radius:5px;
  padding:clamp(24px,2.8vw,44px) clamp(22px,3vw,48px) clamp(24px,2.8vw,40px);
  box-shadow:0 40px 90px -46px rgba(18,12,6,.72),
             0 2px 10px rgba(18,12,6,.16),
             inset 0 1px 0 rgba(255,255,255,.5);}
.qej-app *,.qej-app *::before,.qej-app *::after{box-sizing:border-box;}
.qej-app [hidden]{display:none !important;}


/* the whole inquiry lives on a single measure — no container, no card */
.qej-wrap{width:100%;max-width:680px;margin:0 auto;}

/* ==========================================================================
   HERO — a shallow cinematic band above the inquiry. The form sits below it
   and is never laid over it.

   `overflow:hidden` here is safe: the hero has an explicit height, so it clips
   the media crop without ever becoming a scroll container.
   ========================================================================== */
.qej-hero{position:relative;display:flex;align-items:center;
  width:100%;height:clamp(320px,25vw,400px);overflow:hidden;
  /* sampled from the footage itself, so there is never a black or blank flash
     while the poster decodes */
  background:#3E78A5;}
.qej-hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;border:0;pointer-events:none;
  display:block;}
/* a photographic scrim, not decoration: just enough to carry ivory type on the
   sky, and it clears almost entirely by the sand so the footage stays bright
   and the bottom edge meets the ivory below */
.qej-hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(18,26,32,.26) 0%, rgba(18,26,32,.15) 44%,
    rgba(18,26,32,.03) 76%, rgba(18,26,32,0) 100%);}
/* the seam into the warm ivory: one gold hairline, nothing else */
.qej-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(205,166,93,.62);z-index:3;}
.qej-hero__inner{position:relative;z-index:2;width:100%;
  padding:0 clamp(20px,5vw,56px);}
/* the headline sits on the same measure as the questions below it */
.qej-hero__box{width:100%;max-width:680px;margin:0 auto;}
.qej-hero__eyebrow{display:block;margin:0 0 13px;
  font-family:var(--qej-sans);font-size:10.5px;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;color:#F0DBB0;
  text-shadow:0 1px 2px rgba(12,22,30,.5), 0 1px 14px rgba(12,22,30,.55);}
.qej-hero__title{margin:0;font-family:var(--qej-serif);font-weight:400;
  font-size:clamp(30px,4.2vw,50px);line-height:1.06;letter-spacing:-.012em;
  color:#FFFCF5;max-width:20ch;
  text-shadow:0 1px 2px rgba(12,22,30,.42), 0 2px 30px rgba(12,22,30,.5);}

/* ==========================================================================
   PROGRESS — 01 — 04 and one hairline. Nothing more.
   ========================================================================== */
.qej-prog{display:flex;align-items:baseline;gap:14px;
  padding-bottom:11px;margin-bottom:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--qej-rule);}
.qej-prog__count{font-size:11px;font-weight:400;letter-spacing:.26em;
  color:var(--qej-espresso);font-variant-numeric:tabular-nums;}
.qej-prog__count b{font-weight:600;}
.qej-prog__count i{font-style:normal;color:rgba(33,27,24,.62);}
.qej-prog__label{margin-left:auto;font-family:var(--qej-serif);
  font-size:17px;font-style:italic;font-weight:400;letter-spacing:.01em;
  color:var(--qej-charcoal);}
.qej-prog__track{position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:transparent;}
.qej-prog{position:relative;}
.qej-prog__track i{display:block;height:1px;background:var(--qej-gold);
  width:25%;transition:width .6s var(--qej-ease);}

/* ==========================================================================
   THE QUESTION — the one loud thing on the page
   ========================================================================== */
/* A quiet line under a field. Used by Preferred Language to say plainly that
   language support is identified where available and is not a guarantee, so
   the question cannot be read as a promise of a guide or of correspondence. */
.qej-note{margin:10px 0 0;font-size:13.5px;line-height:1.6;
  color:var(--qej-soft);max-width:56ch;}

.qej-step{display:none;}
.qej-step.qej-on{display:block;}
@keyframes qejRise{from{opacity:0;transform:translateY(14px);}
                   to{opacity:1;transform:none;}}
.qej-step.qej-on{animation:qejRise .6s var(--qej-ease) backwards;}
.qej-q{margin:0 0 clamp(26px,3.6vw,42px);
  font-family:var(--qej-serif);font-weight:400;
  font-size:clamp(32px,5.4vw,52px);line-height:1.05;letter-spacing:-.017em;
  color:var(--qej-espresso);max-width:17ch;}
.qej-q{font-weight:500;}
.qej-q em{font-style:italic;font-weight:400;}

/* a block is one sub-question: quiet label, control, room to breathe */



/* what must be answered, and what need not be */





/* Step four is a page of short answers rather than questions, so it is set
   tighter than the rest. Same fields, same order - just less air between
   them, which is what makes it read as one block instead of a long scroll. */
/* Step three is a page of short answers rather than questions, so it is set
   tighter than the rest: the same fields and the same type sizes, with the air
   between them reduced so the whole of it - heading, fields, consents and the
   button - lands inside one desktop screen. Touch targets are untouched: the
   controls are still 44px tall on a phone. */
.qej-form:has(.qej-step[data-qej-step="3"].qej-on) .qej-prog{
  margin-bottom:clamp(18px,2vw,22px);}
.qej-form:has(.qej-step[data-qej-step="3"].qej-on) .qej-nav{
  margin-top:clamp(18px,2.2vw,26px);}
.qej-step[data-qej-step="3"] .qej-q{
  font-size:clamp(30px,3.2vw,42px);max-width:none;
  margin-bottom:clamp(20px,2.4vw,28px);}
.qej-step[data-qej-step="3"] .qej-block{margin-bottom:clamp(13px,1.3vw,15px);}
.qej-step[data-qej-step="3"] .qej-cols{margin-bottom:clamp(13px,1.3vw,15px);}
.qej-step[data-qej-step="3"] .qej-lb{margin-bottom:5px;}
.qej-step[data-qej-step="3"] .qej-in,
.qej-step[data-qej-step="3"] .qej-sel__btn{padding-top:4px;padding-bottom:9px;}
.qej-step[data-qej-step="3"] .qej-err{margin-top:4px;}
/* A phone number is a short answer, so the control is sized to the answer
   rather than stretched across the whole measure. The dialling code and the
   number stay one unit; only the pair is narrowed. Full width on a phone. */
.qej-step[data-qej-step="3"] .qej-tel{gap:12px;max-width:56%;}
.qej-step[data-qej-step="3"] .qej-checks{margin-top:clamp(12px,1.3vw,14px);
  padding-top:clamp(10px,1.2vw,12px);}
.qej-step[data-qej-step="3"] .qej-terms{margin-bottom:10px;line-height:1.55;}
.qej-step[data-qej-step="3"] .qej-check{margin-bottom:0;}


/* ==========================================================================
   CONTROLS — every one of them is a rule and some type. No boxes.
   ========================================================================== */
/* --- the opening trigger, shared by every dropdown --- */

/* the investment answers are long sentences; these two keep the full measure
   so a chosen value is never clipped to an ellipsis */












/* --- the panel it opens --- */















/* Choosing several used to leave the list open with no obvious way to finish,
   so people had to click into empty space to get out of it. The footer gives
   the count on one side and a plain way to be done on the other. */







/* --- what has been chosen, shown as removable tokens --- */









/* --- written answers --- */



/* A flagged dropdown used to look identical to an answered one - only text
   inputs ever reddened, so the dropdown questions gave no visible signal at
   all beyond their message. */






/* two and three column arrangements, used only where the answers are short */


/* two whole questions side by side, so a step is not taller than the window */





/* the optional note, kept deliberately quiet until it is wanted */
.qej-more{display:inline-flex;align-items:center;gap:9px;padding:0;
  background:none;border:0;border-radius:0;cursor:pointer;
  font-family:var(--qej-sans);font-size:14px;font-weight:400;
  letter-spacing:.015em;color:var(--qej-charcoal);
  border-bottom:1px solid rgba(33,27,24,.22);
  transition:color .3s var(--qej-ease),border-color .3s var(--qej-ease);}
.qej-more:hover{color:var(--qej-espresso);border-bottom-color:var(--qej-gold);}
.qej-more:focus-visible{outline:1px solid var(--qej-gold-ink);outline-offset:3px;}
.qej-more b{font-weight:400;font-size:15px;line-height:1;}

/* the conditional block for families, and the note, both open the same way */
@keyframes qejOpen{from{opacity:0;transform:translateY(-6px);}
                   to{opacity:1;transform:none;}}
/* `backwards` rather than `both`: a fill of `both` leaves the final keyframe's
   transform applied for ever, and ANY transform - even an identity one -
   creates a stacking context. That trapped this block's dropdown panel behind
   the block underneath it, so the lower options could not be clicked. */

/* While a panel is open its block is lifted clear of everything around it.
   The block, not the panel, is the number that matters: the block is what
   competes with the sections above and below in the page. Elementor sections
   commonly carry a z-index of their own, so this has to sit above those while
   staying below a site header pinned at 99999. The lift lasts only as long as
   the menu is open. */


/* --- consents --- */


















/* ==========================================================================
   NAVIGATION
   ========================================================================== */





/* a fine gold rule and letterspaced type — the commitment is in the
   proportions, not in a heavy fill. It darkens to espresso on hover, so the
   gold is an edge rather than a wash. */




@media (prefers-reduced-motion:reduce){.qej-go:hover::after{transform:none;}}

/* The marked fields say what is wrong, but they are up the page and easy to
   miss when your eye is on the button you just pressed. This sits beside the
   button and says how much is left. */



/* ==========================================================================
   THE CLOSE
   ========================================================================== */
.qej-done{display:none;padding:clamp(30px,6vw,80px) 0;}
.qej-app.qej-sent .qej-done{display:block;animation:qejRise .7s var(--qej-ease) both;}
.qej-app.qej-sent .qej-form,.qej-app.qej-sent .qej-prog{display:none;}
.qej-done__rule{display:block;width:48px;height:1px;background:var(--qej-gold);
  margin:0 0 clamp(24px,3.4vw,34px);}
.qej-done h2{margin:0;font-family:var(--qej-serif);font-weight:400;
  font-size:clamp(32px,6vw,54px);line-height:1.06;letter-spacing:-.017em;
  color:var(--qej-charcoal);max-width:15ch;}
.qej-done p{margin:clamp(20px,2.8vw,30px) 0 0;max-width:46ch;
  font-size:16.5px;line-height:1.8;color:#3E362F;}
/* the inquiry reference, when the server returns one */
.qej-ref{font-size:13.5px !important;letter-spacing:.04em;color:var(--qej-muted) !important;}
.qej-ref[hidden]{display:none !important;}

/* THE CONSULTATION CALENDAR
   Sits under the approved thank-you wording, which is unchanged. It appears
   only after the inquiry has been received, and only for inquiry forms. */
.qej-cal{margin-top:clamp(20px,2.6vw,30px);}
.qej-cal[hidden]{display:none !important;}
/* The scheduler is shown in full. No fixed height, nothing clipped and no
   scrollbar inside it - the page grows and the page scrolls. Calendly's own
   stylesheet pins its widget to a fixed height, so that is overridden here;
   the exact height is then set from the height the widget reports. The floors
   below only matter if that message never arrives. */
.qej-cal__frame{width:100%;min-height:1100px;height:auto;overflow:visible;}
.qej-cal__frame.calendly-inline-widget{height:auto !important;min-height:1100px;}
.qej-cal__frame iframe{width:100% !important;border:0 !important;display:block;
  height:100%;min-height:1100px;overflow:visible;}
.qej-cal__fallback a{display:inline-flex;align-items:center;height:52px;padding:0 30px;
  background:var(--qej-gold);color:#1F1B17;border:1px solid var(--qej-gold);
  font-family:var(--qej-sans);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;}
.qej-cal__fallback a:hover{background:#BC9350;border-color:#BC9350;}
@media (max-width:900px){
  .qej-cal__frame,.qej-cal__frame.calendly-inline-widget,
  .qej-cal__frame iframe{min-height:1250px;}
}
@media (max-width:600px){
  .qej-cal__frame,.qej-cal__frame.calendly-inline-widget,
  .qej-cal__frame iframe{min-height:1450px;}
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:600px){
  .qej-app{padding:0;}
  /* on a phone the sheet takes the screen, with the photograph still framing it */
  .qej-body{padding:14px 12px 22px;}
  .qej-wrap{padding:22px 18px 26px;border-radius:4px;
    box-shadow:0 18px 44px -26px rgba(18,12,6,.7),0 1px 6px rgba(18,12,6,.14);}
  .qej-hero{height:340px;align-items:flex-start;padding-top:46px;}
  .qej-hero__inner{padding:0 20px;}
  .qej-hero__eyebrow{font-size:10px;letter-spacing:.3em;margin-bottom:11px;}
  .qej-hero__title{font-size:clamp(28px,7.6vw,34px);max-width:14ch;}
  .qej-prog{margin-bottom:28px;}
  .qej-prog__label{font-size:14px;}
  .qej-q{font-size:clamp(29px,8.4vw,38px);max-width:100%;margin-bottom:26px;}
  .qej-block{margin-bottom:28px;}
  .qej-sel__btn,.qej-in{font-size:16.5px;}
  .qej-duo{grid-template-columns:1fr;gap:24px;}
  .qej-cols{grid-template-columns:1fr;gap:28px;margin-bottom:28px;}
  .qej-tel{grid-template-columns:100px minmax(0,1fr);gap:11px;}
  .qej-step[data-qej-step="3"] .qej-tel{max-width:none;}
  .qej-tel .qej-sel__panel{width:min(300px,calc(100vw - 44px));}
  /* room for a Done button big enough to hit with a thumb */
  .qej-sel__panel{max-height:318px;}
  .qej-sel__list{max-height:238px;}
  .qej-sel__foot{padding:10px 12px 10px 15px;}
  .qej-sel__foot button{min-height:38px;padding:0 16px;font-size:11px;}
  /* on a phone the count sits above the button, where the thumb is heading */
  /* nothing above may shrink a tap target on a phone */
  .qej-step[data-qej-step="3"] .qej-in,
  .qej-step[data-qej-step="3"] .qej-sel__btn{padding-top:9px;padding-bottom:15px;}
  .qej-step[data-qej-step="3"] .qej-block,
  .qej-step[data-qej-step="3"] .qej-cols{margin-bottom:20px;}
  .qej-nav{flex-direction:column;align-items:stretch;gap:14px;margin-top:34px;}
  .qej-msg{order:1;margin:0;text-align:center;}
  .qej-go{order:2;width:100%;min-width:0;margin:0;height:52px;}
  .qej-back{order:3;align-self:center;}
}

/* ==========================================================================
   THEME ARMOUR
   A WordPress theme or an Elementor global style will happily repaint a form
   control, and most of ours are <button> elements. Each rule restates our own
   intent at a weight no theme rule can beat, scoped to .qej-app.
   ========================================================================== */
.qej-app button,.qej-app input,.qej-app textarea{
  -webkit-appearance:none !important;appearance:none !important;
  border-radius:0 !important;box-shadow:none !important;text-shadow:none !important;
  background-image:none !important;letter-spacing:inherit;}
.qej-app .qej-sel__btn,.qej-app .qej-sel__btn:hover,.qej-app .qej-sel__btn:focus,
.qej-app .qej-more,.qej-app .qej-more:hover,.qej-app .qej-back,
.qej-app .qej-back:hover{
  background-color:transparent !important;text-transform:none;}
.qej-app .qej-back{text-transform:uppercase !important;}
.qej-app .qej-in,.qej-app .qej-area,.qej-app .qej-in:focus,.qej-app .qej-area:focus{
  background-color:transparent !important;color:var(--qej-espresso) !important;}
.qej-app .qej-sel__opt,.qej-app .qej-sel__find,
.qej-app .qej-sel__opt:hover{
  color:var(--qej-espresso) !important;text-transform:none !important;}
.qej-app .qej-sel__find{background-color:var(--qej-sheet) !important;}
.qej-app .qej-sel__opt{background-color:transparent !important;}
.qej-app .qej-sel__opt:hover,.qej-app .qej-sel__opt.qej-cursor{
  background-color:rgba(205,166,93,.13) !important;}
.qej-app .qej-chip button{background-color:transparent !important;}
.qej-app .qej-go,.qej-app .qej-go:visited{
  background-color:var(--qej-gold) !important;color:#1F1B17 !important;
  background-image:none !important;box-shadow:none !important;
  text-transform:uppercase !important;}
.qej-app .qej-go:hover,.qej-app .qej-go:focus{
  background-color:#BC9350 !important;color:#1F1B17 !important;}
.qej-app input:invalid,.qej-app textarea:invalid{box-shadow:none !important;}
/* themes love to give h1 and video their own margins and rounded corners */
.qej-app .qej-hero__title{margin:0 !important;padding:0 !important;
  color:#FCF9F2 !important;text-transform:none !important;}
.qej-app .qej-hero__eyebrow{margin:0 0 13px !important;padding:0 !important;}
.qej-app .qej-hero__video{margin:0 !important;padding:0 !important;
  border-radius:0 !important;box-shadow:none !important;max-width:none !important;
  background:transparent !important;}
.qej-app .qej-hero{margin:0 !important;}

/* --------------------------------------------------------------------------
   ANSWER VISIBILITY
   Every value the traveller types or chooses is pinned to espresso in every
   state &mdash; idle, hover, focus, after focus leaves, and on returning to an
   earlier step. `color` alone is not enough: WebKit's -webkit-text-fill-color
   and its autofill repaint both beat it, and an Elementor global can set
   `opacity` or `color:inherit` on anything inside a button. Each is answered
   here. Placeholders are pinned one step lighter, so an answered field always
   reads darker than an empty one.

   Every selector begins with .qej-app. Nothing outside this widget is touched.
   -------------------------------------------------------------------------- */
/* --- typed answers: name, email, phone, ages, dream journey, search boxes --- */
.qej-app .qej-in,.qej-app .qej-in:hover,.qej-app .qej-in:focus,
.qej-app .qej-in:active,.qej-app .qej-in:focus-visible,
.qej-app .qej-area,.qej-app .qej-area:hover,.qej-app .qej-area:focus,
.qej-app .qej-area:active,
.qej-app .qej-sel__find,.qej-app .qej-sel__find:focus{
  color:var(--qej-espresso) !important;
  -webkit-text-fill-color:var(--qej-espresso) !important;
  opacity:1 !important;}
/* the browser's own autofill repaints the field and its text */
.qej-app .qej-in:-webkit-autofill,
.qej-app .qej-in:-webkit-autofill:hover,
.qej-app .qej-in:-webkit-autofill:focus,
.qej-app .qej-in:-webkit-autofill:active{
  -webkit-text-fill-color:var(--qej-espresso) !important;
  caret-color:var(--qej-espresso) !important;
  -webkit-box-shadow:0 0 0 60px var(--qej-ivory) inset !important;}
/* prompts stay lighter than an answer, and can never be repainted darker */
.qej-app .qej-in::placeholder,.qej-app .qej-area::placeholder,
.qej-app .qej-sel__find::placeholder{
  color:var(--qej-soft) !important;
  -webkit-text-fill-color:var(--qej-soft) !important;opacity:1 !important;}

/* --- the closed value of every dropdown: month, year, travellers, children,
       country, dialling code --- */
.qej-app .qej-sel__val,
.qej-app .qej-sel__btn .qej-sel__val,
.qej-app .qej-sel__btn:hover .qej-sel__val,
.qej-app .qej-sel__btn:focus .qej-sel__val,
.qej-app .qej-sel.qej-open .qej-sel__val{
  color:var(--qej-espresso) !important;
  -webkit-text-fill-color:var(--qej-espresso) !important;opacity:1 !important;}
/* unless it is still showing its prompt */
.qej-app .qej-sel__val.qej-ph{
  color:var(--qej-soft) !important;
  -webkit-text-fill-color:var(--qej-soft) !important;}

/* --- the open list: dark type on the light panel, in every state --- */
.qej-app .qej-sel__opt,.qej-app .qej-sel__opt *,
.qej-app .qej-sel__opt:hover,.qej-app .qej-sel__opt:hover *,
.qej-app .qej-sel__opt:focus,.qej-app .qej-sel__opt:active,
.qej-app .qej-sel__opt.qej-cursor,.qej-app .qej-sel__opt.qej-cursor *,
.qej-app .qej-sel__opt[aria-selected="true"],
.qej-app .qej-sel__opt[aria-selected="true"] *{
  color:var(--qej-espresso) !important;
  -webkit-text-fill-color:var(--qej-espresso) !important;opacity:1 !important;}
.qej-app .qej-sel__opt em{color:var(--qej-muted) !important;
  -webkit-text-fill-color:var(--qej-muted) !important;}
/* the tick is the one child that must stay invisible: the blanket opacity
   above is there to defeat theme dimming, but it was also revealing a tick on
   every row, so only the chosen row keeps one */
.qej-app .qej-sel__opt .qej-tick{opacity:0 !important;}
.qej-app .qej-sel__opt[aria-selected="true"] .qej-tick,
.qej-app .qej-sel__opt[aria-checked="true"] .qej-tick{opacity:1 !important;}
.qej-app .qej-sel__opt.qej-locked{opacity:.34 !important;}
.qej-app .qej-sel__foot button{background-color:transparent !important;
  color:var(--qej-gold-ink) !important;text-transform:uppercase !important;}
.qej-app .qej-sel__foot button:hover{background-color:var(--qej-espresso) !important;
  color:#E3C489 !important;}
.qej-app .qej-sel__none,.qej-app .qej-sel__foot{
  color:var(--qej-muted) !important;
  -webkit-text-fill-color:var(--qej-muted) !important;opacity:1 !important;}

/* --- chosen destination and experience tags --- */
.qej-app .qej-chip,.qej-app .qej-chip span{
  color:var(--qej-espresso) !important;
  -webkit-text-fill-color:var(--qej-espresso) !important;opacity:1 !important;}
.qej-app .qej-chip button{color:var(--qej-gold-ink) !important;
  -webkit-text-fill-color:var(--qej-gold-ink) !important;opacity:1 !important;}



/* --- consents, questions and labels --- */
.qej-app .qej-check,.qej-app .qej-check span{
  color:var(--qej-charcoal) !important;
  -webkit-text-fill-color:var(--qej-charcoal) !important;opacity:1 !important;}
.qej-app .qej-check .qej-second{color:var(--qej-muted) !important;
  -webkit-text-fill-color:var(--qej-muted) !important;}
.qej-app .qej-terms{color:var(--qej-muted) !important;
  -webkit-text-fill-color:var(--qej-muted) !important;opacity:1 !important;}
.qej-app .qej-terms a,.qej-app .qej-check a{color:var(--qej-gold-ink) !important;
  -webkit-text-fill-color:var(--qej-gold-ink) !important;}
/* A theme that gives h2 uppercase or its own margins would re-wrap the step
   heading and throw out the spacing of the whole step. */
.qej-app .qej-q{color:var(--qej-espresso) !important;
  -webkit-text-fill-color:var(--qej-espresso) !important;opacity:1 !important;
  font-family:var(--qej-serif) !important;text-transform:none !important;
  letter-spacing:-.022em !important;line-height:1.01 !important;
  padding:0 !important;text-align:left !important;}
.qej-app .qej-hero__title,.qej-app .qej-hero__eyebrow{
  font-family:inherit;text-align:left !important;}
.qej-app .qej-lb{color:var(--qej-charcoal) !important;
  -webkit-text-fill-color:var(--qej-charcoal) !important;opacity:1 !important;}
.qej-app .qej-req{color:var(--qej-gold-ink) !important;
  -webkit-text-fill-color:var(--qej-gold-ink) !important;}
.qej-app .qej-opt{color:var(--qej-soft) !important;
  -webkit-text-fill-color:var(--qej-soft) !important;text-transform:none !important;}

@media (prefers-reduced-motion:reduce){
  .qej-app *,.qej-app *::before,.qej-app *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;}
}