/* ==== CSS RESET & NORMALIZE ==== */
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,font,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,main,menu,nav,section { display: block; }
body { line-height:1.5; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
*, *::before, *::after { box-sizing:border-box; }
img { max-width:100%; display:block; border:0; }
a { text-decoration:none; color:inherit; transition:color 0.2s; }
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; background:transparent; border:none; outline:none; }

/* ==== NATURE ORGANIC THEME: EARTH TONES, ORGANIC SHAPES ==== */
:root {
  --brand-primary: #205072;
  --brand-secondary: #38A3A5;
  --brand-accent: #FFFFFF;
  --earth-beige: #f5f3ef;
  --nature-stone: #ebe5df;
  --nature-green: #59806a;
  --nature-sand: #dcc9a6;
  --nature-brown: #7e6651;
  --nature-shadow: rgba(45,65,51,0.07);
  --font-display: 'Montserrat',Arial,sans-serif;
  --font-body: 'Roboto',Arial,sans-serif;
  --radius-md: 20px;
  --radius-lg: 48px;
  --shadow-md: 0 4px 16px var(--nature-shadow);
  --shadow-lg: 0 12px 28px var(--nature-shadow);
  --brand-gradient: linear-gradient(94deg, var(--nature-sand) 0%, var(--nature-green) 53%, var(--brand-secondary) 100%);
}

body {
  font-family: var(--font-body);
  background: var(--earth-beige);
  color: #2c3c2e;
  font-size:16px;
  min-height:100vh;
  letter-spacing: 0.02em;
}

.container {
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;
}

header {
  width: 100%;
  background: var(--earth-beige);
  box-shadow:0 2px 12px var(--nature-shadow);
  position: relative;
  z-index: 7;
}
header .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:70px;
  gap: 16px;
}
header nav {
  display:flex;
  gap: 20px;
}
header nav a {
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  padding: 8px 4px;
  color: var(--brand-primary);
  position:relative;
  border-radius:8px;
  transition:background 0.18s, color 0.18s;
}
header nav a:hover, header nav a:focus {
  background: var(--nature-sand);
  color: var(--nature-green);
}
header a.btn, header .btn {
  margin-left: 18px;
}
header img {
  height: 44px;
  border-radius: var(--radius-md);
  background:transparent;
}

/* -- Burger Menu Icon -- */
.mobile-menu-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  width:44px;
  height:44px;
  background: var(--brand-green, var(--brand-secondary));
  color:var(--brand-accent);
  border-radius: 50%;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  border: none;
  margin-left: 10px;
  transition:background 0.2s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
  background: var(--brand-primary);
}

@media (min-width:992px) {
  .mobile-menu-toggle {
    display:none;
  }
}

/* ---- Mobile Menu Styles ---- */
.mobile-menu {
  position:fixed;
  z-index:99;
  inset:0;
  background:rgba(32,80,114,0.90);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  opacity: 0;
  pointer-events: none;
  transform:translateX(100%);
  transition:opacity 0.2s,transform 0.35s cubic-bezier(.79,-0.01,.27,1.02);
}
.mobile-menu.open {
  opacity:1;
  pointer-events: all;
  transform:translateX(0);
}
.mobile-menu-close {
  font-size:2.2rem;
  background: var(--brand-accent);
  color:var(--brand-primary);
  border:none;
  margin:18px 32px 0 0;
  border-radius:50%;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:background 0.13s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
  background: var(--nature-sand);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap: 18px;
  width:100%;
  padding:48px 32px 0 0;
  align-items:flex-end;
}
.mobile-nav a {
  color: var(--brand-accent);
  background:rgba(255,255,255,0.08);
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:0.03em;
  padding:16px 26px;
  border-radius:var(--radius-lg);
  margin:0 0 8px 0;
  transition:background 0.17s, color 0.14s;
  width:fit-content;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  background:var(--nature-sand);
  color:var(--nature-green);
}

@media (min-width:992px) {
  .mobile-menu { display:none !important; }
}

/* Hide nav on mobile, show burger */
@media (max-width:991px) {
  header nav {
    display: none !important;
  }
  header a.btn {
    display:none !important;
  }
}
@media (min-width:992px) {
  .mobile-menu, .mobile-menu.open {
    display:none !important;
  }
}

/* =============== LAYOUT FLEXBOX HELPERS =============== */
.section {
  background: var(--brand-accent);
  margin-bottom: 60px;
  padding: 40px 20px;
  border-radius: var(--radius-lg);
  box-shadow:var(--shadow-md);
}
main > section {
  margin-bottom: 60px;
  padding-top:32px;
  border-radius: var(--radius-lg);
  background: var(--brand-accent);
  box-shadow:var(--shadow-md);
}
@media (max-width: 600px) {
  main > section, .section { padding: 28px 4vw; border-radius:18px; }
}
.content-wrapper {
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
  margin-top:22px;
}

.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.card {
  background: var(--earth-beige);
  border-radius: var(--radius-md);
  margin-bottom:20px;
  position:relative;
  box-shadow: var(--shadow-md);
  padding:28px 22px;
  min-width:280px;
  flex:1 1 320px;
  transition: box-shadow 0.22s, transform 0.22s;
}
.card:hover, .card:focus-within {
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px) scale(1.015);
}
.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;
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}

.testimonial-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:20px;
  background: var(--nature-sand);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 9px var(--nature-shadow);
  margin-bottom:22px;
  color:#212921;
  font-style:italic;
  min-width:260px;
  transition:box-shadow 0.18s,transform 0.18s;
}
.testimonial-card:hover, .testimonial-card:focus-within {
  box-shadow:0 8px 24px var(--nature-shadow);
  transform: translateY(-3px) scale(1.012);
  background: var(--nature-stone);
}
.testimonial-card h4 {
  margin:0;
  font-size:16px;
  font-weight:600;
  font-family:var(--font-display);
  color:var(--brand-primary);
  font-style:normal;
}

.contact-methods {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
}
.contact-methods > div {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  background:var(--nature-stone);
  padding:10px 18px;
  border-radius:14px;
  color:var(--brand-primary);
  font-weight:500;
  min-width: 200px;
}

@media (max-width: 768px) {
  .container { padding:0 5vw; }
  .section, main > section { padding: 20px 4vw; margin-bottom:32px; }
  .content-wrapper { gap:18px; margin-top:10px; }
  .testimonial-card, .card { min-width:220px; padding:16px 10px; }
  .card-container, .contact-methods, .content-grid{gap:15px;}
  .text-image-section { flex-direction:column; gap:18px; }
}
@media (max-width:560px) {
  .content-grid, .card-container, .contact-methods{
    flex-direction:column;
    align-items:stretch;
  }
  .testimonial-card, .card {width:100%;}
  .feature-item {gap:10px;}
}

/* ==== TYPOGRAPHY ==== */
h1,h2,h3,h4,h5 { font-family:var(--font-display); color:var(--brand-primary); font-weight:700; }
h1 {
  font-size:2.6rem;
  line-height:1.14;
  margin-bottom:16px;
  letter-spacing: .01em;
}
h2 {
  font-size:2rem;
  margin-bottom:10px;
  line-height:1.2;
}
h3 {
  font-size:1.34rem;
  font-weight:600;
}
h4 { font-size:1rem; font-weight:500; }
p,li,ul,ol { font-size:1rem; }
p,ul,ol{color:#2c3c2e; margin-bottom:10px;}
strong { font-weight:600; color:var(--nature-brown); }
a { color:var(--brand-secondary); }
a:hover, a:focus { color: var(--brand-primary); }
.text-section ul, .text-section ol {
  margin:0 0 16px 22px;
  padding-left:18px;
  color:#374735;
  line-height:1.8;
  font-size:1rem;
}
.text-section li {margin-bottom:7px;}
.text-section h3 {margin:20px 0 10px 0;font-size:1.07rem;color:var(--nature-green);}

/* =============== BUTTONS =============== */
.btn, .btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px var(--nature-shadow);
  padding: 13px 32px;
  min-width: 160px;
  background: var(--brand-secondary);
  color: var(--brand-accent);
  cursor:pointer;
  transition: background 0.15s, color 0.16s, box-shadow 0.16s, transform 0.13s;
  border:none;
  outline:none;
  margin-top:7px;
}
.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-accent);
}
.btn:hover, .btn:focus, .btn-primary:hover, .btn-primary:focus {
  background:var(--nature-green);
  color:var(--brand-accent);
  box-shadow: 0 8px 24px var(--nature-shadow);
  transform:translateY(-2px) scale(1.027);
}
/* OUTLINE BUTTON (for secondary actions) */
.btn-outline {
  background:transparent;
  border:2px solid var(--brand-secondary);
  color:var(--brand-secondary);
}
.btn-outline:hover, .btn-outline:focus {
  background:var(--brand-secondary);
  color:var(--brand-accent);
}

