:root {
  --ink: #22302E;
  --cream: #F7F3EA;
  --sand: #EFE8D8;
  --green2: #8FAF95;
  --green3: #3A4A44;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Karla', sans-serif; color: var(--ink); background: linear-gradient(180deg, #FBF8F0 0%, #F2EAD8 100%); line-height: 1.6; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 500; color: #16302F; line-height: 1.15; }

nav { background: transparent; padding: 0; }
nav .nav-bar { background: var(--green3); padding: 20px 32px 18px; }
nav .inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; row-gap:10px; max-width: 900px; margin: 0 auto; }
nav .name { display:flex; align-items:center; gap:12px; white-space:nowrap; text-decoration:none; }
nav .name img { width:72px; height:72px; object-fit:contain; flex-shrink:0; display:block; }
nav .hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
nav .hamburger span { display:block; width:26px; height:2.5px; background:var(--cream); border-radius:2px; }
nav .name span { font-size:38px; color: var(--cream); white-space:nowrap; font-family:'Fraunces', serif; }
nav .links { display: flex; gap: 18px; font-size: 13.5px; flex-wrap: wrap; }
nav .links a { color: var(--cream); opacity: 0.9; text-decoration: none; }
nav .links a:hover, nav .links a.active { opacity: 1; text-decoration: underline; }
.nav-wave { display:block; width:100%; height:50px; }

