/* Generated from splport-dropdown-shared.html + splport-dropdown-adapters.html by build-bundle.js.
   Do not hand-edit; regenerate instead. */
/* ---- splport-dropdown-shared.html ---- */


/* ---------------------------------------------------------------------------
   1. TOKENS
   Declared on `body` so that a page scope (#splContactForm, #splApplyForm,
   .ue-role-combo, #spl-nav) can override them from the adapters file: those
   scopes are nearer ancestors, so their declarations win by inheritance. Do
   not move these onto .spl-premium-select itself, or element-level values
   would beat the page scopes.
   --------------------------------------------------------------------------- */
html body {
  /* Geometry. Defaults match /contact's .spl-contact-inp. */
  --splport-dd-inset: 17.5px;      /* border-box edge -> first text pixel */
  --splport-dd-bw: 1.5px;          /* trigger border width */
  --splport-dd-menu-bw: 1.5px;     /* menu border width */
  --splport-dd-menu-pad: 4px;      /* menu inner padding */
  --splport-dd-pad-y: 0.75rem;     /* trigger vertical padding */
  --splport-dd-opt-pad-y: 0.65rem; /* option vertical padding */
  --splport-dd-radius: 8px;
  --splport-dd-menu-radius: 10px;

  /* Colour. Three-colour palette only. */
  --splport-dd-ink:      var(--color-navy,   var(--navy,   #111437));
  --splport-dd-accent:   var(--color-orange, var(--orange, #E46021));
  --splport-dd-surface:  var(--color-tan,    var(--cream,  #FEF3EC));
  --splport-dd-ink-soft: rgba(17, 20, 55, 0.62);  /* placeholder  -> 4.89:1 on Tan */
  --splport-dd-ink-hint: rgba(17, 20, 55, 0.72);  /* option hint  -> 6.92:1 on Tan */
  --splport-dd-rule:     rgba(17, 20, 55, 0.12);
  --splport-dd-rule-strong: rgba(17, 20, 55, 0.32);

  /* Soft orange tint. The rgba line is the site's own idiom and is the
     fallback; the color-mix line overrides it where supported and is the
     idiom used by the ported /invest, /about and /in-the-news pages. A
     browser that cannot parse color-mix drops that declaration and keeps
     the rgba, so both paths resolve to the same colour. */
  --splport-dd-tint: rgba(228, 96, 33, 0.09);
  --splport-dd-tint: color-mix(in srgb, var(--color-orange, #E46021) 9%, transparent);
  --splport-dd-tint-strong: rgba(228, 96, 33, 0.14);
  --splport-dd-tint-strong: color-mix(in srgb, var(--color-orange, #E46021) 14%, transparent);
  --splport-dd-ring: rgba(228, 96, 33, 0.22);

  /* Motion. */
  --splport-dd-dur-fast: var(--dur-fast, 120ms);
  --splport-dd-dur-base: var(--dur-base, 200ms);
  --splport-dd-ease-out: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --splport-dd-ease-std: var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

/* ---------------------------------------------------------------------------
   2. THE NATIVE <select> IS THE VALUE CARRIER AND THE NO-JS FALLBACK
   The component never removes the native control; it visually hides it once
   the upgrade has succeeded. If the script never runs, or throws before this
   class is applied, the native <select> is still on the page, still focusable
   and still submits. Nothing here hides anything before that point.
   --------------------------------------------------------------------------- */
html body .spl-premium-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------------------
   3. ROOT
   margin-bottom is restated because `.spl-contact *{margin:0}` on /contact
   currently zeroes it, collapsing the gap under the enquiry-type field.
   --------------------------------------------------------------------------- */
html body .spl-premium-select {
  position: relative;
  min-width: 0;
  width: 100%;
  margin-bottom: var(--splport-dd-gap, 0);
}

/* ---------------------------------------------------------------------------
   4. TRIGGER
   padding-left = inset - border-width, so the value text lands exactly on
   --splport-dd-inset measured from the outer edge.
   --------------------------------------------------------------------------- */
html body .spl-premium-select-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--splport-dd-pad-y) calc(var(--splport-dd-inset) - var(--splport-dd-bw));
  border: var(--splport-dd-bw) solid var(--splport-dd-rule);
  border-radius: var(--splport-dd-radius);
  background-color: var(--splport-dd-surface);
  color: var(--splport-dd-ink);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--splport-dd-dur-fast) var(--splport-dd-ease-std),
    box-shadow   var(--splport-dd-dur-fast) var(--splport-dd-ease-std);
}

html body .spl-premium-select-trigger:hover {
  border-color: var(--splport-dd-rule-strong);
}

html body .spl-premium-select[data-open='true'] .spl-premium-select-trigger {
  outline: none;
  border-color: var(--splport-dd-accent);
  box-shadow: 0 0 0 3px var(--splport-dd-ring);
}

/* :focus-visible is kept in a rule of its own. CSS selector lists are NOT
   forgiving - one unknown selector invalidates every selector beside it - so
   grouping it with the [data-open] rule above would lose the open-state ring
   on any engine that does not implement it. */
html body .spl-premium-select-trigger:focus-visible {
  outline: none;
  border-color: var(--splport-dd-accent);
  box-shadow: 0 0 0 3px var(--splport-dd-ring);
}

/* Keyboard users on engines without :focus-visible still get a ring. */
html body .spl-premium-select-trigger:focus {
  outline: none;
  border-color: var(--splport-dd-accent);
}

/* No .error rule here on purpose. The pages own error colour lives in the
   apply embed (.spl-premium-select-trigger.error) at specificity (0,2,0),
   which outranks this file s (0,1,3), so it still applies. Emitting it again
   would put a fourth colour into a three-colour palette. */

/* ---------------------------------------------------------------------------
   5. VALUE AND PLACEHOLDER
   Weight is 400 everywhere. Reckless ships 300 and 400 only; the previous
   copies used 500, which the browser satisfies by synthesising a bold that
   does not exist in the family. 400 also matches the sibling text inputs,
   which declare no weight at all.
   --------------------------------------------------------------------------- */
html body .spl-premium-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--splport-dd-ink);
  font-weight: 400;
  line-height: 1.4;
}

html body .spl-premium-select-value[data-placeholder='true'] {
  color: var(--splport-dd-ink-soft);
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   6. CARET
   Navy, not orange. The caret sits next to small reading text; keeping it
   Navy holds the rule that Orange is tint, rule and indicator only.
   --------------------------------------------------------------------------- */
html body .spl-premium-select-caret {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-right: 1.5px solid var(--splport-dd-ink);
  border-bottom: 1.5px solid var(--splport-dd-ink);
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  transition: transform var(--splport-dd-dur-base) var(--splport-dd-ease-out);
}

html body .spl-premium-select[data-open='true'] .spl-premium-select-caret {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* ---------------------------------------------------------------------------
   7. MENU
   Tan, not literal white. Opens with a fade and a small rise from the top
   edge. Close is instant because the component's own script sets
   menu.hidden = true, which unmounts the element; that is the repository
   behaviour and is not something this stylesheet can slow down without
   editing the colleague's script.
   --------------------------------------------------------------------------- */
html body .spl-premium-select-menu {
  position: absolute;
  z-index: 70;
  inset-inline: 0;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: var(--menu-max-height, 22rem);
  margin: 0;
  padding: var(--splport-dd-menu-pad);
  overflow-y: auto;
  list-style: none;
  border: var(--splport-dd-menu-bw) solid var(--splport-dd-rule);
  border-radius: var(--splport-dd-menu-radius);
  background-color: var(--splport-dd-surface);
  box-shadow: 0 16px 40px rgba(17, 20, 55, 0.14);
  transform-origin: top center;
  animation: splport-dd-in var(--splport-dd-dur-base) var(--splport-dd-ease-out) both;
}

html body .spl-premium-select-menu[hidden] {
  display: none;
}

@keyframes splport-dd-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   8. OPTION
   padding-left = inset - menu border - menu padding, so the option label lands
   on the same --splport-dd-inset as the trigger value.
   Hover and keyboard highlight are the SAME treatment, and the transition in
   is zero-length: the client's complaint is that hover does not read, so it
   must land on the first frame. The 120ms only applies on the way out.
   --------------------------------------------------------------------------- */
html body .spl-premium-select-option {
  position: relative;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  border-radius: 6px;
  padding: var(--splport-dd-opt-pad-y)
           calc(var(--splport-dd-inset) - var(--splport-dd-menu-bw) - var(--splport-dd-menu-pad));
  background-color: transparent;
  color: var(--splport-dd-ink);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--splport-dd-accent);
  transition:
    background-color var(--splport-dd-dur-fast) var(--splport-dd-ease-std),
    box-shadow       var(--splport-dd-dur-fast) var(--splport-dd-ease-std);
}

html body .spl-premium-select-option:hover,
html body .spl-premium-select-option[data-highlighted='true'] {
  background-color: var(--splport-dd-tint);
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent);
  transition-duration: 0s;
}

/* Separate rule, deliberately. See the note on the trigger above: this is the
   highlight the client asked for, so it must not be collateral damage from an
   unknown :focus-visible. */
html body .spl-premium-select-option:focus-visible {
  background-color: var(--splport-dd-tint);
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent);
  outline: 2px solid var(--splport-dd-accent);
  outline-offset: -2px;
  transition-duration: 0s;
}

html body .spl-premium-select-option[aria-selected='true'] {
  background-color: var(--splport-dd-tint-strong);
}

html body .spl-premium-select-option[aria-selected='true']:hover,
html body .spl-premium-select-option[aria-selected='true'][data-highlighted='true'] {
  background-color: var(--splport-dd-tint-strong);
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent);
}

html body .spl-premium-select-option[aria-disabled='true'],
html body .spl-premium-select-option:disabled {
  color: rgba(17, 20, 55, 0.42);
  cursor: not-allowed;
  background-color: transparent;
  box-shadow: none;
}

html body .spl-premium-select-option:active {
  transform: scale(0.99);
}

html body .spl-premium-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.35;
}

/* Tick: Orange as a state indicator. Orange on Tan is 3.21:1, above the 3:1
   floor for non-text graphics. It is never the only signal - aria-selected
   and the stronger tint carry it too. */
html body .spl-premium-select-check {
  width: 0.8rem;
  height: 0.45rem;
  border-left: 2px solid var(--splport-dd-accent);
  border-bottom: 2px solid var(--splport-dd-accent);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}

@media (max-width: 768px) {
  html body .spl-premium-select-option { min-height: 48px; }
  html body .spl-premium-select-option-label { white-space: normal; overflow: visible; }
}

/* ---------------------------------------------------------------------------
   9. GENERIC LINK-MENU SURFACE
   Used by the header nav adapter. Same grammar, menu semantics, no listbox.
   --------------------------------------------------------------------------- */
html body .splport-dd-panel {
  padding: var(--splport-dd-menu-pad);
  border: var(--splport-dd-menu-bw) solid var(--splport-dd-rule);
  border-radius: 12px;
  background-color: var(--splport-dd-surface);
  box-shadow: 0 16px 40px rgba(17, 20, 55, 0.14);
  transform-origin: top center;
}

html body .splport-dd-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(var(--splport-dd-inset) - var(--splport-dd-menu-bw) - var(--splport-dd-menu-pad));
  border-radius: 8px;
  color: var(--splport-dd-ink);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: inset 0 0 0 0 var(--splport-dd-accent);
  transition:
    background-color var(--splport-dd-dur-fast) var(--splport-dd-ease-std),
    box-shadow       var(--splport-dd-dur-fast) var(--splport-dd-ease-std);
}

html body .splport-dd-link:hover,
html body .splport-dd-link[data-highlighted='true'] {
  background-color: var(--splport-dd-tint);
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent);
  transition-duration: 0s;
}

/* Separate rule: an unknown :focus-visible must not take the hover with it. */
html body .splport-dd-link:focus-visible {
  background-color: var(--splport-dd-tint);
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent);
  outline: 2px solid var(--splport-dd-accent);
  outline-offset: -2px;
  transition-duration: 0s;
}