/* =============== CARDS & LISTS =============== */
.service-cards {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.service-cards .text-section {
  background: var(--nature-stone);
  border-radius:var(--radius-md);
  box-shadow:0 1px 7px var(--nature-shadow);
  padding:22px 16px 14px 16px;
  flex:1 1 300px;
  min-width:240px;
  transition: box-shadow 0.14s;
}
.service-cards .text-section:hover {
  box-shadow:0 6px 16px var(--nature-shadow);
}
.content-wrapper ul, .content-wrapper ol {
  display:flex;
  flex-direction:column;
  gap:13px;
}
.content-wrapper ul li, .content-wrapper ol li {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--nature-stone);
  border-radius:12px;
  padding:10px 18px;
  color:#2c3c2e;
  font-size:1rem;
  box-shadow:0 1px 5px var(--nature-shadow);
}
.content-wrapper ul li img, .content-wrapper ol li img {
  width:29px; height:29px; border-radius:8px;background:var(--nature-sand);}

.location-info, .contact-hours {
  background:var(--nature-stone);
  border-radius:var(--radius-md);
  padding:18px 16px;
  margin-bottom:18px;
  color:#374735;
  font-size:1rem;
  box-shadow:0 1px 7px var(--nature-shadow);
  font-weight:500;
}
.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
}
.contact-details > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--nature-stone);
  border-radius: 14px;
  padding: 9px 13px;
  font-size: 0.97rem;
  color: var(--brand-primary);
  min-width:180px;
}
.contact-details img { width:22px; height:22px; }

/* =============== FOOTER =============== */
footer {
  background:var(--nature-green);
  color:#fff;
  padding:48px 0 22px 0;
  font-size:15px;
  border-radius:48px 48px 0 0;
  margin-top:48px;
  box-shadow:0 -2px 14px var(--nature-shadow);
}
footer .container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom:8px;
}
.footer-nav a {
  color: #f5f3ef;
  font-family:var(--font-display);
  font-size:16px;
  transition:color 0.12s;
}
.footer-nav a:hover, .footer-nav a:focus {
  color:var(--nature-sand);
}
.contact-info {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.contact-info p {
  display:flex;
  gap:7px; align-items: center;
  color:#fbf8f2;
  font-size:0.98rem;
  margin-bottom:0;
}
.contact-info img {
  width:18px; height:18px;
}
.social-links {
  display:flex;
  gap:16px;
  margin-bottom:9px;
}
footer .social-links a {
  border-radius:50%;
  padding:8px;
  box-shadow:0 1px 4px var(--nature-shadow);
  background:rgba(255,255,255,0.06);
  transition:background 0.11s;
  display:inline-flex;
  align-items:center;justify-content:center;
}
footer .social-links a:hover {
  background:var(--brand-secondary);
}

footer p:last-child { color: #e0e0da; margin-top:24px; }

@media (max-width: 992px) {
  footer .container { gap:18px; padding:0 10px; }
  .footer-nav { gap:15px; }
}
@media (max-width: 600px) {
  footer { padding:32px 0 8px 0; border-radius:18px 18px 0 0; margin-top:22px; }
  .footer-nav { flex-direction:column; gap:7px; }
  .contact-info { flex-direction:column; gap:7px; }
  .social-links { gap:9px; }
}

/* =============== COOKIE CONSENT BANNER =============== */
.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:100;
  background: var(--earth-beige);
  color:#203c26;
  box-shadow: 0 -2px 12px var(--nature-shadow);
  padding: 24px 20px 19px 20px;
  border-radius: 22px 22px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 18px;
  justify-content: space-between;
  opacity:1;
  transition:opacity 0.28s, transform 0.28s;
  pointer-events:all;
  font-size: 1rem;
}
.cookie-banner.hidden {
  opacity:0;
  pointer-events: none;
  transform: translateY(100%);
}
.cookie-banner .cookie-banner-buttons {
  display:flex;
  gap:12px;
}
.cookie-banner button {
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  border-radius:16px;
  padding:10px 22px;
  border:none;
  cursor:pointer;
  box-shadow: 0 2px 7px var(--nature-shadow);
  transition:background 0.13s, color 0.1s, box-shadow 0.12s;
  outline:none;
}
.cookie-banner .accept {
  background:var(--nature-green);
  color:var(--brand-accent);
}
.cookie-banner .accept:hover,.cookie-banner .accept:focus { background: var(--brand-primary); }
.cookie-banner .reject {
  background:transparent;
  border:2px solid var(--nature-brown);
  color:var(--nature-brown);
}
.cookie-banner .reject:hover,.cookie-banner .reject:focus {
  background:var(--nature-brown);
  color:var(--brand-accent);
}
.cookie-banner .settings {
  background:var(--earth-beige);
  border:2px solid var(--nature-green);
  color:var(--nature-green);
}
.cookie-banner .settings:hover, .cookie-banner .settings:focus {
  background:var(--nature-green);
  color:var(--brand-accent);
}
@media(max-width:640px){
  .cookie-banner{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 8px;}
  .cookie-banner .cookie-banner-buttons{gap:7px;margin-top:7px;}
}

/* ---- Cookie Modal ---- */
#cookie-modal {
  position:fixed;
  z-index:130;
  left:0; top:0; right:0; bottom:0;
  background:rgba(32,80,114,0.28);
  display:none;
  justify-content:center;
  align-items:center;
}
#cookie-modal.open { display:flex; }
.cookie-modal-content {
  background:var(--earth-beige);
  border-radius:32px;
  box-shadow:0 16px 48px 0 rgba(84,80,67,0.16);
  padding:38px 28px 28px 28px;
  max-width:360px;
  width:92vw;
  font-family:var(--font-body);
  color:var(--brand-primary);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
}
.cookie-modal-content h2 {
  font-size:1.5rem;
  margin-bottom:6px;
  color: var(--brand-primary);
}
.cookie-modal-content .close-cookie-modal {
  position:absolute;
  top:10px; right:16px;
  background:transparent;
  color:var(--brand-primary);
  font-size:2rem;
  border:none;
  cursor:pointer;
  transition:color 0.11s;
}
.cookie-modal-content .close-cookie-modal:hover,
.cookie-modal-content .close-cookie-modal:focus{
  color:var(--nature-brown);
}
.cookie-modal-category {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
}
.cookie-modal-category label {
  font-weight:600;
  font-size:1.07rem;
}
.cookie-modal-category input[type=checkbox]{
  accent-color:var(--nature-green);
  width:20px;height:20px;
}
.cookie-modal-description {
  font-size:0.98rem;
  color:var(--nature-brown);
  margin-bottom:7px;
}
.cookie-modal-btns {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:12px;
}
.cookie-modal-btns button {
  font-family:var(--font-display);
  font-size:15px;
  border-radius:16px;
  padding:9px 17px;
  border:none;
  cursor:pointer;
  background:var(--nature-green);
  color:var(--brand-accent);
  transition:background 0.12s;
}
.cookie-modal-btns button:hover,
.cookie-modal-btns button:focus {
  background:var(--brand-primary);
}

