/* ===== CSS 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,strong,sub,sup,tt,var,b,u,i,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; box-sizing:border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  display:block;
}
body{
  line-height:1.5; font-family:'Roboto', Georgia, serif; background-color:#F4F4F4; color:#203247; font-size:16px;
}
a{
  color:inherit; text-decoration:none; transition:color 0.2s, border 0.2s;
}
img{
  max-width:100%; height:auto; display:block;
}
ul,ol{
  list-style:none;
}
:focus{ outline:2px solid #D9A441; outline-offset:2px; }

/* ===== CUSTOM FONTS ===== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat', Georgia, serif;
  font-weight:700;
  color:#203247;
  letter-spacing:0.01em;
  margin-bottom:16px;
  line-height:1.1;
}
h1{font-size:2.6rem;margin-bottom:24px;}
h2{font-size:2rem;margin-bottom:20px;}
h3{font-size:1.3rem;margin-bottom:12px;}
h4{font-size:1.1rem;}

p, ul li, ol li{
  font-family:'Roboto', serif;
  font-weight:400;
  color:#203247;
  font-size:1rem;
  margin-bottom:12px;
  line-height:1.7;
}
strong, b{font-weight:700;}

/* === GENERAL CONTAINERS & SPACING === */
.container{
  width:100%; max-width:1200px; margin:0 auto; padding-left:20px; padding-right:20px;
}
.content-wrapper{
  width:100%; display:flex; flex-direction:column; gap:24px;
}
.section{
  margin-bottom:60px;
  padding:40px 20px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 4px 16px 0 rgba(32,50,71,0.03);
}
@media (max-width: 768px) {
  .section{
    padding:30px 10px;
    margin-bottom:36px;
    border-radius:10px;
  }
  .container {
    padding-left:10px;padding-right:10px;
  }
}

/* ===== HEADER ===== */
header{
  width:100%; background:#fff; box-shadow:0 2px 12px 0 rgba(32,50,71,0.05);position:relative; z-index:200;
}
.header-wrapper{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1200px; margin:0 auto; padding:18px 20px 18px 20px;
}
.logo-link img{ height:48px; }
.main-nav{
  display:flex; align-items:center; gap:18px;
}
.main-nav a{
  font-family:'Montserrat', Georgia, serif;
  padding:6px 9px; font-size:1rem; color:#203247;
  border-radius:6px;
  transition:background 0.2s, color 0.2s;
}
.main-nav a:hover, .main-nav a:focus{
  color:#D9A441; background:#2032470d;
}
.cta.primary{
  background:#203247;color:#fff; font-family:'Montserrat', Georgia, serif; font-size:1rem;
  padding:11px 26px; border-radius:32px; font-weight:600; letter-spacing:0.05em; box-shadow:0 2px 8px rgba(32,50,71,0.07); transition:background 0.18s, color 0.18s, box-shadow 0.18s; display:inline-block; border:none; cursor:pointer;
}
.cta.primary:hover,.cta.primary:focus{
  background:#D9A441;color:#203247; box-shadow:0 4px 16px rgba(217,164,65,0.14);
}
.cta.secondary{
  background:transparent; color:#203247;border:2px solid #D9A441;
  padding:9px 20px; border-radius:26px; font-weight:600; font-family:'Montserrat', Georgia, serif; letter-spacing:0.03em; transition:background 0.2s, color 0.2s,border-color 0.2s; display:inline-block;
}
.cta.secondary:hover,.cta.secondary:focus{
  background:#D9A441; color:#fff; border-color:#203247;
}
.mobile-menu-toggle{
  display:none; font-size:1.8rem; background:transparent; border:none; color:#203247; cursor:pointer; padding:4px 10px;
  transition:background 0.2s, color 0.2s; border-radius:5px;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background:#D9A441;color:#fff;
}

@media (max-width: 960px){
  .main-nav {gap:12px;}
}
@media (max-width: 820px){
  .header-wrapper{gap:10px;}
  .main-nav{gap:7px;}
  .logo-link img{height:38px;}
  .cta.primary, .cta.secondary{font-size:0.93rem;}
}
@media (max-width: 768px) {
  .main-nav{
    display:none;
  }
  .cta.primary{
    display:none;
  }
  .mobile-menu-toggle{
    display:block;
  }
}

