:root{
  --navy:#0e2a47; --gold:#caa85a; --sky:#2b6cb0; --light:#f7fafc; --ink:#1a202c;
}
*{box-sizing:border-box}
body{margin:0; font-family:'Lora', Georgia, serif; color:var(--ink); background:white}
.container{max-width:1120px; margin:0 auto; padding:0 1rem}
header{position:sticky; top:0; z-index:10; background:white; border-bottom:1px solid #e2e8f0}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--navy); font-weight:700}
.brand img{height:36px}
nav.menu{margin-left:auto; display:flex; gap:1rem; flex-wrap:wrap}
nav.menu a{color:var(--navy); text-decoration:none; padding:.5rem .75rem; border-radius:999px}
nav.menu a:hover{background:#eef2f7}
.bar{display:flex; align-items:center; gap:1rem; padding:.6rem 0}

/* Hero section with user photo */
.hero{position:relative; color:white; text-align:center; min-height:400px; overflow:hidden}
.hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3}
.hero::after{content:""; position:absolute; inset:0; z-index:-2; background:rgba(14,42,71,0.5)}
.hero .layer{position:relative; padding:4rem 1rem 3rem}
.hero h1{font-family:'Montserrat', Arial, sans-serif; font-size:2.4rem; margin:.5rem 0}
.hero p{max-width:760px; margin:.5rem auto 0; font-size:1.1rem}
.hero .cta{display:inline-block; margin-top:1rem; background:var(--gold); color:var(--navy); padding:.8rem 1rem; border-radius:.8rem; text-decoration:none; font-weight:700}

/* Feature section with icon tabs */
.feature-section{padding:3rem 0}
.feature-wrapper{display:flex; gap:2rem; align-items:flex-start}
.tabs{width:200px; display:flex; flex-direction:column; gap:1rem}
.tab{display:flex; align-items:center; gap:.6rem; padding:.75rem .8rem; border-radius:.8rem; text-decoration:none; color:var(--navy); background:var(--light); border:1px solid #e2e8f0; font-family:'Montserrat', Arial, sans-serif; font-weight:600}
.tab svg{width:28px; height:28px; color:var(--navy)}
.tab:hover{background:var(--navy); color:white}
.tab:hover svg{color:white}

/* Active state for tabs */
.tab.active{
  background:var(--navy);
  color:white;
}
.tab.active svg{
  color:white;
}
.tab-content{flex-grow:1; display:flex; flex-direction:column; gap:2rem}
.feature-card{display:grid; grid-template-columns:1fr 1.5fr; gap:1.5rem; background:var(--light); border:1px solid #e2e8f0; border-radius:1rem; padding:1rem; align-items:start}
.feature-card img{width:100%; border-radius:.5rem; object-fit:cover}
.feature-card h3{margin-top:0; font-family:'Montserrat', Arial, sans-serif; color:var(--navy); font-size:1.4rem}
.feature-card p{margin:0 0 .8rem 0; line-height:1.5}
.feature-card a.btn{display:inline-block; margin-top:.5rem; background:var(--navy); color:white; padding:.5rem .8rem; border-radius:.6rem; text-decoration:none; font-weight:600}
.feature-card a.btn.alt{background:var(--gold); color:var(--navy)}

/* Blue button for life coaching */
.feature-card a.btn.sky{
  background: var(--sky);
  color: white;
}

.section{padding:2rem 0}
footer{background:var(--navy); color:white; padding:1.25rem 0; margin-top:2rem}
footer a{color:#f6e7bd}
.small{font-size:.9rem; color:#4a5568}
.center{text-align:center}

/* Horizontal cards used for services, gifts and package lists */
.service-card, .gift-card, .package-card{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  background:var(--light);
  border:1px solid #e2e8f0;
  border-radius:1rem;
  padding:1rem;
  margin-bottom:1.5rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}
.service-card .icon, .gift-card .icon, .package-card .icon{
  flex-shrink:0;
  margin-top:.2rem;
}
.service-card h3, .gift-card h3, .package-card h3{
  margin-top:0;
  font-family:'Montserrat', Arial, sans-serif;
  color:var(--navy);
  font-size:1.3rem;
}
.service-card p, .gift-card p, .package-card p{
  margin:0 0 .6rem 0;
  line-height:1.5;
}
.service-card ul, .gift-card ul, .package-card ul{
  margin:0 0 .6rem 1rem;
  padding-left:1rem;
  list-style:disc;
}