/*
 * content.css — shared component styles for Treantly NATIVE content templates
 * (case_study singles + the case-studies index). Extracted verbatim from the
 * canvas designed pages (stories/effydesk.html, case-studies.html) so the CPT
 * templates render pixel-identical without inline CSS.
 *
 * Token + reset strategy (deliberate, see DECISIONS):
 *  - The design tokens (--forest, --parchment, --lime-bright, --r-full, ...) and
 *    the aggressive global reset are SCOPED under `body.cs-template` (the class
 *    set by single-case_study.php / page-case-studies.php). That keeps this one
 *    stylesheet reusable by Track B (resources posts, which carry GeneratePress
 *    chrome) WITHOUT the universal reset wiping the theme's base styles there.
 *  - The component class rules (.cs-*, .article-*, .cta-*, .site-nav, .site-
 *    footer, .btn, .eyebrow) are left global; they only resolve their var(--x)
 *    tokens when nested under a cs-template ancestor, which is always the case on
 *    case-study views.
 *  - Brand pass baked in (not !important overrides): body weight 400, footer
 *    background forest-deep #1e2b18 (BRAND: never near-black backgrounds).
 *
 * This is a scoped COPY of the canvas-page design tokens, which intentionally
 * differ from the theme's --t-* names (see style.css). Consolidation onto --t-*
 * is a planned later cleanup.
 */

/* ---- Design tokens (scoped) ---- */
body.cs-template {
  --forest:#2D3D23; --forest-mid:#556154; --forest-deep:#1e2b18;
  --lime:#E3F599; --lime-bright:#C8E85A;
  --cream:#F5F3EC; --parchment:#F0F4D3; --tan:#CEC4A5; --charcoal:#282828; --white:#FFFFFF;
  --font:'DM Sans',system-ui,sans-serif; --container:1200px; --gutter:clamp(1.25rem,4vw,3rem);
  --nav-h:72px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:100px;
  --shadow-sm:0 2px 8px rgba(45,61,35,.07); --shadow-md:0 4px 24px rgba(45,61,35,.10); --shadow-lg:0 8px 40px rgba(45,61,35,.14);
}

/* ---- Reset + base (scoped to the bare content templates) ----
   Scoped via :where() so the scope adds ZERO specificity. Without :where(),
   `body.cs-template *{padding:0}` (0,1,1) would OUTRANK the component padding
   rules like `.article-hero{padding-top:...}` (0,1,0) and collapse every
   section's spacing. :where() keeps these at the same low specificity the
   original global reset had, so component rules win as designed. */
:where(body.cs-template) *,:where(body.cs-template) *::before,:where(body.cs-template) *::after{box-sizing:border-box;margin:0;padding:0;}
body.cs-template{font-family:var(--font);font-weight:400;background:var(--cream);color:var(--charcoal);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;scroll-behavior:smooth;}
:where(body.cs-template) img,:where(body.cs-template) video{max-width:100%;height:auto;display:block;}
:where(body.cs-template) a{color:inherit;text-decoration:none;}
:where(body.cs-template) ul{list-style:none;}
:where(body.cs-template) h1,:where(body.cs-template) h2,:where(body.cs-template) h3,:where(body.cs-template) h4,:where(body.cs-template) h5,:where(body.cs-template) h6{font-family:var(--font);font-weight:700;line-height:1.1;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}

/* Binding brand rule: numeric/data readouts use DM Sans + tabular figures so digits
   align and never read as "bunched". Applies to every stat/number readout that shares
   this stylesheet (resource blocks + case-study stats + tables). */
.dc-num,.hsc-num,.sg-num,.step-num,.kt-list,.cs-impact-num,.article-result-num,
.cs-stat-chip strong,.comp-table th,.comp-table td,.salary-table th,.salary-table td,
.article-metric-chip strong{font-variant-numeric:tabular-nums;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:var(--r-full);padding:.75rem 1.75rem;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;}
.btn-primary{background:var(--forest);color:var(--cream);border-color:var(--forest);}
.btn-primary:hover{background:var(--charcoal);border-color:var(--charcoal);box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;color:var(--forest);border-color:var(--forest);}
.btn-outline:hover{background:var(--forest);color:var(--cream);}
.btn-lime{background:var(--lime);color:var(--forest);border-color:var(--lime);font-weight:700;}
.btn-lime:hover{background:var(--lime-bright);border-color:var(--lime-bright);}
.btn-ghost{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.25);}
.btn-ghost:hover{background:white;color:var(--forest);}
.btn-lg{padding:.9rem 2.25rem;font-size:14px;}

/* ---- Eyebrow ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--parchment);border:1px solid rgba(45,61,35,.12);border-radius:var(--r-full);padding:.3rem 1rem;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:1.25rem;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--lime-bright);border:1px solid var(--forest);flex-shrink:0;}
.eyebrow-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.65);}
.eyebrow-dark .dot{background:var(--lime);border-color:var(--lime);}

/* ---- Section header ---- */
.section-header{text-align:center;margin-bottom:clamp(2.5rem,4vw,4.5rem);}
.section-title{font-size:clamp(26px,3.2vw,44px);font-weight:700;color:var(--forest);line-height:1.12;margin-bottom:1rem;}
.section-sub{font-size:17px;color:var(--forest-mid);line-height:1.75;max-width:560px;margin-inline:auto;}
.hl{background:var(--lime);padding:0 .18em;border-radius:3px;}

/* ---- Animations ---- */
.animated{animation-duration:.75s;animation-fill-mode:both;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-52px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(52px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:translateY(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.anim-fadeIn{animation-name:fadeIn;}.anim-fadeInUp{animation-name:fadeInUp;}
.anim-slideInLeft{animation-name:slideInLeft;}.anim-slideInRight{animation-name:slideInRight;}
.anim-slideInUp{animation-name:slideInUp;}.anim-zoomIn{animation-name:zoomIn;}
[data-anim]{opacity:0;}
[data-anim].anim-ready{opacity:1;}

/* ---- Nav ---- */
.site-nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1000;width:calc(100% - 32px);max-width:1240px;background:rgba(245,243,236,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(45,61,35,.10);border-radius:16px;height:var(--nav-h);box-shadow:0 4px 24px rgba(45,61,35,.10),0 1px 4px rgba(45,61,35,.06);transition:box-shadow .3s;}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:2rem;}
.nav-logo img{height:26px;width:auto;}
.nav-menu{display:flex;align-items:center;gap:2.5rem;flex:1;justify-content:center;}
.nav-menu a{font-size:14px;font-weight:500;color:var(--forest-mid);letter-spacing:.02em;transition:color .2s;position:relative;}
.nav-menu a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--lime-bright);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.nav-menu a:hover,.nav-menu a.nav-active{color:var(--forest);}
.nav-menu a.nav-active::after,.nav-menu a:hover::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:.75rem;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.4rem;}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--forest);border-radius:2px;transition:transform .25s,opacity .25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:calc(12px + var(--nav-h) + 8px);left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:1240px;background:rgba(245,243,236,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:1.5rem var(--gutter) 2rem;flex-direction:column;gap:.25rem;border:1px solid rgba(45,61,35,.10);border-radius:16px;box-shadow:0 8px 32px rgba(45,61,35,.12);z-index:999;}
.nav-drawer.open{display:flex;}
.nav-drawer a{font-size:16px;font-weight:500;color:var(--forest);padding:.75rem 0;border-bottom:1px solid rgba(45,61,35,.06);}
.nav-drawer a:last-child{border-bottom:none;margin-top:.75rem;}
.nav-drawer .btn{align-self:flex-start;}
.progress-bar{position:fixed;top:0;left:0;z-index:1001;height:2px;background:var(--lime-bright);width:0%;transition:width .08s linear;}

