/* =========================================================
   Pocket Litter | pocket-litter.com | site v1 (engine and design system from tribe-purpose.com v2)
   Built by hand and with love by Cloud Nine Labs (cloudninelabs.com)

   One file, one design system. Sections:
     1. Tokens and base      2. Type and buttons     3. Header and nav
     4. Heroes               5. Panels and sections  6. Cards (programs, paths, pricing, results)
     7. Testimonials         8. Media (video facade, embeds, gallery)
     9. Forms               10. Pocket Litter additions (buy button, spec table, buy box)
    11. Article (blog post)  12. Footer             13. Motion  14. Responsive
   ========================================================= */

/* ---------- 1. Tokens and base ---------- */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/lato-900.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/montserrat-var.woff2) format('woff2')}

:root{
  /* Pocket Litter: same family look as tribe-purpose.com v2, with the Tribe and Purpose green swapped for Pocket Litter red. */
  --red:#D7141A;          /* brand red: buttons, heroes, rules. White text on it is 5.2:1 */
  --red-dark:#A50F14;     /* hover and pressed states on light backgrounds */
  --red-bright:#FF4B4F;   /* red TEXT on teal or black (5.0:1 on teal, 6.4:1 on black) */
  --accent:#D7141A;
  --black:#000000;
  --teal:#072229;
  --white:#ffffff;
  --text:#222222;
  --muted:#666666;
  --line:#dfe3e1;
  --light:#f6f8f7;
  --gray:#e7eae9;
  --container:1140px;   /* one content width for the whole site: header, body, footer */
  --font-head:"Montserrat", sans-serif;
  --font-body:"Lato", sans-serif;
  --header-h:96px;
  --radius:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.6;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--red-dark)}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .4em;line-height:1.05}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:22px}
