/* --- 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:inherit;vertical-align:baseline;box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{background:#fff;color:#163D57;font-family:'Roboto',Arial,sans-serif;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}ol,ul{list-style:none}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;box-shadow:none}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #179476;outline-offset:2px}hr{border:none;border-top:1px solid #EFEFEF;margin:32px 0}

/* --- BRAND VARIABLES --- */
:root {
  --color-primary: #163D57;
  --color-secondary: #FFFFFF;
  --color-grey: #EFEFEF;
  --color-accent: #179476;
  --box-shadow-xs: 0 2px 8px rgba(22, 61, 87, 0.04);
  --box-shadow-sm: 0 4px 16px rgba(22,61,87,.07);
  --radius-xs: 6px;
  --radius-sm: 12px;
  --transition: .23s cubic-bezier(.7,.2,.23,.99);
}

/* --- TYPOGRAPHY --- */
h1, .hero h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  line-height: 1.1;
  color: var(--color-primary);
}
h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  margin-bottom: 16px;
  line-height: 1.15;
  color: var(--color-primary);
}
h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.21rem;
  margin-bottom: 10px;
  color: var(--color-primary);
}
h4,h5,h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: var(--color-primary);
}
p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 14px;
  color: #163D57;
}
strong, b {
  font-weight: 700;
}
.text-section ul,
ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.text-section ul li,
ul li {
  margin-bottom: 8px;
  padding-left: 0.2em;
  font-size: 1rem;
  position: relative;
}
.text-section ul li:before,
ul li:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right:7px;
  vertical-align: middle;
  margin-bottom:2px;
}
blockquote {
  font-style:italic;
  color:#163D57;
  opacity:.92;
  margin-bottom:8px;
  border-left:3px solid var(--color-accent);
  padding-left:16px;
}

/* --- GENERAL CONTAINER --- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- CORE LAYOUTS & SPACING --- */
section, .section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
  box-shadow: var(--box-shadow-xs);
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: #fff;
  border-radius: var(--radius-xs);
  box-shadow: var(--box-shadow-xs);
  margin-bottom: 20px;
  padding: 24px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.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;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius-xs);
  box-shadow: var(--box-shadow-xs);
  min-width: 220px;
  max-width: 350px;
  margin-bottom: 20px;
  transition: box-shadow var(--transition), border-color var(--transition);
  border: 1px solid #ececec;
}
.testimonial-card:hover {
  box-shadow: 0 4px 24px rgba(22,61,87,.12);
  border-color: var(--color-accent);
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: #fff;
  border-radius: var(--radius-xs);
  box-shadow: var(--box-shadow-xs);
  padding: 26px 20px 20px 20px;
  flex: 1 1 210px;
  min-width:210px;
  max-width:320px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.feature-item img {
  width: 36px;
  height: 36px;
  margin-bottom:6px;
}
.feature-item:hover {
  box-shadow: 0 4px 16px rgba(22, 61, 87, 0.13);
  transform:translateY(-3px);
}

/***** NAVIGATION BAR *****/
header {
  background: #fff;
  border-bottom:1px solid #EFEFEF;
  position: relative;
  z-index:100;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
}
.main-nav > a {
  font-family:'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-primary);
  opacity: .92;
  transition: color var(--transition), opacity var(--transition);
  padding:8px 6px;
  border-radius:var(--radius-xs);
}
.main-nav > a:hover,
.main-nav > a:focus {
  color: var(--color-accent);
  opacity:1;
  background: #F3F8F7;
}
.main-nav > a.cta-primary {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--radius-xs);
  margin-left: 8px;
  box-shadow:var(--box-shadow-xs);
  transition: background var(--transition), box-shadow var(--transition);
}
.main-nav > a.cta-primary:hover,
.main-nav > a.cta-primary:focus {
  background: #12745c;
  color: #fff;
  box-shadow: 0 2px 18px rgba(27,176,138,0.11);
}
/* NAVIGATION LOGO */
.main-nav > a:first-child img {
  height: 32px;
  width: auto;
  margin-right:10px;
}