/* ---- Case Studies hero (index) ---- */
.cs-hero{background:var(--forest);padding-top:calc(var(--nav-h) + 72px);padding-bottom:clamp(5rem,8vw,9rem);text-align:center;position:relative;overflow:hidden;}
.cs-hero::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(200,232,90,.06) 0%,transparent 65%);pointer-events:none;}
.cs-hero::after{content:'';position:absolute;right:-80px;bottom:-60px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(200,232,90,.04) 0%,transparent 70%);pointer-events:none;}
.cs-hero .container{position:relative;z-index:1;}
.cs-hero h1{font-size:clamp(36px,4.5vw,64px);font-weight:700;color:white;line-height:1.08;letter-spacing:-.02em;margin-bottom:1.5rem;margin-top:1.25rem;}
.cs-hero h1 em{font-style:normal;color:var(--lime-bright);}
.cs-hero-sub{font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.62);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;}
.cs-hero-stats{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem;}
.cs-stat-chip{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-full);padding:.65rem 1.5rem;}
.cs-stat-chip strong{font-size:20px;font-weight:700;color:var(--lime-bright);line-height:1;}
.cs-stat-chip span{font-size:12px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.3;text-align:left;}

/* ---- Logos strip ---- */
.cs-logos{background:var(--cream);padding-block:3rem;border-bottom:1px solid rgba(45,61,35,.06);}
.cs-logos-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);text-align:center;margin-bottom:1.5rem;}
.marquee-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);}
.marquee-track{display:flex;gap:4.5rem;animation:marquee 36s linear infinite;width:max-content;align-items:center;}
.marquee-track img{height:56px;width:auto;filter:brightness(0);opacity:.35;flex-shrink:0;}

/* ---- Cards (featured + grid) ---- */
.cs-section{padding-block:clamp(5rem,8vw,9rem);}
.cs-featured{background:var(--forest);border-radius:var(--r-xl);padding:3rem 3.5rem;margin-bottom:1.5rem;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.cs-featured:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.cs-featured::after{content:'';position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(200,232,90,.07) 0%,transparent 70%);pointer-events:none;}
.cs-featured-top{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;}
.cs-featured-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(200,232,90,.15);border:1px solid rgba(200,232,90,.3);border-radius:var(--r-full);padding:.28rem .9rem;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-bright);}
.cs-type-pill-dark{display:inline-flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-full);padding:.28rem .9rem;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.cs-featured h2{font-size:clamp(22px,2.5vw,36px);font-weight:700;color:white;line-height:1.2;margin-bottom:2rem;max-width:620px;}
.cs-featured-body{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;}
.cs-featured-metrics{display:flex;flex-direction:column;gap:.6rem;}
.cs-metric{display:flex;align-items:center;gap:.75rem;font-size:14px;color:rgba(255,255,255,.72);font-weight:300;}
.cs-metric svg{color:var(--lime-bright);flex-shrink:0;}
.cs-featured-cta{flex-shrink:0;}
.cs-story-link{display:inline-flex;align-items:center;gap:.5rem;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-bright);transition:gap .2s;cursor:pointer;}
.cs-story-link:hover{gap:.8rem;}
.cs-story-link-dark{display:inline-flex;align-items:center;gap:.45rem;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);transition:gap .2s,color .2s;cursor:pointer;}
.cs-story-link-dark:hover{gap:.7rem;color:var(--forest-mid);}
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.cs-card{background:white;border-radius:var(--r-xl);border:1px solid rgba(45,61,35,.07);padding:2rem;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.cs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.cs-type-pill{display:inline-flex;align-items:center;align-self:flex-start;background:var(--parchment);border-radius:var(--r-full);padding:.28rem .85rem;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:1rem;}
.cs-card h3{font-size:17px;font-weight:700;color:var(--forest);line-height:1.35;margin-bottom:1.5rem;flex:1;}
.cs-card-metrics{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;}
.cs-card-metric{display:flex;align-items:flex-start;gap:.6rem;font-size:13px;color:var(--forest-mid);font-weight:300;line-height:1.45;}
.cs-card-metric svg{color:var(--lime-bright);flex-shrink:0;margin-top:1px;}
.cs-card-footer{padding-top:1.25rem;border-top:1px solid rgba(45,61,35,.06);margin-top:auto;}

/* ---- Impact stats ---- */
.cs-impact{background:var(--forest);padding-block:clamp(4.5rem,7vw,8rem);position:relative;overflow:hidden;}
.cs-impact::before{content:'';position:absolute;right:-80px;top:-80px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(227,245,153,.07) 0%,transparent 70%);}
.cs-impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center;margin-top:2.5rem;}
.cs-impact-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xl);padding:2.5rem 2rem;}
.cs-impact-num{font-size:clamp(32px,3.5vw,48px);font-weight:700;color:var(--lime-bright);line-height:1;margin-bottom:.75rem;}
.cs-impact-label{font-size:15px;color:rgba(255,255,255,.6);line-height:1.5;font-weight:300;}

/* ---- Testimonials ---- */
.cs-testi{padding-block:clamp(5rem,8vw,9rem);background:var(--white);}
.cs-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem;}
.cs-testi-card{background:var(--cream);border-radius:var(--r-xl);padding:2rem;border:1px solid rgba(45,61,35,.07);transition:transform .2s,box-shadow .2s;}
.cs-testi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.cs-testi-stars{font-size:13px;color:var(--lime-bright);letter-spacing:2px;margin-bottom:.75rem;}
.cs-testi-quote{font-size:14px;color:var(--forest-mid);line-height:1.75;margin-bottom:1.25rem;font-weight:300;font-style:italic;}
.cs-testi-name{font-size:13px;font-weight:700;color:var(--forest);}
.cs-testi-role{font-size:11px;color:var(--tan);}