html body .splport-dd-link[aria-current='page'] {
  background-color: var(--splport-dd-tint-strong);
}

/* ---------------------------------------------------------------------------
   10. REDUCED MOTION
   State still changes; only the animation is removed.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body .spl-premium-select-caret,
  html body .spl-premium-select-option,
  html body .spl-premium-select-trigger,
  html body .splport-dd-link {
    transition: none;
  }
  html body .spl-premium-select-menu {
    animation: none;
  }
}


/* ---- splport-dropdown-adapters.html ---- */


/* ===========================================================================
   ADAPTER A - HEADER NAV DROPDOWNS  (#spl-nav .nb-drop, Borrow and Invest)
   Present on every page. This is the client's main complaint.

   WHAT IS ACTUALLY WRONG TODAY, measured from the served CSS:
     #spl-nav .nb-drop a:hover { background: var(--cream); }
   --cream is #FEF3EC. The panel behind it is ALSO #FEF3EC, because
   style#spl-site-palette-rollout sets
     background-color: var(--spl-color-tan,#FEF3EC) !important
   on #spl-nav .nb-drop. Tan on Tan is 1.00:1. The hover is not weak; it is
   literally invisible. That is the whole complaint.

   The open/close "animation" is a 180ms opacity/visibility fade with
   transform: translateY(6px), i.e. the panel slides DOWN into place from
   above its resting position, with no transform-origin and the same duration
   both ways.

   PROGRESSIVE ENHANCEMENT - read this before changing anything:
   The panel's collapsed state (opacity:0; visibility:hidden) is the
   colleague's existing CSS and is revealed by :hover alone, with no
   JavaScript. This adapter does NOT add any new hiding and does NOT gate the
   reveal behind a JS class - doing so would BREAK the working no-JS menu. It
   ADDS :focus-within to the same reveal rule, which makes the menu keyboard
   reachable with JavaScript entirely absent. The [data-splport-dd-open]
   selector is a third, additive way in, used only when the controller is
   running. Frozen animation clock: the reveal is driven by opacity and
   visibility, both of which are also set in the non-transitioned state, so a
   halted transition leaves the panel at its final value, not invisible.
   =========================================================================== */