.hero { padding: 44px 32px 0; position: relative; overflow: hidden; }
.hero .wrap { max-width: 620px; }
.hero-eyebrow { font-size: 14px; color: var(--green3); margin-bottom: 16px; font-weight: 600; letter-spacing: 0.04em; }
.hero h1 { font-size: 38px; margin-bottom: 24px; line-height: 1.25; }
.hero p { font-size: 17px; color: #445048; max-width: 54ch; line-height: 1.7; }

.photo-placeholder {
  background: linear-gradient(135deg, #E3E56E 0%, #B9DA5E 28%, #7FC1B1 58%, #518271 82%, #253F34 100%);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,0.92); font-family:'Karla',sans-serif; font-size:13px; text-align:center;
  padding: 12px;
}
.hero-photo-organic {
  margin: 36px auto 0; max-width: 520px; aspect-ratio: 4/3;
  border-radius: 46% 54% 38% 62% / 55% 42% 58% 45%;
  box-shadow: 0 30px 60px -20px rgba(31,61,61,0.3);
  overflow: hidden;
}
.hero-photo-organic.portrait { max-width: 320px; aspect-ratio: 3/4; }
.hero-photo-organic.portrait img { object-position: top center; }
.hero-photo-organic img, .story-photo-organic img, .photo-blob img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo-row { display: flex; gap: 18px; margin: 24px 0; flex-wrap: wrap; align-items: flex-start; }
.photo-blob {
  overflow: hidden;
  border-radius: 46% 54% 38% 62% / 55% 42% 58% 45%;
  box-shadow: 0 20px 40px -18px rgba(31,61,61,0.25);
}
.photo-blob.portrait { flex: 0 0 160px; aspect-ratio: 5/7; }
.photo-blob.wide { flex: 1 1 320px; aspect-ratio: 8/5; }
.photo-caption { font-size: 12.5px; color: #6b7563; text-align: center; margin-top: -8px; margin-bottom: 20px; font-style: italic; }

.wave { display: block; width: 100%; height: 90px; }
.page-hero { padding: 50px 32px 30px; position: relative; overflow: hidden; }
.page-hero h1 { font-size: 32px; }
section, .content-section { padding: 56px 32px; }
.bg-sand { background: linear-gradient(180deg, #F6EFDE 0%, #E6DBBE 100%); }
.bg-cream { background: linear-gradient(180deg, #FBF8F0 0%, #EFE6D2 100%); }
.bg-green { background: linear-gradient(180deg, #4C6459 0%, #263A32 100%); color: var(--cream); }

.texture-band {
  height: 200px;
  clip-path: polygon(0.00% 4.00%, 25.00% 0.00%, 50.00% 4.00%, 75.00% 8.00%, 100.00% 4.00%, 100.00% 92.03%, 75.00% 99.17%, 50.00% 95.48%, 25.00% 99.97%, 0.00% 99.97%);
}

h2.section-h { font-size: 26px; margin-bottom: 16px; }
p.body-p { font-size: 16px; color: #33413D; margin-bottom: 14px; }
.bg-green p.body-p { color: #DCE7E2; }

.offer-item { padding: 32px 34px; margin-bottom: 20px; background: linear-gradient(160deg, #FBF8EF 0%, #F4EFDF 100%); border-radius: 48px 14px 42px 18px; box-shadow: 8px 20px 36px -16px rgba(58,74,68,0.22), -6px -6px 22px -18px rgba(255,255,255,0.7); }
.offer-item h3 { font-size: 18px; margin-bottom: 6px; font-weight: 500; }
.offer-item p { font-size: 15px; color: #445048; }

ul.plain { padding-left: 20px; font-size: 16px; color: #33413D; }
ul.plain li { margin-bottom: 6px; }
ul.plain.plain-on-green { padding-left: 0; list-style: none; }
ul.plain.plain-on-green li { color: #DCE7E2; padding: 12px 0 12px 34px; border-bottom: 1px solid rgba(247,243,234,0.15); position: relative; }
ul.plain.plain-on-green li:last-child { border-bottom: none; }
ul.plain.plain-on-green li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 26px; height: 26px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.5C7.5 6 5 11 8.3 16.2c1.1 1.7 2.4 2.6 3.7 2.8 1.3-.2 2.6-1.1 3.7-2.8C18.9 11 16.4 6 12 2.5z" fill="%23C9D6A6"/><path d="M12 4.5V18.6" stroke="%233A4A44" stroke-width="0.9" stroke-linecap="round"/></svg>') no-repeat center / contain;
}
ul.plain.plain-on-green li strong { color: #F7F3EA; }

.story-photo-organic {
  float: right; width: 190px; height: 220px; margin: 4px 0 18px 26px;
  border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%;
  overflow: hidden;
}

.quote { margin-bottom: 26px; padding: 28px 32px; border-radius: 44px 16px 38px 20px; background: linear-gradient(160deg, rgba(251,248,239,0.75), rgba(244,239,223,0.6)); box-shadow: 6px 16px 30px -18px rgba(58,74,68,0.18); }
.quote.featured { background: linear-gradient(160deg, rgba(251,248,239,0.92), rgba(244,239,223,0.8)); box-shadow: 0 14px 34px -18px rgba(58,74,68,0.22); }
.quote p { font-family: 'Karla', sans-serif; font-size: 17px; font-style: normal; font-weight: 400; color: #2C3936; margin-bottom: 10px; line-height: 1.65; }
.quote cite { font-size: 13.5px; color: var(--green3); font-style: normal; }
.quote.pending { opacity: 0.7; }
.pending-tag { display:inline-block; font-size: 11px; color: #8A6D3B; background: #FCEFD2; padding: 2px 8px; border-radius: 10px; margin-bottom: 8px; }

footer { padding: 50px 32px 40px; text-align: center; font-size: 14px; color: #445048; background: var(--sand); }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.cta-row a, .cta-row button, .linkedin-btn, .cv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: #20302B; font-size: 14px; padding: 11px 24px; border-radius: 999px;
  background: linear-gradient(90deg, #D6CDA6 0%, #C2CDAB 35%, #A4B5A0 70%, #7C9587 100%);
  font-weight: 600;
  border: none; cursor: pointer; font-family: 'Karla', sans-serif;
  box-shadow: 0 8px 18px -8px rgba(37,63,52,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-row a:hover, .cta-row button:hover, .linkedin-btn:hover, .cv-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(37,63,52,0.4); }
.linkedin-row { margin-top: 14px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.photo-credit { margin-top: 30px; font-size: 12px; color: #7A8580; }

.next-page { padding: 40px 32px 60px; text-align: center; }
.next-page a { text-decoration: none; color: var(--green3); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--green2); padding-bottom: 2px; }
.cta-row-solo {
  display: inline-flex; align-items: center; text-decoration: none; color: #20302B; font-size: 14px; padding: 11px 26px; border-radius: 999px;
  background: linear-gradient(90deg, #D6CDA6 0%, #C2CDAB 35%, #A4B5A0 70%, #7C9587 100%);
  font-weight: 600; box-shadow: 0 8px 18px -8px rgba(37,63,52,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-row-solo:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(37,63,52,0.4); }

@media (max-width: 480px) {
  .story-photo-organic { float: none; width: 100%; height: 200px; margin: 0 0 18px; }
}

@media (max-width: 760px) {
  nav .inner { position: relative; }
  nav .hamburger { display:flex; }
  nav .links { display:none; width:100%; flex-direction:column; gap:2px; margin-top:16px; }
  nav .links.open { display:flex; }
  nav .links a { padding:10px 4px; border-bottom:1px solid rgba(247,243,234,0.12); }
}

.footer-logo { display: flex; justify-content: center; margin-top: 34px; opacity: 0.65; }
.footer-logo img { width: 32px; height: 32px; object-fit: contain; }

.contact-flex { display: flex; align-items: center; gap: 36px; justify-content: center; flex-wrap: wrap; }
.contact-buttons { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 380px; }
@media (max-width: 640px) {
  .contact-flex { flex-direction: column; align-items: center; text-align: center; }
  .contact-buttons { align-items: center; }
  .contact-buttons .cta-row, .contact-buttons .linkedin-row { justify-content: center !important; }
}
