/*
 * 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-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.
 *    (The site header's rules now live in assets/nav.css, not here.)
 *  - 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;}
html{scroll-behavior:smooth;} /* anchor scroll is driven by the documentElement, not body */
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,.step-num,.kt-list,.cs-impact-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;}
/* Reveal gate, INVERTED (2026-07-09, perf-review item 1): elements hide only when
   the inline head script has armed the gate (html.anim-armed), so JS-absence fails
   VISIBLE and first paint never waits on deferred cs.js. Hero content containers
   are exempt entirely: Chrome excludes opacity:0 elements from LCP candidacy (and
   may never emit an LCP entry for nested opacity-0 keyframe reveals -
   w3c/largest-contentful-paint#148), so the LCP element must be visible at first
   paint. Heroes still animate, transform-only, via heroRise (cs.js maps them). */
html.anim-armed [data-anim]{opacity:0;}
/* Hero exemption list: keep in sync with HERO_SEL in assets/cs.js. */
html.anim-armed :is(.article-hero,.cs-hero,.csx-hero,.csd-hero,.tp-hero,.hiw-spine-head) [data-anim]{opacity:1;}
/* anim-ready must OUTRANK the armed hide rule above (it is the no-IO fallback's
   only reveal path), hence the html.anim-armed prefix; unarmed pages never hide. */
html.anim-armed [data-anim].anim-ready{opacity:1;}
[data-anim].anim-ready{opacity:1;}
@keyframes heroRise{from{transform:translateY(14px)}to{transform:translateY(0)}}
.anim-heroRise{animation-name:heroRise;}

/* ---- Nav ---- moved to assets/nav.css (the one shared header stylesheet). ---- */

/* ---- 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:24px;font-weight:700;color:var(--lime-bright);line-height:1;}
.cs-stat-chip span{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:400;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(--forest-mid);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;transform:rotate(-.4deg);box-shadow:8px 8px 0 rgba(200,232,90,.35);}
.cs-featured:hover{transform:rotate(0deg);}
.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%);}
/* Oversized quote mark in the band's left negative space: proof = client voices. */
.cs-impact::after{content:'\201C';position:absolute;left:-24px;bottom:-190px;font-size:480px;line-height:1;font-weight:700;color:rgba(227,245,153,.06);pointer-events:none;}
.cs-impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,340px));justify-content:center;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;}

/* ---- Industry archive signature (taxonomy-industry.php) ---- */
.industry-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--parchment) 0%,var(--white) 88%);}
/* Watermark initial RETIRED 2026-07-10 (design review): at hero-edge crops the
   outlined letter reads as stray gray rectangles, not a letterform, at every size
   tried; markup kept (aria-hidden) so it can be revived with a better treatment. */
.industry-hero-initial{display:none;}
.industry-hero .container{position:relative;}
.industry-snapshot{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;max-width:760px;}
.industry-snapshot .tile-n{font-variant-numeric:tabular-nums;}
@media (max-width:768px){.industry-snapshot{grid-template-columns:1fr;}.industry-hero-initial{display:none;}}
.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;}

/* ---- 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 show/hide is in nav.css; this keeps the bar + hero offset at 64px on content pages */
  .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;}

/* ---- 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;}
/* Reading-path picker (page-resources.php): guided entry into the filters below. */
.lib-paths{background:var(--white);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);padding:1.75rem 2rem;margin-bottom:2rem;}
.lib-paths-q{font-size:15px;font-weight:700;color:var(--forest);margin:0 0 1rem;}
.lib-paths-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;}
.lib-path{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;background:var(--cream);border:1.5px solid transparent;border-radius:var(--r-lg);padding:1rem 1.25rem;cursor:pointer;font-family:var(--font);transition:border-color .2s,background .2s,transform .2s;}
.lib-path:hover{transform:translateY(-2px);border-color:rgba(45,61,35,.2);}
.lib-path.active{background:var(--lime);border-color:var(--forest);}
.lib-path-label{font-size:14.5px;font-weight:700;color:var(--forest);}
.lib-path-desc{font-size:12.5px;color:var(--forest-mid);font-weight:300;line-height:1.4;}
.lib-path:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
@media (max-width:768px){.lib-paths-row{grid-template-columns:1fr;}}
@media (prefers-reduced-motion: reduce){.lib-path{transition:none;}}

.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;}

/* ---- 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;
  }
  html,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, .step-num, .article-metric-chip, .dl-meta {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   ROLE PAGES (single-role.php) — the /talent/<role>/ landing layout.
   Fixed-field CPT, same token system as case studies. Tokens only; rounded
   corners; mobile collapse. Savings now render as home-v2 .tile metrics
   (brand-components.css), which carry tabular-nums via .num/.tile-n.
   ============================================================================ */
.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 — renders as the savings calculator (parts/savings-calculator.php). */
.role-savings{margin:3rem 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;}
}

/* ============================================================================
   SAVINGS CALCULATOR (parts/savings-calculator.php) — shared by role singles
   (locked) + the /talent/ hub (role dropdown). Tokens only; the readout uses
   DM Sans + tabular-nums (binding numerals rule). Savings ONLY: no Treantly rate.
   ============================================================================ */
.calc-widget{display:block;}
/* Slim vertical "sheet" (mirrors tools.treantly.com): hero figure -> metric cards ->
   inputs panel -> footer. Reads mostly light (white + cream); forest is type/accents only. */
.calc{max-width:880px;margin-inline:auto;background:var(--white);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);}

/* HERO — the annual savings range, centered, the one memorable figure.
   Scoped with the .calc ancestor (0,2,0) so the <p> rules beat .article-content p (0,1,1)
   on role pages — that base rule otherwise forces 17px charcoal with stray margins. */
.calc-hero{padding:clamp(1.6rem,3.4vw,2.4rem) clamp(1.25rem,3vw,2.25rem) clamp(1.1rem,2vw,1.5rem);text-align:center;}
.calc .calc-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-mid);margin:0 0 .5rem;}
.calc .calc-save{font-size:clamp(30px,5.4vw,52px);font-weight:700;color:var(--forest);line-height:1.04;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc .calc-sub{font-size:14px;color:var(--forest-mid);margin:.55rem 0 0;line-height:1.5;font-weight:400;}
.calc .calc-sub b{color:var(--forest);font-weight:700;}

/* METRIC CARDS — 3 equal cards (monthly, 3-year, U.S. median) on parchment. */
.calc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:0 clamp(1.25rem,3vw,2.25rem);}
.calc-metric{background:var(--parchment);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-md);padding:.9rem .75rem;text-align:center;}
.calc-metric-num{display:block;font-size:clamp(16px,2.1vw,21px);font-weight:700;color:var(--forest);line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc-metric-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-mid);margin-top:.4rem;line-height:1.3;}
.calc .calc-note{font-size:12px;color:var(--forest-mid);line-height:1.5;margin:.85rem clamp(1.25rem,3vw,2.25rem) 0;text-align:center;font-weight:400;}

/* INPUTS — slim panel on cream below the figures. */
.calc-controls{margin-top:clamp(1.1rem,2vw,1.5rem);padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.25rem,3vw,2.25rem);background:var(--cream);border-top:1px solid rgba(45,61,35,.08);}
.calc .calc-controls-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-mid);margin:0 0 1rem;}
.calc-fields{display:grid;grid-template-columns:1fr auto;gap:1.1rem 1.5rem;align-items:end;}
.calc-field{display:flex;flex-direction:column;gap:.5rem;}
.calc-field-role{grid-column:1 / -1;}
.calc-field-hours{grid-column:1;}
.calc-field-team{grid-column:2;}
.calc-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-mid);display:flex;align-items:baseline;gap:.5rem;}
.calc-out{font-size:16px;font-weight:700;color:var(--forest);font-variant-numeric:tabular-nums;}
.calc-input,.calc-select,.calc-number{font-family:var(--font);font-size:15px;color:var(--forest);background:var(--white);border:1.5px solid rgba(45,61,35,.18);border-radius:var(--r-md);padding:.7rem .9rem;width:100%;}
.calc-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556154' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem;cursor:pointer;}
.calc-number{max-width:7.5rem;font-variant-numeric:tabular-nums;}
.calc-input:focus,.calc-select:focus,.calc-number:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(45,61,35,.12);}
.calc-range{width:100%;accent-color:var(--lime-bright);cursor:pointer;height:1.5rem;}

