/* RESET & BASE ----------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  display:block;
}
body{line-height:1; background:#F0EDE3; color:#32362C;}
ol,ul{list-style:none;}
a{text-decoration:none; color:inherit; transition:color 0.2s;}
img{max-width:100%; height:auto; display:block;}
button{border:none; background:none; cursor:pointer; font-family:inherit;}
:focus{outline:2px solid #C3B092; outline-offset:2px;}

/* VARIABLES --------------------------*/
:root {
  --primary: #4B5A4F;
  --secondary: #C3B092;
  --accent: #70996B;
  --background: #F0EDE3;
  --text: #32362C;
  --success: #799666;
  --error: #AB5A52;
  --shadow: 0 4px 16px rgba(75,90,79,0.07);
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 10px;
  --organic-blob: polygon(81% 0, 100% 44%, 87% 91%, 23% 100%, 0 53%, 15% 6%);
}

/* TYPOGRAPHY ------------------------*/
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand:700&display=swap');
body {
  font-family: 'Nunito', Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--text);
  background:var(--background);
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Quicksand', Arial, sans-serif;
  color:var(--primary);
}
h1 { font-size:2.5rem; font-weight:700; margin-bottom:16px; }
h2 { font-size:2rem; font-weight:700; margin-bottom:14px; }
h3 { font-size:1.3rem; font-weight:600; margin-bottom:8px; }
h4,h5,h6 { font-weight:600; }
p,li,ul,ol {
  font-size:1.07rem;
  line-height:1.65;
  color:var(--text);
}
strong { color:var(--primary); font-weight:700; }

@media (max-width: 767px) {
  h1 { font-size:2rem; }
  h2 { font-size:1.35rem; }
  h3 { font-size:1.1rem; }
}

/* LAYOUT CONTAINERS -----------------*/
.container {
  width:100%; max-width:1200px; margin:0 auto; padding:0 20px;
}
.section {
  margin-bottom:60px; padding:40px 20px;
}
.content-wrapper {
  display:flex; flex-direction:column; gap:18px; border-radius:var(--radius-md);
}
.text-section {
  background:rgba(97,110,85,0.09); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:30px 18px; gap:16px;
}
.card-container{
  display:flex; flex-wrap:wrap; gap:24px;
}
.card{
  margin-bottom:20px; position:relative; background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  padding: 28px 22px;
  min-width:260px;
  flex:1 1 260px;
}
.content-grid{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
}
.text-image-section{
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
}
.testimonial-card{
  display:flex; align-items:center; gap:20px; padding:20px; background:#fff;
  border-left:8px solid var(--secondary);
  border-radius:var(--radius-md) var(--radius-lg) var(--radius-md) var(--radius-md);
  margin-bottom:20px;
  box-shadow:0 2px 10px rgba(75,90,79,0.06);
  min-width:0;
  transition:box-shadow 0.2s;
}
.testimonial-card:hover,
.testimonial-card:focus-within{
  box-shadow:0 6px 24px rgba(75,90,79,.11);
}
.feature-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:15px;
}


@media (max-width: 1024px) {
  .container{ max-width:980px; }
  .card, .text-section { padding:22px 8px; }
}
@media (max-width: 800px) {
  .card-container, .content-grid{
    flex-direction:column;
    gap:18px;
  }
}
@media (max-width: 768px) {
  .container{ padding:0 8px; }
  .content-wrapper, .text-section{ padding:18px 7px; }
  .section { padding:20px 6px; }
  .text-image-section {
    flex-direction:column;
    gap:20px;
  }
  .testimonial-card{ flex-direction:column; gap:10px; align-items:flex-start; }
}


/* HEADER & NAV ----------------------*/
header {
  width:100%; background:#fff; box-shadow: 0 2px 10px rgba(75,90,79,0.08);
  padding:14px 0; position:sticky; top:0; z-index:20;
  display:flex; flex-direction:column;
}
header > a img {
  height:44px; width:auto; margin:0 0 0 8px;
}
header nav {
  display:flex; flex-direction:row; align-items:center; gap:28px;
  margin-top:14px; margin-bottom:12px;
}
header nav a {
  font-family:'Quicksand', Arial, sans-serif;
  color:var(--primary); font-size:1.08rem; letter-spacing:0.01em;
  padding:6px 14px; border-radius:var(--radius-sm);
  transition:background 0.16s,color 0.16s;
}
header nav a:hover, header nav a:focus {
  background:var(--secondary); color:#fff;
}
@media (max-width: 1024px) {
  header nav { gap:20px; }
}
@media (max-width: 900px) {
  header nav { gap:12px; }
}

