/* ============================================================
   TPA People, Inc. — brand design system for Kadence
   Colors, type, buttons, sections, cards, tables, animations.
   Class prefix: .tpa-   (add these to Kadence rows/columns/groups,
   or use inside Custom HTML blocks — see snippets.html)
   ============================================================ */

   :root{
    --tpa-navy:#00457C;      /* PMS 295  */
    --tpa-navy-2:#013A68;
    --tpa-blue:#0079C1;      /* PMS 300  */
    --tpa-orange:#F16523;    /* PMS 166  */
    --tpa-orange-2:#D9541A;
    --tpa-orange-tint:#FDEBE1;
    --tpa-ink:#0F2A44;
    --tpa-slate:#4E5A66;
    --tpa-slate-2:#7C8794;
    --tpa-line:#E3E7EB;
    --tpa-soft:#F5F6F7;
    --tpa-soft-2:#ECEEF0;
    --tpa-r:16px;
    --tpa-r-sm:11px;
    --tpa-shadow:0 18px 46px rgba(0,69,124,.10);
    --tpa-shadow-sm:0 8px 22px rgba(0,69,124,.08);
    --tpa-maxw:1300px;
  }
  
  /* ---- typography accents (base fonts are set in Kadence global styles) ---- */
  .tpa-eyebrow{font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tpa-orange-2);display:block;margin-bottom:10px}
  .tpa-h2{font-family:'Archivo',sans-serif;font-size:clamp(1.9rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--tpa-ink)}
  .tpa-lead{font-size:19px;color:var(--tpa-slate);line-height:1.6}
  .tpa-hl{color:var(--tpa-orange-2)}
  .tpa-inner{max-width:var(--tpa-maxw);margin:0 auto;padding:0 40px}
  
  /* ---- buttons (use on core Button block: add class, or in Custom HTML) ---- */
  .tpa-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;padding:14px 28px;border-radius:6px;line-height:1;border:2px solid transparent;text-decoration:none;transition:all .18s ease;cursor:pointer}
  .tpa-btn--orange{background:var(--tpa-orange);color:#fff}
  .tpa-btn--orange:hover{background:var(--tpa-orange-2);color:#fff}
  .tpa-btn--navy{background:var(--tpa-navy);color:#fff}
  .tpa-btn--navy:hover{background:#003a68;color:#fff}
  .tpa-btn--ghost{background:#fff;color:var(--tpa-navy);border-color:#CBD6E1}
  .tpa-btn--ghost:hover{border-color:var(--tpa-navy)}
  .tpa-btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
  .tpa-btn--light:hover{border-color:#fff;color:#fff}
  .tpa-btn--arrow::after{content:"\2192";display:inline-block;transition:transform .18s ease}
  .tpa-btn--arrow:hover::after{transform:translateX(4px)}
  /* also skin Kadence's own primary button to brand, if used */
  .wp-block-kadence-advancedbtn .kb-button.kt-btn-global-primary{background:var(--tpa-orange);border-radius:6px}
  
  /* ---- section rhythm (add to a full-width Kadence Row Layout) ---- */
  .tpa-section{padding:98px 0}
  .tpa-section--tight{padding:72px 0}
  .tpa-section--soft{background:var(--tpa-soft)}
  .tpa-head{max-width:900px;margin:0 auto 0;text-align:center}
  .tpa-head .tpa-h2{margin-top:6px}
  .tpa-head p{color:var(--tpa-slate);margin-top:16px;font-size:18px;max-width:780px;margin-left:auto;margin-right:auto}
  /* Kill the stranded last line. `balance` evens the lines out on centred
     section headings and intros; `pretty` only pulls a word down on the
     left-aligned hero text, leaving the earlier lines alone. Browsers that do
     not support either just wrap as before, so there is nothing to fall back to. */
  .tpa-head .tpa-h2,.tpa-head h2,.tpa-head p{text-wrap:balance}
  .tpa-hero h1,.tpa-phero h1,.tpa-phero .tpa-h1,.tpa-phero .tpa-lead,.tpa-band h2,.tpa-band p{text-wrap:pretty}
  
  /* ---- navy → blue call-to-action band ---- */
  .tpa-band{background:linear-gradient(120deg,var(--tpa-navy) 0%,var(--tpa-navy-2) 55%,var(--tpa-blue) 130%);color:#fff;text-align:center;position:relative;overflow:hidden;border-radius:0}
  .tpa-band .tpa-inner{padding-top:80px;padding-bottom:80px;position:relative;z-index:2}
  /* Removed 2026-08-16: a static orange orb bled off the top-right corner of the
     band. It predated the rings and was doing the same job twice. Restore by
     uncommenting if the band ever loses the rings.
  .tpa-band::after{content:"";position:absolute;right:-40px;top:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(241,101,35,.28),rgba(241,101,35,0) 70%)}
  */
  .tpa-band h2{color:#fff;font-family:'Archivo',sans-serif;font-size:clamp(1.9rem,2.9vw,2.4rem);font-weight:800;letter-spacing:-.02em}
  .tpa-band p{color:#C6D6E4;margin:16px auto 0;font-size:17px;max-width:640px}
  .tpa-band .tpa-btnrow{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  
  /* ---- grids + cards ---- */
  .tpa-grid{display:grid;gap:24px}
  .tpa-grid--3{grid-template-columns:repeat(3,1fr)}
  .tpa-grid--2{grid-template-columns:repeat(2,1fr)}
  .tpa-card{background:#fff;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);padding:28px;transition:all .18s ease;display:flex;flex-direction:column}
  .tpa-card:hover{box-shadow:var(--tpa-shadow);transform:translateY(-4px)}
  .tpa-card__ic{width:54px;height:54px;border-radius:13px;background:var(--tpa-navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .tpa-card--value .tpa-card__ic{background:var(--tpa-orange-tint)}
  .tpa-kind{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tpa-orange-2)}
  .tpa-card h3{font-family:'Archivo',sans-serif;font-size:19px;font-weight:700;margin:6px 0 0}
  .tpa-card p{color:var(--tpa-slate);font-size:14.5px;margin-top:10px;flex:1}
  .tpa-card__link{margin-top:16px;font-weight:600;font-size:14px;color:var(--tpa-navy);text-decoration:none}
  .tpa-card--center{text-align:center}
  .tpa-card--center .tpa-card__ic{margin-left:auto;margin-right:auto}
  
  /* ---- independence / who-it's-for checklist ---- */
  .tpa-checkwrap{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);box-shadow:var(--tpa-shadow-sm);padding:34px 40px}
  .tpa-checklist{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
  .tpa-check{display:flex;gap:14px;align-items:flex-start}
  .tpa-check .ck{width:26px;height:26px;border-radius:50%;background:var(--tpa-orange-tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}
  .tpa-check b{font-weight:700}
  .tpa-check span{color:var(--tpa-slate);font-size:14.5px}
  
  /* ---- trust signal bar ---- */
  .tpa-trust{background:var(--tpa-navy);color:#DCE7F0}
  .tpa-trust .tpa-inner{padding:16px 40px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;align-items:center;font-size:13.5px;font-weight:600}
  .tpa-trust b{color:#fff}
  .tpa-trust .sep{color:#5E86A8}
  
  /* ---- hero + audience router ---- */
  .tpa-hero{background:radial-gradient(1100px 520px at 85% -12%, #E1EEF8 0%, rgba(225,238,248,0) 60%),linear-gradient(180deg,#FAFCFE,#fff)}
  .tpa-hero .tpa-inner{padding-top:80px;padding-bottom:60px;display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
  .tpa-hero h1{font-family:'Archivo',sans-serif;font-size:clamp(2.3rem,4vw,3.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--tpa-ink)}
  .tpa-hero .microline{margin-top:16px;font-size:14px;color:var(--tpa-slate-2);font-weight:600;letter-spacing:.02em}
  .tpa-router{background:#fff;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);box-shadow:var(--tpa-shadow);padding:24px}
  .tpa-router .rtitle{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px}
  .tpa-router .rsub{font-size:13.5px;color:var(--tpa-slate);margin:4px 0 16px}
  .tpa-door{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--tpa-line);border-radius:var(--tpa-r-sm);background:var(--tpa-soft);margin-bottom:11px;text-decoration:none;transition:all .15s ease}
  .tpa-door:hover{background:#fff;border-color:var(--tpa-orange);box-shadow:var(--tpa-shadow-sm);transform:translateY(-1px)}
  .tpa-door .dic{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--tpa-line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .tpa-door .dlabel{font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;color:var(--tpa-ink)}
  .tpa-door .dsub{font-size:12.5px;color:var(--tpa-slate-2)}
  .tpa-door .go{margin-left:auto;color:var(--tpa-orange-2);font-weight:700}
  
  /* ---- values trio ---- */
  .tpa-vcard{background:#fff;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);padding:30px 28px}
  .tpa-vcard .vic{width:50px;height:50px;border-radius:13px;background:var(--tpa-orange-tint);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .tpa-vcard h3{font-family:'Archivo',sans-serif;font-size:20px;font-weight:700}
  .tpa-vcard p{color:var(--tpa-slate);margin-top:10px;font-size:15px}
  
  /* ---- contribution limits table ---- */
  .tpa-ltable{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);overflow:hidden;box-shadow:var(--tpa-shadow-sm)}
  .tpa-lrow{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-top:1px solid var(--tpa-line)}
  .tpa-lrow:first-child{border-top:none}
  .tpa-lrow:nth-child(even){background:var(--tpa-soft)}
  .tpa-lrow .lk{font-weight:600;color:var(--tpa-ink);font-size:15.5px}
  .tpa-lrow .lk small{display:block;color:var(--tpa-slate-2);font-weight:400;font-size:12.5px;margin-top:2px}
  .tpa-lrow .lv{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;color:var(--tpa-navy)}
  .tpa-lrow--hl{background:var(--tpa-navy)!important}
  .tpa-lrow--hl .lk,.tpa-lrow--hl .lv{color:#fff}
  .tpa-lrow--hl .lv span{color:var(--tpa-orange)}
  .tpa-note{max-width:860px;margin:14px auto 0;font-size:12.5px;color:var(--tpa-slate-2);text-align:center}
  
  /* ---- comparison table ---- */
  .tpa-compare{max-width:960px;margin:0 auto;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);overflow:hidden;box-shadow:var(--tpa-shadow-sm)}
  .tpa-chead,.tpa-crow{display:grid;grid-template-columns:1.5fr 1fr 1fr}
  .tpa-chead{background:var(--tpa-navy);color:#fff}
  .tpa-chead>div{padding:16px 20px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px}
  .tpa-chead .meap{background:rgba(241,101,35,.16)}
  .tpa-crow>div{padding:15px 20px;border-top:1px solid var(--tpa-line);font-size:14.5px;color:var(--tpa-slate);display:flex;align-items:center;gap:8px}
  .tpa-crow:nth-child(even){background:var(--tpa-soft)}
  .tpa-crow .feat{color:var(--tpa-ink);font-weight:600}
  .tpa-yes{color:#0B7A4B;font-weight:600}
  .tpa-no{color:var(--tpa-slate-2)}
  
  /* ---- contact / portal ---- */
  .tpa-portal{background:linear-gradient(150deg,var(--tpa-navy),var(--tpa-navy-2));color:#fff;border-radius:var(--tpa-r);padding:32px}
  .tpa-portal h3{color:#fff;font-family:'Archivo',sans-serif;font-size:22px;font-weight:800}
  .tpa-portal p{color:#C6D6E4;font-size:14.5px;margin-top:8px}
  .tpa-glabel{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--tpa-orange);background:rgba(241,101,35,.16);padding:6px 12px;border-radius:20px;text-transform:uppercase}
  .tpa-contactinfo{margin-top:26px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:#DCE7F0}
  .tpa-contactinfo b{color:#fff}
  
  /* ---- chips (credentials, recordkeepers, service area) ---- */
  .tpa-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .tpa-chip{border:1px solid var(--tpa-line);background:#fff;border-radius:30px;padding:11px 20px;font-weight:600;font-size:14.5px;color:var(--tpa-navy)}
  .tpa-chip--nav{background:var(--tpa-navy);color:#fff;border-color:var(--tpa-navy)}
  
  /* ---- scroll reveal (paired with reveal.js) ---- */
  .tpa-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .tpa-reveal.is-visible{opacity:1;transform:none}
  /* headings resolve out of a blur, one word at a time (see reveal.js) */
  .tpa-split .tpa-word{display:inline-block;opacity:0;transform:translateY(.34em);filter:blur(11px);
    will-change:transform,filter,opacity;
    transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1),filter .62s cubic-bezier(.22,.61,.36,1)}
  .tpa-split.is-visible .tpa-word{opacity:1;transform:none;filter:blur(0)}
  @media (prefers-reduced-motion:reduce){
    .tpa-reveal{opacity:1;transform:none;transition:none}
    .tpa-split .tpa-word{opacity:1;transform:none;filter:none;transition:none}
  }
  
  /* ---- full-bleed helper (for colored sections placed in a normal container).
     Cleaner alternative: drop the Custom HTML block into a Kadence Row set to
     "Full Width" with no padding, then you don't need this class. ---- */
  .tpa-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  
  /* ---- responsive ---- */
  @media (max-width:980px){
    .tpa-hero .tpa-inner,.tpa-grid--3,.tpa-grid--2,.tpa-checklist{grid-template-columns:1fr}
    .tpa-chead,.tpa-crow{grid-template-columns:1.3fr .85fr .85fr}
  }
  
  /* ---- inner page header + chip groups (added live) ---- */
  .tpa-h1{font-family:'Archivo',sans-serif;font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--tpa-ink)}
  .tpa-pagehead{background:radial-gradient(900px 460px at 82% -30%, #E1EEF8 0%, rgba(225,238,248,0) 60%),linear-gradient(180deg,#FAFCFE,#fff);border-bottom:1px solid var(--tpa-line)}
  .tpa-pagehead .tpa-inner{padding-top:56px;padding-bottom:52px}
  .tpa-chipgroup+.tpa-chipgroup{margin-top:44px}
  
  /* ---- close the white gap between the header/footer and full-bleed sections.
     Kadence's page content wrapper adds vertical padding; our sections handle
     their own spacing, so zero it on pages. ---- */
  .page .entry-content-wrap{padding-top:0 !important;padding-bottom:0 !important}
  .page .entry-content>*:first-child{margin-top:0 !important}
  .page .entry-content>*:last-child{margin-bottom:0 !important}
  .page .content-area,.page .site-main{margin-top:0;margin-bottom:0}
  /* ---- flora: stems growing out of the navy trust bar ---- */
  .tpa-flora-host{position:relative}
  /* the section above keeps its own stacking context so the stems pass behind it */
  .tpa-flora-above{position:relative;z-index:1}
  .tpa-section.tpa-flora-above{padding-bottom:320px}
  .tpa-flora{position:absolute;left:0;right:0;bottom:100%;height:300px;overflow:hidden;pointer-events:none;z-index:0}
  .tpa-flora__svg{display:block;width:100%;height:100%;overflow:visible}
  .tpa-flora__glow{opacity:0;transition:opacity 2.6s ease .2s}
  .tpa-flora.is-grown .tpa-flora__glow{opacity:1}
  .tpa-flora__stems path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.16,.72,.24,1)}
  .tpa-flora.is-grown .tpa-flora__stems path{stroke-dashoffset:0}
  .tpa-flora__petal{transform-box:fill-box;transform-origin:center;transform:scale(.001);opacity:0;
    transition:transform .9s cubic-bezier(.2,1.3,.4,1),opacity .7s ease}
  .tpa-flora.is-grown .tpa-flora__petal{transform:scale(1);opacity:1}
  .tpa-flora.is-idle .tpa-flora__petal{
    animation:tpa-flora-breathe var(--tpa-flora-idle,8s) ease-in-out var(--tpa-flora-idle-delay,0s) infinite alternate}
  @keyframes tpa-flora-breathe{from{transform:scale(1)}to{transform:scale(1.13)}}
  @media (max-width:980px){
    .tpa-section.tpa-flora-above{padding-bottom:190px}
  }
  @media (prefers-reduced-motion:reduce){
    .tpa-flora__glow{opacity:1}
    .tpa-flora__stems path{stroke-dashoffset:0}
    .tpa-flora__petal{transform:none;opacity:1}
    .tpa-flora__glow,.tpa-flora__stems path,.tpa-flora__petal{transition:none!important;animation:none!important}
  }

  /* ---- hero watermark: the mark drawing itself in behind the hero ---- */
  .tpa-heromark-host{position:relative;overflow:hidden}
  .tpa-heromark-host>.tpa-inner{position:relative;z-index:1}
  .tpa-heromark{position:absolute;top:50%;right:-9%;width:min(760px,58vw);aspect-ratio:2.18/2.03;
    transform:translateY(-50%);pointer-events:none;z-index:0}
  .tpa-heromark__svg{display:block;width:100%;height:100%;overflow:visible}
  .tpa-heromark__path{stroke-opacity:.26;stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 2.8s cubic-bezier(.35,.02,.2,1) .35s}
  .tpa-heromark.is-drawn .tpa-heromark__path{stroke-dashoffset:0}
  .tpa-heromark.is-idle{animation:tpa-heromark-drift 34s ease-in-out infinite alternate}
  @keyframes tpa-heromark-drift{
    from{transform:translateY(-50%) rotate(-2.2deg) scale(1)}
    to{transform:translateY(-52%) rotate(2.2deg) scale(1.045)}
  }
  @media (max-width:980px){
    .tpa-heromark{width:78vw;right:-26%;top:auto;bottom:-6%;transform:none}
    .tpa-heromark.is-idle{animation-name:tpa-heromark-drift-sm}
  }
  @keyframes tpa-heromark-drift-sm{
    from{transform:rotate(-2.2deg) scale(1)}
    to{transform:rotate(2.2deg) scale(1.045)}
  }
  @media (prefers-reduced-motion:reduce){
    .tpa-heromark__path{stroke-dashoffset:0;transition:none!important}
    .tpa-heromark{animation:none!important}
  }

  /* ---- pulsing rings behind the navy CTA band ---- */
  .tpa-rings-host{position:relative;overflow:hidden}
  /* deepen the band so the orange rings can read against it */
  .tpa-rings-host::before{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(120deg,rgba(2,20,40,.5),rgba(2,16,34,.4) 55%,rgba(2,24,48,.5));
    pointer-events:none}
  .tpa-rings{position:absolute;inset:0;z-index:1;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    --tpa-rings-size:clamp(300px,36vw,540px);
    --tpa-rings-dim:rgba(241,101,35,.20);
    --tpa-rings-lit:rgba(255,146,56,.85);
    --tpa-rings-lift:44px}
  .tpa-rings__stage{position:relative;width:var(--tpa-rings-size);height:var(--tpa-rings-size);
    transform:rotateX(52deg)}
  .tpa-rings__ring{position:absolute;inset:0;margin:auto;width:var(--s);height:var(--s);
    border-radius:50%;border:1px solid var(--tpa-rings-dim);
    animation-name:tpa-rings-pulse;animation-timing-function:cubic-bezier(.37,0,.63,1);
    animation-iteration-count:infinite;animation-direction:alternate}
  @keyframes tpa-rings-pulse{
    from{transform:translateY(0);border-color:var(--tpa-rings-dim)}
    to{transform:translateY(calc(var(--tpa-rings-lift) * -1));border-color:var(--tpa-rings-lit)}
  }
  @media (max-width:980px){.tpa-rings{--tpa-rings-size:clamp(240px,66vw,380px);--tpa-rings-lift:26px}}
  @media (prefers-reduced-motion:reduce){
    .tpa-rings__ring{animation:none!important;border-color:rgba(241,101,35,.26)}
  }

  /* ---- header navigation: Archivo, in the same voice as the .tpa-eyebrow ---- */
  .main-navigation .menu > li > a,
  .main-navigation .menu > li > a .nav-drop-title-wrap,
  .site-header a.header-button{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase}
  /* dropdowns stay a touch tighter so submenus don't sprawl */
  .main-navigation .menu ul li a,
  .main-navigation .menu ul li a .nav-drop-title-wrap{
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:.09em;
    text-transform:uppercase}
  /* the mobile drawer inherits the same treatment */
  .mobile-navigation .menu > li > a,
  .mobile-navigation .menu > li > a .nav-drop-title-wrap{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase}

  /* ---- footer copyright + footer nav: same voice as the header, dialled down ---- */
  #colophon .footer-html,
  #colophon .footer-html p,
  #colophon .site-info,
  .site-footer-row .footer-html-inner{
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    line-height:1.7}
  #colophon .footer-navigation .menu > li > a,
  #colophon .footer-navigation .menu > li > a .nav-drop-title-wrap{
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:.12em;
    text-transform:uppercase}

  /* ---- dark inner-page hero (added 2026-08-16): navy to blue ground, the
     mark drawing itself in behind. Used on Plan Types. ---- */
  /* --tpa-phero-col is how much of the container the text column takes up */
  .tpa-phero{--tpa-phero-col:66.667%;position:relative;background:linear-gradient(120deg,var(--tpa-navy) 0%,var(--tpa-navy-2) 52%,var(--tpa-blue) 132%);color:#fff;overflow:hidden}
  .tpa-phero .tpa-inner{padding-top:104px;padding-bottom:96px;position:relative;z-index:2}
  .tpa-phero .tpa-eyebrow{color:#8FC7EC}
  .tpa-phero h1,.tpa-phero .tpa-h1{font-family:'Archivo',sans-serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-.028em;line-height:1.04;color:#fff;max-width:var(--tpa-phero-col);margin:0}
  .tpa-phero .tpa-hl{color:#FF8A4C}
  .tpa-phero .tpa-lead{color:rgba(255,255,255,.82);margin-top:26px;max-width:var(--tpa-phero-col);font-size:19px}
  .tpa-phero .microline{margin-top:18px;font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .tpa-phero .tpa-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
  /* the shared hero watermark, re-lit for a dark ground */
  .tpa-phero .tpa-heromark{right:-13%;width:min(820px,60vw)}
  .tpa-phero .tpa-heromark__path{stroke-opacity:.5;stroke-width:2.4}
  .tpa-phero .tpa-heromark__svg stop:nth-child(1){stop-color:#2E86C8}
  .tpa-phero .tpa-heromark__svg stop:nth-child(2){stop-color:#7FD0FF}
  .tpa-phero .tpa-heromark__svg stop:nth-child(3){stop-color:#FF8A4C}
  @media (max-width:1200px){
    .tpa-phero{--tpa-phero-col:80%}
  }
  @media (max-width:980px){
    .tpa-phero{--tpa-phero-col:100%}
    .tpa-phero .tpa-inner{padding-top:74px;padding-bottom:200px}
    .tpa-phero .tpa-heromark{width:82vw;right:-24%}
  }

  /* ---- recordkeeper orbit (paired with tpa-orbit.js), added 2026-08-16 ---- */
  .tpa-orbit{position:relative;height:270px;margin-top:34px;overflow:hidden;
    /* fade the tiles out at the edges instead of cutting them off */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
  .tpa-orbit__track{position:absolute;inset:0}
  .tpa-orbit__tile{position:absolute;top:34px;left:0;transform-origin:50% 50%;
    background:#fff;border:1px solid var(--tpa-line);border-radius:var(--tpa-r);
    box-shadow:var(--tpa-shadow-sm);padding:20px 30px;white-space:nowrap;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;color:var(--tpa-ink);
    transition:border-color .45s ease,box-shadow .45s ease,color .45s ease;will-change:transform,opacity}
  .tpa-orbit__tile.is-active{border-color:var(--tpa-orange);box-shadow:var(--tpa-shadow);color:var(--tpa-navy)}
  .tpa-orbit__cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;margin:0}
  .tpa-orbit__cap b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;color:var(--tpa-ink)}
  .tpa-orbit__cap span{display:block;font-size:13px;color:var(--tpa-slate-2);margin-top:3px}
  .tpa-orbit__cap{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
  .tpa-orbit__cap.is-in{opacity:1;transform:none}
  /* the source list stays in the DOM for screen readers and for JS-off */
  .tpa-orbit__src{list-style:none;margin:0;padding:0}
  .tpa-orbit__src--hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tpa-orbit.is-static .tpa-orbit__tile{transition:none}
  @media (max-width:980px){
    .tpa-orbit{height:230px}
    .tpa-orbit__tile{padding:16px 22px;font-size:15px}
  }

  /* ---- hero mark as a pulsing dot field (added 2026-08-16) ----
     The stroked path stays in the DOM as geometry for the dot sampler but
     stops painting once the dots exist. Set MARK.style = 'dash' in
     tpa-heromark.js to go back to the plain dashed stroke. */
  .tpa-heromark__path.is-geometry{display:none}
  .tpa-heromark__dot{transform-box:fill-box;transform-origin:center;
    animation-name:tpa-mark-pulse;animation-timing-function:cubic-bezier(.45,0,.55,1);
    animation-iteration-count:infinite;will-change:transform,opacity}
  @keyframes tpa-mark-pulse{
    0%,100%{transform:scale(.42);opacity:.42}
    50%    {transform:scale(1);opacity:1}
  }
  /* opacity of the whole field, the knob that used to be stroke-opacity */
  .tpa-heromark__dots{opacity:.5}
  .tpa-phero .tpa-heromark__dots{opacity:.72}
  @media (prefers-reduced-motion:reduce){
    .tpa-heromark__dot{animation:none!important;transform:scale(.8)}
  }

  /* ---- warm variant of the dark page hero (added 2026-08-16) ----
     Same structure as .tpa-phero, colours reversed: burnt orange ground,
     white type, the accent word in brand blue, navy primary button.
     Lightened 2026-08-16 at Steve's request. The first two stops are as bright
     as they can go while white body copy still clears 4.5:1 against them:
     #B8480F is 5.29:1 and #C9491A is 4.72:1 with pure white. Full brand orange
     #F16523 is only 3.17:1, so it is kept out at the far right where the mark
     sits and no text does. Re-check with a contrast tool before lightening. */
  .tpa-phero--warm{background:linear-gradient(120deg,#F16523 0%,#C9491A 50%,#F16523 130%)}
  .tpa-phero--warm .tpa-eyebrow{color:#FFDCC4}
  .tpa-phero--warm .tpa-hl{color:#A8D8F5}
  .tpa-phero--warm .tpa-lead{color:rgba(255,255,255,.93)}
  .tpa-phero--warm .microline{color:rgba(255,255,255,.68)}
  /* the mark re-lit again: the navy-to-orange gradient disappears on orange */
  .tpa-phero--warm .tpa-heromark__dots{opacity:.55}
  .tpa-phero--warm .tpa-heromark__svg stop:nth-child(1){stop-color:#FFCBA6}
  .tpa-phero--warm .tpa-heromark__svg stop:nth-child(2){stop-color:#FFEEDF}
  .tpa-phero--warm .tpa-heromark__svg stop:nth-child(3){stop-color:#A8D8F5}

  /* ---- footer contact block (added 2026-08-16) ----
     Goes in Kadence's footer HTML widget, above the copyright row. Built to
     sit on the footer's dark ground. Rows with a `data-todo` attribute are
     placeholders the client still has to fill; they render in a muted style
     and are trivially greppable before launch. */
  .tpa-fcontact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;
    padding:44px 0 38px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
  .tpa-fcontact h4{font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 12px}
  .tpa-fcontact p{margin:0 0 6px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
  .tpa-fcontact a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
  .tpa-fcontact a:hover{border-bottom-color:var(--tpa-orange)}
  .tpa-fcontact .tpa-fnote{font-size:13px;color:rgba(255,255,255,.55)}
  .tpa-fcontact [data-todo]{color:rgba(255,255,255,.42);font-style:italic}
  @media (max-width:780px){
    .tpa-fcontact{grid-template-columns:1fr;gap:26px;padding:34px 0 30px}
  }

  /* ---- static variant of the hero card (added 2026-08-16) ----
     Same card as the homepage audience router, but the rows are facts rather
     than links, so the hover lift and the arrow affordance come off. Used on
     the About hero. */
  .tpa-router--static .tpa-door{cursor:default}
  .tpa-router--static .tpa-door:hover{background:var(--tpa-soft);border-color:var(--tpa-line);
    box-shadow:none;transform:none}
  .tpa-router--static .tpa-door .dsub{display:block;margin-top:2px}

  /* ---- links inside the navy portal card (added 2026-08-16) ----
     Kadence's global link colour is the brand orange, which reads as a warning
     on a navy card. White with a faint underline instead. The orange button is
     excluded on purpose: it is the one thing on that card that should shout. */
  .tpa-portal a:not(.tpa-btn){color:#fff;text-decoration:underline;
    text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;
    transition:text-decoration-color .15s ease}
  .tpa-portal a:not(.tpa-btn):hover{color:#fff;text-decoration-color:#fff}
  .tpa-portal .tpa-contactinfo a:not(.tpa-btn) b,
  .tpa-portal .tpa-contactinfo b a:not(.tpa-btn){color:#fff}

  /* ---- Gravity Forms 2.8: swap the stock blue for brand orange ----
     GF declares these on `.gform-theme--api, .gform-theme--framework`, so the
     class is doubled here to win on specificity regardless of enqueue order.
     `--gf-field-pg-prog-bar-bg-color-blue` is the multi-page progress bar when
     the form's progress bar is set to Blue in the form settings; setting it
     means the bar follows the brand without anyone remembering to change the
     dropdown. Verified against gravityforms 2.8.7 on 2026-08-16. */
  .gform-theme--framework.gform-theme--framework,
  .gform-theme--api.gform-theme--api{
    --gf-color-primary:var(--tpa-orange);
    --gf-color-primary-rgb:241,101,35;
    --gf-color-primary-darker:var(--tpa-orange-2);
    --gf-color-primary-lighter:#FF7C3E;
    --gf-color-primary-contrast:#fff;
    --gf-color-primary-contrast-rgb:255,255,255;
    --gf-field-pg-prog-bar-bg-color-blue:var(--tpa-orange);
  }
  /* legacy theme, in case a form is still on the older stylesheet */
  .gform_wrapper.gravity-theme .gform_page_footer .gform_next_button,
  .gform_wrapper.gravity-theme .gform_footer input[type=submit]{
    background:var(--tpa-orange);border-color:var(--tpa-orange);color:#fff}
  .gform_wrapper.gravity-theme .gform_page_footer .gform_next_button:hover,
  .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover{
    background:var(--tpa-orange-2);border-color:var(--tpa-orange-2)}
  .gform_wrapper .gf_progressbar .percentbar_blue{background-color:var(--tpa-orange)}

  /* ---- .tpa-markbed (added 2026-08-16) ----
     Drop this class on any plain section that should carry the animated mark
     behind its content. Registered as a heromark TARGET in tpa-heromark.js.
     Gives the section a faint wash so the mark has somewhere to live rather
     than floating on flat white, and pushes the mark further off the right
     edge than the hero does, since a content section has less room. */
  .tpa-markbed{padding:130px 0 150px;
    background:radial-gradient(1100px 620px at 50% 50%, #E4F0F9 0%, rgba(228,240,249,0) 66%)}
  /* Centred behind the content rather than bled off the right like the hero:
     a content section has cards across its full width, so an edge-bled mark
     just shows as stray dots in the margins.
     Centring is done with left + a negative margin, NOT transform, because the
     drift keyframes own `transform` on this element. Put both on transform and
     the mark jumps to the corner the moment the idle animation starts. */
  .tpa-markbed .tpa-heromark{--tpa-markbed-w:min(710px,54vw);
    right:auto;left:50%;margin-left:calc(var(--tpa-markbed-w) / -2);
    top:50%;width:var(--tpa-markbed-w)}
  .tpa-markbed .tpa-heromark__dots{opacity:.42}
  @media (max-width:980px){
    .tpa-markbed{padding:74px 0 96px}
    .tpa-markbed .tpa-heromark{--tpa-markbed-w:80vw;top:50%;bottom:auto}
    .tpa-markbed .tpa-heromark.is-idle{animation-name:tpa-heromark-drift}
  }

  /* ---- flora vs. a coloured section above it (fixed 2026-08-16) ----
     tpa-flora.js puts .tpa-flora-above on whatever section sits directly before
     the trust bar, and that class carries z-index:1 so the section's content
     stays over the stems. The side effect: if that section also has a solid
     background, the background paints over the stems too and the flora vanishes.
     Happened the moment the audience trio (a --soft section) was inserted above
     the bar. Rather than forbid coloured sections there, fade the background out
     across the 300px the stems occupy. */
  .tpa-flora-above.tpa-section--soft{
    background:linear-gradient(180deg,
      var(--tpa-soft) 0,
      var(--tpa-soft) calc(100% - 340px),
      rgba(245,246,247,0) calc(100% - 300px))}
  @media (max-width:980px){
    .tpa-flora-above.tpa-section--soft{
      background:linear-gradient(180deg,
        var(--tpa-soft) 0,
        var(--tpa-soft) calc(100% - 215px),
        rgba(245,246,247,0) calc(100% - 180px))}
  }

  /* ---- plain pages: Privacy Policy and anything else built from ordinary
     blocks (added 2026-09-03) ------------------------------------------------
     `.page .entry-content-wrap{padding:0}` further up lets full-bleed .tpa-
     sections sit flush against the header and footer. A page with no .tpa-
     section inherits the strip and nothing else, so its text ran the full
     window width in Kadence's default grey and the last line touched the
     footer. functions.php adds .tpa-plainpage to the body of any page whose
     content contains no .tpa- class, so this applies itself and stops applying
     the moment a page is rebuilt with the patterns.
     The column is capped at a reading measure, not at --tpa-maxw (1300px).
     Legal copy at 1300px is roughly 150 characters a line, about twice what is
     comfortable. Change --tpa-read below if you want it wider. */
  .tpa-plainpage .entry-content{
    --tpa-read:820px;
    max-width:var(--tpa-read);
    margin-left:auto;margin-right:auto;
    padding:72px 24px 120px;
    color:var(--tpa-ink);
    font-size:17px;line-height:1.7}
  .tpa-plainpage .entry-content p,
  .tpa-plainpage .entry-content li,
  .tpa-plainpage .entry-content td,
  .tpa-plainpage .entry-content blockquote{color:var(--tpa-ink)}
  .tpa-plainpage .entry-content h1,
  .tpa-plainpage .entry-content h2,
  .tpa-plainpage .entry-content h3,
  .tpa-plainpage .entry-content h4{
    font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;
    line-height:1.2;color:var(--tpa-ink)}
  .tpa-plainpage .entry-content h2{font-size:clamp(1.45rem,2.2vw,1.8rem);margin:2.2em 0 .55em}
  .tpa-plainpage .entry-content h3{font-size:1.2rem;font-weight:700;margin:1.9em 0 .5em}
  /* the first heading still sits against the header once the wrapper padding
     is zeroed, so keep the container's own top padding rather than the
     heading's margin */
  .tpa-plainpage .entry-content>*:first-child{margin-top:0}
  .tpa-plainpage .entry-content p{margin:0 0 1.25em}
  .tpa-plainpage .entry-content ul,
  .tpa-plainpage .entry-content ol{margin:0 0 1.25em;padding-left:1.4em}
  .tpa-plainpage .entry-content li{margin-bottom:.5em}
  .tpa-plainpage .entry-content a{color:var(--tpa-navy);text-decoration:underline;
    text-underline-offset:2px;text-decoration-thickness:1px}
  .tpa-plainpage .entry-content a:hover{color:var(--tpa-orange-2)}
  /* WordPress's own privacy-policy boilerplate ships "Suggested text:" markers.
     Keep them legible but clearly secondary until the real copy replaces them. */
  .tpa-plainpage .entry-content .privacy-policy-tutorial{color:var(--tpa-slate)}
  @media (max-width:980px){
    .tpa-plainpage .entry-content{padding:48px 22px 84px}
  }

  /* ---- section heads: centred eyebrow and title, left-aligned body (2026-09-15) ----
     The eyebrow and the H2 stay centred because they are display type and read
     as a unit. The paragraphs underneath go left, because centred prose forces
     the eye to hunt for the start of every line, and these paragraphs are now
     three and four lines long rather than the single line they were built for.
     The column itself stays centred, so the block still reads as one piece.
     `balance` is swapped for `pretty` on the paragraph: balancing line lengths
     is what you want on centred display type and is wasted on left-aligned
     prose, where it only produces odd short last lines. */
  .tpa-head p{text-align:left;text-wrap:pretty;max-width:740px}
  .tpa-head .tpa-lead{text-align:left}
  /* the checklist card and any intro list keep their own alignment */
  .tpa-head p:last-child{margin-bottom:0}

  /* ---- two-column section intros (2026-09-15) ----
     Where a section intro has exactly two paragraphs, set them side by side
     under the centred heading. Two stacked paragraphs in a 740px column left a
     tall ragged block under a centred title; side by side it reads as one
     balanced unit and shortens the scroll.

     Done with :has() so no markup changes are needed — the pages are stored in
     the database, and a CSS-only rule means nothing has to be re-pasted.
     `:nth-of-type(2):last-of-type` means EXACTLY two paragraphs: a three
     paragraph intro would leave an orphan on the second row, so those stay
     stacked. */
  @supports selector(:has(*)) {
    .tpa-head:has(> p:nth-of-type(2):last-of-type){
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      column-gap:56px;max-width:none}
    .tpa-head:has(> p:nth-of-type(2):last-of-type) > .tpa-eyebrow,
    .tpa-head:has(> p:nth-of-type(2):last-of-type) > h2,
    .tpa-head:has(> p:nth-of-type(2):last-of-type) > .tpa-h2{grid-column:1 / -1}
    /* each column carries its own measure, so the shared centring is dropped */
    .tpa-head:has(> p:nth-of-type(2):last-of-type) > p{
      max-width:none;margin-left:0;margin-right:0;margin-top:20px}
    @media (max-width:900px){
      .tpa-head:has(> p:nth-of-type(2):last-of-type){
        display:block;max-width:900px}
      .tpa-head:has(> p:nth-of-type(2):last-of-type) > p{
        max-width:740px;margin-left:auto;margin-right:auto}
    }
  }