/* BetterActs (corporate volunteering) v2: separate identity from the Collective.
   Logo-led tangerine palette, Figtree display + DM Sans body, crisp B2B layout with warm illustration. */
@font-face{font-family:Figtree;src:url(../../assets/fonts/figtree-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../../assets/fonts/dm-sans-latin.woff2) format("woff2");font-weight:300 800;font-display:swap}
:root{
  --tangerine:#F2891F;--ember:#E2601C;--ember-700:#B5470F;--peach:#FFD9B8;--cream:#FFF6EC;--sand:#F6EDE2;
  --teal:#1F5F5B;--teal-900:#10302E;--ink:#1F1A17;--ink-600:#4D4540;--line:rgba(31,26,23,.12);
  --display:Figtree,system-ui,sans-serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;--wrap:min(1200px,100% - 2.5rem);--ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 clamp(1.02rem,.98rem + .2vw,1.12rem)/1.62 var(--sans)}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.06;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,1.6rem + 4vw,4.8rem);font-weight:800}
h2{font-size:clamp(1.9rem,1.4rem + 2vw,3rem);font-weight:750}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1em;max-width:66ch}
.wrap{width:var(--wrap);margin-inline:auto}
.eyebrow{font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ember-700);margin-bottom:1rem}
.lede{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);color:var(--ink-600);line-height:1.5}
.fine{font-size:.88rem;color:var(--ink-600)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--peach);padding:.6rem 1rem;border-radius:8px}

/* Header */
.b-head{position:sticky;top:0;z-index:50;background:rgba(255,246,236,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.b-head .wrap{display:flex;align-items:center;gap:2rem;min-height:72px}
.b-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.35rem var(--display);letter-spacing:-.02em}
.b-brand img{width:40px;height:40px}
.b-nav{display:flex;gap:1.5rem;margin-left:auto;align-items:center}
.b-nav a{text-decoration:none;font-weight:600;font-size:.96rem;color:var(--ink-600);padding:.3rem 0;border-bottom:2px solid transparent}
.b-nav a:hover,.b-nav a[aria-current="page"]{color:var(--ink);border-color:var(--tangerine)}
.b-menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;font:inherit}
@media (max-width:960px){
  .b-menu{display:block}
  .b-nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;background:var(--cream);padding:1.5rem 1.25rem 2rem;border-bottom:1px solid var(--line);transform:translateY(calc(-100% - 100px));visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
  .b-nav.open{transform:none;visibility:visible;transition:transform .35s var(--ease)}
}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.b-btn{display:inline-flex;align-items:center;gap:.55rem;font:700 1rem/1 var(--sans);padding:1rem 1.35rem;border-radius:999px;background:var(--ember-700);color:#fff;text-decoration:none;transition:transform .2s var(--ease),background .2s;border:2px solid var(--ember-700)}
.b-btn:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px)}
.b-btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.b-btn.ghost:hover{background:var(--ink);color:var(--cream)}
.b-btn .arr{transition:transform .2s}.b-btn:hover .arr{transform:translateX(4px)}
.dark .b-btn.ghost,.cta-band .b-btn.ghost{color:var(--cream);border-color:var(--cream)}

/* Hero */
.b-hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.b-hero::before{content:"";position:absolute;width:60vw;height:60vw;max-width:780px;max-height:780px;right:-18vw;top:-22vw;border-radius:50%;background:radial-gradient(circle,var(--peach),transparent 70%);z-index:-1}
.b-hero.small h1{font-size:clamp(2.2rem,1.5rem + 3vw,3.8rem);max-width:20ch}
.b-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.hl{background:linear-gradient(transparent 62%,var(--peach) 62%);padding:0 .1em}
.b-hero-img{border-radius:28px;box-shadow:0 30px 60px -30px rgba(181,71,15,.45)}
@media (max-width:900px){.b-hero-grid{grid-template-columns:1fr}}

