Embed

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600&display=swap" rel="stylesheet">

<style>
  /* scope everything to the intro only */
  .sp-intro {
    --gold:#DFB33E; --ink:#ECECF1;
    font-family:'Syne',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); background:transparent; padding:48px 40px; position:relative; overflow:clip;
  }

  /* subtle animated gold mist (transparent backdrop) */
  .sp-intro::before {
    content:""; position:absolute; inset:-20% -10% auto -10%; height:46%;
    background:
      radial-gradient(45% 60% at 15% 30%, rgba(223,179,62,.22), transparent 55%),
      radial-gradient(40% 50% at 85% 20%, rgba(223,179,62,.12), transparent 60%);
    filter:blur(16px); opacity:.75; animation:floatGlow 8s ease-in-out infinite alternate; pointer-events:none;
  }

  /* layout: SAME as before (2 columns) */
  .sp-intro-grid {
    display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  }

  /* left column */
  .sp-kicker {
    display:inline-flex; align-items:center; gap:.6rem;
    font-size:12px; text-transform:uppercase; letter-spacing:.22em; color:var(--gold);
    opacity:0; transform:translateY(8px); animation:fadeUp .7s .05s forwards;
  }
  .sp-kicker .dot {
    width:9px; height:9px; border-radius:999px; background:var(--gold);
    box-shadow:0 0 0 6px rgba(223,179,62,.18), 0 0 24px rgba(223,179,62,.35);
    animation:pulse 2.4s ease-in-out infinite;
  }

  .sp-title {
    font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1.2px; line-height:1.02;
    font-size:clamp(44px,8vw,96px); margin:.3rem 0 .6rem; opacity:0; transform:translateY(14px);
    animation:fadeUp .8s .12s forwards; position:relative;
  }
  .sp-title::after {
    content:""; position:absolute; left:0; bottom:-8px; height:3px; width:0%;
    background:linear-gradient(90deg, var(--gold), rgba(223,179,62,0));
    border-radius:3px; animation:drawLine 1.2s .45s ease forwards;
  }

  .sp-lead {
    font-size:clamp(15px,2.1vw,19px); opacity:0; animation:fadeIn 1s .25s forwards; max-width:64ch;
  }

  .sp-actions {
    display:flex; gap:.7rem; flex-wrap:wrap; margin-top:18px;
    opacity:0; animation:fadeIn .9s .38s forwards;
  }
  .sp-btn {
    display:inline-block; padding:11px 18px; border-radius:999px; text-decoration:none; font-weight:600;
    border:1px solid rgba(223,179,62,.5); color:var(--ink);
    transition:transform .2s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
    position:relative; overflow:hidden;
  }
  .sp-btn.primary { background:rgba(223,179,62,.18); }
  .sp-btn:hover { background:#DFB33E; color:#1d1f0e; box-shadow:0 10px 30px rgba(223,179,62,.35); transform:translateY(-2px); }
  .sp-btn::after {
    content:""; position:absolute; inset:0 0 0 -30%;
    background:linear-gradient(120deg,transparent 0%, rgba(255,255,255,.35) 25%, transparent 50%);
    transform:translateX(-100%); transition:transform .6s ease;
  }
  .sp-btn:hover::after { transform:translateX(120%); }

  /* RIGHT COLUMN: slideshow (replaces old decorative frame) */
  .sp-slideshow {
    border-radius:22px; position:relative; overflow:hidden; aspect-ratio:16/9;
    border:1px solid rgba(223,179,62,.35);
    box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(223,179,62,.08);
    opacity:0; transform:scale(.985); animation:fadeInScale .9s .28s forwards;
  }
  .sp-slideshow img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
    animation:fadeCycle 15s infinite;
  }
  .sp-slideshow img:nth-child(1){ animation-delay:0s; }
  .sp-slideshow img:nth-child(2){ animation-delay:5s; }
  .sp-slideshow img:nth-child(3){ animation-delay:10s; }

  /* optional: tiny caption badge in corner */
  .sp-cap {
    position:absolute; left:12px; bottom:10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(223,179,62,.95); background:rgba(0,0,0,.35); padding:6px 10px; border-radius:999px;
    border:1px solid rgba(223,179,62,.35);
  }

  /* keyframes */
  @keyframes fadeCycle{
    0%{opacity:0}
    6%{opacity:1}
    28%{opacity:1}
    34%{opacity:0}
    100%{opacity:0}
  }
  @keyframes fadeUp{ to{opacity:1; transform:translateY(0)} }
  @keyframes fadeIn{ to{opacity:1} }
  @keyframes fadeInScale{ to{opacity:1; transform:scale(1)} }
  @keyframes drawLine{ to{width:64%} }
  @keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
  @keyframes floatGlow{ from{transform:translateY(0)} to{transform:translateY(6px)} }

  /* responsive */
  @media (max-width: 860px){
    .sp-intro-grid { grid-template-columns:1fr; }
    .sp-slideshow { aspect-ratio:4/3; }
    .sp-intro { padding:40px 24px; }
  }
