@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

  :root{
    --sage:#5E8C7E;
    --sage-deep:#3F6459;
    --mustard:#D8B93E;
    --blush:#F4C9C1;
    --sky:#BFDDE8;
    --cream:#FBF6EC;
    --card:#FFFFFF;
    --ink:#3B352B;
    --ink-soft:#6B6152;
    --ring:rgba(59,53,43,0.08);
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; }
  #contact{ scroll-margin-top:20px; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }
  body{
    margin:0;
    background:
      radial-gradient(circle at 1px 1px, rgba(0,0,0,0.045) 1px, transparent 0) 0 0/24px 24px,
      var(--cream);
    color:var(--ink);
    font-family:'Nunito',system-ui,sans-serif;
    padding-inline:0;
  }
  .wrap{
    max-width:520px;
    margin:0 auto;
    padding-inline:20px;
    padding-block:28px 48px;
  }
  h1,h2,h3{
    font-family:'Baloo 2', system-ui, sans-serif;
    margin:0;
    text-wrap:balance;
  }
  a{color:inherit;}

  /* ---------- Language switch ---------- */
  .lang-switch{
    position:fixed;
    right:max(16px, env(safe-area-inset-right));
    bottom:max(16px, env(safe-area-inset-bottom));
    z-index:10;
    display:flex;
    gap:4px;
    padding:4px;
    background:var(--card);
    border-radius:999px;
    box-shadow:0 4px 14px rgba(59,53,43,.18), 0 0 0 1px var(--ring);
  }
  .lang-btn{
    border:none;
    background:transparent;
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.03em;
    padding:6px 16px;
    border-radius:999px;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
  }
  .lang-btn:active{ transform:translateY(2px) scale(.96); }
  .lang-btn.active{
    background:var(--sage);
    color:#fff;
    box-shadow:0 2px 0 var(--sage-deep);
    animation:pop .28s ease;
  }

  /* ---------- Header ---------- */
  .brandmark{
    display:flex;
    justify-content:center;
    margin-bottom:4px;
  }
  .brandmark img{
    width:min(78vw, 300px);
    height:auto;
    display:block;
  }
  .tagline{
    text-align:center;
    color:var(--ink-soft);
    font-weight:700;
    font-size:1.02rem;
    margin-top:2px;
    letter-spacing:.01em;
  }

  /* ---------- Rating badge (inside Etsy card) ---------- */
  .etsy-rating{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--mustard);
    color:#3B2E0A;
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    font-size:.66rem;
    padding:4px 9px;
    border-radius:999px;
    box-shadow:0 2px 0 rgba(0,0,0,0.16);
    position:absolute;
    top:2px;
    right:-6px;
    transform:rotate(7deg);
    white-space:nowrap;
  }

  /* ---------- CTA buttons ---------- */
  .cta-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:34px;
  }
  .btn{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 20px;
    border-radius:20px;
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    font-size:1.06rem;
    text-decoration:none;
    color:#fff;
    box-shadow:0 4px 0 var(--shadow-c, rgba(0,0,0,0.15));
    transition:transform .14s ease, box-shadow .14s ease;
  }
  .btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--shadow-c, rgba(0,0,0,0.15)); }
  @media (hover:hover){
    .btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--shadow-c, rgba(0,0,0,0.15)); }
  }
  .btn .ico{
    width:34px;height:34px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.25);
    border-radius:12px;
  }
  .btn .ico svg{width:19px;height:19px;}
  .btn .sub{
    display:block;
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:.74rem;
    opacity:.85;
    margin-top:1px;
  }
  .btn-etsy{ background:var(--sage); --shadow-c: var(--sage-deep); position:relative; }
  .btn-ig{ background:#C6598A; --shadow-c:#8E3E63; }
  .btn-fb{ background:#4C6EA8; --shadow-c:#324A78; }

  /* ---------- Section headings ---------- */
  .section{ margin-bottom:36px; }
  .section h2{
    font-size:1.35rem;
    color:var(--sage-deep);
    margin-bottom:12px;
  }
  .eyebrow{
    display:inline-block;
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:.72rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--cream);
    background:var(--sage-deep);
    padding:4px 10px;
    border-radius:8px;
    margin-bottom:8px;
  }

  /* ---------- About hero ---------- */
  /* ---------- What I offer ---------- */
  .offer-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .offer-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 16px;
    border-radius:18px;
    background:var(--card);
    box-shadow:0 2px 0 var(--ring);
    text-decoration:none;
    color:var(--ink);
    transition:opacity .45s ease, transform .14s ease, box-shadow .14s ease;
  }
  a.offer-row:active{ transform:translateY(2px); box-shadow:0 0 0 var(--ring); }
  @media (hover:hover){
    a.offer-row:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--ring); }
  }
  .offer-ico{
    flex:none;
    width:44px;height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
  }
  .offer-row:nth-child(1) .offer-ico{ background:var(--blush); }
  .offer-row:nth-child(2) .offer-ico{ background:var(--sky); }
  .offer-row:nth-child(3) .offer-ico{ background:#F1EAC9; }
  .offer-row:nth-child(4) .offer-ico{ background:var(--blush); }
  .offer-text{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
  }
  .offer-title{
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    font-size:.96rem;
  }
  .offer-sub{
    font-family:'Nunito',sans-serif;
    font-size:.78rem;
    color:var(--ink-soft);
    margin-top:1px;
  }
  .offer-arrow{
    flex:none;
    font-size:1.1rem;
    font-weight:700;
    color:var(--sage-deep);
  }

  .about-section{ margin-bottom:40px; }
  .about-hero{
    position:relative;
    margin:0 -20px 0;
    padding:34px 20px 46px;
    background:linear-gradient(155deg, var(--sky) 0%, var(--blush) 100%);
    border-radius:0 0 34px 34px;
    overflow:hidden;
    text-align:center;
  }
  .about-hero::before,
  .about-hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.38);
  }
  .about-hero::before{ width:130px;height:130px; top:-50px; left:-36px; }
  .about-hero::after{ width:86px;height:86px; bottom:-10px; right:-22px; }
  .about-hero .eyebrow{
    position:relative;
    background:rgba(255,255,255,0.6);
    color:var(--sage-deep);
  }
  .about-hero h2{
    position:relative;
    margin-bottom:0;
  }
  .avatar-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    margin-bottom:16px;
  }
  .avatar{
    width:116px;height:116px;
    border-radius:50%;
    background:var(--card);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 0 rgba(0,0,0,0.14);
    border:4px solid var(--card);
    position:relative;
    z-index:1;
  }
  .avatar svg{ width:58px;height:58px;color:var(--sage); }
  .avatar-badge{
    position:absolute;
    bottom:-2px;
    right:calc(50% - 70px);
    width:36px;height:36px;
    background:var(--mustard);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 0 rgba(0,0,0,0.15);
    border:3px solid var(--card);
    z-index:2;
    transform:rotate(-8deg);
  }
  .avatar-badge svg{ width:18px;height:18px;color:#3B2E0A; }

  .about-card{
    background:var(--card);
    border-radius:22px;
    padding:20px;
    margin-top:-24px;
    position:relative;
    z-index:1;
    box-shadow:0 2px 0 var(--ring);
  }
  .about-card p{
    margin:0;
    line-height:1.55;
    font-size:.98rem;
    color:var(--ink);
  }
  .about-card p + p{ margin-top:10px; }
  .signoff{
    font-family:'Baloo 2',sans-serif;
    color:var(--sage-deep);
    font-size:1rem;
    margin-top:10px;
  }

  /* ---------- Gallery: masonry mosaic ---------- */
  .gallery{
    column-count:2;
    column-gap:10px;
  }
  .gitem{
    position:relative;
    display:block;
    break-inside:avoid;
    margin-bottom:10px;
    border-radius:14px;
    overflow:hidden;
    background:var(--sky);
    transition:opacity .45s ease, transform .14s ease, box-shadow .14s ease;
  }
  .gitem:active{ transform:scale(.97); }
  @media (hover:hover){
    .gitem:hover{ transform:translateY(-2px); box-shadow:0 6px 14px -6px rgba(59,53,43,0.35); }
  }
  .gitem:nth-child(4n+1){ background:var(--blush); }
  .gitem:nth-child(4n+2){ background:var(--sky); }
  .gitem:nth-child(4n+3){ background:#E4DFC9; }
  .gitem:nth-child(4n+4){ background:var(--blush); }
  .gitem:nth-child(1){ aspect-ratio:1/1; }
  .gitem:nth-child(2){ aspect-ratio:3/4; }
  .gitem:nth-child(3){ aspect-ratio:4/5; }
  .gitem:nth-child(4){ aspect-ratio:1/1; }
  .gitem:nth-child(5){ aspect-ratio:4/3; }
  .gitem:nth-child(6){ aspect-ratio:3/4; }
  .gitem:nth-child(7){ aspect-ratio:1/1; }
  .gitem:nth-child(8){ aspect-ratio:4/5; }
  .gitem img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
  }
  .gitem span{
    position:absolute;
    left:8px;bottom:8px;
    background:rgba(59,53,43,0.68);
    color:#fff;
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:.68rem;
    padding:3px 9px;
    border-radius:999px;
  }
  .gallery-note{
    margin-top:12px;
    font-size:.84rem;
    color:var(--ink-soft);
    text-align:center;
  }
  .gallery-note a{
    color:var(--sage-deep);
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:2px;
  }

  /* ---------- Contact ---------- */
  .contact-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .contact-row{
    display:flex;
    align-items:center;
    gap:13px;
    background:var(--card);
    border-radius:18px;
    padding:13px 16px;
    box-shadow:0 2px 0 var(--ring);
    text-decoration:none;
    color:var(--ink);
    transition:opacity .45s ease, transform .14s ease, box-shadow .14s ease;
  }
  .contact-row:active{ transform:translateY(2px); box-shadow:0 0 0 var(--ring); }
  @media (hover:hover){
    .contact-row:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--ring); }
  }
  .contact-row .ico{
    width:36px;height:36px;flex:none;
    border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:var(--sky);
    color:var(--sage-deep);
  }
  .contact-row .ico svg{width:18px;height:18px;}
  .contact-row .label{
    font-family:'Baloo 2',sans-serif;
    font-weight:600;
    font-size:.72rem;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  .contact-row .value{
    font-weight:800;
    font-size:.98rem;
  }

  /* ---------- Footer ---------- */
  footer{
    text-align:center;
    margin-top:40px;
    color:var(--ink-soft);
    font-size:.82rem;
  }
  footer .heartline{
    font-family:'Baloo 2',sans-serif;
    color:var(--sage-deep);
    font-size:1rem;
    margin-bottom:6px;
  }

  /* ---------- Interaction & scroll-reveal animations ---------- */
  @keyframes pop{
    0%{ transform:scale(.85); }
    60%{ transform:scale(1.06); }
    100%{ transform:scale(1); }
  }
  @media (prefers-reduced-motion: no-preference){
    .brandmark, .tagline, .cta-stack,
    .offer-section .eyebrow, .offer-section h2,
    .about-hero, .about-card,
    #contact .eyebrow, #contact h2,
    .gallery-section .eyebrow, .gallery-section h2,
    footer{
      opacity:0;
      transform:translateY(18px);
      transition:opacity .45s ease, transform .45s ease;
    }
    .brandmark.in, .tagline.in, .cta-stack.in,
    .offer-section .eyebrow.in, .offer-section h2.in,
    .about-hero.in, .about-card.in,
    #contact .eyebrow.in, #contact h2.in,
    .gallery-section .eyebrow.in, .gallery-section h2.in,
    footer.in{
      opacity:1;
      transform:translateY(0);
    }
    /* these already carry their own hover/active transition, so reveal only sets the state */
    .offer-row, .contact-row, .gitem{
      opacity:0;
      transform:translateY(18px);
    }
    .offer-row.in, .contact-row.in, .gitem.in{
      opacity:1;
      transform:translateY(0);
    }
    .offer-row:nth-child(1){ transition-delay:0s; }
    .offer-row:nth-child(2){ transition-delay:.08s; }
    .offer-row:nth-child(3){ transition-delay:.16s; }
    .contact-row:nth-child(1){ transition-delay:0s; }
    .contact-row:nth-child(2){ transition-delay:.08s; }
    .contact-row:nth-child(3){ transition-delay:.16s; }
    .gitem:nth-child(1){ transition-delay:0s; }
    .gitem:nth-child(2){ transition-delay:.05s; }
    .gitem:nth-child(3){ transition-delay:.10s; }
    .gitem:nth-child(4){ transition-delay:.15s; }
    .gitem:nth-child(5){ transition-delay:.20s; }
    .gitem:nth-child(6){ transition-delay:.25s; }
    .gitem:nth-child(7){ transition-delay:.30s; }
    .gitem:nth-child(8){ transition-delay:.35s; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }