/* ===== Concept 03 - Community Mosaic ===== */
  body{ background:var(--paper); }
  .c3-nav{ position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; }
  .c3-nav .wrap{ display:flex; align-items:center; gap:30px; height:74px; }
  .c3-nav .brandlock .name{ color:#fff; }
  .c3-nav nav{ display:flex; gap:26px; margin-left:auto; }
  .c3-nav nav a{ font-weight:600; font-size:15px; color:rgba(255,255,255,.82); white-space:nowrap; }
  .c3-nav nav a:hover{ color:var(--gold); }

  /* hero with diagonal blocks */
  .c3-hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
  .c3-hero .blocks{ position:absolute; inset:0; }
  .c3-hero .blocks i{ position:absolute; display:block; }
  .c3-hero .b1{ top:-10%; right:-6%; width:46%; height:130%; background:var(--teal); transform:skewX(-12deg); }
  .c3-hero .b2{ top:-10%; right:-16%; width:30%; height:130%; background:var(--green); transform:skewX(-12deg); }
  .c3-hero .b3{ bottom:-30%; right:6%; width:18%; height:70%; background:var(--gold); transform:skewX(-12deg); }
  .c3-hero .wrap{ position:relative; z-index:2; padding:84px 32px 90px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:50px; align-items:center; }
  .c3-hero .inner{ max-width:620px; }
  .c3-hero .chip{ background:rgba(255,255,255,.14); color:#fff; white-space:nowrap; }
  .c3-hero h1{ color:#fff; font-size:60px; line-height:1.02; margin:22px 0 22px; }
  .c3-hero h1 b{ color:var(--gold); font-weight:600; }
  .c3-hero p{ font-size:20px; color:rgba(255,255,255,.88); max-width:46ch; margin-bottom:30px; }
  .c3-hero .row{ display:flex; gap:14px; flex-wrap:wrap; }

  /* hero image figure + 3 blend treatments */
  .c3-herofig{ position:relative; justify-self:center; width:100%; max-width:320px; aspect-ratio:4/5; }
  .c3-herofig .fig-clip{ position:relative; z-index:1; width:100%; height:100%; overflow:hidden; border-radius:22px; background:var(--mint-200) center/cover no-repeat; background-image:url('community-hero.png'); }
  .c3-herofig image-slot{ display:block; width:100%; height:100%; }
  .fig-deco{ display:none; position:absolute; z-index:0; }
  .fig-chip{ position:absolute; z-index:4; background:#fff; border-radius:14px; box-shadow:var(--shadow-md); padding:13px 17px; display:none; left:-22px; bottom:28px; }
  .fig-chip b{ font-family:var(--serif); font-size:25px; color:var(--navy); display:block; line-height:1; }
  .fig-chip span{ font-size:11.5px; color:var(--ink-faint); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

  /* A - floating framed photo */
  [data-hero-opt="a"] .fig-clip{ border:7px solid #fff; box-shadow:0 36px 80px -28px rgba(0,0,0,.6); }
  [data-hero-opt="a"] .fig-chip{ display:block; }

  /* B - soft feathered blend into the color blocks */
  [data-hero-opt="b"] .fig-clip{ -webkit-mask:radial-gradient(142% 135% at 55% 42%, #000 71%, transparent 100%); mask:radial-gradient(142% 135% at 55% 42%, #000 71%, transparent 100%); }
  [data-hero-opt="b"] .fig-clip::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(155deg, rgba(24,142,133,.30) 0%, transparent 42%, rgba(20,58,92,.62) 100%); mix-blend-mode:multiply; }

  /* C - arch with offset gold ring */
  [data-hero-opt="c"] .c3-herofig{ max-width:290px; }
  [data-hero-opt="c"] .fig-clip{ border-radius:178px 178px 22px 22px; box-shadow:0 30px 64px -30px rgba(0,0,0,.55); }
  [data-hero-opt="c"] .fig-deco{ display:block; inset:20px -20px -20px 20px; border:3px solid var(--gold); border-radius:178px 178px 22px 22px; }
  [data-hero-opt="c"] .fig-chip{ display:block; left:auto; right:-18px; bottom:34px; }

  section.block{ padding:80px 0; }
  .sec-head{ text-align:center; max-width:660px; margin:0 auto 48px; }
  .sec-head h2{ font-size:42px; margin:12px 0 12px; }
  .sec-head p{ color:var(--ink-soft); font-size:18px; }

  /* about + mission */
  .c3-about{ background:var(--paper); }
  .c3-about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
  .c3-about .lead h2{ font-size:38px; line-height:1.1; margin:14px 0 20px; }
  .c3-about .lead h2 em{ font-style:italic; color:var(--teal); }
  .c3-about .lead p{ font-size:18.5px; line-height:1.6; color:var(--ink-soft); }
  .c3-mv{ display:flex; flex-direction:column; gap:18px; }
  .c3-mv .card{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:30px 32px; }
  .c3-mv .card .lbl{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.18em; text-transform:uppercase; display:block; margin-bottom:10px; }
  .c3-mv .card p{ font-family:var(--serif); font-size:23px; line-height:1.35; font-weight:500; }
  .c3-mv .mission{ background:var(--navy); color:#fff; }
  .c3-mv .mission .lbl{ color:var(--gold); }
  .c3-mv .mission p b{ color:var(--gold); font-weight:500; }
  .c3-mv .vision{ background:var(--mint); color:var(--navy); }
  .c3-mv .vision .lbl{ color:var(--teal); }
  .c3-mv .card .corner{ position:absolute; top:-30px; right:-30px; width:120px; height:120px; transform:rotate(20deg); opacity:.5; }

  /* allocation - where your gift goes */
  .c3-alloc{ background:var(--paper); }
  .c3-alloc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
  .c3-alloc .intro h2{ font-size:40px; margin:12px 0 16px; }
  .c3-alloc .intro h2 em{ font-style:italic; color:var(--teal); }
  .c3-alloc .intro p{ font-size:18px; color:var(--ink-soft); }
  .c3-bars{ display:flex; flex-direction:column; gap:22px; }
  .c3-bar .top{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:8px; font-size:16px; color:var(--navy); }
  .c3-bar .top span:last-child{ color:var(--teal); }
  .c3-track{ height:14px; border-radius:99px; background:var(--mint); overflow:hidden; }
  .c3-fill{ height:100%; border-radius:99px; width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1); }

  /* testimonial WALL (masonry via columns) */
  .c3-wall{ columns:3; column-gap:22px; }
  .c3-wall .card{ break-inside:avoid; margin-bottom:22px; border-radius:var(--r-md); padding:28px 26px; }
  .c3-wall .card p{ font-family:var(--serif); font-size:20px; line-height:1.4; margin-bottom:18px; }
  .c3-wall .who{ display:flex; align-items:center; gap:12px; }
  .c3-wall .who .ph{ width:42px; height:42px; border-radius:50%; flex:none; }
  .c3-wall .who b{ display:block; font-size:14.5px; }
  .c3-wall .who span{ font-size:13px; opacity:.7; }
  .c3-wall .v-mint{ background:var(--mint); }
  .c3-wall .v-mint b,.c3-wall .v-mint p{ color:var(--navy); }
  .c3-wall .v-navy{ background:var(--navy); color:#fff; } .c3-wall .v-navy p,.c3-wall .v-navy b{ color:#fff; } .c3-wall .v-navy .who .ph{ background:rgba(255,255,255,.16); }
  .c3-wall .v-cream{ background:var(--cream); } .c3-wall .v-cream p,.c3-wall .v-cream b{ color:var(--navy); }
  .c3-wall .v-teal{ background:var(--teal); color:#fff; } .c3-wall .v-teal p,.c3-wall .v-teal b{ color:#fff; } .c3-wall .v-teal .who .ph{ background:rgba(255,255,255,.2); }
  .c3-wall .v-gold{ background:var(--gold); } .c3-wall .v-gold p,.c3-wall .v-gold b{ color:var(--navy-900); }
  .c3-wall .photo{ padding:0; overflow:hidden; }
  .c3-wall .photo .ph{ width:100%; height:230px; border-radius:0; }

  /* pillars as colorful tiles */
  .c3-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
  .c3-tile{ padding:40px 28px; color:#fff; }
  .c3-tile h3{ color:#fff; font-size:23px; margin:14px 0 8px; }
  .c3-tile p{ font-size:14.5px; color:rgba(255,255,255,.9); }
  .c3-tile.t1{ background:var(--teal); } .c3-tile.t2{ background:var(--green); } .c3-tile.t3{ background:var(--navy); } .c3-tile.t4{ background:var(--gold); } .c3-tile.t4 h3,.c3-tile.t4 p{ color:var(--navy-900); }
  .c3-tile .ic{ width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center }

  /* impact band */
  .c3-impact{ background:var(--cream); }
  .c3-impact .inner{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; text-align:center; }
  .c3-impact .s b{ font-family:var(--serif); font-size:58px; color:var(--teal); line-height:1; display:block; }
  .c3-impact .s span{ font-size:15px; color:var(--ink-soft); display:block; margin-top:10px; }

  /* donor band */
  .c3-donor{ background:var(--navy); color:#fff; }
  .c3-donor h2{ color:#fff; }
  .c3-donor .sec-head p{ color:rgba(255,255,255,.82); }
  .c3-donor .eyebrow{ color:var(--gold); }
  .c3-names{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:900px; margin:0 auto 32px; }
  .c3-names .n{ font-size:16px; font-weight:600; color:rgba(255,255,255,.9); padding:9px 18px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); white-space:nowrap; }
  .c3-names .n.lead{ background:var(--gold); color:var(--navy-900); border-color:var(--gold); }
  .c3-donor .honor-roll-preview{ margin:0 auto 18px; max-width:900px; text-align:center; font-size:14px; color:rgba(255,255,255,.7); font-style:italic; }
  .c3-donor [hidden]{ display:none; }
  .c3-donor .center{ text-align:center; }

  .c3-foot{ background:var(--navy-900); color:rgba(255,255,255,.7); padding:50px 0 34px; text-align:center; }
  .c3-foot .brandlock{ justify-content:center; } .c3-foot .brandlock .name{ color:#fff; }
  .c3-foot p{ font-size:14px; margin:16px auto 0; max-width:50ch; }
  .c3-foot .links{ display:flex; gap:24px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
  .c3-foot .links a{ font-size:14px; color:rgba(255,255,255,.7); } .c3-foot .links a:hover{ color:var(--gold); }

  @media(max-width:900px){
    .c3-wall{ columns:2; } .c3-tiles{ grid-template-columns:1fr 1fr; } .c3-impact .inner{ grid-template-columns:1fr 1fr; } .c3-impact .s:last-child:nth-child(odd){ grid-column:1 / -1; }
    .c3-hero h1{ font-size:46px; } .c3-nav nav{ display:none; }
    .c3-about-grid,.c3-alloc-grid{ grid-template-columns:1fr; }
    .c3-hero .wrap{ grid-template-columns:1fr; } .c3-herofig{ max-width:320px; justify-self:start; margin-top:6px; }
  }