:root{
  --bg: #f9f7fb;
  --surface: #ffffff;
  --text: #2b2b2b;
  --muted: #5a5a5a;
  --accent: #6a3fc8;
  --accent-soft: rgba(106,63,200,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }

body{
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  position: relative;
}

.watermark{
  position: fixed;
  inset: 0;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 650px;
  opacity: 0.12;           /* change this for transparency */
  pointer-events: none;
  z-index: 0;
}

body::before,
body::after{
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 180px;
  background-image: url("../images/leaf.png"); /* your vine image */
  background-repeat: repeat-y;
  background-size: contain;
  opacity: 0.12;          /* transparency for the leaves */
  pointer-events: none;
  z-index: 0;
}

/* Left leaf column */
body::before{
  left: 20px;
  background-position: center top;
}

/* Right leaf column (mirrored) */
body::after{
  right: 20px;
  background-position: center top;
  transform: scaleX(-1);
}



/* Make sure content stays above watermark */
.site-header,
main,
.site-footer{
  position: relative;
  z-index: 1;
}


a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: min(100% - 40px, 1000px);
  margin: 0 auto;
}


/* Header */
.site-header{
  padding: 56px 0 28px;
  background:
    radial-gradient(800px 300px at 50% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(#fff, transparent);
}

.header-layout{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

/* Logo on the left */
.header-logo{
  width: 210px;
  height: auto;
}

/* Portrait on the right */
.header-portrait{
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow);
  border: 3px solid white;
}

/* Centre text alignment */
.header-text{
  text-align: center;
}


.site-title{
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(44px, 6vw, 70px);
  color: var(--accent);
  text-align: center;
}

.tagline{
  margin: 6px 0 18px;
  text-align: center;
  color: var(--muted);
}

.nav{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

.nav a{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(106,63,200,0.18);
}

.section{
  padding: 54px 0;
}

.section h2{
  text-align: center;
  margin: 0 0 18px;
  font-size: 28px;
}

.section-alt{
  background: rgba(255,255,255,0.6);
}

.about-text{
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}


/* Cards */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.05);
}

.card h3{
  margin: 0 0 8px;
  color: var(--accent);


}

.card-image{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 14px;
}


/* Contact */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}

.contact-details{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.05);
}

.contact-form{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.05);
}

label{
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 500;
}

input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  font: inherit;
}

button{
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

button:hover{
  filter: brightness(0.95);
}

/* Footer */
.site-footer{
  padding: 30px 0 50px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 800px){
  /* Stack header nicely */
  .header-layout{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }

@media (max-width: 480px){
  body::before,
  body::after{
    display: none;
  }

  .watermark{
    background-size: 240px;
    opacity: 0.12;
  }
}

@media (max-width: 800px){
  .cards{ grid-template-columns: 1fr; }
}



  /* Reduce image sizes on mobile */
  .header-logo{
    width: 120px;
  }

  .header-portrait{
    width: 140px;
    height: 140px;
  }

  /* Give the title breathing space */
  .site-title{
    font-size: clamp(40px, 10vw, 56px);
  }

  .nav a{
    padding: 9px 12px;
  }

  /* Make sections feel less tall on phones */
  .section{
    padding: 38px 0;
  }

  /* Reduce side leaves so they don't crowd */
  body::before,
  body::after{
    width: 70px;
    opacity: 0.03;
  }

  /* Make centre logo watermark smaller & lighter */
  .watermark{
    background-size: 320px;
    opacity: 0.12;
  }
}

/* ---------- Mobile alignment pack ---------- */
@media (max-width: 800px){

  /* Give the page consistent side padding */
  .container{
    width: min(100% - 28px, 1000px);
  }

  /* Header: stack + centre properly */
  .site-header{
    padding: 34px 0 18px;
  }

  .header-layout{
    grid-template-columns: 1fr;
    justify-items: center;     /* centres logo + text + portrait */
    align-items: center;
    gap: 14px;
  }

  .header-text{
    text-align: center;
    width: 100%;
  }

  /* Header images: smaller and balanced */
  .header-logo{
    width: 120px;
    max-width: 40vw;
    height: auto;
  }

  .header-portrait{
    width: 140px;
    height: 140px;
  }

  /* Title + tagline: reduce vertical “wobble” */
  .site-title{
    line-height: 1.05;
    margin-bottom: 4px;
    font-size: clamp(40px, 10vw, 56px);
  }

  .tagline{
    margin: 6px 0 12px;
  }

  /* Nav: make it feel aligned and tappable */
  .nav{
    gap: 10px;
    padding-bottom: 0;
  }

  .nav a{
    padding: 10px 12px;
  }

  /* Sections: slightly tighter */
  .section{
    padding: 36px 0;
  }

  .section h2{
    font-size: 24px;
    margin-bottom: 14px;
  }

  /* Cards: prevent weird stretching */
  .cards{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card{
    padding: 16px;
  }

  /* Contact: stack and keep widths consistent */
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Backgrounds: reduce visual crowding on mobile */
  body::before,
  body::after{
    width: 70px;
    opacity: 0.03;
  }

  .watermark{
    background-size: 320px;
    opacity: 0.025;
  }
}

/* Very small phones: simplify background even more */
@media (max-width: 480px){
  body::before,
  body::after{
    display: none;  /* removes side leaves on tiny screens */
  }

  .watermark{
    background-size: 260px;
    opacity: 0.03; /* bump up if you want it more visible */
  }
}