html body #spl-nav {
  --splport-dd-inset: 17.5px;
  --splport-dd-menu-bw: 1.5px;
  --splport-dd-menu-pad: 4px;
}

/* The panel. Rises into place from the top edge on open, and leaves faster
   than it arrives: the closed state carries --dur-fast, the open state
   overrides it with --dur-base. */
html body #spl-nav .nb-drop {
  padding: var(--splport-dd-menu-pad);
  border: var(--splport-dd-menu-bw) solid var(--splport-dd-rule, rgba(17, 20, 55, 0.12));
  border-radius: 12px;
  background-color: var(--splport-dd-surface, #FEF3EC);
  box-shadow: 0 16px 40px rgba(17, 20, 55, 0.14);
  min-width: 232px;
  transform-origin: top center;
  transform: translateY(-6px) scale(0.985);
  transition:
    opacity    var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    transform  var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1));
}

html body #spl-nav .nb-item:hover > .nb-drop,
html body #spl-nav .nb-item[data-splport-dd-open='true'] > .nb-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-duration: var(--splport-dd-dur-base, 200ms);
  transition-timing-function: var(--splport-dd-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* :focus-within lives in its own rule ON PURPOSE. CSS selector lists are not
   forgiving: a single unrecognised selector invalidates the whole list. Had
   this been grouped with the :hover rule above, an engine without
   :focus-within would drop the reveal entirely and the menu would never open.
   Split, the worst case is only that keyboard reveal is unavailable there. */
html body #spl-nav .nb-item:focus-within > .nb-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-duration: var(--splport-dd-dur-base, 200ms);
  transition-timing-function: var(--splport-dd-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* The links. display:flex must carry !important because the embed declares
   `display:block !important` on the same element. */
html body #spl-nav .nb-drop a {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(var(--splport-dd-inset) - var(--splport-dd-menu-bw) - var(--splport-dd-menu-pad));
  border-radius: 8px;
  color: var(--splport-dd-ink, #111437) !important;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 0 var(--splport-dd-accent, #E46021);
  transition:
    background-color var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow       var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1));
}

