/* ---------- Theme ---------- */
:root{
  --grad-a:#fcd34d; --grad-b:#fca5a5; --grad-c:#fbcfe8;
  --brand:#be185d; --bg:#fffdf8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:sans-serif;background:var(--bg);color:#222}

/* Gradient text */
.gradient-title{
  font-weight:800;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Buttons */
.gradient-button{
  background:#fca5a5;color:var(--brand);
  padding:.75rem 1.5rem;font-weight:700;border:0;border-radius:6px;
  display:inline-block;text-decoration:none;cursor:pointer;
}
.gradient-button:hover{opacity:.95}

/* Layout helpers */
.container-wide{max-width:1200px;margin:0 auto;padding:0 2rem}
.section-narrow{max-width:900px;margin:3rem auto;padding:2rem}
.center{text-align:center}.mt-1{margin-top:1rem}

/* ---------- Topbar (shared across pages) ---------- */
.topbar{position:sticky;top:0;background:#fff;z-index:1000;border-bottom:1px solid #eee}
.topbar-inner{max-width:1200px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:center;position:relative}
.menu-toggle{position:absolute;left:1rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--brand)}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:60px}
.brand-title{margin:0}
.topbar-divider{height:6px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c))}

/* Slide-out menu (hamburger) */
.menu{display:none;position:fixed;top:0;left:0;width:260px;height:100%;background:#fff;
      box-shadow:2px 0 8px rgba(0,0,0,.12);padding:1rem;z-index:1500}
.menu.active{display:block}
.menu a{display:block;margin:.75rem 0;color:var(--brand);font-weight:700;text-decoration:none}
.menu a:hover{opacity:.85}

/* ---------- Intro (About + image) ---------- */
.intro-section{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.intro-text{flex:1.3}
.intro-image{
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.intro-photo{
  width: 90%;
  height: auto;
  /* Caps size responsively: never tiny, never huge */
  max-width: clamp(220px, 22vw, 320px); 
  border-radius: 12px;
}

.gradient-frame{
  border:4px solid transparent;border-radius:12px;
  background-image:linear-gradient(#fff,#fff),
                   linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
  background-origin:border-box;background-clip:padding-box,border-box;
}
@media(max-width:768px){
  .intro-section{flex-direction:column;text-align:center}
  .intro-image{justify-content:center}
}


/* Nice, legible brand in the top bar */
.brand-logo{ height: clamp(40px, 6vw, 60px); }
.brand-title{ font-size: clamp(18px, 2.2vw, 28px); }





/* ---------- Service cards ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:2rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}

.service-box{
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:4px solid transparent;border-radius:12px;padding:30px;background:#fff;
  background-image:linear-gradient(#fff,#fff),
                   linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
  background-origin:border-box;background-clip:padding-box,border-box;
}
.service-box a{color:inherit;text-decoration:none;transition:all .3s ease}
.service-box a:hover{color:var(--brand);text-shadow:0 1px 4px rgba(252,163,163,.5)}
.service-box:hover{box-shadow:0 0 10px rgba(252,163,163,.35);transform:translateY(-2px)}
.img-placeholder{height:130px;background:#ddd;border-radius:.75rem;margin-bottom:1rem}

/* Contact card tweaks shared across pages */
.contact-card{max-width:700px;margin:4rem auto 0}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.contact-form input,.contact-form textarea{
  padding:.75rem;border-radius:6px;border:1px solid #ccc
}

/* ---------- Footer (shared) ---------- */
.footer-gradient{
  margin-top:2rem;text-align:center;color:var(--brand);
  padding:1.25rem 1rem;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
}