/* Bruna's Helping Hands — big, chunky, kid-made.
   Fonts: Bagel Fat One (headlines), Patrick Hand (everything else). */

:root{
  /* color (semantic token contract) */
  --surface:     #FBF4E6;  /* warm cream paper */
  --surface-2:   #FFFDF7;  /* card / note paper */
  --ink:         #2E2A26;  /* warm near-black text */
  --ink-soft:    #6b6258;  /* secondary text */
  --accent:      #E4572E;  /* crayon coral */
  --accent-deep: #c23e1a;  /* darker coral, hovers */
  --line:        #e3d8bf;  /* hairlines on paper */

  /* extra crayons */
  --yellow: #F2C14E;
  --blue:   #4D9DE0;
  --green:  #3FA34D;
  --brick:  #D7263D;

  /* type */
  --font-display: 'Bagel Fat One', system-ui, sans-serif;
  --font-body:    'Patrick Hand', 'Comic Sans MS', cursive;
  --font-label:   'Patrick Hand', cursive;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:22px;          /* big and readable */
  line-height:1.5;
  color:var(--ink);
  background-color:var(--surface);
  background-image:
    linear-gradient(rgba(120,150,180,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,180,.07) 1px, transparent 1px);
  background-size:30px 30px;
}

h1,h2,h3{ font-family:var(--font-display); line-height:1.05; margin:0; font-weight:400; }
p{ margin:0 0 1rem; }
strong{ color:var(--accent-deep); font-weight:400; }

.section-title{
  font-size:clamp(2rem, 6vw, 3.2rem);
  text-align:center;
  color:var(--ink);
  margin-bottom:1.6rem;
}
.section-title::after{
  content:"";
  display:block;
  width:120px; height:9px;
  margin:.55rem auto 0;
  border-radius:8px;
  background:var(--yellow);
  transform:rotate(-1.4deg);
}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  text-decoration:none;
  padding:.6em 1.2em;
  border-radius:16px;
  border:4px solid var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{ background:var(--accent); color:#fff; font-size:1.5rem; box-shadow:5px 5px 0 var(--ink); }
.btn--primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn--big{
  background:var(--green); color:#fff;
  font-size:1.9rem; padding:.6em 1.3em;
  box-shadow:6px 6px 0 var(--ink);
}
.btn--big:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }

/* ===== Banner ===== */
.banner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:1rem clamp(1rem,5vw,3rem);
  border-bottom:4px dashed var(--line);
}
.banner__name{
  text-decoration:none;
  font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,1.9rem);
  color:var(--accent);
}
.banner__cta{
  font-family:var(--font-display);
  text-decoration:none; color:var(--ink);
  background:var(--yellow);
  font-size:1.2rem;
  padding:.4em 1em; border-radius:14px;
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.banner__cta:hover{ background:#f6cf6a; }

/* ===== Tape & photos ===== */
.tape{
  position:absolute; width:80px; height:28px;
  background:rgba(242,193,78,.6);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.tape--tl{ top:-12px; left:-10px; transform:rotate(-22deg); }
.tape--tr{ top:-12px; right:-10px; transform:rotate(20deg); }
.tape--bl{ bottom:-12px; left:-10px; transform:rotate(18deg); }
.tape--br{ bottom:-12px; right:-10px; transform:rotate(-18deg); }

.photo{
  position:relative;
  background:#fff; padding:16px 16px 0;
  border:1px solid var(--line);
  box-shadow:8px 10px 0 rgba(46,42,38,.12);
  margin:0;
}
.photo img{ display:block; width:100%; height:auto; background:var(--surface-2); }
.photo figcaption{
  font-family:var(--font-label);
  font-size:1.8rem; text-align:center;
  color:var(--ink-soft);
  padding:.35em 0 .55em;
}
.photo--big{ width:min(360px, 82vw); transform:rotate(-4deg); }
.photo--wide{ width:min(440px, 88vw); transform:rotate(2deg); }
.dogphoto{ margin:2.6rem auto 0; }

/* ===== Hero ===== */
.hero{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.5rem,5vw,4rem);
  flex-wrap:wrap;
  padding:clamp(2rem,6vw,4.5rem) clamp(1rem,5vw,3rem);
  max-width:1040px; margin:0 auto;
}
.hero__copy{ max-width:500px; }
.hero__hi{
  font-size:clamp(3rem,11vw,5.2rem);
  color:var(--accent);
  margin:0 0 .4rem;
  transform:rotate(-1.5deg);
}
.hero__lead{ font-size:1.45rem; line-height:1.45; margin-bottom:1.6rem; }
.hero__note{ font-size:1.1rem; color:var(--ink-soft); margin:.9rem 0 0; }

/* ===== Goal / LEGO jar ===== */
.goal{
  max-width:820px; margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,5vw,2rem) clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.goal__title{ font-size:clamp(2.2rem,6vw,3.2rem); }
.goal__sub{ font-size:2rem; color:var(--accent); margin:.2rem 0 1.4rem; transform:rotate(-1.4deg); }

.bricks{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
  max-width:432px; margin:0 auto;
  background:var(--surface-2);
  border:4px solid var(--ink);
  border-radius:22px;
  padding:22px;
  box-shadow:6px 7px 0 rgba(46,42,38,.14);
}
.brick{
  position:relative;
  width:64px; height:44px;
  border-radius:5px;
  --c:#efe7d4;
  background:var(--c);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.16), inset 0 3px 0 rgba(255,255,255,.22);
}
/* the two studs on top */
.brick::before,.brick::after{
  content:""; position:absolute; top:-8px;
  width:20px; height:14px; border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 3px rgba(0,0,0,.2);
}
.brick::before{ left:8px; }
.brick::after{ right:8px; }
/* empty slot = pale ghost brick */
.brick:not(.is-filled){ --c:#efe7d4; opacity:.8; box-shadow:inset 0 0 0 2px #ddd2ba; }
.brick:not(.is-filled)::before,
.brick:not(.is-filled)::after{ box-shadow:inset 0 0 0 2px #ddd2ba; }
/* filled bricks = colorful LEGO, colors cycle */
.brick:nth-child(4n+1).is-filled{ --c:#D7263D; }  /* red */
.brick:nth-child(4n+2).is-filled{ --c:#F2C14E; }  /* yellow */
.brick:nth-child(4n+3).is-filled{ --c:#4D9DE0; }  /* blue */
.brick:nth-child(4n+4).is-filled{ --c:#3FA34D; }  /* green */

.goal__saving{ margin-top:1.8rem; font-size:1.5rem; }
.goal__hint{ display:block; font-size:1.2rem; color:var(--ink-soft); }

/* ===== Job cards ===== */
.jobs{ padding:clamp(2rem,5vw,3.5rem) clamp(1rem,5vw,3rem); max-width:1080px; margin:0 auto; }
.cards{ display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card{
  position:relative;
  background:var(--surface-2);
  border:4px solid var(--ink);
  border-radius:20px;
  padding:1.8rem 1.5rem;
  box-shadow:6px 7px 0 rgba(46,42,38,.14);
  text-align:center;
}
.card:nth-child(1){ transform:rotate(-1.6deg); }
.card:nth-child(2){ transform:rotate(1.1deg); }
.card:nth-child(3){ transform:rotate(-.7deg); }
.card__doodle{ width:96px; height:96px; margin:0 auto .6rem; }
.card__doodle svg{ width:100%; height:100%; }
.card--blue  .card__doodle{ color:var(--blue); }
.card--green .card__doodle{ color:var(--green); }
.card--coral .card__doodle{ color:var(--accent); }
.card__title{ font-size:1.8rem; margin-bottom:.5rem; }
.card__text{ font-size:1.25rem; line-height:1.4; margin-bottom:.7rem; }
.card__price{ font-family:var(--font-label); font-size:1.4rem; color:var(--accent-deep); margin:0; }

.sticker{
  position:absolute; top:-20px; right:-14px;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1.5rem;
  width:74px; height:74px;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--ink);
  border-radius:50%;
  transform:rotate(12deg);
  box-shadow:3px 3px 0 rgba(46,42,38,.2);
  z-index:2;
}
.jobs__more{ text-align:center; margin-top:2.2rem; font-size:1.6rem; color:var(--accent-deep); }

/* ===== Promise ===== */
.promise{ padding:clamp(1.5rem,4vw,3rem) clamp(1rem,5vw,3rem); }
.promise__inner{
  max-width:600px; margin:0 auto;
  background:var(--surface-2);
  border:4px solid var(--ink);
  border-radius:22px;
  padding:2rem clamp(1.4rem,5vw,2.8rem);
  box-shadow:6px 7px 0 rgba(46,42,38,.14);
  transform:rotate(.5deg);
}
.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{
  display:flex; align-items:flex-start; gap:.9rem;
  font-size:1.45rem; padding:.55rem 0;
  border-bottom:3px dashed var(--line);
}
.checklist li:last-child{ border-bottom:0; }
.check{
  flex:0 0 auto; width:30px; height:30px; margin-top:5px;
  border:4px solid var(--green); border-radius:8px;
  position:relative;
}
.check::after{
  content:""; position:absolute; left:7px; top:1px;
  width:9px; height:16px;
  border:solid var(--green); border-width:0 5px 5px 0;
  transform:rotate(40deg);
}

/* ===== Parents note ===== */
.parents{ padding:1rem clamp(1rem,5vw,3rem) 2rem; }
.note{
  position:relative;
  max-width:600px; margin:0 auto;
  background:#fffef9;
  border:1px solid var(--line);
  padding:2.2rem 2rem 1.8rem;
  box-shadow:5px 6px 0 rgba(46,42,38,.1);
  transform:rotate(-.8deg);
}
.note__label{ font-family:var(--font-display); font-size:1.6rem; color:var(--accent); margin:0 0 .5rem; }
.note p:last-child{ margin:0; font-size:1.3rem; line-height:1.45; }

/* ===== Contact ===== */
.contact{
  text-align:center;
  padding:clamp(2.5rem,7vw,4.5rem) clamp(1rem,5vw,3rem);
  background:
    radial-gradient(circle at 20% 20%, rgba(242,193,78,.2), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(77,157,224,.18), transparent 60%);
  border-top:4px dashed var(--line);
}
.contact__title{ font-size:clamp(2.4rem,7vw,3.6rem); }
.contact__lead{ font-size:1.45rem; margin-bottom:1.8rem; }
.contact__call{
  display:block; margin-top:1.1rem;
  font-family:var(--font-label); font-size:1.6rem;
  color:var(--accent-deep);
}
.contact__where{ margin-top:1.6rem; font-size:1.3rem; color:var(--ink-soft); }

/* ===== Footer ===== */
.footer{ text-align:center; padding:2.2rem 1rem 2.8rem; color:var(--ink-soft); font-size:1.3rem; }
.footer p{ margin:.25rem 0; }
.footer__brick{ font-family:var(--font-display); font-size:1.7rem; color:var(--accent); }

@media (max-width:560px){
  body{ font-size:20px; }
  .banner{ justify-content:center; text-align:center; }
  .hero{ text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}