/* MOBILE BURGER MENU ---------------*/
.mobile-menu-toggle {
  display:none;
  background:var(--primary);
  color:#fff;
  width:44px; height:44px;
  font-size:1.7rem;
  border-radius:var(--radius-md);
  position:absolute; top:16px; right:20px;
  align-items:center; justify-content:center;
  z-index:31;
  box-shadow:0 2px 10px rgba(97,110,85,0.09);
  transition:background .2s;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
  background: var(--secondary);
}
@media (max-width: 900px) {
  header nav { display:none; }
  .mobile-menu-toggle {
    display:flex;
  }
}

.mobile-menu {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(75,90,79,0.97);
  color:#fff;
  z-index:99;
  transform:translateX(-110vw); /* slide left */
  transition:transform 0.36s cubic-bezier(.87,-0.12,.27,1.16);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  padding:36px 0 0 0;
  box-shadow:0 10px 32px rgba(75,90,79,0.17);
}
.mobile-menu.open {
  transform:translateX(0);
}
.mobile-menu-close {
  color:var(--secondary); font-size:2.2rem;
  background:none;
  padding:8px; align-self:flex-end;
  margin:0 24px 18px 0;
  border-radius:var(--radius-sm);
  transition:background 0.2s, color 0.18s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background:rgba(195,176,146,0.13); color:#fff;
}
.mobile-nav {
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  width:100%; padding:0 28px;
  margin-top:22px;
}
.mobile-nav a{
  font-family:'Quicksand', Arial, sans-serif;
  color:#fff;
  font-size:1.19rem; padding:14px 0; border-radius:var(--radius-sm);
  width:100%; display:block;
  transition:background 0.18s,color 0.13s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background:rgba(195,176,146,0.19); color:var(--secondary);
}
@media (min-width: 901px) {
  .mobile-menu,.mobile-menu-toggle { display:none!important; }
}

/* MAIN & BUTTONS -------------------*/
.btn-primary, .btn-secondary {
  display:inline-flex;
  align-items:center; justify-content:center;
  border:none; cursor:pointer;
  font-family:'Quicksand', Arial, sans-serif;
  font-weight:700;
  font-size:1.1rem;
  border-radius:var(--radius-md);
  transition:background .19s, color .17s, transform .12s;
  padding: 12px 38px;
  margin-top:8px;
  box-shadow:var(--shadow);
}
.btn-primary {
  background:var(--primary); color:#fff;
}
.btn-primary:hover, .btn-primary:focus {
  background:var(--secondary); color:var(--primary); transform:translateY(-2px) scale(1.04);
}
.btn-secondary {
  background:var(--secondary); color:var(--primary);
}
.btn-secondary:hover, .btn-secondary:focus {
  background:var(--primary); color:#fff; transform:translateY(-2px) scale(1.04);
}
@media (max-width: 430px) {
  .btn-primary, .btn-secondary { font-size:1rem; padding:10px 20px; }
}

/* UL & LI STYLES -------------------*/
ul, ol {
  margin-left:0; margin-bottom:10px;
}
ul li, ol li {
  position:relative; padding-left:30px; margin-bottom:10px;
  color:var(--text); font-size:1.06rem;
}
ul li img {
  position:absolute; left:0; top:3px; width:20px; height:20px; object-fit:contain; margin-right:8px; border-radius:var(--radius-sm);
}
ul li strong { color:var(--primary); }
@media (max-width:500px) {
  ul li, ol li { padding-left:20px; }
}

/* ORGANIC SHAPES & TEXTURES --------*/
.section, .content-wrapper, .text-section, .card, .testimonial-card {
  border-radius:var(--radius-md);
}
.section {
  background: linear-gradient(120deg,rgba(241,239,226,1) 80%,rgba(195,176,146,0.07) 100%);
  box-shadow: 0 2px 8px rgba(107,110,90,0.05);
  position:relative;
}
.section::before {
  content:'';
  display:block;
  position:absolute; left:-43px; top:-25px;
  width:110px; height:90px;
  background:var(--accent);
  opacity:0.09;
  clip-path: polygon(80% 0, 100% 50%, 85% 100%, 25% 100%, 0 50%, 15% 10%);
  z-index:0;
}
@media (max-width: 490px) {
  .section::before { display:none; }
}

