/* Empathy — Minimal Organic Modernism (v2 tuned to SVG) */
:root{
  --base:#F6F3EA;      /* cream */
  --sand:#E5D9C6;      /* warm band */
  --forest:#2E6A55;    /* primary */
  --moss:#6EA387;      /* secondary stroke */
  --ink:#1E1E1E;       /* text */
  --lilac:#B7A6CE;     /* CTA */
  --mint:#CDE7D8;      /* placeholders */
  --white:#FFFFFF;

  --radius:12px;
  --radius-lg:24px;
  --radius-cta:22px;

  --shadow-s:0 4px 10px rgba(0,0,0,.04);
  --shadow:0 8px 16px rgba(0,0,0,.05);

  --container:1120px;   /* tighter than 1200 to match wireframe */
  --gutter:24px;

  --band-pad:72px;      /* larger vertical rhythm */
  --gap-l:48px;
  --gap-m:32px;
  --gap-s:16px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--base);color:var(--ink);font-family:'Nunito Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.6}
h1,h2,h3,h4{font-family:'Alegreya', Georgia, serif; line-height:1.2; margin:0 0 .55em}
h1{font-weight:200;font-size:clamp(2.4rem,4.6vw,3.5rem)}
h2{font-weight:200;font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-weight:200;font-size:1.25rem}
.lead{font-size:1.15rem;color:var(--forest)}

.container{max-width:var(--container);padding:0 var(--gutter);margin:0 auto}
.grid-2{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--gap-l)}
@media (max-width: 920px){ .grid-2{grid-template-columns:1fr} }

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--base);border-bottom:1px solid rgba(0,0,0,.06)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{font-family:'Alegreya', Georgia, serif;font-weight:700;font-size:1.55rem;color:var(--ink);text-decoration:none}
.main-nav a{margin-left:24px;text-decoration:none;color:var(--ink);font-size:0.98rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;border:1px solid transparent;text-decoration:none}
.btn-pill{border-radius:999px;background:var(--lilac);color:white;font-weight:700;box-shadow:var(--shadow-s)}
.btn-pill:hover{filter:brightness(0.98)}

/* Hero */
.hero{background:var(--sand);padding:64px 0 28px;position:relative;border-bottom:1px solid rgba(0,0,0,.06)}
.hero .media-ph{background:linear-gradient(135deg,var(--mint),#eaf7ef);border-radius:var(--radius-lg);height:360px;border:2px solid var(--moss);box-shadow:var(--shadow)}
.hero .hero-copy p{max-width:56ch}
.decor-leaf-hero{position:absolute;right:24px;bottom:-18px;width:160px;height:auto;}

/* Bands */
.band{padding:var(--band-pad) 0}
.band-cream{background:var(--base)}
.band-sand{background:var(--sand)}

/* Services */
#services .container>h2{margin-bottom:.6rem}
.card-grid.four{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-m);margin-top:12px}
.card{background:var(--white);border:1.5px solid var(--moss);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-s)}
.card h3{color:var(--forest);margin-bottom:.25rem}
@media (max-width: 1080px){ .card-grid.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .card-grid.four{grid-template-columns:1fr} }

/* Projects */
#projects{padding-top:calc(var(--band-pad) + 16px)} /* extra breathing room before grid */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-m);margin-top:14px}
.project .thumb{height:400px;background:var(--mint);border:1.5px solid var(--moss);border-radius:12px;box-shadow:var(--shadow-s);margin-bottom:10px}
.project h3{color:var(--forest);margin:.25rem 0 .1rem}
@media (max-width: 1080px){ .project-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .project-grid{grid-template-columns:1fr} }

/* Testimonial */
.testimonial{padding:56px 0}
.testimonial blockquote{font-family:'Alegreya', Georgia, serif;font-style:italic;margin:0;max-width:56ch}
.testimonial footer{margin-top:.6rem;font-size:.95rem;opacity:.9}