strong{font-weight:700}
.skip{position:absolute;left:-999px;top:8px;background:var(--teal);color:#fff;padding:10px 16px;z-index:1000;border-radius:var(--radius)}
.skip:focus{left:8px}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.container--narrow{max-width:860px}
.section{padding:80px 0}
.section--tight{padding:48px 0}
.section--black{background:var(--black);color:#e9ecec}
.section--red{background:var(--red)}
.section--white{background:var(--white)}
.section--light{background:var(--light)}
.section--gray{background:var(--gray)}
.section--teal{background:var(--teal);color:#e9ecec}
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 2. Type and buttons ---------- */
.section-title{font-family:var(--font-head);font-weight:200;font-size:46px;letter-spacing:.5px;line-height:.95;margin-bottom:.55em;color:var(--red)}
.section-title.on-black{color:var(--red-bright)}
.section-title.on-red{color:#fff}
.section-title.on-red-teal{color:#fff}
.section-title.on-teal{color:#fff}
.section-title--sm{font-size:34px}
.section-title strong{font-weight:700}
.eyebrow{font-family:var(--font-head);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:14px;color:var(--accent);margin:0 0 10px}
.eyebrow.on-red{color:#fff}
.eyebrow.on-dark{color:var(--red-bright)}
.prose p{margin:0 0 1.1em}
.prose ul li,.prose ol li{margin-bottom:.4em}
.section--black p,.section--teal p,.section--red .white p,.hero p{color:#fff}
.section--black a:not(.btn),.section--teal a:not(.btn){color:var(--red-bright)}
.section--black a:not(.btn):hover,.section--teal a:not(.btn):hover{color:#fff}
.section--red a:not(.btn){color:#fff;text-decoration:underline}
.lead{font-size:1.15rem}
.small{font-size:.9rem;color:var(--muted)}
.cols-2{column-count:2;column-gap:48px}
.cols-2 > *{break-inside:avoid}
.cols-2 h2,.cols-2 h3,.cols-2 h4{-webkit-column-break-after:avoid;break-after:avoid-column;break-inside:avoid}
.sub-title{font-family:var(--font-head);color:var(--teal);font-weight:700;font-size:1.5rem;margin:1.7em 0 .6em}
.section-title + .sub-title{margin-top:.6em}
.section--black .sub-title,.section--teal .sub-title{color:#fff}
.section--red .sub-title{color:#fff}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mission{font-family:var(--font-head);font-weight:300;font-size:1.6rem;line-height:1.35;max-width:30ch;margin:0 0 .6em}
.mission strong{font-weight:700}

.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;text-align:center;cursor:pointer;border:2px solid transparent;border-radius:40px;padding:14px 30px;font-size:16px;transition:all .2s ease;line-height:1;text-decoration:none!important}
.btn .arw{font-weight:700}
.btn--red{background:var(--red);color:#fff;border-color:#fff}
.btn--red:hover{background:#fff;color:var(--red);border-color:#fff}
.btn--white{background:#fff;color:var(--red);border-color:#fff}
.btn--white:hover{background:var(--red);color:#fff;border-color:#fff}
.btn--outline{background:transparent;color:#fff;border-color:#fff}
.btn--outline:hover{background:#fff;color:var(--red)}
.btn--teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--teal:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--solid{background:var(--red);color:#fff;border-color:var(--red)}   /* on white backgrounds */
.btn--solid:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn--ghost:hover{background:var(--teal);color:#fff}
.btn--lg{font-size:18px;padding:16px 34px}
.btn--sm{font-size:14px;padding:10px 20px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.btn[data-stripe]{position:relative}

/* ---------- 3. Header: two-line bar at the top, thin bar + slide-in menu on scroll ----------
   At the top of the page the bar is tall and transparent: logo on the left, a utility line (About, Login,
   Contact button) over the primary line (Programs, Speaking, Resources, Results, Blog) on the right.
   Once the visitor scrolls (body.compact) the bar narrows to 52px, both lines fade out and the Menu button
   fades in. Below 1080px the bar is always compact (the full nav plus Buy now needs about 1020px). Menu opens the slide-in panel with sub-panels. */
.stickybar{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:200;background:transparent;transition:background .25s ease,box-shadow .25s ease,height .3s ease}
.sb-inner{position:relative;max-width:var(--container);height:100%;margin:0 auto;padding:0 24px 8px;display:flex;align-items:center;gap:18px;transition:padding .3s ease}
.stickybar.scrolled,.compact .stickybar{height:52px}
.stickybar.scrolled .sb-inner,.compact .sb-inner{padding-bottom:0}
.stickybar.scrolled,.stickybar.solid,.compact .stickybar{background:rgba(7,34,41,.97);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.sb-logo{flex:0 0 auto;display:flex;align-items:center}
.sb-logo img{width:150px;max-width:38vw;height:auto;transition:opacity .2s ease,width .3s ease}
.stickybar.scrolled .sb-logo img,.compact .sb-logo img{width:112px}
.sb-logo:hover img{opacity:.85}
.sb-lines{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:1;transition:opacity .25s ease,visibility 0s linear 0s}
.compact .sb-lines{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
/* Line 1: utility. 13px / 600, hover is a colour change only. */
.sb-utils{display:flex;align-items:center;gap:44px;padding:4px 4px 0 0}
.sb-util{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.4px;color:rgba(255,255,255,.78);white-space:nowrap;transition:color .2s ease}
.sb-util:hover,.sb-util[aria-current]{color:#fff}
.stickybar.solid .sb-util:hover,.stickybar.solid .sb-util[aria-current]{color:var(--red-bright)}
/* Line 2: primary. 15px / 700, underline fades in on hover. */
.sb-nav{display:flex;align-items:stretch;height:38px}
.navcell{position:relative;display:flex;align-items:center}
.sb-link{position:relative;display:flex;align-items:center;height:100%;padding:0 28px;font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.3px;color:#fff;white-space:nowrap;transition:color .2s ease}
.sb-link::after{content:"";position:absolute;left:28px;right:28px;bottom:6px;height:2px;background:transparent;transition:background .2s ease}
.sb-nav > .navcell:last-child .sb-link,.sb-nav > .sb-link:last-child{padding-right:4px}
.sb-nav > .navcell:last-child .sb-link::after,.sb-nav > .sb-link:last-child::after{right:4px}
.sb-link:hover,.sb-link[aria-current],.sb-link.is-here{color:#fff}
.sb-link:hover::after,.sb-link[aria-current]::after,.sb-link.is-here::after{background:#fff}
.stickybar.solid .sb-link:hover,.stickybar.solid .sb-link[aria-current],.stickybar.solid .sb-link.is-here{color:var(--red-bright)}
.stickybar.solid .sb-link:hover::after,.stickybar.solid .sb-link[aria-current]::after,.stickybar.solid .sb-link.is-here::after{background:var(--red)}
.has-dropdown .caret{display:inline-block;width:6px;height:6px;margin-left:8px;position:relative;top:-2px;border-right:1.5px solid rgba(255,255,255,.85);border-bottom:1.5px solid rgba(255,255,255,.85);transform:rotate(45deg);transition:transform .2s ease}
.has-dropdown:hover .caret,.has-dropdown:focus-within .caret{transform:rotate(225deg)}
.dropdown{position:absolute;top:100%;left:0;min-width:250px;background:rgba(7,34,41,.98);border:1px solid rgba(255,255,255,.12);border-top:2px solid var(--red);box-shadow:0 14px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:40;padding:6px 0}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:11px 20px;font-family:var(--font-head);font-weight:600;font-size:14px;color:#eaeaea;white-space:nowrap;transition:background .18s ease,color .18s ease}
.dropdown a:hover,.dropdown a[aria-current]{background:rgba(255,255,255,.08);color:var(--red-bright)}
.dropdown--groups{display:grid;grid-template-columns:repeat(3,auto);align-items:start}
.dropdown--groups .dd-col{display:flex;flex-direction:column;padding:4px 0}
.dropdown--groups .dd-col+.dd-col{border-left:1px solid rgba(255,255,255,.1)}
.dropdown--right{left:auto;right:0}
.dd-h{display:block;padding:14px 20px 5px;font-family:var(--font-head);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red-bright);font-weight:700}
/* Menu button: hidden on landing, fades in once the bar is compact. */
.sb-menu{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:#fff;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:8px 0 8px 4px;opacity:0;visibility:hidden;pointer-events:none;transition:color .2s ease,opacity .25s ease .1s,visibility 0s linear .35s}
.compact .sb-menu{opacity:1;visibility:visible;pointer-events:auto;transition:color .2s ease,opacity .25s ease .1s,visibility 0s}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px}
.burger i{display:block;height:2px;width:22px;background:#fff;border-radius:1px;transition:background .2s ease,transform .25s ease}
.sb-menu:hover{color:var(--red-bright)}
.sb-menu:hover .burger i{background:var(--red)}
.sb-menu:hover .burger i:nth-child(1){transform:translateY(-1px)}
.sb-menu:hover .burger i:nth-child(3){transform:translateY(1px)}

/* slide-in menu panel */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;z-index:300}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-panel{position:fixed;top:0;right:0;height:100%;width:min(360px,88vw);background:var(--teal);color:#fff;z-index:310;transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.22,.61,.36,1),visibility 0s linear .4s;display:flex;flex-direction:column;box-shadow:-10px 0 34px rgba(0,0,0,.45)}
.menu-panel.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.22,.61,.36,1),visibility 0s}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 24px;border-bottom:1px solid rgba(255,255,255,.14);flex:0 0 auto}
.menu-brand img{width:150px;height:auto}
.menu-close{flex:0 0 auto;background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .2s ease,background .2s ease,transform .3s ease}
.menu-close:hover{color:var(--red-bright);background:rgba(255,255,255,.1);transform:rotate(90deg)}
.menu-nav{display:grid;flex:1 1 auto;overflow:hidden;position:relative}
.menu-nav .m-root,.menu-nav .m-panel{grid-area:1/1;display:flex;flex-direction:column;overflow-y:auto;transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility 0s linear .38s}
.menu-nav .m-panel{transform:translateX(100%);opacity:0;visibility:hidden}
.menu-nav.sub-open .m-root{transform:translateX(-30%);opacity:0;visibility:hidden}
.menu-nav.sub-open .m-panel.is-open{transform:none;opacity:1;visibility:visible;transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility 0s}
.m-item{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-head);font-weight:600;font-size:17px;color:#fff;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.08);background:none;border-left:0;border-right:0;border-top:0;text-align:left;cursor:pointer;transition:background .18s ease,color .18s ease}
.m-item:hover,.m-item[aria-current]{background:rgba(255,255,255,.07);color:var(--red-bright)}
.m-all{color:var(--red-bright);font-size:15px}
.m-chev{display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:12px;flex:0 0 auto}
.m-chev--back{transform:rotate(135deg);margin:0 12px 0 0}
.m-back{appearance:none;background:rgba(255,255,255,.05);border:0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:14px 24px;display:flex;align-items:center;cursor:pointer;text-align:left}
.m-back:hover{background:rgba(255,255,255,.1);color:var(--red-bright)}
.m-sub{display:flex;flex-direction:column;padding-bottom:16px}
.m-sub a{font-family:var(--font-head);font-weight:600;font-size:14.5px;color:#e6ecea;padding:10px 24px 10px 36px;transition:color .18s ease,background .18s ease}
.m-sub a:hover{background:rgba(255,255,255,.06);color:var(--red-bright)}
.m-h{display:block;margin-top:10px;padding:12px 24px 4px 36px;font-family:var(--font-head);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red-bright);font-weight:700}
body.menu-open{overflow:hidden}

/* ---------- 4. Heroes ---------- */
/* ---------- 4. Hero: 60/40 split, red on the home and program pages, teal everywhere else.
   No background video anywhere: the hero art is a still image in its own column. ---------- */
.hero{background:var(--red);padding:calc(var(--header-h) + 66px) 0 82px}
.hero--teal{background:var(--teal)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(26px,4vw,52px);align-items:center}
.hero--text .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero .eyebrow{font-size:11px;letter-spacing:1.6px;margin:0 0 14px;max-width:none}
.hero--red .eyebrow{color:#fff}
.hero--teal .eyebrow{color:var(--red-bright)}
.hero h1{color:#fff;font-weight:800;font-size:3.5rem;line-height:1.05;margin:0 0 .35em}
.hero h1:has(strong){font-weight:200}
.hero h1 strong{font-weight:800}
.hero h1 .sm{display:block;font-weight:400;font-size:1.5rem;line-height:1.3;margin-top:.5rem;max-width:36ch}
.hero p{color:#fff;font-size:16px;line-height:1.65;margin:0;max-width:58ch}
.hero .crumbs{font-size:13px}
.hero .btn-row,.hero .btn-stack{margin-top:26px}
.hero .btn-stack{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero .btn{font-size:15px;padding:13px 26px}
.hero--red .btn--white{border-color:#fff}
.hero--red .btn--red{background:#fff;color:var(--red);border-color:#fff}
.hero--red .btn--red:hover{background:transparent;color:#fff;border-color:#fff}
.hero--red .btn--outline:hover{color:var(--red)}
.hero--teal .btn--outline:hover{color:var(--teal)}
.hero-art img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:0 16px 44px rgba(0,0,0,.28);background:#0b2b32}
.hero-logo{width:min(230px,46vw);margin:0 0 18px;height:auto}
.rot{display:inline-block;min-height:1em}
.rot .word{display:inline-block;animation:dropIn 700ms cubic-bezier(.2,.75,.3,1) both}
@keyframes dropIn{0%{opacity:0;transform:translateY(-.75em)}70%{opacity:1;transform:translateY(.06em)}100%{opacity:1;transform:translateY(0)}}

.page-hero{background:var(--red);padding:calc(var(--header-h) + 56px) 0 62px}
.page-hero h1{color:#fff;font-weight:200;font-size:3.5rem;line-height:1.05}
.page-hero h1 strong{font-weight:800}
.page-hero p{color:#ffecec;margin:0;font-size:16px;line-height:1.65;max-width:60ch}
.page-hero .eyebrow{color:#fff;font-size:11px;letter-spacing:1.6px;max-width:none}
.page-hero--dark{background:var(--teal)}
.page-hero--dark p{color:#c7d2d0}
.page-hero--dark .eyebrow{color:var(--red-bright)}


.crumbs{font-size:.85rem;color:#c7d2d0;margin:0 0 14px;font-family:var(--font-head);font-weight:600}
.crumbs a{color:inherit;opacity:.85}
.crumbs a:hover{color:#fff;opacity:1}
.crumbs span{opacity:.6;margin:0 6px}
.page-hero .crumbs{color:#fff}
.page-hero .crumbs a:hover{color:#fff}

/* ---------- 5. Panels and sections ---------- */
.panel{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.panel>*{min-width:0}
.panel--short{min-height:440px}
.panel .pane-text{display:flex;flex-direction:column;justify-content:center;padding:70px clamp(28px,6vw,90px)}
.panel .pane-img{position:relative;min-height:360px;overflow:hidden}
.panel .pane-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.panel .pane-img.color img{filter:none}
.panel--black{background:var(--black)}
.panel--black .pane-text{color:#fff}
.panel--black .pane-text p{color:#eef1f0}
.panel--red{background:var(--red)}
.panel--red .pane-text{color:#fff}
.panel--red .pane-text p{color:#fff}
.panel--teal{background:var(--teal)}
.panel--teal .pane-text{color:#fff}
.panel--teal .pane-text p{color:#e0e8e6}
.panel--white{background:#fff}
.panel--white .pane-text p{color:var(--text)}
.panel--light{background:var(--light)}
.panel.img-left .pane-img{order:-1}
.panel .pane-text .section-title{margin-bottom:.5em}
.panel .pane-text ul{padding-left:20px}
.panel .pane-media{display:flex;align-items:center;justify-content:center;padding:50px clamp(24px,5vw,70px)}
.red-bar{height:26px;background:var(--red)}
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 30px;align-items:center;margin-top:44px}
.logo-grid img{width:66%;margin:0 auto}
.logo-grid--8{grid-template-columns:repeat(8,1fr);gap:24px 20px;margin-top:30px}
.logo-grid--8 img{width:80%}
.process{list-style:none;counter-reset:step;margin:26px 0 0;padding:0;max-width:640px}
.process li{position:relative;padding:14px 0 14px 58px;color:#fff;font-size:1.05rem}
.process li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:12px;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;display:flex;align-items:center;justify-content:center}
.process--dark li{color:var(--text)}
.process--dark li::before{color:#fff}
.process li strong{font-family:var(--font-head);display:block;font-size:1.05rem;margin-bottom:2px}
.process li strong+span,.process li .d{display:block;font-size:.95rem;opacity:.9}
.values h3{color:var(--teal);font-size:1.3rem;font-weight:700;margin:0 0 .25em}
.values .value{break-inside:avoid;margin-bottom:22px}
.values .led-by{color:var(--red);font-weight:700;font-size:1.15rem}
.bio .pane-text .role{font-style:italic;color:inherit;opacity:.8;font-weight:700;display:block;margin:-.2em 0 1em}
.bio .pane-text h2{font-size:2.1rem;font-weight:200;font-family:var(--font-head)}
.panel--red.bio .pane-text h2{color:#fff}
.panel--black.bio .pane-text h2{color:var(--red-bright)}
.bio .btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:20px}
.bio .btns .btn{min-width:290px;justify-content:flex-start}
.pill-list{list-style:none;padding:0;margin:16px 0 0}
.pill-list li{padding:9px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.section--red .pill-list li{border-color:rgba(255,255,255,.25);color:#fff}
.section--red .pill-list a{color:#fff;text-decoration:underline}
.section--black .pill-list li,.section--teal .pill-list li{border-color:rgba(255,255,255,.15)}
.check-list{list-style:none;padding:0;margin:18px 0 0}
.check-list li{position:relative;padding:6px 0 6px 34px}
.check-list li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat}
.section--red .check-list li::before,.panel--red .check-list li::before{background:var(--teal)}
.check-list li strong{font-family:var(--font-head)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.stats>*{min-width:0}
.stat{border-left:3px solid var(--red);padding:6px 0 6px 18px}
.stat .n{font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--teal)}
.stat .l{font-size:.95rem;color:var(--muted);margin-top:6px}
.section--black .stat .n,.section--teal .stat .n{color:#fff}
.section--black .stat .l,.section--teal .stat .l{color:#c7d2d0}
.section--red .stat{border-color:var(--teal)}
.section--red .stat .n{color:#fff}
.section--red .stat .l{color:#fff}
.faq{max-width:840px;margin:30px auto 0}
.faq--left{margin-left:0}
.faq details,.faq-item{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:20px 46px 20px 0;font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--teal);transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.8rem;font-weight:400;color:var(--red);line-height:1;transition:transform .2s ease}
.faq summary:hover{color:var(--red)}
.faq details[open]>summary{color:var(--red)}
.faq details[open]>summary::after{content:"\2013"}
.faq p{margin:-2px 0 22px;color:var(--text);max-width:72ch}
.faq .ans{padding:0 0 22px;max-width:72ch}
.faq .ans p{margin:0 0 .8em}
.section--black .faq details,.section--teal .faq details{border-color:rgba(255,255,255,.15)}
.section--black .faq summary,.section--teal .faq summary{color:#fff}
.section--black .faq p,.section--teal .faq p{color:#e0e8e6}
.cta-band{background:var(--teal);color:#fff;padding:64px 0}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-weight:200;font-size:2.4rem;margin:0}
.cta-band h2 strong{font-weight:800}
.cta-band p{color:#c7d2d0;margin:.4em 0 0;max-width:52ch}
.cta-band .btn-row{margin:0}
.cta-band--red{background:var(--red)}
.cta-band--red p{color:#fff}
.arrow-links{display:flex;flex-direction:column;gap:2px;margin-top:30px;max-width:600px}
.arrow-link{display:flex;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.22);font-family:var(--font-head);font-weight:600;font-size:1.5rem;color:#fff}
.arrow-link span.tx{display:flex;flex-direction:column}
.arrow-link small{font-family:var(--font-body);font-weight:400;font-size:.85rem;opacity:.75;margin-top:2px}
.arrow-link .arw{margin-left:auto;color:var(--red);transition:transform .2s ease}
.arrow-link:hover{color:var(--red)}
.arrow-link:hover .arw{transform:translateX(8px)}
.arrow-link--dark{color:var(--teal);border-color:rgba(0,0,0,.12)}
.arrow-link--dark:hover{color:var(--red)}
.arrow-link--sm{font-size:1.15rem;padding:14px 4px}
.bio .arrow-links{margin-top:24px;max-width:none}
.panel--red .arrow-link,.kit-hero .arrow-link{border-color:rgba(255,255,255,.3)}
.panel--red .arrow-link .arw,.kit-hero .arrow-link .arw{color:#fff}
.panel--red .arrow-link:hover,.panel--red .arrow-link:hover .arw,.kit-hero .arrow-link:hover,.kit-hero .arrow-link:hover .arw{color:#fff}
.kit-hero .arrow-links{max-width:520px;margin-top:22px}
.legal{max-width:860px}
.legal h2{color:var(--red);font-size:1.55rem;font-weight:600;margin:1.7em 0 .4em}
.legal h3{color:var(--teal);font-size:1.15rem;margin:1.2em 0 .3em}
.legal ul{padding-left:20px}
.legal li{margin-bottom:.5em}
.notice{border-left:4px solid var(--red);background:var(--light);padding:16px 20px;margin:18px 0;font-size:.98rem}
.notice strong{font-family:var(--font-head)}

/* ---------- 6. Cards ---------- */
.rlist{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.rlist .item{background:#fff;border:1px solid #cfd5d2;padding:30px 32px}
.rlist h3{color:var(--teal);font-weight:600;font-size:1.35rem;margin-bottom:.5em}
.rlist p{color:var(--text);font-size:16px;margin:0}
.rlist .item .tag{display:inline-block;font-family:var(--font-head);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.rlist--3{grid-template-columns:repeat(3,1fr)}

.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.path{background:#fff;border:1px solid #cfd5d2;border-top:6px solid var(--red);padding:32px 30px 28px;display:flex;flex-direction:column}
.path .tag{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--red);line-height:1;margin-bottom:4px}
.path .tag small{display:block;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px}
.path h3{color:var(--teal);font-size:1.4rem;font-weight:700;margin:14px 0 .4em}
.path p{font-size:16px;margin:0 0 14px}
.path ul{list-style:none;padding:0;margin:0 0 20px;font-size:16px}
.path li{padding:6px 0;border-top:1px solid var(--line)}
.path li a{font-weight:700;color:var(--teal)}
.path li a:hover{color:var(--red)}
.path .btn{margin-top:auto;align-self:flex-start}
.section--black .path,.section--teal .path{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.section--black .path h3,.section--teal .path h3,.section--black .path li a,.section--teal .path li a{color:#fff}
.section--black .path p,.section--teal .path p{color:#d6dedc}
.section--black .path li,.section--teal .path li{border-color:rgba(255,255,255,.12)}

.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #cfd5d2;overflow:hidden;color:var(--text);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.1);border-color:var(--red)}
.pcard .img{aspect-ratio:16/9;background:var(--teal);overflow:hidden}
.pcard .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pcard:hover .img img{transform:scale(1.05)}
.pcard .img.logo{display:flex;align-items:center;justify-content:center;background:#0d1a1c}
.pcard .img.logo img{width:70%;height:auto;object-fit:contain}
.pcard .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.pcard .kind{font-family:var(--font-head);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:8px}
.pcard h3{color:var(--teal);font-size:1.3rem;font-weight:700;margin:0 0 .4em}
.pcard p{font-size:16px;margin:0 0 16px}
.pcard .more{margin-top:auto;font-family:var(--font-head);font-weight:700;color:var(--red);display:inline-flex;gap:8px;align-items:center}
.pcard:hover .more{color:var(--teal)}
.pcard .price{font-family:var(--font-head);font-weight:700;color:var(--teal);font-size:.95rem;margin-bottom:10px}
.pcards--4{grid-template-columns:repeat(4,1fr)}
.pcards--2{grid-template-columns:repeat(2,1fr)}

.price-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:36px}
.price-card{background:#fff;border:2px solid var(--line);padding:32px 30px;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--red)}
.price-card .kind{font-family:var(--font-head);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);font-weight:700}
.price-card h3{color:var(--teal);font-size:1.4rem;margin:8px 0 6px}
.price-card .amount{font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:var(--teal);line-height:1}
.price-card .amount small{font-size:1rem;font-weight:600;color:var(--muted)}
.price-card p{font-size:16px;margin:12px 0 0}
.price-card ul{font-size:16px;margin:14px 0 22px}
.price-card .btn{margin-top:auto;align-self:flex-start}
.price-card .save{display:inline-block;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-left:10px;vertical-align:middle}
.price-cards--3{grid-template-columns:repeat(3,1fr)}
.section--black .price-card,.section--teal .price-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#fff}
.section--black .price-card h3,.section--black .price-card .amount,.section--teal .price-card h3,.section--teal .price-card .amount{color:#fff}
.section--black .price-card.featured,.section--teal .price-card.featured{border-color:var(--red)}

.sessions{display:grid;gap:26px;margin-top:36px}
.session{background:#fff;border:1px solid #cfd5d2;padding:34px 36px}
.session h3{color:var(--teal);font-size:1.5rem;font-weight:700;margin:0 0 .15em}
.session .sub{font-family:var(--font-head);font-weight:300;font-size:1.15rem;color:var(--red-dark);margin:0 0 .9em}
.session .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-top:8px}
.session h4{font-family:var(--font-head);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin:0 0 8px}
.session ul{font-size:15px;padding-left:18px;margin:0}
.session li{margin-bottom:4px}
.session .btn{margin-top:20px}
.section--light .session{border-color:#d7dcda}

.resource-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.resource{display:flex;gap:20px;padding:24px;background:#fff;border:1px solid #cfd5d2;align-items:flex-start;color:var(--text)}
.resource .ic{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.resource h3{color:var(--teal);font-size:1.2rem;margin:0 0 .3em}
.resource p{font-size:15px;margin:0}
.resource:hover{border-color:var(--red)}
.resource:hover h3{color:var(--red)}
.article-list{list-style:none;padding:0;margin:30px 0 0;max-width:900px}
.article-list li{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.article-list h3{font-size:1.1rem;font-weight:600;color:var(--teal);margin:0}
.article-list .src{font-size:.85rem;color:var(--muted);display:block;margin-top:3px}
.article-list a.btn{flex:0 0 auto}

/* ---------- 7. Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.quote{background:#fff;border:1px solid #cfd5d2;padding:28px 28px 24px;display:flex;flex-direction:column;font-size:16px}
.quote::before{content:"\201C";font-family:var(--font-head);font-weight:800;font-size:3.4rem;line-height:.6;color:var(--red);display:block;margin-bottom:12px}
.quote p{margin:0 0 18px;flex:1}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(100%)}
.quote .who b{display:block;font-family:var(--font-head);font-size:.95rem;color:var(--teal)}
.quote .who span{font-size:.85rem;color:var(--muted)}
.quote--dark{background:var(--teal);border-color:var(--teal);color:#fff}
.quote--dark .who b{color:#fff}
.quote--dark .who span{color:#c7d2d0}
.section--black .quote,.section--teal .quote{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#e8eeec}
.section--black .quote .who b,.section--teal .quote .who b{color:#fff}
.section--black .quote .who span,.section--teal .quote .who span{color:#b9c4c1}
.quotes--2{grid-template-columns:repeat(2,1fr)}
.quote.long p{font-size:15px}
.big-quote{max-width:860px;margin:30px auto 0;text-align:center;font-family:var(--font-head);font-weight:300;font-size:1.6rem;line-height:1.35;color:#fff}
.big-quote cite{display:block;font-style:normal;font-family:var(--font-body);font-size:1rem;margin-top:16px;color:var(--teal)}
.section--black .big-quote cite,.section--teal .big-quote cite{color:var(--red-bright)}

/* ---------- 8. Media ---------- */
.embed{position:relative;padding-bottom:56.25%;height:0;margin-top:10px;border-radius:6px;overflow:hidden;background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-facade{position:relative;display:block;aspect-ratio:16/9;background:#000 center/cover no-repeat;border-radius:6px;overflow:hidden;cursor:pointer;border:0;padding:0;width:100%}
.video-facade img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .2s ease,transform .6s ease}
.video-facade:hover img{opacity:1;transform:scale(1.03)}
.video-facade .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s ease,background .2s ease}
.video-facade .play::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:6px}
.video-facade:hover .play{transform:scale(1.08);background:var(--accent)}
.video-facade .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-family:var(--font-head);font-weight:600;font-size:.95rem;text-align:left}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-facade--vertical{aspect-ratio:9/16;max-width:380px;margin:0 auto}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.video-grid figure{margin:0}
.video-grid figcaption{margin-top:10px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--teal)}
.section--black .video-grid figcaption,.section--teal .video-grid figcaption{color:#fff}
.video-grid figcaption small{display:block;font-family:var(--font-body);font-weight:400;color:var(--muted);font-size:.85rem;margin-top:2px}
.video-grid--2{grid-template-columns:repeat(2,1fr)}
.local-video{width:100%;border-radius:6px;background:#000;display:block}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.gallery figure{margin:0;overflow:hidden}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;display:block;transition:transform .55s ease}
.gallery figure:hover img{transform:scale(1.07)}
.gallery .dl{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--font-head);font-weight:600;font-size:14px;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.gallery .dl:hover{color:var(--teal);border-color:var(--teal)}
.section--white .gallery .dl,.section--light .gallery .dl{color:var(--teal);border-color:rgba(0,0,0,.2)}
.section--white .gallery .dl:hover,.section--light .gallery .dl:hover{color:var(--red)}
.kit-hero{background:var(--red);padding:calc(var(--header-h) + 30px) 0 60px}
.kit-hero .top{text-align:center;color:#fff;font-family:var(--font-head);font-weight:200;font-size:2rem;margin-bottom:26px}
.kit-hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.kit-hero h1{color:#fff;font-size:3.4rem;font-weight:800;line-height:1;margin:0}
.kit-hero h2{color:#fff;font-weight:700;font-size:1.3rem;margin:.3em 0 1em}
.kit-hero .klogo{width:230px;margin:0 0 18px}
.kit-hero p{color:#ffecec}
.kit-hero .btn{margin:8px 8px 0 0}
.kit-hero .portrait{filter:grayscale(100%);border-radius:4px}
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.photo-strip img{aspect-ratio:4/3;object-fit:cover;border-radius:4px;width:100%}

/* ---------- 9. Forms and calculator ---------- */
.form{max-width:760px}
.form--wide{max-width:none}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* First and last name share one row at every width; every other field is full width. */
.form .row.row--names{grid-template-columns:1fr 1fr}
.form label{display:block;font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--teal);margin:0 0 6px}
.form label .opt{font-weight:400;color:var(--muted);font-size:.85rem}
.form .field{margin-bottom:18px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],.form input[type=url],.form select,.form textarea{width:100%;font:inherit;font-size:1rem;padding:13px 14px;border:1px solid #c5ccc9;border-radius:var(--radius);background:#fff;color:var(--text);transition:border-color .2s ease,box-shadow .2s ease}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(215,20,26,.2)}
.form .help{font-size:.85rem;color:var(--muted);margin-top:6px}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.form .consent input{margin-top:5px}
.form .status{display:none;margin-top:16px;padding:14px 18px;border-radius:var(--radius);font-size:.98rem}
.form .status.ok{display:block;background:#e9f1f2;border:1px solid var(--teal);color:var(--teal)}
.form .status.err{display:block;background:#fdeeee;border:1px solid #d33;color:#8a1c1c}
.form .status.sending{display:block;background:var(--light);border:1px solid var(--line);color:var(--muted)}
.form .field__error{display:none;color:#b31b1b;font-size:.85rem;margin:6px 0 0}
.form .field.is-invalid .field__error{display:block}
.form .field.is-invalid input,.form .field.is-invalid textarea,.form .field.is-invalid select{border-color:#d33}
.form .req{color:var(--red)}
.form .form__turnstile{margin:6px 0 18px;min-height:65px}
.form .actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.form .actions .hint{font-size:.85rem;color:var(--muted);margin:0}
.form button[disabled]{opacity:.6;cursor:not-allowed}
.section--black .form label,.section--teal .form label{color:#fff}
.section--black .form .help,.section--teal .form .help,.section--black .form .consent,.section--teal .form .consent{color:#b9c4c1}
.section--red .form label{color:#fff}
.form-card{background:#fff;border:1px solid #cfd5d2;padding:36px 38px}
.form-card h2{color:var(--teal);font-size:1.6rem;font-weight:700;margin-bottom:.3em}
.form-card>p{font-size:16px;color:var(--muted)}
.form fieldset{border:0;padding:0;margin:0 0 10px}
.form legend{font-family:var(--font-head);font-weight:700;color:var(--teal);font-size:1.1rem;margin-bottom:12px;padding:0}
.calc{background:#fff;border:1px solid #cfd5d2;padding:36px 38px;max-width:900px}
.calc .row{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.calc label{display:block;font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--teal);margin-bottom:6px}
.calc input{width:100%;font:inherit;font-size:1.1rem;padding:13px 14px;border:1px solid #c5ccc9;border-radius:var(--radius)}
.calc input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(215,20,26,.2)}
.calc .btn{white-space:nowrap}
.calc-out{margin-top:30px;display:none}
.calc-out.show{display:block}
.calc-out h3{color:var(--teal);font-size:1.25rem;margin:1.2em 0 .5em}
.calc-out table{width:100%;border-collapse:collapse;font-size:16px}
.calc-out th,.calc-out td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.calc-out th{font-family:var(--font-head);font-weight:600;color:var(--teal);font-size:.9rem;letter-spacing:.5px;text-transform:uppercase}
.calc-out td.num{text-align:right;font-family:var(--font-head);font-weight:700;color:var(--teal);white-space:nowrap}
.calc-out tr.total td{background:var(--light);font-weight:700}
.calc-out tr.total td.num{color:var(--red-dark);font-size:1.15rem}
.calc-out .why{font-size:.85rem;color:var(--muted)}
.calc-out .why a{text-decoration:underline}
.calc-out .note{font-size:.9rem;color:var(--muted);margin-top:16px}
.calc-error{color:#8a1c1c;margin-top:12px;font-weight:700;display:none}

/* ---------- 10. Pocket Litter additions ---------- */
/* Buy button in the header. On the top-of-page bar it is the last item on the primary line; once the bar goes
   compact it moves next to the Menu button so the purchase path is one tap from anywhere. */
.sb-buy{display:inline-flex;align-items:center;margin-left:22px;align-self:center;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.8px;text-transform:uppercase;background:var(--red);color:#fff;border:2px solid var(--red);border-radius:40px;padding:9px 20px;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease}
.sb-buy:hover{background:#fff;color:var(--red);border-color:#fff}
.sb-buy--compact{position:absolute;right:128px;top:50%;transform:translateY(-50%);margin:0;padding:7px 16px;font-size:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease .1s,visibility 0s linear .35s,background .2s ease,color .2s ease}
.compact .sb-buy--compact{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease .1s,visibility 0s,background .2s ease,color .2s ease}
/* On pages that open with a red hero the red button would vanish into it, so it flips to white until the bar goes compact */
body:has(.hero--red):not(.compact) .sb-buy--main{background:#fff;color:var(--red);border-color:#fff}
body:has(.hero--red):not(.compact) .sb-buy--main:hover{background:transparent;color:#fff}
.m-buy{display:flex;justify-content:center;margin:18px 24px 6px;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;letter-spacing:.8px;text-transform:uppercase;font-size:14px;padding:14px 20px;border-radius:40px}
.m-buy:hover{background:#fff;color:var(--red)}

/* Spec table: two columns, label and value. Used on the product page and the audience pages. */
.spec-table{width:100%;border-collapse:collapse;font-size:16px;margin:10px 0 0}
.spec-table th,.spec-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table th{font-family:var(--font-head);font-weight:700;color:var(--teal);width:42%;background:var(--light)}
.spec-table td{color:var(--text)}
.section--teal .spec-table th,.section--black .spec-table th{background:rgba(255,255,255,.06);color:#fff}
.section--teal .spec-table td,.section--black .spec-table td{color:#e0e8e6}
.section--teal .spec-table th,.section--teal .spec-table td,.section--black .spec-table th,.section--black .spec-table td{border-color:rgba(255,255,255,.14)}

/* Buy box: product page purchase card */
.buy-box{background:#fff;border:2px solid var(--red);border-radius:6px;padding:30px 30px 26px;box-shadow:0 16px 44px rgba(0,0,0,.18)}
.buy-box .kind{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red)}
.buy-box h2{color:var(--teal);font-size:1.6rem;font-weight:800;margin:8px 0 4px}
.buy-box .amount{font-family:var(--font-head);font-weight:800;font-size:2.8rem;color:var(--teal);line-height:1;margin:14px 0 4px}
.buy-box .amount small{font-size:1rem;font-weight:600;color:var(--muted);margin-left:6px}
.buy-box ul{list-style:none;padding:0;margin:18px 0 22px;font-size:15.5px}
.buy-box li{padding:7px 0 7px 26px;border-top:1px solid var(--line);position:relative}
.buy-box li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:10px;background:var(--red);transform:rotate(45deg)}
.buy-box .btn{width:100%;justify-content:center}
.buy-box .fine{font-size:13.5px;color:var(--muted);margin:14px 0 0;line-height:1.5}
.buy-box .fine a{text-decoration:underline}
.hero .buy-box p{color:var(--muted)}

/* Big numbers strip on red */
.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--teal)}
.spec-strip div{padding:30px 26px;border-right:1px solid rgba(255,255,255,.12);color:#fff}
.spec-strip div:last-child{border-right:0}
.spec-strip b{display:block;font-family:var(--font-head);font-weight:800;font-size:2.3rem;line-height:1;color:#fff}
.spec-strip span{display:block;margin-top:8px;font-size:.92rem;color:#c7d2d0;line-height:1.4}
.spec-strip b small{font-size:1.1rem;font-weight:700;color:var(--red-bright);margin-left:4px}

/* Photo pair with captions */
.fig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
.fig-grid--3{grid-template-columns:repeat(3,1fr)}
.fig-grid figure{margin:0}
.fig-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.fig-grid figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
.section--teal .fig-grid figcaption,.section--black .fig-grid figcaption{color:#b9c4c1}

.disclaimer{font-size:.9rem;color:var(--muted);border-left:3px solid var(--red);padding:4px 0 4px 16px;margin:26px 0 0;max-width:70ch}
.section--teal .disclaimer,.section--black .disclaimer{color:#b9c4c1}

@media(max-width:1024px){
  .spec-strip{grid-template-columns:repeat(2,1fr)}
  .spec-strip div:nth-child(2){border-right:0}
  .spec-strip div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:900px){
  .fig-grid--3{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .spec-strip b{font-size:1.9rem}
  .spec-strip div{padding:22px 18px}
  .fig-grid,.fig-grid--3{grid-template-columns:1fr}
  .buy-box{padding:24px 20px}
  .sb-buy--compact{right:116px}
}

/* ---------- 11. Article (blog post) ---------- */
.post-hero{background:var(--teal);padding:calc(var(--header-h) + 40px) 0 50px}
.post-hero .cat{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red-bright);margin-bottom:14px}
.post-hero h1{color:#fff;font-size:2.8rem;font-weight:700;line-height:1.1;max-width:24ch}
.post-hero .meta{color:#c7d2d0;font-family:var(--font-head);font-weight:600;font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.post-hero .meta a{color:#fff}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start}
.post-body{font-size:18px}
.post-body h2{color:var(--teal);font-weight:700;font-size:1.75rem;margin:1.6em 0 .5em;scroll-margin-top:110px}
.post-body h3{color:var(--teal);font-weight:600;font-size:1.3rem;margin:1.4em 0 .4em;scroll-margin-top:110px}
.post-body p,.post-body li{line-height:1.7}
.post-body blockquote{margin:1.4em 0;padding:4px 0 4px 22px;border-left:4px solid var(--red);font-family:var(--font-head);font-weight:300;font-size:1.25rem;color:var(--teal)}
.post-body img{border-radius:6px;margin:1.2em 0}
.post-body figure{margin:1.4em 0}
.post-body figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
.post-body table{width:100%;border-collapse:collapse;font-size:16px;margin:1.2em 0}
.post-body th,.post-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.post-body th{font-family:var(--font-head);font-weight:700;color:var(--teal);background:var(--light)}
.post-body .callout{background:var(--light);border-left:4px solid var(--red);padding:18px 22px;margin:1.4em 0}
.post-body .callout strong{font-family:var(--font-head)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.post-body .post-cta{background:var(--teal);color:#fff;padding:30px 32px;margin:2.2em 0;border-radius:6px}
.post-body .post-cta h3{color:#fff;margin-top:0}
.post-body .post-cta p{color:#c7d2d0}
.post-side{align-self:stretch}
.side-sticky{position:sticky;top:72px}
.toc{border:1px solid var(--line);padding:22px 24px;margin-bottom:28px;background:#fff}
.toc .label{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.toc ol{list-style:none;padding:0;margin:0}
.toc li{margin:0}
.toc a{display:block;padding:6px 0 6px 12px;border-left:2px solid transparent;font-size:.92rem;color:var(--muted);line-height:1.35}
.toc a:hover{color:var(--teal)}
.toc a.is-active{border-left-color:var(--red);color:var(--teal);font-weight:700}
.author-box{border:1px solid var(--line);padding:24px;background:#fff;margin-bottom:28px}
.author-box .head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.author-box b{display:block;font-family:var(--font-head);color:var(--teal);font-size:1.05rem}
.author-box .role{font-size:.85rem;color:var(--muted)}
.author-box p{font-size:15px;margin:0 0 12px}
.author-box .links{display:flex;gap:12px;font-family:var(--font-head);font-weight:700;font-size:.9rem}
.post-share{display:flex;gap:12px;align-items:center;margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);font-family:var(--font-head);font-weight:700;color:var(--teal);font-size:.95rem}
.post-share a{display:inline-flex;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--teal)}
.post-share a:hover{border-color:var(--red);color:var(--red)}
.post-share svg{width:16px;height:16px;fill:currentColor}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.post-tags a{font-family:var(--font-head);font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid var(--line);color:var(--teal)}
.post-tags a:hover{border-color:var(--red);color:var(--red-dark)}
.related{margin-top:56px}
.related h2{color:var(--teal);font-size:1.5rem;margin-bottom:.6em}
.related .rlist{margin-top:0}

/* ---------- 12. Footer ---------- */
.site-footer{position:relative;background:var(--black);color:#c7cecb;padding:56px 0 30px;overflow:hidden}
.footer-watermark{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);font-family:var(--font-head);font-weight:800;font-size:15vw;line-height:1;color:rgba(255,255,255,.045);white-space:nowrap;pointer-events:none;z-index:0}
.site-footer .container{position:relative;z-index:1}
.footer-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px}
.footer-hero .find{font-family:var(--font-head);font-weight:200;font-size:24px;color:#fff;display:block;margin-bottom:8px}
.footer-hero .fh-logo{width:230px}
.footer-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center;justify-content:flex-end}
.footer-line{border:0;border-top:1px solid rgba(255,255,255,.16);margin:30px 0 30px}
.footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:30px}
.footer-cols h2{font-family:var(--font-head);color:#fff;font-weight:700;font-size:15px;margin:0 0 14px;letter-spacing:.5px}
.footer-cols ul{list-style:none;margin:0;padding:0}
.footer-cols li{margin-bottom:9px;font-size:15px}
.footer-cols a{color:#c7cecb}
.footer-cols a:hover{color:var(--red-bright)}
.footer-logo img{width:180px;margin-bottom:18px}
.footer-social{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.footer-social a{display:inline-flex;width:18px;height:18px;transition:transform .2s ease,opacity .2s ease;opacity:.85}
.footer-social a:hover{transform:translateY(-2px);opacity:1}
.footer-social svg{width:18px;height:18px;display:block}
.footer-mission{font-size:14px;color:#8b938f;max-width:34ch;margin:0}
.footer-copy{margin-top:34px;font-size:13px;color:#8b938f;display:flex;flex-wrap:wrap;gap:6px 24px}
.footer-copy a{color:#8b938f}
.footer-copy a:hover{color:var(--red-bright)}

/* ---------- 13. Motion ---------- */
/* Scroll reveal: fade up, one row at a time. JS adds .reveal, then .in. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .62s cubic-bezier(.22,.7,.3,1),transform .62s cubic-bezier(.22,.7,.3,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.hero-copy>*{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.12s}
.hero-copy>*:nth-child(3){animation-delay:.24s}
.hero-copy>*:nth-child(4){animation-delay:.36s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rlist .item{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.rlist .item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.10);border-color:var(--red)}
.logo-grid img{transition:transform .25s ease}
.logo-grid img:hover{transform:scale(1.09)}
.panel .pane-img{overflow:hidden}
.panel .pane-img img{transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.panel:hover .pane-img img{transform:scale(1.05)}
.brand img{transition:opacity .2s ease,transform .2s ease}
.brand:hover img{opacity:.9}
.footer-logo img,.fh-logo{transition:opacity .2s ease}
.footer-logo a:hover img,.footer-hero a:hover .fh-logo{opacity:.8}
@media(prefers-reduced-motion:reduce){
  .hero-copy>*,.rot .word{animation:none!important}
  .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}
  .panel:hover .pane-img img,.gallery figure:hover img,.logo-grid img:hover,.rlist .item:hover,.pcard:hover{transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- 14. Responsive ---------- */
@media(max-width:1180px){
  .sb-link{padding:0 18px;font-size:14px}
  .sb-link::after{left:18px;right:18px}
  .sb-utils{gap:30px}
}
@media(max-width:1080px){
  .sb-lines{display:none}
  .stickybar{background:rgba(7,34,41,.97);height:64px}
  .sb-inner{padding-bottom:0}
  .stickybar.scrolled,.compact .stickybar{height:52px}
  .sb-logo img{width:120px}
  :root{--header-h:64px}
}
@media(max-width:1024px){
  .grid-4,.pcards--4,.stats{grid-template-columns:repeat(2,1fr)}
  .logo-grid--8{grid-template-columns:repeat(4,1fr)}
  .session .cols{grid-template-columns:1fr 1fr}
  .session .cols>div:first-child{grid-column:1/-1}
  .archive{grid-template-columns:1fr;gap:26px}
  .archive-side{position:static}
  .post-layout{grid-template-columns:1fr}
  .post-side{align-self:auto}
  .side-sticky{position:static}
  .toc{display:none}
  .footer-cols{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-art{max-width:520px;margin-top:6px}
  .kit-hero .grid{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr}
  .panel.img-left .pane-img{order:0}
  .panel .pane-img{min-height:340px}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:3rem}
  .grid-2,.grid-3,.pcards,.paths,.quotes,.price-cards,.price-cards--3,.resource-list,.video-grid,.rlist--3{grid-template-columns:1fr}
  .rlist{grid-template-columns:1fr}
  .cols-2{column-count:1}
  .pod-hero{grid-template-columns:1fr}
  .pod-hero img{max-width:220px}
  .cta-band .inner{flex-direction:column;align-items:flex-start}
  .calc .row{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .photo-strip{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2.6rem}
  .hero h1 .sm{font-size:1.25rem}
  .post-hero h1{font-size:2.1rem}
}
@media(max-width:640px){
  body{font-size:17px}
  .section{padding:52px 0}
  .container,.sb-inner{padding-left:20px;padding-right:20px}
  .sb-menu{right:20px}
  .section-title,.page-hero h1{font-size:2.3rem}
  .hero h1{font-size:2.3rem}
  .section-title--sm{font-size:2rem}
  .kit-hero h1{font-size:2.4rem}
  .cta-band h2{font-size:1.9rem}
  .logo-grid,.gallery,.logo-grid--8{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .stat .n{font-size:2.1rem}
  .footer-hero{grid-template-columns:1fr;align-items:flex-start}
  .footer-actions{justify-content:flex-start}
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-cols>div:first-child{grid-column:1/-1}
  .hero .btn-stack .btn,.bio .btns .btn{min-width:0;width:100%}
  .session{padding:26px 22px}
  .session .cols{grid-template-columns:1fr}
  .form-card,.calc{padding:26px 22px}
  .pod-card,.bpost{padding:20px}
  .m-item{padding:11px 22px;font-size:16px}
  .panel .pane-text{padding:50px 24px}
}

/* Footer additions: sub line under the tagline, vertical logo. Newsletter row (.news-row) is used on /contact/ and /guides/. */
.footer-sub{color:#c7cecb;font-size:15px;margin:0;max-width:52ch}
.footer-logo img{width:150px}
.news-label{display:block;font-family:var(--font-head);font-weight:700;font-size:15px;color:#fff!important;margin:0 0 12px}
.news-row{display:flex;gap:12px;align-items:flex-start}
.news-row .field{flex:1;margin:0}
.news-row input{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);background:rgba(255,255,255,.06);color:#fff}
.news-row input::placeholder{color:#9fa7a4}
.news-row input:focus{outline:0;border-color:var(--red-bright)}
.news-form .form__turnstile{margin:12px 0 0;min-height:0}
.news-form .field__error{color:var(--red-bright)}
@media(max-width:640px){.news-row{flex-direction:column;align-items:stretch}}
/* Pocket Litter logo sizing: the horizontal lockup carries a large hex mark, so it runs a little wider than the T&P wordmark */
.sb-logo img{width:184px}
.stickybar.scrolled .sb-logo img,.compact .sb-logo img{width:132px}
.menu-brand img{width:160px}
@media(max-width:1080px){.sb-logo img{width:132px}}

/* Buy buttons in the main nav, the compact (scrolled) bar and the slide-in menu all match the hero button exactly:
   Montserrat 700, 15px, sentence case, no tracking, 13px 26px padding, arrow. One size everywhere. */
.sb-buy,.sb-buy--compact,.m-buy{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1;text-transform:none;letter-spacing:0;padding:13px 26px;gap:12px;align-items:center}
.m-buy{display:inline-flex;align-self:flex-start;margin:18px 24px 6px}
/* Phones: the Menu button drops its word and keeps the burger, so the full-size Buy now button fits beside the logo. */
@media(max-width:640px){
  .sb-menu-label{display:none}
  .sb-buy--compact{right:64px}
}
/* Narrow phones (360px class): shrink the compact logo so the full-size Buy now button clears it. */
@media(max-width:380px){.sb-logo img,.stickybar.scrolled .sb-logo img,.compact .sb-logo img{width:108px}}
/* The header and menu Buy buttons are not .btn elements, so they missed the .btn arrow weight. Same arrow as the hero. */
.sb-buy .arw,.m-buy .arw{font-weight:700}
/* Arrows. The → glyph is not in the self-hosted Montserrat or Lato files, so browsers were drawing it from whatever
   system font they had (thin at 15px, heavier at 18px, and different on Mac, Windows and phones). Every .arw is now the
   same drawn arrow in the text colour, one weight everywhere, matching the bold 18px arrow in the "Who carries it" cards. */
.arw{display:inline-block;flex:0 0 auto;width:1.1em;height:1em;vertical-align:-.12em;overflow:hidden;white-space:nowrap;text-indent:110%;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h19M15 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h19M15 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
/* Four-up photo row (product page: red bag, OD green bag, deployed, hub) */
.fig-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.fig-grid--4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.fig-grid--4{grid-template-columns:1fr 1fr}}

/* Desktop bar: the two nav lines end at the same right edge (Contact over In Action), and the Buy now button sits to their
   right, vertically centred on the bar like the logo. It fades out when the bar goes compact, where the compact Buy now
   next to Menu takes over. */
.sb-buy--main{margin-left:36px;flex:0 0 auto;transition:opacity .2s ease,visibility 0s linear 0s,background .2s ease,color .2s ease,border-color .2s ease}
.compact .sb-buy--main{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
@media(max-width:1080px){.sb-buy--main{display:none}}
.sb-utils{padding-right:0}   /* Contact's right edge lines up exactly with In Action's */