/* FOOTER — BLS sources (each on its own block line so a wrapped link's multi-line bounding
   box can't engulf the other, which the overlap oracle reads as a BLOCKER) + the CTA. */
.calc-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding:clamp(1rem,2vw,1.4rem) clamp(1.25rem,3vw,2.25rem);border-top:1px solid rgba(45,61,35,.08);}
.calc-widget .calc-source{font-size:12px;line-height:1.55;color:var(--forest-mid);margin:0;font-weight:400;flex:1 1 320px;}
.calc-widget .calc-source-line{display:block;}
.calc-widget .calc-source-line + .calc-source-line{margin-top:.25rem;}
.calc-widget .calc-source a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.calc-widget .calc-source a:hover{color:var(--forest-deep);}
/* Scoped (0,2,0) so the CTA label beats .article-content a (0,1,1) on role pages —
   otherwise the link inherits the article forest color and goes forest-on-forest. */
.calc-widget .calc-cta{flex:0 0 auto;align-self:center;color:var(--cream);}
.calc-widget .calc-cta:hover{color:var(--cream);}

@media (max-width:760px){
  .calc-metrics{grid-template-columns:1fr;}
  .calc-metric-num{white-space:normal;}
  .calc .calc-save{white-space:normal;}
  .calc-fields{grid-template-columns:1fr;}
  .calc-field-hours,.calc-field-team{grid-column:1;}
  .calc-field-team .calc-number{max-width:100%;}
  .calc-foot{flex-direction:column;align-items:stretch;}
  .calc-widget .calc-source{flex:0 0 auto;}
  .calc-cta{align-self:stretch;text-align:center;}
}

/* ============================================================================
   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;}

/* 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;}

/* Managed Team visual feature grid (icon cards) + subtle Direct Hire callout */
.card-icon{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--lime);display:flex;align-items:center;justify-content:center;color:var(--forest);margin-bottom:1rem;}
.card-icon svg{width:22px;height:22px;}
.managed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;}
.managed-grid .hub-value-card{background:var(--white);}
.hiw-direct-callout{max-width:760px;margin:1.5rem auto 0;text-align:center;font-size:14px;color:var(--forest-mid);font-weight:300;background:var(--parchment);border:1px dashed rgba(45,61,35,.28);border-radius:var(--r-lg);padding:1rem 1.5rem;}
.hiw-direct-callout b{color:var(--forest);font-weight:700;}
.hiw-direct-callout a{color:var(--forest);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* 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;font-variant-numeric:tabular-nums;}
.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);}
  .managed-grid{grid-template-columns:repeat(2,1fr);}
  .hub-roles-grid{grid-template-columns:repeat(2,1fr);}
  .hub-vet-grid{grid-template-columns:1fr;}
}

/* ============================================================================
   TALENT redesign 2026-07-08 (Dallas, proof-led A + swaps): 2-col hero with a
   real placement interview card, B-format placement cards, C-format vetting
   grid, and the about-us tree-ring "fingerprint" signature as the motif.
   ============================================================================ */
.hub-h2 em{font-style:italic;font-weight:500;}
.gr-svg path{fill:var(--forest);}

/* Hero */
.tp-hero{position:relative;overflow:hidden;}
.tp-hero .tp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,4.5rem);align-items:center;}
.tp-hero-copy h1{max-width:20ch;}
.tp-hero-fp{position:absolute;top:-90px;right:-120px;width:min(440px,38vw);pointer-events:none;z-index:0;}
.tp-hero-fp .gr-svg{width:100%;height:auto;display:block;opacity:.06;}
.tp-hero-visual{position:relative;}
.tp-hero-card{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:var(--forest);box-shadow:var(--shadow-lg);text-decoration:none;}
.tp-hero-card img{width:100%;height:100%;object-fit:cover;display:block;}
.tp-hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,16,0) 42%,rgba(20,28,16,.74));}
.tp-hero-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:var(--lime-bright);color:var(--forest);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(30,43,24,.35);transition:transform .15s;}
.tp-hero-card:hover .tp-hero-play{transform:translate(-50%,-50%) scale(1.06);}
.tp-hero-play svg{width:26px;height:26px;margin-left:3px;}
.tp-hero-cap{position:absolute;left:0;bottom:0;z-index:2;padding:1.1rem 1.25rem;display:flex;flex-direction:column;}
.tp-hero-cap .nm{font-size:18px;font-weight:700;color:#fff;line-height:1.15;}
.tp-hero-cap .rl{font-size:13px;color:var(--lime-bright);margin-top:1px;}
.tp-hero-cap .watch{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:5px;font-weight:600;}
.tp-hero-float{position:absolute;z-index:3;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:.7rem 1rem;display:flex;flex-direction:column;}
.tp-hero-float .k{font-size:18px;font-weight:700;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;}
.tp-hero-float .l{font-size:11.5px;color:var(--forest-mid);margin-top:2px;}
.tp-hero-float.top{top:18px;left:-26px;}
.tp-hero-float.bot{bottom:22px;right:-22px;}

/* Placements (variant B card format, 16:9 to match the real posters) */
.hub-place{background:var(--cream);}
.place-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;}
.place-card{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--forest);box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .2s,box-shadow .2s;}
.place-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.place-card img{width:100%;height:100%;object-fit:cover;display:block;}
.place-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,16,0) 38%,rgba(20,28,16,.8));}
.place-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:56px;height:56px;border-radius:50%;background:rgba(250,247,240,.94);color:var(--forest);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:transform .15s,background .15s;}
.place-card:hover .place-play{background:var(--lime-bright);transform:translate(-50%,-50%) scale(1.06);}
.place-play svg{width:22px;height:22px;margin-left:2px;}
.place-meta{position:absolute;left:0;bottom:0;z-index:2;padding:1rem 1.15rem;display:flex;flex-direction:column;}
.place-meta .nm{font-size:17px;font-weight:700;color:#fff;line-height:1.15;}
.place-meta .rl{font-size:12.5px;color:var(--lime-bright);margin-top:1px;}
.place-meta .watch{font-size:12px;color:rgba(255,255,255,.8);margin-top:5px;font-weight:600;}

/* How we vet (variant C vstep grid) */
.hub-vet2{background:var(--cream);position:relative;overflow:hidden;}
.hub-vet2 .container{position:relative;z-index:1;}
.vet2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;}
.vstep{background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.6rem 1.5rem;transition:box-shadow .2s,transform .2s;}
.vstep:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.vstep .ix{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-full);background:var(--lime-bright);color:var(--forest);font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:1rem;font-size:14px;}
.vstep h3{font-size:18px;font-weight:700;color:var(--forest);margin:0 0 .4rem;letter-spacing:-.01em;}
.vstep p{font-size:14.5px;color:var(--forest-mid);line-height:1.55;font-weight:300;margin:0;}
.tp-vet-fp{position:absolute;bottom:-110px;left:-120px;width:min(400px,34vw);pointer-events:none;z-index:0;}
.tp-vet-fp .gr-svg{width:100%;height:auto;display:block;opacity:.05;}