/***** MOBILE MENU HAMBURGER *****/
.mobile-menu-toggle {
  display: none;
  background:none;
  border:none;
  font-size:2rem;
  color:var(--color-primary);
  cursor:pointer;
  position:absolute;
  right:16px;
  top:16px;
  z-index:190;
  padding:4px 12px;
  border-radius:var(--radius-xs);
  transition:background var(--transition);
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {
  background:var(--color-grey);
}

/***** MOBILE MENU OVERLAY *****/
.mobile-menu {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background:rgba(255,255,255,0.96);
  box-shadow:0 4px 32px rgba(22,61,87,0.10);
  z-index:200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 18px;
  padding-left: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100vw);
  transition: opacity .26s var(--transition), transform .36s var(--transition);
}
.mobile-menu.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu-close {
  background: none;
  border: none;
  font-size: 2.2rem;
  color: var(--color-primary);
  align-self: flex-end;
  margin: 10px 18px 10px 0;
  cursor:pointer;
  padding:4px 10px;
  border-radius:var(--radius-xs);
  transition:background var(--transition);
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
  background: var(--color-grey);
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  width:100%;
  padding-left:36px;
}
.mobile-nav a {
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:500;
  font-size:1.22rem;
  color: var(--color-primary);
  padding: 10px 0 10px 10px;
  border-radius:var(--radius-xs);
  transition:background var(--transition),color var(--transition);
  min-width:180px;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  background:var(--color-accent);
  color: #fff;
}

/***** HERO SECTION *****/
.hero {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  margin-bottom:60px;
  padding: 54px 0 60px 0;
  box-shadow: var(--box-shadow-sm);
  min-height:260px;
  display: flex;
  align-items: center;
}
.hero .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  min-height:160px;
}
.hero .content-wrapper {
  max-width: 640px;
  align-items: flex-start;
  color:#fff;
  gap: 18px;
}
.hero h1, .hero p {
  color:#fff;
}
.hero .cta-primary {
  margin-top:10px;
}

/***** CTA BUTTONS *****/
.cta-primary {
  background: var(--color-accent);
  color: #fff !important;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.13rem;
  font-weight:600;
  border:none;
  padding: 11px 36px;
  border-radius:var(--radius-xs);
  cursor:pointer;
  box-shadow:var(--box-shadow-xs);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  display:inline-block;
  margin-top: 12px;
}
.cta-primary:hover,
.cta-primary:focus {
  background: #12745C;
  transform:translateY(-2px) scale(1.01);
  box-shadow: 0 2px 16px rgba(27, 176, 138, 0.16);
  color: #fff;
}

/***** FEATURES GRID *****/
.feature-grid, .plan-comparison, .pricing-table, .testimonial-slider, .client-logos, .logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

/***** PRICING TABLES *****/
.pricing-table {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:flex-start;
  align-items:stretch;
}
.plan {
  background:#fff;
  border:1px solid #e8ecf2;
  border-radius:var(--radius-xs);
  box-shadow:var(--box-shadow-xs);
  padding:28px 20px 22px 20px;
  flex:1 1 230px;
  min-width:220px;
  max-width:330px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  transition: box-shadow var(--transition), border-color var(--transition),transform var(--transition);
  margin-bottom:20px;
}
.plan-recommended {
  border:2px solid var(--color-accent);
  background: #F6FCFA;
  box-shadow: 0 6px 24px rgba(27,176,138,0.11);
  transform:scale(1.04);
}
.plan h2 {
  margin-bottom:8px;
}
.plan ul {
  margin-top:2px;
  margin-bottom:0;
  padding-left: 16px;
}
.plan ul li {
  margin-bottom:7px;
  font-size: 1rem;
  color:#163D57;
}

/***** TESTIMONIALS / QUOTES *****/
.testimonials,
.testimonial-slider {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}
.testimonial-card blockquote {
  border: none;
  padding-left:0;
  margin-bottom:5px;
  font-size: 1.07rem;
}
.testimonial-author {
  font-size:0.97rem;
  color: #179476;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom:2px;
}
.client-logos, .logos-row {
  display: flex;
  flex-direction:row;
  gap:30px;
  align-items:center;
  margin:18px 0 0 0;
}
.client-logos img, .logos-row img {
  height: 36px;
  width: auto;
  opacity: .8;
  filter: grayscale(0.3);
  transition: filter .21s;
}
.client-logos img:hover, .logos-row img:hover {
  filter: none;
  opacity: 1;
}

