/* 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,
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;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: #F6F3EF;
  color: #40362E;
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.7;
  min-height: 100vh;
}

img, picture {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: #9C5420;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover, a:focus {
  color: #ECB014;
  outline: none; 
}

ol, ul {
  list-style: disc inside;
  margin-left: 0px;
  margin-bottom: 16px;
}

strong {
  font-weight: 700;
  color: #225EA8;
}

/* BRAND RETRO PALETTE (slightly muted, for authentic vintage feel) */
:root {
  --primary: #225EA8;
  --primary-dark: #183E63;
  --secondary: #FAF6EF;
  --accent: #ECB014;
  --accent-dark: #B07D00;
  --brown: #9C5420;
  --muted-blue: #E8F1F9;
  --vintage-green: #B8AE8C;
  --vintage-red: #AA4242;
  --soft-border: #EAD3A7;
}

/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Arial Black', Arial, sans-serif;
  color: #225EA8;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 0 #EAD3A7, 0 3px 8px #E8F1F9;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p, li, a, button {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1rem;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.content-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 820px;
}

/* SECTION SPACING AND PATTERNS */
section {
  background: var(--secondary);
  border-radius: 26px;
  box-shadow: 0 5px 30px rgba(60,36,8,0.05), 0 0 0 2px var(--soft-border);
  margin-bottom: 60px;
  padding: 40px 20px;
  position: relative;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: #FFEFD3;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(151, 121, 42, 0.05);
  border: 1px solid var(--soft-border);
  margin-bottom: 20px;
  position: relative;
  padding: 28px 24px;
}

.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;
  align-items: center;
  gap: 20px;
  background: #FBF6E7;
  border: 1.5px dashed #B8AE8C;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  color: #2B251B;
  box-shadow: 0 2px 12px rgba(50,40,8,0.055);
  transition: box-shadow 0.2s;
}
.testimonial-card:hover {
  box-shadow: 0 6px 20px rgba(230,180,55,0.13);
}
.testimonial-card p {
  font-size: 1.1rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  margin-right: 10px;
  color: #2B251B;
}
.testimonial-card span {
  font-size: 1rem;
  font-style: italic;
  color: #9C5420;
  margin-left: auto;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: #F6EAD7;
  border-radius: 16px;
  padding: 24px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(147, 127, 62, 0.06);
}

.text-section {
  margin-bottom: 24px;
}

.price {
  background: var(--accent);
  color: #FFF6DD;
  font-weight: bold;
  font-family: 'Montserrat', Arial, sans-serif;
  margin-top: 6px;
  padding: 2px 10px;
  letter-spacing: 1px;
  border-radius: 8px;
  margin-left: 12px;
}

/* BUTTONS */
.cta-btn-primary {
  appearance: none;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #221709;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 36px;
  margin-top: 24px;
  margin-bottom: 8px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 2px 14px rgba(156,84,32,0.08);
  transition: background 0.18s, color 0.18s, box-shadow 0.12s, transform 0.08s;
  text-shadow: 0 2px 0 rgba(255,230,165,0.14);
  outline: none;
}
.cta-btn-primary:hover, .cta-btn-primary:focus {
  background: var(--accent-dark);
  color: #FFF;
  box-shadow: 0 4px 18px rgba(176,125,0,0.15);
  transform: translateY(-2px) scale(1.035);
}

button, .mobile-menu-close, .cookie-consent-btn {
  font-family: 'Montserrat', Arial, sans-serif;
  cursor: pointer;
  border: none;
  outline: none;
}
button:focus {
  outline: 2px solid var(--primary);
}

/* HEADER */
header {
  background: #FFEFD3 url('data:image/svg+xml;utf8,<svg width="800" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="%23FAE7B5" width="800" height="60"/><ellipse fill="%23EAD3A7" cx="400" cy="70" rx="680" ry="70"/></svg>') bottom repeat-x;
  border-bottom: 4px double #B07D00;
  box-shadow: 0 3px 16px rgba(230,182,77,0.07);
  padding-top: 8px;
  padding-bottom: 8px;
}
.header-inner, header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo img {
  height: 55px;
  width: auto;
  margin-right: 20px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.main-nav a {
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--primary);
  background: transparent;
  transition: background 0.14s, color 0.14s;
}
.main-nav a:hover, .main-nav a:active {
  background: var(--muted-blue);
  color: var(--accent-dark);
}