.text-section, .content-wrapper {
  position:relative;
  background:rgba(195,176,146,0.11);
  z-index:1;
}

/* CARDS -----------------------------*/
.card, .testimonial-card {
  background:#fff;
  box-shadow:var(--shadow);
  border-radius:var(--radius-lg);
  transition:box-shadow .18s, transform .13s;
}
.card:hover,.card:focus-within {
  box-shadow:0 8px 26px 2px rgba(107,110,90,0.08);
  transform:translateY(-2px) scale(1.01);
}

/* TESTIMONIALS ---------------------*/
.testimonial-card p{
  color:var(--primary); font-family:'Nunito', sans-serif; font-size:1.09rem; font-style:italic; margin-bottom:0;
}
.testimonial-card span {
  color:var(--secondary); font-weight:700; font-size:1rem; font-family:'Quicksand', sans-serif;
}

/* FOOTER ---------------------------*/
footer {
  background:var(--primary);
  color:var(--background);
  padding:36px 0 18px 0;
}
footer .container{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:32px;
  align-items:flex-start;
  justify-content:space-between;
}
footer nav {
  display:flex; flex-direction:column; gap:14px;
}
footer nav a{
  color:var(--accent); font-family:'Quicksand', sans-serif;
  font-size:1rem; transition:color .14s;
}
footer nav a:hover, footer nav a:focus {
  color:var(--secondary);
  text-decoration:underline;
}
.footer-legal { margin-top:18px; font-size:0.97rem; color:var(--accent); }
@media (max-width: 900px) {
  footer .container{ flex-direction:column; gap:14px; }
  .footer-legal { margin-top:12px; }
  footer nav { flex-direction:row; flex-wrap:wrap; gap:20px; }
}

/* MICRO-INTERACTIONS ---------------*/
a:not(.btn-primary):not(.btn-secondary):hover, a:not(.btn-primary):not(.btn-secondary):focus{
  color:var(--secondary);
  text-decoration:underline;
  transition:color 0.15s;
}
button:active, .btn-primary:active, .btn-secondary:active {
  transform:scale(0.97);
}

/* ACCESSIBILITY FOCUS --------------*/
.btn-primary:focus, .btn-secondary:focus, .mobile-menu-close:focus {
  outline:2px solid var(--accent) !important;
  outline-offset:1.5px;
}