/* =============== MICRO-INTERACTIONS =============== */
.btn, .btn-primary, .mobile-menu-toggle, .mobile-menu-close, .cookie-banner button, .cookie-modal-btns button {
  transition: background 0.16s, color 0.14s, box-shadow 0.15s, transform 0.11s;
}
.btn:active, .btn-primary:active, .mobile-menu-close:active, .mobile-menu-toggle:active, .cookie-banner button:active {
  transform:scale(0.98);
}

/* =============== VISUAL TEXTURES =============== */
.section, main > section, .card, .testimonial-card, .service-cards .text-section {
  background:linear-gradient(164deg, var(--nature-sand) 0%, var(--earth-beige) 71%, var(--brand-accent) 100%);
}

.card, .testimonial-card, .service-cards .text-section {
  border:2px solid var(--nature-stone);
  box-shadow:var(--shadow-md);
}

/* =============== MISC UTILITY CLASSES & OVERRIDES =============== */
::-webkit-scrollbar { width:9px; background:var(--nature-stone); border-radius:6px; }
::-webkit-scrollbar-thumb { background:var(--nature-brown); border-radius:6px; }
::-webkit-input-placeholder { color: #a0ac99; }
::-moz-placeholder { color: #a0ac99; }
:-ms-input-placeholder { color: #a0ac99; }
::placeholder { color: #a0ac99; }

/* Hide unwanted outlines but keep accessibility */
a, button, .btn, .btn-primary {
  outline-color:var(--brand-secondary);
  outline-width:2px;
  outline-style:auto;
}

hr { border:none; height:1px; background:var(--nature-stone); margin:28px 0;}

/* =============== END =============== */