/* ===== MOBILE MENU ===== */
.mobile-menu{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(32,50,71,0.98);
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(0.6,0,0.5,1);
  pointer-events:none; opacity:0;
}
.mobile-menu.open{
  transform:translateX(0);
  pointer-events:auto; opacity:1;
}
.mobile-menu-close{
  background:transparent; color:#fff; font-size:2rem; border:none; padding:18px 14px 14px 14px; cursor:pointer; align-self:flex-end;
}
.mobile-nav{
  display:flex; flex-direction:column; gap:32px; padding:36px 36px 0 32px; width:100%; align-items:flex-start;
}
.mobile-nav a{
  color:#fff; font-family:'Montserrat', Georgia, serif; font-size:1.36rem; font-weight:600; letter-spacing:0.025em; transition:color 0.19s, background 0.19s; padding:7px 0;
  border-radius:9px; width:100%;
}
.mobile-nav a:hover, .mobile-nav a:focus{
  background:#D9A441;color:#203247;
}
@media (max-width: 480px){
  .mobile-nav{padding:28px 12px 0 16px;gap:21px;}
  .mobile-menu-close{padding:10px 10px 5px 10px;}
}

/* ===== HERO SECTION ===== */
.hero {
  background:#F4F4F4; padding:0; margin-bottom:0;
}
.hero .container {
  padding-top:48px; padding-bottom:52px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero .content-wrapper{
  align-items:center; text-align:center; gap:20px;
}
.hero h1{
  color:#203247; font-size:2.5rem; font-family:'Montserrat', Georgia, serif;
  margin-bottom:12px; font-weight:700;
}
.hero .subheadline{
  font-family:'Roboto', serif; font-size:1.2rem; color:#203247cc; margin-bottom:16px;
}
.hero .cta.primary{
  margin-top:8px;
}
@media (max-width:768px){
  .hero .container{padding-top:21px; padding-bottom:27px;}
  .hero h1{font-size:1.52rem;}
}

/* ===== FEATURES SECTION ===== */
.features {
  background:#fff; border-radius:18px; box-shadow:0 4px 16px 0 rgba(32,50,71,0.03);
  margin-bottom:60px;
}
.features .content-wrapper { gap:32px; }
.feature-grid {
  display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin-top:20px;
}
.feature-grid li {
  flex:1 1 220px; min-width:210px; max-width:270px;
  background:#F4F4F4;
  border-radius:14px;
  padding:26px 16px 21px 16px;
  box-shadow:0 2px 12px rgba(32,50,71,0.04);
  display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center;
  transition:box-shadow 0.2s, transform 0.2s;
}
.feature-grid li img{
  height:38px;width:auto; margin-bottom:9px;
}
.feature-grid li h3{
  font-size:1.14rem; margin-bottom:4px;color:#203247;font-weight:700;font-family:'Montserrat',Georgia,serif;
}
.feature-grid li p{
  margin-bottom:0; color:#203247cc; font-size:0.98rem;
}
.feature-grid li:hover, .feature-grid li:focus-within {
  box-shadow:0 8px 24px rgba(32,50,71,0.10);
  transform:translateY(-2px) scale(1.02);
}

/* === FEATURES GENERIC LIST === */
.features ul:not(.feature-grid){
  display:flex; flex-direction:column; gap:16px; padding-left:14px;
}
.features ul li{
  font-size:1.01rem; position:relative; padding-left:18px; color:#203247;
}
.features ul li:before{
  content:"\2022";position:absolute; left:0;color:#D9A441;font-size:1.1rem; top:1px;}


/* ====== SERVICE LIST ====== */
.service-list {
  display:flex; flex-wrap:wrap; gap:24px; justify-content:flex-start; margin-top:16px;
}
.service-list li {
  flex:1 1 250px; min-width:220px; background:#fff; border-radius:16px; box-shadow:0 2px 12px rgba(32,50,71,0.08);
  padding:26px 22px 23px 22px; display:flex; flex-direction:column; gap:11px;align-items:flex-start;
  position:relative; margin-bottom:20px; transition:box-shadow 0.2s, transform 0.2s;
}
.service-list li h3{
  font-size:1.18rem; font-weight:700; color:#203247;
}
.service-list li p{
  color:#203247cc; font-size:0.97rem; margin-bottom:2px;
}
.service-price{
  font-size:1.08rem; font-weight:500; color:#D9A441;margin-top:3px;
}
.service-list li .cta {
  margin-top:8px;
}
.service-list li:hover, .service-list li:focus-within{
  box-shadow:0 6px 22px rgba(217,164,65,0.16);
  transform:translateY(-2px) scale(1.011);
  z-index:1;
}
@media (max-width:1020px){
  .service-list{gap:18px;}
  .service-list li{min-width:175px;}
}
@media (max-width:768px){
  .service-list{flex-direction:column; gap:20px;}
  .service-list li{min-width:0;width:100%;}
}

/* ====== ABOUT / TEXT SECTIONS ====== */
.about-short, .about-company, .project-overview, .contact-short, .contact-details, .legal, .confirmation, .faq-answers, .service-features {
  background:#fff; border-radius:18px; box-shadow:0 4px 16px 0 rgba(32,50,71,0.03);
  margin-bottom:60px;
  padding:40px 20px;
}
.text-section {
  display:flex; flex-direction:column; gap:16px; margin-top:10px;
}
.text-section ul,
.trust-list{
  display:flex; flex-direction:column; gap:10px; padding-left:0;}
.trust-list li:before {content:"\2714";color:#D9A441;margin-right:7px;}
.text-section ul li, .trust-list li{font-size:0.99rem; color:#203247dd; padding-left:0;position:relative;}

/* ====== FAQ ACCORDION ====== */
.faq-accordion{
  display:flex; flex-direction:column; gap:18px;
}
.faq-item{
  background:#F4F4F4;
  border-radius:10px; padding:21px 17px 17px 21px;
  box-shadow:0 2px 8px rgba(32,50,71,0.05);
  transition:box-shadow 0.16s;
}
.faq-item h3{font-size:1.05rem;margin-bottom:7px;margin-top:0;}
.faq-item:hover, .faq-item:focus-within{
  box-shadow:0 4px 14px rgba(217,164,65,0.10);
}
.quick-facts ul{
  display:flex; flex-direction:column; gap:8px; padding:9px 0 0 14px;
}
.quick-facts ul li{
  font-size:0.98rem;padding-left:0;
}

/* ====== CARD & FLEX UTILITIES ====== */
.card-container{
  display:flex; flex-wrap:wrap; gap:24px; margin-bottom:32px;
}
.card {
  margin-bottom:20px; position:relative; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(32,50,71,0.05); padding:24px; transition:box-shadow 0.2s;
}
.card-content{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.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, .testimonial-card {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:#F4F4F4; color:#203247; padding:20px; border-radius:16px; box-shadow:0 2px 8px rgba(32,50,71,0.07);
  margin-bottom:20px; max-width:500px; margin-left:auto; margin-right:auto; position:relative; text-align:left;
  transition:box-shadow 0.18s,transform 0.15s;
}
.testimonial-card p{
  color:#203247dd; font-size:1.04rem; font-style:italic; margin-bottom:7px; font-family:'Roboto', serif;
}
.testimonial-card strong{
  color:#203247; font-size:0.97rem; font-family:'Montserrat', Georgia, serif; font-weight:600;
}
.testimonial-card:hover, .testimonial-card:focus-within{
  box-shadow:0 6px 18px rgba(217,164,65,0.15);
  transform:scale(1.014);
}
.testimonial-slider{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
}
@media (max-width:820px){
  .testimonial-slider{gap:14px;}
  .testimonial-card{padding:14px 12px;max-width:98vw;}
}
@media (max-width:600px){
  .testimonial-slider{flex-direction:column; align-items:center; gap:12px;}
  .testimonial-card{max-width:99vw;}
}

/* ====== MAP PLACEHOLDER ====== */
.map-placeholder {
  background:#F4F4F4;
  border-radius:10px;
  padding:20px;
  color:#203247bb;
  text-align:center;
  font-style:italic;
  box-shadow:0 2px 8px rgba(32,50,71,0.06);
  margin-top:16px;
}

/* ====== CTA BUTTON UTILITY ====== */
.cta-buttons{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:20px;
}

/* ====== FOOTER ====== */
footer{
  background:#203247;
  color:#fff;
  padding:36px 0 0 0; margin-top:60px; font-size:1rem; letter-spacing:0.01em;
}
.footer-wrapper{
  display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start;
  padding-bottom:18px;
}
.footer-main-nav, .footer-menu{
  display:flex; flex-direction:column; gap:8px;
}
.footer-main-nav a, .footer-menu a{
  color:#fff;
  font-family:'Montserrat',Georgia,serif;
  opacity:0.97;
  font-size:1rem;
  padding:3px 0;
  transition:color 0.19s, opacity 0.19s;
}
.footer-main-nav a:hover, .footer-menu a:hover, .footer-main-nav a:focus, .footer-menu a:focus{
  color:#D9A441; opacity:1;
}
.footer-contact p{
  font-size:0.97rem; color:#fff; opacity:0.97; line-height:1.6;margin-bottom:5px;
}
.footer-legal{flex:1 1 100%; margin-top:18px; color:#fff; font-size:0.92rem; opacity:0.8; text-align:left;}
@media (max-width:920px){
  .footer-wrapper{gap:14px;}
}
@media (max-width:700px){
  .footer-wrapper{flex-direction:column; gap:10px;}
  .footer-legal{text-align:center;margin-top:12px;}
}

/* ===== SCROLLBAR FOR DARK MENU ===== */
.mobile-menu{
  scrollbar-color:#D9A441 #203247;
  scrollbar-width:thin;
}

/* ===== CARDS, FLEX & UTILITY LAYOUTS ===== */
.feature-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:15px;
}

/* ===== RESPONSIVE FLEX PATTERNS ===== */
@media (max-width:768px){
  .content-grid, .card-container, .feature-grid, .testimonial-slider, .section{
    flex-direction:column; gap:20px;
  }
  .text-image-section{
    flex-direction:column; align-items:flex-start; gap:18px;
  }
}

/* ===== ANIMATIONS ===== */
/* Fade in (for cards, banners, overlays) */
@keyframes fadeIn{
  0%{opacity:0;transform:translateY(20px);} 100%{opacity:1; transform:none;}
}
.section, .card, .testimonial-card, .feature-grid li, .service-list li{
  animation:fadeIn 0.55s cubic-bezier(0.25,1,0.5,1) both;
}

/* ===== MICROINTERACTIONS ===== */
.cta, .cta.primary, .cta.secondary, .mobile-menu-toggle, .mobile-menu-close, a{
  transition: color 0.16s, background 0.18s, box-shadow 0.18s, border-color 0.2s, transform 0.14s;
}
.cta:active, .cta.primary:active, .cta.secondary:active,
.mobile-menu-toggle:active, .mobile-menu-close:active {
  transform:scale(0.97);
}

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner{
  position:fixed; left:0;right:0;bottom:0; z-index:1200;
  background:#203247; color:#fff; border-radius:22px 22px 0 0; box-shadow:0 -2px 10px rgba(32,50,71,0.10);
  padding:28px 24px 22px 24px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:28px;
  font-family:'Montserrat', Georgia, serif; font-size:1rem; letter-spacing:0.01em;
  animation:fadeIn 0.6s both;
}
.cookie-banner .cookie-banner-text{
  flex:1 1 0; min-width:120px; color:#fff; opacity:0.96;
}
.cookie-banner .cookie-banner-actions{
  display:flex;flex-wrap:wrap; gap:16px;
}
.cookie-banner button, .cookie-banner .cta{
  font-family:'Montserrat',Georgia,serif; font-size:1rem; font-weight:600; padding:10px 20px; border-radius:19px; border:none; cursor:pointer; transition:background 0.15s, color 0.15s;
}
.cookie-banner .accept{
  background:#D9A441;color:#203247;
}
.cookie-banner .accept:hover, .cookie-banner .accept:focus{background:#fff; color:#D9A441;}
.cookie-banner .reject{
  background:#fff;color:#D9A441; border:1.5px solid #D9A441;
}
.cookie-banner .reject:hover, .cookie-banner .reject:focus{background:#D9A441;color:#203247;}
.cookie-banner .settings{
  background:#203247; color:#fff;border:1.5px solid #D9A441;
}
.cookie-banner .settings:hover, .cookie-banner .settings:focus{background:#D9A441;color:#203247;}

@media (max-width: 700px){
  .cookie-banner{
    flex-direction:column; align-items:flex-start; gap:18px; padding:20px 10px 17px 10px; font-size:0.97rem;
  }
  .cookie-banner .cookie-banner-actions{gap:11px;}
}

/* === COOKIE SETTINGS MODAL === */
.cookie-modal{
  position:fixed; left:0;top:0;right:0;bottom:0; background:rgba(32,50,71,0.74);
  z-index:2001; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.5s both;
}
.cookie-modal-dialog{
  background:#fff; color:#203247; border-radius:23px; min-width:310px; max-width:96vw; box-shadow:0 4px 28px rgba(32,50,71,0.18);
  padding:34px 24px 28px 24px; position:relative; display:flex; flex-direction:column; gap:16px;
  animation:fadeIn 0.4s both;
}
.cookie-modal-close{
  position:absolute; top:16px; right:16px;
  background:#203247; color:#fff; border:none;
  border-radius:19px; font-size:1.25rem; padding:5px 13px; cursor:pointer;
  transition:background 0.19s, color 0.19s;
}
.cookie-modal-close:hover, .cookie-modal-close:focus{
  background:#D9A441; color:#203247;
}
.cookie-modal h2{font-size:1.25rem;margin-top:0;}
.cookie-categories{display:flex;flex-direction:column;gap:13px;}
.cookie-category{
  background:#F4F4F4; border-radius:9px; padding:12px 15px; display:flex; align-items:center; gap:13px;
  font-family:'Montserrat',Georgia,serif; font-size:1rem;
}
.cookie-toggle{
  margin-left:auto;
}
.cookie-modal-actions{display:flex;gap:16px;justify-content:flex-end; margin-top:11px;}
.cookie-modal-actions button{
  font-family:'Montserrat',Georgia,serif; font-size:1rem; font-weight:600; padding:8px 19px; border-radius:16px;
  border:none; cursor:pointer;transition:background 0.15s, color 0.15s;
}
.cookie-modal-actions .accept{
  background:#D9A441;color:#203247;
}
.cookie-modal-actions .accept:hover{background:#203247;color:#fff;}
.cookie-modal-actions .reject{
  background:#fff;color:#D9A441; border:1.5px solid #D9A441;
}
.cookie-modal-actions .reject:hover{background:#D9A441;color:#203247;}

@media (max-width:550px){
  .cookie-modal-dialog{padding:18px 5vw;}
}

/* ===== THANK YOU CONFIRMATION ===== */
.confirmation .content-wrapper{
  align-items:center; text-align:center;
}
.confirmation h1 {
  color:#203247; font-weight:700;
}
.confirmation ul{
  display:flex; flex-direction:column; gap:7px; align-items:center; margin-bottom:18px; margin-top:8px;
}
.confirmation ul li:before{content:"\2714";color:#D9A441;margin-right:9px;}


/* ===== PRINT FRIENDLY ===== */
@media print{
  header,footer,.cookie-banner,.mobile-menu {display:none!important;}
  .section,.container{box-shadow:none!important;background:#fff!important;}
}

/* ===== ACCESSIBILITY ===== */
:root {
  scroll-behavior: smooth;
}

/* ===== MISCELLANEOUS ===== */
::-webkit-scrollbar { width: 9px; background-color: #F4F4F4; }
::-webkit-scrollbar-thumb { background:#D9A441; border-radius:8px; }

/* Ensures NO overlapping and proper spacing on all cards/sections */
section, .section, .card, .testimonial-card, .feature-grid li, .service-list li{ margin-bottom:24px; }
.card-container, .content-grid, .feature-grid, .testimonial-slider, .footer-wrapper{ gap: 20px; }

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