/**
 * Palmer Form Widget Styles
 * File: assets/css/palmer-form-widget.css
 */

/* ── STEP VISIBILITY ─────────────────────────────────────────── */

.palmer-form__step--hidden {
    display: none !important;
}

/* ── SCROLL ANCHORING ────────────────────────────────────────── */
/* On every step change the JS scrolls this section to the top of the viewport.
   `scroll-margin-top` defines the gap left above it — i.e. exactly where the top
   of the form "lands". Override --palmer-scroll-offset on sites with a fixed /
   sticky header (e.g. set it to header height + a little breathing room) so the
   form isn't tucked underneath that header. */

/* Opt the form out of the browser's scroll anchoring.

   The FAQ panel expands ABOVE the fields. When a block grows above content the
   browser is watching, Chrome/Edge/Firefox silently scroll the page down by the
   same amount so that content stays visually still — which drags the step title
   and the left rail up off the top of the screen. That is scroll anchoring doing
   what it is designed to do, and it is the wrong call here: this form's top edge
   should never move, and an opening panel should simply extend downward.

   overflow-anchor:none excludes the element and its subtree from being chosen as
   an anchor, so no compensation happens. Safari has never implemented scroll
   anchoring, so this is a no-op there — and Safari never had the jump. */
.palmer-form-section,
.palmer-form-section .palmer-form-inner,
.palmer-form-section .palmer-form,
.palmer-form-section .palmer-form__step,
.palmer-form-section .palmer-faq-panel,
.palmer-form-section .palmer-field-wrap {
    overflow-anchor: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HARD WIDTH FORCE  —  form is ALWAYS the full container width on EVERY step
   ----------------------------------------------------------------------------
   The form renders as a flex CHILD of its Elementor container
   (.elementor-widget-palmer_form_widget). Elementor's default container is a
   flexbox; when its items aren't aligned 'stretch', the child sizes to the
   VISIBLE step's content — so short steps (select-only step, review step, the
   success/submit screen) collapse the whole form. A percentage width on inner
   elements cannot fix this: it's only 100% of an already-shrunk wrapper. The
   fix has to land on the widget wrapper itself, forcing it to stretch and
   refusing to shrink to content. (No flex-grow, so it never stretches tall.) */
.elementor-widget-palmer_form_widget,
.elementor-widget-palmer_form_widget > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.elementor-widget-palmer_form_widget {
    align-self: stretch !important;   /* fill width in a column container, whatever its align-items */
    flex-shrink: 0 !important;        /* never collapse below full width in a row container */
}

.palmer-form-section {
    scroll-margin-top: var(--palmer-scroll-offset, 32px);

    /* ── WIDTH LOCK ───────────────────────────────────────────────
       Keep the form at the FULL width of its Elementor container on every
       step. Elementor's containers are flexbox by default, which makes this
       section a flex item; without an explicit width it shrinks to fit the
       *visible* step's content, so short steps (a select-only step, the
       review step, the success/submit screen) render narrower than the rest.
       width:100% forces it to always fill the container width set in Elementor. */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Belt-and-suspenders: every element in the form's structural chain spans the
   full width too, so a single short step can never collapse the layout even if
   the theme/Elementor turns one of them into a flex item. NOTE: the sidebar's
   .palmer-form-inner is intentionally left out — it keeps its own flex sizing
   (flex:1) defined in the SIDEBAR LAYOUT block below. */
.palmer-form,
.palmer-form__step,
.palmer-form__response,
.palmer-form__response > .palmer-success {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── SIDEBAR LAYOUT ─────────────────────────────────────────── */

.palmer-form-section--has-sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

.palmer-form-section--has-sidebar .palmer-form-inner {
    flex: 1 !important;
    min-width: 0 !important;
}

/* ── SIDEBAR NAV ─────────────────────────────────────────────── */

.palmer-form-sidebar {
    width: 190px !important;
    flex-shrink: 0 !important;
    margin-right: 48px !important;
    padding-top: 6px !important;
}

.palmer-sidebar-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    position: relative !important;
}

/* ── Clickable rail ────────────────────────────────────────────────
   Reachable steps invite the click; steps beyond the furthest one reached stay
   muted, because clicking those only walks you to whatever is unfinished. */
.palmer-sidebar-item--nav { cursor: pointer !important; }

.palmer-sidebar-item--nav:hover .palmer-sidebar-item__label {
    color: #222222 !important;
}
.palmer-sidebar-item--nav:hover .palmer-sidebar-item__circle {
    border-color: #87D2D2 !important;
}
.palmer-sidebar-item--nav:hover .palmer-sidebar-item__dot {
    background: #87D2D2 !important;
}
/* The current step is already filled — don't recolour its dot on hover. */
.palmer-sidebar-item--nav.palmer-sidebar-item--active:hover .palmer-sidebar-item__dot {
    background: #ffffff !important;
}

.palmer-sidebar-item--nav:focus { outline: none !important; }
.palmer-sidebar-item--nav:focus-visible {
    outline: 2px solid #87D2D2 !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

/* Not yet unlocked: quieter, and the circle reads as an outline waiting to be
   filled rather than a target. */
.palmer-sidebar-item--locked .palmer-sidebar-item__label {
    color: #b4b4b4 !important;
}
.palmer-sidebar-item--locked .palmer-sidebar-item__circle {
    border-style: dashed !important;
    border-color: #d8d8d8 !important;
}
.palmer-sidebar-item--nav.palmer-sidebar-item--locked:hover .palmer-sidebar-item__label {
    color: #7d7d7d !important;
}
.palmer-sidebar-item--nav.palmer-sidebar-item--locked:hover .palmer-sidebar-item__circle {
    border-color: #bdbdbd !important;
}
.palmer-sidebar-item--nav.palmer-sidebar-item--locked:hover .palmer-sidebar-item__dot {
    background: transparent !important;
}

.palmer-sidebar-item__track {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.palmer-sidebar-item__circle {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 2px solid #d0d0d0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: border-color 0.25s, background 0.25s !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

.palmer-sidebar-item__dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: background 0.25s !important;
    display: block !important;
}

.palmer-sidebar-item__line {
    width: 2px !important;
    height: 44px !important;
    background: #d0d0d0 !important;
    flex-shrink: 0 !important;
    transition: background 0.25s !important;
}

.palmer-sidebar-item__label {
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    color: #999999 !important;
    line-height: 1.2 !important;
    padding-top: 4px !important;
    transition: color 0.25s !important;
    display: block !important;
    /* Keep long titles ("Specify Diameter & Mounting System") inside the rail.
       The mobile rule has always said this; the desktop one relied on default
       flex-item sizing, which is one element swap away from breaking. */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

/* Active step */
.palmer-sidebar-item--active .palmer-sidebar-item__circle {
    border-color: #87D2D2 !important;
    background: #87D2D2 !important;
}

.palmer-sidebar-item--active .palmer-sidebar-item__dot {
    background: #ffffff !important;
}

.palmer-sidebar-item--active .palmer-sidebar-item__label {
    color: #222222 !important;
    font-weight: 500 !important;
}

/* Done steps */
.palmer-sidebar-item--done .palmer-sidebar-item__circle {
    border-color: #87D2D2 !important;
    background: #ffffff !important;
}

.palmer-sidebar-item--done .palmer-sidebar-item__dot {
    background: #87D2D2 !important;
}

.palmer-sidebar-item--done .palmer-sidebar-item__line {
    background: #87D2D2 !important;
}

.palmer-sidebar-item--done .palmer-sidebar-item__label {
    color: #555555 !important;
}

/* Hide inline progress circles when sidebar is active */
.palmer-form-section--has-sidebar .desktop-progress-bar,
.palmer-form-section--has-sidebar .mobile-step-progress,
.palmer-form-section--has-sidebar .step-progress {
    display: none !important;
}

/* ── NEXT BUTTON — sidebar mode teal link ───────────────────── */

.palmer-form-section--has-sidebar .palmer-form__nav {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 50px 0 20px !important;
    gap: 40px !important;
    padding: 0 !important;
}

/* First-step nav (no Previous button) — Next still sits at the right */
.palmer-form-section--has-sidebar .palmer-form__nav:not(:has(.btn-go-back)) {
    justify-content: flex-end !important;
}

/* ── PREV / NEXT LINK BUTTONS (image-style, with sliding underline) ── */
/* Scoped to DIRECT children of the nav so the last-step Previous button
   (which lives inside .form-btm > .form-btn-contain alongside the submit
   button) keeps its existing palmer-b-button styling. */

.palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back,
.palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link {
    position: relative !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 6px !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    text-decoration: none !important;
    overflow: visible !important;
    transition: color 0.3s ease !important;
}

.palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back:hover,
.palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link:hover {
    background: none !important;
    border: none !important;
    opacity: 1 !important;
    color: #000 !important;
}

/* Arrow icons on the nav buttons — left arrow on Previous, right arrow on Next.
   (Previously the Previous icon was hidden; now both show, sized to match.) */
.palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back svg,
.palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link svg {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
    transition: transform 0.3s ease !important;
}

/* ── SLIDING UNDERLINE ANIMATION ─────────────────────────────── */
/*
 * The underline is a real child <span class="palmer-nav-underline"> injected
 * by JS (see initNavUnderlineState) — using a real element instead of ::after
 * sidesteps any possibility of theme/parent CSS hiding a pseudo-element, and
 * makes the underline easy to inspect in DevTools.
 *
 * Choreography:
 *   IDLE: underline sits under Next (scaleX 1, origin right).
 *   HOVER PREVIOUS: Next's underline exits LEFT; Previous's enters from RIGHT.
 *   UNHOVER PREVIOUS: Previous's exits LEFT; Next's enters from LEFT.
 *   HOVER NEXT: Next's exits RIGHT.
 *   UNHOVER NEXT: Next's enters from RIGHT.
 *
 * Pure CSS can't distinguish "just left Next" from "just left Previous", so JS
 * tracks the last interaction via data-palmer-nav-state, and the CSS rules
 * below select on that attribute.
 */

.palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back .palmer-nav-underline,
.palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link .palmer-nav-underline {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: #87D2D2 !important;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) !important;
    pointer-events: none !important;
    display: block !important;
    z-index: 1 !important;
}

/* ── Defaults: Next shown (origin right), Previous hidden (origin left) ── */
.palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link .palmer-nav-underline {
    transform: scaleX(1) !important;
    transform-origin: right center !important;
}
.palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back .palmer-nav-underline {
    transform: scaleX(0) !important;
    transform-origin: left center !important;
}

/* ── State: pointer over Previous ── */
.palmer-form__nav[data-palmer-nav-state="prev-hover"] > .palmer-next-link .palmer-nav-underline {
    transform: scaleX(0) !important;
    transform-origin: left center !important;  /* exit out the LEFT of Next */
}
.palmer-form__nav[data-palmer-nav-state="prev-hover"] > .btn-go-back .palmer-nav-underline {
    transform: scaleX(1) !important;
    transform-origin: right center !important; /* enter from the RIGHT of Previous */
}

/* ── State: just left Previous → Previous's underline exits to the RIGHT,
   Next's underline enters from the LEFT ── */
.palmer-form__nav[data-palmer-nav-state="from-prev"] > .btn-go-back .palmer-nav-underline {
    transform: scaleX(0) !important;
    transform-origin: right center !important; /* exit out the RIGHT of Previous */
}
.palmer-form__nav[data-palmer-nav-state="from-prev"] > .palmer-next-link .palmer-nav-underline {
    transform: scaleX(1) !important;
    transform-origin: left center !important;  /* enter from the LEFT of Next */
}

/* ── State: pointer over Next → underline exits off the RIGHT ── */
.palmer-form__nav[data-palmer-nav-state="next-hover"] > .palmer-next-link .palmer-nav-underline {
    transform: scaleX(0) !important;
    transform-origin: right center !important;
}

/* ── State: just left Next → underline re-enters from the RIGHT ── */
.palmer-form__nav[data-palmer-nav-state="from-next"] > .palmer-next-link .palmer-nav-underline {
    transform: scaleX(1) !important;
    transform-origin: right center !important;
}

.palmer-next-arrow {
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ── FORM BOX ───────────────────────────────────────────────── */

.palmer-form__step {
    background: rgba(255, 255, 255, 0.40);
    border: none;
    margin: 0 0 50px 0;
    padding: 40px;
}

/* ── STEP TITLE ─────────────────────────────────────────────── */

.palmer-form__step h4 {
    background: transparent;
    position: relative;
    top: 0;
    color: #000;
    font-family: "Baskervvile", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    text-transform: capitalize;
    padding: 38px 0;
    margin: 0;
}

.palmer-form__step-desc {
    color: rgba(0, 0, 0, 0.60);
    font-family: Jost, sans-serif;
    font-size: 18px;
    margin: 0 0 20px;
}

/* ── FIELD WRAPPER ──────────────────────────────────────────── */

.palmer-field-wrap {
    margin-bottom: 35px;
}

.palmer-field-wrap--conditional-hidden {
    display: none !important;
}

/* ── LABELS ─────────────────────────────────────────────────── */

.palmer-form__step label,
.palmer-field-label {
    display: block;
    font-family: Jost, sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.60);
    margin-bottom: 6px;
}

.palmer-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.palmer-label-row label,
.palmer-label-row .palmer-field-label {
    margin-bottom: 0;
}

.palmer-popup-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.40);
    transition: color 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.palmer-popup-eye:hover { color: #87D2D2; }
.palmer-popup-eye svg { width: 20px; height: 20px; display: block; }

/* ── FIELD POPUP OVERLAY ────────────────────────────────────── */

.palmer-field-popup-overlay {
    /* Always laid out; opacity/visibility/pointer-events gate it so BOTH the
       open and the close can animate (display:none can do neither). */
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    /* closed state: delay visibility:hidden until the fade-out finishes */
    transition: background 260ms ease, opacity 200ms ease,
                -webkit-backdrop-filter 260ms ease, backdrop-filter 260ms ease,
                visibility 0s linear 260ms;
}

.palmer-field-popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: background 260ms ease, opacity 200ms ease,
                -webkit-backdrop-filter 260ms ease, backdrop-filter 260ms ease,
                visibility 0s linear 0s;
}

.palmer-field-popup-box {
    background: #fff;
    max-width: 560px;
    width: 90%;
    padding: 32px;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    /* Closed / exit state: nudged down, slightly small + faded. Exit is quick
       and crisp. NOTE: no `filter` here on purpose — the box's filter is force-
       cleared in JS to kill a mu-plugin drop-shadow, so the animation can't use it. */
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 1, 1),
                opacity 180ms ease;
    will-change: transform, opacity;
}

.palmer-field-popup-box img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.palmer-field-popup-box p {
    font-family: Jost, sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.70);
    margin: 0;
    line-height: 1.6;
}

.palmer-field-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: rgba(0,0,0,0.50);
    padding: 0;
    font-family: Jost, sans-serif;
}

.palmer-field-popup-close:hover { color: #000; }

/* ── POPUP OPEN / CLOSE ANIMATION ───────────────────────────── */
/* On the way IN the box rises and fades into place on a smooth professional
   decel (easeOutExpo), lightly staggered behind the backdrop. No bounce.
   Exit reverses on the crisp ease in the base rule above. */
.palmer-field-popup-overlay.is-open .palmer-field-popup-box {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1) 40ms,
                opacity 300ms ease 40ms;
}