/* ---- Article (case-study single) ---- */
.article-hero{padding-top:calc(var(--nav-h) + 60px);padding-bottom:4rem;background:var(--white);border-bottom:1px solid rgba(45,61,35,.06);}
.article-breadcrumb{display:inline-flex;align-items:center;gap:.5rem;font-size:13px;color:var(--forest-mid);margin-bottom:2rem;transition:color .2s;cursor:pointer;background:none;border:none;font-family:var(--font);}
.article-breadcrumb:hover{color:var(--forest);}
.article-type-pill{display:inline-flex;background:var(--parchment);border-radius:var(--r-full);padding:.28rem .85rem;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:1rem;}
.article-hero h1{font-size:clamp(28px,3.5vw,52px);font-weight:700;color:var(--forest);line-height:1.12;letter-spacing:-.015em;margin-bottom:2rem;max-width:760px;}
.article-metrics{display:flex;gap:1rem;flex-wrap:wrap;}
.article-metric-chip{display:flex;align-items:center;gap:.6rem;background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-full);padding:.5rem 1.25rem;font-size:13px;color:var(--forest);font-weight:300;}
.article-metric-chip strong{font-size:15px;font-weight:700;color:var(--forest);}
.article-metric-chip span{font-size:12px;color:var(--forest-mid);}
.article-metric-chip svg{color:var(--lime-bright);flex-shrink:0;}
.article-body{padding-block:clamp(4rem,6vw,7rem);background:var(--white);}
.article-content{max-width:720px;margin-inline:auto;}
.article-content p{font-size:17px;color:var(--charcoal);line-height:1.85;font-weight:300;margin-bottom:1.75rem;}
.article-blockquote{margin:3rem 0;border-left:3px solid var(--lime-bright);padding:1.5rem 2rem;background:var(--parchment);border-radius:0 var(--r-md) var(--r-md) 0;}
.article-blockquote p{font-size:18px;font-style:italic;color:var(--forest);line-height:1.75;margin-bottom:.75rem;font-weight:300;}
.article-blockquote cite{font-size:13px;font-weight:700;color:var(--forest-mid);font-style:normal;}
/* auto-fit so variable result counts (1/2/4+) all stay on-brand; 3 renders as before */
.article-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:3rem 0;}
.article-result-card{background:var(--forest);border-radius:var(--r-lg);padding:1.75rem 1.5rem;text-align:center;}
.article-result-num{font-size:clamp(24px,2.5vw,34px);font-weight:700;color:var(--lime-bright);line-height:1;margin-bottom:.6rem;}
.article-result-label{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;font-weight:300;}

/* ---- CTA ---- */
.cta-section{background:var(--forest);padding-block:clamp(5rem,8vw,9rem);text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;right:-80px;top:-80px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(227,245,153,.08) 0%,transparent 70%);pointer-events:none;}
.cta-section::after{content:'';position:absolute;left:-60px;bottom:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(227,245,153,.05) 0%,transparent 70%);pointer-events:none;}
.cta-heading{font-size:clamp(28px,4vw,56px);font-weight:700;color:white;line-height:1.1;margin:1.25rem 0 1rem;}
.cta-heading em{font-style:normal;color:var(--lime);}
.cta-sub{font-size:17px;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:2.5rem;max-width:520px;margin-inline:auto;}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;}

/* ---- Footer (brand pass: forest-deep, not near-black) ---- */
.site-footer{background:var(--forest-deep);color:rgba(255,255,255,.66);padding-block:4rem 2rem;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 2fr 1fr;gap:3rem;margin-bottom:3rem;}
.footer-logo{height:26px;width:auto;margin-bottom:1.25rem;filter:brightness(0) invert(1);opacity:.65;}
.footer-desc{font-size:13px;line-height:1.8;color:rgba(255,255,255,.66);margin-bottom:1.25rem;}
.footer-contact{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem;}
.footer-contact a{font-size:13px;color:rgba(255,255,255,.66);transition:color .2s;}
.footer-contact a:hover{color:var(--lime);}
.footer-social{display:flex;gap:.75rem;}
.footer-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);transition:background .2s,color .2s;}
.footer-social a:hover{background:var(--forest);color:var(--lime);}
.footer-col-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:1rem;}
.footer-links{display:flex;flex-direction:column;gap:.5rem;}
.footer-links a{font-size:13px;color:rgba(255,255,255,.66);transition:color .2s;}
.footer-links a:hover{color:var(--lime);}
.footer-va-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.07);}
.footer-copy{font-size:12px;color:rgba(255,255,255,.62);}
.footer-copy a{color:rgba(255,255,255,.62);transition:color .2s;}
.footer-copy a:hover{color:var(--lime);}

/* ---- Responsive ---- */
@media(max-width:1100px){
  .cs-cards{grid-template-columns:repeat(2,1fr);}
  .cs-testi-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media(max-width:768px){
  body.cs-template{--nav-h:64px;}
  .nav-menu,.nav-actions{display:none;}
  .nav-hamburger{display:flex;}
  .cs-hero h1{font-size:clamp(30px,9vw,48px);}
  .cs-featured{padding:2rem;}
  .cs-featured-body{grid-template-columns:1fr;gap:1.5rem;}
  .cs-cards{grid-template-columns:1fr;}
  .cs-impact-grid{grid-template-columns:1fr;gap:1rem;}
  .cs-testi-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:2rem;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .article-results{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .cs-hero-stats{flex-direction:column;align-items:center;}
  .article-metrics{flex-direction:column;}
  .article-blockquote{padding:1.25rem 1.5rem;}
  /* On phones the narrow column makes 17px run ~29ch; 16px brings the measure back
     into the 30-50ch comfort band without hurting the larger-screen reading size.
     Scoped with .article-layout (0,2,1) so it wins over the base .article-body p
     (0,1,1) regardless of source order. */
  .article-layout .article-body p{font-size:16px;}
}

/* ============================================================================
   RESOURCE CENTER (single-resource.php) — extracted from import/_raw/resources.html.
   Tokens resolve from the body.cs-template scope above. The CSS-art hero/office/team
   scenes are intentionally dropped (resources use a real featured image + uploads).
   ============================================================================ */

/* ---- Hero ---- */
.article-hero-full{width:100%;background:var(--forest);position:relative;overflow:hidden;padding-top:var(--nav-h);}
.hero-rings-svg{position:absolute;right:-80px;top:-80px;width:480px;height:480px;opacity:.07;pointer-events:none;}
.hero-rings-svg circle{fill:none;stroke:var(--lime);}
.hero-topbar{max-width:1200px;margin:0 auto;padding:32px var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;flex-wrap:wrap;gap:12px;}
.ah-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.03em;}
.ah-breadcrumb a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s;}
.ah-breadcrumb a:hover{color:var(--lime);}
.ah-breadcrumb span{color:rgba(255,255,255,.18);}
.ah-cat{display:inline-flex;align-items:center;gap:6px;background:rgba(227,245,153,.13);color:var(--lime);padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ah-cat::before{content:'';width:5px;height:5px;background:var(--lime);border-radius:50%;}
.hero-text-block{max-width:1200px;margin:0 auto;padding:28px var(--gutter) 40px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center;}
.hero-text-block h1{font-size:clamp(28px,3.2vw,50px);font-weight:700;color:white;line-height:1.12;margin-bottom:16px;}
.hero-intro-text{font-size:17px;color:rgba(255,255,255,.52);line-height:1.7;margin-bottom:28px;}
.ah-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);}
.ah-author{display:flex;align-items:center;gap:12px;}
.ah-avatar{width:40px;height:40px;border-radius:50%;background:var(--forest-mid);display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(227,245,153,.3);flex-shrink:0;overflow:hidden;}
.ah-avatar img{width:100%;height:100%;object-fit:cover;}
.ah-author-name{font-size:13px;font-weight:600;color:white;line-height:1.2;}
.ah-author-role{font-size:11px;color:rgba(255,255,255,.58);}
.ah-divider{width:1px;height:22px;background:rgba(255,255,255,.12);}
.ah-meta-item{font-size:12px;color:rgba(255,255,255,.58);}
.ah-read-badge{background:rgba(227,245,153,.1);color:var(--lime);padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.hero-stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px;}
.hsc-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);opacity:.65;margin-bottom:2px;}
.hsc-num{font-size:28px;font-weight:700;color:white;line-height:1;}
.hsc-desc{font-size:12px;color:rgba(255,255,255,.58);line-height:1.4;margin-top:2px;}
.hsc-divider{height:1px;background:rgba(255,255,255,.08);}
/* Real featured image full-bleed under the hero (replaces the CSS cityscape). */
.hero-feature-img{width:100%;height:clamp(240px,34vw,440px);object-fit:cover;display:block;position:relative;}
.hero-feature-wrap{position:relative;}
.hero-feature-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,var(--cream) 0%,transparent 100%);pointer-events:none;}