.mobile-menu-toggle {
  display: none;
  font-size: 2rem;
  background: transparent;
  color: #B07D00;
  margin-left: 18px;
  border: none;
  padding: 6px 10px;
  z-index: 102;
  transition: background .2s, color .2s, transform .1s;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background: #FFF6DD;
  color: #225EA8;
  border-radius: 50%;
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; height: 100vh; width: 100vw;
  background: #F9E6D5;
  box-shadow: 0 2px 16px rgba(176,125,0,0.11);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.7,0.05,0.41,1.04);
  display: flex;
  flex-direction: column;
  z-index: 202;
  padding-top: 16px;
  padding-bottom: 32px;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu-close {
  align-self: flex-end;
  margin-right: 24px;
  margin-bottom: 18px;
  font-size: 2rem;
  color: #9C5420;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.18s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background: #FFEFD3;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-left: 32px;
  margin-top: 12px;
}
.mobile-nav a {
  font-size: 1.16rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  color: #225EA8;
  padding: 12px 8px 12px 4px;
  transition: color 0.14s, background 0.14s;
  border-radius: 8px;
  min-width: 180px;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: #B07D00;
  background: #FAF6EF;
}

/* MAIN CONTENT SPACING */
main {
  padding-top: 36px;
  padding-bottom: 24px;
}

section .container>.content-wrapper>ul,
section .container>.content-wrapper>ol {
  margin-top: 8px;
  margin-bottom: 0px;
  padding-left: 16px;
}

/* FOOTER */
footer {
  background: #FFEFD3 url('data:image/svg+xml;utf8,<svg width="800" height="40" xmlns="http://www.w3.org/2000/svg"><rect fill="%23FAE7B5" width="800" height="40"/><ellipse fill="%23EAD3A7" cx="400" cy="40" rx="680" ry="40"/></svg>') top repeat-x;
  border-top: 3px double #B07D00;
  color: #775316;
  font-size: 1rem;
  margin-top: 16px;
  padding-top: 28px;
  padding-bottom: 18px;
}
footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
footer .content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 24px;
  justify-content: space-between;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav a {
  color: #B07D00;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline dotted #AA4242 1.3px;
  margin-bottom: 3px;
  padding: 2px 0px 2px 0px;
  border-radius: 5px;
  transition: color .16s, background .14s;
}
.footer-nav a:hover, .footer-nav a:focus {
  background: #FFD782;
  color: #40362E;
}
.text-section p {
  font-size: 1rem;
  color: #64512A;
  margin-bottom: 6px;
}