/* Sections */
.b-sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.tint{background:var(--sand)}
.dark{background:var(--teal-900);color:var(--cream)}
.dark .eyebrow{color:var(--peach)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.rounded{border-radius:24px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ticks li{padding-left:1.8rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--tangerine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/70% no-repeat}
.ticks.big{font-size:1.08rem;gap:.8rem}
.ticks.two-col{grid-template-columns:1fr 1fr;gap:.8rem 2rem}
@media (max-width:700px){.ticks.two-col{grid-template-columns:1fr}}

/* Match board (signature animation) */
.match-board{position:relative;display:grid;grid-template-columns:1fr 120px 1fr;gap:.5rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.6rem 1.4rem 2.4rem;box-shadow:0 24px 50px -32px rgba(31,26,23,.35)}
.match-board ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.mb-label{font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-600);margin-bottom:.8rem}
.mb-node{padding:.75rem .9rem;border-radius:12px;font-weight:600;font-size:.92rem;min-height:56px;display:flex;align-items:center}
.mb-node.need{background:var(--sand)}
.mb-node.skill{background:var(--peach)}
.match-board svg{width:100%;height:100%;overflow:visible}
.match-board path{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round}
.mb-note{position:absolute;right:1.2rem;bottom:.7rem;margin:0;font-size:.74rem;color:var(--ink-600)}
.js .mb-node{opacity:0;transform:translateX(var(--dx,-16px))}
.js .mb-node.skill{--dx:16px}
.js .match-board.in .mb-node{opacity:1;transform:none;transition:all .5s var(--ease) calc(var(--i)*120ms)}

/* Formats */
.fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}
.fmt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.4rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.fmt:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(181,71,15,.45)}
.fmt img{border-radius:12px;margin:-0.4rem -0.4rem .6rem;width:calc(100% + .8rem);aspect-ratio:4/3;object-fit:cover}
.fmt-meta{font-size:.78rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.08em}
.fmt p{font-size:.95rem;color:var(--ink-600);margin:0}
@media (max-width:1000px){.fmts{grid-template-columns:1fr 1fr}}@media (max-width:560px){.fmts{grid-template-columns:1fr}}

/* Audiences */
.two-aud{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.aud{display:grid;grid-template-columns:.8fr 1.2fr;gap:1.4rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.4rem;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.aud:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(31,95,91,.45)}
.aud img{border-radius:16px}
.aud .go{display:inline-flex;gap:.4rem;align-items:center;font-weight:700;margin-top:1rem;color:var(--ember-700)}
@media (max-width:1000px){.two-aud{grid-template-columns:1fr}}@media (max-width:560px){.aud{grid-template-columns:1fr}}

/* Steps */
.b-steps{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.b-steps-line{position:absolute;left:0;right:0;top:26px;width:100%;height:10px;overflow:visible}
.b-steps-line path{stroke:var(--tangerine);stroke-width:3;fill:none;stroke-dasharray:6 8}
.b-steps li{position:relative}
.sn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--tangerine);color:var(--ink);font:800 1.3rem var(--display);margin-bottom:1rem;position:relative;z-index:1;box-shadow:0 0 0 8px var(--teal-900)}
.b-steps p{opacity:.85;font-size:.98rem}
@media (max-width:900px){.b-steps{grid-template-columns:1fr 1fr}.b-steps-line{display:none}}

/* Report card */
.report-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.6rem;position:relative}
.rc-row{display:flex;justify-content:space-between;padding:.9rem 0;border-bottom:1px dashed var(--line);font-weight:600}
.rc-row b{color:var(--teal)}

/* Collective */
.collective{background:var(--teal);color:var(--cream);border-radius:24px;padding:2rem}
.collective .eyebrow{color:var(--peach)}
.collective .b-btn.ghost{color:var(--cream);border-color:var(--cream)}