/* ---- Layout + sidebar ---- */
.article-layout{max-width:1200px;margin:0 auto;padding:56px var(--gutter) 80px;display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start;}
.article-sidebar{position:sticky;top:calc(var(--nav-h) + 20px);}
.toc-box{background:white;border-radius:14px;padding:16px;border:1px solid rgba(45,61,35,.08);margin-bottom:16px;}
.toc-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:10px;}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:1px;}
.toc-list a{display:block;padding:5px 8px;border-radius:6px;font-size:12px;color:var(--forest-mid);text-decoration:none;transition:background .15s,color .15s;border-left:2px solid transparent;line-height:1.4;}
.toc-list a:hover{background:var(--parchment);color:var(--forest);}
.toc-list a.active{background:var(--parchment);color:var(--forest);border-left-color:var(--lime-bright);font-weight:600;}
.sidebar-cta{background:var(--forest);border-radius:14px;padding:18px;color:white;margin-bottom:16px;}
.sc-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);opacity:.7;margin-bottom:8px;}
.sc-title{font-size:14px;font-weight:700;color:white;line-height:1.35;margin-bottom:6px;}
.sc-sub{font-size:11px;color:rgba(255,255,255,.6);line-height:1.55;margin-bottom:14px;}
.sc-btn{display:block;background:var(--lime);color:var(--forest);text-align:center;padding:10px;border-radius:9px;font-size:12px;font-weight:700;letter-spacing:.04em;text-decoration:none;text-transform:uppercase;transition:background .2s;}
.sc-btn:hover{background:var(--lime-bright);}
.sidebar-share{background:white;border-radius:14px;padding:16px;border:1px solid rgba(45,61,35,.08);}
.ss-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:10px;}
.ss-btns{display:flex;flex-direction:column;gap:6px;}
.ss-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;border:1px solid rgba(45,61,35,.1);font-size:12px;font-weight:500;color:var(--forest);text-decoration:none;transition:background .15s;}
.ss-btn:hover{background:var(--parchment);}

/* ---- Main + body ---- */
.article-main{min-width:0;}
/* In the two-column resource layout, .article-layout already supplies the top/bottom
   spacing (56px/80px). .article-body carries its own big padding-block for standalone
   (case-study) use; zero it here so the article content top-aligns with the sidebar
   instead of starting ~104px lower. */
.article-layout .article-body{padding-block:0;}
/* Reading measure + breakout (content-hub pattern): cap prose-level blocks to ~67ch so
   long-form text reads comfortably; let media/data/CTA blocks break out to the full
   content column. Block flow is preserved (margins still collapse) so vertical rhythm is
   unchanged. Scoped to .article-layout (resource singles) so case studies (.article-content,
   already 720px) are untouched. */
.article-layout .article-main > *{max-width:46rem;}
.article-layout .article-main > .stats-grid,
.article-layout .article-main > .comp-table-wrap,
.article-layout .article-main > .inline-image,
.article-layout .article-main > .image-pair,
.article-layout .article-main > .video-embed,
.article-layout .article-main > .data-callout,
.article-layout .article-main > .mid-cta,
.article-layout .article-main > .related-resources,
.article-layout .article-main > .author-bio-block,
.article-layout .article-main > .bottom-cta,
.article-layout .article-main > .pros-cons{max-width:none;}
.article-open p{font-size:17px;color:var(--charcoal);line-height:1.8;margin-bottom:22px;}
.article-open p:first-child::first-letter{float:left;font-size:68px;font-weight:700;color:var(--forest);line-height:.82;margin:8px 14px 0 0;}
.article-body h2{font-size:26px;font-weight:700;color:var(--forest);margin:52px 0 16px;line-height:1.2;scroll-margin-top:calc(var(--nav-h) + 28px);}
.article-body h3{font-size:18px;font-weight:700;color:var(--forest);margin:32px 0 10px;line-height:1.3;scroll-margin-top:calc(var(--nav-h) + 28px);}
.article-body p{font-size:17px;color:var(--charcoal);line-height:1.8;margin-bottom:22px;}
.article-body strong{color:var(--forest);font-weight:600;}
.article-body a{color:var(--forest);text-decoration-color:var(--lime-bright);}
.article-body p:last-child{margin-bottom:0;}

/* ---- Quick answer ---- */
.quick-answer{background:var(--parchment);border-left:4px solid var(--lime-bright);border-radius:0 14px 14px 0;padding:24px 28px;margin:36px 0 48px;}
.qa-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.qa-label::before{content:'';width:18px;height:2px;background:var(--lime-bright);border-radius:1px;}
.qa-text{font-size:15px;color:var(--forest);line-height:1.75;}
.qa-text ul{margin:12px 0 0 18px;}
.qa-text ul li{margin-bottom:7px;font-size:14px;color:var(--forest-mid);}

/* ---- Inline image (real uploads) ---- */
.inline-image{margin:40px 0;border-radius:18px;overflow:hidden;box-shadow:0 8px 32px rgba(45,61,35,.1);}
.inline-image img{width:100%;height:auto;display:block;}
.inline-image figcaption{font-size:12px;color:var(--tan);padding:10px 18px 12px;background:white;font-style:italic;border-top:1px solid rgba(45,61,35,.06);}

/* ---- Data callout ---- */
.data-callout{background:var(--forest);color:white;border-radius:16px;padding:28px 32px;margin:40px 0;display:flex;align-items:center;gap:28px;}
.dc-num{font-size:52px;font-weight:700;color:var(--lime);line-height:1;white-space:nowrap;flex-shrink:0;}
.dc-text{font-size:15px;color:rgba(255,255,255,.65);line-height:1.6;}
.dc-text em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.3);margin-top:6px;}