/***** BLOG AND SEARCH UI *****/
.blog-list .post-list {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}
.categories {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:0;
}
.categories ul {
  display:flex;
  gap:12px;
  list-style:none;
  margin-bottom:0;
}
.categories ul li {
  padding:6px 14px;
  background:#F6FCFA;
  border-radius:var(--radius-xs);
  font-size:0.98rem;
  color:var(--color-primary);
}
.blog-search {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}
.blog-search input[type=text]{
  padding:9px 12px;
  border-radius: var(--radius-xs);
  border:1px solid #e0e7ee;
  background:#FCFCFC;
  font-size:1rem;
  min-width:160px;
}
.blog-search button{
  background:var(--color-accent);
  color:#fff;
  padding:10px 22px;
  border-radius:var(--radius-xs);
  font-weight:600;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1rem;
  cursor:pointer;
  transition:background var(--transition);
}
.blog-search button:hover,
.blog-search button:focus{
  background:#12745c;
}

/***** CONTACT *****/
.contact-details ul, .map-location {
  margin:10px 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.contact-details li img, .map-location img {
  vertical-align: middle;
  width:18px;
  height:18px;
  margin-right:7px;
}
.map-location {
  color: var(--color-primary);
  font-size:0.98rem;
  line-height:1.5;
  background:#F6FCFA;
  border-radius: var(--radius-xs);
  padding:10px 14px;
}

/***** THANK YOU SECTION *****/
.thank-you .next-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top:24px;
}
.thank-you .cta-primary {
  margin-top:18px;
}

/***** FAQ *****/
.faq .text-section > h3 {
  margin-top: 18px;
}

/* --------- FOOTER --------- */
footer {
  background: #fff;
  border-top:1px solid #ECECEC;
  padding:36px 0 24px 0;
}
footer .container {
  display: flex;
  flex-direction:column;
}
footer .content-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:32px;
  align-items:center;
  justify-content:space-between;
}
footer img {
  width:44px; height:auto;
  margin-right:12px;
}
.footer-nav {
  display: flex;
  gap: 21px;
}
.footer-nav a {
  color: #163D57;
  font-weight: 500;
  font-size:0.96rem;
  opacity:.85;
  transition: color var(--transition), opacity var(--transition);
}
.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--color-accent);
  opacity:1;
}
footer address {
  font-size: 0.97rem;
  color: #59728a;
  font-style: normal;
  line-height:1.65;
  display: flex;
  flex-direction:column;
  gap:4px;
}
footer address img {
  width:15px; height:15px; margin-right:4px;
  vertical-align:middle;
}

/***** COOKIE CONSENT BANNER *****/
.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  background: #fff;
  color: #163D57;
  border-top: 1px solid #E5EBF0;
  box-shadow: 0 -2px 20px rgba(22,61,87,.04);
  padding:20px 16px 12px 16px;
  z-index:2500;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition: transform .45s var(--transition), opacity .43s;
  opacity:1;
  transform:translateY(0);
}
.cookie-banner.hide {
  opacity:0;
  pointer-events:none;
  transform:translateY(120px);
}
.cookie-banner .cookie-message {
  font-size:0.98rem;
  color: #163D57;
  text-align:center;
}
.cookie-banner .cookie-buttons {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:6px;
}
.cookie-banner button {
  padding:8px 20px;
  border-radius: var(--radius-xs);
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:500;
  font-size:1rem;
  cursor:pointer;
  border:none;
  background:#EFEFEF;
  color: #163D57;
  transition: background .2s, color .2s;
}
.cookie-banner .accept {
  background:var(--color-accent);
  color:#fff;
}
.cookie-banner .accept:hover,
.cookie-banner .accept:focus {
  background:#12745c;
  color:#fff;
}
.cookie-banner .settings {
  background:var(--color-grey);
  color:var(--color-primary);
}
.cookie-banner .settings:hover {
  background:#ECFFF6;
  color: var(--color-accent);
}
.cookie-banner .reject {
  background:#e0e7ee;
  color:#59728a;
}
.cookie-banner .reject:hover {
  background:#f8e9ec;
  color:#DE1F24;
}