/* The fix for the invisible hover. Soft orange tint plus a 3px orange rule,
   landing on the first frame (transition-duration: 0s on the way in, 120ms on
   the way out). Text stays Navy: Navy on the tinted Tan is 14.82:1. */
html body #spl-nav .nb-drop a:hover,
html body #spl-nav .nb-drop a[data-highlighted='true'] {
  background-color: var(--splport-dd-tint, rgba(228, 96, 33, 0.09));
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent, #E46021);
  color: var(--splport-dd-ink, #111437) !important;
  transition-duration: 0s;
}

/* Separate rule: see the note on :focus-within above. This one carries the
   client-visible hover fix, so it must survive an unknown :focus-visible. */
html body #spl-nav .nb-drop a:focus-visible {
  background-color: var(--splport-dd-tint, rgba(228, 96, 33, 0.09));
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent, #E46021);
  color: var(--splport-dd-ink, #111437) !important;
  outline: 2px solid var(--splport-dd-accent, #E46021);
  outline-offset: -2px;
  transition-duration: 0s;
}

/* Chevron follows the same three open conditions as the panel. */
html body #spl-nav .nb-item[data-splport-dd-open='true'] > button .nb-chevron {
  transform: rotate(180deg);
}

html body #spl-nav .nb-item:focus-within > button .nb-chevron {
  transform: rotate(180deg);
}

