/* ─────────── MARQUEE ─────────── */
    .mq{position:relative;overflow:hidden;padding:16px 0;background:#ffffff;
        border-top:1px solid rgba(27,31,29,0.12);border-bottom:1px solid rgba(27,31,29,0.12);
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
                mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
    .mq-track{display:flex;width:max-content;animation:mqScroll var(--mq-dur,34s) linear infinite;}
    .mq-run{display:flex;align-items:center;flex:none;}
    .mq-item{display:inline-flex;align-items:center;gap:10px;padding:0 26px;white-space:nowrap;
             font-family:var(--f-head);font-size:19px;font-weight:700;letter-spacing:-.3px;
             color:#161d2b;}                      /* embossed base — nearly the bg colour */
    .mq-ico{font-style:normal;font-size:17px;filter:grayscale(.55) opacity(.5);}
    /* the lit copy — same text, clipped to a travelling gradient */
    .mq-lit{position:absolute;inset:16px 0 auto 0;pointer-events:none;}
    .mq-lit .mq-item{
        background:linear-gradient(90deg,
            transparent 0%, transparent 32%,
            #ffe15d 41%, #ffe15d 47%, #eefbf6 50%, #ffe15d 53%, #ffe15d 59%,
            transparent 68%, transparent 100%);
        background-size:260% 100%;
        -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; color:#0e5747;
        animation:mqSweep 7s linear infinite;}
    .mq-lit .mq-ico{filter:none;opacity:1;-webkit-text-fill-color:initial;}
    @keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @keyframes mqSweep{from{background-position:180% 0}to{background-position:-80% 0}}
    @media(max-width:640px){.mq-item{font-size:16px;padding:0 18px}}
    @media(prefers-reduced-motion:reduce){
      .mq-track{animation:none}
      .mq-lit{display:none}
      .mq-item{color:var(--t2)}
      .mq-ico{filter:none;opacity:1}
    }

    /* ─────────── BACKGROUND ATMOSPHERE ─────────── */
    /* Grain: a tiny SVG turbulence tile, so large dark areas are not dead flat. */
    body.page-crm-archive::before, body.page-dialer-archive::before{
      content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.032;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
    /* Lift the page content above the grain and the aurora. This used to be
       "> *", which also caught the direct children that position themselves —
       the sticky bar, the scroll progress and the cookie banner were all
       forced back to position:relative, so their left/right offsets shifted
       them sideways instead of pinning them, and the page grew a horizontal
       scrollbar. Only the content elements need lifting. */
    body.page-crm-archive > main, body.page-crm-archive > section, body.page-crm-archive > footer, body.page-crm-archive > .m-bar,
    body.page-dialer-archive > main, body.page-dialer-archive > section, body.page-dialer-archive > footer, body.page-dialer-archive > .m-bar{position:relative;z-index:1;}
    /* grain sits above the aurora but below content */
    body.page-crm-archive::before, body.page-dialer-archive::before{z-index:0;}

    /* Page-level aurora. This is the "background image" — a soft mesh painted
       behind everything, fixed so it does not scroll away. Sits under content
       via the z-index rule below. */
    body.page-crm-archive, body.page-dialer-archive{
      background-color:#ffffff;
      background-image:radial-gradient(58% 46% at 14% 0%,   rgba(255,225,93,0.48), transparent 66%),
        radial-gradient(46% 40% at 92% 6%,   rgba(139,92,246,.20), transparent 68%),
        radial-gradient(70% 44% at 50% 34%,  rgba(6,214,199,.085), transparent 70%),
        radial-gradient(60% 50% at 8%  72%,  rgba(255,225,93,0.176), transparent 70%),
        radial-gradient(52% 44% at 96% 92%,  rgba(139,92,246,.13), transparent 70%);
      background-attachment:fixed;
      background-repeat:no-repeat;color:#0e5747}
    body.page-dialer-archive{
      background-image:radial-gradient(58% 46% at 14% 0%,   rgba(240,160,48,.22), transparent 66%),
        radial-gradient(46% 40% at 92% 6%,   rgba(255,225,93,0.384), transparent 68%),
        radial-gradient(70% 44% at 50% 34%,  rgba(6,214,199,.08),  transparent 70%),
        radial-gradient(60% 50% at 8%  72%,  rgba(240,160,48,.10), transparent 70%),
        radial-gradient(52% 44% at 96% 92%,  rgba(255,225,93,0.208), transparent 70%);color:#0e5747}
    /* Bands sit on translucent grounds so the aurora reads through them. */
    body.page-crm-archive .hb, body.page-dialer-archive .hb{background:#eefbf6;}
    /* .hb-alt is left to the band in inc/hub-design.php */

    /* Hero: stronger, tinted by page kind. */
    .tax-hero{position:relative;overflow:hidden;background:transparent;}
    .tax-hero::before{content:'';position:absolute;top:-58%;left:-12%;width:74%;height:230%;pointer-events:none;
      background:radial-gradient(ellipse at center,rgba(255,225,93,0.6),transparent 62%);filter:blur(22px);color:#0e5747}
    .tax-hero::after{content:'';position:absolute;top:-64%;right:-18%;width:66%;height:220%;pointer-events:none;
      background:radial-gradient(ellipse at center,rgba(6,214,199,.20),transparent 64%);filter:blur(26px);}
    body.page-dialer-archive .tax-hero::before{background:radial-gradient(ellipse at center,rgba(240,160,48,.30),transparent 62%);}
    body.page-dialer-archive .tax-hero::after{background:radial-gradient(ellipse at center,rgba(255,225,93,0.48),transparent 64%);color:#0e5747}
    .tax-hero > .cnt{position:relative;z-index:1;}

    /* Fine dot grid on alternating bands, faded top and bottom. */
    .hb{position:relative;}
    .hb::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
      background-image:radial-gradient(rgba(14,87,71,0.061) 1px,transparent 1px);
      background-size:26px 26px;
      -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
              mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);}
    .hb > .cnt{position:relative;z-index:1;}

    /* Section-edge glow so bands do not butt together flatly. */
    .hb-alt{position:relative;}
    .hb-alt::after{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
      width:min(760px,88%);height:1px;pointer-events:none;
      background:linear-gradient(90deg,transparent,rgba(255,225,93,0.6),transparent);color:#0e5747}

    /* Mesh gradient behind the offer band — the page's brightest moment. */
    .hb-offer{position:relative;overflow:hidden;}
    .hb-offer::before{content:'';position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(60% 90% at 12% 8%,rgba(255,225,93,0.448),transparent 60%),
        radial-gradient(52% 84% at 88% 22%,rgba(139,92,246,.17),transparent 62%),
        radial-gradient(70% 70% at 62% 108%,rgba(6,214,199,.13),transparent 60%);color:#0e5747}
    .hb-offer::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.42;
      background-image:linear-gradient(rgba(14,87,71,0.031) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(14,87,71,0.031) 1px,transparent 1px);
      background-size:52px 52px;
      -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 78%);
              mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 78%);}
    .hb-offer .inner{position:relative;z-index:1;}

    /* Closing block gets a rising glow rather than a flat slab. */
    .hb-close{position:relative;overflow:hidden;
      background:linear-gradient(180deg,var(--bg1) 0%,#ffffff 55%,#ffffff 100%);}
    .hb-close::before{content:'';position:absolute;left:50%;bottom:-48%;transform:translateX(-50%);
      width:120%;height:105%;pointer-events:none;
      background:radial-gradient(ellipse at center,rgba(255,225,93,0.32),transparent 66%);color:#0e5747}
    .hb-close > .cnt{position:relative;z-index:1;}
    

    .hb-split{display:grid;gap:26px;align-items:center;}
    @media(min-width:900px){.hb-split{grid-template-columns:1.05fr .95fr;}}
    .art-steps{list-style:none;counter-reset:st;margin-top:22px;display:flex;flex-direction:column;gap:10px;}
    .art-steps li{counter-increment:st;display:flex;gap:11px;font-size:13.5px;color:rgba(27,31,29,0.68);line-height:1.6;}
    .art-steps li::before{content:counter(st);font-family:var(--f-label);font-size:9.5px;color:var(--blue);
      border:1px solid rgba(14,87,71,0.35);border-radius:50%;width:19px;height:19px;display:flex;align-items:center;
      justify-content:center;flex:none;margin-top:1px;}
    .art-steps b{color:rgba(27,31,29,0.88);font-weight:600;}