/* COOKIE CONSENT BANNER ------------*/
.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  width:100%; z-index:200;
  background:rgba(241,237,227,0.95);
  box-shadow:0 -2px 24px rgba(75,90,79,0.12);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 28px;
  font-size:1rem;
  color:var(--primary);
  transition:transform 0.33s;
  transform:translateY(0);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.cookie-banner.hide {
  transform:translateY(120px);
}
.cookie-banner .cookie-actions {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}
.cookie-banner button {
  border:none; border-radius:var(--radius-md);
  padding:8px 20px; font-size:1em; font-family:'Quicksand', Arial, sans-serif;
  box-shadow:0 0 8px rgba(75,90,79,0.06);
  transition:background .17s, color .13s;
  margin-left:0; min-width:112px;
}
.cookie-accept {
  background:var(--primary); color:#fff;
}
.cookie-accept:hover, .cookie-accept:focus { background:var(--secondary); color:var(--primary); }
.cookie-reject {
  background:var(--secondary); color:var(--primary);
}
.cookie-reject:hover, .cookie-reject:focus { background:#fff; color:var(--secondary); }
.cookie-settings {
  background:#fff; color:var(--primary); border:1.3px solid var(--primary);
}
.cookie-settings:hover, .cookie-settings:focus { background:var(--accent); color:#fff; }

@media (max-width: 600px) {
  .cookie-banner { flex-direction:column; align-items:flex-start; gap:14px; padding:14px 8px; border-radius:var(--radius-md); font-size:0.98rem; }
  .cookie-banner .cookie-actions { gap:10px; }
}

/* COOKIE PREFERENCE MODAL ----------*/
.cookie-modal {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-55%) scale(1);
  background:#fff; z-index:5000;
  border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(75,90,79,0.19);
  padding:44px 38px 30px 38px;
  min-width:330px;
  max-width:94vw;
  width:450px;
  transition:opacity .18s;
  opacity:1;
}
.cookie-modal.hide {
  opacity:0; pointer-events:none;
}
.cookie-modal h2 {
  margin-top:0; font-size:1.4rem; color:var(--primary);
}
.cookie-modal ul {
  margin:8px 0 18px 0; padding:0;
}
.cookie-modal li {
  margin-bottom:14px; padding:0 0 0 2px; font-size:1.04rem; color:var(--text);
}
.cookie-switch-row {
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:18px;
}
.cookie-switch {
  position:relative; display:inline-block; width:44px; height:24px;
}
.cookie-switch input { display:none; }
.cookie-slider {
  background:var(--secondary);
  border-radius:24px; position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  transition:background .18s;
}
.cookie-switch input:checked + .cookie-slider {
  background:var(--primary);
}
.cookie-slider:before {
  content: "";
  position:absolute; left:3.5px; top:3.2px;
  width:17px; height:17px;
  background:white;
  border-radius:100%;
  transition:transform .2s cubic-bezier(.7,0,.15,1);
  box-shadow:0 2px 8px rgba(75,90,79,0.10);
}
.cookie-switch input:checked + .cookie-slider:before { transform:translateX(18px); }
.cookie-essential-label { color:var(--primary); font-size:1rem; font-weight:700; }
.cookie-modal-actions {
  margin-top:14px;
  display:flex; flex-direction:row; gap:13px;
  justify-content:flex-end;
}
.cookie-modal-actions button {
  border:none; border-radius:var(--radius-md);
  font-family:'Quicksand',sans-serif; font-size:1.06rem; padding:9px 28px;
  background:var(--secondary); color:var(--primary);
  transition:background 0.19s,color .13s;
}
.cookie-modal-actions .cookie-accept{
  background:var(--primary); color:#fff;
}
.cookie-modal-actions .cookie-accept:hover, .cookie-modal-actions .cookie-accept:focus{
  background:var(--accent); color:#fff;
}
.cookie-modal-actions .cookie-reject {
  background:var(--secondary); color:var(--primary);
}
.cookie-modal-actions .cookie-reject:hover, .cookie-modal-actions .cookie-reject:focus{
  background:#fff; color:var(--secondary);
}
@media (max-width:480px) {
  .cookie-modal { width:95vw; min-width:0; padding:17px 6vw 12px 8vw; }
}

/* MISC. INTERACTIVE ---------------*/
input, select, textarea {
  font-family: 'Nunito', Arial, sans-serif;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--secondary);
  background:#F9F8F3;
  font-size:1.07rem;
  padding:10px 14px;
  color:var(--primary);
  margin-bottom:13px;
  box-shadow:0 1px 4px rgba(75,90,79,0.06);
}
input:focus, textarea:focus, select:focus {
  border-color:var(--primary); outline:none;
}

/* CUSTOM ORGANIC DECOR -------------*/
.organic-shape {
  background:var(--accent);
  clip-path:var(--organic-blob);
  position:absolute; z-index:0;
  opacity:0.08;
  width:90px; height:70px;
  left:-33px; top:-18px;
}

/* HELPER CLASSES -------------------*/
.mt-32 { margin-top:32px; }
.mt-24 { margin-top:24px; }
.mt-16 { margin-top:16px; }
.mt-8 { margin-top:8px; }
.mr-20 { margin-right:20px; }
.mb-32 { margin-bottom:32px; }
.mb-24 { margin-bottom:24px; }
.mb-16 { margin-bottom:16px; }
.mb-8 { margin-bottom:8px; }
.text-center { text-align:center; }
.flex-row { display:flex; flex-direction:row; gap:26px; }
.flex-col { display:flex; flex-direction:column; gap:18px; }

/* RESPONSIVE SPACINGS --------------*/
@media (max-width: 600px) {
  .mt-32,.mb-32{ margin-top:18px; margin-bottom:18px; }
  .mt-24,.mb-24{ margin-top:12px; margin-bottom:12px; }
  .mt-16,.mb-16{ margin-top:8px; margin-bottom:8px; }
}

/* END ----------------------------------------*/