/* Homepage brand shapes, echoed modestly on the talent page (negative space only, aria-hidden). */
.hub-place,.hub-compare{position:relative;overflow:hidden;}
.hub-place .container,.hub-compare .container{position:relative;z-index:1;}
/* lime pixel scatter in the hero (echoes the homepage .ps-scan pixel motif) */
.tp-px{position:absolute;left:2px;bottom:1.25rem;width:150px;height:80px;pointer-events:none;z-index:0;}
.tp-px span{position:absolute;width:11px;height:11px;border-radius:3px;background:var(--lime-bright);}
.tp-px span:nth-child(1){left:0;top:8px;opacity:.55;}
.tp-px span:nth-child(2){left:24px;top:44px;opacity:.32;}
.tp-px span:nth-child(3){left:54px;top:16px;opacity:.48;}
.tp-px span:nth-child(4){left:84px;top:56px;opacity:.26;}
.tp-px span:nth-child(5){left:116px;top:30px;opacity:.4;}
/* forest "bowl" half-circle, edge-anchored (echoes the homepage process bowl) */
.tp-bowl{position:absolute;top:0;right:-30px;width:170px;height:85px;background:var(--forest);border-radius:0 0 170px 170px;opacity:.07;pointer-events:none;z-index:0;}
/* faint concentric arcs (echoes the homepage stat-band .sb-arc) */
.tp-arcs{position:absolute;top:-120px;left:-150px;width:460px;height:460px;pointer-events:none;z-index:0;}
.tp-arcs span{position:absolute;border:1.5px solid rgba(45,61,35,.07);border-radius:50%;}
.tp-arcs span:nth-child(1){inset:0;}
.tp-arcs span:nth-child(2){inset:70px;}
.tp-arcs span:nth-child(3){inset:140px;}
@media (max-width:760px){.tp-px,.tp-bowl,.tp-arcs{display:none;}}

/* ===== TALENT DE-GRAY (2026-07 Victor round: section rhythm, depth, visible decoration) ===== */
/* Lever 1a: forest proof-band on the vetting section (mirrors the homepage dark break). Contrast-safe: cream/lime on forest. */
.hub-vet2.on-forest{background:var(--forest);color:var(--cream);}
.hub-vet2.on-forest .eyebrow{background:rgba(255,255,255,.08);border:1px solid rgba(227,245,153,.22);color:var(--lime);}
.hub-vet2.on-forest .eyebrow .dot{background:var(--lime-bright);border-color:var(--lime-bright);}
.hub-vet2.on-forest .hub-h2{color:var(--cream);}
.hub-vet2.on-forest .hub-h2 em{color:var(--lime);}
.hub-vet2.on-forest .hub-sub{color:rgba(255,255,255,.74);}
.hub-vet2.on-forest .vstep{background:rgba(255,255,255,.055);border:1px solid rgba(227,245,153,.16);box-shadow:0 10px 34px rgba(0,0,0,.22);}
.hub-vet2.on-forest .vstep:hover{box-shadow:0 16px 44px rgba(0,0,0,.30);transform:translateY(-2px);}
.hub-vet2.on-forest .vstep h3{color:var(--cream);}
.hub-vet2.on-forest .vstep p{color:rgba(255,255,255,.72);}
.hub-vet2.on-forest .vstep .ix{background:var(--lime-bright);color:var(--forest);}
.hub-vet2.on-forest .tp-vet-fp .gr-svg{opacity:.13;fill:var(--lime-bright);}
/* Lever 1b: parchment soft-break on the comparison section; Treantly column pops (white + depth), so T-3 legibility improves. */
.hub-compare{background:var(--parchment);}
.hub-compare-table td.us{background:var(--white);color:var(--forest);font-weight:600;box-shadow:0 6px 20px rgba(45,61,35,.10);}
/* Lever 2: make the existing decoration actually visible (negative space only). */
.tp-bowl{opacity:.85;}
.tp-arcs span{border-color:rgba(45,61,35,.13);}
.tp-hero-fp .gr-svg{opacity:.09;}
/* Lever 3: real card depth on the placement cards (was a near-invisible hairline). */
.place-card{box-shadow:0 10px 30px rgba(45,61,35,.14);}

@media (max-width:960px){
  .tp-hero .tp-hero-grid{grid-template-columns:1fr;gap:2.25rem;}
  .tp-hero-visual{max-width:520px;}
  .tp-hero-float,.tp-hero-fp,.tp-vet-fp{display:none;}
  .vet2-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .place-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto;}
}
@media (max-width:560px){
  .hub-value-grid,.hub-roles-grid,.managed-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 1.4rem;}
.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);opacity:.85;line-height:1.7;font-weight:400;margin:0;max-width:60ch;}

/* HIW signature: parchment journey band + scroll-driven timeline (JS adds .hiw-enhanced;
   without it the static line/dots above render unchanged). */
.hiw-band{background:var(--parchment);border-radius:var(--r-xl);margin:0 clamp(8px,2vw,24px);}
.hiw-band .hiw-when{background:var(--white);}
.hiw-band .hiw-line{background:rgba(45,61,35,.15);}
.hiw-line-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--lime-bright);transform:scaleY(0);transform-origin:top;}
.hiw-enhanced .hiw-step{opacity:.55;transition:opacity .45s ease;}
.hiw-enhanced .hiw-step.is-active{opacity:1;}
.hiw-enhanced .hiw-dot{background:var(--white);border:1px solid rgba(45,61,35,.14);color:var(--forest-mid);transition:background .3s ease,color .3s ease,transform .3s ease,border-color .3s ease;}
.hiw-enhanced .hiw-step.is-active .hiw-dot{background:var(--lime-bright);border-color:transparent;color:var(--forest);transform:scale(1.1);}
@media (min-width:901px){
  /* Alternating timeline: line moves to center, step bodies flip sides.
     .hiw-line is the journey's first child, so even-numbered children are
     steps 1/3/5 (body right) and odd children are steps 2/4 (body left). */
  .hiw-journey .hiw-line{left:50%;margin-left:-1px;}
  .hiw-journey .hiw-step{grid-template-columns:1fr 48px 1fr;column-gap:2.25rem;}
  .hiw-journey .hiw-dot{grid-column:2;}
  .hiw-journey .hiw-step-body{grid-column:3;}
  .hiw-journey > .hiw-step:nth-child(odd) .hiw-step-body{grid-column:1;grid-row:1;justify-self:end;text-align:right;}
}
@media (prefers-reduced-motion: reduce){
  .hiw-enhanced .hiw-step,.hiw-enhanced .hiw-dot{transition:none;}
}

/* HIW hero + journey as ONE continuous spine: the vertical line starts in the hero
   (the spine head) and runs down through every step to the arrival payoff. Left-rail at
   all widths (neutralises the .hiw-journey desktop zigzag); keeps the scroll-fill JS. */
.hiw-spine-hero{padding-bottom:clamp(3rem,5vw,5rem);}
.hiw-spine{position:relative;margin-top:0;}
.hiw-spine .hiw-line{left:23px;top:16px;bottom:16px;background:rgba(45,61,35,.15);}
.hiw-spine .hiw-when{background:var(--white);}
/* Visually-hidden section heading: keeps the h1 -> h2 -> h3 outline intact when the
   journey's visible h2 is absorbed into the hero spine head. */
.hiw-sr-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hiw-spine.hiw-enhanced .hiw-dot{background:var(--parchment);}
.hiw-spine.hiw-enhanced .hiw-step.is-active .hiw-dot{background:var(--lime-bright);}
/* Spine head = the hero copy, seated on the same 48px rail as the steps. */
/* padding-bottom tightened 2026-07-08 (Dallas): was clamp(3rem,5vw,4.5rem) = ~72px of dead green
   below the microcopy, making the hero band bottom-heavy and the step-1 transition feel detached. */
.hiw-spine-head{position:relative;display:grid;grid-template-columns:48px 1fr;gap:1.5rem;padding:0 0 clamp(1.5rem,2.5vw,2.25rem);background-color:var(--forest);}
.hiw-head-node{width:48px;height:48px;border-radius:var(--r-full);background:var(--lime);position:relative;z-index:1;box-shadow:0 0 0 6px var(--white);display:flex;align-items:center;justify-content:center;}
.hiw-head-node::before{content:"";width:14px;height:14px;border-radius:var(--r-full);background:var(--forest);}
.hiw-head-body{min-width:0;padding-top:.1rem;}
.hiw-head-body h1{font-size:clamp(30px,4vw,52px);font-weight:700;color:var(--forest);line-height:1.08;letter-spacing:-.02em;margin:.5rem 0 1.25rem;max-width:20ch;}
.hiw-head-body .hub-lead{margin-bottom:1.75rem;max-width:60ch;}
.hiw-head-note{font-size:13.5px;color:var(--forest-mid);margin-top:1rem;font-weight:600;}
.hiw-head-note b{color:var(--forest);}
/* Breathing room between the green hero band and step 1 (2026-07-08, Dallas): white gap
   below the band (not more green padding, which read bottom-heavy) so Day 1 is clearly the
   start of the journey. The spine line runs through the gap uninterrupted. */