</style>

<div class="sp-intro" role="region" aria-label="Spit and Paint intro">
  <div class="sp-intro-grid">
    
    <div>
      <div class="sp-kicker"><span class="dot" aria-hidden="true"></span> Creative Healing Initiative</div>
      <h1 class="sp-title">Spit and Paint™</h1>
      <p class="sp-lead"> <br>Spit and Paint™ is a creative healing initiative that uses art, spoken word, and storytelling as tools for access to vital resources, trauma recovery, and community connection.</p>
      <div class="sp-actions">
        <a class="sp-btn primary" href="#programs">Explore Programs</a>
        <a class="sp-btn" href="#impact">See the Impact</a>
      </div>
    </div>

    
    <div class="sp-slideshow" aria-label="Program images slideshow">
      <img src="https://i.postimg.cc/CxF5xCZb/sprint-1.png" alt="Interdisciplinary: literary and visual arts">
      <img src="https://i.postimg.cc/Wb7pCD9z/sprint-2.png" alt="Student & Family SEL: safe space with live DJ">
      <img src="https://i.postimg.cc/HLrpr6T8/sprint-3.png" alt="Facilitated by an International Artist: Mr. Wilford Charles">
      <div class="sp-cap">Featured Programs</div>
    </div>
  </div>
</div>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />


<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600&display=swap" rel="stylesheet">