/* ---- Callouts ---- */
.callout{border-radius:12px;padding:18px 22px;margin:28px 0;display:flex;gap:14px;align-items:flex-start;}
.callout.tip{background:var(--parchment);}
.callout.warning{background:#FFFBEE;border:1px solid rgba(200,180,0,.18);}
.callout.danger{background:#FFF3F0;border:1px solid rgba(200,60,40,.12);}
.callout-icon{flex-shrink:0;margin-top:1px;line-height:0;}
.callout-svg{width:20px;height:20px;display:block;}
.callout.tip .callout-icon{color:var(--forest);}
.callout.warning .callout-icon{color:#B7791F;}
.callout.danger .callout-icon{color:#C53030;}
.callout-body{font-size:14px;color:var(--forest-mid);line-height:1.65;}
.callout-body strong{color:var(--forest);display:block;margin-bottom:4px;}

/* ---- Checklist ---- */
.checklist{list-style:none;margin:18px 0 28px;display:flex;flex-direction:column;gap:12px;}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--charcoal);line-height:1.6;}
.checklist li::before{content:'✓';width:22px;height:22px;border-radius:6px;background:var(--lime);color:var(--forest);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}

/* ---- Steps ---- */
.steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;margin:20px 0 32px;}
.step{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(45,61,35,.07);}
.step:last-child{border-bottom:none;}
.step-num{width:32px;height:32px;border-radius:50%;background:var(--forest);color:var(--lime);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.step-num::before{counter-increment:step;content:counter(step);}
.step-title{font-size:15px;font-weight:700;color:var(--forest);margin-bottom:4px;}
.step-desc{font-size:14px;color:var(--forest-mid);line-height:1.65;}

/* ---- Tables ---- */
.comp-table-wrap,.salary-table-wrap{margin:28px 0;overflow-x:auto;border-radius:12px;box-shadow:0 2px 16px rgba(45,61,35,.07);}
.comp-table,.salary-table{width:100%;border-collapse:collapse;font-size:14px;}
.comp-table thead tr,.salary-table thead tr{background:var(--forest);color:white;}
.comp-table thead th,.salary-table thead th{padding:13px 16px;text-align:left;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.comp-table thead th:first-child,.salary-table thead th:first-child{border-radius:12px 0 0 0;}
.comp-table thead th:last-child,.salary-table thead th:last-child{border-radius:0 12px 0 0;}
.comp-table tbody tr,.salary-table tbody tr{border-bottom:1px solid rgba(45,61,35,.06);background:white;}
.comp-table tbody tr:last-child,.salary-table tbody tr:last-child{border-bottom:none;}
.comp-table tbody tr:hover td,.salary-table tbody tr:hover td{background:var(--parchment);}
.comp-table tbody td,.salary-table tbody td{padding:13px 16px;color:var(--charcoal);vertical-align:top;}
.comp-table tbody td:first-child,.salary-table tbody td:first-child{font-weight:600;color:var(--forest);}
.comp-table tfoot td,.salary-table tfoot td{padding:11px 16px;font-size:11px;color:var(--tan);font-style:italic;background:var(--parchment);border-radius:0 0 12px 12px;}
.tag{display:inline-block;background:var(--lime);color:var(--forest);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;}

/* ---- Expert quote ---- */
.expert-quote{border-left:3px solid var(--lime-bright);padding:20px 26px;margin:36px 0;background:white;border-radius:0 14px 14px 0;}
.eq-text{font-size:17px;font-style:italic;color:var(--forest);line-height:1.7;margin-bottom:16px;}
.eq-attr{display:flex;align-items:center;gap:12px;}
.eq-avatar{width:34px;height:34px;border-radius:50%;background:var(--forest-mid);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.eq-name{font-size:13px;font-weight:700;color:var(--forest);}
.eq-role{font-size:11px;color:var(--tan);}

/* ---- Mid CTA ---- */
.mid-cta{background:var(--parchment);border-radius:16px;padding:28px 32px;margin:48px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid rgba(45,61,35,.1);}
.mid-cta-text{font-size:15px;font-weight:600;color:var(--forest);line-height:1.4;}
.mid-cta-sub{font-size:13px;color:var(--forest-mid);margin-top:4px;font-weight:400;}
.mid-cta-btn{background:var(--forest);color:var(--lime);padding:13px 22px;border-radius:100px;font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;transition:background .2s;flex-shrink:0;}
.mid-cta-btn:hover{background:#1e2b18;}

/* ---- FAQ (WAI-ARIA accordion; grid-rows animation so no answer is ever clipped) ---- */
.article-faq{margin-top:56px;}
.article-faq .faq-title{margin:0 0 12px;}
.article-faq .faq-q-head{margin:0;}
.faq-item{border-bottom:1px solid rgba(45,61,35,.1);}
.faq-q{width:100%;background:none;border:none;font-family:var(--font);font-size:15px;font-weight:600;color:var(--forest);text-align:left;padding:18px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .15s;}
.faq-q:hover{color:var(--forest-mid);}
.faq-q:focus-visible{outline:2px solid var(--lime-bright);outline-offset:2px;border-radius:4px;}
.faq-toggle{font-size:22px;color:var(--forest-mid);flex-shrink:0;transition:transform .25s;line-height:1;font-weight:300;}
.faq-q[aria-expanded="true"] .faq-toggle{transform:rotate(45deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.faq-a.open{grid-template-rows:1fr;}
.faq-a-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility .3s;}
.faq-a.open .faq-a-inner{visibility:visible;}
.article-faq .faq-a-inner p{font-size:14px;color:var(--forest-mid);line-height:1.8;margin-bottom:12px;}
.faq-a.open .faq-a-inner p:last-child{margin-bottom:22px;}

/* ---- Author bio ---- */
.author-bio-block{display:flex;gap:20px;align-items:flex-start;background:white;border-radius:16px;padding:28px;border:1px solid rgba(45,61,35,.08);margin:48px 0 0;}
.bio-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:var(--forest);display:flex;align-items:center;justify-content:center;font-size:26px;border:3px solid var(--lime);overflow:hidden;}
.bio-avatar img{width:100%;height:100%;object-fit:cover;}
.bio-name{font-size:16px;font-weight:700;color:var(--forest);}
.bio-role{font-size:12px;color:var(--forest-mid);margin-bottom:10px;}
.bio-text{font-size:14px;color:var(--forest-mid);line-height:1.7;}
.bio-linkedin{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--forest);font-weight:600;text-decoration:none;margin-top:10px;border-bottom:1px solid var(--lime-bright);padding-bottom:1px;}

/* ---- Bottom CTA ---- */
.bottom-cta{background:var(--forest);border-radius:20px;padding:40px;margin:48px 0 0;color:white;position:relative;overflow:hidden;}
.bottom-cta::before{content:'';position:absolute;right:-40px;top:-40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(227,245,153,.1) 0%,transparent 70%);pointer-events:none;}
.bc-eyebrow-sm{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);opacity:.65;margin-bottom:10px;}
.bc-title-sm{font-size:22px;font-weight:700;color:white;line-height:1.3;margin-bottom:8px;}
.bc-sub-sm{font-size:14px;color:rgba(255,255,255,.6);line-height:1.65;margin-bottom:24px;}
.bc-actions{display:flex;gap:12px;flex-wrap:wrap;}
.bc-primary{background:var(--lime);color:var(--forest);padding:13px 24px;border-radius:100px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;transition:background .2s;}
.bc-primary:hover{background:var(--lime-bright);}
.bc-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);padding:13px 24px;border-radius:100px;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s;}
.bc-secondary:hover{background:rgba(255,255,255,.14);}