/* CTA */
.cta-band{background:linear-gradient(120deg,var(--ember-700),var(--ember) 60%,var(--tangerine));color:#fff;padding:clamp(3.5rem,7vw,6rem) 0;text-align:center}
.cta-band .lede{color:#FFF1E4;margin-inline:auto}
.cta-band .btns{justify-content:center}
.cta-band .b-btn{background:var(--ink);border-color:var(--ink)}

/* Contact */
.form-frame{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.form-frame iframe{width:100%;height:760px;border:0}

/* Footer */
.b-foot{background:var(--ink);color:#E9E1D8;padding:3.5rem 0 2rem;font-size:.95rem}
.b-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.b-foot h4{font:700 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tangerine);margin:0 0 1rem}
.b-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.b-foot a{text-decoration:none}.b-foot a:hover{text-decoration:underline}
.b-foot .legal{border-top:1px solid rgba(233,225,216,.15);margin-top:2.5rem;padding-top:1.2rem;font-size:.82rem;opacity:.8;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
@media (max-width:760px){.b-foot .cols{grid-template-columns:1fr}}

/* Motion */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .mb-node{opacity:1;transform:none}
}
.match-board{grid-template-columns:1fr 110px 1fr;grid-template-rows:auto 292px;row-gap:0;align-items:stretch}
.match-board ul{gap:12px;align-content:start}
.mb-node{height:64px;min-height:0;overflow:hidden;line-height:1.25}
.match-board svg{height:292px}
.match-board circle{fill:var(--tangerine)}
@media (max-width:520px){.match-board{grid-template-columns:1fr 56px 1fr}.mb-node{font-size:.8rem;padding:.5rem .6rem}}

/* Comparison matrix (row-by-row reveal adapted from CreatorMotion Feature Matrix) */
.cmp{margin-top:2.2rem;border-top:2px solid var(--ink)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;align-items:stretch}
.cmp-head span{padding:1rem 1.2rem;font:800 1.05rem var(--display)}
.cmp-head .h-old{background:var(--sand);color:var(--ink-600)}
.cmp-head .h-new{background:var(--ink);color:var(--cream);display:flex;align-items:center;gap:.6rem}
.cmp-row{border-bottom:1px solid var(--line);position:relative}
.cmp-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tangerine);transform:scaleY(0);transform-origin:top}
.cmp-dim{padding:1.15rem 1.2rem;font-weight:700;display:flex;gap:.8rem;align-items:baseline}
.cmp-dim span{font:700 .78rem var(--sans);color:var(--ember-700);letter-spacing:.08em}
.cmp-cell{padding:1.15rem 1.2rem;overflow:hidden}
.cmp-cell.old{color:var(--ink-600);background:rgba(246,237,226,.55)}
.cmp-cell.new{font-weight:700;background:#FFF0E0;position:relative}
.cmp-cell.new span::before{content:"";display:inline-block;width:.95rem;height:.95rem;margin-right:.55rem;vertical-align:-.12em;border-radius:50%;background:var(--tangerine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/70% no-repeat}
.js .cmp-dim,.js .cmp-cell span{opacity:0}
.js .cmp-dim{transform:translateX(-10px)}
.js .cmp-cell span{display:inline-block;clip-path:inset(0 100% 0 0)}
.js .cmp-row.in .cmp-dim{opacity:1;transform:none;transition:all .35s var(--ease)}
.js .cmp-row.in .cmp-cell span{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .55s var(--ease),opacity .2s}
.js .cmp-row.in .cmp-cell.old span{transition-delay:.25s}
.js .cmp-row.in .cmp-cell.new span{transition-delay:.45s}
.cmp-row.active::before{transform:scaleY(1);transition:transform .4s var(--ease)}
@media (max-width:760px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;padding:.4rem 0}
  .cmp-cell.old::before{content:"Typical day: ";font-weight:700}
  .cmp-cell{padding:.5rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){.js .cmp-dim,.js .cmp-cell span{opacity:1;transform:none;clip-path:none}}
/* Real community photo mosaic */
.community{background:var(--teal-900);color:var(--cream)}
.community .eyebrow{color:var(--peach)}.community .fine{color:#BFD3D0}
.cs-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:10px}
.cs-fig{margin:0;overflow:hidden;border-radius:14px}
.cs-fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cs-fig:hover img{transform:scale(1.05)}
.cs-fig:nth-child(1){grid-column:span 4;grid-row:span 2}
.cs-fig:nth-child(2){grid-column:span 2;grid-row:span 2}
.cs-fig:nth-child(3),.cs-fig:nth-child(4),.cs-fig:nth-child(5){grid-column:span 2}
@media (max-width:600px){.cs-grid{grid-auto-rows:90px}}
/* Real-photo hero */
.b-hero-media{position:relative;padding:0 0 3rem 2rem}
.b-hero-photo{margin:0;position:relative}
.b-hero-photo img{aspect-ratio:4/3;object-fit:cover;width:100%}
.b-hero-photo figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(31,26,23,.75);color:#fff;font-size:.78rem;padding:.35rem .6rem;border-radius:8px}
.b-hero-inset{position:absolute;left:-0.5rem;bottom:0;width:42%;margin:0;border:6px solid var(--cream);border-radius:20px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(31,26,23,.5);transform:rotate(-3deg)}
.b-hero-inset img{aspect-ratio:4/3;object-fit:cover;width:100%}
.b-hero-badge{position:absolute;right:-0.5rem;top:-1rem;display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:999px;padding:.45rem .9rem .45rem .45rem;font:800 .92rem var(--display);box-shadow:0 12px 30px -16px rgba(181,71,15,.6)}
@media (max-width:900px){.b-hero-media{padding:0 0 2.5rem}.b-hero-badge{right:.5rem}}
.b-hero-photo figcaption{left:auto;right:1rem}