<title>Programs Section</title>
<style>
  :root{
    /* Set this to your actual fixed header height */
    --header-h: 140px; /* try 120–160 if needed */
  }

  body{
    margin:0;
    background:#0A0A0B;
  }

  .prog-wrap{
    --gold:#DFB33E; --ink:#ECECF1;
    font-family:'Syne',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); background:transparent;

    /* Add some top padding that scales with header height */
    padding: calc(40px + (var(--header-h) * 0.20)) 40px 64px;
    position:relative; overflow:clip;

    /* When linking to #programs, keep the section from sliding under the header */
    scroll-margin-top: calc(var(--header-h) + 40px);
  }
  .prog-wrap::after{
    content:""; position:absolute; left:0; right:0; bottom:-10px; height:180px; pointer-events:none;
    background:radial-gradient(60% 80% at 50% 100%, rgba(223,179,62,.14), transparent 60%);
    filter:blur(18px);
  }

  .prog-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:34px; align-items:start; }

  /* Sticky rail with larger top offset + higher z-index (desktop only) */
  .prog-rail{
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self:start;
    z-index: 10; /* keep above page header */
  }
  .prog-kicker{
    display:inline-flex; gap:.6rem; align-items:center;
    font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  }
  .prog-kicker .dot{ width:9px;height:9px;border-radius:999px;background:var(--gold);
    box-shadow:0 0 0 6px rgba(223,179,62,.18), 0 0 24px rgba(223,179,62,.35); }
  .prog-title{
    font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1.2px;
    font-size:clamp(36px,5.4vw,64px); line-height:1; margin:.5rem 0 .35rem;
    background:linear-gradient(90deg, rgba(223,179,62,1), rgba(223,179,62,.35));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .prog-sub{ margin:0; color:var(--ink); opacity:.9 }

  .panels{ position:relative; }
  .panels::before{
    content:""; position:absolute; left:16px; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg, rgba(223,179,62,.0), rgba(223,179,62,.9), rgba(223,179,62,.0));
    filter:drop-shadow(0 0 6px rgba(223,179,62,.45));
  }

  .panel{
    position:relative; margin:0 0 28px 0; border-radius:20px; overflow:hidden;
    background:transparent; border:1px solid rgba(223,179,62,.34);
    box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(223,179,62,.06);
    transform:translateY(18px); opacity:0; animation:rise .8s forwards;
    transition:transform .45s ease;
  }
  .panel:nth-child(1){ animation-delay:.05s }
  .panel:nth-child(2){ animation-delay:.15s }
  .panel:nth-child(3){ animation-delay:.25s }

  .panel-inner{
    display:grid; grid-template-columns: minmax(280px,1.1fr) 1fr; gap:18px; align-items:stretch;
  }
  .panel.flip .panel-inner{ grid-template-columns: 1fr minmax(280px,1.1fr); }
  .panel.flip .media{ order:2 } .panel.flip .copy{ order:1 }

  .media{ position:relative; overflow:hidden; min-height:240px; }
  .media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:scale(1.02); transition:transform .8s ease;
  }
  .panel:hover .media img{ transform:scale(1.08); }

  /* Show the RIGHT side of photos 1 & 2 */
  .panel:nth-child(1) .media img,
  .panel:nth-child(2) .media img {
    object-position: right center;
  }

  .media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.35) 100%);
    pointer-events:none;
  }

  .pill{
    position:absolute; left:12px; top:12px;
    display:inline-block; padding:.35rem .7rem; border-radius:999px;
    background:rgba(223,179,62,.18); border:1px solid rgba(223,179,62,.35);
    color:var(--ink); font-weight:600; font-size:12px; backdrop-filter:saturate(140%) blur(2px);
  }

  .copy{ display:grid; grid-template-columns: 74px 1fr; gap:12px; align-content:center; padding:16px; }
  .ord{
    position:relative; display:flex; align-items:flex-start; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:42px; letter-spacing:1px; color:var(--gold);
  }
  /* Remove the small dot */
  .ord::after{ display:none; }

  .copy h3{
    font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1px; font-size:28px; margin:2px 0 6px;
  }
  .copy p{ margin:0 0 8px 0; font-size:15px; }
  .muted{ opacity:.9 }

  .panel::before{
    content:""; position:absolute; inset:-2px; border-radius:22px; z-index:-1;
    background:conic-gradient(from 0deg, rgba(223,179,62,.0), rgba(223,179,62,.35), rgba(223,179,62,.0) 70%);
    filter:blur(6px); animation:spin 6s linear infinite;
  }

  .panel:hover{ transform:translateY(-6px) rotateX(2deg) rotateY(-2deg); }
  .copy .sweep{ display:block; height:1px; width:0; background:linear-gradient(90deg, rgba(223,179,62,.0), rgba(223,179,62,1), rgba(223,179,62,.0)); transition:width .5s ease; }
  .panel:hover .copy .sweep{ width:100%; }

  @keyframes rise{ to{ opacity:1; transform:translateY(0) } }
  @keyframes spin{ to{ transform:rotate(360deg) } }

  /* Tablet */
  @media (max-width: 1100px){
    .panel-inner{ grid-template-columns: 1fr; }
    .panel.flip .panel-inner{ grid-template-columns: 1fr; }
    .media{ min-height:220px; }
    .copy{ grid-template-columns:64px 1fr; }
  }

  /* Mobile: stack rail above panels + unstick + allow normal scrolling */
  @media (max-width:720px){
    .prog-wrap{ padding: calc(28px + (var(--header-h) * 0.10)) 24px 48px; overflow:visible; }
    .prog-grid{ grid-template-columns: 1fr; gap:22px; }
    .prog-rail{ position:static; top:auto; z-index:auto; }
    .panels::before{ left:12px; }
    .copy{ grid-template-columns:56px 1fr; padding:14px; }
    .ord{ font-size:36px; }
  }