/* ---- Resource responsive ---- */
@media (max-width:1100px){
  .hero-text-block{grid-template-columns:1fr;gap:28px;}
  .hero-stat-card{flex-direction:row;flex-wrap:wrap;}
  .article-layout{grid-template-columns:1fr;padding:40px var(--gutter) 60px;}
  .article-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px;}
  .sidebar-share{grid-column:1 / -1;}
}
@media (max-width:768px){
  .article-sidebar{grid-template-columns:1fr;}
  .mid-cta{flex-direction:column;align-items:flex-start;}
  .data-callout{flex-direction:column;gap:12px;}
  .bc-actions{flex-direction:column;}
}

/* ---- Resource library index (page-resources.php) ---- */
.library-section{background:var(--parchment);padding:clamp(4rem,7vw,5rem) 0;border-top:1px solid rgba(45,61,35,.08);}
.library-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.lib-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;flex-wrap:wrap;gap:16px;}
.lib-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:6px;}
.lib-title{font-size:clamp(22px,2.5vw,32px);font-weight:700;color:var(--forest);line-height:1.2;}
.lib-filters{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap;}
.lib-filter{padding:7px 16px;border-radius:var(--r-full);border:1.5px solid rgba(45,61,35,.15);background:transparent;color:var(--forest-mid);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;}
.lib-filter:hover{border-color:var(--forest);color:var(--forest);}
.lib-filter.active{background:var(--forest);color:var(--lime);border-color:var(--forest);}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.lib-card{background:white;border-radius:16px;overflow:hidden;border:1px solid rgba(45,61,35,.07);text-decoration:none;color:inherit;display:block;transition:transform .2s,box-shadow .2s;}
.lib-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(45,61,35,.1);}
.lib-card.hidden{display:none;}
.lib-card-img{height:148px;display:flex;align-items:center;justify-content:center;font-size:42px;position:relative;overflow:hidden;}
.lib-card-img-photo{background:var(--cream);}
.lib-card-img-photo img{width:100%;height:100%;object-fit:cover;}
.lc-1{background:linear-gradient(135deg,#E3F599,#CEC4A5);}.lc-2{background:linear-gradient(135deg,#2D3D23,#556154);}.lc-3{background:linear-gradient(135deg,#FFED83,#E3F599);}.lc-4{background:linear-gradient(135deg,#CEC4A5,#F5F3EC);}.lc-5{background:linear-gradient(135deg,#556154,#2D3D23);}.lc-6{background:linear-gradient(135deg,#F0F4D3,#E3F599);}.lc-7{background:linear-gradient(135deg,#282828,#556154);}.lc-8{background:linear-gradient(135deg,#E3F599,#2D3D23);}
.lib-badge{position:absolute;top:10px;left:10px;background:var(--lime);color:var(--forest);padding:3px 10px;border-radius:var(--r-full);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.lib-card-body{padding:18px;}
.lc-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:6px;}
.lc-title{font-size:14px;font-weight:700;color:var(--forest);line-height:1.35;margin-bottom:10px;}
.lc-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--tan);padding-top:10px;border-top:1px solid rgba(45,61,35,.06);}
.lc-read{background:var(--parchment);color:var(--forest);padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;}
.lib-empty{font-size:15px;color:var(--forest-mid);text-align:center;padding:3rem 0;}
@media (max-width:1100px){.lib-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.lib-grid{grid-template-columns:1fr;}}

/* ============================================================================
   CONTENT-BLOCK LIBRARY (added blocks) — see parts/blocks/. Tokens only; rounded
   corners only; mobile collapses below.
   ============================================================================ */

/* ---- Key takeaways (TL;DR) ---- */
.key-takeaways{background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:16px;padding:24px 28px;margin:36px 0 48px;}
.kt-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.kt-label::before{content:'';width:18px;height:2px;background:var(--lime-bright);border-radius:1px;}
.kt-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.kt-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--forest);line-height:1.6;}
.kt-list li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lime-bright);border:1px solid var(--forest);flex-shrink:0;margin-top:8px;}

/* ---- Pros & cons ---- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0;}
.pc-col{border-radius:14px;padding:22px 24px;border:1px solid rgba(45,61,35,.08);}
.pc-pros{background:var(--parchment);}
.pc-cons{background:#F6EEE9;}
.pc-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;}
.pc-pros .pc-head{color:var(--forest);}
.pc-cons .pc-head{color:#9a4b34;}
.pc-mark{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;line-height:1;}
.pc-pros .pc-mark{background:var(--lime);color:var(--forest);}
.pc-cons .pc-mark{background:#F0D3CB;color:#9a4b34;}
.pc-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.pc-list li{position:relative;padding-left:20px;font-size:14px;color:var(--forest-mid);line-height:1.6;}
.pc-list li::before{position:absolute;left:0;top:0;font-weight:700;}
.pc-pros .pc-list li::before{content:'+';color:var(--forest);}
.pc-cons .pc-list li::before{content:'\2212';color:#b5654c;}

/* ---- Button / link ---- */
.button-block{margin:28px 0;display:flex;}
.button-block.button-left{justify-content:flex-start;}
.button-block.button-center{justify-content:center;}

/* ---- Related resources ---- */
.related-resources{margin:48px 0 0;}
.rr-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:16px;}
.rr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rr-card{display:flex;flex-direction:column;background:white;border:1px solid rgba(45,61,35,.08);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.rr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.rr-thumb{display:block;height:120px;overflow:hidden;background:var(--cream);}
.rr-thumb img{width:100%;height:100%;object-fit:cover;}
.rr-thumb-ph{background:linear-gradient(135deg,var(--lime),var(--tan));}
.rr-body{display:flex;flex-direction:column;gap:6px;padding:16px;}
.rr-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-mid);}
.rr-title{font-size:14px;font-weight:700;color:var(--forest);line-height:1.35;}
.rr-read{font-size:11px;color:var(--tan);margin-top:auto;}

/* ---- Pull quote (unattributed editorial) ---- */
.pull-quote{margin:40px 0;padding:4px 0 4px 24px;border-left:4px solid var(--lime-bright);font-size:clamp(20px,2.4vw,26px);font-weight:500;font-style:normal;color:var(--forest);line-height:1.4;}

/* ---- Definition / glossary ---- */
.definition{background:white;border:1px solid rgba(45,61,35,.1);border-left:4px solid var(--forest);border-radius:0 14px 14px 0;padding:20px 24px;margin:32px 0;}
.def-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:8px;}
.def-term{display:block;font-size:18px;font-weight:700;font-style:normal;color:var(--forest);margin-bottom:6px;}
.def-body{font-size:14px;color:var(--forest-mid);line-height:1.7;}

/* ---- Video embed (responsive 16:9) ---- */
.video-embed{margin:40px 0;}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--forest-deep);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-embed figcaption{font-size:12px;color:var(--tan);padding:10px 4px 0;font-style:italic;}

