/* ==========================================================================
   Hospitality enquiry page.

   Loaded AFTER contact.css, which already styles every control on this form:
   `.field`, `.field__error`, `.ct-fields`, `.checkbox`, `.form-status`,
   `.ct-form__end`, `.ct-send`. Nothing here restyles any of them.

   This sheet exists for the three things Contact has no equivalent of:
   a grouped fieldset, a checkbox grid, and the two content sections that
   follow the form.
   ========================================================================== */

/* -------------------------------------------------------------- 1 open --- */
/* The shared `.crumbs` rule paints in `--text-secondary`, a dark grey meant
   for a light page; on this navy hero it measured 2.49:1. Contact scopes its
   own light values to `.ct-open`, which this section's class does not match,
   so it needs the same treatment rather than inheriting the default. */
.eq-open .crumbs { margin-bottom: clamp(22px, 3vw, 40px); color: #C4D4EC; }
.eq-open .crumbs a { color: #D6E3F6; }
.eq-open .crumbs a:hover { color: #FFFFFF; }

/* --v2-pad-hero, not --v2-pad: it puts the breadcrumb 95px below the header,
   which is where huenova, hospitality, AI, integrations, about and careers
   all put theirs. */
.eq-open { padding-block: var(--v2-pad-hero) var(--v2-pad); }
.eq-open__inner { position: relative; z-index: 1; }
/* No top margin: the breadcrumb already carries its own margin-bottom, and
   stacking a second one put 131px between crumb and eyebrow when every
   other hero sits between 51 and 113. */
/* START, like Careers. Centring the copy against a 460px object pushed
   the eyebrow 65px down and made this the one hero sitting outside the
   site's 51-113px crumb-to-eyebrow band. */
.eq-open__split { align-items: start; }
.eq-open__copy { max-width: 36rem; }
/* A `.v2--navy` section does NOT recolour headings by itself -- every page
   with a dark hero scopes its own, and without this the h1 inherited
   `--text-primary` (#10233F) and painted dark navy on navy. */
.eq-open .v2-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
.eq-open .v2-head h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--bl-soft), var(--bl-electric) 46%, var(--bl-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eq-open .v2-lead { color: #C9D8EE; max-width: 46ch; }
.eq-open .btn-row { margin-top: clamp(26px, 3vw, 36px); }

/* ------------------------------------------------------- THE ARRIVAL ---- */
/* Three drawn orbits, one travelling light each, and the lily at the centre.
   The same two mechanics the rest of the site uses: `pathLength="1"` with the
   dash pulled back draws a path whatever its real length, and `offset-path`
   carries a light along the very same path data -- so a ring and its light
   can never drift apart. */
.eq-art { position: relative; width: min(100%, 440px); margin-inline: auto; }
.eq-orb { display: block; width: 100%; height: auto; overflow: visible; }

.eq-orb__ring {
  fill: none;                       /* a <path> ellipse fills itself solid */
  stroke: #9CCEFF;
  stroke-opacity: var(--o);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;             /* base state is DRAWN */
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, .34));
}
.eq-orb__body {
  fill: #EAF3FF;
  /* --s spaces the lights around their orbits when nothing is animating; the
     matching negative animation-delay does the same while it is. */
  offset-distance: var(--s);
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 7px rgba(147, 197, 253, .9));
}
.eq-orb__core {
  fill: #DBEAFE;
  filter: drop-shadow(0 0 14px rgba(147, 197, 253, .95));
}

/* the lily, laid over the orbits and pivoting on the same centre */
.eq-art__bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.eq-art__petal {
  position: absolute;
  left: 41%;
  top: 2%;
  width: 18%;
  height: 48%;
  transform-origin: 50% 100%;
  rotate: var(--r);
  color: #4DA8FF;
}
.eq-art__petal svg { display: block; width: 100%; height: 100%; }

/* ---- it draws, then it turns ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ct-motion .eq-orb__ring { stroke-dashoffset: 1; }
  .ct-motion .eq-orb__body,
  .ct-motion .eq-orb__core,
  .ct-motion .eq-art__petal { opacity: 0; }

  /* `.is-in` is set on the SECTION by home-scenes.js, not on the revealed
     element -- scoping an entrance to the element itself leaves it at its
     start state for good. */
  .ct-motion .v2.is-in .eq-orb__ring {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s var(--ai-ease, cubic-bezier(.22, .61, .36, 1))
                calc(.2s + var(--i) * .22s);
  }
  .ct-motion .v2.is-in .eq-orb__core {
    opacity: 1; transition: opacity .8s ease .3s;
  }
  .ct-motion .v2.is-in .eq-art__petal {
    opacity: 1; transition: opacity .8s ease calc(.9s + var(--i) * .08s);
  }
  .ct-motion .v2.is-in .eq-orb__body {
    opacity: 1; transition: opacity .7s ease calc(1.5s + var(--i) * .16s);
    /* the light waits for its own orbit to exist, then keeps going */
    animation: eq-lap var(--d) linear infinite;
    animation-delay: var(--delay);
  }
  /* nothing moves while the section is off screen */
  .ct-motion .eq-open:not(.is-live) .eq-orb__body { animation-play-state: paused; }
}
@keyframes eq-lap { from { offset-distance: 0%; } to { offset-distance: 100%; } }

@media (max-width: 1023px) {
  .eq-art { width: min(100%, 340px); margin-top: clamp(20px, 4vw, 34px); }
}

/* -------------------------------------------------------------- 2 form --- */
.eq-start__head { max-width: 44rem; margin-bottom: clamp(26px, 3vw, 38px); }
.eq-start__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.eq-start__form { max-width: 62rem; }

/* A fieldset is the right element for a group of related controls -- it is
   what lets a screen reader announce "About you" with each field inside it --
   but browsers give it a border and odd default spacing, so it is reset to a
   plain block and the legend is styled as the heading it already is. */
.eq-group {
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  padding: 0;
  border: 0;
  min-width: 0;            /* a fieldset will not shrink in a grid without it */
}
.eq-group__legend {
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.eq-group__note {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- the areas of interest --------------------------------------------- */
.eq-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eq-pick .checkbox { align-items: flex-start; }
.eq-pick label { font-size: var(--text-sm); line-height: 1.45; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can see are hidden; a real visitor never reaches it, since it
   is aria-hidden and out of the tab order. */
.eq-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.eq-form { position: relative; }

/* --------------------------------------------------------------- 3 who --- */
.eq-who__head { max-width: 44rem; margin-bottom: clamp(26px, 3vw, 40px); }
.eq-whos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.eq-who {
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(37, 99, 235, .14), rgba(11, 22, 48, .3));
  border: 1px solid rgba(147, 197, 253, .22);
}
.eq-who h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: #FFFFFF;
}
.eq-who p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #C9D8EE;
}

/* -------------------------------------------------------------- 4 next --- */
.eq-next__head { max-width: 44rem; margin-bottom: clamp(26px, 3vw, 40px); }
.eq-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.eq-step { padding-top: 18px; border-top: 2px solid rgba(37, 99, 235, .22); }
.eq-step__n {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--brand-primary);
}
.eq-step h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
}
.eq-step p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.eq-next__reach {
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --------------------------------------------------------- responsive --- */
@media (max-width: 767px) {
  .eq-picks { grid-template-columns: minmax(0, 1fr); }
  .eq-group { margin-bottom: clamp(22px, 5vw, 30px); }
}