.hiw-sr-title + .hiw-step{margin-top:clamp(2rem,4vw,3.5rem);}
@media (min-width:901px){
  .hiw-spine.hiw-journey .hiw-line{left:23px;margin-left:0;}
  .hiw-spine.hiw-journey .hiw-step{grid-template-columns:48px 1fr;column-gap:1.5rem;}
  .hiw-spine.hiw-journey .hiw-dot{grid-column:1;}
  .hiw-spine.hiw-journey .hiw-step-body{grid-column:2;grid-row:auto;justify-self:start;text-align:left;}
  .hiw-spine.hiw-journey > .hiw-step:nth-child(odd) .hiw-step-body{grid-column:2;grid-row:auto;justify-self:start;text-align:left;}
}
/* Anchor jump ("See what's included") lands below the fixed nav. */
#models{scroll-margin-top:calc(var(--nav-h) + 24px);}

/* Lifetime replacement guarantee callout (Managed-scoped), centered under the value grid. */
.hiw-guarantee{position:relative;overflow:hidden;max-width:660px;margin:2.5rem auto 0;background:var(--parchment);border:1px solid rgba(45,61,35,.12);border-radius:var(--r-xl);padding:1.9rem 2rem;text-align:center;}
.hiw-g-stamp{position:absolute;top:-42px;right:-42px;width:160px;height:160px;pointer-events:none;}
.hiw-g-stamp svg{width:100%;height:100%;display:block;}
.hiw-guarantee .eyebrow{margin-inline:auto;}
.hiw-guarantee h3{font-size:clamp(19px,2vw,22px);font-weight:700;color:var(--forest);margin:.7rem 0 .5rem;line-height:1.25;}
.hiw-guarantee p{font-size:14.5px;color:var(--forest-mid);line-height:1.65;font-weight:300;margin:0 auto;max-width:52ch;}
.hiw-guarantee p b{color:var(--forest);font-weight:700;}

/* Placement card-shuffle: the spine's payoff. Cards stack vertically; JS promotes the next
   card to the front on an interval (static stack under prefers-reduced-motion). */
.hiw-placements{margin-top:clamp(2.75rem,5vw,4rem);text-align:center;}
.hiw-placements .eyebrow{margin-inline:auto;}
.hiw-place-h{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--forest);line-height:1.15;letter-spacing:-.01em;margin:.5rem 0 0;}
.hiw-place-sub{font-size:15px;color:var(--forest-mid);line-height:1.6;font-weight:300;margin:.75rem auto 0;max-width:48ch;}
/* Peek carousel (2026-07-07): a horizontal track, the main card centered at full strength,
   neighbors partly visible either side (scaled + dimmed). Arrows + auto-advance via cs.js;
   static (no auto) under prefers-reduced-motion; no-JS shows the row from the first card. */
.hiw-place-row{position:relative;max-width:760px;margin:2.25rem auto 0;overflow:hidden;}
.hiw-place-track{display:flex;gap:1.1rem;align-items:stretch;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.hiw-place-card{flex:0 0 min(420px,76%);display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;transform:scale(.9);opacity:.55;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .55s,box-shadow .55s;}
.hiw-place-card.is-main{transform:none;opacity:1;box-shadow:var(--shadow-lg);}
.hiw-place-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(45,61,35,.16);background:var(--cream);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s;}
.hiw-place-nav svg{width:18px;height:18px;}
.hiw-place-nav:hover{background:var(--lime-bright);}
.hiw-place-prev{left:.6rem;}
.hiw-place-next{right:.6rem;}
@media(prefers-reduced-motion:reduce){.hiw-place-track,.hiw-place-card{transition:none;}}
.hiw-place-media{flex:none;aspect-ratio:16/9;background:var(--forest);overflow:hidden;}
.hiw-place-media img{width:100%;height:100%;object-fit:cover;display:block;}
.hiw-place-cap{flex:1;display:flex;flex-direction:column;gap:.15rem;padding:1.1rem 1.25rem 1.25rem;text-align:left;}
.hiw-place-name{font-size:18px;font-weight:700;color:var(--forest);line-height:1.2;}
.hiw-place-role{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--forest-mid);}
.hiw-place-quote{font-size:14px;color:var(--forest-mid);line-height:1.55;font-weight:300;margin-top:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hiw-place-link{display:inline-flex;align-items:center;gap:.4rem;font-size:14px;font-weight:700;color:var(--forest);text-decoration:none;border-bottom:2px solid var(--lime-bright);padding-bottom:2px;margin-top:1.75rem;transition:gap .15s;}
.hiw-place-link:hover{gap:.7rem;}

/* Green hero HEAD only: a full-bleed forest band behind the head, with white steps + deck
   below. One continuous spine line threads both (bright lime in the green head, fading to
   deep forest down the white steps, so it reads on either background). The guarantee
   callout and #models sections stay light. */
.hiw-spine-head{z-index:0;} /* stacking context so the full-bleed band sits behind head content */
/* Growth-rings treatment (2026-07-07): faint grain baked into the hero band (opacity in the
   SVG rect, 4.5%), plus ONE ring fragment (markup .hiw-rings) and the guarantee stamp. Sparse
   by request; the binding decorative-placement rules cap it there. */
.hiw-spine-head::before{content:"";position:absolute;z-index:-1;top:calc(-1 * (var(--nav-h) + 60px));left:50%;margin-left:-50vw;width:100vw;bottom:0;background-color:var(--forest);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
.hiw-rings{position:absolute;z-index:-1;top:calc(-1 * (var(--nav-h) + 60px) - 140px);right:0;width:min(290px,45vw);height:460px;overflow:hidden;pointer-events:none;}
.hiw-rings svg{width:460px;height:460px;display:block;margin-left:auto;margin-right:-170px;}
.hub-h2 em{font-style:italic;font-weight:500;}
.hiw-spine-head .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75);}
.hiw-spine-head .hiw-head-body h1{color:#fff;}
.hiw-spine-head .hl-brush{color:var(--forest);white-space:nowrap;} /* forest text on the lime brush reads on the green band */
.hiw-spine-head .hub-lead{color:rgba(255,255,255,.82);}
.hiw-spine-head .hiw-head-note{color:rgba(255,255,255,.72);}
.hiw-spine-head .hiw-head-note b{color:#fff;}
.hiw-spine-head .hiw-head-node{box-shadow:0 0 0 6px var(--forest);}
.hiw-spine-head .btn-primary{background:var(--lime);color:var(--forest);border-color:var(--lime);}
.hiw-spine-head .btn-outline{border-color:rgba(255,255,255,.42);color:#fff;}
/* Continuous green line: lime at the top (green head) fading to deep forest (white steps). */
.hiw-spine .hiw-line{background:linear-gradient(var(--lime) 0 22%, rgba(45,61,35,.28) 60%);}

.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;}

/* Timeline-at-a-glance strip (V3-adapted) */
.hiw-tl{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:2.5rem 0 0;padding:0;list-style:none;position:relative;}
.hiw-tl::before{content:'';position:absolute;top:15px;left:10%;right:10%;height:2px;background:rgba(45,61,35,.12);}
.hiw-tl-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;position:relative;}
.hiw-tl-dot{width:30px;height:30px;border-radius:50%;background:var(--forest);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;position:relative;z-index:1;}
.hiw-tl-when{font-size:13px;font-weight:700;color:var(--forest);}
.hiw-tl-what{font-size:12.5px;color:var(--forest-mid);line-height:1.5;max-width:13rem;}
@media(max-width:760px){.hiw-tl{grid-template-columns:1fr;gap:1.5rem;}.hiw-tl::before{display:none;}}

.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;}
.hiw-faq-item{border-top:1px solid rgba(45,61,35,.1);padding:1.25rem 0;break-inside:avoid;}
@media (min-width:901px){.hiw-faq{columns:2;column-gap:3rem;max-width:none;}}
@media (max-width:900px){.hiw-faq{max-width:760px;}}