/***** COOKIE SETTINGS MODAL *****/
.cookie-modal-overlay {
  position: fixed;
  z-index:2600;
  left:0; top:0; right:0; bottom:0;
  background: rgba(16,32,46,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity:1;
  transition:opacity .4s;
}
.cookie-modal-overlay.hide {
  opacity:0;
  pointer-events:none;
}
.cookie-modal {
  background:#fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(22,61,87,.17);
  padding:32px 24px 20px 24px;
  max-width:360px;
  width:93vw;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
  animation: fadein .44s cubic-bezier(.79,.07,.19,.99);
  position:relative;
}
.cookie-modal h3{
  font-size:1.28rem;
  font-weight:600;
  color:var(--color-primary);
  margin-bottom:3px;
}
.cookie-categories {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:12px;
}
.cookie-category {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #F3F8F7;
}
.cookie-category:last-child{
  border-bottom:none;
}
.cookie-category label {
  font-size:1.05rem;
  color:#203c55;
}
.cookie-category-toggle[disabled] {
  opacity:.7;
}
.cookie-modal .cookie-buttons {
  display:flex;
  justify-content:flex-end;
  gap:13px;
  margin-top:6px;
}
.cookie-modal-close {
  position:absolute;
  top:12px; right:14px;
  background:none;
  color:var(--color-primary);
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  padding:4px 7px;
  border-radius:var(--radius-xs);
  transition:background var(--transition);
}
.cookie-modal-close:hover,
.cookie-modal-close:focus {
  background:var(--color-grey);
}
@keyframes fadein{
 0%{opacity:0;transform:translateY(40px);}100%{opacity:1;transform:translateY(0);}
}

/***** RESPONSIVENESS *****/
@media (max-width: 1000px) {
  .main-nav {
    gap: 16px;
    padding-left:10px; padding-right:10px;
  }
  .footer-nav {gap:15px;}
  .content-wrapper, .feature-grid, .pricing-table, .testimonial-slider, .client-logos, .logos-row {gap:18px;}
}
@media (max-width: 900px) {
  .main-nav > a, .footer-nav a {font-size:0.98rem;}
  section, .section{padding:32px 10px;}
  .pricing-table, .feature-grid {gap:18px;}
}
/* ------- TABLET ------- */
@media (max-width: 768px) {
  h1, .hero h1 {font-size:1.6rem;}
  h2 {font-size:1.17rem;}
  h3 {font-size:1rem;}  
  section, .section{padding:28px 7px; margin-bottom:38px;}
  .main-nav {display:none;}
  .mobile-menu-toggle {display: block;}
  .hero {padding:28px 0 38px 0; border-radius:0;}
  .hero .container {padding:0 0 0 0;}
  .feature-grid, .pricing-table, .testimonial-slider, .logos-row, .client-logos, .post-list, .content-grid {
    flex-direction: column;
    gap: 16px;
  }
  .testimonial-card, .feature-item, .plan {
    max-width: unset;
    width: 100%;
  }
  .content-wrapper {
    gap: 16px;
  }
  .text-image-section {flex-direction:column; gap:16px;}
  .container {padding:0 8px;}
  footer .content-wrapper {flex-direction:column;gap:16px;align-items:flex-start;}
  .mobile-nav {padding-left:18px;}
}
@media (max-width:500px) {
  h1,.hero h1{font-size:1.1rem;}
  h2{font-size:.99rem;}
  h3{font-size:.89rem;}
}

/* Accessibility & Hidden Classes */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/***** MICRO-INTERACTIONS & TRANSITIONS *****/
button, .cta-primary, .feature-item, .plan, .testimonial-card, .main-nav > a, .footer-nav a, .mobile-nav a {
  transition: box-shadow var(--transition), background var(--transition), color var(--transition), transform var(--transition), opacity var(--transition), border-color var(--transition);
}

/***** EXTRAS / UTILITY *****/
::-webkit-input-placeholder { color:#adc6dd; opacity:1; }
::-moz-placeholder { color:#adc6dd; opacity:1; }
:-ms-input-placeholder { color:#adc6dd; opacity:1; }
::placeholder { color:#adc6dd; opacity:1; }

/* Ensure no absolute positioning except for cookie modal close, mobile-menu, mobile-menu-toggle */
/* No grid, no columns - only flex layouts everywhere */