/* --- CSS RESET / NORMALIZE --- */
html{box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit; margin:0; padding:0;}
body,html{height:100%; scroll-behavior:smooth;}
body{min-height:100vh; font-family:'Open Sans', Arial, sans-serif; color:#222; background:#F7F7F5; font-size:16px; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',Arial,sans-serif; color:#245484; font-weight:700; line-height:1.1; letter-spacing:-0.01em;}
h1{font-size:2.5rem; margin-bottom:20px;}
h2{font-size:2rem; margin-bottom:18px;}
h3{font-size:1.25rem; margin-bottom:10px;}
h4,h5,h6{font-size:1rem; margin-bottom:8px;}
p,ul,ol{margin-bottom:16px;}
a {color:#245484; transition:color 0.2s; text-decoration:none;}
a:hover,a:focus{color:#EEC84B; outline:none;}
ul,ol{padding-left:24px;}
strong{font-weight:700;}
img{max-width:100%; display:block; border-radius:16px;}

/* --- ROOT VARIABLES & BRAND COLORS --- */
:root {
  --primary: #245484;
  --secondary: #F7F7F5;
  --accent: #EEC84B;
  --surface: #fff;
  --art-blue: #4773B6;
  --art-pink: #F77C87;
  --art-green: #7DD3C2;
  --art-orange: #FFA861;
  --border-radius: 18px;
  --shadow: 0 4px 24px rgba(36,84,132,0.10),0 1px 3px rgba(0,0,0,0.02);
}

/* --- GENERAL LAYOUT CONTAINERS --- */
.container {
  width:100%;
  margin:0 auto;
  max-width:1140px;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0 16px;
}
.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.text-section {
  background:var(--surface);
  border-radius:var(--border-radius);
  padding:28px 24px;
  margin-bottom:20px;
  box-shadow: var(--shadow);
}

.section {
  margin-bottom:60px;
  padding:40px 20px;
}
.card-container {
  display:flex; flex-wrap:wrap; gap:24px;
}
.card {
  margin-bottom:20px;
  position:relative;
  border-radius:var(--border-radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:28px 24px;
  transition:transform 0.16s,box-shadow 0.18s;
}
.card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow:0 8px 32px rgba(36,84,132,0.16),0 1px 4px rgba(0,0,0,0.03);
}
.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;
  border-radius: var(--border-radius);
  background:var(--secondary);
  padding:24px 16px;
  box-shadow:0 2px 12px rgba(71,115,182,0.07);
  transition:box-shadow .2s, background .25s;
  min-width: 230px;
  flex:1 1 200px;
}
.feature-item img {
  width:52px; height:52px; object-fit:contain; background: #fff; border-radius:50%; box-shadow:0 2px 8px rgba(238,200,75,0.10);
}
.feature-item:hover {
  background: #fffbe7;
  box-shadow:0 6px 24px rgba(238,200,75,.16);
}

/***** HERO SECTION *****/
.hero {
  background: linear-gradient(120deg, #EEC84B 0%, #F77C87 100%);
  color:#245484;
  padding:58px 0 42px 0;
  min-height:280px;
  display:flex; align-items:center; width:100%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  box-shadow:0 12px 48px -12px rgba(238,200,75,0.13);
}
.hero .content-wrapper { align-items:flex-start; gap:14px; }
.hero h1{color:#245484; font-size:2.3rem;}
.hero .subheadline {
  font-size:1.25rem; color:#245484; margin-bottom:20px; max-width:640px;
  font-family:'Open Sans',sans-serif;
}
.hero.thank-you { background:linear-gradient(120deg,#7DD3C2 0%,#4773B6 95%); color:#fff;}
.hero.thank-you h1, .hero.thank-you p {color:#fff;}

/***** NAVIGATION & HEADER *****/
header {background:var(--surface); border-bottom:2px solid #e7e5de; position:sticky; top:0; width:100%; z-index:31;}
header .container {flex-direction:row; align-items:center; gap:28px; min-height:80px;}
header a img {height:46px; margin-right:40px;}
header nav {display:flex; flex:1; align-items:center; gap:26px;}
header nav a {font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:1rem; color:var(--primary); padding:5px 0 6px 0; border-bottom:2.5px solid transparent; transition:border .16s,color .16s; text-shadow:1px 1px 0 #fff2;}
header nav a.active, header nav a:hover, header nav a:focus {border-bottom:2.5px solid var(--accent); color:var(--art-pink);}
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--art-blue);
  color:#fff;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.08rem; font-weight:700;
  letter-spacing:0.015em; border:none;
  border-radius:28px; padding:12px 30px;
  box-shadow:0 2px 12px rgba(71,115,182,0.08);
  margin-left:20px;
  cursor:pointer; transition:background 0.16s,box-shadow .14s, transform .12s;
  text-decoration:none;
  outline:none;
  position:relative;
}
.btn-primary:after {
  content:''; display:block; position:absolute; left:12px; bottom:8px; width:22px; height:6px;
  background:rgba(238,200,75,0.10); border-radius:6px;
  z-index:0;
  pointer-events:none;
}
.btn-primary:hover, .btn-primary:focus {
  background:var(--art-pink); color:#fff;
  box-shadow:0 6px 24px rgba(247,124,135,0.13);
  transform:scale(1.04);
}

/**** MOBILE NAV ****/
.mobile-menu-toggle {
  display:none;
  position:fixed; right:18px; top:20px; z-index:60;
  width:46px; height:46px;
  background:var(--art-pink);
  color:#fff; border:none; border-radius:50%; font-size:2rem;
  align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(247,124,135,0.18);
  transition:box-shadow .18s,background 0.2s;
  cursor:pointer;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover{background:var(--art-orange);box-shadow:0 4px 24px rgba(255,168,97,.13);}

.mobile-menu {
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  z-index:99;
  pointer-events:none; opacity:0;
  background:rgba(36,84,132, 0.09);
  transition:opacity .28s;
  display:flex; align-items:stretch; justify-content:flex-end;
}
.mobile-menu.open {
  opacity:1; pointer-events:auto;
}
.mobile-menu .mobile-menu-close {
  position:absolute; right:22px; top:22px;
  font-size:2.2rem; background:none; border:none; color:var(--art-pink);
  cursor:pointer; z-index:3;
  transition:color .14s;
}
.mobile-menu .mobile-menu-close:hover,
.mobile-menu .mobile-menu-close:focus{color:var(--art-orange);}
.mobile-nav {
  background:#fff;
  width:94vw; max-width:340px;
  height:100vh;
  box-shadow:-6px 0 36px rgba(36,84,132,0.17);
  display:flex; flex-direction:column; gap:0px; align-items:flex-start; padding:60px 32px 30px 24px;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.65,.05,.36,1);
  will-change:transform;
  z-index:2;
}
.mobile-menu.open .mobile-nav {
  transform:translateX(0);
}
.mobile-nav a {
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.2rem; color:var(--primary);
  padding:15px 0;
  width:100%; text-align:left;
  border-bottom:1px solid #F7F7F5;
  transition:color .14s, background .15s;
  border-radius:9px;
}
.mobile-nav a:hover, .mobile-nav a:focus{color:var(--art-pink); background:rgba(247,124,135,0.09);}

@media (max-width:1000px) {
  header .container nav, header .btn-primary {display:none !important;}
  .mobile-menu-toggle {display:flex;}
}
@media (min-width:1001px){
  .mobile-menu{display:none !important;}
  .mobile-menu-toggle{display:none !important;}
}

/***** FEATURE GRID STYLES *****/
.feature-grid {
  display:flex; flex-wrap:wrap; gap:28px; justify-content:flex-start;
  margin-bottom:10px;
}

/***** SERVICE LIST (INDEX) *****/
.service-list {
  display:flex; flex-direction:column; gap:24px;
  margin:18px 0 22px 0;
}
.service-item {
  background:#fffef7;
  border-left:8px solid var(--art-orange);
  border-radius:var(--border-radius);
  padding:18px 18px 14px 28px;
  box-shadow:0 1.5px 8px rgba(255,168,97,0.06);
  font-size:1.08rem;
  font-family:'Open Sans',sans-serif;
  color:#355;
  display:flex; flex-direction:column; gap:5px;
  position:relative; min-width:180px;
  transition:border 0.24s, box-shadow .17s, background .16s;
}
.service-item h3 span { float:right; color:var(--primary); font-size:0.92em; font-weight:600; margin-left:18px; }
.service-item:hover {border-left:8px solid var(--art-green); background:#f3fdff; box-shadow:0 6px 21px rgba(125,211,194,.07);}

/***** TESTIMONIALS *****/
.testimonial-slider {
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;
}
.testimonial-card {
  display:flex; align-items:center; gap:20px; padding:20px;
  background:#fff;
  border-radius:var(--border-radius);
  box-shadow:0 5px 30px rgba(36,84,132,0.09);
  min-width:240px; margin-bottom:20px;
  flex:1 1 100px;
  font-size:1.15rem; color:#273153;
  position:relative;
}
.testimonial-card p{font-style:italic; margin-bottom:10px; color:#245484;}
.testimonial-card span{color:#6e7944; font-size:0.99rem; letter-spacing:0.01em;}
.testimonial-card:before{
  content:'"';
  font-family:'Montserrat',sans-serif;
  font-size:2.8rem;
  color:var(--accent);
  position:absolute;
  left:16px; top:6px;
  opacity:0.16;
  z-index:0;
}
/***** CONTACT ACTION SECTION *****/
.contact-action .content-wrapper {
  align-items:center;
  text-align:center;
  background:linear-gradient(120deg,#EEC84B 25%,#7DD3C2 95%);
  border-radius:var(--border-radius);
  box-shadow:0 8px 32px rgba(125,211,194,0.07);
  padding:32px 12px 38px 12px;
  gap:12px;
}
.contact-info{
  font-size:1.08em;
  margin-bottom:11px;
  color:#245484;
}

/***** FOOTER *****/
footer {
  background:var(--primary);
  color:#fff;
  padding:40px 0 24px 0;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top:48px;
  width:100%;
}
footer .container { flex-direction:row; align-items: center; gap:36px; }
.footer-logo img {height:38px; margin-right:22px;}
footer nav { display:flex; gap:18px; flex:1; }
footer nav a { color:#fff; font-family:'Montserrat'; font-size:1.02rem; text-decoration:none; opacity:0.9; transition:color .15s, text-shadow .14s; }
footer nav a:hover { color:var(--accent); text-shadow:0 2px 15px rgba(238,200,75,0.16); }
footer p { font-size:0.98rem; opacity:0.9; }

/***** PAGE SPACING: ALL CONTENT ******/
section { margin-bottom:60px; padding:40px 20px; }
section:last-child {margin-bottom:30px;}

/***** RESPONSIVE DESIGN *****/
@media (max-width: 900px) {
  .container { max-width:100%; }
  .feature-grid {gap:18px;}
  .card-container, .testimonial-slider {gap:17px;}
  footer .container { flex-direction:column; gap:20px; align-items:flex-start;}
}
@media (max-width:768px) {
  header .container {flex-direction:row; gap:12px; min-height:58px;}
  .content-wrapper {gap:14px;}
  .hero {padding:34px 0 24px 0; min-height:140px; border-bottom-left-radius:24px; border-bottom-right-radius:24px;}
  h1{font-size:1.7rem;}
  h2{font-size:1.22rem;}
  section{padding:18px 5px; margin-bottom:38px;}
  .feature-grid, .service-list, .testimonial-slider, .card-container {gap:9px;}
  .card {padding:16px 10px;}
  .feature-item {min-width:140px; padding:13px 8px;}
  .testimonial-card {font-size:1rem; padding:13px 9px;}
  .contact-action .content-wrapper {padding:15px 7px 18px 7px; border-radius:14px;}
  footer {padding:19px 0 12px 0; border-radius:12px;}
}
@media(max-width:540px){
  .container{padding:0 2vw;}
  .hero{border-radius:0;}
  .text-section, .card, .feature-item{border-radius:10px;}
  .testimonial-card{border-radius:10px; font-size:.98rem;}
  footer{border-radius:0;}
}
/****** RESPONSIVE FLEX ADJUSTMENTS ******/
@media (max-width: 1000px) {
  .feature-grid,
  .card-container,
  .testimonial-slider,
  .content-grid,
  .service-list { flex-direction: column; gap: 14px; }
  .footer .container { flex-direction: column; gap: 12px; }
}
@media (max-width: 768px){
  .text-image-section,
  .content-grid{ flex-direction: column !important; gap:10px; align-items:center; }
}

/***** COOKIE CONSENT BANNER & SETTINGS MODAL *****/
.cookie-consent-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(255,255,255,0.92); box-shadow:0 -4px 36px rgba(36,84,132,0.18);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:center;
  padding:18px 14px 18px 24px;
  border-top: 4px solid var(--accent);
  font-size:1.04rem;
  color:#364355;
  animation:slideUpBanner 0.7s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUpBanner {
  from {transform:translateY(80px); opacity:0;}
  to {transform:translateY(0); opacity:1;}
}
.cookie-consent-banner .cookie-btn {
  margin-left:10px;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1rem; font-weight:600; border-radius:20px; border:none;
  padding:10px 24px; cursor:pointer;
  background:var(--art-green); color:var(--primary);
  margin-right:5px; margin-top:7px;
  transition: background 0.16s,box-shadow 0.15s, color 0.13s;
}
.cookie-consent-banner .cookie-btn.accept {background: var(--accent); color:var(--primary); box-shadow:0 2px 12px rgba(238,200,75,.12);}
.cookie-consent-banner .cookie-btn.settings {background: var(--art-blue); color:#fff;}
.cookie-consent-banner .cookie-btn.reject {background: var(--art-pink); color:#fff;}
.cookie-consent-banner .cookie-btn:hover {filter:brightness(1.04); box-shadow:0 3px 16px rgba(71,115,182,0.13);}

.cookie-modal-overlay {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(36,84,132,0.16);
  z-index:210;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
  animation:fadeIn 0.25s;
}
@keyframes fadeIn{
  from{opacity:0;} to{opacity:1;}
}
.cookie-modal {
  background:#fff;
  border-radius:24px;
  max-width:430px; width:93vw;
  padding:36px 27px 28px 27px;
  box-shadow:0 4px 32px rgba(36,84,132,0.16);
  display:flex; flex-direction:column; gap:24px; align-items:flex-start;
  animation:slideModal .46s cubic-bezier(.72,-0.7,.27,1.5);
}
@keyframes slideModal{
  from{transform:translateY(60px) scale(.97); opacity:0;}
  to{transform:translateY(0) scale(1); opacity:1;}
}
.cookie-modal h2{font-size:1.3rem; color:var(--art-blue); margin-bottom:12px;}
.cookie-category {
  display:flex; align-items:center; gap:18px;
  margin-bottom:14px;
}
.cookie-category input[type='checkbox']{width:22px;height:22px; accent-color:var(--accent);}
.cookie-category label {font-size:1.09rem; color:#273153;}
.cookie-category.essential label {font-weight:600; color:var(--primary);}
.cookie-modal .cookie-btn {margin-left:0; margin-top:8px;}

/***** FORM ELEMENTS (FORMS, TEXTFIELDS etc.) *****/
input, textarea, select {
  font-family:'Open Sans',Arial,sans-serif; font-size:1rem; border-radius:14px;
  border:1.7px solid #bbc; background:#fafdff; padding:11px 13px; margin-bottom:14px;
  transition:border .17s, background .15s;
}
input:focus, textarea:focus, select:focus {border-color: var(--art-blue); outline:none; background: #f0faff;}

/***** ARTISTIC ELEMENTS *****/
.section, .content-wrapper, .card, .feature-item, .testimonial-card, .service-item {
  box-shadow:0 2px 12px rgba(255,168,97,0.06);
}
.feature-item {
  border-left: 7px solid var(--art-pink);
}
.feature-item:nth-child(2) {border-left-color:var(--accent);}
.feature-item:nth-child(3) {border-left-color:var(--art-green);}
.feature-item:nth-child(4) {border-left-color:var(--art-blue);}

/***** MICRO-INTERACTIONS *****/
.card, .testimonial-card, .feature-item, .service-item, .btn-primary {
  transition:box-shadow 0.22s, transform 0.16s, background 0.15s;
}
.card:hover, .feature-item:hover, .service-item:hover {
  box-shadow:0 8px 26px rgba(238,200,75,0.17),0 1.5px 6px rgba(36,84,132,0.11);
  background: #fffbe8;
}

/***** UTILITY CLASSES *****/
.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-accent{color:var(--accent)!important;}
.bg-accent{background:var(--accent)!important; color:var(--primary)!important;}
.bg-primary{background:var(--primary)!important; color:#fff!important;}
.bg-secondary{background:var(--secondary)!important; color:var(--primary)!important;}

/***** LIST STYLES *****/
ul, ol {
  margin-bottom:16px; color:#222a33; font-size:1.08em; line-height:1.7;
}
ul li, ol li {margin-bottom:7px;}

/***** ACCESSIBILITY *****/
a:focus, button:focus, .btn-primary:focus {
  outline:2.5px solid var(--accent);
  outline-offset:2px;
}

/***** SPECIAL THANK-YOU PAGE *****/
.hero.thank-you {
  background:linear-gradient(120deg, #7DD3C2 0%, #4773B6 98%);
  color:#fff;
}
.hero.thank-you h1, .hero.thank-you p, .hero.thank-you .btn-primary { color:#fff;}

/***** Z-INDEX SANITY *****/
header {z-index:31;}
.mobile-menu {z-index:99;}
.cookie-consent-banner {z-index:200;}
.cookie-modal-overlay {z-index:210;}

/***** PRINT OPTIMIZATION *****/
@media print{
  header, footer, .mobile-menu, .mobile-menu-toggle, .cookie-consent-banner, .cookie-modal-overlay{display:none!important;}
  section, .content-wrapper, .card, .feature-item, .testimonial-card, .service-item {box-shadow:none!important; background:#fff!important;}
  body{background:#fff; color:#222;}
}

/* --- END --- */