/* HIW hero: copy left, compact journey preview right (fills the dead column). */
.hiw-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center;}
.hiw-hero-steps{list-style:none;margin:0;padding:1.5rem 1.75rem;background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);display:flex;flex-direction:column;gap:.9rem;}
.hiw-hero-steps li{display:flex;align-items:center;gap:.8rem;font-size:14.5px;font-weight:600;color:var(--forest);}
.hhs-n{flex:none;width:28px;height:28px;border-radius:var(--r-full);background:var(--lime);color:var(--forest);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.hhs-when{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--forest-mid);white-space:nowrap;}
@media (max-width:900px){.hiw-hero-grid{grid-template-columns:1fr;gap:2rem;}.hiw-hero-steps{display:none;}}

/* Hero destination hire card (the process delivers a real person) */
.hiw-hero-hire{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);margin:0;background:var(--forest);}
.hiw-hero-hire img{display:block;width:100%;height:auto;object-fit:cover;}
.hiw-hero-hire figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.25rem 1.1rem;background:linear-gradient(to top,rgba(20,30,16,.94),rgba(20,30,16,0));display:flex;flex-direction:column;gap:.15rem;}
.hhh-badge{align-self:flex-start;background:var(--lime);color:var(--forest);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-full);padding:.3rem .7rem;margin-bottom:.55rem;}
.hhh-name{color:#fff;font-size:18px;font-weight:700;}
.hhh-role{color:rgba(255,255,255,.75);font-size:13px;line-height:1.4;}
/* Journey arrival: the timeline culminates in a real placed professional */
.hiw-arrival{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,3vw,2.75rem);align-items:center;margin-top:3rem;background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);padding:1.4rem;}
.hiw-arrival-media{border-radius:var(--r-lg);overflow:hidden;align-self:stretch;}
.hiw-arrival-media img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover;}
.hiw-arrival-body h3{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--forest);margin:.45rem 0 .6rem;line-height:1.2;}
.hiw-arrival-body p{font-size:15px;color:var(--forest-mid);line-height:1.6;font-weight:300;margin:0 0 1rem;}
.hiw-arrival-link{display:inline-flex;align-items:center;gap:.4rem;font-size:14px;font-weight:700;color:var(--forest);text-decoration:none;border-bottom:2px solid var(--lime-bright);padding-bottom:2px;transition:gap .15s;}
.hiw-arrival-link:hover{gap:.7rem;}
@media (max-width:768px){.hiw-arrival{grid-template-columns:1fr;gap:1.25rem;}}

/* Merged team+security band: sub-heading between the two card rows. */
.hiw-subhead{font-size:22px;font-weight:700;color:var(--forest);margin:2.75rem 0 0;line-height:1.25;}

/* Guarantee callout: inline proof stats (replaces the standalone stat band). */
.hiw-callout-stats{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:1rem;font-size:13.5px;color:var(--forest-mid);}
.hiw-callout-stats b{color:var(--forest);font-variant-numeric:tabular-nums;}
.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;}
}

/* ============================================================================
   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;}
/* Live filter result line (page-talent.php); populated by JS, empty otherwise. */
.hub-filter-count:empty{display:none;}
.hub-filter-count{font-size:14px;font-weight:600;color:var(--forest-mid);margin:1rem 0 0;min-height:1.4em;font-variant-numeric:tabular-nums;}
/* Proof chips (page-talent.php hero): the old value-props grid compressed to one row. */
.hub-chip-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.hub-hero-chips{margin-top:1.5rem;}
.hub-proof-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--parchment);border:1px solid rgba(45,61,35,.12);border-radius:var(--r-full);padding:.45rem 1.1rem;font-size:13px;font-weight:600;color:var(--forest);}
.hub-proof-chip .hub-num{font-variant-numeric:tabular-nums;}
/* Inline industry links under the role filter (replaces the old industry card grid). */
.hub-ind-links{font-size:13.5px;color:var(--forest-mid);margin:.75rem 0 0;line-height:1.8;}
.hub-ind-links a{display:inline-block;color:var(--forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(45,61,35,.3);text-underline-offset:3px;}
.hub-ind-links a:hover{text-decoration-color:var(--forest);}
.hub-role-card.is-entering{animation:hubCardIn .22s ease both;}
@keyframes hubCardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* Workbench grid-paper texture behind the role explorer only. */
#roles.hub-roles{background-image:repeating-linear-gradient(0deg,rgba(45,61,35,.035) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(45,61,35,.035) 0 1px,transparent 1px 32px);}
@media (prefers-reduced-motion: reduce){.hub-role-card.is-entering{animation:none;}}
.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;} }

/* ---- Client video testimonials slider (case-studies index) ---- */
.cs-videos{padding-block:clamp(3.5rem,6vw,6rem);background:var(--cream);}
.cs-video-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.6rem;max-width:var(--container);margin-inline:auto;}
.cs-video-track{grid-column:2;display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-block:.25rem;}
.cs-video-track::-webkit-scrollbar{display:none;}
.cs-video-card{margin:0;flex:0 0 calc((100% - 3.3rem)/4);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;}
.cs-video-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.cs-video-card video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--forest-deep);display:block;}
.cs-video-card figcaption{display:flex;flex-direction:column;gap:.15rem;line-height:1.3;padding:.9rem 1.05rem 1.05rem;border-top:1px solid rgba(45,61,35,.06);}
.cs-video-name{font-size:14.5px;font-weight:700;color:var(--forest);letter-spacing:-.01em;}
.cs-video-role{font-size:12px;color:var(--forest-mid);display:inline-flex;align-items:center;gap:.4rem;}
.cs-video-role::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime-bright);flex:none;}
.cs-video-arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(45,61,35,.12);background:var(--lime);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,opacity .15s;}
.cs-video-arrow svg{width:20px;height:20px;}
.cs-video-arrow:hover{transform:scale(1.06);}
.cs-video-arrow:disabled{opacity:.35;cursor:default;pointer-events:none;}
.cs-video-dots{grid-column:1/-1;display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem;}
.cs-video-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(45,61,35,.2);cursor:pointer;transition:background .15s,width .15s;}
.cs-video-dot.active{background:var(--forest);width:22px;border-radius:5px;}
@media (max-width:900px){ .cs-video-card{flex-basis:calc((100% - 1.1rem)/2);} }
@media (max-width:520px){ .cs-video-slider{column-gap:0;} .cs-video-arrow{display:none;} .cs-video-card{flex-basis:100%;} }

/* ---- Single case study: embedded testimonial video ---- */
.article-video{margin:2rem 0;}
.article-video video{width:100%;max-width:340px;aspect-ratio:9/16;object-fit:cover;background:var(--forest-deep);border-radius:var(--r-lg);box-shadow:var(--shadow-md);display:block;margin-inline:auto;}

/* ============================================================================
   BRUSH HIGHLIGHT (de-sterilize) — the canvas pages use Matt's textured marker on
   the hero payoff word, but the content-template hub pages (talent / how-it-works /
   ways-to-work) referenced .hl-brush WITHOUT a definition here, so it rendered flat.
   Mirror the canvas rule, reusing the already-uploaded swipe texture, so the payoff
   word reads as designed on every hub page.
   ============================================================================ */
/* Negative inline margins mirror the horizontal padding so the swipe bleeds AROUND the text
   without adding layout width: mid-sentence brushes (hiw hero) otherwise render a visible
   gap before the next word (caught by Dallas 2026-07-07; line-terminal uses never showed it). */
.hl-brush{background:url('/wp-content/uploads/treantly-assets/v2-swipe.png') center/100% 100% no-repeat;padding:.02em .25em .12em;margin-inline:-.25em;}

