/* 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,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,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;box-sizing:border-box}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:inherit}table{border-collapse:collapse;border-spacing:0}img{max-width:100%;height:auto;display:block}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button{background:none;border:none;cursor:pointer}*,*::before,*::after{box-sizing:border-box}

/* BRAND FONTS ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,600,500,400,300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300&display=swap');

:root {
  --primary: #22577A;
  --secondary: #38A3A5;
  --accent: #F6F5F5;
  --bg-gradient: linear-gradient(108deg, #38A3A5 0%, #22577A 100%);
  --bg-gradient-reverse: linear-gradient(270deg, #22577A 0%, #38A3A5 100%);
  --cta-gradient: linear-gradient(90deg,#38A3A5 0%, #57CC99 100%);
  --text-main: #222831;
  --shadow: 0 4px 18px rgba(34,87,122,0.07), 0 1.5px 6px rgba(56,163,165,0.10);
  --shadow-card: 0 4px 20px rgba(56, 163, 165, 0.07);
  --radius: 18px;
  --radius-small: 9px;
  --transition: all 0.28s cubic-bezier(.77,0,.18,1);
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--text-main);
  background: var(--accent);
  font-size: 16px;
  min-height: 100vh;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
  letter-spacing: 0.01em;
}
h1 {font-size: 2.7rem; margin-bottom: 18px;}
h2 {font-size: 2rem; margin-bottom: 14px;}
h3 {font-size: 1.3rem; margin-bottom: 8px;}
@media (max-width:600px) {
  h1 {font-size: 2rem;}
  h2 {font-size: 1.5rem;}
}

p, ul, ol, address, table, blockquote {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1rem;
  color: var(--text-main);
  margin-bottom: 14px;
}
a {
  color: var(--secondary);
  text-decoration: none;
  transition: color .18s;
}
a:hover, a:focus {color: var(--primary);}

strong, b {font-weight: 600;}

/* CSS SPACING AND FLEXBOX LAYOUT ------------------------------------------- */
.container {
  width: 100%;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
  max-width: 1200px;
}
.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  margin-bottom: 20px;
  position: relative;
  background: #fff;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
}
.card:hover {box-shadow: 0 4px 32px rgba(34,87,122,0.12);}
.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;
}
@media (max-width: 768px) {
  .text-image-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}
.testimonial-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background:#fff;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  margin-bottom: 20px;
  flex-direction: column;
  transition: var(--transition);
}
.testimonial-card blockquote {
  font-size: 1.12rem;
  font-style: italic;
  color: var(--primary);
  margin-bottom: 8px;
}
.testimonial-card footer {
  font-size: 0.98rem;
  color: var(--secondary);
  font-weight: 600;
  align-self: flex-end;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 18px;
  min-width: 215px;
  flex: 1 1 210px;
  transition: box-shadow .18s;
}
.feature-item img {
  width: 46px; height: 46px;
}
.feature-item:hover {box-shadow:0 10px 30px rgba(34,87,122,0.14);}
@media (max-width:600px){.feature-item{min-width:0;}}

/* HERO & CTA ------------------------------------------------------ */
.hero {
  width: 100%;
  min-height: 380px;
  background: var(--bg-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  padding: 0;
}
.hero .container {padding-top:48px; padding-bottom:48px;}
.hero h1, .hero p {color: #fff;}
.hero .cta {
  margin-top:20px;
  background: var(--cta-gradient);
  color:#fff;
}
@media (max-width: 768px) {
  .hero {min-height:220px;}
}

.cta {
  display: inline-block;
  background: var(--cta-gradient);
  color: #fff;
  font-family: 'Montserrat',sans-serif;
  font-weight: 600;
  padding: 14px 34px;
  border-radius: var(--radius-small);
  font-size: 1.10rem;
  box-shadow: 0 4px 15px rgba(56,163,165,0.11);
  transition: var(--transition);
  margin-top: 8px;
  letter-spacing: 0.02em;
  border: none;
}
.cta:hover, .cta:focus {
  background: linear-gradient(90deg,#22577A 0%, #38A3A5 100%);
  color: #fff;
  box-shadow: 0 6px 28px rgba(56, 163, 165, 0.17);
}

/* HEADER & NAVIGATION --------------------------------------------- */
header {
  background: #fff;
  box-shadow: 0 3px 18px rgba(34,87,122,0.05);
  position: relative;
  z-index: 20;
}
header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
header nav a {
  color: var(--primary);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.06rem;
  padding: 7px 14px;
  border-radius: var(--radius-small);
  transition: background .13s, color .13s;
  font-weight:500;
  position: relative;
}
header nav a.cta {
  margin-left:16px;
  background: var(--cta-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(56,163,165,0.08);
  border:none;
}
header nav a.cta:hover, header nav a.cta:focus{background:linear-gradient(90deg,#22577A 0%, #38A3A5 100%); color:#fff}
header nav a:hover:not(.cta),header nav a:focus:not(.cta){background: var(--secondary); color:#fff;}
header nav img {height:48px;width:auto;display:inline-block;margin-right:8px;vertical-align:middle;}

@media (max-width: 1050px) {
  header nav {
    gap: 12px;
  }
}
@media (max-width: 850px) {
  header nav a {font-size: 0.98rem;}
}
@media (max-width: 700px) {
  header nav{
    display:none;
  }
  .mobile-menu-toggle {
    display: block;
  }
}

/* MOBILE MENU ----------------------------------------------------- */
.mobile-menu-toggle {
  display:none;
  background:none;
  font-size:2rem;
  color:var(--primary);
  position:absolute;
  top:18px; right:18px;
  z-index:31;
  border:none;
  border-radius: var(--radius-small);
  width:44px; height:44px;
  transition: background .18s;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background: var(--secondary);
  color: #fff;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items:flex-start;
  background: var(--bg-gradient-reverse);
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999;
  transform: translateX(-100vw);
  transition: transform .44s cubic-bezier(.8,0,.22,1);
  box-shadow: 0 6px 36px rgba(34,87,122,0.18);
  padding-top:32px;
  opacity:0;
  pointer-events: none;
}
.mobile-menu.active {
  transform: translateX(0);
  opacity:1;
  pointer-events: auto;
}
.mobile-menu-close {
  align-self: flex-end;
  background:none;
  color:#fff;
  font-size:2.2rem;
  margin: 8px 22px 4px 0;
  border:none;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 30px 0 0 38px;
}
.mobile-nav a {
  color:#fff;
  font-family: 'Montserrat',sans-serif;
  font-size:1.14rem;
  padding:12px 0;
  transition: color .13s, background .13s;
  border-radius:var(--radius-small);
  width:100%;
  font-weight: 500;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: var(--secondary);
  background:rgba(34,87,122,0.18);
}
@media (max-width:700px){.mobile-menu-toggle{display:block;}}

/* Hide on desktop, show on mobile */
@media (min-width: 701px) {
  .mobile-menu, .mobile-menu-toggle {display: none !important;}
}

/* MAIN LAYOUTS ---------------------------------------------------- */
.features {
  padding: 40px 0 20px 0;
  margin-bottom: 0;
}
.features .content-wrapper {gap: 32px;}
.features h2 {margin-bottom: 20px;}
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.city-list, .article-list {
  display:flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}
.city-item, .article-item {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 18px;
  min-width: 215px;
  flex: 1 1 210px;
  margin-bottom:20px;
  transition: box-shadow .19s;
}
.city-item:hover, .article-item:hover {box-shadow:0 10px 30px rgba(56,163,165,0.16);}

.quick-links ul {display: flex; flex-direction:row; gap: 26px; flex-wrap: wrap;}
.quick-links li {font-size: 1rem;}
.quick-links a {color: var(--secondary); font-weight:600;}
.quick-links a:hover {color: var(--primary);}

.service-list, .detailed-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 18px;
}
.service-item {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 18px 24px 18px;
  min-width: 220px;  flex: 1 1 186px;
  margin-bottom:20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .16s;
}
.service-item h3, .service-item h2 {
  font-size: 1.25rem;
  margin-bottom: 6px;
  color: var(--primary);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:10px;
}
.service-item span {color: var(--secondary);font-size:1rem;font-weight:700;}
.service-item a, .service-item .cta {
  align-self:flex-end;
  margin-top:10px;
  margin-bottom:0;
  padding:8px 18px;
  font-size:1rem;
}
.service-item:hover {box-shadow:0 6px 23px rgba(56,163,165,0.12);}

/* About/Contact/LegaL */
.text-section {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 20px;
  margin-bottom: 24px;
}
.contact-info ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 8px;margin-bottom:0;
}
.map-embed {margin-bottom:18px;}
.confirmation .container {padding-top: 60px;padding-bottom: 94px;}
.confirmation .cta {margin-top:32px;}
.legal .text-section {
  margin-bottom:12px;
}

/* TABLE STYLES --------------------------------------------------- */
table {
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  width: 100%;
  border:none;
  overflow:hidden;
  margin-bottom: 30px;
}
thead tr {background: var(--secondary); color: #fff;}
thead th {
  font-size:1.04rem;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  padding:14px 12px;
  letter-spacing: 0.015em;
}
tbody td {
  font-size:1rem;
  padding:10px 15px;
  text-align:center;
  font-family:'Open Sans',sans-serif;
  color:var(--primary);
  border-top:1px solid #e4e7eb;
}
tbody tr:nth-child(even) {background: #f7fafd;}
tbody tr:nth-child(odd) {background: #fff;}

/* FOOTER --------------------------------------------------------- */
footer {
  background: #fff;
  box-shadow: 0 -2px 13px rgba(34,87,122,0.04);
  padding:30px 0 14px 0;
  margin-top: 50px;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: flex-start;
  margin-bottom: 10px;
}
footer nav a {
  font-size:1rem;
  color: var(--primary);
  padding:6px 10px;
  border-radius: var(--radius-small);
  font-family: 'Montserrat', sans-serif;
}
footer nav a:hover, footer nav a:focus {
  background: var(--secondary);
  color:#fff;
  transition: var(--transition);
}
footer address {
  font-style: normal;
  font-size: 0.99rem;
  color: #666a7a;
}

/* RESPONSIVE QUERIES --------------------------------------------- */
@media (max-width: 1100px) {
  .feature-grid, .city-list, .service-list, .detailed-service-list, .article-list {
    gap: 16px;
  }
}
@media (max-width:950px){
  .feature-grid, .city-list, .service-list, .detailed-service-list, .article-list {
     flex-direction: column;
     gap: 18px;
  }
  .feature-item, .city-item, .service-item, .article-item {min-width:0;}
}
@media (max-width:600px){
  .section {padding: 28px 8px; margin-bottom: 38px;}
  .container {padding-left:10px; padding-right:10px;}
  .feature-item,.city-item,.service-item,.article-item{padding: 15px 10px;}
  .testimonial-card{padding:13px;}
}

/* BUTTONS & INTERACTIVE ELEMENTS --------------------------------- */
button, .cta, a.cta {
  outline:none;
  transition: var(--transition);
}
button:focus-visible, .cta:focus-visible, a.cta:focus-visible {
  box-shadow:0 2px 12px 2px #38A3A599, 0 0 0 2px #22577A;
}

/* HOVER/ACTIVE MICRO-INTERACTIONS ------------------------------- */
.card, .service-item, .city-item, .feature-item, .article-item, .testimonial-card {
  transition: box-shadow 0.20s, transform 0.16s;
}
.card:hover, .service-item:hover, .city-item:hover, .feature-item:hover, .article-item:hover, .testimonial-card:hover {
  box-shadow: 0 8px 36px 0 rgba(34,87,122,0.17); 
  transform: translateY(-2.5px) scale(1.01);
}

/* FORM ELEMENTS ------------------------------------------------- */
input,select,textarea {
  background: #fff;
  color: var(--text-main);
  border:1px solid #d5e0ea;
  border-radius: var(--radius-small);
  padding:10px 12px;
  margin-bottom:12px;
  width:100%;
  font-size:1rem;
}
input:focus,select:focus,textarea:focus {
  border-color: var(--secondary);
  box-shadow:0 0 0 2px #38A3A544;
}

/* COOKIE BANNER & MODAL ------------------------------------------ */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; width: 100vw;
  z-index: 99999;
  background: #fff;
  box-shadow: 0 -2px 16px rgba(56,163,165,0.09);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 12px;
  gap: 28px;
  transition: transform .29s, opacity .19s;
  font-size:1rem;
}
.cookie-banner.hide {
  transform: translateY(120%);
  opacity:0;
  pointer-events:none;
}
.cookie-banner .cookie-buttons {
  display: flex;
  gap: 14px;
}
.cookie-banner button,.cookie-banner .btn {
  font-family: 'Montserrat',sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:9px 20px;
  border-radius: var(--radius-small);
  border:none;
  background: var(--cta-gradient);
  color: #fff;
  margin:0;
  transition: var(--transition);
}
.cookie-banner .btn.reject {
  background: #e5e7e9;
  color: var(--primary);
}
.cookie-banner button:focus, .cookie-banner .btn:focus {
  box-shadow:0 2px 8px 2px #38A3A555,0 0 0 2px #22577A88;
}

.cookie-banner .btn.settings {
  background: none;
  color:var(--secondary);
  border:1.5px solid var(--secondary);
  box-shadow:none;
}
.cookie-banner .btn.settings:hover,.cookie-banner .btn.settings:focus{background:var(--secondary);color:#fff;}
.cookie-banner .btn.reject:hover,.cookie-banner .btn.reject:focus{background:#bbb;}

/* COOKIE PREFERENCES MODAL -------------------------------------- */
.cookie-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(34,87,122,0.23);
  z-index: 100001;
  min-width: 325px;
  max-width: 98vw;
  padding: 38px 28px 20px 28px;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s, transform .25s;
  display: flex;flex-direction:column;gap:22px;
}
.cookie-modal.hide {
  opacity: 0; pointer-events: none;
  transform: translate(-50%,-43%) scale(.98);
}
.cookie-modal h2 {
  font-size:1.15rem;
  margin-bottom:10px;
  color:var(--primary);
  font-weight:600;
}
.cookie-modal ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom:8px;
}
.cookie-modal li {
  color:var(--primary);
  font-size:1.01rem;
}
.cookie-modal .cookie-category-head {display:flex;align-items:center;gap:6px;}
.cookie-switch {
  margin-left:16px;
  display:inline-block;
  width:38px;height:22px;
  background: #e9ecef;
  border-radius: 11px;
  position:relative;
  vertical-align:middle;
  transition: background .13s;
}
.cookie-switch input{display:none;}
.cookie-switch span {
  position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:var(--secondary);
  border-radius:50%; transition: left .12s, background .2s;
  box-shadow:0 1px 3px #ccc;
}
.cookie-switch input:checked + span{left:18px;background:var(--primary);}
.cookie-modal-buttons {
  display:flex;gap:12px;justify-content:flex-end;margin-top:12px;
}
.cookie-modal .btn {padding:7px 18px;font-size:1rem;border-radius:var(--radius-small);}

@media (max-width:520px){
  .cookie-modal{min-width:0;padding:16px 6px;}
}

/* UTILITIES ----------------------------------------------------- */
.mb-0 {margin-bottom:0!important;}
.mt-0 {margin-top:0!important;}
.mt-24 {margin-top:24px!important;}
.mb-24 {margin-bottom:24px!important;}
.gap-16 {gap:16px!important;}

/* Accessibility focus ring */
:focus-visible{
  outline:2px solid var(--secondary);
  outline-offset:2px;
  z-index:20000;
}

/* Print Fix ----------------------------------------------- */
@media print{.cookie-banner,.cookie-modal,.mobile-menu{display:none!important;}}