</style>
</head>
<body>

<section class="prog-wrap" id="programs" aria-label="Programs">
  <div class="prog-grid">
    
    <aside class="prog-rail">
      <div class="prog-kicker"><span class="dot" aria-hidden="true"></span> Programs</div>
      <h2 class="prog-title">Explore what we do</h2>
      <p class="prog-sub">Three creative pathways that open expression, connection, and recovery.</p>
    </aside>

    
    <div class="panels">
      
      <article class="panel">
        <div class="panel-inner">
          <div class="media">
            <img src="https://i.postimg.cc/CxF5xCZb/sprint-1.png" alt="Interdisciplinary: literary and visual arts">
            <span class="pill">Interdisciplinary</span>
          </div>
          <div class="copy">
            <div class="ord">01</div>
            <div>
              <h3>It’s an exploration of both the literary and visual arts!</h3>
              <p class="muted">Writing, spoken word, painting, collage—multiple modes to open up expression and healing.</p>
              <span class="sweep" aria-hidden="true"></span>
            </div>
          </div>
        </div>
      </article>

      
      <article class="panel flip">
        <div class="panel-inner">
          <div class="media">
            <img src="https://i.postimg.cc/Wb7pCD9z/sprint-2.png" alt="Student & Family SEL with live DJ">
            <span class="pill">Student &amp; Family SEL</span>
          </div>
          <div class="copy">
            <div class="ord">02</div>
            <div>
              <h3>A safe space is provided to self-express while listening to a live DJ.</h3>
              <p class="muted">Participants create, share, and reflect in a welcoming, music-supported environment.</p>
              <span class="sweep" aria-hidden="true"></span>
            </div>
          </div>
        </div>
      </article>

      
      <article class="panel">
        <div class="panel-inner">
          <div class="media">
            <img src="https://i.postimg.cc/HLrpr6T8/sprint-3.png" alt="Facilitated by an International Artist: Mr. Wilford Charles">
            <span class="pill">Facilitated by an International Artist</span>
          </div>
          <div class="copy">
            <div class="ord">03</div>
            <div>
              <h3>Mr. Wilford Charles champions creativity for all.</h3>
              <p class="muted">International DJ, music artist, and clothing designer guiding immersive, community-building sessions.</p>
              <span class="sweep" aria-hidden="true"></span>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

</body>
</html>