/* About */
.about .grid-2{align-items:center}
.about-plant img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* Contact */
.contact .grid-2{align-items:start}
.contact .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.contact .contact-form label{display:block}
.contact .contact-form label.full{grid-column:1/-1}
input,textarea{width:100%;padding:.95rem;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:var(--base);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
textarea{resize:vertical}
.contact .btn.primary{margin-top:6px}
.contact-aside h3{margin:.2rem 0 .15rem}
.contact-aside p{margin:.1rem 0 .8rem}

/* Footer */
.site-footer{background:#c8bbd8; padding:32px 0; border-top:1px solid rgba(0,0,0,.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;align-items:start}
.site-footer nav a{display:block;text-decoration:none;color:var(--ink);margin:.25rem 0}
@media (max-width: 920px){ .footer-grid{grid-template-columns:1fr 1fr} }

/* === Empathy image hooks ================================================ */

/* HERO image */
.hero .media-ph{
  background-image: url('assets/hero.jpg'); /* replace with your file */
  background-size: cover;
  background-position: center;
}

/* Decorative leaf in hero (toggle size/position if your leaf differs) */
.decor-leaf-hero{
  content: "";
  position: absolute;
  right: 24px;
  bottom: -18px;
  width: 180px;   /* adjust if your PNG/SVG is larger */
  height: auto;
}
.decor-leaf-hero[src]{
  content: normal;
}

/* About */
.about .grid-2{
  align-items: stretch;                /* both columns same height */
  min-height: 420px;                   /* ensures room for the plant */
}

.about-plant{
  display: flex;                       /* enables vertical anchoring */
  align-items: flex-end;               /* push image to the bottom */
  justify-content: flex-end;
}

.about-plant img{
  width: 88%;                          /* match mock’s scale */
  height: auto;
  border-radius: 24px;
  box-shadow: none;                    /* no drop shadow */
  align-self: flex-end;                /* bottom anchor in column */
  object-fit: contain;
}



/* Project thumbnails (optional now; leave mint placeholders otherwise) */
.project:nth-of-type(1) .thumb{ background-image:url('assets/project-1.jpg'); }
.project:nth-of-type(2) .thumb{ background-image:url('assets/project-2.jpg'); }
.project:nth-of-type(3) .thumb{ background-image:url('assets/project-3.jpg'); }
.project:nth-of-type(4) .thumb{ background-image:url('assets/project-4.jpg'); }
.project:nth-of-type(5) .thumb{ background-image:url('assets/project-5.jpg'); }
.project:nth-of-type(6) .thumb{ background-image:url('assets/project-6.jpg'); }

.project .thumb{
  background-size: cover;
  background-position: center;
}

/* HERO as background image on the container */
.hero { background: var(--sand); padding: 64px 0 28px; position: relative; border-bottom: 1px solid rgba(0,0,0,.06); }

.hero .media-ph{
  height: 420px;                 /* desktop height matches your PNG */
  border: 2px solid var(--moss);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background-image: url('assets/hero.jpg');  /* <- put your file here */
  background-size: cover;        /* fill the rounded rectangle */
  background-position: center;   /* keep faces centered */
  background-repeat: no-repeat;
}

@media (max-width: 900px){
  .hero .media-ph{ height: 400px; }
}
/* --- Full-bleed photo band --- */
.hero-photo{
  height: 600px;                     /* was 420px */
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 2px solid var(--moss);
}

/* --- Mint intro band (headline block) --- */
.band-mint{ background: var(--mint); }

/* Make the band much shallower */
.intro .container{
  padding-top: 6px;          /* was 12px */
  padding-bottom: 6px;       /* was 12px */
}

/* Reduce headline and paragraph spacing inside the mint band */
.intro h1{ margin-bottom: .15em; }
.intro .lead{ margin-top: 0; margin-bottom: .2em; }
.intro p{ margin: .2em 0; }

/* Decorative leaf in the mint intro band — bigger + flush right */
.intro{ position: relative; }
.decor-leaf-intro{
  position: absolute;
  right: 0;                  /* flush with the right frame (no gap) */
  bottom: -58px;             /* overlap a bit more */
  width: 440px;              /* was 200px */
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.10));
}

/* Keep it sensible on smaller screens */
@media (max-width: 900px){
  .decor-leaf-intro{ right: 0; width: 180px; bottom: -42px; }
}
@media (max-width: 600px){
  .decor-leaf-intro{ right: 0; width: 140px; bottom: -30px; }
}