@media (prefers-reduced-motion: reduce) {
    .palmer-field-popup-overlay,
    .palmer-field-popup-overlay.is-open,
    .palmer-field-popup-box,
    .palmer-field-popup-overlay.is-open .palmer-field-popup-box {
        transition: opacity 120ms linear !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ── ROW TABLE: TH POPUP BUTTON ─────────────────────────────── */

.palmer-row-table__th-inner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.palmer-row-table__th-popup {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: inherit !important;
    opacity: 0.55 !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    transition: opacity 0.15s !important;
}

.palmer-row-table__th-popup:hover { opacity: 1 !important; }

.palmer-row-table__th-popup svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
}

/* ── ROW TABLE: LOCKED FIELD STATE ──────────────────────────── */

/* Align all cells to top so a hint in one td doesn't shift others */
.palmer-row-table__row td {
    vertical-align: top !important;
}

/* Required column asterisk in header */
.palmer-row-table__th-req {
    color: #e53e3e;
    margin-left: 2px;
}

/* Recommendation hint — sits below the field, non-blocking */
.palmer-row-table__row--locked td {
    padding-bottom: 20px !important;
}

.palmer-recommend-hint {
    display: block !important;
    font-family: Jost, sans-serif !important;
    font-size: 10px !important;
    color: #2b7a5a !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    pointer-events: none !important;
    font-variant: small-caps !important;
    font-feature-settings: "smcp" !important;
    letter-spacing: 0.12em !important;
}

/* Keep lock-hint style for backward compat, but green now means recommend */
.palmer-lock-hint {
    display: block !important;
    font-family: Jost, sans-serif !important;
    font-size: 10px !important;
    color: #2b7a5a !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    pointer-events: none !important;
    font-variant: small-caps !important;
    font-feature-settings: "smcp" !important;
    letter-spacing: 0.12em !important;
}

/* ── TEXT / EMAIL / TEL / NUMBER / URL INPUTS ───────────────── */

.palmer-form input[type=text],
.palmer-form input[type=email],
.palmer-form input[type=tel],
.palmer-form input[type=number],
.palmer-form input[type=url] {
    width: 100% !important;
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    color: rgba(0, 0, 0, 0.60) !important;
    font-weight: 400 !important;
    padding: 5px 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
}

.palmer-form input[type=text]:focus,
.palmer-form input[type=email]:focus,
.palmer-form input[type=tel]:focus,
.palmer-form input[type=number]:focus,
.palmer-form input[type=url]:focus {
    border-bottom-color: #87D2D2 !important;
    outline: none !important;
    box-shadow: none !important;
}

.palmer-form input[type=text]::placeholder,
.palmer-form input[type=email]::placeholder,
.palmer-form input[type=tel]::placeholder,
.palmer-form input[type=number]::placeholder,
.palmer-form input[type=url]::placeholder {
    color: rgba(0, 0, 0, 0.60) !important;
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
}

/* ── DATEPICKER ─────────────────────────────────────────────── */

.palmer-form input[type=text].palmer-datepicker { cursor: pointer; }
.palmer-datepicker-wrap { position: relative; }

.ui-datepicker {
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    padding: 12px !important;
    background: #fff !important;
    z-index: 100000 !important;
}

.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 0 !important;
    padding: 4px 0 10px !important;
    font-family: Jost, sans-serif !important;
    color: #000 !important;
    font-weight: 500 !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { top: 4px !important; cursor: pointer !important; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    font-size: 18px;
    color: #000;
}

.ui-datepicker td a,
.ui-datepicker td span {
    font-family: Jost, sans-serif !important;
    border-radius: 0 !important;
    text-align: center !important;
}

.ui-datepicker td a:hover { background: #87D2D2 !important; color: #fff !important; border: none !important; }
.ui-datepicker .ui-state-active { background: #87D2D2 !important; color: #fff !important; border: none !important; }

/* ── TEXTAREA ──────────────────────────────────────────────── */

.palmer-form textarea {
    width: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.80) !important;
    border-radius: 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    color: rgba(0, 0, 0, 0.60) !important;
    font-weight: 400 !important;
    padding: 5px !important;
    outline: none !important;
    resize: vertical;
    transition: border-color 0.2s;
}

.palmer-form textarea:focus { border-color: #87D2D2 !important; }
.palmer-form textarea::placeholder { color: rgba(0, 0, 0, 0.60) !important; font-size: 24px !important; }

/* ── reCAPTCHA token textarea ──────────────────────────────
   Google injects a hidden <textarea class="g-recaptcha-response"> (inline
   display:none) to hold the verification token. The broad mobile rule
   ".palmer-form textarea { display:block !important }" was overriding that and
   rendering it as a stray empty box above Submit. Re-hide it (Google's default)
   — higher specificity than the bare-textarea rules so it always wins. */
#g-recaptcha-response,
textarea#g-recaptcha-response,
.palmer-form textarea.g-recaptcha-response,
.palmer-form .g-recaptcha-response,
.g-recaptcha-response {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* ── SELECT ─────────────────────────────────────────────────── */

.palmer-form select {
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: url('https://dev.palmerindustries.com/wp-content/uploads/2025/04/Vector-2.svg') no-repeat right 10px center #fff !important;
    background-size: 30px 30px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    color: rgba(0, 0, 0, 0.60) !important;
    font-weight: 400 !important;
    padding: 5px 40px 5px 5px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s;
}

.palmer-form select:focus { border-bottom-color: #87D2D2 !important; }

/* The select's own background is transparent (see the rule above). Chrome
   paints the opened <option> popup with that transparent background, which
   renders as a black flash — made visible once the placeholder option became
   `hidden`. Giving the options an explicit background (and pinning the native
   popup to a light color-scheme) forces the popup to render white instead. */
.palmer-form select { color-scheme: light !important; }
.palmer-form select option {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* ── RADIO BUTTONS ──────────────────────────────────────────── */

.palmer-radio-group { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.palmer-radio-group--inline {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    border-bottom: 1px solid #000 !important;
    padding-bottom: 8px !important;
}

.palmer-radio-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    color: rgba(0, 0, 0, 0.60) !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.palmer-form input[type=radio] {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background-color: #fff !important;
    border: 2px solid rgba(0, 0, 0, 0.55) !important;
    border-radius: 5px !important;
    background-image: none !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

.palmer-form input[type=radio]:checked {
    background-color: #87D2D2 !important;
    border-color: #87D2D2 !important;
    background-image: none !important;
}

.palmer-form input[type=radio]::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: translate(-50%, -58%) rotate(45deg) scale(0) !important;
    opacity: 0 !important;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1.35), opacity 0.12s !important;
}

.palmer-form input[type=radio]:checked::after {
    transform: translate(-50%, -58%) rotate(45deg) scale(1) !important;
    opacity: 1 !important;
}

/* ── CHECKBOXES ─────────────────────────────────────────────── */

.palmer-checkbox-group { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.palmer-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    color: rgba(0, 0, 0, 0.60) !important;
    cursor: default !important;          /* label text is NOT clickable */
    pointer-events: none !important;
    line-height: 1 !important;
}

/* Only the checkbox input itself is interactive */
.palmer-checkbox-label input[type=checkbox] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.palmer-form input[type=checkbox] {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background-color: #fff !important;
    border: 2px solid rgba(0, 0, 0, 0.55) !important;
    border-radius: 5px !important;
    background-image: none !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

.palmer-form input[type=checkbox]:checked {
    background-color: #87D2D2 !important;
    border-color: #87D2D2 !important;
    background-image: none !important;
}

.palmer-form input[type=checkbox]::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: translate(-50%, -58%) rotate(45deg) scale(0) !important;
    opacity: 0 !important;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1.35), opacity 0.12s !important;
}

.palmer-form input[type=checkbox]:checked::after {
    transform: translate(-50%, -58%) rotate(45deg) scale(1) !important;
    opacity: 1 !important;
}

/* ── FILE UPLOAD ─────────────────────────────────────────────── */

.palmer-file-wrap { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; }

.palmer-file-btn {
    display: inline-block !important;
    background: #fff !important;
    padding: 12px 32px !important;
    border: 1px solid rgba(135, 210, 210, 1) !important;
    color: rgba(36, 36, 36, 1) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-family: Jost, sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.3s, border-color 0.3s !important;
}

.palmer-file-btn:hover { background: transparent !important; border-color: #000 !important; }

.palmer-file-names {
    font-family: Jost, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.60);
    word-break: break-all;
}


/* ── Neutralize theme :required / :invalid styles ───────────────────────
   Some themes apply red borders/outlines to :required or :invalid fields.
   We handle all validation ourselves via .palmer-field-error only.      */
.palmer-form input:required,
.palmer-form select:required,
.palmer-form textarea:required,
.palmer-form input:invalid,
.palmer-form select:invalid,
.palmer-form textarea:invalid,
.palmer-row-table__input,
.palmer-row-table__input:required,
.palmer-row-table__input:invalid,
.palmer-row-table__select,
.palmer-row-table__select:required,
.palmer-row-table__select:invalid,
.palmer-row-table__wrap input,
.palmer-row-table__wrap select,
.palmer-row-table td input,
.palmer-row-table td select {
    outline: none !important;
    border-color: rgba(0,0,0,0.15) !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Restore our own error state on top of the neutralizer */
.palmer-form input.palmer-field-error,
.palmer-form select.palmer-field-error,
.palmer-form textarea.palmer-field-error,
.palmer-row-table__input.palmer-field-error,
.palmer-row-table__select.palmer-field-error,
.palmer-row-table__required.palmer-field-error {
    border-color: #e53e3e !important;
    outline: 1.5px solid #e53e3e !important;
    outline-offset: 0 !important;
    background-color: transparent !important;
}

/* ── Required radio / checkbox groups: LOUD error state ──────────────────
   A thin red outline on 24px boxes is easy to miss. When a required choice
   group is empty each box gets a red tint + glow and a quick shake. Visual
   only — no red text (per design). */
.palmer-form input[type=radio].palmer-field-error,
.palmer-form input[type=checkbox].palmer-field-error {
    border-color: #e53e3e !important;
    background-color: rgba(229, 62, 62, 0.10) !important;
    outline: 2px solid #e53e3e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(229, 62, 62, 0.18) !important;
    animation: palmerChoiceShake 0.4s ease 1;
}

/* Inline groups: the black underline goes red while the group is in error —
   a shape cue, not text. */
.palmer-radio-group--inline.palmer-choice-group--error {
    border-bottom-color: #e53e3e !important;
}

@keyframes palmerChoiceShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px); }
    40%      { transform: translateX(3px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .palmer-form input[type=radio].palmer-field-error,
    .palmer-form input[type=checkbox].palmer-field-error { animation: none !important; }
}

/* Error placeholder: low-opacity red */
.palmer-form input.palmer-field-error::placeholder,
.palmer-form textarea.palmer-field-error::placeholder,
.palmer-row-table__input.palmer-field-error::placeholder {
    color: rgba(229, 62, 62, 0.55) !important;
    opacity: 1 !important;
}

.palmer-error { display: block; font-family: Jost, sans-serif; font-size: 13px; color: #e53e3e; margin-top: 4px; }

/* ── BOLD IN HTML BLOCKS ─────────────────────────────────────── */

.palmer-html-block strong,
.palmer-html-block b {
    font-weight: 700 !important;
}

/* ── BOLD FIELD SUPPORT ──────────────────────────────────────── */

.palmer-form input[style*="font-weight: bold"],
.palmer-form input[style*="font-weight:bold"],
.palmer-form input.palmer-bold,
.palmer-row-table__input[style*="font-weight: bold"],
.palmer-row-table__input[style*="font-weight:bold"],
.palmer-row-table__input.palmer-bold { font-weight: bold !important; }

/* ── STEP TRANSITION ANIMATION ──────────────────────────────── */

.palmer-form__step {
    animation: none;
}

.palmer-step-visible {
    animation: palmerFadeSlideIn 0.35s ease both !important;
}

@keyframes palmerFadeSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    /* End at `none` (NOT translateY(0)): with fill-mode both, a lingering
       transform turns the step into a permanent stacking context, which traps
       the custom dropdown panel's z-index UNDER the breadcrumb trail. */
    to   { opacity: 1; transform: none; }
}

/* ── SIDEBAR LINE TRANSITION ─────────────────────────────────── */

.palmer-sidebar-item__line {
    transition: background 0.4s ease !important;
}

.palmer-sidebar-item__circle {
    transition: border-color 0.3s ease, background 0.3s ease !important;
}

.palmer-sidebar-item__dot {
    transition: background 0.3s ease !important;
}

/* ── RESPONSE MESSAGE FADE ───────────────────────────────────── */

.palmer-form__response {
    margin-top: 20px;
    transition: opacity 0.3s ease;
}

/* Sits empty at the foot of the form until a message or the success screen is
   mounted into it, and an empty box still spends its margin — so collapse it
   flat while there is nothing to show. */
.palmer-form__response:empty {
    margin-top: 0 !important;
}

.palmer-response--fading {
    opacity: 0 !important;
    pointer-events: none !important;
}

.palmer-form__success {
    animation: palmerFadeSlideIn 0.4s ease both;
    color: #2e7d32;
    font-family: Jost, sans-serif;
    font-size: 18px;
    background: rgba(46, 125, 50, 0.08);
    padding: 16px 20px;
    border-left: 4px solid #2e7d32;
}

.palmer-form__error {
    color: #c62828;
    font-family: Jost, sans-serif;
    font-size: 18px;
    background: rgba(198, 40, 40, 0.08);
    padding: 16px 20px;
    border-left: 4px solid #c62828;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */

.palmer-form .palmer-button,
.palmer-form .palmer-b-button {
    padding: 12px 32px;
    background-color: #fff;
    color: rgba(36, 36, 36, 1);
    border: 1px solid rgba(135, 210, 210, 1);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    font-family: Jost, sans-serif;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.palmer-form .palmer-button { background-color: #87D2D2; }

.palmer-form .palmer-button:hover,
.palmer-form .palmer-b-button:hover { background-color: transparent !important; border-color: #000 !important; }

.palmer-form .palmer-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* No chevron on the Submit button (keeps the arrow on Next only) */
.palmer-form__submit svg {
    display: none !important;
}

/* ── NAVIGATION ROW ─────────────────────────────────────────── */

.palmer-form__nav,
.palmer-form .form-navigation {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
    margin: 50px 0 20px;
}

.palmer-form .form-btm .form-btn-contain {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 0;
}

/* ── PROGRESS BAR (non-sidebar mode) ────────────────────────── */

.step-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding-top: 40px;
    padding-bottom: 30px;
}

.steps-progress {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ddd;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: Jost, sans-serif;
}

.steps-progress p { color: #fff !important; font-size: 18px !important; margin: 0 !important; }
.steps-progress.active { background-color: rgba(135, 210, 210, 1); }

.steps-progress:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -35px;
    width: 50px;
    height: 2px;
    background-color: #ddd;
    z-index: -1;
    transform: translateY(-50%);
}

.steps-progress.active + .steps-progress::before { background-color: rgba(135, 210, 210, 1); }

.mobile-step-progress { display: none; align-items: center; justify-content: center; flex-direction: column; }

/* ── HTML BLOCK ─────────────────────────────────────────────── */

.palmer-html-block { font-family: Jost, sans-serif; color: rgba(0, 0, 0, 0.60); font-size: 16px; }

/* ── GRID ROWS ──────────────────────────────────────────────── */

.palmer-form .row { display: flex !important; flex-wrap: wrap !important; margin: 0 -12px !important; }
.palmer-form .row > [class*='col-'] { padding: 0 12px !important; box-sizing: border-box !important; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* ── MOBILE STEP HEADER (sidebar mode) — hidden on desktop ── */
.palmer-mobile-step-header { display: none; }
.palmer-mobile-bar { display: none; }
.palmer-mobile-steps { display: none; }
.palmer-desktop-step-title { display: block; }
.palmer-form__step h4.palmer-desktop-step-title,
.palmer-form__step .palmer-desktop-step-title { font-weight: 700 !important; }

@media (max-width: 769px) {

    /* Section: block so children stack */
    .palmer-form-section--has-sidebar {
        display: block !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    /* ── TOP ROW: sidebar left + step header right ── */
    .palmer-form-section--has-sidebar .palmer-form-sidebar {
        display: inline-block !important;
        width: 130px !important;
        min-width: 130px !important;
        vertical-align: top !important;
        float: left !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile step header: sits beside the sidebar float */
    .palmer-mobile-step-header {
        display: block !important;
        overflow: hidden !important;
        padding-left: 12px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    .palmer-mobile-step-num {
        display: block !important;
        font-family: Jost, sans-serif !important;
        font-size: 16px !important;
        color: #87D2D2 !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    .palmer-mobile-step-header .palmer-mobile-step-title {
        display: block !important;
        font-family: "Baskervvile", serif !important;
        font-size: 26px !important;
        font-weight: 500 !important;
        color: #000 !important;
        margin: 4px 0 0 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* Clearfix: after sidebar+header float, clear so fields go below */
    .palmer-form-section--has-sidebar .palmer-form-inner::before {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
    .palmer-form-section--has-sidebar::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    /* Form inner: full width, sits below the float after clearfix */
    .palmer-form-section--has-sidebar .palmer-form-inner {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hide desktop step title — mobile header replaces it */
    .palmer-form-section--has-sidebar .palmer-desktop-step-title {
        display: none !important;
    }

    /* Step box: strip all padding/bg */
    .palmer-form__step,
    .palmer-form-section--has-sidebar .palmer-form__step {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* ── SIDEBAR ITEMS: stay vertical ── */
    .palmer-form-section--has-sidebar .palmer-sidebar-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        flex: none !important;
    }
    .palmer-form-section--has-sidebar .palmer-sidebar-item__track {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .palmer-form-section--has-sidebar .palmer-sidebar-item__circle {
        width: 22px !important;
        height: 22px !important;
    }
    .palmer-form-section--has-sidebar .palmer-sidebar-item__line {
        width: 2px !important;
        height: 30px !important;
        flex: none !important;
    }
    .palmer-form-section--has-sidebar .palmer-sidebar-item__label {
        font-size: 11px !important;
        text-align: left !important;
        padding-top: 3px !important;
        line-height: 1.2 !important;
    }

    /* ── FIELDS: full width, block, left-aligned ── */

    /* Row: block */
    .palmer-form .row {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .palmer-form .row > [class*='col-'] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Field wrap */
    .palmer-field-wrap,
    .palmer-form-section--has-sidebar .palmer-field-wrap {
        display: block !important;
        width: 100% !important;
        margin-bottom: 24px !important;
        box-sizing: border-box !important;
    }

    /* Labels */
    .palmer-field-wrap label,
    .palmer-field-wrap .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap label,
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-field-label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        flex: none !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* ── ALL INPUTS / SELECTS / TEXTAREAS ── */
    .palmer-form-section--has-sidebar .palmer-form input[type=text],
    .palmer-form-section--has-sidebar .palmer-form input[type=email],
    .palmer-form-section--has-sidebar .palmer-form input[type=tel],
    .palmer-form-section--has-sidebar .palmer-form input[type=number],
    .palmer-form-section--has-sidebar .palmer-form input[type=url],
    .palmer-form-section--has-sidebar .palmer-form select,
    .palmer-form-section--has-sidebar .palmer-form textarea,
    .palmer-form input[type=text],
    .palmer-form input[type=email],
    .palmer-form input[type=tel],
    .palmer-form input[type=number],
    .palmer-form input[type=url],
    .palmer-form select,
    .palmer-form textarea {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        align-self: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
    }
    .palmer-form input[type=text]::placeholder,
    .palmer-form input[type=email]::placeholder,
    .palmer-form input[type=tel]::placeholder,
    .palmer-form input[type=number]::placeholder,
    .palmer-form input[type=url]::placeholder,
    .palmer-form textarea::placeholder { font-size: 16px !important; }

    .palmer-form textarea,
    .palmer-form-section--has-sidebar .palmer-form textarea {
        resize: vertical !important;
        min-height: 70px !important;
    }

    /* ── RADIO ── */
    .palmer-radio-group,
    .palmer-form-section--has-sidebar .palmer-radio-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    .palmer-radio-group--inline,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline {
        flex-direction: column !important;
        gap: 14px !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-radio-label {
        font-size: 16px !important;
        gap: 12px !important;
        pointer-events: auto !important;
    }

    /* ── CHECKBOX ── */
    .palmer-checkbox-group { display: flex !important; flex-direction: column !important; gap: 14px !important; }
    .palmer-checkbox-label { font-size: 16px !important; gap: 12px !important; }

    /* Tap targets */
    .palmer-form input[type=radio],
    .palmer-form input[type=checkbox] {
        font-size: 20px !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        flex: none !important;
        flex-shrink: 0 !important;
        float: none !important;
    }

    /* ── FILE ── */
    .palmer-file-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .palmer-file-btn { display: block !important; width: 100% !important; text-align: center !important; font-size: 16px !important; padding: 13px 16px !important; box-sizing: border-box !important; }

    /* ── BUTTONS ── */
    .palmer-form .palmer-button,
    .palmer-form .palmer-b-button {
        display: block !important;
        width: 100% !important;
        font-size: 16px !important;
        padding: 13px 16px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ── NAVIGATION ── */
    .palmer-form__nav,
    .palmer-form .form-navigation,
    .palmer-form-section--has-sidebar .palmer-form__nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 24px 0 12px !important;
        justify-content: flex-start !important;
    }
    .palmer-form .form-btm { display: block !important; width: 100% !important; }
    .palmer-form .form-btm .form-btn-contain {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── PROGRESS BAR ── */
    .desktop-progress-bar { display: none !important; }
    .mobile-step-progress { display: flex !important; }

    /* ── POPUP ── */
    .palmer-field-popup-box { padding: 20px 14px !important; width: 95% !important; box-sizing: border-box !important; }

    /* ── NOTE + IMAGE ── */
    .palmer-note-image__drop-inner { padding: 14px 12px !important; }
    .palmer-note-image__drop-label { font-size: 13px !important; }
    .palmer-note-image__thumbs { gap: 8px !important; }
    .palmer-note-image__thumb { width: calc(33.333% - 6px) !important; }
    .palmer-note-image__thumb img { height: 70px !important; }
}


@media (min-width: 770px) {
    .palmer-form .row > .col-md-12 { width: 100% !important;     flex: 0 0 100% !important; }
    .palmer-form .row > .col-md-8  { width: 66.6667% !important; flex: 0 0 66.6667% !important; }
    .palmer-form .row > .col-md-6  { width: 50% !important;      flex: 0 0 50% !important; }
    .palmer-form .row > .col-md-4  { width: 33.3333% !important; flex: 0 0 33.3333% !important; }
    .palmer-form .row > .col-md-3  { width: 25% !important;      flex: 0 0 25% !important; }
}

/* Elementor editor: show every step while building the form */
body.elementor-editor-active .palmer-form .palmer-form__step { display: block !important; }

/* ── 1-COLUMN FIELD WIDTH FIX ───────────────────────────────────────────────
   When a field is placed in a full-width column (col-md-12), constrain the
   input/select so the label above it never wraps to a second line.
   Suppressed on mobile — inputs stay 100% there.
   The cap defaults to 480px but is overridden by the Elementor style control
   (--palmer-1col-input-width CSS variable).
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 770px) {
    .palmer-form .col-md-12.palmer-field-wrap > input[type=text],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=email],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=tel],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=number],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=url],
    .palmer-form .col-md-12.palmer-field-wrap > .palmer-datepicker-wrap,
    .palmer-form .col-md-12.palmer-field-wrap > select {
        width: 100% !important;
    }

    /* Sidebar mode: inputs are flex children — fill remaining space */
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > input[type=text],
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > input[type=email],
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > input[type=tel],
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > input[type=number],
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > input[type=url],
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > select {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE-EXACT OVERRIDES — match Customer Info mockup precisely
   ═══════════════════════════════════════════════════════════════ */

/* Hide the required asterisk in label */
.palmer-form-section--has-sidebar .palmer-form__step label span[aria-hidden="true"],
.palmer-form-section--has-sidebar .palmer-form__step .palmer-field-label span[aria-hidden="true"] {
    display: none !important;
}

/* Form box: no background tint, no padding (sidebar provides spacing) */
.palmer-form-section--has-sidebar .palmer-form__step {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Step title: simple sans-serif, smaller, less padding */
.palmer-form-section--has-sidebar .palmer-form__step h4 {
    font-family: Jost, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #222 !important;
    padding: 0 0 30px 0 !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
}

/* Field wrappers: smaller spacing, label-left layout */
.palmer-form-section--has-sidebar .palmer-field-wrap {
    margin-bottom: 22px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

/* Full-width fields (Email, Confirm email, URL, radio, etc.) keep label-left too */
.palmer-form-section--has-sidebar .palmer-field-wrap label,
.palmer-form-section--has-sidebar .palmer-field-wrap .palmer-field-label {
    font-family: Jost, sans-serif !important;
    font-size: 15px !important;
    color: #555 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Inputs: smaller font, simple bordered box matching image */
.palmer-form-section--has-sidebar .palmer-form input[type=text],
.palmer-form-section--has-sidebar .palmer-form input[type=email],
.palmer-form-section--has-sidebar .palmer-form input[type=tel],
.palmer-form-section--has-sidebar .palmer-form input[type=number],
.palmer-form-section--has-sidebar .palmer-form input[type=url] {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    border: 1px solid #c8c8c8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    color: #333 !important;
    padding: 9px 12px !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.palmer-form-section--has-sidebar .palmer-form input[type=text]:focus,
.palmer-form-section--has-sidebar .palmer-form input[type=email]:focus,
.palmer-form-section--has-sidebar .palmer-form input[type=tel]:focus,
.palmer-form-section--has-sidebar .palmer-form input[type=number]:focus,
.palmer-form-section--has-sidebar .palmer-form input[type=url]:focus {
    border-color: #87D2D2 !important;
    border-bottom-width: 1px !important;
}

.palmer-form-section--has-sidebar .palmer-form input[type=text]::placeholder,
.palmer-form-section--has-sidebar .palmer-form input[type=email]::placeholder,
.palmer-form-section--has-sidebar .palmer-form input[type=tel]::placeholder,
.palmer-form-section--has-sidebar .palmer-form input[type=number]::placeholder,
.palmer-form-section--has-sidebar .palmer-form input[type=url]::placeholder {
    color: #bbb !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Select: bordered box like inputs, NOT underline-only */
.palmer-form-section--has-sidebar .palmer-form select {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    border: 1px solid #c8c8c8 !important;
    border-radius: 0 !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    background-size: 14px 14px !important;
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    color: #bbb !important;
    padding: 9px 30px 9px 12px !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.palmer-form-section--has-sidebar .palmer-form select:focus { border-color: #87D2D2 !important; }
.palmer-form-section--has-sidebar .palmer-form select option { color: #333 !important; }

/* ── FILLED FIELD STATE ──────────────────────────────────────────────────
   JS (initFilledFieldStates) tags inputs / selects / textareas with the
   class .palmer-has-value once they hold a non-empty value. These rules
   render filled fields in solid black so they stop looking like an empty
   placeholder. Selectors are scoped tighter than the default-color rules
   above so they win on specificity without needing brute force.
   ─────────────────────────────────────────────────────────────────────── */

.palmer-form-section--has-sidebar .palmer-form input.palmer-has-value,
.palmer-form-section--has-sidebar .palmer-form select.palmer-has-value,
.palmer-form-section--has-sidebar .palmer-form textarea.palmer-has-value,
.palmer-form input.palmer-has-value,
.palmer-form select.palmer-has-value,
.palmer-form textarea.palmer-has-value,
.palmer-row-table__input.palmer-has-value,
.palmer-row-table__select.palmer-has-value {
    color: #000 !important;
}

/* Textarea: bordered box */
.palmer-form-section--has-sidebar .palmer-form textarea {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    border: 1px solid #c8c8c8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    color: #333 !important;
    padding: 9px 12px !important;
}

.palmer-form-section--has-sidebar .palmer-form textarea::placeholder { color: #bbb !important; font-size: 14px !important; }

/* Radio group (Yes/No checkboxes in image): right of question label */
.palmer-form-section--has-sidebar .palmer-field-wrap--radio {
    align-items: center !important;
}

.palmer-form-section--has-sidebar .palmer-field-wrap--radio .palmer-field-label {
    width: auto !important;
    flex-shrink: 1 !important;
    margin-right: 16px !important;
}

.palmer-form-section--has-sidebar .palmer-radio-group--inline {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    gap: 24px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.palmer-form-section--has-sidebar .palmer-radio-label {
    font-family: Jost, sans-serif !important;
    font-size: 15px !important;
    color: #555 !important;
    gap: 0 !important;
}

.palmer-form-section--has-sidebar .palmer-form input[type=radio] {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    background-color: #fff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.55) !important;
    border-radius: 5px !important;
    background-image: none !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

.palmer-form-section--has-sidebar .palmer-form input[type=radio]:checked {
    background-color: #87D2D2 !important;
    border-color: #87D2D2 !important;
    background-image: none !important;
}

.palmer-form-section--has-sidebar .palmer-form input[type=radio]::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: translate(-50%, -58%) rotate(45deg) scale(0) !important;
    opacity: 0 !important;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1.35), opacity 0.12s !important;
}

.palmer-form-section--has-sidebar .palmer-form input[type=radio]:checked::after {
    transform: translate(-50%, -58%) rotate(45deg) scale(1) !important;
    opacity: 1 !important;
}

/* Grid row spacing — match image's tighter column gaps */
.palmer-form-section--has-sidebar .palmer-form .row {
    margin: 0 -16px !important;
}

.palmer-form-section--has-sidebar .palmer-form .row > [class*='col-'] {
    padding: 0 16px !important;
}

/* Form navigation: Next link on the right */
.palmer-form-section--has-sidebar .palmer-form__nav {
    margin: 40px 0 20px !important;
    border-top: none !important;
}

/* Mobile responsive handled in the consolidated @media (max-width: 769px) block above */

/* ── ROW CARDS ──────────────────────────────────────────────────────────────── */

.palmer-row-table-wrap {
    width: 100%;
}

.palmer-form__nav button svg,
.form-btn-contain button svg {
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
}

.palmer-row-table__label {
    margin-bottom: 14px !important;
}

/* Cards body: stacks cards vertically */
.palmer-row-cards__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Individual room card */
.palmer-row-card {
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 16px 20px 20px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* Card header: room number left, delete right */
.palmer-row-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 10px;
}

.palmer-row-table__num {
    font-family: Jost, sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.35);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Fields grid: wraps naturally, min 140px per field */
.palmer-row-card__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    /* align-items defaults to "stretch", which means a taller field
       (e.g. one that just sprouted a "recommended" hint) would force
       every sibling column to grow to match — making the inputs in
       other columns visually taller. Anchor everything to the top so
       each field column keeps its own natural height. */
    align-items: flex-start;
}

/* Individual field: label stacked above input */
.palmer-row-card__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 140px;
    min-width: 120px;
}

.palmer-row-card__field-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: Jost, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
    white-space: nowrap;
    margin: 0;
}

/* Required asterisk */
.palmer-row-table__th-req {
    color: #e53e3e;
    margin-left: 2px;
}

/* Inputs inside cards */
.palmer-row-table__input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.70) !important;
    padding: 4px 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.palmer-row-table__input:focus {
    border-bottom-color: #87D2D2 !important;
}

.palmer-row-table__input::placeholder {
    color: rgba(0, 0, 0, 0.25) !important;
}

/* Selects inside cards */
.palmer-row-table__select {
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: url('https://dev.palmerindustries.com/wp-content/uploads/2025/04/Vector-2.svg') no-repeat right 4px center #fff !important;
    background-size: 16px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.70) !important;
    padding: 4px 22px 4px 0 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.palmer-row-table__select:focus {
    border-bottom-color: #87D2D2 !important;
}

/* Delete button */
.palmer-row-table__del-btn {
    background: none !important;
    border: none !important;
    color: rgba(0, 0, 0, 0.25) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    transition: color 0.2s !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.palmer-row-table__del-btn:hover {
    color: #c00 !important;
}

/* Recommend hint inside card fields */
.palmer-recommend-hint,
.palmer-lock-hint {
    display: block !important;
    font-family: Jost, sans-serif !important;
    font-size: 10px !important;
    color: #2b7a5a !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    pointer-events: none !important;
    font-variant: small-caps !important;
    font-feature-settings: "smcp" !important;
    letter-spacing: 0.12em !important;
}

/* Footer: Add Room button + count */
.palmer-row-table__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.palmer-row-table__add-btn {
    font-size: 14px !important;
    padding: 8px 20px !important;
}

.palmer-row-table__add-btn:disabled {
    opacity: 0.40 !important;
    cursor: not-allowed !important;
}

.palmer-row-table__count {
    font-family: Jost, sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.35);
}

/* Mobile: cards already wrap naturally — just tighten spacing */
@media (max-width: 769px) {
    .palmer-row-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    .palmer-row-table__label {
        margin-bottom: 12px !important;
        border-top: 0 !important;
    }

    .palmer-row-card {
        padding: 14px 16px 16px !important;
    }

    .palmer-row-card__fields {
        gap: 14px 16px !important;
    }

    .palmer-row-card__field {
        flex: 1 1 120px !important;
        min-width: 100px !important;
    }

    .palmer-row-table__input,
    .palmer-row-table__select {
        font-size: 16px !important;
    }

    .palmer-row-table__footer {
        margin-top: 18px !important;
        gap: 14px !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 420px) {
    .palmer-row-card__field {
        flex: 1 1 100% !important;
    }
}
/* ── NOTE + IMAGE FIELD ─────────────────────────────────────────────────────── */

.palmer-note-image-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.palmer-note-image__textarea {
    width: 100% !important;
    resize: vertical;
}

.palmer-note-image__drop-zone {
    position: relative;
    border: 2px dashed rgba(0,0,0,0.18);
    border-radius: 4px;
    background: rgba(0,0,0,0.015);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 80px;
}

.palmer-note-image__drop-zone:hover,
.palmer-note-image__drop-zone--over {
    border-color: #87D2D2;
    background: rgba(135,210,210,0.05);
}

.palmer-note-image__drop-zone--over {
    border-style: solid;
}

.palmer-note-image__file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.palmer-note-image__drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 20px;
    color: rgba(0,0,0,0.35);
    text-align: center;
}

.palmer-note-image__drop-inner svg {
    color: rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.palmer-note-image__drop-label {
    font-family: Jost, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

/* Thumbnail grid */
.palmer-note-image__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.palmer-note-image__thumb {
    position: relative;
    width: 100px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    overflow: hidden;
    background: #f8f8f8;
    flex-shrink: 0;
}

.palmer-note-image__thumb img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.palmer-note-image__thumb-name {
    display: block;
    font-family: Jost, sans-serif;
    font-size: 10px;
    color: rgba(0,0,0,0.45);
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palmer-note-image__thumb .palmer-note-image__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.55) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.2s !important;
}

.palmer-note-image__thumb .palmer-note-image__remove:hover {
    background: rgba(180,0,0,0.75) !important;
}

/* Final mobile lock: placed last so desktop/sidebar overrides cannot leak into phones. */
@media (max-width: 769px) {
    .palmer-form-section,
    .palmer-form-section--has-sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 16px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-sidebar {
        float: none !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 0 0 4px 0 !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item {
        display: flex !important;
        flex: 1 0 44px !important;
        min-width: 44px !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__track {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__circle {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__dot {
        width: 8px !important;
        height: 8px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__line {
        width: 100% !important;
        height: 2px !important;
        min-height: 2px !important;
        flex: 1 1 auto !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__label {
        display: none !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-inner,
    .palmer-form-section--has-sidebar .palmer-form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        clear: none !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-inner::before,
    .palmer-form-section--has-sidebar::after {
        content: none !important;
        display: none !important;
    }

    .palmer-mobile-step-header {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-mobile-step-num {
        display: block !important;
        font-family: Jost, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        color: #87D2D2 !important;
        margin: 0 0 4px 0 !important;
    }

    .palmer-mobile-step-header .palmer-mobile-step-title {
        display: block !important;
        font-family: Jost, sans-serif !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
        color: #222 !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .palmer-form-section--has-sidebar .palmer-desktop-step-title {
        display: none !important;
    }

    .palmer-form__step,
    .palmer-form-section--has-sidebar .palmer-form__step {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-form__step-desc {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin: 0 0 18px 0 !important;
    }

    .palmer-form .row,
    .palmer-form-section--has-sidebar .palmer-form .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-form .row > [class*='col-'],
    .palmer-form-section--has-sidebar .palmer-form .row > [class*='col-'] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-field-wrap,
    .palmer-form-section--has-sidebar .palmer-field-wrap,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 18px 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-label-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
    }

    .palmer-field-wrap label,
    .palmer-field-wrap .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap label,
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio .palmer-field-label {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: none !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        font-family: Jost, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        color: #444 !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    .palmer-label-row label,
    .palmer-label-row .palmer-field-label {
        margin: 0 !important;
        flex: 1 1 auto !important;
    }

    .palmer-popup-eye {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .palmer-form input[type=text],
    .palmer-form input[type=email],
    .palmer-form input[type=tel],
    .palmer-form input[type=number],
    .palmer-form input[type=url],
    .palmer-form select,
    .palmer-form textarea,
    .palmer-form-section--has-sidebar .palmer-form input[type=text],
    .palmer-form-section--has-sidebar .palmer-form input[type=email],
    .palmer-form-section--has-sidebar .palmer-form input[type=tel],
    .palmer-form-section--has-sidebar .palmer-form input[type=number],
    .palmer-form-section--has-sidebar .palmer-form input[type=url],
    .palmer-form-section--has-sidebar .palmer-form select,
    .palmer-form-section--has-sidebar .palmer-form textarea,
    .palmer-form .col-md-12.palmer-field-wrap > input[type=text],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=email],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=tel],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=number],
    .palmer-form .col-md-12.palmer-field-wrap > input[type=url],
    .palmer-form .col-md-12.palmer-field-wrap > .palmer-datepicker-wrap,
    .palmer-form .col-md-12.palmer-field-wrap > select {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        float: none !important;
        align-self: auto !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 11px 12px !important;
        font-family: Jost, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        color: #333 !important;
        border: 1px solid #c8c8c8 !important;
        border-radius: 0 !important;
        background-color: #fff !important;
        box-sizing: border-box !important;
    }

    .palmer-form select,
    .palmer-form-section--has-sidebar .palmer-form select {
        padding-right: 36px !important;
        background-position: right 12px center !important;
    }

    .palmer-datepicker-wrap,
    .palmer-form-section--has-sidebar .palmer-form .col-md-12.palmer-field-wrap > .palmer-datepicker-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .palmer-datepicker-wrap input[type=text] {
        width: 100% !important;
    }

    .palmer-form textarea,
    .palmer-form-section--has-sidebar .palmer-form textarea {
        min-height: 92px !important;
        resize: vertical !important;
    }

    .palmer-form input[type=text]::placeholder,
    .palmer-form input[type=email]::placeholder,
    .palmer-form input[type=tel]::placeholder,
    .palmer-form input[type=number]::placeholder,
    .palmer-form input[type=url]::placeholder,
    .palmer-form textarea::placeholder,
    .palmer-form-section--has-sidebar .palmer-form input[type=text]::placeholder,
    .palmer-form-section--has-sidebar .palmer-form input[type=email]::placeholder,
    .palmer-form-section--has-sidebar .palmer-form input[type=tel]::placeholder,
    .palmer-form-section--has-sidebar .palmer-form input[type=number]::placeholder,
    .palmer-form-section--has-sidebar .palmer-form input[type=url]::placeholder,
    .palmer-form-section--has-sidebar .palmer-form textarea::placeholder {
        font-size: 16px !important;
        color: #8c8c8c !important;
    }

    .palmer-radio-group,
    .palmer-checkbox-group,
    .palmer-form-section--has-sidebar .palmer-radio-group,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline,
    .palmer-form-section--has-sidebar .palmer-checkbox-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .palmer-radio-label,
    .palmer-checkbox-label,
    .palmer-form-section--has-sidebar .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-checkbox-label {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        color: #444 !important;
        box-sizing: border-box !important;
    }

    .palmer-form input[type=radio],
    .palmer-form input[type=checkbox],
    .palmer-form-section--has-sidebar .palmer-form input[type=radio],
    .palmer-form-section--has-sidebar .palmer-form input[type=checkbox] {
        font-size: 18.46px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        flex: 0 0 24px !important;
        margin: 0 !important;
    }

    .palmer-checkbox-text {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .palmer-file-wrap,
    .palmer-note-image-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .palmer-file-btn,
    .palmer-note-image__drop-zone {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .palmer-note-image__thumbs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .palmer-note-image__thumb {
        width: 100% !important;
    }

    .palmer-row-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .palmer-row-table__add-btn,
    .palmer-file-btn,
    .palmer-form .palmer-button,
    .palmer-form .palmer-b-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 12px 16px !important;
        font-family: Jost, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* ── MOBILE NAV BUTTONS (sidebar mode) ───────────────────
       On desktop the Next/Previous controls are bare teal text-links with a
       sliding underline. On a phone that reads as broken — so turn them into
       real, full-width, tappable buttons. These selectors are scoped to DIRECT
       children of the nav to MATCH the desktop base rule's specificity (0,3,0);
       without that the teal fill gets overridden and the buttons stay bare. */
    .palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back,
    .palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 13px 16px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.18em !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* Next = solid teal (primary action) */
    .palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link {
        background: #87D2D2 !important;
        border: 1px solid #87D2D2 !important;
        color: #000 !important;
    }
    .palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back svg,
    .palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link svg {
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
    }

    /* Previous = outlined secondary, stacked below Next */
    .palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back {
        background: transparent !important;
        border: 1px solid #87D2D2 !important;
        color: #000 !important;
        order: 2 !important;
    }
    .palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link {
        order: 1 !important;
    }

    /* Kill the desktop sliding-underline span — a hover affordance that
       otherwise renders as a stray teal bar on touch devices. */
    .palmer-form-section--has-sidebar .palmer-form__nav > .btn-go-back .palmer-nav-underline,
    .palmer-form-section--has-sidebar .palmer-form__nav > .palmer-next-link .palmer-nav-underline {
        display: none !important;
    }

    .palmer-form__nav,
    .palmer-form .form-navigation,
    .palmer-form-section--has-sidebar .palmer-form__nav,
    .palmer-form .form-btm,
    .palmer-form .form-btm .form-btn-contain {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
        margin: 24px 0 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-form__response {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 18px !important;
    }

    .palmer-field-popup-box {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 420px) {
    .palmer-form-section,
    .palmer-form-section--has-sidebar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .palmer-mobile-step-header .palmer-mobile-step-title {
        font-size: 22px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item {
        flex-basis: 38px !important;
        min-width: 38px !important;
    }

    .palmer-row-table {
        min-width: 460px !important;
    }
}

/* Mobile screenshot layout: vertical step rail on the left, current title on the right. */
@media (max-width: 769px) {
    .palmer-form__step--hidden,
    .palmer-form__step.palmer-form__step--hidden,
    .palmer-form-section--has-sidebar .palmer-form__step.palmer-form__step--hidden,
    .palmer-mobile-step-header.palmer-form__step--hidden {
        display: none !important;
    }

    .palmer-form-section--has-sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 42px 30px 38px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-sidebar {
        float: left !important;
        display: block !important;
        width: 45% !important;
        min-width: 148px !important;
        max-width: 245px !important;
        margin: 0 18px 42px 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__track {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__circle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-width: 1px !important;
        border-color: #999 !important;
        background: #fff !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item--active .palmer-sidebar-item__circle {
        border-color: #87D2D2 !important;
        background: #87D2D2 !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__dot {
        width: 12px !important;
        height: 12px !important;
        background: transparent !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item--active .palmer-sidebar-item__dot {
        background: #fff !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__line {
        width: 1px !important;
        height: 38px !important;
        min-height: 38px !important;
        background: #999 !important;
        flex: 0 0 38px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item--done .palmer-sidebar-item__line {
        background: #87D2D2 !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__label {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 9px 0 0 0 !important;
        margin: 0 !important;
        font-family: Jost, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #111 !important;
        font-weight: 400 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-inner {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        clear: none !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-inner::before,
    .palmer-form-section--has-sidebar::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    .palmer-mobile-step-header {
        display: block !important;
        overflow: hidden !important;
        width: auto !important;
        max-width: none !important;
        min-height: 210px !important;
        padding: 0 !important;
        margin: 15px 0 10px 0 !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    .palmer-mobile-step-num {
        display: block !important;
        font-family: Jost, sans-serif !important;
        font-size: 36px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
        color: #87D2D2 !important;
        letter-spacing: 0 !important;
        margin: 0 0 22px 0 !important;
        padding: 0 !important;
    }

    .palmer-mobile-step-header .palmer-mobile-step-title {
        display: block !important;
        font-family: Jost, sans-serif !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;
        color: #000 !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .palmer-form-section--has-sidebar .palmer-form,
    .palmer-form-section--has-sidebar .palmer-form__step {
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .palmer-form-section--has-sidebar .palmer-form__fields {
        gap: 0 !important;
    }

    .palmer-field-wrap,
    .palmer-form-section--has-sidebar .palmer-field-wrap {
        margin-bottom: 24px !important;
    }

    .palmer-field-wrap label,
    .palmer-field-wrap .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap label,
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-field-label {
        font-size: 22px !important;
        line-height: 1.25 !important;
        color: #8f8f8f !important;
        margin: 0 0 14px 0 !important;
    }

    .palmer-form input[type=text],
    .palmer-form input[type=email],
    .palmer-form input[type=tel],
    .palmer-form input[type=number],
    .palmer-form input[type=url],
    .palmer-form select,
    .palmer-form textarea,
    .palmer-form-section--has-sidebar .palmer-form input[type=text],
    .palmer-form-section--has-sidebar .palmer-form input[type=email],
    .palmer-form-section--has-sidebar .palmer-form input[type=tel],
    .palmer-form-section--has-sidebar .palmer-form input[type=number],
    .palmer-form-section--has-sidebar .palmer-form input[type=url],
    .palmer-form-section--has-sidebar .palmer-form select,
    .palmer-form-section--has-sidebar .palmer-form textarea {
        min-height: 50px !important;
        padding: 12px 20px !important;
        font-size: 18px !important;
        border: 1px solid #d2d2d2 !important;
        color: #333 !important;
    }

    .palmer-form input[type=text]::placeholder,
    .palmer-form input[type=email]::placeholder,
    .palmer-form input[type=tel]::placeholder,
    .palmer-form input[type=number]::placeholder,
    .palmer-form input[type=url]::placeholder,
    .palmer-form textarea::placeholder {
        font-size: 18px !important;
        color: #c5c5c5 !important;
    }
}

@media (max-width: 520px) {
    .palmer-form-section--has-sidebar {
        padding: 30px 18px 32px !important;
    }

    .palmer-form-section--has-sidebar .palmer-form-sidebar {
        width: 47% !important;
        min-width: 138px !important;
        margin-right: 12px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item {
        gap: 10px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__circle {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__track {
        width: 30px !important;
        min-width: 30px !important;
        flex-basis: 30px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__line {
        height: 34px !important;
        min-height: 34px !important;
        flex-basis: 34px !important;
    }

    .palmer-form-section--has-sidebar .palmer-sidebar-item__label {
        font-size: 12px !important;
        padding-top: 8px !important;
    }

    .palmer-mobile-step-header {
        min-height: 190px !important;
    }

    .palmer-mobile-step-num {
        font-size: 30px !important;
        margin-bottom: 18px !important;
    }

    .palmer-mobile-step-header .palmer-mobile-step-title {
        font-size: 28px !important;
    }

    .palmer-field-wrap label,
    .palmer-field-wrap .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap label,
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-field-label {
        font-size: 19px !important;
    }
}

/* Mobile field breathing room: keep labels from riding the previous input. */
@media (max-width: 769px) {
    .palmer-form-section--has-sidebar .palmer-form .row > .palmer-field-wrap,
    .palmer-form-section--has-sidebar .palmer-field-wrap,
    .palmer-form .row > .palmer-field-wrap,
    .palmer-field-wrap {
        margin-bottom: 34px !important;
    }

    .palmer-form-section--has-sidebar .palmer-form .row > .palmer-field-wrap:last-child,
    .palmer-form .row > .palmer-field-wrap:last-child {
        margin-bottom: 0 !important;
    }

    .palmer-field-wrap label,
    .palmer-field-wrap .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap label,
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-field-label {
        margin-bottom: 16px !important;
    }

    .palmer-form input[type=text],
    .palmer-form input[type=email],
    .palmer-form input[type=tel],
    .palmer-form input[type=number],
    .palmer-form input[type=url],
    .palmer-form select,
    .palmer-form textarea,
    .palmer-form-section--has-sidebar .palmer-form input[type=text],
    .palmer-form-section--has-sidebar .palmer-form input[type=email],
    .palmer-form-section--has-sidebar .palmer-form input[type=tel],
    .palmer-form-section--has-sidebar .palmer-form input[type=number],
    .palmer-form-section--has-sidebar .palmer-form input[type=url],
    .palmer-form-section--has-sidebar .palmer-form select,
    .palmer-form-section--has-sidebar .palmer-form textarea {
        margin-bottom: 0 !important;
    }
}

/* Mobile alignment polish: title and secondary nav start from the left edge. */
@media (max-width: 769px) {
    .palmer-mobile-step-header {
        text-align: left !important;
    }

    .palmer-form__nav,
    .palmer-form .form-navigation,
    .palmer-form-section--has-sidebar .palmer-form__nav,
    .palmer-form .form-btm,
    .palmer-form .form-btm .form-btn-contain {
        align-items: flex-start !important;
    }

    /* Back / secondary buttons: full-width OUTLINED buttons on mobile so they
       read as real tappable controls, not a stray teal text link. This is the
       authoritative LATE override for .btn-go-back — it must win, so the
       outlined treatment lives here rather than only in the block above. */
    .palmer-form .palmer-b-button,
    .palmer-form-section--has-sidebar .palmer-form .palmer-b-button,
    .palmer-form .btn-go-back,
    .palmer-form-section--has-sidebar .palmer-form .btn-go-back {
        width: 100% !important;
        min-width: 0 !important;
        align-self: stretch !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 16px !important;
        background: transparent !important;
        border: 1px solid #87D2D2 !important;
        color: #000 !important;
    }

    .palmer-form .palmer-button:not(.palmer-b-button):not(.btn-go-back) {
        align-self: stretch !important;
        width: 100% !important;
    }
}

/* Mobile row-table card polish handled in card section above */


/* ═══════════════════════════════════════════════════════════════════════════
   PALMER FAQ — INLINE PANEL  (always-open, clean card layout)
   Triggered by the pill button on the step title row.
   Questions + answers shown together — no expand/collapse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Step title row ─────────────────────────────────────────────────────── */
.palmer-step-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

.palmer-step-title-row .palmer-desktop-step-title {
    margin-bottom: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* ── FAQ trigger — editorial mark ────────────────────────────────────────────
   "01 ·  FREQUENTLY ASKED QUESTIONS / common questions · about this step  ⌄"
   Treated as a piece of editorial typography, not a CTA. On hover the label
   rolls up to a mint-tinted duplicate underneath; the underline + chevron
   tint to mint in sympathy. On open, the chevron flips 180°. */
.palmer-faq-trigger {
    position: relative !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    align-self: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-family: Jost, 'Helvetica Neue', sans-serif !important;
    color: #1a1a1a !important;
    outline: none !important;
    line-height: 1 !important;
}

.palmer-faq-trigger:hover {
    background: transparent !important;
}

.palmer-faq-trigger:focus-visible {
    outline: none !important;
}

/* Italic serif numeral — quiet anchor on the left */
.palmer-faq-trigger__num {
    font-family: "Baskervvile", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    color: #87D2D2 !important;
    padding: 2px 12px 0 0 !important;
    align-self: flex-start !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.palmer-faq-trigger__stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

/* Roll-up label: two stacked lines clipped to one row */
.palmer-faq-trigger__label {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    height: 0.78rem !important;
    line-height: 0.78rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.palmer-faq-trigger__label::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -4px !important;
    height: 1px !important;
    background: #1a1a1a !important;
    transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.palmer-faq-trigger__roll {
    display: block !important;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.palmer-faq-trigger__roll-line {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 0.78rem !important;
    color: inherit !important;
}

.palmer-faq-trigger__roll-line + .palmer-faq-trigger__roll-line {
    color: #87D2D2 !important;
}

/* Tiny meta caption under the label */
.palmer-faq-trigger__meta {
    font-family: Jost, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    color: rgba(0, 0, 0, 0.45) !important;
    text-transform: lowercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
}

.palmer-faq-trigger__dot {
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    background: #87D2D2 !important;
    border-radius: 50% !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Chevron — small, set to the right, rotates 180° on open */
.palmer-faq-trigger__icon {
    display: inline-flex !important;
    align-self: flex-start !important;
    margin-left: 16px !important;
    margin-top: 2px !important;
    width: 14px !important;
    height: 14px !important;
    color: #1a1a1a !important;
    transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.palmer-faq-trigger__icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Hover choreography */
.palmer-faq-trigger:hover .palmer-faq-trigger__roll {
    transform: translateY(-0.78rem) !important;
}
.palmer-faq-trigger:hover .palmer-faq-trigger__label::after {
    background: #87D2D2 !important;
}
.palmer-faq-trigger:hover .palmer-faq-trigger__dot {
    transform: scale(1.8) !important;
}
.palmer-faq-trigger:hover .palmer-faq-trigger__icon {
    color: #87D2D2 !important;
}

/* Open state — chevron flips */
.palmer-faq-trigger--open .palmer-faq-trigger__icon {
    transform: rotate(180deg) !important;
}

/* ── FAQ panel container ────────────────────────────────────────────────────
   Collapse uses grid-template-rows: 0fr → 1fr, which animates from any
   content height down to 0 without ever measuring scrollHeight. Combined
   with the staggered item fade-out, the close feels concurrent — the form
   below rises into place WHILE the questions are still dissolving, not
   after. Margin-bottom + margin-top transition in sympathy so the rise
   begins immediately, not at the end. */
.palmer-faq-panel {
    display: grid !important;
    grid-template-rows: 0fr !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    transition: grid-template-rows 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                opacity            0.45s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top         0.65s cubic-bezier(0.22, 1, 0.36, 1),
                margin-bottom      0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.palmer-faq-panel[hidden] {
    display: grid !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.palmer-faq-panel--open {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}

/* The inner row of the grid — clips the content while the row collapses */
.palmer-faq-panel__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 24px 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

/* Desktop close-out mark — short mint rule below the last question. On mobile
   this is replaced by the "Close" button, which provides its own visual seal. */
.palmer-faq-panel__list::after {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 1px !important;
    background: #87D2D2 !important;
    margin: 18px auto 16px !important;
}

/* ── FAQ panel close button ──────────────────────────────────────────────────
   Mobile-only "Close" affordance at the bottom of the open panel, so the
   user doesn't have to scroll back to the top trigger to dismiss. Hidden on
   desktop (where the scroll distance is short and the top trigger is in view)
   and on the closed state. Lives INSIDE the panel so the grid-row collapse
   animation clips it on close.

   Design echoes the top trigger: small chevron (now pointing UP, since this
   action collapses the panel) above a Jost caps label, separated by a short
   mint hairline above for visual continuity with the panel's opening seal. */
.palmer-faq-panel__close {
    display: none !important;
}

.palmer-faq-panel--open .palmer-faq-panel__close {
    display: none !important;
}

@media (max-width: 769px) {
    .palmer-faq-panel--open .palmer-faq-panel__close {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 auto !important;
        padding: 18px 0 32px !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        font-family: Jost, 'Helvetica Neue', sans-serif !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
        color: rgba(20, 20, 20, 0.7) !important;
        line-height: 1 !important;
        outline: none !important;
        width: auto !important;
        position: relative !important;
        transition: color 0.3s ease !important;
    }

    .palmer-faq-panel--open .palmer-faq-panel__close::before {
        content: '' !important;
        display: block !important;
        width: 28px !important;
        height: 1px !important;
        background: #87D2D2 !important;
        margin: 0 auto 6px !important;
    }

    .palmer-faq-panel--open .palmer-faq-panel__close:hover,
    .palmer-faq-panel--open .palmer-faq-panel__close:active {
        color: #87D2D2 !important;
    }

    .palmer-faq-panel__close-icon {
        display: inline-flex !important;
        width: 14px !important;
        height: 14px !important;
        color: currentColor !important;
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) !important;
    }

    .palmer-faq-panel__close:hover .palmer-faq-panel__close-icon,
    .palmer-faq-panel__close:active .palmer-faq-panel__close-icon {
        transform: translateY(-2px) !important;
    }

    .palmer-faq-panel__close-icon svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .palmer-faq-panel__close-label {
        display: inline-block !important;
    }

    .palmer-faq-panel__list {
        padding-bottom: 8px !important;
    }
    .palmer-faq-panel__list::after {
        display: none !important;
    }
}

/* ── Loading spinner ────────────────────────────────────────────────────── */
.palmer-faq__loading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 0 !important;
    color: #999 !important;
    font-family: Jost, sans-serif !important;
    font-size: 0.82rem !important;
}

.palmer-faq__spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0,0,0,0.08);
    border-top-color: #87D2D2;
    border-radius: 50%;
    animation: palmer-faq-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes palmer-faq-spin { to { transform: rotate(360deg); } }

.palmer-faq__empty {
    padding: 10px 0;
    color: #999;
    font-family: Jost, sans-serif;
    font-size: 0.85rem;
    margin: 0;
}

.palmer-faq__empty--error { color: #c0392b; }

/* ── Individual FAQ item ────────────────────────────────────────────────── */
.palmer-faq__item {
    padding: 16px 0 16px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    opacity: 0 !important;
    transform: translateY(14px) !important;
    filter: blur(4px) !important;
    /* Decelerating curve + brief blur sells the "settling into focus"
       feeling on open, and the "dissolving" feeling on close. JS sets
       per-item transition-delay inline so the close cascade is precise. */
    transition: opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter    0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition-delay: calc(var(--i, 0) * 0.06s) !important;
    will-change: opacity, transform, filter !important;
}

.palmer-faq__item:first-child {
    border-top: 1px solid rgba(0,0,0,0.07) !important;
}

.palmer-faq__item--visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: blur(0) !important;
}

/* ── Question row ───────────────────────────────────────────────────────── */
.palmer-faq__q-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin-bottom: 7px !important;
}

/* Number badge */
.palmer-faq__number {
    font-family: Jost, sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: #87D2D2 !important;
    font-variant-numeric: tabular-nums !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

/* Question text */
.palmer-faq__question {
    font-family: Jost, 'Helvetica Neue', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Answer text ────────────────────────────────────────────────────────── */
/* Indented to align with question text (number width + gap) */
.palmer-faq__item .palmer-faq__a-inner {
    padding: 0 0 0 1.6rem !important;
    font-family: Jost, 'Helvetica Neue', sans-serif !important;
    font-size: 0.84rem !important;
    line-height: 1.7 !important;
    color: #666 !important;
}

.palmer-faq__item .palmer-faq__a-inner a {
    color: #87D2D2 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

.palmer-faq__item .palmer-faq__a-inner strong {
    font-weight: 600 !important;
    color: #333 !important;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .palmer-step-title-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .palmer-faq-trigger__roll-line {
        font-size: 0.7rem !important;
        line-height: 0.7rem !important;
        letter-spacing: 0.12em !important;
    }
    .palmer-faq-trigger__label {
        height: 0.7rem !important;
        line-height: 0.7rem !important;
    }
    .palmer-faq-trigger:hover .palmer-faq-trigger__roll {
        transform: translateY(-0.7rem) !important;
    }
    .palmer-faq-trigger__meta {
        font-size: 9.5px !important;
    }
    .palmer-faq-trigger__num {
        font-size: 10px !important;
        padding-right: 9px !important;
    }
    .palmer-faq-trigger__icon {
        margin-left: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }

    .palmer-faq__item {
        padding: 14px 0 !important;
    }

    .palmer-faq__question {
        font-size: 0.84rem !important;
    }

    .palmer-faq__item .palmer-faq__a-inner {
        font-size: 0.82rem !important;
    }
}

/* Greyed-out options when filtered by sibling field */
.palmer-row-card select option:disabled {
    color: #ccc !important;
    font-style: italic !important;
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* Cursor on the select itself when hovering a disabled option isn't possible via CSS alone —
   but we can signal unavailability via the option appearance above.
   The JS below handles cursor on hover via a data attribute. */
.palmer-row-card select[data-has-disabled] {
    cursor: pointer;
}

/* ── NUCLEAR OPTION: kill ALL borders/outlines on row card inputs ────── */
.palmer-row-table-wrap *,
.palmer-row-table-wrap *:required,
.palmer-row-table-wrap *:invalid,
.palmer-row-table-wrap *:focus,
.palmer-row-card input,
.palmer-row-card input:required,
.palmer-row-card input:invalid,
.palmer-row-card select,
.palmer-row-card select:required,
.palmer-row-card select:invalid {
    border-color: rgba(0,0,0,0.0) !important;
    outline: none !important;
    box-shadow: none !important;
}
/* ──────────────────────────────────────────────────────────────────────────
   MOBILE — Step nav redesign (Option 3: hidden nav, hero title, ghost numeral)
   Appended last so it wins the cascade against the older mobile blocks above,
   which used a vertical-list sidebar that crammed five empty circles into the
   top of the screen.

   Layout, top to bottom:
     1. Compact bar — mint progress ring + "Step N" meta on the left,
        "All steps" hamburger on the right
     2. Collapsible "all steps" panel (uses the same grid-rows collapse
        choreography as the FAQ panel — items dissolve while the panel rises)
     3. Hero header — tiny mint super-label, big serif title, ghost italic
        numeral floating in the upper-right corner of the hero
     4. Optional step description (one calm line under the title)
     5. FAQ trigger (alone in .palmer-step-title-row since the desktop title
        is hidden on mobile), sitting flush left with editorial spacing above
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 769px) {

    /* Hide the old desktop sidebar entirely on mobile — its content is now
       inside the collapsible .palmer-mobile-steps panel below. */
    .palmer-form-section--has-sidebar .palmer-form-sidebar {
        display: none !important;
    }

    /* The section is a clean vertical stack — no floats, no two-column */
    .palmer-form-section--has-sidebar {
        display: block !important;
        padding: 24px 18px 28px !important;
        box-sizing: border-box !important;
    }
    .palmer-form-section--has-sidebar .palmer-form-inner,
    .palmer-form-section--has-sidebar .palmer-form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: none !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .palmer-form-section--has-sidebar .palmer-form-inner::before,
    .palmer-form-section--has-sidebar::after {
        content: none !important;
        display: none !important;
    }


    .palmer-mobile-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 6px 0 16px !important;
        margin: 0 0 4px !important;
        border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
        box-sizing: border-box !important;
    }
    .palmer-mobile-bar__progress {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }
    .palmer-mobile-bar__ring {
        position: relative !important;
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    .palmer-mobile-bar__ring svg {
        width: 100% !important;
        height: 100% !important;
        transform: rotate(-90deg) !important;
        display: block !important;
    }
    .palmer-mobile-bar__ring-bg {
        fill: none !important;
        stroke: rgba(0,0,0,0.09) !important;
        stroke-width: 2 !important;
    }
    .palmer-mobile-bar__ring-fg {
        fill: none !important;
        stroke: #87D2D2 !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-dasharray: 100 !important;
        transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .palmer-mobile-bar__ring-num {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: "Baskervvile", Georgia, serif !important;
        font-style: italic !important;
        font-size: 12px !important;
        color: #1a1a1a !important;
        line-height: 1 !important;
        font-variant-numeric: tabular-nums !important;
    }
    .palmer-mobile-bar__ring-sep {
        margin: 0 1px !important;
        color: rgba(0,0,0,0.35) !important;
    }
    .palmer-mobile-bar__lbl-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        min-width: 0 !important;
    }
    .palmer-mobile-bar__lbl-overline {
        font-family: Jost, sans-serif !important;
        font-size: 9.5px !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        color: rgba(0,0,0,0.45) !important;
        line-height: 1 !important;
    }
    .palmer-mobile-bar__lbl-name {
        font-family: "Baskervvile", Georgia, serif !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        color: #0a0a0a !important;
        letter-spacing: -0.005em !important;
        line-height: 1 !important;
    }
    .palmer-mobile-bar__lbl-num {
        font-variant-numeric: tabular-nums !important;
        color: #87D2D2 !important;
        font-style: italic !important;
    }
    .palmer-mobile-bar__menu {
        appearance: none !important;
        background: transparent !important;
        border: 0 !important;
        padding: 6px 0 !important;
        cursor: pointer !important;
        font-family: Jost, sans-serif !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        color: rgba(0,0,0,0.55) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
        transition: color 0.3s ease !important;
        outline: none !important;
        line-height: 1 !important;
    }
    .palmer-mobile-bar__menu:hover,
    .palmer-mobile-bar__menu[aria-expanded="true"] {
        color: #87D2D2 !important;
    }
    .palmer-mobile-bar__menu-icon {
        display: inline-flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-end !important;
        width: 16px !important;
    }
    .palmer-mobile-bar__menu-icon span {
        display: block !important;
        height: 1px !important;
        background: currentColor !important;
        transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .palmer-mobile-bar__menu-icon span:nth-child(1) { width: 16px !important; }
    .palmer-mobile-bar__menu-icon span:nth-child(2) { width: 11px !important; }
    .palmer-mobile-bar__menu-icon span:nth-child(3) { width: 16px !important; }
    .palmer-mobile-bar__menu[aria-expanded="true"] .palmer-mobile-bar__menu-icon span:nth-child(1) {
        transform: translateY(5px) rotate(45deg) !important;
        width: 16px !important;
    }
    .palmer-mobile-bar__menu[aria-expanded="true"] .palmer-mobile-bar__menu-icon span:nth-child(2) {
        width: 0 !important;
        opacity: 0 !important;
    }
    .palmer-mobile-bar__menu[aria-expanded="true"] .palmer-mobile-bar__menu-icon span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg) !important;
        width: 16px !important;
    }


    .palmer-mobile-steps {
        display: grid !important;
        grid-template-rows: 0fr !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity            0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    margin             0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .palmer-mobile-steps[hidden] {
        display: grid !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .palmer-mobile-steps--open {
        grid-template-rows: 1fr !important;
        opacity: 1 !important;
        margin: 14px 0 6px !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .palmer-mobile-steps__inner {
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .palmer-mobile-steps__list {
        list-style: none !important;
        margin: 0 !important;
        padding: 6px 0 12px !important;
        display: block !important;
    }
    .palmer-mobile-steps__item {
        display: flex !important;
        align-items: baseline !important;
        gap: 18px !important;
        padding: 12px 0 !important;
        border-bottom: 0.5px solid rgba(0,0,0,0.07) !important;
        opacity: 0 !important;
        transform: translateY(8px) !important;
        filter: blur(3px) !important;
        transition: opacity   0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    filter    0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    color     0.3s ease !important;
        transition-delay: calc(var(--i, 0) * 0.04s) !important;
        will-change: opacity, transform, filter !important;
    }
    .palmer-mobile-steps__item:last-child { border-bottom: 0 !important; }

    /* Navigable rows wrap their contents in a <span role="button"> — no UA
       chrome to fight, it just has to carry the row's flex layout so the number
       and the name still sit side by side. */
    .palmer-mobile-steps__btn {
        display: flex !important;
        align-items: baseline !important;
        gap: 18px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        text-align: left !important;
        cursor: pointer !important;
    }
    .palmer-mobile-steps__btn:focus { outline: none !important; }
    .palmer-mobile-steps__btn:focus-visible {
        outline: 2px solid #87D2D2 !important;
        outline-offset: 2px !important;
        border-radius: 3px !important;
    }
    .palmer-mobile-steps__item--locked .palmer-mobile-steps__num,
    .palmer-mobile-steps__item--locked .palmer-mobile-steps__name {
        color: rgba(0,0,0,0.28) !important;
    }
    .palmer-mobile-steps--open .palmer-mobile-steps__item {
        opacity: 1 !important;
        transform: translateY(0) !important;
        filter: blur(0) !important;
    }
    .palmer-mobile-steps__num {
        font-family: "Baskervvile", Georgia, serif !important;
        font-style: italic !important;
        font-size: 13px !important;
        color: rgba(0,0,0,0.32) !important;
        font-variant-numeric: tabular-nums !important;
        flex-shrink: 0 !important;
        width: 22px !important;
        transition: color 0.3s !important;
    }
    .palmer-mobile-steps__name {
        font-family: Jost, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: rgba(0,0,0,0.55) !important;
        letter-spacing: 0.02em !important;
        line-height: 1.3 !important;
        transition: color 0.3s, letter-spacing 0.4s !important;
    }
    .palmer-mobile-steps__item--active .palmer-mobile-steps__num { color: #87D2D2 !important; }
    .palmer-mobile-steps__item--active .palmer-mobile-steps__name {
        color: #0a0a0a !important;
        font-weight: 500 !important;
    }
    .palmer-mobile-steps__item--done .palmer-mobile-steps__num { color: rgba(0,0,0,0.78) !important; }
    .palmer-mobile-steps__item--done .palmer-mobile-steps__name { color: rgba(0,0,0,0.78) !important; }


    .palmer-mobile-step-header {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 32px 0 22px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .palmer-form__step .palmer-mobile-step-header.palmer-form__step--hidden,
    .palmer-mobile-step-header.palmer-form__step--hidden {
        display: none !important;
    }
    .palmer-mobile-step-ghost {
        position: absolute !important;
        top: -10px !important;
        right: -6px !important;
        font-family: "Baskervvile", Georgia, serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
        font-size: 88px !important;
        line-height: 1 !important;
        color: rgba(135, 210, 210, 0.16) !important;
        pointer-events: none !important;
        user-select: none !important;
        letter-spacing: -0.02em !important;
        z-index: 0 !important;
    }
    .palmer-mobile-step-num {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-family: Jost, sans-serif !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.22em !important;
        text-transform: uppercase !important;
        color: #87D2D2 !important;
        line-height: 1 !important;
        margin: 0 0 16px !important;
        z-index: 1 !important;
    }
    .palmer-mobile-step-num__line {
        display: inline-block !important;
        width: 22px !important;
        height: 1px !important;
        background: #87D2D2 !important;
    }
    .palmer-mobile-step-header .palmer-mobile-step-title {
        position: relative !important;
        display: block !important;
        font-family: "Baskervvile", Georgia, serif !important;
        font-weight: 500 !important;
        font-size: 38px !important;
        line-height: 1.02 !important;
        color: #0a0a0a !important;
        letter-spacing: -0.018em !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 88% !important;
        z-index: 1 !important;
    }
    .palmer-mobile-step-desc {
        position: relative !important;
        font-family: Jost, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: rgba(0,0,0,0.5) !important;
        max-width: 90% !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }


    .palmer-form-section--has-sidebar .palmer-step-title-row {
        display: block !important;
        position: relative !important;
        margin: -60px 0 18px !important;
        padding: 12px 0 0 !important;
        border-top: 0.5px solid rgba(0,0,0,0.08) !important;
        max-width: 88% !important;
    }
    .palmer-form-section--has-sidebar .palmer-step-title-row .palmer-desktop-step-title {
        display: none !important;
    }
    .palmer-form-section--has-sidebar .palmer-step-title-row .palmer-faq-trigger {
        display: inline-flex !important;
        align-self: flex-start !important;
    }

    .palmer-form-section--has-sidebar .palmer-step-title-row .palmer-faq-trigger__num {
        display: none !important;
    }

    .palmer-form-section--has-sidebar .palmer-mobile-step-header {
        margin: 28px 0 0 !important;
    }


    .palmer-form-section--has-sidebar .desktop-progress-bar,
    .palmer-form-section--has-sidebar .mobile-step-progress,
    .palmer-form-section--has-sidebar .step-progress {
        display: none !important;
    }
}
/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP STEP HEADER  (sidebar layout, >= 770px only)
   ----------------------------------------------------------------------------
   Matches the reference mockup:
     • two VISIBLE mint rules (top + bottom) bracketing the title
     • the step title shown as a large light-grey ghost (italic, uppercase)
     • "STEP n" in mint italic, sitting on the BOTTOM-RIGHT CORNER of the title,
       overlapping it
     • the FAQ trigger inline on the far right, vertically centred in the band

   Mobile is left exactly as it was: the cluster collapses (display:contents)
   and "STEP n" is hidden below 770px, so the existing mobile layout is
   byte-for-byte unchanged.

   The title selector is intentionally high-specificity (.has-sidebar
   .palmer-form__step .palmer-step-title-row .palmer-step-title-cluster
   h4.palmer-desktop-step-title) so it beats the older !important rules that
   were previously forcing the title back to solid black.
   ════════════════════════════════════════════════════════════════════════════ */

/* Defaults everywhere (mobile + non-sidebar desktop) — keep those layouts
   identical to before: cluster is transparent, step number hidden. */
.palmer-step-title-cluster { display: contents; }
.palmer-desktop-step-num   { display: none; }

@media (min-width: 770px) {

    /* The band: flex row, mint rules top + bottom, title-cluster left / FAQ right */
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-step-title-row {
        display: flex !important;
        /* flex-start, not center: the band reserves two lines, so centring floated
           a one-line title ~32px down from the rail's first item. Top-aligning
           puts the title's first line level with the nav while the band keeps its
           reserved height, so the fields below still never move. */
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 28px !important;
        position: relative !important;
        width: 100% !important;

        /* Reserve room for the tallest title rather than letting the band size to
           whichever title is showing — a wrapped title grew this from 72px to
           ~130px and shoved every field below it down. Deliberately a plain
           value: no calc(), no custom property, nothing a parser can choke on.
           130px == two lines at the default 60px title. If your titles all fit
           on one line, 72px restores the tighter band. */
        min-height: 130px !important;
        /* Fine-tune the title against the rail with --palmer-title-top: negative
           lifts it, positive drops it. A couple of px either way is normal — the
           display face's ascender leaves optical space above the capitals. */
        margin: var(--palmer-title-top, 0px) 0 32px !important;
        padding: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    /* Title + STEP cluster — shrinks to the title's width so STEP can anchor
       to the title's own bottom-right corner. */
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-step-title-row .palmer-step-title-cluster {
        display: inline-block !important;
        position: relative !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        align-self: flex-start !important;
        line-height: 0 !important;
    }

    /* Ghost step title — large, light-grey, italic, uppercase serif */
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-step-title-row .palmer-step-title-cluster h4.palmer-desktop-step-title {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        font-family: "Baskervvile", Georgia, serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
        font-size: clamp(42px, 4.6vw, 60px) !important;
        line-height: 1.08 !important;            /* was 1 — gives wrapped lines breathing room */
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        color: rgba(0, 0, 0, 0.08) !important;   /* light grey ghost on white */
        white-space: normal !important;          /* was nowrap — wrap to the next line when too long */
        overflow-wrap: break-word !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    /* Last word of the title + the "STEP n" badge are glued together so the
       badge can never break onto its own line away from the final word. The
       title still wraps freely at the space BEFORE this word. */
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-step-title-row .palmer-step-title-cluster .palmer-desktop-step-lastword {
        position: relative !important;   /* anchors "STEP n" to the last word, not the whole title */
        white-space: nowrap !important;
    }

    /* "STEP n" — mint italic, anchored to the LAST WORD's bottom-right corner
       (its containing block is .palmer-desktop-step-lastword), so it overlaps
       the lower-right of the final word and follows it down when the title wraps. */
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-step-title-row .palmer-step-title-cluster .palmer-desktop-step-num {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        bottom: -6px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Baskervvile", Georgia, serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
        font-size: 27px !important;
        line-height: 1 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
        color: #87D2D2 !important;
        white-space: nowrap !important;
        z-index: 2 !important;
    }

    /* FAQ trigger — inline on the far right, centred in the band */
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-step-title-row .palmer-faq-trigger {
        /* Follows the title up. The nudge centres this small two-line stack
           against the title's FIRST line (60px x 1.08 = 64.8px tall) rather than
           against the whole reserved band. */
        align-self: flex-start !important;
        margin-top: var(--palmer-faq-top, 16px) !important;
        flex-shrink: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   STEP TRANSITIONS  —  sequenced, direction-aware, zero page-scroll
   ----------------------------------------------------------------------------
   JS pins the outgoing step out of flow (position:absolute) and toggles the
   classes below. The incoming step's children cascade in via --seq, while the
   title band runs its own lead-in: ghost title sweeps in → "STEP n" drops onto
   its corner → FAQ → then the fields stagger. Disabled under reduced-motion.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

    /* The container itself never moves — only its children animate. */
    .palmer-form__step.palmer-step--enter-next,
    .palmer-form__step.palmer-step--enter-prev { animation: none !important; }

    /* ── Outgoing step ─────────────────────────────────────────────────────── */
    .palmer-form__step.palmer-step--exit-next {
        animation: palmerStepExitNext 0.36s cubic-bezier(0.7, 0, 0.84, 0) both;
        pointer-events: none !important;
    }
    .palmer-form__step.palmer-step--exit-prev {
        animation: palmerStepExitPrev 0.36s cubic-bezier(0.7, 0, 0.84, 0) both;
        pointer-events: none !important;
    }
    @keyframes palmerStepExitNext {
        from { opacity: 1; transform: translate3d(0,0,0);      filter: blur(0); }
        to   { opacity: 0; transform: translate3d(-44px,0,0);  filter: blur(9px); }
    }
    @keyframes palmerStepExitPrev {
        from { opacity: 1; transform: translate3d(0,0,0);      filter: blur(0); }
        to   { opacity: 0; transform: translate3d(44px,0,0);   filter: blur(9px); }
    }

    /* ── Incoming step: generic child cascade (fields, nav, etc.) ──────────── */
    .palmer-form__step.palmer-step--enter-next > *,
    .palmer-form__step.palmer-step--enter-prev > * {
        animation-duration: 0.42s;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-delay: calc(var(--seq, 0) * 0.04s + 0.10s);
    }
    .palmer-form__step.palmer-step--enter-next > * { animation-name: palmerItemInNext; }
    .palmer-form__step.palmer-step--enter-prev > * { animation-name: palmerItemInPrev; }
    /* Horizontal-only slide + fade: no vertical translate (that caused the ~1px
       vertical snap when the GPU layer was demoted) and no blur (that caused the
       lingering soft text). */
    @keyframes palmerItemInNext {
        from { opacity: 0; transform: translate3d(28px, 0, 0); }
        to   { opacity: 1; transform: none; } /* `none`, not translate3d(0,0,0) — avoids a lingering stacking context under fill-mode:both */
    }
    @keyframes palmerItemInPrev {
        from { opacity: 0; transform: translate3d(-28px, 0, 0); }
        to   { opacity: 1; transform: none; } /* same — see palmerItemInNext */
    }

    /* The title band leads the sequence on its own timeline — suppress the
       generic cascade on it so its pieces can be choreographed individually. */
    .palmer-form__step.palmer-step--enter-next > .palmer-step-title-row,
    .palmer-form__step.palmer-step--enter-prev > .palmer-step-title-row {
        animation: none !important;
    }

    /* 1 ─ ghost title sweeps in first */
    .palmer-step--enter-next .palmer-step-title-cluster .palmer-desktop-step-title {
        animation: palmerTitleSweepNext 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.04s;
    }
    .palmer-step--enter-prev .palmer-step-title-cluster .palmer-desktop-step-title {
        animation: palmerTitleSweepPrev 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.04s;
    }
    @keyframes palmerTitleSweepNext {
        from { opacity: 0; transform: translate3d(48px, 0, 0); }
        to   { opacity: 1; transform: translate3d(0,0,0); }
    }
    @keyframes palmerTitleSweepPrev {
        from { opacity: 0; transform: translate3d(-48px, 0, 0); }
        to   { opacity: 1; transform: translate3d(0,0,0); }
    }

    /* 2 ─ "STEP n" drops onto the title's corner, with a little overshoot */
    .palmer-step--enter-next .palmer-step-title-cluster .palmer-desktop-step-num,
    .palmer-step--enter-prev .palmer-step-title-cluster .palmer-desktop-step-num {
        animation: palmerStepNumDrop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-delay: 0.34s;
    }
    @keyframes palmerStepNumDrop {
        from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.8); }
        to   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
    }

    /* 3 ─ FAQ trigger settles in last (of the header) */
    .palmer-step--enter-next .palmer-faq-trigger,
    .palmer-step--enter-prev .palmer-faq-trigger {
        animation: palmerFaqFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.46s;
    }
    @keyframes palmerFaqFade {
        from { opacity: 0; transform: translate3d(0, -8px, 0); }
        to   { opacity: 1; transform: translate3d(0,0,0); }
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP — full-height wrapper, form pinned to the TOP of it (sidebar layout)
   ----------------------------------------------------------------------------
   The section is at least one viewport tall. It used to centre its content
   vertically inside that (align-content: center), and THAT is what made the
   form's starting point wander:

     top offset = max(0, (100vh − content height) / 2)

   Every change in content height moved the form by half the difference. On a
   1271px viewport that meant a one-field step sat 376px down, a thirteen-field
   step 146px down, and opening the FAQ — which pushes the content past 100vh —
   collapsed the offset to 0 and yanked the whole form up ~146px. Same cause for
   the wander between steps of different lengths.

   Note the section BOX never moved and the page never scrolled, which is why
   scroll-position fixes could not touch this: the content was moving inside a
   stationary box.

   align-content: start pins the block to the top of the viewport-tall section.
   The leftover space now sits entirely below the form, so the top edge is in
   the same place on every step and an opening panel only ever extends downward.
   min-height is now GONE. It was the cause of the large empty gap under the
   form: a 100vh floor on a section whose content is usually much shorter, with
   align-content:start pushing every leftover pixel below the form (as the note
   above describes). With the height driven by content instead, there is no
   leftover space to push anywhere — and the top edge still does not move,
   because align-content:start is what pins it, not the floor.

   Mobile is untouched: this only applies at >=770px; below that the section
   stays display:block per the existing mobile rules.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 770px) {
    .palmer-form-section--has-sidebar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-content: start !important;     /* was center — see above */
        align-items: start !important;       /* nav + form top-aligned to each other */
        min-height: 0 !important;            /* was 100vh — see note above */
        box-sizing: border-box !important;
    }
}

/* Radio box-to-text spacing (flex gap is overridden to 0 by the theme on radio labels,
   so space the label text explicitly; scoped to radios, checkboxes keep their own gap) */
.palmer-radio-label > .palmer-checkbox-text {
    margin-left: 10px !important;
}

.palmer-form-section--has-sidebar .palmer-radio-label > .palmer-checkbox-text {
    margin-left: 8px !important;
}

/* Optical vertical centering of the label text against the box.
   Jost's glyphs sit slightly low within their line box, so nudge up a touch.
   Applies to both checkbox and radio text (shared span) so they stay identical. */
.palmer-checkbox-text {
    position: relative !important;
    top: -2px !important;
}

/* MOBILE: keep each option's box and its label text on the SAME line.
   High-specificity + !important so it wins over theme/Elementor label styles
   that otherwise stack them. Options still stack vertically (group is column). */
@media (max-width: 769px) {
    .palmer-form .palmer-radio-group > .palmer-radio-label,
    .palmer-form .palmer-checkbox-group > .palmer-checkbox-label,
    .palmer-form-section--has-sidebar .palmer-radio-group > .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-checkbox-group > .palmer-checkbox-label {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .palmer-form .palmer-radio-label > input,
    .palmer-form .palmer-checkbox-label > input {
        display: inline-block !important;
        float: none !important;
        flex: 0 0 auto !important;
    }

    .palmer-form .palmer-radio-label > .palmer-checkbox-text,
    .palmer-form .palmer-checkbox-label > .palmer-checkbox-text {
        display: inline-block !important;
        flex: 0 1 auto !important;
        width: auto !important;
        white-space: normal !important;
    }
}
/* ════════════════════════════════════════════════════════════════════════════
   SUCCESS TAKEOVER SCREEN
   ----------------------------------------------------------------------------
   Replaces the form on a successful "replace"-mode submit. Built in JS, mounted
   into .palmer-form__response, then choreographed by the .palmer-success--in
   class (added one frame after mount). Uses the form's own faces — Baskervvile
   for the headline, Jost for everything else — and a deeper tint of the brand
   teal as the accent so the "success" colour stays on-brand (no stock green).

   The default (always-on) rules below describe the FINISHED, static state, so
   under reduced motion — or if JS never adds --in — the screen is fully legible
   with nothing hidden. All motion lives in the prefers-reduced-motion:no-pref
   block further down.
   ════════════════════════════════════════════════════════════════════════════ */
.palmer-success {
    --ps-ink: #242424;
    --ps-muted: rgba(36, 36, 36, 0.56);
    --ps-accent: #87D2D2;          /* brand teal */
    --ps-accent-deep: #3a9d9d;     /* darker tint of the same hue, for legible strokes/text */

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(420px, 58vh, 640px);
    padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px);
    box-sizing: border-box;
    text-align: center;
}

.palmer-success__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 620px;
    width: 100%;
}

/* ── Seal ──────────────────────────────────────────────────────────────────── */
.palmer-success__seal {
    position: relative;
    width: clamp(96px, 16vw, 128px);
    height: clamp(96px, 16vw, 128px);
    margin-bottom: clamp(22px, 3.5vw, 36px);
    display: grid;
    place-items: center;
}

.palmer-success__seal-svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.palmer-success__ring {
    fill: none;
    stroke: var(--ps-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;            /* drawn by default (reduced-motion safe) */
}

.palmer-success__check {
    fill: none;
    stroke: var(--ps-accent-deep);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;            /* drawn by default (reduced-motion safe) */
}

/* Radiating pulse rings — the one celebratory accent, kept disciplined. */
.palmer-success__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1);
    border: 1px solid var(--ps-accent);
    border-radius: 50%;
    opacity: 0;                      /* invisible at rest; only the entrance plays them */
    pointer-events: none;
    z-index: 1;
}

/* ── Type ──────────────────────────────────────────────────────────────────── */
.palmer-success__eyebrow {
    margin: 0 0 14px;
    font-family: Jost, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ps-accent-deep);
}

.palmer-success__title {
    margin: 0;
    font-family: "Baskervvile", Georgia, serif;
    font-weight: 400;
    font-size: clamp(32px, 5.2vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
}

/* Mask wrapper lets the headline reveal upward from a clean edge. */
.palmer-success__title-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;          /* room for descenders inside the mask */
}
.palmer-success__title-mask > span {
    display: block;
}

.palmer-success__sub {
    margin: 18px 0 0;
    max-width: 46ch;
    font-family: Jost, sans-serif;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.6;
    color: var(--ps-muted);
}

.palmer-success__divider {
    display: block;
    width: 56px;
    height: 1px;
    margin: clamp(26px, 4vw, 38px) 0;
    background: var(--ps-accent);
    transform: scaleX(1);            /* full by default (reduced-motion safe) */
    transform-origin: center;
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
.palmer-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.palmer-success__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    font-family: Jost, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 0;                /* square, like the form's nav buttons */
    border: 1px solid var(--ps-accent);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.palmer-success__btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

.palmer-success__btn--solid {
    background-color: var(--ps-accent);
    color: var(--ps-ink);
}
.palmer-success__btn--ghost {
    background-color: #fff;
    color: var(--ps-ink);
}

/* Hover mirrors the form's existing buttons: collapse to outline on black. */
.palmer-success__btn--solid:hover,
.palmer-success__btn--ghost:hover {
    background-color: transparent;
    border-color: #000;
}

.palmer-success__btn:focus-visible {
    outline: 2px solid var(--ps-accent-deep);
    outline-offset: 3px;
}

/* When the takeover is mounted, drop the response wrapper's default top gap. */
.palmer-form__response:has(.palmer-success) { margin-top: 0; }

@media (max-width: 480px) {
    .palmer-success__actions { flex-direction: column-reverse; width: 100%; }
    .palmer-success__btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SUCCESS TAKEOVER — MOTION (suppressed entirely under reduced motion)
   Initial hidden states + keyframes live here so the static rules above remain
   the accessible fallback.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

    /* Hidden starting states (only while the entrance hasn't fired). */
    .palmer-success:not(.palmer-success--in) .palmer-success__seal { opacity: 0; transform: scale(0.7); }
    .palmer-success:not(.palmer-success--in) .palmer-success__ring,
    .palmer-success:not(.palmer-success--in) .palmer-success__check { stroke-dashoffset: 100; }
    .palmer-success:not(.palmer-success--in) .palmer-success__eyebrow,
    .palmer-success:not(.palmer-success--in) .palmer-success__sub,
    .palmer-success:not(.palmer-success--in) .palmer-success__actions > * { opacity: 0; }
    .palmer-success:not(.palmer-success--in) .palmer-success__title-mask > span { transform: translateY(110%); opacity: 0; }
    .palmer-success:not(.palmer-success--in) .palmer-success__divider { transform: scaleX(0); opacity: 0; }

    /* Entrance choreography — expo-out everywhere, back-overshoot on the seal. */
    .palmer-success--in .palmer-success__seal {
        animation: psSealPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
    }
    .palmer-success--in .palmer-success__ring {
        animation: psDraw 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .palmer-success--in .palmer-success__check {
        animation: psDraw 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both;
    }
    .palmer-success--in .palmer-success__pulse {
        animation: psPulse 1.15s ease-out 0.5s both;
    }
    .palmer-success--in .palmer-success__pulse--2 { animation-delay: 0.68s; }

    .palmer-success--in .palmer-success__eyebrow {
        animation: psRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
    }
    .palmer-success--in .palmer-success__title-mask > span {
        animation: psTitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
    }
    .palmer-success--in .palmer-success__sub {
        animation: psRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.92s both;
    }
    .palmer-success--in .palmer-success__divider {
        animation: psDivider 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
    }
    .palmer-success--in .palmer-success__actions > * {
        animation: psRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .palmer-success--in .palmer-success__actions > *:nth-child(1) { animation-delay: 1.05s; }
    .palmer-success--in .palmer-success__actions > *:nth-child(2) { animation-delay: 1.16s; }

    /* Exit — the whole block dissolves up with a touch of blur. */
    .palmer-success--out {
        animation: psLeave 0.42s cubic-bezier(0.7, 0, 0.84, 0) both;
        pointer-events: none;
    }

    @keyframes psSealPop {
        from { opacity: 0; transform: scale(0.7); }
        to   { opacity: 1; transform: scale(1); }
    }
    @keyframes psDraw {
        from { stroke-dashoffset: 100; }
        to   { stroke-dashoffset: 0; }
    }
    @keyframes psPulse {
        0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(0.55); }
        100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.3); }
    }
    @keyframes psRise {
        from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
        60%  { filter: blur(0); }
        to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }
    @keyframes psTitleReveal {
        from { opacity: 0; transform: translateY(110%); filter: blur(9px); }
        60%  { filter: blur(0); }
        to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }
    @keyframes psDivider {
        from { opacity: 0; transform: scaleX(0); }
        to   { opacity: 1; transform: scaleX(1); }
    }
    @keyframes psLeave {
        from { opacity: 1; transform: translateY(0);     filter: blur(0); }
        to   { opacity: 0; transform: translateY(-12px); filter: blur(6px); }
    }
}
/* ════════════════════════════════════════════════════════════════════════════
   LONG RADIO / CHECKBOX OPTIONS (DESKTOP)
   ----------------------------------------------------------------------------
   On desktop the radio/checkbox group was never given a width, so inside the
   sidebar layout it collapsed into a narrow column and long option text wrapped
   after only a couple of words. These rules let long options use the full width
   of the container, wrap cleanly onto multiple lines, and keep the box aligned
   to the first line of text. (≤769px is already handled by the mobile block.)
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 770px) {

    /* Stacked (non-inline) radio groups span the full container width so each
       option has room to breathe before wrapping. */
    .palmer-form .palmer-radio-group:not(.palmer-radio-group--inline),
    .palmer-form-section--has-sidebar .palmer-radio-group:not(.palmer-radio-group--inline) {
        width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    /* Each stacked option fills the row; the box stays at the top so it lines up
       with the first line when the text runs onto two or more lines. */
    .palmer-form .palmer-radio-group:not(.palmer-radio-group--inline) > .palmer-radio-label,
    .palmer-form .palmer-checkbox-group > .palmer-checkbox-label,
    .palmer-form-section--has-sidebar .palmer-radio-group:not(.palmer-radio-group--inline) > .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-checkbox-group > .palmer-checkbox-label {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.35 !important;
    }

    /* Inline groups: flow left-to-right and wrap onto the next line as needed,
       and let each long option wrap its own text instead of overflowing. The
       group is NOT forced to full width, so short inline options still sit
       beside their question label. */
    .palmer-form .palmer-radio-group--inline,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .palmer-form .palmer-radio-group--inline > .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline > .palmer-radio-label {
        display: flex !important;
        align-items: flex-start !important;
        flex: 0 1 auto !important;
        width: auto !important;       /* beat the global width:100% on radio labels —
                                         each demanded 100% so two options shrank to a
                                         50/50 split, shoving option 2 to mid-row */
        max-width: 100% !important;
        line-height: 1.35 !important;
    }

    /* The text span fills the remaining width of the label and breaks long words
       so nothing overflows the container. top:0 drops the single-line optical
       nudge — flex-start handles vertical alignment for multi-line text. */
    .palmer-form .palmer-radio-label > .palmer-checkbox-text,
    .palmer-form .palmer-checkbox-label > .palmer-checkbox-text,
    .palmer-form-section--has-sidebar .palmer-radio-label > .palmer-checkbox-text,
    .palmer-form-section--has-sidebar .palmer-checkbox-label > .palmer-checkbox-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        top: 0 !important;
    }

    /* Keep the box from shrinking or dropping below the first text line. */
    .palmer-form .palmer-radio-label > input[type=radio],
    .palmer-form .palmer-checkbox-label > input[type=checkbox],
    .palmer-form-section--has-sidebar .palmer-radio-label > input[type=radio],
    .palmer-form-section--has-sidebar .palmer-checkbox-label > input[type=checkbox] {
        flex: 0 0 auto !important;
        margin-top: 1px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONDITIONAL-HIDDEN — SPECIFICITY OVERRIDE
   ----------------------------------------------------------------------------
   The base hide rule `.palmer-field-wrap--conditional-hidden { display:none }`
   is a single class. The sidebar layout, however, forces
   `.palmer-form-section--has-sidebar .palmer-field-wrap { display:flex!important }`
   (and `display:block!important` at narrower widths) — TWO classes — which wins
   the !important tie-break on specificity and leaves conditionally-hidden fields
   fully visible inside a sidebar step. The JS still adds the hide class (so the
   field reports as hidden), but it stays on screen. These higher-specificity
   selectors force the hide back on, in every layout and at every breakpoint.
   ──────────────────────────────────────────────────────────────────────────── */
.palmer-field-wrap.palmer-field-wrap--conditional-hidden,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--conditional-hidden,
.palmer-form-section--has-sidebar .palmer-form__step .palmer-field-wrap.palmer-field-wrap--conditional-hidden {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTO-FILLED — LOCKED FIELD STATE
   ----------------------------------------------------------------------------
   When the auto-fill trigger matches, the field stays VISIBLE but locked:
   the forced answer is shown, a small mint "Auto-filled" lock pill sits next
   to the label, and the inputs can't be interacted with (pointer-events here,
   tabindex + readonly + a change backstop in the JS). Selectors are doubled
   with the has-sidebar prefix for the same specificity reason as the hide
   rule above — the sidebar layout's two-class !important rules would
   otherwise override these.
   ──────────────────────────────────────────────────────────────────────────── */

/* The locked answer stays fully legible; only interactivity is removed. */
.palmer-field-wrap.palmer-field-wrap--autofill-locked input,
.palmer-field-wrap.palmer-field-wrap--autofill-locked select,
.palmer-field-wrap.palmer-field-wrap--autofill-locked textarea,
.palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-radio-group,
.palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-checkbox-group,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked input,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked select,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked textarea,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-radio-group,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-checkbox-group {
    pointer-events: none !important;
    cursor: default !important;
}

/* Quiet the parts that are NOT the answer: unselected options fade back,
   so the locked choice reads instantly. The selected option stays at full
   strength via the rule below. */
.palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-radio-label,
.palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-checkbox-label,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-radio-label,
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-checkbox-label {
    opacity: 0.35 !important;
    transition: opacity 0.25s ease !important;
}

.palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-radio-label:has(input:checked),
.palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-checkbox-label:has(input:checked),
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-radio-label:has(input:checked),
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked .palmer-checkbox-label:has(input:checked) {
    opacity: 1 !important;
}

/* Text-style inputs get a soft mint wash so "filled for you" reads at a glance. */
.palmer-field-wrap.palmer-field-wrap--autofill-locked input[readonly],
.palmer-field-wrap.palmer-field-wrap--autofill-locked textarea[readonly],
.palmer-field-wrap.palmer-field-wrap--autofill-locked select[aria-disabled="true"],
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked input[readonly],
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked textarea[readonly],
.palmer-form-section--has-sidebar .palmer-field-wrap.palmer-field-wrap--autofill-locked select[aria-disabled="true"] {
    background-color: rgba(135, 210, 210, 0.08) !important;
    border-color: rgba(135, 210, 210, 0.55) !important;
    color: #555 !important;
}

/* The "Auto-filled" pill: lock icon + word, mint, minimal. Sits inline right
   after the field label. role=status so screen readers announce it. */
.palmer-autofill-badge,
.palmer-form-section--has-sidebar .palmer-autofill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: 10px !important;
    padding: 2px 10px 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(135, 210, 210, 0.14) !important;
    border: 1px solid rgba(135, 210, 210, 0.45) !important;
    color: #4FAFAF !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    user-select: none !important;
}

.palmer-autofill-badge svg {
    width: 11px !important;
    height: 11px !important;
    stroke: #4FAFAF !important;
    stroke-width: 1.6 !important;
    fill: none !important;
    flex: 0 0 auto !important;
}

.palmer-autofill-badge svg rect {
    fill: rgba(135, 210, 210, 0.25) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PER-OPTION CONDITIONS — HIDDEN OPTION ROWS
   ----------------------------------------------------------------------------
   JS toggles .palmer-option--condition-hidden on individual radio/checkbox
   option labels (select <option>s are hidden via attributes instead). The
   selectors are deliberately high-specificity and placed last: the layout
   rules elsewhere force option labels to display:flex !important with up to
   four class-level selectors, and a hidden option must beat them everywhere
   (default layout, sidebar layout, every breakpoint).
   ──────────────────────────────────────────────────────────────────────────── */
.palmer-radio-label.palmer-option--condition-hidden,
.palmer-checkbox-label.palmer-option--condition-hidden,
.palmer-form .palmer-radio-group .palmer-radio-label.palmer-option--condition-hidden,
.palmer-form .palmer-checkbox-group .palmer-checkbox-label.palmer-option--condition-hidden,
.palmer-form-section--has-sidebar .palmer-form .palmer-radio-group .palmer-radio-label.palmer-option--condition-hidden,
.palmer-form-section--has-sidebar .palmer-form .palmer-checkbox-group .palmer-checkbox-label.palmer-option--condition-hidden,
.palmer-form-section--has-sidebar .palmer-form__step .palmer-radio-label.palmer-option--condition-hidden,
.palmer-form-section--has-sidebar .palmer-form__step .palmer-checkbox-label.palmer-option--condition-hidden {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PER-OPTION INFO EYE
   ----------------------------------------------------------------------------
   Small info eye rendered INSIDE the option's text span (right at the end of
   the text) when the option line carries a trailing "| popup-image: URL"
   (or popup: / popup-link:) segment. Living inside the text flow means it
   hugs the last word — even when long labels wrap — instead of being pushed
   to the far edge of the row, and vertical-align centers it on the text line.
   Inherits behavior from .palmer-popup-eye (same class + JS binding).
   ──────────────────────────────────────────────────────────────────────────── */
.palmer-checkbox-text .palmer-option-eye,
.palmer-form-section--has-sidebar .palmer-checkbox-text .palmer-option-eye {
    display: inline-flex !important;
    vertical-align: -0.18em !important;   /* optically centers on the text line */
    margin-left: 7px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #b9b9b9 !important;
    line-height: 1 !important;
    pointer-events: auto !important;      /* clickable even where text span isn't */
}

.palmer-checkbox-text .palmer-option-eye:hover,
.palmer-form-section--has-sidebar .palmer-checkbox-text .palmer-option-eye:hover {
    color: #87D2D2 !important;
}

.palmer-checkbox-text .palmer-option-eye svg,
.palmer-form-section--has-sidebar .palmer-checkbox-text .palmer-option-eye svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIELD POPUP — IMAGE MODE + CLEAN CLOSE BUTTON
   ----------------------------------------------------------------------------
   Image popups render BARE: just the picture on the dimmed overlay — no white
   card, padding, or drop shadow (JS adds --image to the box for image type).
   Text popups keep the white card. The close button is redesigned as a small
   white circular button with a subtle border; hover tints it mint with a tiny
   lift instead of a loud background swap. !important throughout so theme
   button styles can't repaint it.
   ──────────────────────────────────────────────────────────────────────────── */
.palmer-field-popup-box.palmer-field-popup-box--image {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: min(90vw, 860px) !important;
    width: auto !important;
}

.palmer-field-popup-box.palmer-field-popup-box--image img {
    max-width: 100% !important;
    max-height: 82vh !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Kill any shadow a theme / lightbox style tries to put on the popup image
   (the 'insane shadow'). Covers the <img> and its wrapper, from EITHER a
   box-shadow or a drop-shadow filter. The box's own focus-in blur is applied
   one level up on .palmer-field-popup-box, so it is unaffected. */
.palmer-field-popup-box.palmer-field-popup-box--image .palmer-field-popup-content,
.palmer-field-popup-box.palmer-field-popup-box--image img {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Same kill, but at ID strength (#palmer-field-popup-overlay) so it outranks a
   stubborn theme/lightbox rule that uses an ID or deep selector. box-shadow on
   the box element is killed WITHOUT touching its filter, so the focus-in blur
   animation survives; the <img>/content get both shadow + filter zeroed. */
#palmer-field-popup-overlay .palmer-field-popup-box.palmer-field-popup-box--image {
    box-shadow: none !important;
}
#palmer-field-popup-overlay .palmer-field-popup-box--image .palmer-field-popup-content,
#palmer-field-popup-overlay .palmer-field-popup-box--image img {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    background: transparent !important;
}

/* Close button — a translucent box pinned INSIDE the popup's top-right corner.
   The × is an inline SVG (not a text glyph), so it is geometrically centered.
   Image mode: dark glass box + white × so it reads on any photo.
   Text mode: faint grey box + dark × on the white card. */
.palmer-field-popup-box .palmer-field-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.07) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.60) !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, color 0.18s ease !important;
}

.palmer-field-popup-box .palmer-field-popup-close svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}

.palmer-field-popup-box .palmer-field-popup-close:hover,
.palmer-field-popup-box .palmer-field-popup-close:focus-visible {
    background: rgba(0, 0, 0, 0.14) !important;
    color: rgba(0, 0, 0, 0.85) !important;
    outline: none !important;
}

/* Image mode: dark translucent glass + white ×, inside the image's corner. */
.palmer-field-popup-box.palmer-field-popup-box--image .palmer-field-popup-close {
    top: 10px !important;
    right: 10px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

.palmer-field-popup-box.palmer-field-popup-box--image .palmer-field-popup-close:hover,
.palmer-field-popup-box.palmer-field-popup-box--image .palmer-field-popup-close:focus-visible {
    background: rgba(0, 0, 0, 0.65) !important;
    color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   LABEL COLUMN WITH INFO EYE — TYPE-AWARE WIDTH (DESKTOP)
   ----------------------------------------------------------------------------
   The eye wrapper (.palmer-label-row) must not indent controls (eye + 220px
   label used to overshoot the column). Resolution depends on the field type:
   \u2022 SELECT / text-style fields sit in a vertical column of controls, so the
     label-row is a FIXED 220px column and long labels wrap inside it \u2014 every
     dropdown/input stays perfectly aligned.
   \u2022 RADIO / CHECKBOX questions flow their options after the label, so the
     row GROWS to keep long labels on one line (capped so it can never crowd
     the options). Mobile (\u2264769px) stacks labels full-width and is untouched.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 770px) {
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-label-row {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-label-row label,
    .palmer-form-section--has-sidebar .palmer-field-wrap .palmer-label-row .palmer-field-label {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        line-height: 1.3 !important;
    }

    /* Radio/checkbox questions: row grows so the label stays on one line. */
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio .palmer-label-row,
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox .palmer-label-row {
        width: auto !important;
        min-width: 220px !important;
        max-width: min(46%, 460px) !important;
    }

    .palmer-form-section--has-sidebar .palmer-field-wrap--radio .palmer-label-row label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio .palmer-label-row .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox .palmer-label-row label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox .palmer-label-row .palmer-field-label {
        flex: 0 1 auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   INLINE RADIO GROUPS — OPTIONS SIT SNUG (DESKTOP), FINAL OVERRIDE
   ----------------------------------------------------------------------------
   Two-option inline radios (1" / 3/4", yes / no, flat / angled) were spreading
   across the row. Multiple inherited rules can cause that (labels demanding
   width:100% and shrinking 50/50, text spans with flex-grow, group stretching,
   justify distribution), so this block — placed last — pins every link in the
   chain: the group shrink-wraps its content, options are exactly content-wide,
   text spans don't grow, and options separate only by the fixed gap.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 770px) {
    .palmer-form .palmer-radio-group--inline,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline,
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-radio-group--inline {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        gap: 32px !important;
    }

    .palmer-form .palmer-radio-group--inline .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline .palmer-radio-label,
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-radio-group--inline .palmer-radio-label {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    .palmer-form .palmer-radio-group--inline .palmer-radio-label > .palmer-checkbox-text,
    .palmer-form-section--has-sidebar .palmer-radio-group--inline .palmer-radio-label > .palmer-checkbox-text,
    .palmer-form-section--has-sidebar .palmer-form__step .palmer-radio-group--inline .palmer-radio-label > .palmer-checkbox-text {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOTSTRAP ROW OVERFLOW — FORM WIDTH FIX
   ----------------------------------------------------------------------------
   .row.palmer-form__fields is a Bootstrap row: it carries negative left/right
   margins meant to be absorbed by a padded .container parent, which this form
   does not have. Result: every step's field row extends ~16px past the form on
   each side, producing horizontal overflow. Fix: zero the row's negative
   margins, strip the columns' compensating side padding so fields stay flush
   with the section headers, and rebuild the gutter between side-by-side fields
   with an explicit column-gap plus corrected column widths.
   ──────────────────────────────────────────────────────────────────────────── */
.palmer-form .row.palmer-form__fields {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    column-gap: 30px !important;
}

.palmer-form .row.palmer-form__fields > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Side-by-side columns: subtract their share of the 30px gutter so
   width + gap still sums to 100% and nothing wraps or overflows. */
@media (min-width: 768px) {
    .palmer-form .row.palmer-form__fields > .col-md-6 {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
    }
    .palmer-form .row.palmer-form__fields > .col-md-4 {
        flex: 0 0 calc(33.333% - 20px) !important;
        max-width: calc(33.333% - 20px) !important;
    }
    .palmer-form .row.palmer-form__fields > .col-md-3 {
        flex: 0 0 calc(25% - 22.5px) !important;
        max-width: calc(25% - 22.5px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   INFO EYE — INTUITIVE HOVER (HALO + TOOLTIP)
   ----------------------------------------------------------------------------
   The eye is a <button>, so the theme's button:hover background was painting
   it into a solid teal disc that swallowed the icon. Replaced with a proper
   icon-button hover: a soft mint halo (translucent, so the ⓘ stays visible),
   a darker-teal ink for contrast, a gentle grow, and a small "More info"
   tooltip that appears after a beat — plus the same treatment on keyboard
   focus. Negative margins offset the halo padding so layout never shifts.
   ──────────────────────────────────────────────────────────────────────────── */
.palmer-popup-eye,
.palmer-form .palmer-popup-eye,
.palmer-form-section--has-sidebar .palmer-popup-eye {
    position: relative !important;
    border-radius: 50% !important;
    padding: 4px !important;
    margin: -4px !important;                 /* halo without layout shift */
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .18s ease, color .18s ease, transform .18s ease !important;
}

/* per-option eyes keep their 7px text gap (7 - 4 halo offset = 3) */
.palmer-checkbox-text .palmer-option-eye,
.palmer-form-section--has-sidebar .palmer-checkbox-text .palmer-option-eye {
    margin: -4px -4px -4px 3px !important;
}

.palmer-popup-eye:hover,
.palmer-popup-eye:focus-visible {
    background: rgba(135, 210, 210, 0.25) !important;
    color: #1f9e9e !important;               /* darker teal — legible on the halo */
    transform: scale(1.08);
    outline: none !important;
}

.palmer-popup-eye:active {
    transform: scale(0.94);
}

/* ── "More info" tooltip ── */
.palmer-popup-eye::after {
    content: 'More info';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: #2b2b2b;
    color: #fff;
    font-family: Jost, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease .25s, transform .15s ease .25s;
    z-index: 60;
}

.palmer-popup-eye:hover::after,
.palmer-popup-eye:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Touch devices have no hover — suppress the tooltip so it can't stick open
   after a tap (the tap opens the popup anyway). */
@media (hover: none) {
    .palmer-popup-eye::after { display: none !important; }
}

/* Link-type info buttons (external-link icon) say what they do. */
.palmer-popup-eye--link::after {
    content: 'Open link';
}

/* The badge may only ever show on a LOCKED field — declaratively. This makes
   stale badges impossible regardless of how the inline style battle goes. */
.palmer-field-wrap:not(.palmer-field-wrap--autofill-locked) .palmer-autofill-badge {
    display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   CUSTOM ANIMATED DROPDOWN
   Replaces the native <select> popup (which can't be animated and flashes
   black in Chrome). The native <select> stays in the DOM (hidden) as the
   source of truth; JS builds the trigger + panel below. Styling mirrors the
   three native contexts: desktop underline, mobile boxed, and sidebar boxed.
   ═══════════════════════════════════════════════════════════════════════ */

.palmer-select { position: relative; width: 100%; }
.palmer-form .palmer-field-wrap > .palmer-select { width: 100% !important; }
.palmer-form-section--has-sidebar .palmer-form .palmer-field-wrap > .palmer-select {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
}

/* Native select: kept for submission/validation but visually removed. Not
   display:none (that breaks required-field focus) — just transparent + inert. */
.palmer-select > select.palmer-select__native {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    opacity: 0 !important; pointer-events: none !important;
    border: 0 !important; background: none !important; z-index: 0 !important;
}

/* Trigger — desktop underline style (matches .palmer-form select) */
.palmer-select__trigger {
    position: relative; z-index: 1; box-sizing: border-box;
    width: 100%; display: block; text-align: left;
    cursor: pointer; -webkit-user-select: none; user-select: none;
    font-family: Jost, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2;
    color: rgba(0, 0, 0, 0.60);
    background: url('https://dev.palmerindustries.com/wp-content/uploads/2025/04/Vector-2.svg') no-repeat right 10px center #fff;
    background-size: 30px 30px;
    border: 0; border-bottom: 1px solid #000; border-radius: 0;
    padding: 5px 40px 5px 5px;
    transition: border-color 0.2s;
}
.palmer-select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palmer-select.palmer-has-value .palmer-select__value { color: #000; }
.palmer-select__trigger:focus,
.palmer-select--open .palmer-select__trigger { outline: none; border-bottom-color: #87D2D2; }

/* Disabled select → inert trigger */
.palmer-select__native:disabled ~ .palmer-select__trigger { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* Error state mirrored from the native select's .palmer-field-error */
.palmer-select.palmer-field-error .palmer-select__trigger {
    border-color: #e53e3e !important; outline: 1.5px solid #e53e3e !important; outline-offset: 0 !important;
}

/* While a dropdown is open, lift the select — and whatever step / field-wrap
   contains it — above sibling content (breadcrumb trail, later fields), so the
   panel can never paint underneath them even if an ancestor is a stacking
   context. */
.palmer-select--open { z-index: 40; }
.palmer-field-wrap:has(.palmer-select--open) { position: relative; z-index: 40; }
.palmer-form__step:has(.palmer-select--open) { position: relative; z-index: 40; }

/* Panel — the animatable list */
.palmer-select__panel {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 1000;
    background: #fff; border: 1px solid #c8c8c8; border-radius: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; transform: translateY(-6px); transform-origin: top center;
    visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.palmer-select--open .palmer-select__panel {
    opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.palmer-select--up .palmer-select__panel {
    top: auto; bottom: 100%; margin: 0 0 4px; transform-origin: bottom center;
}

.palmer-select__option {
    padding: 11px 14px; font-family: Jost, sans-serif; font-size: 16px; line-height: 1.3;
    color: #333; cursor: pointer;
}
.palmer-select__option:hover,
.palmer-select__option--active { background: rgba(135, 210, 210, 0.18); }
.palmer-select__option--selected { color: #000; font-weight: 600; }
.palmer-select__option--disabled { color: #bbb; cursor: not-allowed; background: none; }

@media (prefers-reduced-motion: reduce) {
    .palmer-select__panel { transition: none !important; }
}

/* Mobile: match the boxed native select (<=769px) */
@media (max-width: 769px) {
    .palmer-select__trigger {
        font-size: 16px; line-height: 1.35; color: #333;
        min-height: 44px; padding: 11px 36px 11px 12px;
        border: 1px solid #c8c8c8;
        background-position: right 12px center;
    }
    .palmer-select.palmer-has-value .palmer-select__value { color: #333; }
    .palmer-select__trigger:focus,
    .palmer-select--open .palmer-select__trigger { border-color: #87D2D2; }
}

/* Sidebar context: match the boxed 14px sidebar select */
.palmer-form-section--has-sidebar .palmer-select__trigger {
    font-size: 14px; line-height: 1.4; color: #bbb;
    border: 1px solid #c8c8c8; border-radius: 0;
    padding: 9px 30px 9px 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px 14px;
}
.palmer-form-section--has-sidebar .palmer-select.palmer-has-value .palmer-select__value { color: #333; }
.palmer-form-section--has-sidebar .palmer-select__trigger:focus,
.palmer-form-section--has-sidebar .palmer-select--open .palmer-select__trigger { border-color: #87D2D2; }

/* ═══════════════════════════════════════════════════════════════════════
   STYLE (AUTO) FIELD
   A locked answer rather than an input: the product line this form quotes,
   filled in from the widget's Product Style setting. Sits in the same column
   an input would, so it reads as an already-answered question.
   ═══════════════════════════════════════════════════════════════════════ */

.palmer-style-value {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 0 !important;
    font-family: Jost, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: #000 !important;
}

.palmer-style-value__text {
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* Small mint dot — a quiet "this one's already decided" marker. */
.palmer-style-value__lock {
    font-size: 7px !important;
    line-height: 1 !important;
    color: #87D2D2 !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 769px) {
    .palmer-style-value { font-size: 16px !important; padding: 8px 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SELECTION BREADCRUMB
   A quiet, live trail of the user's choices (dropdowns / radios / checkboxes),
   injected at the top of the form. Hidden until there's something to show;
   each pill jumps back to its field. Kept deliberately understated.
   ═══════════════════════════════════════════════════════════════════════ */

.palmer-breadcrumb {
    /* Entrance offset lives in a custom property so the --below variant can flip
       its direction WITHOUT re-declaring `transform`. It used to, and because it
       sits later in this file it out-specified --visible, pinning the trail 4px
       below its resting spot and making every FLIP reposition start off-target. */
    --crumb-rise: -4px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0 0 22px; padding: 0 0 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0; transform: translateY(var(--crumb-rise));
    /* Fade a little quicker than it settles, and ease OUT of the move so a
       reposition decelerates into place instead of coasting at full speed. */
    transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.palmer-breadcrumb[hidden] { display: none; }
.palmer-breadcrumb--visible { opacity: 1; transform: translateY(0); }

/* Below-the-form placement: separator + spacing flip to the top */
.palmer-breadcrumb--below {
    --crumb-rise: 4px;
    margin: 22px 0 0; padding: 15px 0 0;
    border-bottom: 0; border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.palmer-breadcrumb__lead {
    font-family: Jost, sans-serif; font-size: 10px; font-weight: 500;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.38); white-space: nowrap; margin-right: 2px;
}

/* Squared, compact tags — shape per the reference image, keeping the soft fill */
.palmer-crumb {
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 230px; padding: 4px 9px; margin: 0;
    position: relative;
    font-family: Jost, sans-serif; line-height: 1.25; text-align: left;
    background: rgba(135, 210, 210, 0.12);
    border: 1px solid rgba(135, 210, 210, 0.42);
    border-radius: 4px; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.palmer-crumb:hover { background: rgba(135, 210, 210, 0.22); border-color: rgba(135, 210, 210, 0.65); }
.palmer-crumb:focus-visible { outline: 2px solid #87D2D2; outline-offset: 2px; }
.palmer-crumb:active { transform: translateY(1px); }

.palmer-crumb__label {
    font-size: 10px; letter-spacing: 0.03em; color: rgba(0, 0, 0, 0.45);
    max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 0 1 auto; text-transform: uppercase;
}
.palmer-crumb__value {
    font-size: 12px; font-weight: 500; color: #111;
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Custom tooltip (JS-positioned, appended to <body> so nothing can clip it) */
.palmer-crumb-tip {
    position: fixed; z-index: 2147483000;
    max-width: 300px; padding: 9px 12px;
    background: #ffffff; color: #333333;
    font-family: Jost, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4;
    letter-spacing: 0.01em; text-transform: none; text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    white-space: normal; pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease;
}
.palmer-crumb-tip[hidden] { display: none; }
.palmer-crumb-tip--visible { opacity: 1; }

/* Arrow: a small rotated square so it inherits the card's border + fill */
.palmer-crumb-tip::after {
    content: ''; position: absolute;
    width: 10px; height: 10px; background: #ffffff;
    left: var(--tip-arrow, 50%);
    bottom: -5px; transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.palmer-crumb-tip--below::after {
    bottom: auto; top: -5px;
    border-right: none; border-bottom: none;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

/* Brief wash on the field a pill points to, so the jump is obvious */
.palmer-field-wrap--flash { animation: palmerCrumbFlash 1.3s ease; border-radius: 6px; }
@keyframes palmerCrumbFlash {
    0%   { background: rgba(135, 210, 210, 0); }
    18%  { background: rgba(135, 210, 210, 0.20); }
    100% { background: rgba(135, 210, 210, 0); }
}

@media (max-width: 769px) {
    .palmer-breadcrumb { gap: 5px; margin-bottom: 14px; padding-bottom: 9px; }
    .palmer-breadcrumb--below { margin: 14px 0 0; padding: 10px 0 0; }
    .palmer-breadcrumb__lead { display: none; }
    .palmer-crumb { max-width: 160px; padding: 4px 8px; }
    .palmer-crumb__label { max-width: 80px; }
    .palmer-crumb__value { max-width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    .palmer-breadcrumb { transition: none; }
    .palmer-crumb-tip { transition: none; }
    .palmer-field-wrap--flash { animation: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
   OPTION-FIELD LEFT ALIGNMENT
   ----------------------------------------------------------------------------
   Snaps an inline-radio / checkbox field's OPTIONS to the same left column as
   the dropdowns / text inputs above it, so the first box's left edge lines up
   exactly with a dropdown's left border edge (220px label column + 14px field
   gap = 234px).

   This applies to:
     • the "Specify Shelving Material" field, matched automatically by its field
       name (input[name="shelvingmaterial"]) — no Elementor change needed; and
     • any field given the CSS class  palmer-align-left  (Elementor → field →
       Advanced → "CSS Classes"), so the same fix is reusable on other fields.

   Short Yes/No inline radios that are NOT matched keep their default look
   (options hugging the question text), so they are unaffected.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 770px) {

    /* 1. Pin the question label back to the fixed 220px column. Undoes the
          auto-width + margin-right that normally lets a short radio question
          sit right beside its options. Covers a bare label and the eye-icon
          .palmer-label-row variant. */
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio.palmer-align-left > .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox.palmer-align-left > .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio.palmer-align-left > .palmer-label-row,
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox.palmer-align-left > .palmer-label-row,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio:has(input[name="shelvingmaterial"]) > .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio:has(input[name="shelvingmaterial"]) > .palmer-label-row {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        flex: 0 0 auto !important;
        margin-right: 0 !important;
    }

    /* 2. Options group starts flush at the column (220 label + 14 gap = 234). */
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio.palmer-align-left .palmer-radio-group,
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox.palmer-align-left .palmer-checkbox-group,
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio:has(input[name="shelvingmaterial"]) .palmer-radio-group {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* 3. Zero the box's own left offset so its LEFT EDGE (not just the group)
          sits at 234px, matching the dropdown's left border edge exactly. */
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio.palmer-align-left input[type=radio],
    .palmer-form-section--has-sidebar .palmer-field-wrap--checkbox.palmer-align-left input[type=checkbox],
    .palmer-form-section--has-sidebar .palmer-field-wrap--radio:has(input[name="shelvingmaterial"]) input[type=radio] {
        margin-left: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   LABEL FIT — GROW THE LABEL, SHRINK THE FIELD (no wrapping)
   ----------------------------------------------------------------------------
   The label column is normally pinned to 220px, so a long label (e.g. "Number
   of Front Vertical Posts") wraps onto two lines. Here the label is allowed to
   grow to whatever one line needs and the input shrinks to fill the rest:
     • min-width:220px keeps the aligned column for short labels (no drift);
     • max-width:60% stops a very long label from eating the whole input;
     • white-space:nowrap forces a single line (ellipsis only past the 60% cap,
       and the eye-icon tooltip still shows the full question).
   Scoped to single-input fields — radio/checkbox option rows are left alone.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 770px) {
    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) > label,
    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) > .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) > .palmer-label-row {
        width: auto !important;
        min-width: 220px !important;
        max-width: 60% !important;
        white-space: nowrap !important;
    }

    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) > label,
    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) > .palmer-field-label,
    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) .palmer-label-row label,
    .palmer-form-section--has-sidebar .palmer-field-wrap:not(.palmer-field-wrap--radio):not(.palmer-field-wrap--checkbox) .palmer-label-row .palmer-field-label {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
/* ════════════════════════════════════════════════════════════════════════════
   LEAD TIMES — collapsible last-step summary (data from the Leadtimes plugin)
   Matches the form language: Jost body, Baskervvile heading, teal accent.
   ════════════════════════════════════════════════════════════════════════════ */

.palmer-lt-block {
    --palmer-lt-accent: #87D2D2;
    position: relative;
    margin: 0 0 34px;
    border: 1px solid color-mix(in srgb, var(--palmer-lt-accent) 42%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--palmer-lt-accent) 9%, #ffffff) 0%,
            color-mix(in srgb, var(--palmer-lt-accent) 3%, #ffffff) 100%);
    overflow: hidden;
}

/* thin accent rule along the top edge */
.palmer-lt-block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--palmer-lt-accent);
    opacity: 0.9;
    z-index: 1;
}

/* ── Toggle header (whole header is the button) ─────────────── */
/* This is a real <button>, so the theme's global button background + hover
   would otherwise paint it into a solid teal slab and animate on hover.
   Force it flat so only our own card styling shows. */
.palmer-lt-block__toggle,
.palmer-form .palmer-lt-block__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 26px 32px;
    background: transparent !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit !important;
    -webkit-appearance: none;
    appearance: none;
    transition: none !important;
    transform: none !important;
}

.palmer-lt-block__toggle:hover,
.palmer-lt-block__toggle:focus,
.palmer-lt-block__toggle:active,
.palmer-form .palmer-lt-block__toggle:hover,
.palmer-form .palmer-lt-block__toggle:focus,
.palmer-form .palmer-lt-block__toggle:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    transform: none !important;
    outline: none !important;
}

.palmer-lt-block__toggle:focus-visible {
    outline: 2px solid var(--palmer-lt-accent) !important;
    outline-offset: -3px;
}

/* subtle, controlled affordance — only the chevron reacts */
.palmer-lt-block__toggle:hover .palmer-lt-block__chevron {
    background: color-mix(in srgb, var(--palmer-lt-accent) 26%, transparent);
}

.palmer-lt-block__head { display: block; }

.palmer-lt-block__eyebrow {
    display: block;
    font-family: Jost, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--palmer-lt-accent) 62%, #1c4b4b);
    margin-bottom: 8px;
}

.palmer-lt-block__title {
    display: block;
    font-family: "Baskervvile", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    color: #111111;
    text-transform: capitalize;
}

.palmer-lt-block__desc {
    display: block;
    font-family: Jost, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.55);
    margin: 8px 0 0;
    max-width: 62ch;
}

/* chevron */
.palmer-lt-block__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    color: color-mix(in srgb, var(--palmer-lt-accent) 60%, #163d3d);
    background: color-mix(in srgb, var(--palmer-lt-accent) 16%, transparent);
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.25s ease;
}
.palmer-lt-block__chevron svg { width: 16px; height: 16px; display: block; }
.palmer-lt-block.is-open .palmer-lt-block__chevron { transform: rotate(180deg); }

/* ── Collapsible region (smooth height via grid-rows) ───────── */
.palmer-lt-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.palmer-lt-block.is-open .palmer-lt-collapse { grid-template-rows: 1fr; }

.palmer-lt-collapse__inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 32px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.28s ease, transform 0.32s ease;
}
.palmer-lt-block.is-open .palmer-lt-collapse__inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.08s, transform 0.34s ease 0.06s;
}

/* ── Grid of finishes ───────────────────────────────────────── */
.palmer-lt-grid {
    list-style: none;
    margin: 0;
    padding: 4px 0 22px;
    display: grid;
    grid-template-columns: 1fr;                 /* mobile: single column   */
    column-gap: 44px;
}

@media (min-width: 770px) {
    .palmer-lt-block:not(.palmer-lt-block--cols1) .palmer-lt-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.palmer-lt-block--cols2 .palmer-lt-grid { grid-template-columns: 1fr 1fr; }
.palmer-lt-block--cols1 .palmer-lt-grid { grid-template-columns: 1fr; }

/* ── Row: name · dotted leader · value ──────────────────────── */
.palmer-lt-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 13px 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.palmer-lt-item__name {
    font-family: Jost, sans-serif;
    font-size: 15.5px;
    color: #2a2a2a;
    line-height: 1.3;
}

.palmer-lt-item__leader {
    flex: 1 1 auto;
    min-width: 14px;
    align-self: center;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.palmer-lt-item__val {
    font-family: Jost, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #141414;
    white-space: nowrap;
    padding-left: 4px;
}

/* teal tick before the value */
.palmer-lt-item__val::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--palmer-lt-accent);
    vertical-align: middle;
    transform: translateY(-1px);
}

/* Two-column layout: drop the trailing dividers so the base stays clean */
@media (min-width: 770px) {
    .palmer-lt-block:not(.palmer-lt-block--cols1) .palmer-lt-item:last-child,
    .palmer-lt-block:not(.palmer-lt-block--cols1) .palmer-lt-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }
}
.palmer-lt-block--cols1 .palmer-lt-item:last-child { border-bottom: none; }

/* ── color-mix fallback ─────────────────────────────────────── */
@supports not (background: color-mix(in srgb, red, blue)) {
    .palmer-lt-block          { border-color: rgba(135,210,210,0.5); background: #f4fbfb; }
    .palmer-lt-block__eyebrow { color: #2b7a7a; }
    .palmer-lt-block__chevron { color: #2b7a7a; background: rgba(135,210,210,0.18); }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .palmer-lt-collapse,
    .palmer-lt-collapse__inner,
    .palmer-lt-block__chevron { transition: none; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 769px) {
    .palmer-lt-block__toggle       { padding: 22px 20px; gap: 14px; }
    .palmer-lt-collapse__inner     { padding: 0 20px; }
    .palmer-lt-block__title        { font-size: 21px; }
    .palmer-lt-block__desc         { font-size: 14px; }
    .palmer-lt-item__name          { font-size: 15px; }
}

/* ── Selected finish: header chips + highlighted rows ───────── */
.palmer-lt-block__selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 14px;
}
.palmer-lt-block__selected[hidden] { display: none; }

.palmer-lt-block__selected-label {
    font-family: Jost, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
}

.palmer-lt-block__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.palmer-lt-chip {
    font-family: Jost, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--palmer-lt-accent) 20%, #ffffff);
    color: color-mix(in srgb, var(--palmer-lt-accent) 58%, #0e2f2f);
    border: 1px solid color-mix(in srgb, var(--palmer-lt-accent) 42%, transparent);
    white-space: nowrap;
}

/* highlighted row */
.palmer-lt-item--selected {
    background: color-mix(in srgb, var(--palmer-lt-accent) 15%, transparent);
    box-shadow: inset 3px 0 0 var(--palmer-lt-accent);
    border-radius: 4px;
    border-bottom-color: transparent;
    padding-left: 14px;
    padding-right: 12px;
}
.palmer-lt-item--selected .palmer-lt-item__name {
    color: #0e2f2f;
    font-weight: 600;
}
.palmer-lt-item--selected .palmer-lt-item__val {
    color: color-mix(in srgb, var(--palmer-lt-accent) 55%, #0e2f2f);
}
.palmer-lt-item--selected .palmer-lt-item__leader {
    border-bottom-color: color-mix(in srgb, var(--palmer-lt-accent) 45%, transparent);
}

/* color-mix fallback for the selection styling */
@supports not (background: color-mix(in srgb, red, blue)) {
    .palmer-lt-chip            { background: #eaf7f7; color: #2b7a7a; border-color: rgba(135,210,210,0.55); }
    .palmer-lt-item--selected  { background: rgba(135,210,210,0.16); box-shadow: inset 3px 0 0 #87D2D2; }
    .palmer-lt-item--selected .palmer-lt-item__val { color: #2b7a7a; }
}