/* *******************
RETRO DECORATIVE/PATTERN ELEMENTS
********************* */
section {
  background-image:
    repeating-linear-gradient(135deg, #FFEFD3 0 28px, #F6EAD7 28px, #F6EAD7 50px),
    repeating-linear-gradient(45deg, #FFF6DD 0px, #FFF6DD 34px, #EAD3A7 34px, #EAD3A7 42px); 
  background-blend-mode: lighten;
  position: relative;
}
section:before {
  content: '';
  position: absolute;
  top:24px; left:18px;
  width: 64px; height: 33px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="33"><ellipse cx="32" cy="16" rx="32" ry="14" fill="%23F6EAD7"/></svg>');
  opacity: 0.11;
  pointer-events: none;
  z-index: 1;
}
section:after {
  content: '';
  position: absolute;
  bottom:16px; right:18px;
  width: 40px; height: 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="18"><ellipse cx="20" cy="9" rx="20" ry="7" fill="%23FFEFD3"/></svg>');
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
}

/* RETRO ICONS IN LISTS */
ul li img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  vertical-align: middle;
  filter: sepia(0.3) hue-rotate(-10deg) brightness(0.95);
}

ul li {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}
ul ul, ol ul, ul ol, ol ol {
  margin-top: 5px;
  margin-left: 15px;
}

ol {
  counter-reset: retro-ol;
  margin-left: 18px;
}
ol li {
  counter-increment: retro-ol;
  margin-bottom: 16px;
  position: relative;
  padding-left: 32px;
  color: #40362e;
  font-family: 'Roboto', Arial, sans-serif;
}
ol li::before {
  content: counter(retro-ol, decimal-leading-zero) '. ';
  position: absolute;
  left: 0;
  color: #B07D00;
  font-weight: 700;
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: 1px;
}

/* RETRO SHADOWS */
.card, section, .testimonial-card, .feature-item {
  box-shadow: 0 2px 12px rgba(151,121,42,0.06), 0 0px 0 1px #EAD3A7;
}

/* INTERACTION STYLES */
.card, .feature-item, .testimonial-card, .footer-nav a, .main-nav a, .cta-btn-primary {
  transition: box-shadow 0.13s, background 0.14s, color .13s, transform 0.10s;
}
.card:hover, .feature-item:hover {
  box-shadow: 0 6px 12px rgba(176,125,0,0.15);
  background: #FFF3DC;
}

/* ---------------------
COOKIE CONSENT BANNER
---------------------- */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: #FFF8E1;
  box-shadow: 0 -4px 18px rgba(234,211,167,0.19);
  border-top: 3px double #B07D00;
  z-index: 999999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px 18px 18px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1rem;
  color: #40362e;
}
.cookie-consent-banner .cookie-message {
  max-width: 66vw;
}
.cookie-consent-btn {
  margin-left: 12px;
  margin-right: 3px;
  border: none;
  border-radius: 9px;
  padding: 9px 15px;
  font-weight: 700;
  font-family: 'Montserrat', Arial, sans-serif;
  background: #FFE2B7;
  color: #40362e;
  box-shadow: 0 2px 8px rgba(176,125,0,0.06);
  transition: background 0.14s, color 0.13s, box-shadow 0.13s, transform 0.1s;
}
.cookie-consent-btn.accept {
  background: var(--accent);
  color: #1B150C;
}
.cookie-consent-btn.accept:hover {background: #B07D00; color: #FFF;}

.cookie-consent-btn.reject {
  background: #F5C6BF;
  color: #772B2B;
}
.cookie-consent-btn.reject:hover {
  background: #AA4242;
  color: #FFF;
}
.cookie-consent-btn.settings {
  background: #E8F1F9;
  color: #183E63;
}
.cookie-consent-btn.settings:hover {background: #B8AE8C; color: #221709;}

/* COOKIE MODAL */
.cookie-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(241,220,158,0.76);
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookie-modal {
  background: #FFF8E1;
  border-radius: 16px;
  box-shadow: 0 5px 38px rgba(151,121,42,0.22);
  border: 2.5px solid #EAD3A7;
  min-width: 300px;
  max-width: 403px;
  width: 92vw;
  padding: 38px 28px 28px;
  font-family: 'Roboto', Arial, sans-serif;
  color: #40362e;
  position: relative;
  z-index: 1000003;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cookieModalIn 0.26s cubic-bezier(.18,.86,.42,1.02);
}
@keyframes cookieModalIn {
  from { transform: scale(.92) translateY(38px); opacity: 0; }
  to   { transform: scale(1) translateY(0);    opacity: 1; }
}
.cookie-modal h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.3rem;
  margin-bottom: 7px;
}
.cookie-modal .cookie-category {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
}
.cookie-modal label {
  font-size: 1.02rem;
  font-family: 'Roboto', Arial, sans-serif;
}
.cookie-toggle {
  appearance: none;
  outline: none;
  border-radius: 12px;
  width: 34px;
  height: 20px;
  background: #E8F1F9;
  position: relative;
  box-shadow: 0 1px 4px rgba(176,125,0,0.13);
  transition: background 0.13s;
  vertical-align: middle;
}
.cookie-toggle:checked {
  background: var(--accent);
}
.cookie-toggle:before {
  content: '';
  display: block;
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  background: #FFF;
  border-radius: 50%;
  transition: left 0.13s, background 0.1s;
}
.cookie-toggle:checked:before {
  left: 17px;
  background: #FFD782;
}
.cookie-modal-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 12px;
}
.cookie-modal-close {
  position: absolute;
  top: 10px; right: 14px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #CC8B12;
  cursor: pointer;
  transition: background 0.13s;
}
.cookie-modal-close:focus, .cookie-modal-close:hover {
  background: #FFEFD3;
}
.cookie-modal .cookie-category.always {
  opacity: 0.64;
  user-select: none;
}