/* ---- Download / lead magnet ---- */
.download-block{display:flex;align-items:center;gap:18px;background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:16px;padding:22px 24px;margin:36px 0;}
.dl-icon{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:white;border:1px solid rgba(45,61,35,.1);display:flex;align-items:center;justify-content:center;color:var(--forest);}
.dl-icon svg{width:22px;height:22px;}
.dl-body{flex:1;min-width:0;}
.dl-title{font-size:15px;font-weight:700;color:var(--forest);}
.dl-desc{font-size:13px;color:var(--forest-mid);line-height:1.55;margin-top:3px;}
.dl-meta{font-size:11px;color:var(--tan);margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.dl-btn{flex-shrink:0;background:var(--forest);color:var(--lime);padding:11px 20px;border-radius:100px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;transition:background .2s;}
.dl-btn:hover{background:var(--forest-deep);}

/* ---- Stats row (multiple small stats) ---- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:36px 0;}
.sg-item{background:var(--forest);border-radius:16px;padding:24px 20px;text-align:center;}
.sg-num{font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--lime-bright);line-height:1;margin-bottom:8px;}
.sg-label{font-size:12px;color:rgba(255,255,255,.6);line-height:1.4;}

/* ---- Image pair ---- */
.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0;}
.ip-fig{margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);background:white;}
.ip-fig img{width:100%;height:auto;display:block;}
.ip-fig figcaption{font-size:12px;color:var(--tan);padding:10px 14px;font-style:italic;border-top:1px solid rgba(45,61,35,.06);}

/* ---- Divider ---- */
.divider{border:none;height:1px;background:rgba(45,61,35,.12);margin:40px 0;}
.divider-labeled{height:auto;background:none;display:flex;align-items:center;gap:16px;}
.divider-labeled::before,.divider-labeled::after{content:'';flex:1;height:1px;background:rgba(45,61,35,.12);}
.divider-text{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);}

/* ---- New-block responsive ---- */
@media (max-width:1100px){
  .rr-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .pros-cons{grid-template-columns:1fr;}
  .rr-grid{grid-template-columns:1fr;}
  .image-pair{grid-template-columns:1fr;}
  .download-block{flex-direction:column;align-items:flex-start;}
}

/* ---- Reduced motion: honor the OS setting across all cs-template animations ---- */
@media (prefers-reduced-motion: reduce){
  :where(body.cs-template) *,:where(body.cs-template) *::before,:where(body.cs-template) *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;
  }
  body.cs-template{scroll-behavior:auto;}
  .marquee-track{animation:none!important;}
  [data-anim]{opacity:1!important;}
}

/* Numbers rule (BRAND.md): every numeric / stat readout uses DM Sans tabular figures
   so digits align and never read as "bunched". Covers the stat bands the audit flagged
   (case-study + resource views). font-variant-numeric only affects digit glyphs, so
   applying it to a container that also has label text is harmless. */
.cs-stat-chip, .cs-hero-stats, .hero-stat-card, .hsc-num, .cs-impact-num,
.dc-num, .sg-num, .step-num, .article-result-num, .article-metric-chip, .dl-meta,
.role-savings-num {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   ROLE PAGES (single-role.php) — the /talent/<role>/ landing layout.
   Fixed-field CPT, same token system + .article-* shells as case studies.
   Tokens only; rounded corners; mobile collapse. Numbers carry tabular-nums
   via .role-savings-num (added to the numerals rule above).
   ============================================================================ */
.role-subhead{font-size:clamp(16px,1.6vw,20px);color:var(--forest-mid);line-height:1.6;font-weight:300;max-width:680px;margin-bottom:2rem;}
.role-hero-cta{margin-top:.5rem;}
.role-section-title{font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--forest);line-height:1.2;letter-spacing:-.01em;margin:3.5rem 0 1.75rem;}
.role-section-title:first-child{margin-top:0;}

/* Responsibilities grid */
.role-resp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1rem;}
.role-resp-card{background:var(--parchment);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.5rem 1.5rem;}
.role-resp-title{font-size:16px;font-weight:700;color:var(--forest);line-height:1.3;margin:0 0 .5rem;}
.role-resp-desc{font-size:14px;color:var(--forest-mid);line-height:1.6;font-weight:300;margin:0;}

/* Tools pills */
.role-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:2.25rem 0 1rem;}
.role-tools-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);margin-right:.25rem;}
.role-tool-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;}
.role-tool{background:var(--white);border:1px solid rgba(45,61,35,.12);border-radius:var(--r-full);padding:.4rem 1rem;font-size:13px;color:var(--forest);font-weight:400;}

/* Savings band — reuses .article-results / .article-result-card shells */
.role-savings{margin:3rem 0;}
.role-savings-grid{margin:1.5rem 0 0;}
.role-savings-note{font-size:13px;color:var(--forest-mid);line-height:1.6;margin:1rem 0 0;text-align:center;}

@media (max-width:600px){
  .role-resp-grid{grid-template-columns:1fr;}
}

/* ============================================================================
   TALENT HUB (page-talent.php) — the /talent/ service hub, ported from the approved
   design-studio mock into the content.css token system. Tokens only; rounded
   corners; mobile collapse. Numbers carry tabular-nums via .hub-num.
   ============================================================================ */
.hub-num{font-variant-numeric:tabular-nums;}

/* Hero */
.hub-hero{padding-top:calc(var(--nav-h) + 60px);padding-bottom:clamp(3rem,5vw,5rem);background:var(--white);}
.hub-hero h1{font-size:clamp(30px,4vw,56px);font-weight:700;color:var(--forest);line-height:1.1;letter-spacing:-.02em;max-width:16ch;margin:.75rem 0 1.5rem;}
.hub-lead{font-size:clamp(16px,1.6vw,20px);color:var(--forest-mid);line-height:1.7;font-weight:300;max-width:54ch;margin-bottom:2rem;}
.hub-lead b{color:var(--forest);font-weight:700;font-variant-numeric:tabular-nums;}
.hub-hero-cta{display:flex;gap:1rem;flex-wrap:wrap;}

/* Social-proof stat bar */
.hub-stats{background:var(--parchment);padding-block:clamp(2rem,4vw,3rem);}
.hub-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;text-align:center;}
.hub-stat-v{font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;}
.hub-stat-l{font-size:13px;color:var(--forest-mid);margin-top:.5rem;line-height:1.4;}

/* Generic hub section + headings */
.hub-section{padding-block:clamp(3.5rem,6vw,6rem);background:var(--white);}
.hub-h2{font-size:clamp(24px,2.8vw,38px);font-weight:700;color:var(--forest);line-height:1.15;letter-spacing:-.01em;margin:.5rem 0 0;}
.hub-sub{font-size:16px;color:var(--forest-mid);line-height:1.7;font-weight:300;max-width:56ch;margin:1rem 0 0;}

/* Value props */
.hub-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;}
.hub-value-card{background:var(--parchment);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.75rem 1.5rem;}
.hub-value-card h3{font-size:17px;font-weight:700;color:var(--forest);margin:0 0 .6rem;line-height:1.25;}
.hub-value-card p{font-size:14px;color:var(--forest-mid);line-height:1.65;font-weight:300;margin:0;}
.hub-value-card b{color:var(--forest);font-weight:700;}

/* Roles grid */
.hub-roles{background:var(--cream);}
.hub-roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;}
.hub-role-card{display:block;background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.4rem 1.25rem;transition:box-shadow .2s,transform .2s;}
.hub-role-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.hub-role-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);}
.hub-role-card h3{font-size:17px;color:var(--forest);margin:.4rem 0 .75rem;line-height:1.25;}
.hub-role-save{font-size:13px;color:var(--forest-mid);margin:0;}
.hub-role-save b{color:var(--forest);font-weight:700;}