/* ============================================================================
   TWO ENGAGEMENT MODELS (.wtw-*, now in page-how-it-works.php) — Managed Team
   (EOR / fully managed) vs Direct Hire (headhunter, one-time fee + 6-month
   guarantee). Shared-start steps -> side-by-side tier cards -> the shared
   .hub-compare-table -> guarantee callout. Tokens only; rounded corners; mobile
   collapse. Numbers carry tabular-nums via .hub-num.
   ============================================================================ */

/* Shared-start steps (identical process up to the point you hire) */
.wtw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;}
.wtw-step{background:var(--parchment);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-lg);padding:1.5rem;}
.wtw-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-full);background:var(--forest);color:var(--lime);font-weight:700;margin-bottom:.85rem;font-variant-numeric:tabular-nums;}
.wtw-step h3{font-size:16px;font-weight:700;color:var(--forest);margin:0 0 .4rem;line-height:1.3;}
.wtw-step p{font-size:14px;color:var(--forest-mid);line-height:1.6;font-weight:300;margin:0;}

/* Two model tier cards (compare both at once; no toggle) */
.wtw-tiers{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem;align-items:stretch;}
/* Managed-first: single featured card, centered (Direct Hire is a note inside it). */
.wtw-tiers.wtw-solo{grid-template-columns:minmax(0,640px);justify-content:center;}
.wtw-tier{display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);padding:2.25rem 2rem;box-shadow:var(--shadow-md);transition:transform .2s,box-shadow .2s;}
.wtw-tier:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.wtw-tier-managed{border-color:rgba(45,61,35,.2);}
/* In normal flow (a pill above the title), not absolute, so the badge never overlaps
   the heading box (the overlap oracle flags abs-positioned badges over full-width text). */
.wtw-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;background:var(--lime);color:var(--forest);border-radius:var(--r-full);padding:.28rem .9rem;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem;}
.wtw-badge-ghost{background:var(--parchment);color:var(--forest-mid);}
.wtw-tier-name{font-size:22px;font-weight:700;color:var(--forest);margin:.25rem 0 .4rem;line-height:1.2;}
.wtw-tier-pos{font-size:15px;color:var(--forest-mid);line-height:1.6;font-weight:300;margin:0 0 1.1rem;max-width:34ch;}
.wtw-tier-best{font-size:13px;color:var(--forest-mid);background:var(--parchment);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-md);padding:.6rem .85rem;line-height:1.45;margin-bottom:1.25rem;font-weight:300;}
.wtw-tier-best b{font-weight:700;color:var(--forest);}
.wtw-list{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.wtw-list li{position:relative;padding-left:1.85rem;font-size:14px;color:var(--forest-mid);line-height:1.55;font-weight:300;}
.wtw-list li::before{content:'\2713';position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:6px;background:var(--lime);color:var(--forest);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.wtw-list li b{color:var(--forest);font-weight:700;}
.wtw-tier-cta{margin-top:auto;}
.wtw-tier-cta .btn{width:100%;}
.wtw-fine{font-size:12px;color:var(--forest-mid);line-height:1.55;font-weight:300;margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(45,61,35,.08);}
.wtw-fine b{color:var(--forest);font-weight:700;}

@media (max-width:760px){
  .wtw-steps{grid-template-columns:1fr;}
  .wtw-tiers{grid-template-columns:1fr;}
}

/* ============================================================================
   PLACEMENT STORY watch page (.story-*, single-placement_story.php) — the reel
   hero + highlight clip grid + click-to-load YouTube facade + collapsible
   transcript. Tokens only; rounded corners; numbers carry tabular-nums.
   Performance shape: posters are the only media payload before interaction
   (reel preload="metadata", clips preload="none", facade = static image).
   ============================================================================ */
.story-hero{padding-bottom:clamp(3rem,5vw,4.5rem);}
/* Bio: readable paragraph under the h1, real breathing room (no negative pull). */
.story-lead{font-size:16.5px;color:var(--forest-mid);font-weight:300;line-height:1.7;max-width:60ch;margin:1rem 0 2rem;font-variant-numeric:tabular-nums;}
/* Highlight-reel headline: makes plain this is a curated reel, not the full interview. */
.story-reel-headline{margin:0 0 1.1rem;}
.story-reel-headline .hub-h2{margin:.35rem 0 0;}
.story-reel-subline{font-size:13.5px;color:var(--forest-mid);font-weight:600;font-variant-numeric:tabular-nums;margin:.5rem 0 0;}
.story-reel{margin:0;}
.story-reel video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--forest-deep);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);display:block;}
/* Reel table of contents: chapter rows seek the reel; active row = now playing. */
.story-chapters{margin-top:1.4rem;}
.story-chapters-head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);margin:0 0 .6rem;}
.story-chapters-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.story-chapter{display:flex;align-items:baseline;gap:.85rem;width:100%;text-align:left;background:var(--white);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-lg);padding:.7rem 1rem;cursor:pointer;font:inherit;color:var(--forest);transition:background .15s,border-color .15s;}
.story-chapter:hover{background:var(--lime);border-color:transparent;}
.story-chapter.is-active{background:var(--lime);border-color:transparent;}
.story-chapter-time{flex:none;font-size:13px;font-weight:700;color:var(--forest);font-variant-numeric:tabular-nums;min-width:2.6rem;}
.story-chapter-title{flex:1;font-size:14.5px;font-weight:600;line-height:1.35;}
.story-chapter-topic{flex:none;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--forest-mid);}
.story-chapter.is-active .story-chapter-topic{color:var(--forest);}
.story-chapter:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
/* Explore-clips callout: under the reel, points down to the clip grid. */
.story-reel-cta{display:flex;justify-content:center;margin-top:1.5rem;}
.story-reel-cta a{display:inline-flex;align-items:center;gap:.55rem;background:var(--white);border:1px solid rgba(45,61,35,.14);border-radius:var(--r-full);padding:.6rem 1.35rem;font-size:14px;font-weight:600;color:var(--forest);text-decoration:none;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,transform .15s;}
.story-reel-cta a:hover{background:var(--lime);border-color:transparent;transform:translateY(-1px);}
.story-reel-cta svg{width:17px;height:17px;animation:story-bob 1.6s ease-in-out infinite;}
@keyframes story-bob{0%,100%{transform:translateY(-2px);}50%{transform:translateY(2px);}}
@media (prefers-reduced-motion:reduce){.story-reel-cta svg{animation:none;}}

/* "In this conversation" intro leads the clips section (what's discussed). */
.story-clips-lead{font-size:15.5px;color:var(--forest-mid);font-weight:300;line-height:1.65;max-width:60ch;margin:.85rem 0 0;}
/* Topic bubbles (clip grid) */
.story-topic-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;}
.story-topic-chip{display:inline-flex;align-items:center;background:var(--white);border:1px solid rgba(45,61,35,.14);border-radius:var(--r-full);padding:.4rem 1rem;font-size:12.5px;font-weight:600;color:var(--forest-mid);text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.story-topic-chip:hover{background:var(--lime);color:var(--forest);border-color:transparent;}
.story-topic-chip.is-static{background:var(--parchment);border-color:rgba(45,61,35,.1);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .75rem;align-self:flex-start;}
.story-clip-card{scroll-margin-top:110px;}

/* Clip grid (parchment surface = clean break from the white hero) */
.story-clips{background:var(--parchment);}
.story-clip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem;}
.story-clip-card{margin:0;background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.story-clip-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.story-clip-media video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--forest-deep);display:block;}
.story-clip-cap{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;}
.story-clip-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;}
.story-clip-head h3{font-size:17px;font-weight:700;color:var(--forest);line-height:1.3;margin:0;}
.story-clip-len{font-size:12.5px;font-weight:600;color:var(--forest-mid);font-variant-numeric:tabular-nums;flex:none;}
.story-clip-quote{font-size:14.5px;color:var(--forest);font-style:italic;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.story-clip-desc{font-size:13.5px;color:var(--forest-mid);font-weight:300;line-height:1.6;margin:0;}

/* Full-interview facade: static poster + play; the iframe exists only after click */
.story-facade{position:relative;max-width:920px;margin-top:2.5rem;border-radius:var(--r-xl);overflow:hidden;background:var(--forest-deep);box-shadow:var(--shadow-md);aspect-ratio:16/9;}
.story-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.story-facade-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:none;background:var(--lime-bright);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 22px rgba(30,43,24,.35);transition:transform .15s,background .15s;}
.story-facade-play svg{width:28px;height:28px;margin-left:3px;}
.story-facade-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#d4f06a;}
.story-facade-play:focus-visible{outline:3px solid var(--cream);outline-offset:3px;}
/* pill scrim behind the note so cream text stays legible over any poster frame */
.story-facade-note{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);white-space:nowrap;border-radius:var(--r-full);padding:.35rem .95rem;background:rgba(30,43,24,.72);color:var(--cream);font-size:12px;font-weight:600;letter-spacing:.03em;}
.story-facade.is-loaded iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Transcript (collapsible; full text stays in the DOM for indexing) */