/* --- About section: compact + plant anchored bottom -------------------- */
.about{ padding: 28px 0 10px !important; }   /* much shorter than the default band padding */
.about .grid-2{ align-items: stretch; min-height: 280px; }

.about-plant{ 
  margin: 0;                     /* kill default figure margin */
  display: flex; 
  align-items: flex-end;         /* bottom-align contents */
  justify-content: flex-end;
}

.about-plant img{
  display: block;
  max-height: 260px;             /* controls visual height */
  width: auto;                   /* keep proportion */
  border-radius: 24px;
  box-shadow: none;
  align-self: flex-end;          /* anchor to bottom of column */
  margin: 0;
  transform: translateY(4px);    /* tiny nudge to sit on the container's bottom line */
}
/* Anchor decorative Buddha to the contact container’s right padding */
#contact .container{ position: relative; }         /* not the whole section */
.decor-buddha{
  position: absolute;
  right: var(--gutter);                            /* hugs container edge */
  bottom: -18px;                                   /* overlap baseline */
  width: 220px;
  height: auto;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.10));
}

@media (max-width: 900px){
  .decor-buddha{ width: 170px; right: var(--gutter); bottom: -14px; }
}
@media (max-width: 600px){
  .decor-buddha{ width: 130px; right: var(--gutter); bottom: -10px; }
}

/* --- Interaction + accessibility polish ------------------------------- */

/* Link color harmony */
a{ color: var(--forest); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover, a:focus{ color: var(--moss); text-decoration: underline; }

/* Buttons: slightly lift on hover */
.btn-pill{
  transition: transform .15s ease, filter .15s ease;
}
.btn-pill:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Form fields focus outline */
input:focus, textarea:focus{
  outline: 2px solid var(--lilac);
  outline-offset: 2px;
}

/* Reduce global motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}
/* === Services: borderless, taller, with background icons =============== */
.card-grid.four{ gap: 28px; }                  /* a hair more space between cards */

.card{
  border: none !important;                    /* remove green stroke */
  background: var(--white);
  border-radius: 16px;
  padding: 20px 22px 72px;                    /* extra bottom room for the icon */
  min-height: 180px;                          /* taller cards */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);     /* soft lift to replace border */
  position: relative;                         /* anchor the icon */
}

/* Icon “sticker” placed near the bottom center */
.card::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;                               /* tune vertically */
  transform: translateX(-50%);
  width: 44px; height: 44px;                  /* tune to your asset size */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .95;
}

/* Per-card icons — point these to your files */
.card:nth-of-type(1)::after{ background-image: url('assets/icons/leaf-1.png'); }
.card:nth-of-type(2)::after{ background-image: url('assets/icons/leaf-2.png'); }
.card:nth-of-type(3)::after{ background-image: url('assets/icons/leaf-3.png'); }
.card:nth-of-type(4)::after{ background-image: url('assets/icons/leaf-4.png'); }
.card:nth-of-type(5)::after{ background-image: url('assets/icons/leaf-5.png'); }
/* Services — larger cards + bigger icons */
.card-grid.four{ gap: 32px; }

.card{
  border-radius: 18px;
  padding: 24px 26px 88px;  /* more breathing room, deeper bottom for icon */
  min-height: 210px;        /* was 180px */
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}

.card::after{
  bottom: 22px;             /* was 18px */
  width: 54px;              /* was 44px */
  height: 54px;             /* was 44px */
  opacity: .98;
}

/* optional: slightly larger card headings */
#services .card h3{ font-size: 1.28rem; }

.case-study {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1rem;
  line-height: 1.6;
}

.note-on-concept {
  background-color: #f7f5f2; /* subtle warm tint */
  border: 1px solid #dcd5c8;
  margin: 0 auto;
  margin-top: 1rem;
  max-width: 820px;
  padding: 2.5rem 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: #333;
}
.project-shot{
  width:80%;           /* same visual width as before */
  margin:2rem auto;    /* centers the whole block */
}

.project-shot img{
  display:block;       /* allows margin auto to center inside the figure */
  width:100%;          /* fills the figure’s 80% width */
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.project-shot figcaption{
  text-align:center; 
  margin-top:.75rem; 
  color:rgba(0,0,0,.6); /* adjust to your token if needed */
}