@font-face {
        font-family: Magnel; /* set name */
        src: url(assets/fonts/Magnel.otf); /* url of the font */

    }


  :root {
    --peach: #f7ded2;
    --peach-deep: #f0c9b8;
    --cream: #fffaf5;
    --white: #ffffff;
    --ink: #4a2e2e;
    --ink-muted: #8a6f63;
    --mustard: #eeab3f;
    --rust: #d76a4a;
    --shadow: 0 10px 30px rgba(74,46,46,.08);
    --font-display: 'Magnel', serif;
    --font-body: 'Nunito', sans-serif;
  }

  

  body{
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--ink-muted);
  }

  a:hover {
    color: var(--ink) !important;
  }

  /* --- nav --- */
  .site-nav {
    background: var(--peach);
    padding: 1.1rem 0;
    position: sticky;
  }
  .brand-mark{
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ink);
  }
  .site-nav .nav-link{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink) !important;
    padding: .4rem .9rem !important;
    opacity: .75;
  }
  .site-nav .nav-link:hover { 
    opacity: 1; 
  }
  .btn-playful {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .88rem;
    color: var(--white);
    background: var(--rust);
    border: none;
    border-radius: 30px;
    padding: .55rem 1.3rem;
    transition: transform .15s ease, background .2s ease;
    display: inline-block;
    text-decoration: none;
  }
  .btn-playful:hover { 
    background: var(--rust); 
    transform: translateY(-2px); 
    color: var(--white); 
  }

  /* --- hero --- */
  .hero {
    background: linear-gradient(160deg, var(--peach) 0%, var(--peach-deep) 100%);
    padding: 4.5rem 0 8rem;
    position: relative;
    overflow: hidden;
  }
  .hero-avatar {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .hero-avatar img {
    max-width: 175% !important;
    margin-top: 5rem;
  }

  .hero h1{
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.03;
    margin-bottom: 1.1rem;
  }
  .hero h1 .accent { 
    color: var(--rust); 
  }
  .hero-text {
    font-size: 1.15rem;
    color: var(--ink);
    opacity: .8;
    max-width: 60ch;
    line-height: 1.6;
  }
  .hero-meta {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
  }
  .hero-meta .chip {
    font-weight: 700;
    font-size: .82rem;
    background: var(--white);
    border-radius: 20px;
    padding: .45rem 1rem;
    box-shadow: var(--shadow);
  }

  .wave {
    position: absolute;
    bottom: -1px; left: 0; width: 100%;
    line-height: 0;
  }
  .wave svg { 
    width: 100%; 
    height: 90px; 
    display:block; 
  }

  /* --- section label --- */
  .section-label {
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
  }
  .section-label .dot { 
    color: var(--mustard); 
  }

  /* --- case studies --- */
  .case-study { 
    padding: 4.5rem 0; 
  }
  .case-thumb {
    aspect-ratio: 4/3;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    background-image: url("assets/images/VF_rebrand_website_t.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }


  .case-thumb .thumb-tag {
    font-weight: 800;
    font-size: .78rem;
    color: var(--ink);
    background: rgba(255,255,255,.85);
    padding: .4rem .85rem;
    border-radius: 20px;
    position: absolute;
  }
  
  .case-study h2{
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: .35rem;
  }
  .case-study .client {
    font-weight: 800;
    font-size: .88rem;
    color: var(--rust);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1.1rem;
  }
  .case-study p { 
    color: var(--ink-muted); 
    line-height: 1.7; 
    font-size: 1.02rem; 
}
  .case-meta-grid {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 2px dashed var(--peach-deep);
  }
  .case-meta-grid h3 {
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin-bottom: .3rem;
  }
  .case-meta-grid p { 
    margin: 0; 
    font-weight: 700; 
    font-size: .92rem; 
}

  .roles {
    width: 33%;
  }

  .led {
    width: 50%;
  }

  /* --- work grid --- */
  .work-section { 
    background: var(--white); 
    padding: 5rem 0; 
}

  .filter-pills { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.6rem; 
    margin-bottom: 3rem; 
}
  .filter-pill {
    font-weight: 800;
    font-size: .82rem;
    background: var(--cream);
    border: none;
    color: var(--ink);
    padding: .55rem 1.15rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s ease;
  }
  .filter-pill:hover { 
    background: var(--peach); 
}
  .filter-pill.active { 
    background: var(--rust); 
    color: var(--white); 
}

  .project-card { 
    margin-bottom: 2.25rem; 
    transition: opacity .25s ease, transform .2s ease; 
}
  .project-card.hidden { 
    display:none; 
}
  .project-card:hover .project-thumb { 
    transform: translateY(-4px); 
}

  .project-thumb {
    aspect-ratio: 4/3;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: .9rem;
    display:flex;
    align-items:flex-end;
    padding: 1rem;
    box-shadow: var(--shadow);
    transition: transform .2s ease;
  }
  .project-thumb .thumb-cat {
    font-weight: 800;
    font-size: .72rem;
    background: rgba(255,255,255,.88);
    padding: .35rem .7rem;
    border-radius: 16px;
  }
  .tone-1 { 
    background-image: url("assets/images/MFN_rebrand_t.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
}
  .tone-2 { 
    background-image: url("assets/images/SF_strategicfest_t.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  .tone-3 { 
    background-image: url("assets/images/RPP_mailer_t.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  .tone-4 { 
    background-image: url("assets/images/SF_rebrand_t.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  .tone-5 { 
    background-image: url("assets/images/VF_vertice_t.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  .tone-6 { 
    background-image: url("assets/images/VF_FOMC_t.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

  .project-card h3 {
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: .1rem;
  }
  .project-card .client-line {
    font-size: .88rem;
    color: var(--ink-muted);
    font-weight: 600;
  }

  /* --- about --- */
  .about-section { 
    padding: 5rem 0; 
}
  .about-card {
    background: var(--peach);
    border-radius: 28px;
    padding: 3rem;
  }
  .about-card p {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 0;
  }
  .about-card strong { 
    color: var(--rust); 
}

  /* --- footer --- */
  .site-footer {
    background: var(--peach);
    padding: 2.5rem 0;
    font-weight: 700;
    font-size: .88rem;
  }
  .site-footer a { 
    text-decoration: none; 
}
  .site-footer a:hover { 
    color: var(--rust); 
}

  /* --- gallery --- */
  .project-card:focus-visible .project-thumb, .open-gallery:focus-visible { 
    outline:3px solid var(--rust); 
    outline-offset:3px; 
}
  #gallery .modal-content { 
    background:var(--cream); 
    border:0;
    border-radius:24px; 
    color:var(--ink); 
}
  #gallery .modal-title { 
    font-family:var(--font-display); 
    letter-spacing: 1px; 
    font-weight:700; 
}
  #gallery .media { 
    aspect-ratio:16/9;
    background:#fff; 
    border-radius:16px; 
    overflow:hidden; 
}
  #gallery .media img, #gallery .media video, #gallery .media iframe, #gallery .media .ph { 
    width:100%; 
    height:100%; 
    object-fit:contain; 
    border:0; 
}
  #gallery .ph { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    text-align:center; 
    padding:1rem; 
    font-weight:800; 
    color:var(--ink); 
}
  #gMeta { 
    grid-template-columns:repeat(2,1fr); 
}

.carousel-inner {
    display: flex;
    align-content: center;
}

.carousel-control-next, .carousel-control-prev {
    top: 50%;
    bottom: 50%;
    margin: 0 1rem;
    background-color: var(--ink) !important;
    height: 2rem;
    width: 2rem !important;
    border-radius: 100%;
}

.carousel-control-prev {
    padding: 5px 5px 5px 3px;
}

.carousel-control-next {
    padding: 5px 3px 5px 5px;
}

.case-meta-grid .col-3 {
    width: 22%;
}

  @media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 50% !important;
    }
}

  @media (max-width: 767px) {
    #gMeta { 
        grid-template-columns:1fr; 
    }
    .case-meta-grid { 
        flex-direction: column; 
    }
    .roles, .led {
        width: 100%;
    }
    .hero { 
        padding: 3rem 0 6rem; 
        text-align: center; 
    }
    .hero-avatar { 
        margin-bottom: 2rem; 
    }
    .about-card { 
        padding: 2rem; 
    }
  }