/* Combined box: full interview + transcript, collapsed by default. */
.story-more{max-width:860px;background:var(--parchment);border:1px solid rgba(45,61,35,.1);border-radius:var(--r-xl);}
.story-more summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;padding:1.4rem 1.75rem;font-size:16px;font-weight:700;color:var(--forest);}
.story-more summary::-webkit-details-marker{display:none;}
.story-more summary svg{width:20px;height:20px;flex:none;transition:transform .2s;}
.story-more[open] summary svg{transform:rotate(180deg);}
.story-more-body{padding:0 1.75rem 1.6rem;display:flex;flex-direction:column;gap:1.4rem;}
.story-more-body .story-facade{margin-top:0;}
.story-transcript-body{max-height:520px;overflow-y:auto;}
.story-transcript-body p{font-size:14px;color:var(--forest-mid);line-height:1.7;font-weight:300;margin:0 0 .65rem;font-variant-numeric:tabular-nums;}

@media (max-width:760px){ .story-clip-grid{grid-template-columns:1fr;} }

/* ---- Meet the placements (page-talent.php): clip cards -> /talent/interview/ watch pages.
   Poster-only cards (no video element on the hub); parchment surface breaks from
   the white roles grid above. ---- */
.hub-stories{background:var(--parchment);}
.hub-stories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,340px));justify-content:center;gap:1.25rem;margin-top:2.5rem;}
.hub-story-card{display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s;}
.hub-story-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.hub-story-media{position:relative;display:block;aspect-ratio:16/9;background:var(--forest-deep);overflow:hidden;}
.hub-story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hub-story-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--lime-bright);color:var(--forest);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(30,43,24,.35);transition:transform .15s;}
.hub-story-play svg{width:20px;height:20px;margin-left:2px;}
.hub-story-card:hover .hub-story-play{transform:translate(-50%,-50%) scale(1.08);}
.hub-story-cap{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.15rem 1.25rem;}
.hub-story-name{font-size:16px;font-weight:700;color:var(--forest);}
.hub-story-role{font-size:12.5px;color:var(--forest-mid);}
.hub-story-quote{font-size:13.5px;color:var(--forest);font-style:italic;line-height:1.55;}
.hub-story-link{margin-top:.35rem;font-size:13px;font-weight:700;color:var(--forest);}
.hub-story-card:hover .hub-story-link{text-decoration:underline;}

/* ============================================================================
   CASE STUDIES INDEX v2 (page-case-studies.php redesign, 2026-07-08)
   Proof-first hero (light proof card, forest numerals), homepage testimonial
   component, and V2 gallery cards with a client mark (real logo / monogram).
   Greens intentionally toned down: the footer CTA is the only full forest band.
   Tokens resolve from the body.cs-template scope above.
   ============================================================================ */
/* Hero: light, split (copy left, proof card right) */
.csx-hero{background:var(--cream);padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(3rem,5vw,4.5rem);position:relative;overflow:hidden;}
.csx-hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;}
.csx-hero h1{font-size:clamp(32px,4.4vw,56px);font-weight:700;color:var(--forest);line-height:1.07;letter-spacing:-.02em;margin:0 0 1.3rem;max-width:15ch;}
.csx-hero h1 em{font-style:italic;color:var(--forest-mid);font-weight:400;}
.csx-hero-sub{font-size:18px;color:var(--forest-mid);font-weight:300;line-height:1.6;max-width:46ch;margin:0 0 2rem;}
.csx-proof{background:#fff;border:1px solid rgba(45,61,35,.08);border-radius:var(--r-xl);padding:2.2rem 2.3rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden;}
.csx-proof-rings{position:absolute;bottom:-70px;right:-50px;pointer-events:none;opacity:.6;}
.csx-proof-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin:0 0 1.4rem;position:relative;z-index:2;}
.csx-proof-grid{display:grid;gap:1.1rem;position:relative;z-index:2;}
.csx-stat{border-bottom:1px solid rgba(45,61,35,.08);padding-bottom:1.1rem;display:flex;align-items:center;gap:.9rem;}
.csx-stat:last-child{border-bottom:none;padding-bottom:0;}
.csx-stat .px{flex:0 0 auto;width:9px;height:9px;border-radius:2px;background:var(--lime-bright);}
.csx-stat-n{font-size:clamp(30px,3.4vw,40px);font-weight:700;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.csx-stat-d{font-size:13.5px;color:var(--forest-mid);font-weight:300;}
/* Studies section */
.csx-studies{padding-block:clamp(3rem,5vw,5rem) clamp(3.5rem,6vw,6rem);background:var(--cream);}
/* Featured card, lightened (lime edge, not a forest fill) */
.csx-feat{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center;background:#fff;border:1px solid rgba(45,61,35,.08);border-left:4px solid var(--lime-bright);border-radius:var(--r-xl);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow-md);margin-bottom:1.25rem;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.csx-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.csx-feat-l{min-width:0;}
.csx-feat-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap;}
.csx-feat-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);background:var(--lime-bright);border-radius:var(--r-full);padding:.28rem .8rem;}
.csx-feat-cat{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);}
.csx-feat h3{font-size:clamp(22px,2.6vw,32px);font-weight:700;color:var(--forest);line-height:1.14;letter-spacing:-.02em;margin:0 0 1.4rem;max-width:22ch;}
.csx-feat-metrics{display:flex;gap:2.2rem;flex-wrap:wrap;}
.csx-feat-metric b{display:block;font-size:28px;font-weight:700;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;}
.csx-feat-metric span{font-size:12.5px;color:var(--forest-mid);margin-top:.35rem;display:block;max-width:16ch;}
.csx-feat-r{display:flex;flex-direction:column;align-items:flex-end;gap:1.2rem;flex-shrink:0;}
.csx-feat-link{display:inline-flex;align-items:center;gap:.5rem;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);white-space:nowrap;transition:gap .2s;}
.csx-feat:hover .csx-feat-link{gap:.8rem;}
/* Grid */
.csx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.csx-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(45,61,35,.07);border-radius:var(--r-xl);padding:1.9rem;transition:transform .2s,box-shadow .2s;}
.csx-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.csx-card-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;}
.csx-card-cat{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-mid);}
.csx-card h3{font-size:18.5px;font-weight:700;color:var(--forest);line-height:1.25;margin:0 0 1.3rem;}
.csx-card-metrics{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.3rem;flex:1;}
.csx-card-metric{display:flex;align-items:baseline;gap:.6rem;}
.csx-card-metric b{font-size:16px;font-weight:700;color:var(--forest);font-variant-numeric:tabular-nums;min-width:58px;}
.csx-card-metric span{font-size:12.5px;color:var(--forest-mid);font-weight:300;line-height:1.4;}
.csx-card-foot{padding-top:1.1rem;border-top:1px solid rgba(45,61,35,.07);margin-top:auto;}
.csx-card-link{display:inline-flex;align-items:center;gap:.45rem;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);}
/* Client mark: real logo (img) or monogram tile */
.cmark{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;}
.cmark-mono{background:var(--parchment);color:var(--forest);font-weight:700;font-size:15px;letter-spacing:.02em;border:1px solid rgba(45,61,35,.1);font-variant-numeric:normal;}
.cmark-img{background:#fff;border:1px solid rgba(45,61,35,.1);padding:6px;}
.cmark-img img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
/* Homepage testimonial component (matched verbatim) */
.testimonials{padding:clamp(3.5rem,6vw,6rem) 0;background:var(--white);}
.testi-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.6rem;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);margin-top:2.5rem;}
.testi-track{grid-column:2;display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-block:.25rem;}
.testi-track::-webkit-scrollbar{display:none;}
.testi-vcard{flex:0 0 calc((100% - 2.2rem)/3);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(45,61,35,.08);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;}
.testi-vcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.testi-media{position:relative;width:100%;aspect-ratio:9/16;background:var(--forest-deep);overflow:hidden;}
.testi-media video{width:100%;height:100%;object-fit:cover;background:var(--forest-deep);display:block;}
.testi-media::after{content:'';position:absolute;inset:0;background:rgba(200,232,90,.18);pointer-events:none;transition:opacity .2s;}
.testi-media.is-playing::after{opacity:0;}
.testi-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:58px;height:58px;border-radius:50%;border:none;background:var(--cream);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 22px rgba(30,43,24,.4);transition:transform .15s,background .15s,opacity .2s;}
.testi-play svg{width:22px;height:22px;margin-left:3px;}
.testi-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--white);}
.testi-media.is-playing .testi-play{opacity:0;pointer-events:none;}
.testi-vcard figcaption{display:flex;flex-direction:column;gap:.15rem;line-height:1.3;padding:.9rem 1.05rem 1.05rem;border-top:1px solid rgba(45,61,35,.06);}
.testi-vname{font-size:14.5px;font-weight:700;color:var(--forest);letter-spacing:-.01em;}
.testi-vrole{font-size:12px;color:var(--forest-mid);display:inline-flex;align-items:center;gap:.4rem;}
.testi-vrole::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime-bright);flex:none;}
.testi-arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(45,61,35,.12);background:var(--lime);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,opacity .15s;}
.testi-arrow svg{width:20px;height:20px;}
.testi-arrow:hover{transform:scale(1.06);}
.testi-arrow:disabled{opacity:.35;cursor:default;pointer-events:none;}
.testi-dots{grid-column:1/-1;display:flex;justify-content:center;gap:0;margin-top:1.5rem;}
.testi-dot{width:24px;height:24px;border-radius:12px;border:none;padding:8px;background:rgba(45,61,35,.2);background-clip:content-box;cursor:pointer;transition:background .15s,width .15s;}
.testi-dot.active{background:var(--forest);background-clip:content-box;width:38px;}
.testi-cta{text-align:center;margin-top:2.25rem;}
@media(max-width:960px){.csx-hero .container{grid-template-columns:1fr;gap:2rem;}.csx-feat{grid-template-columns:1fr;gap:1.5rem;}.csx-feat-r{flex-direction:row;align-items:center;justify-content:space-between;}}
@media(max-width:1000px){.csx-cards{grid-template-columns:repeat(2,1fr);}.testi-vcard{flex-basis:calc((100% - 1.1rem)/2);}}
@media(max-width:640px){.csx-cards{grid-template-columns:1fr;}}
@media(max-width:560px){.testi-slider{column-gap:0;}.testi-arrow{display:none;}.testi-vcard{flex-basis:calc((100% - 1.1rem)/2);}}

