/* ============================================================
   trs-nav.css — shared NEW HEADER system for The Roof Shepherd
   Loads ON TOP of trs-v28 on every inner page. Only header/nav/
   Call-Text/Get-Help/caret/brand-emblem rules + the keyframes v28
   lacks. Page bodies remain pure v28 (zero regression).
   ============================================================ */
/* ---- TRS site layout helpers (your tokens only) ---- */
.wrapx{max-width:1080px;margin:0 auto;padding:0 22px}
.site-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.brandmark{font-family:var(--fd);font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--text);font-size:1.25rem;text-decoration:none}
.site-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* ---- nav Get Help plate scaled to nav button height (nav only) ---- */
.site-nav .gh-plate{font:800 .95rem/1 var(--fd);padding:.78em 1.2em;--cut:9px}
.site-nav .gh-plate .hex{width:1.12em;height:1.12em}
.brandmark,.site-nav a{text-decoration:none}
/* ---- FIX: uniform nav button height (Services..About == Call/Text == Get Help) ---- */
.site-nav .btn,.site-nav .gh-plate{height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.site-nav .btn .ico{width:1.05em;height:1.05em}
.site-nav .btn-call .msgico{width:1.2em!important;height:1.2em!important}
.site-nav .btn-call .an-phone{width:1.05em!important;height:1.05em!important}
/* ===== NAV SYSTEM: desktop dropdowns + mobile drawer (HUD style) ===== */
.site-nav{display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
.navitem{position:relative;display:inline-flex}
.navlink{position:relative}
.navlink .caret{margin-left:.1em;opacity:.8;transition:transform .2s}
.navitem:hover .navlink .caret,.navitem:focus-within .navlink .caret{transform:rotate(180deg)}
/* dropdown panel */
.subpanel{position:absolute;top:100%;left:0;min-width:214px;display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:12px 10px 10px;background:#0b1019;border:1px solid var(--line);border-radius:3px;--bk:rgba(101,217,255,.4);box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.navitem:hover .subpanel,.navitem:focus-within .subpanel{opacity:1;visibility:visible;transform:none}
.navitem::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
/* hover bridge */
.subitem{display:flex;align-items:center;gap:9px;padding:8px 10px;font-family:var(--fb);font-weight:600;font-size:.9rem;letter-spacing:.01em;color:var(--body);border-radius:2px;text-decoration:none;position:relative;z-index:6;transition:background .15s,color .15s}
.subitem .dot{width:5px;height:5px;border-radius:1px;background:var(--orange);opacity:.45;transition:.15s;flex:0 0 auto}
.subitem:hover{background:rgba(255,255,255,.05);color:var(--text)}
.subitem:hover .dot{opacity:1;box-shadow:0 0 7px var(--orange)}
/* hamburger */
.navtoggle{display:none;width:40px;height:40px;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.04);cursor:pointer}
.navtoggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .2s}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .navtoggle span:nth-child(2){opacity:0}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
spatially locked ===== */
.navlink .navico{color:var(--mc,var(--orange));opacity:.95;margin-right:.1em}
.navitem:hover .navlink .navico,.navitem:focus-within .navlink .navico{filter:drop-shadow(0 0 5px currentColor)}
.subitem{padding-left:9px}
.subitem .subico{width:17px;height:17px;flex:0 0 auto;color:var(--mc,var(--orange));opacity:.92}
.subitem:hover .subico{opacity:1;filter:drop-shadow(0 0 6px currentColor)}
@media(max-width:1140px){
  .navitem .navlink{justify-content:flex-start}
  .navitem .navlink .caret{margin-left:auto}
}
no wrapping (icons added width) ===== */
.brandmark{white-space:nowrap}
.site-nav{gap:6px}
.site-nav .btn .lbl,.navlink .lbl{white-space:nowrap}
.site-nav .btn{font-size:.88rem;padding-left:.9em;padding-right:.9em}
.site-nav .gh-plate{font-size:.88rem;padding-left:.95em;padding-right:.95em}
.navlink .navico{margin-right:.05em}
.navlink .caret{margin-left:.04em}
.subitem span{white-space:nowrap}
@keyframes twinkle{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.13);opacity:1}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.4px)}}
@keyframes bobup{0%,100%{transform:translateY(.6px)}50%{transform:translateY(-1.6px)}}
@keyframes drawx{0%{stroke-dashoffset:34}55%,100%{stroke-dashoffset:0}}
@keyframes raindrop{0%{transform:translateY(-2px);opacity:0}30%{opacity:1}100%{transform:translateY(6px);opacity:0}}
@keyframes apexping{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1.25);opacity:1}}
/* motion hooks (sub-element or whole-icon) */
.ico.mv-pulse{animation:shieldpulse 2.6s ease-in-out infinite}
.ico.mv-twinkle{animation:twinkle 2.4s ease-in-out infinite}
.ico.mv-bob{animation:bobup 2.6s ease-in-out infinite}
.ico.mv-pulse,.ico.mv-twinkle,.ico.mv-bob,.mv-spin .rg,.mv-flap .pg,.mv-blink .bk,.mv-blink .bk2,.mv-drift .cl,.mv-rain .rn,.mv-rain .rn2,.mv-ping .pt,.mv-rings .r1,.mv-rings .r2{transform-box:fill-box;transform-origin:center}
.mv-spin .rg{animation:spinring 4.6s linear infinite}
.mv-draw .dr{stroke-dasharray:34;animation:drawx 2.8s ease-in-out infinite}
.mv-flap .pg{animation:flaplift 3s ease-in-out infinite}
.mv-blink .bk{animation:blinkwin 2.1s steps(1,end) infinite}
.mv-blink .bk2{animation:blinkwin 2.1s steps(1,end) .7s infinite}
.mv-drift .cl{animation:drift 3.6s ease-in-out infinite}
.mv-rain .rn{animation:raindrop 1.8s ease-in infinite}
.mv-rain .rn2{animation:raindrop 1.8s ease-in .6s infinite}
.mv-radar .rd{transform-origin:11px 11px;animation:radar 2.6s linear infinite}
.mv-ping .pt{animation:apexping 2.2s ease-out infinite}
.mv-rings .r1{animation:apexping 2.4s ease-out infinite}
.mv-rings .r2{animation:apexping 2.4s ease-out .8s infinite}
/* ===== item6: widen header so all 5 page-groups sit on one clean row ===== */
.site-head.wrapx{max-width:1180px}
.site-nav .btn{font-size:.85rem}
.site-nav .gh-plate{font-size:.85rem}
.navitem:nth-last-child(3) .subpanel,.navitem:nth-last-child(4) .subpanel{left:auto;right:0}
@media(max-width:1140px){
  .site-head.wrapx{max-width:1080px}
}
/* ===== CALL/TEXT: device-aware. mobile taps ring; desktop reveals number ===== */
.callcta{position:relative;display:inline-flex}
.callpop{position:absolute;top:100%;left:0;min-width:226px;margin-top:7px;padding:13px 14px 12px;background:#0b1019;border:1px solid var(--line);border-radius:3px;--bk:rgba(101,217,255,.45);box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70;text-align:left}
.callpop .rail{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden}
.callpop .rail::after{content:"";position:absolute;top:0;left:50%;width:100%;height:2px;transform:translateX(-50%) scaleX(.16);background:linear-gradient(90deg,transparent,var(--cyan),#fff,var(--cyan),transparent);box-shadow:0 0 7px var(--cyan);animation:railbreathe 6s ease-in-out infinite}
.callpop-num{font-family:var(--fd);font-weight:800;font-size:1.28rem;letter-spacing:.02em;color:var(--cyan);white-space:nowrap;text-shadow:0 0 14px rgba(101,217,255,.35)}
.callpop-sub{font-size:.68rem;color:var(--muted);margin:2px 0 11px;text-transform:uppercase;letter-spacing:.09em}
.callpop-row{display:flex;gap:7px}
.callpop-act{font-family:var(--fd);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--body);padding:.42em .72em;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.03);cursor:pointer;text-decoration:none;transition:.15s;line-height:1}
.callpop-act:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(101,217,255,.22)}
@media (hover:hover) and (pointer:fine){
  .callcta::after{content:"";position:absolute;top:100%;left:0;right:0;height:9px}
  .callcta:hover .callpop,.callcta:focus-within .callpop,.callcta.open .callpop{opacity:1;visibility:visible;transform:none}
}
@media(max-width:1140px){
  .callcta{width:100%}
  .callcta .btn-call{width:100%}
  .callpop{left:0;right:0}
}
/* ===== GET HELP: inspection request primary, email secondary; orange brackets ===== */
.helpcta{position:relative;display:inline-flex}
.helppop{position:absolute;top:100%;left:0;min-width:252px;margin-top:7px;padding:13px 13px 12px;background:#0b1019;border:1px solid var(--line);--bk:rgba(224,106,22,.5);border-radius:3px;box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70;text-align:left}
.helppop .rail{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden}
.helppop .rail::after{content:"";position:absolute;top:0;left:50%;width:100%;height:2px;transform:translateX(-50%) scaleX(.16);background:linear-gradient(90deg,transparent,var(--orange),#ffd9b0,var(--orange),transparent);box-shadow:0 0 7px var(--orange);animation:railbreathe 6s ease-in-out infinite}
.helppop-sub{font-size:.67rem;color:var(--muted);margin:1px 0 10px;text-transform:uppercase;letter-spacing:.09em}
.helppop-primary{display:block;padding:11px 12px;border:1px solid rgba(224,106,22,.42);border-radius:2px;background:linear-gradient(180deg,rgba(224,106,22,.15),rgba(224,106,22,.045));text-decoration:none;transition:.15s;margin-bottom:8px}
.helppop-primary:hover{border-color:var(--orange);box-shadow:0 0 14px rgba(224,106,22,.3)}
.helppop-primary .hp-t{display:block;font-family:var(--fd);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:.01em}
.helppop-primary .hp-d{display:block;font-size:.71rem;color:var(--muted);margin-top:2px;text-transform:none;letter-spacing:0}
.helppop-secondary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:2px;text-decoration:none;transition:.15s;background:rgba(255,255,255,.02)}
.helppop-secondary:hover{border-color:var(--orange);box-shadow:0 0 10px rgba(224,106,22,.18)}
.helppop-secondary .hp-t{font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--body);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.helppop-secondary .hp-d{font-size:.71rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.helpcta.open .helppop{opacity:1;visibility:visible;transform:none}
.site-nav .helppop{left:auto;right:0}
.btnrow .helppop{left:0;right:auto}
@media (hover:hover) and (pointer:fine){
  .helpcta::after{content:"";position:absolute;top:100%;left:0;right:0;height:9px}
  .helpcta:hover .helppop,.helpcta:focus-within .helppop{opacity:1;visibility:visible;transform:none}
}
@media(max-width:1140px){
  .helpcta{width:100%}
  .helpcta .gh-plate{width:100%}
  .helppop{left:0;right:0}
}
fill the row uniformly (no wasted space) */
.callpop-row{gap:7px}
.callpop-act{display:flex;align-items:center;justify-content:center;flex:1 1 0;text-align:center}
/* ===== Panel standardization pass ===== */
/* Call/Text: center all content */
.callpop{text-align:center}
.callpop-num,.callpop-sub{text-align:center}
/* Get Help: uppercase primary title; stack email under its label (uniform with primary) */
.helppop-primary .hp-t{text-transform:uppercase;letter-spacing:.03em}
.helppop-secondary{display:block;padding:11px 12px}
.helppop-secondary .hp-t{display:block}
.helppop-secondary .hp-d{display:block;margin-top:3px;white-space:normal;overflow:visible;text-overflow:clip}
/* Nav caret: UP at rest,DOWN on hover/open (points toward the menu dropping down) */
.navlink .caret{transform:rotate(180deg)}
.navitem:hover .navlink .caret,.navitem:focus-within .navlink .caret{transform:rotate(0deg)}
.navitem.open .navlink .caret{transform:rotate(0deg)}
/* Brand: emblem logo + wordmark */
.brandmark{display:inline-flex;align-items:center;gap:.5em}
.brand-emblem{height:36px;width:36px;flex:none;display:block;object-fit:contain}

/* --- header-scoped extras (body-safe) --- */
.wrapx{max-width:1080px;margin:0 auto;padding:0 22px}
.site-head .btn,.site-head .gh-plate,.brandmark,.site-nav a{text-decoration:none}
.site-nav .gh-plate{--core:#2ecc7a}
@media(prefers-reduced-motion:reduce){[class*="mv-"],[class*="mv-"] *{animation:none!important}}
@media(max-width:1140px){
  .navtoggle{display:inline-flex}
  .site-nav{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,330px);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:72px 16px 28px;background:#080b12;border-left:1px solid var(--line);transform:translateX(102%);transition:transform .3s ease;overflow-y:auto;z-index:50}
  body.nav-open .site-nav{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.6)}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(2,5,10,.55);z-index:40}
  .navitem{display:block;width:100%}
  .navitem .navlink{width:100%;height:auto;justify-content:space-between;padding:.8em 1em}
  .navitem.open .navlink .caret{transform:rotate(180deg)}
  .subpanel{position:static;min-width:0;margin:0;padding:0 0 0 12px;border:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;transition:max-height .25s ease}
  .navitem.open .subpanel{max-height:440px;padding:2px 0 8px 12px}
  .navitem:hover .subpanel{max-height:0}        /* hover disabled on mobile; JS .open controls it */
  .navitem.open:hover .subpanel{max-height:440px}
  .navitem::after{display:none}
  .site-nav .btn-call,.site-nav .gh-plate{width:100%;height:46px;margin-top:4px}
}/* active section state (added for site-wide rollout) */
.site-nav .navitem.is-active>.navlink{background:color-mix(in srgb,var(--mc) 15%,transparent);border-color:color-mix(in srgb,var(--mc) 48%,var(--line))}
.site-nav .navitem.is-active>.navlink .lbl{color:#fff}
.site-nav .navitem.is-active>.navlink .navico{color:var(--mc)}

/* ===== Call / Text = Design-System Hero CTA cyan tactical plate ===== */
.site-nav .btn-call,.callcta .btn-call{
  --bk:rgba(101,217,255,.55)!important;--accent2:var(--cyan)!important;--led:var(--cyan)!important;
  color:var(--cyan)!important;
  background:rgba(101,217,255,.12)!important;
  border:1px solid rgba(101,217,255,.42)!important}
.site-nav .btn-call .lbl,.callcta .btn-call .lbl,.site-nav .btn-call svg,.callcta .btn-call svg{color:inherit!important}
.site-nav .btn-call:hover,.callcta .btn-call:hover{
  color:#bfeeff!important;background:rgba(101,217,255,.18)!important;border-color:rgba(101,217,255,.62)!important}

/* ===== enriched Nav B: group labels inside the dropdown ===== */
.site-nav .subhead{font:800 .6rem/1 var(--fd,'Barlow Condensed');letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);opacity:.72;margin:9px 8px 3px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}
.site-nav .subpanel>.rail+.subhead,.site-nav .subhead:first-of-type{border-top:0;padding-top:0;margin-top:2px}

/* ===== section-matched coloring: dropdown icons, labels, top buttons, frames ===== */
.site-nav .subitem .ico{color:var(--ic,var(--mc,var(--cyan)))!important;transition:color .15s,filter .15s}
.site-nav .subhead{color:var(--ic,var(--gold))!important;opacity:.85}
.site-nav .subitem:hover{background:color-mix(in srgb,var(--ic,var(--mc)) 13%,transparent)!important}
.site-nav .subitem:hover>span{color:#fff!important}
.site-nav .subitem:hover .ico{filter:drop-shadow(0 0 5px var(--ic,var(--mc)))}
.site-nav .navitem.has-sub>.navlink .navico{color:var(--mc,var(--cyan))}
.site-nav .subpanel{--bk:var(--mc,rgba(101,217,255,.45))}

/* ===== hero Call/Text matches the nav cyan plate + label capitalized (June 22 2026) ===== */
.hero-cta .btn-call{--bk:rgba(101,217,255,.55)!important;--accent2:var(--cyan)!important;--led:var(--cyan)!important;color:var(--cyan)!important;background:rgba(101,217,255,.12)!important;border:1px solid rgba(101,217,255,.42)!important}
.hero-cta .btn-call .lbl,.hero-cta .btn-call svg{color:inherit!important}
.hero-cta .btn-call:hover{color:#bfeeff!important;background:rgba(101,217,255,.18)!important;border-color:rgba(101,217,255,.62)!important}
.btn-call .lbl{text-transform:uppercase;letter-spacing:.05em}

/* =====================================================================
   UNIFIED BUTTON + BADGE SYSTEM  |  June 22 2026
   uppercase labels · per-button six-colour accent · hover HOLDS the
   breathing rail + shifts the line to --mc · active page lit in --mc ·
   square LED removed · BBB + status badges = tactical rectangles
   ===================================================================== */

/* 1 — UPPERCASE every button label (unified component standard) */
.btn,.gh-plate .lbl,.site-nav .navlink .lbl{text-transform:uppercase}
.btn{letter-spacing:.04em}
.site-nav .navlink .lbl{letter-spacing:.055em}

/* 2 — per-button accent: nav rail + corner brackets follow that item's --mc */
.site-nav .navlink .rail::after{--accent2:var(--mc,var(--orange))}
.site-nav .navitem>.navlink.hud::before{--bk:color-mix(in srgb,var(--mc,var(--orange)) 60%,transparent)}

/* 3 — HOVER the nav line: shift colour to --mc; HOLD the breathing rail full (every button) */
.site-nav .navitem>.navlink{transition:background .18s ease,border-color .18s ease,color .18s ease}
.site-nav .navitem:hover>.navlink,.site-nav .navitem:focus-within>.navlink{
  background:color-mix(in srgb,var(--mc,var(--orange)) 14%,transparent);
  border-color:color-mix(in srgb,var(--mc,var(--orange)) 50%,var(--line))}
.site-nav .navitem:hover>.navlink .lbl,.site-nav .navitem:focus-within>.navlink .lbl{color:#fff}
.site-nav .navitem:hover>.navlink .navico,.site-nav .navitem:focus-within>.navlink .navico{color:var(--mc,var(--orange))}
/* rail on hover matches the design file (speeds up, does not hold) — see trs-v28 .btn:hover .rail::after */
.btn.hud:hover::before{opacity:1;inset:3px}

/* 4 — ACTIVE page: nav item lit in --mc, rail + brackets held full */
.site-nav .navitem.is-active>.navlink{
  background:color-mix(in srgb,var(--mc) 26%,transparent);
  border-color:color-mix(in srgb,var(--mc) 66%,var(--line));
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--mc) 24%,transparent),0 0 10px color-mix(in srgb,var(--mc) 16%,transparent)}
.site-nav .navitem.is-active>.navlink .rail::after{
  animation:none!important;transform:translateX(-50%) scaleX(1)!important;opacity:1!important}
.site-nav .navitem.is-active>.navlink.hud::before{opacity:1}


/* 6 — SEE HOW IT WORKS = green accent + enlarged green arrow */
.hero-see-how{--mc:var(--green)}
.hero-see-how .an-arrow,a[href*="/how-it-works/"] .an-arrow{color:var(--green)}
.hero-see-how .rail::after,a.btn[href*="/how-it-works/"] .rail::after{--accent2:var(--green)}
.hero-see-how:hover{border-color:color-mix(in srgb,var(--green) 55%,transparent);background:color-mix(in srgb,var(--green) 8%,transparent)}

/* 7 — remove the square LED everywhere */
.btn .led,.tl-pill .led{display:none!important}

/* 8 — TOPLINE BADGES = unified tactical rectangles, per-colour, futuristic */
.tl-pill{border-radius:0}
.tl-pill::before{content:"";position:absolute;top:0;left:50%;width:60%;height:1.5px;
  transform:translateX(-50%) scaleX(.5);
  background:linear-gradient(90deg,transparent,currentColor,#fff,currentColor,transparent);
  box-shadow:0 0 6px currentColor;opacity:.45;
  animation:btn-railbreathe 5.6s ease-in-out infinite;pointer-events:none}
.tl-dot{position:relative}
.tl-dot::after{content:"";position:absolute;left:50%;top:50%;width:.45rem;height:.45rem;
  margin:-.225rem 0 0 -.225rem;border-radius:50%;border:1px solid currentColor;
  opacity:0;animation:tl-ring 2.3s ease-out infinite;pointer-events:none}
@keyframes tl-ring{0%{transform:scale(.6);opacity:.65}100%{transform:scale(2);opacity:0}}
.tl-pill-bbb{border:1px solid rgba(43,143,214,.5)!important;background:rgba(43,143,214,.10)!important;
  color:#7cc0f0!important;box-shadow:0 0 10px rgba(43,143,214,.14)}
.tl-pill-bbb svg{color:#5aa9e6!important}
a.tl-pill-bbb:hover{border-color:rgba(43,143,214,.82)!important;background:rgba(43,143,214,.18)!important;color:#a9d6f6!important}

/* BBB accreditation seal (replaces star) */
.tl-pill-bbb .bbb-seal{width:13px;height:13px}

/* =====================================================================
   GHOST BUTTONS — enhanced outline (June 22 2026)
   four-corner brackets + breathing rail + per-context colored arrow,
   reads as part of the system on any background; accent follows context
   ===================================================================== */
.btn.ghost{--gca:var(--mc,var(--orange))}
.btn.ghost.hud::before{--bk:color-mix(in srgb,var(--gca) 62%,transparent)!important;opacity:.85}
.btn.ghost .rail::after{--accent2:var(--gca)}
.btn.ghost .an-arrow{color:var(--gca)}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--gca) 52%,var(--line));background:color-mix(in srgb,var(--gca) 8%,transparent);color:#fff}
.btn.ghost:hover .an-arrow{color:var(--gca)}
/* a card's CTA matches its own card colour */
.card.orange .btn.ghost{--gca:var(--orange)}
.card.cyan   .btn.ghost{--gca:var(--cyan)}
.card.gold   .btn.ghost{--gca:var(--gold)}
.card.green  .btn.ghost{--gca:var(--green)}
.card.purple .btn.ghost{--gca:var(--purple)}
.card.red    .btn.ghost{--gca:var(--red)}

/* CTA arrows always trail the label (right side), uniform sitewide */
.btn .an-arrow{order:2}
.cta .an-arrow{order:2}

/* Paintbrush card icon: subtle dab layered into the shared idle-float — matches the animated card icons.
   Specificity (0,3,1) tops `.card .icon svg` (0,2,1) so it replaces the float with float+dab; gated by .tsi/.in-view; off for reduced-motion. */
@keyframes brush-dab{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-1.6px) rotate(3deg)}}
.card .icon svg.an-brush2{transform-origin:35% 70%;animation:brush-dab 3.6s ease-in-out infinite}