html body #spl-nav .nb-chevron {
  transition: transform var(--splport-dd-dur-base, 200ms) var(--splport-dd-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Trigger focus must be visible against the navy bar. */
html body #spl-nav .nb-item > button:focus-visible {
  outline: 2px solid var(--splport-dd-accent, #E46021);
  outline-offset: -4px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html body #spl-nav .nb-drop,
  html body #spl-nav .nb-drop a,
  html body #spl-nav .nb-chevron {
    transition: none;
  }
  html body #spl-nav .nb-drop {
    transform: none;
  }
}

/* ===========================================================================
   ADAPTER B - /apply-for-a-loan

   B1. The premium selects (#splApplyForm select.apply-select, upgraded by
       script#spl-premium-select-script).
       Sibling field metrics, from the embed:
         .ue-input,.ue-select,.ue-textarea { border:1px; padding:11px 12px }
       so sibling text starts at 1 + 12 = 13px from the outer edge.
       The page's own premium copy used border:1px; padding:.7rem .85rem,
       i.e. 1 + 13.6 = 14.6px - 1.6px adrift. Setting the inset to 13px makes
       the shared file compute padding-left: 12px and land it exactly.

   B2. The bespoke enquiry-type combobox (.ue-role-combo). Kept bespoke: it
       carries two-line options (label + hint) that the PremiumSelect port does
       not support, and the coordinator's rule is to upgrade existing markup
       rather than replace it. Only its colour and alignment change.
   =========================================================================== */

html body #splApplyForm {
  --splport-dd-inset: 13px;
  --splport-dd-bw: 1px;
  --splport-dd-menu-bw: 1px;
  --splport-dd-menu-pad: 4px;
  --splport-dd-pad-y: 11px;
  --splport-dd-opt-pad-y: 10px;
  --splport-dd-radius: 5px;
  --splport-dd-menu-radius: 6px;
  --splport-dd-gap: 0;
}