/* ============================================================================
   CASE STUDY SINGLE — Editorial Dossier (single-case_study.php redesign,
   2026-07-08). Forest hero band + quiet stat line; floated white content card
   with a sticky "At a glance" rail; drop-cap lede; parchment pull-quote.
   ============================================================================ */
.csd-hero{background:var(--forest);color:#fff;position:relative;overflow:hidden;padding:calc(var(--nav-h) + 8px) 0 8.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
.csd-hero-rings{position:absolute;top:-30px;right:-60px;pointer-events:none;opacity:.5;}
.csd-hero .container{position:relative;z-index:2;max-width:960px;}
.csd-crumb{display:inline-flex;align-items:center;gap:.5rem;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:2.2rem;background:none;border:none;font-family:var(--font);cursor:pointer;}
.csd-crumb:hover{color:var(--lime-bright);}
.csd-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-bright);margin-bottom:1.1rem;}
.csd-hero h1{font-size:clamp(30px,4.6vw,58px);font-weight:700;line-height:1.08;letter-spacing:-.02em;max-width:15ch;margin:0 0 1.4rem;color:#fff;}
.csd-statline{margin-top:1.8rem;font-size:14px;color:rgba(255,255,255,.6);font-weight:300;letter-spacing:.01em;}
.csd-statline .num{color:rgba(255,255,255,.82);font-weight:600;font-variant-numeric:tabular-nums;}
.csd-statline .sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35);margin:0 .7rem;vertical-align:middle;}
.csd-wrap{background:var(--cream);}
.csd-inner{position:relative;z-index:3;margin-top:-6rem;padding-bottom:clamp(3.5rem,6vw,5.5rem);}
.csd-grid{display:grid;grid-template-columns:1fr 300px;gap:2.2rem;align-items:start;}
.csd-card{background:#fff;border-radius:var(--r-xl);box-shadow:0 24px 70px rgba(30,43,24,.18);padding:clamp(2rem,4vw,3.4rem);border:1px solid rgba(45,61,35,.05);}
.csd-card p{font-size:17.5px;line-height:1.85;color:var(--charcoal);font-weight:300;margin:0 0 1.6rem;}
.csd-card p:last-child{margin-bottom:0;}
.csd-card p.csd-lede::first-letter{float:left;font-size:3.4em;line-height:.82;font-weight:700;color:var(--forest);padding:.06em .12em 0 0;}
.csd-card h2{font-size:26px;font-weight:700;color:var(--forest);margin:2.2rem 0 1rem;line-height:1.2;}
.csd-card h3{font-size:18px;font-weight:700;color:var(--forest);margin:1.8rem 0 .7rem;line-height:1.3;}
.csd-card strong{color:var(--forest);font-weight:600;}
.csd-card a{color:var(--forest);text-decoration-color:var(--lime-bright);}
.csd-quote{margin:2.4rem 0 .4rem;padding:1.8rem 2rem;background:var(--parchment);border-left:3px solid var(--lime-bright);border-radius:0 var(--r-md) var(--r-md) 0;}
.csd-quote p{font-size:18px;font-style:italic;color:var(--forest);line-height:1.7;margin:0 0 .7rem;font-weight:300;}
.csd-quote cite{font-size:13px;font-weight:700;color:var(--forest-mid);font-style:normal;}
.csd-rail{position:sticky;top:calc(var(--nav-h) + 20px);}
.csd-rail-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:1.6rem 1.5rem;border:1px solid rgba(45,61,35,.06);}
.csd-rail-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-mid);margin:0 0 1.2rem;}
.csd-rail-lead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-mid);}
.csd-rail-ind{font-size:15px;font-weight:600;color:var(--forest);margin:.2rem 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(45,61,35,.08);}
.csd-rail-row{margin-top:1.15rem;}
.csd-rail-n{font-size:22px;font-weight:700;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.csd-rail-l{font-size:12.5px;color:var(--forest-mid);line-height:1.45;margin-top:.3rem;font-weight:300;}
.csd-rail hr{border:none;border-top:1px solid rgba(45,61,35,.08);margin:1.3rem 0 0;}
.csd-rail .btn{width:100%;margin-top:1.2rem;}
.csd-video{margin:2rem 0 0;}
.csd-video video{width:100%;max-width:340px;aspect-ratio:9/16;object-fit:cover;background:var(--forest-deep);border-radius:var(--r-lg);box-shadow:var(--shadow-md);display:block;}
@media(max-width:880px){.csd-grid{grid-template-columns:1fr;}.csd-rail{position:static;}}