body {
  background: #EFE9D9;
  margin: 0;
  line-height: 1.6;
  scroll-behavior: smooth;
  font-family: "Libertinus Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Example backgrounds — replace with your images */
.parallax__layer--back {
  background-image: url('images/bg-1.png');
  z-index: 1;
}
.parallax__layer--middle {
  background-image: url('images/bg-2.png');
  z-index: 2;
}
.parallax__layer--front {
  background-image: url('images/bg-3.png');
  z-index: 3;
}

header {
  text-align: center;
  padding: 2rem 1rem;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
}

header > div  {
  margin: 2rem auto;
  max-width: 800px;
}

header img {
  margin: 1rem auto;
  max-width: 90%;
  height: auto;
}

@media (min-width: 1024px) {

  header img {
    margin: 4rem auto;
  }
  
}

nav {
  text-align: center;
  margin: 1rem 0;
}

@media (min-width: 1024px) {
  
  nav {
    margin: 2rem 0;
  }

}

nav a {
  display: inline-block;
  margin: 0 1rem;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a i.fa,
nav a i.fa-solid {
  display: block;
  margin: 0 auto;
}

div.body {
  overflow: hidden;
}

section {
  padding: 4rem 1rem;
  max-width: 1024px;
  margin: auto;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
}

@media (min-width: 1024px) {
  .columns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8rem;
  }
  .column {
    flex: 0 0 50%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .column-left {
    order: 1;
  }
  .column-right {
    order: 2;
  }
  .column-full {
    order: 3;
    flex: 0 0 100%;
  }
}

.organize-stage {
  position: relative;
  height: 420px;
  pointer-events: none;
  transform: translateY(0);
}

.organize-stage .org-box {
  position: absolute;
  width: 56px;
  max-width: 30%;
  height: auto;
  will-change: transform;
  transform-origin: 50% 50%;
  pointer-events: none;    /* decorative; remove if they must be clickable */
}

@media (min-width: 768px) {
  
  .organize-stage .org-box {
    width: 112px;
  }
}

/* Stage */
.cleaning-stage{
  margin-top: 40px;
  position: relative;
  min-height: 520px;

  /* start position + movement vector */
  --clean-vacuum-x: 80px;
  --clean-vacuum-y: 40px;
  --clean-move-dx: 190px;   /* + right, - left */
  --clean-move-dy: 160px;

  /* both dirt layers share these so they overlay perfectly */
  --clean-dirt-left: 0;
  --clean-dirt-top:  260px;
  --clean-dirt-width: 432px;
  --clean-dirt-width-sm: 280px;

  --clean-parallax: 0px;
  --clean-angle-tweak: 30deg;
  transform: translateY(var(--clean-parallax));
}

.cleaning-stage > img{
  position: absolute;
  user-select: none;
  pointer-events: none;
}

/* both dirt layers line up exactly */
.dirt-bg,
.dirt-path,
.carpet {
  top:  260px;
  width: 280px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}

.dirt-path{
  --clean-angle: 90deg;   /* default; JS will overwrite */
  --clean-clip: 0%;       /* 0% = nothing cleaned, 100% = fully cleaned */

  /* mask = transparent before the cut; opaque after it (hard edge) */
  -webkit-mask-image: linear-gradient(
    var(--clean-angle),
    transparent 0%,
    transparent var(--clean-clip),
    #000 calc(var(--clean-clip) + 0.01%),
    #000 100%
  );
  mask-image: linear-gradient(
    var(--clean-angle),
    transparent 0%,
    transparent var(--clean-clip),
    #000 calc(var(--clean-clip) + 0.01%),
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* vacuum image */
.vacuum{
  left: var(--clean-vacuum-x);
  top:  110px;
  width: 98px; /* tweak */
  height: auto;
  transform-origin: 0 0;
  will-change: transform;
}

@media (min-width: 464px) {
  .dirt-bg,
  .dirt-path,
  .carpet {
    width: 432px;
    top: 260px;
  }
  
  .vacuum{
    width: 151px;
    top: 50px;
  }
}

/* clipping: JS sets --clean-clip-px */
.dirt-path.clean-from-left  { clip-path: inset(0 0 0 var(--clean-clip-px, 0px)); }
.dirt-path.clean-from-right { clip-path: inset(0 var(--clean-clip-px, 0px) 0 0); }

.declutter-stage{
  position: relative;
  min-height: 520px;           /* set to your art height */

  /* layout knobs */
  --decl-item-width: 140px;    /* base size for all items (set to your art) */
  --decl-keep-gap: 24px;       /* space between #1 and #3 when organized */
  --decl-keep-top: 16px;       /* top offset for #1 and #3 when organized */

  /* scroll triggers (viewport fractions) */
  --decl-start-vh: 0.40;       /* start when stage top hits 66% viewport */
  --decl-end-vh:   0.10;       /* end when stage top hits 33% viewport */

  /* subtle drift */
  --decl-parallax: 0px;
  transform: translateY(var(--decl-parallax));
}

.decl-item{
  position: absolute;
  left: 0; top: 0;             /* transforms place them anywhere in the stage */
  width: var(--decl-item-width);
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;         /* decorative; remove if clickable */
}

#photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

#photos img {
  width: 100%;
  border-radius: 5px;
}

form {
  display: grid;
  gap: 1rem;
  width: 100%;
  margin: 1rem auto;
}

button {
  padding: 0.75rem;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #555;
}

.social {
  margin: 1rem 0;
}

@media (min-width: 1024px) {

    .social {
      margin: 2rem 0;
    }
  
}

.social a {
  display: inline-block;
  background: transparent;
  border-radius: 2px;
  font-size: 3rem;
  padding: 0.25rem;
  margin: 0 1rem;
}

.social button:hover,
.social button:focus {
  background: rgba(255, 255, 255, 0.5);
}

.about-pic {
  border-radius: 50%;
  border: 3px solid #987C07;
  display: block;
  max-width: 200px;
  margin: 1rem auto;
}

@media (min-width: 1024px) {

  .about-pic {
    border: 5px solid #987C07;
    max-width: 300px;
  }
}

footer {
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}


input, textarea {
  width: 90%;
  padding: 0.75rem 1rem;
  font-size: 1.6rem;
  font-family: "Libertinus Sans", sans-serif;

  border: 2px solid #280600;
  border-radius: 1rem;      /* adjust to match your rounded shape */
  background: white;

  /* second "layer" underneath */
  box-shadow: 6px 6px 0 0 #E1B708; /* teal offset background */
  
  /* make it look a bit playful */
  outline: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

button[type='submit'] {
  background: #64C6AB;
  border: 2px solid #280600;
  border-radius: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #280600;
  width: 90%;
}

#form-status {
  font-size: 1.6rem;
  font-weight: bold;
}
.status { margin: 0.75rem 0 1rem; font-size: 0.95rem; }
.status--info { color: #1C7A91; }
.status--success { color: #4D9274; }
.status--error { color: #EB4A35; }

/* -- Fonts -- */

.teal {
  color: #3A7D6A;
}

.yellow {
  color: #987C07;
}

.orange {
  color: #883700;
}

.red {
  color: #EB4A35;
}


.blue {
  color: #1C7A91;
}


.green {
  color: #4D9274;
}


h3 {
  font-family: "Edu NSW ACT Cursive", cursive;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

h1 {
  color: #280600;
  font-size: 3.5rem;
  margin: 0 0 3.5rem;
}

h2 {
  font-family: "Ribeye", serif;
  font-weight: 400;
  font-style: normal;
  color: #280600;
  font-size: 1.9rem;
  margin: 0 0 3rem;
}

@media (min-width: 1024px) {

  h2 {
    font-size: 2.5rem;
    margin: 0 0 3rem;
  }
}

h3 {
  color: #987C07;
  font-size: 2rem;
  margin: 1rem 0 0.5rem;
}

h4 {
  color: #883700;
  font-size: 1.8rem;
  margin: 1rem 0 0.5rem;
}

h5 {
  color: #280600;
  font-size: 1.5rem;
  margin: 1rem 0 0.5rem;
}

h6 {
  color: #280600;
  font-size: 1.3rem;
  margin: 1rem 0 0.5rem;
}

p {
  margin: 1rem 0 0.5rem;
}

.sparkle-list {
  list-style: none;
  padding-left: 0;
}

.sparkle-list li {
  position: relative;
  padding-left: 1.8em;
}

.sparkle-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  background: url('/images/sparkle-blue.png') no-repeat center center;
  background-size: contain;
}


.libertinus-sans-regular {
  font-family: "Libertinus Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.libertinus-sans-bold {
  font-family: "Libertinus Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.libertinus-sans-regular-italic {
  font-family: "Libertinus Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.sr-only-focusable:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.challenge { margin-top: 0.5rem; }
.challenge span { display:block; font-size:0.95rem; margin-bottom:0.25rem; }