/* .ue-input declares font-size:1rem !important, so matching it needs the
   same weight of declaration. min-height 46px matches the sibling inputs and
   still clears the 44px floor. */
html body #splApplyForm .spl-premium-select-trigger {
  font-size: 1rem !important;
  min-height: 46px;
}

html body #splApplyForm .spl-premium-select-option {
  font-size: 1rem;
  min-height: 46px;
}

/* ---- B2. .ue-role-combo ------------------------------------------------- */

html body .ue-role-combo {
  --splport-dd-inset: 13px;
  --splport-dd-menu-bw: 1px;
  --splport-dd-menu-pad: 5px;
}

html body .ue-role-combo .ue-role-trigger {
  min-height: 56px;
  padding: 10px calc(var(--splport-dd-inset) - 1px);
  background-color: var(--splport-dd-surface, #FEF3EC);
  color: var(--splport-dd-ink, #111437);
}

html body .ue-role-combo .ue-role-current strong,
html body .ue-role-combo .ue-role-option strong {
  font-weight: 400;
  line-height: 1.35;
}

html body .ue-role-combo .ue-role-current span,
html body .ue-role-menu .ue-role-option span {
  color: var(--splport-dd-ink-hint, rgba(17, 20, 55, 0.72));
  line-height: 1.35;
}

/* The caret glyph was orange (#E46021 text on Tan is 3.21:1 and fails small
   text). Navy is 16.32:1. */
html body .ue-role-combo .ue-role-caret {
  color: var(--splport-dd-ink, #111437);
}

html body .ue-role-combo .ue-role-menu {
  padding: var(--splport-dd-menu-pad);
  border: var(--splport-dd-menu-bw) solid var(--splport-dd-rule, rgba(17, 20, 55, 0.12));
  border-radius: var(--splport-dd-menu-radius, 6px);
  background-color: var(--splport-dd-surface, #FEF3EC);
  box-shadow: 0 16px 40px rgba(17, 20, 55, 0.14);
  transform-origin: top center;
}

html body .ue-role-menu .ue-role-option {
  position: relative;
  min-height: 46px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: calc(var(--splport-dd-inset) - var(--splport-dd-menu-bw) - var(--splport-dd-menu-pad));
  padding-right: 34px;
  background-color: transparent;
  color: var(--splport-dd-ink, #111437);
}

/* THE GREEN, AND WHY THE TINT IS PAINTED ON A PSEUDO-ELEMENT.
   The old highlight was `background: rgba(180,206,191,.34)`. It is gone.
   It cannot simply be replaced, because <style id="spl-site-palette-rollout">
   already sets `background-color: ... !important` on .ue-role-option at a
   specificity of (4,1,2) - which means the green hover does not render on the
   live page at all today, and neither would a plain orange replacement.
   Rather than escalate a !important specificity war against a block this task
   is not allowed to edit, the tint is painted on ::before, which that rule
   does not match. Same result, no arms race, and it survives if the rollout
   block is ever revised. */
html body .ue-role-menu .ue-role-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  box-shadow: inset 0 0 0 0 var(--splport-dd-accent, #E46021);
  pointer-events: none;
  transition:
    background-color var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow       var(--splport-dd-dur-fast, 120ms) var(--splport-dd-ease-std, cubic-bezier(0.4, 0, 0.2, 1));
}

html body .ue-role-menu .ue-role-option:hover::before,
html body .ue-role-menu .ue-role-option[data-highlighted='true']::before {
  background-color: var(--splport-dd-tint, rgba(228, 96, 33, 0.09));
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent, #E46021);
  transition-duration: 0s;
}

/* Separate rule: see the note on :focus-within in adapter A. */
html body .ue-role-menu .ue-role-option:focus-visible::before {
  background-color: var(--splport-dd-tint, rgba(228, 96, 33, 0.09));
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent, #E46021);
  transition-duration: 0s;
}

html body .ue-role-menu .ue-role-option[aria-selected='true']::before {
  background-color: var(--splport-dd-tint-strong, rgba(228, 96, 33, 0.14));
}

html body .ue-role-menu .ue-role-option[aria-selected='true']:hover::before,
html body .ue-role-menu .ue-role-option[aria-selected='true'][data-highlighted='true']::before {
  background-color: var(--splport-dd-tint-strong, rgba(228, 96, 33, 0.14));
  box-shadow: inset 3px 0 0 0 var(--splport-dd-accent, #E46021);
}

/* Keep the label and hint above the tint layer. ::before and the existing
   ::after tick are both position:absolute with z-index:auto, so they paint in
   tree order below these z-index:1 children. */
html body .ue-role-menu .ue-role-option > strong,
html body .ue-role-menu .ue-role-option > span {
  position: relative;
  z-index: 1;
}

html body .ue-role-menu .ue-role-option:focus-visible {
  outline: 2px solid var(--splport-dd-accent, #E46021);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  html body .ue-role-menu .ue-role-option::before { transition: none; }
}

/* ===========================================================================
   ADAPTER C - /contact

   THE PADDING DEFECT, EXACTLY.
   Sibling field, declared in the page's body <style>:
     .spl-contact-inp { border: 1.5px solid rgba(17,20,55,.12); padding: .75rem 1rem; }
     -> placeholder text begins at 1.5 + 16 = 17.5px from the outer edge.
   Enquiry-type trigger, injected into the document head by the page's own script:
     .spl-premium-select-trigger { border: 1.5px; padding: .75rem 1rem; }
     -> should also be 17.5px, but the page's body <style> carries
        .spl-contact * { box-sizing: border-box; margin: 0; padding: 0; }
        at the SAME specificity (0,1,0) and LATER in document order, so it wins.
     -> rendered padding-left is 0, and the text begins at 1.5px.
   That 16px gap is what the screenshot shows. The same reset also zeroes
   .spl-premium-select-menu{padding:4px} and .spl-premium-select-option
   {padding:.65rem .75rem}, which is why the open menu has the identical
   problem, and zeroes .spl-premium-select{margin-bottom:.75rem}, which is why
   that field has no gap beneath it.

   The fix is in the shared file, not here: every rule there is prefixed
   `html body`, giving (0,1,3), which beats `.spl-contact *` at (0,1,0) on
   specificity and so does not depend on document order at all. This adapter
   only supplies the numbers.

     inset 17.5px, trigger border 1.5px  -> trigger padding-left 16px  -> 17.5px
     inset 17.5px, menu border 1.5px, menu padding 4px
                                        -> option padding-left 12px   -> 17.5px
   Trigger value text and option label text now share the 17.5px left edge of
   "First and last name" and "you@example.com".
   =========================================================================== */

html body #splContactForm {
  --splport-dd-inset: 17.5px;
  --splport-dd-bw: 1.5px;
  --splport-dd-menu-bw: 1.5px;
  --splport-dd-menu-pad: 4px;
  --splport-dd-pad-y: 0.75rem;
  --splport-dd-opt-pad-y: 0.65rem;
  --splport-dd-radius: 8px;
  --splport-dd-menu-radius: 10px;
  --splport-dd-gap: 0.75rem;
}

html body #splContactForm .spl-premium-select-trigger,
html body #splContactForm .spl-premium-select-option {
  font-size: 0.88rem;
}

/* The native <select> is the no-JS fallback and the value carrier. It already
   declares padding:.75rem 1rem with a 1.5px border, so it is on the same
   17.5px edge; this restates it so the .spl-contact * reset cannot take it
   away if the rules are ever reordered. It is never replaced by a div. */
html body #splContactForm select.spl-contact-select {
  padding: 0.75rem 2.5rem 0.75rem calc(var(--splport-dd-inset) - var(--splport-dd-bw));
  border-width: var(--splport-dd-bw);
  min-height: 44px;
}

html body #splContactForm .spl-contact-inp {
  min-height: 44px;
}