/* Comparison table */
.hub-compare-wrap{overflow-x:auto;margin-top:2.25rem;}
.hub-compare-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px;}
.hub-compare-table th,.hub-compare-table td{text-align:left;padding:1rem 1.1rem;font-size:14px;vertical-align:top;line-height:1.5;}
.hub-compare-table thead th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--forest-mid);font-weight:700;}
.hub-compare-table thead th.us{color:var(--forest);}
.hub-compare-table tbody th[scope=row]{font-weight:700;color:var(--forest);}
.hub-compare-table tbody td,.hub-compare-table tbody th{border-top:1px solid rgba(45,61,35,.1);}
.hub-compare-table td{color:var(--forest-mid);font-weight:300;}
.hub-compare-table td.us{background:var(--parchment);color:var(--forest);font-weight:500;}
.hub-compare-table tbody tr:first-child td.us{border-radius:var(--r-md) var(--r-md) 0 0;}
.hub-compare-table tbody tr:last-child td.us{border-radius:0 0 var(--r-md) var(--r-md);}

/* Vetting (forest section -> light text) */
.hub-vet{background:var(--forest);padding-block:clamp(3.5rem,6vw,6rem);}
.hub-h2-light{color:var(--cream);}
.hub-vet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;}
.hub-vet-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1.5rem;}
.hub-vet-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-full);background:var(--lime);color:var(--forest);font-weight:700;margin-bottom:.85rem;font-variant-numeric:tabular-nums;}
.hub-vet-step h3{font-size:16px;color:var(--cream);margin:0 0 .4rem;font-weight:700;}
.hub-vet-step p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6;font-weight:300;margin:0;}

@media (max-width:900px){
  .hub-stats-grid{grid-template-columns:repeat(2,1fr);row-gap:1.75rem;}
  .hub-value-grid{grid-template-columns:repeat(2,1fr);}
  .hub-roles-grid{grid-template-columns:repeat(2,1fr);}
  .hub-vet-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hub-value-grid,.hub-roles-grid{grid-template-columns:1fr;}
}

/* ============================================================================
   LEGAL PAGES (legal-page.php) — Privacy Policy + Terms, long-form text in the
   brand container. Headings/lists styling on top of .article-content. Tokens only.
   ============================================================================ */
.legal-updated{font-size:13px;color:var(--forest-mid);margin-top:.5rem;}
.legal-content h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;color:var(--forest);line-height:1.25;letter-spacing:-.01em;margin:2.75rem 0 1rem;}
.legal-content h3{font-size:17px;font-weight:700;color:var(--forest);line-height:1.3;margin:1.75rem 0 .5rem;}
.legal-content ul{margin:0 0 1.75rem;padding-left:1.25rem;}
.legal-content li{font-size:16px;color:var(--charcoal);line-height:1.8;font-weight:300;margin-bottom:.5rem;}
.legal-content a{color:var(--forest);text-decoration:underline;}
.legal-content strong{font-weight:700;color:var(--forest);}

/* ============================================================================
   HOW IT WORKS (page-how-it-works.php) — client-journey timeline + split + proof
   + vetting callout + FAQ. Tokens only; tabular-nums on the step numbers.
   ============================================================================ */
.hiw-journey{position:relative;margin-top:2.5rem;}
.hiw-line{position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--parchment);}
.hiw-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:1.5rem;padding:0 0 2.25rem;}
.hiw-step:last-child{padding-bottom:0;}
.hiw-dot{width:48px;height:48px;border-radius:var(--r-full);background:var(--lime);color:var(--forest);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;font-variant-numeric:tabular-nums;}
.hiw-when{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--forest-mid);background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-full);padding:.2rem .8rem;margin-bottom:.5rem;}
.hiw-step-body h3{font-size:18px;font-weight:700;color:var(--forest);margin:.25rem 0 .4rem;line-height:1.25;}
.hiw-step-body p{font-size:15px;color:var(--forest-mid);line-height:1.7;font-weight:300;margin:0;max-width:60ch;}

.hiw-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem;}
.hiw-split-card{background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.75rem;}
.hiw-split-card h3{font-size:17px;font-weight:700;color:var(--forest);margin:0 0 1rem;}
.hiw-split-card ul{margin:0;padding-left:1.1rem;}
.hiw-split-card li{font-size:15px;color:var(--forest-mid);line-height:1.7;font-weight:300;margin-bottom:.5rem;}

.hiw-proof-grid{grid-template-columns:repeat(3,1fr);}

.hiw-callout{background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-lg);padding:1.75rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.hiw-callout-body{flex:1;min-width:260px;}
.hiw-callout-body h3{font-size:19px;font-weight:700;color:var(--forest);margin:.4rem 0;line-height:1.3;}
.hiw-callout-body p{font-size:14px;color:var(--forest-mid);line-height:1.65;font-weight:300;margin:0;max-width:56ch;}

.hiw-faq{margin-top:1.75rem;max-width:760px;}
.hiw-faq-item{border-top:1px solid rgba(45,61,35,.1);padding:1.25rem 0;}
.hiw-faq-item:last-child{border-bottom:1px solid rgba(45,61,35,.1);}
.hiw-faq-item h3{font-size:17px;font-weight:700;color:var(--forest);margin:0 0 .5rem;}
.hiw-faq-item p{font-size:15px;color:var(--forest-mid);line-height:1.7;font-weight:300;margin:0;max-width:64ch;}

@media (max-width:760px){
  .hiw-split{grid-template-columns:1fr;}
  .hiw-proof-grid{grid-template-columns:1fr;row-gap:1.75rem;}
}

/* ============================================================================
   INDUSTRIES — hub "industries we serve" cards + the roles filter chips +
   the "any role" capture card. Tokens only. (Industry archive reuses .hub-*.)
   ============================================================================ */
.hub-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;}
.hub-ind-card{display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.5rem;transition:box-shadow .2s,transform .2s;}
.hub-ind-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.hub-ind-card h3{font-size:17px;font-weight:700;color:var(--forest);margin:0 0 .5rem;}
.hub-ind-card p{font-size:14px;color:var(--forest-mid);line-height:1.6;font-weight:300;margin:0 0 1rem;}
.hub-ind-link{margin-top:auto;font-size:13px;font-weight:700;color:var(--forest);letter-spacing:.02em;}
.hub-ind-card:hover .hub-ind-link{text-decoration:underline;}

/* Filter chips */
.hub-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.hub-chip{font-family:var(--font);font-size:13px;font-weight:500;color:var(--forest-mid);background:var(--white);border:1px solid rgba(45,61,35,.16);border-radius:var(--r-full);padding:.45rem 1.1rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.hub-chip:hover{border-color:var(--forest-mid);color:var(--forest);}
.hub-chip.is-active{background:var(--forest);color:var(--cream);border-color:var(--forest);font-weight:700;}

/* Any-role capture card (parchment + dashed; label/text stay forest for contrast) */
.hub-any-role{background:var(--parchment);border-style:dashed;border-color:rgba(45,61,35,.28);}
.hub-any-role-sub{font-size:13px;color:var(--forest-mid);line-height:1.55;font-weight:300;margin:0;}

@media (max-width:900px){ .hub-ind-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .hub-ind-grid{grid-template-columns:1fr;} }