/* ---------------
RESPONSIVE DESIGN
--------------- */
@media (max-width: 1140px) {
  .container { max-width: 98vw; }
  .content-wrapper { max-width: 96vw; }
}
@media (max-width: 900px) {
  section { padding: 32px 8px; }
  .footer-nav { flex-direction: column; gap: 10px; }
  .content-grid, .card-container { gap: 15px; }
}
@media (max-width:768px) {
  header .container, .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .main-nav { display: none; }
  .mobile-menu-toggle {
    display: block;
  }
  .cta-btn-primary { order: 2; }
  main { padding-top: 22px; }
  section { margin-bottom: 42px; padding: 22px 7px 24px 7px; border-radius: 14px; }
  .footer-nav { flex-direction: column; }
  .content-wrapper { max-width: 98vw; }
  .container { max-width: 100vw; padding: 0 6px; }
  .content-grid, .card-container { gap: 10px; }
}
@media (max-width:600px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }
  .logo img { height: 42px; }
  .testimonial-card { flex-direction: column; gap: 14px; align-items: flex-start; }
  .footer-nav a { font-size: 0.95rem; }
  .cookie-consent-banner { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.98rem; padding: 15px 10px; }
  .cookie-consent-banner .cookie-message { max-width: 92vw; font-size: 0.95rem; }
}
@media (max-width:500px) {
  body, p, ul, li { font-size: 0.96rem; }
  .cta-btn-primary, .cookie-consent-btn { font-size: 0.96rem; padding: 10px 16px; }
  .mobile-nav a { font-size: 1rem; }
}
@media (max-width:450px) {
  .cookie-modal { padding-left: 7vw; padding-right: 7vw; }
}

/* TEXT-IMAGE FLEX DIRECTION */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: stretch; gap: 10px; }
  .footer .content-wrapper { flex-direction: column; gap: 13px; }
}

/****************
FORM FIELDS, INPUTS
****************/
input, select, textarea {
  border-radius: 11px;
  border: 1.5px solid #E2BA97;
  font-size: 1rem;
  font-family: 'Roboto', Arial, sans-serif;
  padding: 10px 14px;
  margin-bottom: 15px;
  width: 100%;
  background: #FFFCEB;
  color: #40362e;
  box-shadow: 0 1px 4px rgba(234,211,167,0.11);
  outline: none;
  transition: border-color 0.13s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-dark);
}
label {font-family: 'Montserrat', Arial, sans-serif; color: #B07D00; font-weight: 700;}
::-webkit-input-placeholder { color: #CCB795; opacity: 1; }
::-moz-placeholder { color: #CCB795; opacity: 1; }
:-ms-input-placeholder { color: #CCB795; opacity: 1; }
::placeholder { color: #CCB795; opacity: 1; }

/****************
MICRO-INTERACTIONS & ANIMATIONS
****************/
.cta-btn-primary, .cookie-consent-btn, .card, .testimonial-card {
  will-change: transform, box-shadow, background, color;
}
.cta-btn-primary:active, .cookie-consent-btn:active {
  transform: scale(.96);
}

/****************
MISC UTILS
****************/
.hide { display: none!important; }
.flex { display: flex!important; }
.f-col { flex-direction: column!important; }
.align-c { align-items: center!important; }
.justify-c { justify-content: center!important; }
.gap-16 { gap: 16px!important; }
.mb-24 { margin-bottom: 24px!important; }

/****************
ACCESSIBILITY
****************/
:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 3px;
}

/****************
RETRO BADGES, SMALL DETAILS
****************/
.badge-retro {
  display: inline-block;
  background: #DFC389;
  color: #52411E;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.90rem;
  font-weight: bold;
  border-radius: 7px;
  letter-spacing: 1.2px;
  padding: 2px 10px 2px 10px;
  margin-left: 6px;
}

/****************
NO GRID ENFORCEMENT
****************/
/* Absolutely no display: grid or grid-* usage present. All layouts max flexbox. */