/* ─── AI ASSISTANT (floating help button + chat panel) ─── */
      /* IDLE NUDGE (2026-06-12): when scrolling stops, the Contact Us
         widget gives a super-gentle vertical nudge to draw the eye — first
         after 4s idle, then every 2s until the user scrolls again. The
         --pill-bounce length is REGISTERED so it can animate, and it's ADDED
         into the pill's --pill-p transform so the nudge composes with the
         hero-lift position instead of overriding it. Barely-there: -4px. */
      @property --pill-bounce {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
      }
      /* one smooth up-and-settle — the old -1px waypoint made it "step down
         twice" on the way back (2026-06-12). Now: up to -4, then a
         single smooth ease back into place. */
      /* Crisp damped bounce (2026-06-14): snaps UP, falls past rest, bounces
         smaller, settles — a real bounce, not a single kick-up-and-drop. Amplitude
         halves each swing (12→6→3→1.5) so it reads obviously as a bounce, not dramatic. */
      @keyframes pill-bounce {
        0%   { --pill-bounce: 0px; }
        16%  { --pill-bounce: -7px; }     /* snap UP to the apex */
        40%  { --pill-bounce: -7px; }     /* HANG at the top — the split-second gravity-pull pause */
        63%  { --pill-bounce: 3px; }      /* gravity pulls it back down, past rest */
        78%  { --pill-bounce: -1.5px; }   /* small bounce */
        90%  { --pill-bounce: 0.5px; }    /* settle */
        100% { --pill-bounce: 0px; }
      }
      /* natural spring — overshoot-settle, matches the contact-us title bounce */
      .ai-help-toggle.bounce { animation: pill-bounce 0.6s cubic-bezier(0.33, 1, 0.68, 1); }

      .ai-help-toggle {
        position: fixed;
        bottom: 22px; /* final position unchanged (2026-06-12) */
        right: 22px;
        z-index: 250;
        height: 52px;                /* unified CTA height — was 47px (2026-07-08) */
        min-width: 126px;            /* both states (Contact Us / Back to Top) render the SAME width — no expansion on morph (2026-06-25) */
        justify-content: center;     /* centre the icon + label within that fixed width */
        padding: 0 20px;
        /* SHARP (2026-06-12): square corners, matching the
           hero CTAs — pill shape retired. */
        border-radius: 0;
        background: var(--red); /* red by default (2026-06-12) */
        color: var(--white);
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
        /* HERO-LIFT DRIVEN (2026-06-12): the pill rides up from
           below the screen as the hero translates up, and drops back
           down (vanishes) the moment the hero returns to its pre-shrink
           Y on scroll-up. --pill-p (0→1) is set by the hero scrub each
           frame; no opacity/transform transition — it tracks scroll. */
        opacity: var(--pill-p, 0);
        pointer-events: none;
        /* short rise so it clears into view sooner at the SAME low rest
           spot — the earlier "appears late" was the 130px travel from
           deep below; 36px sits just under the edge at p=0. */
        transform: translateY(calc((1 - var(--pill-p, 0)) * 36px + var(--pill-bounce, 0px)));
        transition: box-shadow 0.28s ease, background 0.2s ease;
      }
      /* TOUCH (mobile + tablet): opacity-only reveal — no upward translate, no bounce. The pill fades 0→1
         at its resting spot (its --pill-p is delayed ~250px of drag on touch, set in home.js). Laptop keeps
         the rise. (2026-07-10) */
      @media (hover: none) {
        .ai-help-toggle { transform: none; }
      }
      .ai-help-toggle.clickable { pointer-events: auto; }
      @media (hover: hover) and (pointer: fine) { .ai-help-toggle:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); } }
      .ai-help-toggle.open { background: var(--black); }
      .ai-help-toggle-label {
        white-space: nowrap;
      }
      /* context-aware contrast (2026-06-11): over dark/red
         sections the pill inverts, same philosophy as the nav text. */
      .ai-help-toggle.on-dark {
        /* RED + DARK only — no yellow (2026-06-12): over dark/red
           surfaces the pill goes dark navy with a hairline outline so it
           reads on both the red banner AND the black team. */
        background: var(--black);
        color: var(--white);
      }
      .ai-help-toggle.on-dark.open {
        background: var(--red);
        color: var(--white);
      }
      /* back-to-top morph (footer.js, on pages with the closing #cta-build):
         the pill flips to a brand-YELLOW "Back to Top" chip so it reads on the
         footer whatever its colour (white-grid home, red insights, white rest) —
         was white, which vanished on the white footer (2026-06-25). Beats
         .on-dark, hence !important. */
      .ai-help-toggle.is-back-to-top {
        background: #E3FF17 !important;
        color: var(--black) !important;
      }
      /* Homepage only: the Back-to-Top chip is BLACK (not the default yellow) once the pill crosses the Contact Us
         CTA — reads on the white home footer. Homepage-scoped via #team.tg-sec. (2026-07-10) */
      body:has(#team.tg-sec) .ai-help-toggle.is-back-to-top {
        background: var(--black) !important;
        color: var(--white) !important;
      }
      @media (max-width: 480px) {
        .ai-help-toggle { padding: 0 14px; }
        /* label stays — there is no icon anymore (2026-06-11) */
      }

      /* ─── CONTACT PANEL — fixed white contact card: masthead (headline · phone ·
         hours · email) + always-visible request form. White surface, black text,
         red form accents. Sharp corners; single-axis RISE, per the site pop-up convention.
         Self-contained palette — the panel does NOT follow the pill tone engine. */
      .ai-help-panel {
        position: fixed;
        bottom: 84px;
        right: 22px;
        z-index: 251;
        width: 492px;                              /* 528 → 492 (2026-07-22): the L/R inner inset dropped 44 → 26 to match the
                                                      26px sitting under the submit button, so the panel narrows by the same
                                                      2×18px the padding gave up. Content column stays exactly 440px wide —
                                                      the fields and the submit button are not resized, only the gutters. */
        max-width: calc(100vw - 44px);
        max-height: min(86vh, 880px);
        background: #fff;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        --cw-ink: #191A1C;
        --cw-accent: #E43338;
        --cw-accent-ink: #ffffff;
        --cw-line: rgba(16, 24, 32, 0.22);
      }
      .ai-help-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .ai-help-body { overflow-y: auto; }
      @media (prefers-reduced-motion: reduce) {
        .ai-help-panel { transition: none; transform: none; }
      }

      /* ── MASTHEAD ── */
      .cw-mast { position: relative; padding: 26px 26px 26px; border-bottom: 1px solid rgba(16, 24, 32, 0.08); }   /* (2026-07-22) uniform 26px inset — matches the gap under the submit button, which is the panel's reference edge. Was 20px 44px 26px (the 07-17 "squish"); the extra 18px of L/R came off the panel width instead, so the content column is unchanged. */
      .cw-mast-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
      .ai-help-close {
        width: 30px; height: 30px; flex: none;
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: none; color: var(--cw-ink);
        cursor: pointer; line-height: 1; transition: background 0.18s ease;
      }
      @media (hover: hover) and (pointer: fine) { .ai-help-close:hover { background: rgba(16, 24, 32, 0.12); } }
      .ai-help-close svg { width: 13px; height: 13px; display: block; }
      .cw-head { font-weight: 900; font-size: 41px; letter-spacing: -0.03em; line-height: 0.92; text-transform: uppercase; color: var(--cw-ink); margin: 0 0 22px; white-space: nowrap; }   /* -10% (46→41) 2026-07-17 */
      .cw-phone { display: block; font-weight: 900; font-size: 28px; letter-spacing: -0.02em; line-height: 1; color: var(--cw-ink); text-decoration: none; white-space: nowrap; margin-bottom: 11px; }
      @media (hover: hover) and (pointer: fine) { .cw-phone:hover { opacity: 0.82; } }
      .cw-hours { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(16, 24, 32, 0.66); margin: 0 0 20px; white-space: nowrap; }
      .cw-mail { display: inline-block; font-size: 14px; font-weight: 600; color: var(--cw-ink); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(16, 24, 32, 0.5); padding-bottom: 2px; transition: border-color 0.15s ease; }
      @media (hover: hover) and (pointer: fine) { .cw-mail:hover { border-color: var(--cw-ink); } }

      /* ── FORM ── */
      .cp-form { padding: 26px 26px 26px; }   /* (2026-07-22) uniform 26px inset, same as the masthead — every edge of the panel now matches the gap under the submit button. Was 24px 44px 26px. */
      .cw-form-ey { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-accent); margin: 0 0 18px; white-space: nowrap; }
      .cw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 16px; }
      .cw-fld { display: flex; flex-direction: column; min-width: 0; }
      .cw-fld.cw-full { grid-column: 1 / -1; }
      .cw-fld label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #888; margin-bottom: 7px; white-space: nowrap; }
      .cp-req { color: var(--cw-accent); }
      .cp-form input, .cp-form textarea {
        width: 100%; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500;
        color: var(--cw-ink); background: transparent; border: none;
        border-bottom: 1px solid var(--cw-line); border-radius: 0;
        padding: 0 0 7px; outline: none; transition: border-color 0.2s ease;
      }
      .cp-form input::placeholder, .cp-form textarea::placeholder { color: rgba(16, 24, 32, 0.4); font-weight: 400; }
      .cp-form input:focus, .cp-form textarea:focus { border-bottom-color: var(--cw-accent); }
      .cp-form textarea { resize: none; overflow: hidden; min-height: 60px; line-height: 1.5; }

      /* ── ATTACH + SUBMIT ── */
      .cw-attach-wrap { margin: 16px 0 20px; }
      .cp-attach {
        display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 0;
        background: none; border: none; cursor: pointer;
        font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase; color: #5a5f64; white-space: nowrap;
        transition: color 0.16s ease;
      }
      @media (hover: hover) and (pointer: fine) { .cp-attach:hover { color: var(--cw-accent); } }
  /* Visually hidden but FOCUSABLE (2026-07-22). display:none removed the file input from the tab order entirely, so attaching drawings was impossible without a mouse — and the label wrapper is not focusable on its own. :focus-within gives the visible indicator. */
      .cp-attach input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
      .cp-attach:focus-within { outline:3px solid #E43338; outline-offset:3px; }
      .cp-attach svg { width: 15px; height: 15px; display: block; }
      .cp-turnstile { margin: 2px 0 14px; }
      .cp-submit {
        width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px;
        border: none; cursor: pointer; background: var(--cw-accent); color: var(--cw-accent-ink);
        font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700;
        letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
        transition: background 0.2s ease, transform 0.2s ease;
      }
      .cp-submit svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
      @media (hover: hover) and (pointer: fine) {
        .cp-submit:hover { background: var(--cw-ink); transform: translateX(4px); }
        .cp-submit:hover svg { transform: translateX(2px); }
      }
      .cp-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #C42A2F; }
      .cp-thanks { text-align: center; padding: 28px 6px; }
      .cp-thanks .cp-h2 { display: block; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--cw-ink); }
      .cp-thanks p { font-size: 13px; line-height: 1.55; color: #666; margin-top: 10px; }
      .cp-thanks a { color: var(--cw-accent); }

      @media (max-width: 560px) {
        .cw-head { font-size: 34px; }   /* -10% (38→34) 2026-07-17 */
        .cw-grid { grid-template-columns: 1fr; }
        /* (2026-07-22) the `padding-left/right: 28px` override that sat here is gone.
           It existed to ease the 44px desktop "squish" on narrow screens; the base is
           now a uniform 26px, so overriding it to 28 would have made phones the ONLY
           place with unequal padding — the opposite of the intent. */
      }