Abstract design with layered green and black squares creating a three-dimensional effect.

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root { --header-h: 140px; }

  /* ----- Keyframes ----- */
  @keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
  @keyframes rise { to { opacity:1; transform:translateY(0) } }
  @keyframes lineDraw { to { stroke-dashoffset: 0; opacity:1 } }
  @keyframes softGlow { 0%,100%{ filter: drop-shadow(0 0 0 rgba(223,179,62,.0)); } 50%{ filter: drop-shadow(0 0 10px rgba(223,179,62,.35)); } }
  @keyframes shimmer { 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }

  /* ----- Wrapper with animated gradient bg ----- */
  .why-wrap{
    --gold:#DFB33E; --ink:#ECECF1;
    font-family:'Syne',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); background:
      linear-gradient(135deg,
        rgba(223,179,62,.15),
        rgba(29,31,14,.40),
        rgba(223,179,62,.10),
        rgba(29,31,14,.30));
    background-size:300% 300%;
    animation:gradientShift 15s ease infinite;
    border-radius:20px;

    padding: calc(36px + (var(--header-h) * 0.15)) 40px 64px;
    position:relative; overflow:clip;
    scroll-margin-top: calc(var(--header-h) + 40px);
  }

  .why-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; }

  /* ----- Left text ----- */
  .why-kicker{
    display:inline-flex; gap:.6rem; align-items:center;
    font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  }
  .why-kicker .dot{ width:9px; height:9px; border-radius:999px; background:var(--gold);
    box-shadow:0 0 0 6px rgba(223,179,62,.18), 0 0 24px rgba(223,179,62,.35); }

  .why-title{
    font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1.2px;
    font-size:clamp(34px,5.6vw,68px); line-height:1.02; margin:.5rem 0 .5rem;
    background:linear-gradient(90deg, rgba(223,179,62,1), rgba(223,179,62,.35));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .why-lead, .why-sub{ font-size:clamp(15px,2.1vw,19px); opacity:.95; max-width:64ch; }
  .why-sub{ margin-top:10px; }

  /* ----- Cards ----- */
  .evidence{ display:grid; gap:16px; }

  .card{
    position:relative; border-radius:18px; overflow:hidden;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(223,179,62,.34);
    box-shadow:0 12px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(223,179,62,.06);
    padding:16px;
    transform:translateY(18px); opacity:0; animation:rise .8s forwards;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .card:nth-child(1){ animation-delay:.05s }
  .card:nth-child(2){ animation-delay:.15s }
  .card:nth-child(3){ animation-delay:.25s }

  .card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(223,179,62,.15);
  }

  /* Hover shimmer on titles */
  .card h4{
    display:flex; align-items:center; gap:10px;
    font-size:18px; font-weight:600; margin:0 0 8px; color:transparent;
    background-image:linear-gradient(90deg, rgba(223,179,62,1) 0%, rgba(255,255,255,.55) 50%, rgba(223,179,62,1) 100%);
    background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  }
  .card:hover h4{ animation:shimmer 1.2s ease forwards; }

  .card p{ margin:0; font-size:15px; opacity:.9; }

  /* Icons — line draw + soft glow, and replay on hover */
  .icon{ width:28px; height:28px; flex:0 0 28px; opacity:.9; animation:softGlow 3.2s ease-in-out infinite; }
  .icon *{
    fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:120; stroke-dashoffset:120; opacity:.9; animation:lineDraw 1.1s ease forwards;
  }
  .card:nth-child(1) .icon *{ animation-delay:.15s }
  .card:nth-child(2) .icon *{ animation-delay:.25s }
  .card:nth-child(3) .icon *{ animation-delay:.35s }
  /* Replay the drawing when hovering */
  .card:hover .icon *{
    stroke-dasharray:120; stroke-dashoffset:120; animation:lineDraw 1.1s ease forwards;
  }

  @media (max-width:900px){
    .why-grid{ grid-template-columns:1fr; }
    .why-wrap{ padding: calc(28px + (var(--header-h) * 0.10)) 24px 56px; }
  }
</style>

<section class="why-wrap" id="impact" aria-label="Why It Matters">
  <div class="why-grid">
    
    <div>
      <div class="why-kicker"><span class="dot" aria-hidden="true"></span> Why It Matters</div>
      <h2 class="why-title">Healing through art, voice, and story</h2>
      <p class="why-lead">
        Many returning citizens, individuals in recovery, and at-risk youth struggle to express emotions,
        process trauma, and rebuild confidence.
      </p>
      <p class="why-sub">
        Art is proven to reduce stress, improve mental health, and foster self-expression.
      </p>
    </div>

    
    <div class="evidence">
      
      <div class="card">
        <h4>
          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 21s-6.5-4.6-9-8.1C1.1 11 .8 8.6 2.3 7.1 3.7 5.7 6 5.7 7.4 7.1L12 11.6l4.6-4.5c1.4-1.4 3.7-1.4 5.1 0 1.5 1.5 1.2 3.9-.7 5.8C18.5 16.4 12 21 12 21"/>
            <path d="M3 16c2-.8 3.5-.8 5.5 0s3.5.8 5.5 0 3.5-.8 5.5 0"/>
          </svg>
          Emotional Release
        </h4>
        <p>Art gives participants a safe way to express feelings that are hard to put into words.</p>
      </div>

      
      <div class="card">
        <h4>
          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="9" cy="12" r="5"/>
            <circle cx="15" cy="12" r="5"/>
          </svg>
          Community Connection
        </h4>
        <p>Creative spaces bring people together, building trust and shared understanding.</p>
      </div>

      
      <div class="card">
        <h4>
          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M3 17l6-6 4 4 6-8"/>
            <polyline points="16,7 19,7 19,10"/>
          </svg>
          Confidence &amp; Growth
        </h4>
        <p>Completing and sharing creative work boosts self-esteem and motivation.</p>
      </div>
    </div>
  </div>
</section>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>

<style>
  :root{
    --gold:#DFB33E;
    --white:#ffffff;
  }
  .footer{
    font-family:"Poppins",sans-serif;
    background:transparent;
    color:var(--white);
    padding:40px 14px 24px; /* slightly smaller side margins */
  }
  .footer a{
    color:var(--gold);
    text-decoration:none;
  }
  .footer a:hover{ text-decoration:underline; }

  /* Logo only on top */
  .footer-head{
    text-align:center;
    margin-bottom:46px;
  }
  .footer-head img{
    max-width:150px;
    height:auto;
    display:inline-block;
  }

  /* 3 columns: description, contact, connect */
  .footer-cols{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:30px 48px;
    justify-content:center;
    align-items:flex-start;
    text-align:left;
  }
  .footer-col{
    flex:1 1 260px;
    min-width:240px;
    padding:0 6px;
  }

  /* Description column */
  .gold-seal{
    font-size:14.5px;
    line-height:1.6;
    margin:0;
  }
  .gold-seal .nonprofit-link{
    color:var(--gold);
    text-decoration:underline;
    word-break:break-all;
  }

  /* Contact & Connect */
  .footer-col h4{
    margin:0 0 12px;
    font-size:16px;
    font-weight:600;
    color:var(--gold);
    letter-spacing:.4px;
  }
  .footer-col p{
    margin:0 0 8px;
    font-size:14.5px;
    line-height:1.6;
  }
  .socials{
    margin-top:6px;
  }
  .socials a{
    margin-right:12px;
    font-size:20px;
  }

  @media(max-width:700px){
    .footer{ padding:34px 12px 18px; }
  }
</style>

<footer class="footer" role="contentinfo">

  
  <div class="footer-head">
    <img src="https://i.postimg.cc/Gp0299kq/26v11ml-XKn3z-Wvn-Swo-NAy-PHMab-Ezqz-Mv-Ykj-E4w-V23p-Fg-YCPp-IYtrdul0-EEHvrp-Q1.png" alt="Winning Ways CT Logo">
  </div>

  
  <div class="footer-cols">

    
    <div class="footer-col">
      <p class="gold-seal">
        We’ve earned our Gold Seal of Transparency with @CandidDotOrg! Get updates on our impact through our
        <a class="nonprofit-link" href="https://www.guidestar.org/profile/81-4056668" target="_blank" rel="noopener">NonprofitProfile</a>.
      </p>
    </div>

    
    <div class="footer-col contact">
      <h4>Contact</h4>
      <p>279 N. Main St<br>Branford, CT 06405</p>
      <p>Call Us Today: <a href="tel:+18608088001">+1 203 608 4231</a></p>
      <p>Email: <a href="mailto:info@winningwaysct.org">info@winningwaysct.org</a></p>
      <p>EIN: 81-4056668</p>
    </div>

    
    <div class="footer-col connect">
      <h4>Connect</h4>
      <p>Follow our journey and see how we're empowering lives in Connecticut.</p>
      <div class="socials" aria-label="social media">
        <a href="https://x.com/winningwaysCT" target="_blank" rel="noopener" aria-label="X (formerly Twitter)"><i class="fab fa-x-twitter"></i></a>
        <a href="https://www.facebook.com/winningwaysct" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
        <a href="https://www.instagram.com/winningwaysinc" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
        <a href="https://www.linkedin.com/company/winning-ways-inc-of-connecticut" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>

  </div>
</footer>

Abstract gradient design with overlapping green squares on a dark background.

Winning Ways Inc

onprofit organization based in Branford, Connecticut. Our mission is to expand access to vital resources for individuals impacted by incarceration and recovery, using lived experience, evidence-based practices, and a family-centered approach to promote empowerment and healing.

We are currently seeking to redesign our website, which is built on WordPress, to better reflect the depth and impact of our work. Our goal is to create a captivating, professional, and mission-driven online presence that supports our outreach and engagement goals with both business-to-business (B2B) and business-to-consumer (B2C) audiences.