/* ==============================================================
   CSS RESET & NORMALIZE (Mobile First)
================================================================*/
html,body,div,span,applet,object,iframe,p,pre,a,abbr,address,b,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,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{
  border:0; box-sizing:border-box; margin:0; padding:0; font: inherit; vertical-align:baseline;
}
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }
body,html { width:100%; height:100%; line-height:1.5; -webkit-font-smoothing: antialiased; background: #F8F4EC; font-size:16px; color:#2D2926; }
ul,ol { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block;}
button,input,select,textarea { font: inherit; }

/* ===============================
   CSS CUSTOM PROPERTIES
   (Brand + Vintage Retro Palette)
================================*/
:root {
  --color-primary: #163B5B; /* Brand blue */
  --color-secondary: #F6B731; /* Brand yellow */
  --color-accent: #FFFFFF;
  --color-bg: #F8F4EC; /* Retro paper */
  --color-contrast-dark: #2D2926;
  --color-contrast-light: #fff;
  --color-retro-blue: #264653;
  --color-retro-orange: #E76F51;
  --color-retro-olive: #A1A06A;
  --color-retro-beige: #F7EAD9;
  --color-retro-brown: #A06A36;
  --color-retro-red: #BF4342;

  --font-display: 'Montserrat', 'Arial Rounded MT Bold', 'Arial', sans-serif;
  --font-body: 'Open Sans', 'Verdana', Arial, sans-serif;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 7px;
  --shadow-main: 0 2px 24px 0 rgba(125,98,54,0.12), 0 1.5px 0 0 #e1c295;
  --shadow-card: 0 0.5px 7px 0 #e8c48266,0 2px 18px #d6b57b55;
  --shadow-btn: 0 3px 0 0 #e1c295;
  --shadow-focus: 0 0 0 3px #F6B73155;
  --pattern-stripes: repeating-linear-gradient(-45deg, #f6b731 0 6px, #fff8e3 6px 16px);
}

/* Vintage/Retro vibes: blocky headlines, rounded corners, sunshine background, retro stripes or borders, subtle textures */

/* ======================================
   TYPOGRAPHY HIERARCHY
======================================*/
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-contrast-dark);
  letter-spacing: 0.02em;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--color-primary);
  letter-spacing:0.02em;
  margin-bottom: 18px;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-retro-blue);
  margin-bottom: 14px;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight:700;
  color: var(--color-retro-orange);
  letter-spacing:0.01em;
}
p, li {
  font-size:1rem;
  margin-bottom:8px;
  color: var(--color-contrast-dark);
  line-height: 1.68;
}
.subheadline {
  font-family: var(--font-body);
  font-size:1.15rem;
  color: var(--color-retro-orange);
  margin-bottom: 20px;
  font-weight:600;
}
strong { font-weight:700; color: var(--color-primary); }

/* =====================================
   GENERAL LAYOUT SPACING & CONTAINER
=====================================*/
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 0;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: var(--color-retro-beige);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
}
main > section:not(:first-child) .section {
  margin-top: 42px;
}

/* ========== TEXT-IMAGE FLEX SECTIONS ========== */
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width: 768px) {
  .text-image-section { flex-direction: row; }
}

.text-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* == FEATURE GRID == */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.feature-grid > div {
  background: #fff8e3;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  flex: 1 1 210px;
  min-width: 220px;
  max-width: 300px;
  padding: 26px 18px 20px 18px;
  text-align: center;
  border: 3px solid #ecdfbe;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transition: box-shadow 0.22s, border 0.22s, transform 0.18s;
  position: relative;
}
.feature-grid > div:hover {
  box-shadow: 0 4px 24px 0 #f6b73133;
  border: 3px solid var(--color-secondary);
  transform: translateY(-2px) scale(1.02);
  z-index: 2;
}
.feature-grid img {
  width:50px; height:50px; margin-bottom:7px;
  filter: drop-shadow(0 1px 1px #e7c47e99);
  border-radius: var(--radius-sm);
  background: var(--pattern-stripes);
  padding:6px;
}

/* SERVICE LIST */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.service-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: #fff8e3;
  border-radius: var(--radius-md);
  padding: 18px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
  font-size: 1.06em;
}
.service-list span {
  color: var(--color-retro-brown);
  font-weight:600;
  margin-left:8px;
}
.service-list a {
  margin-left:auto;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size:0.97em;
  font-weight: 700;
  letter-spacing:0.03em;
  padding:6px 13px;
  border-radius: var(--radius-sm);
  border:none;
  box-shadow: var(--shadow-btn);
  transition: background 0.16s, color 0.16s, transform 0.15s;
}
.service-list a:hover,
.service-list a:focus {
  background: var(--color-retro-orange);
  color: #fff;
  outline: none;
  transform: translateY(-1.5px) scale(1.03);
}

/* == TESTIMONIALS == */
.testimonial-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius-lg);
  border:2px solid #ece3d2;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  position: relative;
  min-width: 0;
  transition: box-shadow 0.18s, border 0.15s;
}
.testimonial-card:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 8px 35px 0 #d3b97766;
}
.testimonial-card p {
  font-size:1.16em;
  color: #1a1a1a;
  font-style: italic;
  font-family: var(--font-body);
}
.testimonial-meta {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:0.97em;
  color: var(--color-retro-brown);
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:0.03em;
}


/* == FEATURE-ITEM CLASS (for About values/overview) == */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: #fff8e3;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom:20px;
  padding: 16px 14px;
}


/* ===========================
   BUTTONS & CTA STYLE
===========================*/
.cta-btn, .cta-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing:0.05em;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 27px;
  box-shadow: var(--shadow-btn);
  margin-top:12px;
  margin-bottom: 8px;
  cursor:pointer;
  transition: background 0.2s, color 0.15s, box-shadow 0.2s, transform 0.15s;
}
.cta-btn:hover, .cta-btn:focus {
  background: var(--color-retro-orange);
  color: var(--color-contrast-light);
  box-shadow: 0 4px 20px #E76F51aa,0 2px 10px #e2b97b77;
  outline: none;
  transform: translateY(-2px) scale(1.025);
}

button,
input[type="button"],
input[type="submit"] {
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
  font-size:1rem;
  background: var(--color-secondary);
  color: var(--color-primary);
  padding:8px 17px;
  cursor:pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.2s, color 0.15s, transform 0.11s;
}
button:hover, button:focus {
  background: var(--color-retro-blue);
  color: #fff;
  outline: none;
  transform: translateY(-1.5px) scale(1.02);
}

/* ===========================
   HEADER & SITE NAV
===========================*/
header {
  background: var(--color-retro-blue);
  box-shadow: 0 2px 16px #163b5b22;
  border-bottom:6px solid var(--color-secondary);
  padding-top:0;
  padding-bottom:0;
}
header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height:70px;
}
header a img {
  height: 44px; margin-right: 14px;
}
header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-left:12px;
}
header nav a {
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.02em;
  color: #fff;
  letter-spacing:0.01em;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color 0.13s, background 0.16s;
}
header nav a:hover, header nav a:focus {
  color: var(--color-secondary);
  background: #254963;
}
header nav .cta-btn {
  background: var(--color-secondary);
  color: var(--color-primary);
  margin-left: 6px;
  font-size:1.02em;
  box-shadow: 0 2px 8px #ffea99cc;
}

/* Hide hamburger and mobile menu by default */
.mobile-menu-toggle {
  display: flex;
  align-items:center;
  justify-content:center;
  font-size: 2rem;
  background: var(--color-secondary);
  color: var(--color-primary);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  margin-left:18px;
  box-shadow:0 2px 8px #e7c47e66;
  cursor:pointer;
  transition: background 0.17s, color 0.13s, box-shadow 0.2s, transform 0.16s;
  z-index: 90;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
  background: var(--color-retro-orange);
  color: #fff;
  transform: scale(1.07);
}
.mobile-menu {
  display: none;
}

/* Show mobile menu toggle only on mobile */
@media (min-width: 950px) {
  .mobile-menu-toggle {
    display:none;
  }
}

@media (max-width: 949px) {
  header nav { display:none; }
  .mobile-menu-toggle { display:flex; }
}

/* ------- Mobile Offcanvas MENU --------- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height:100vh;
  width: 88vw;
  max-width: 310px;
  background: var(--color-retro-blue);
  box-shadow: -2px 0 22px 0 #163b5b33;
  z-index: 120;
  transform: translateX(100%);
  transition: transform 0.27s cubic-bezier(.44,1.6,.51,0.99);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 32px 22px;
}
.mobile-menu.active {
  transform: translateX(0);
}
.mobile-menu-close {
  align-self: flex-end;
  font-size: 1.6rem;
  background: none;
  border: none;
  color: var(--color-secondary);
  margin-bottom: 16px;
  cursor: pointer;
  transition: color 0.12s, transform 0.14s;
  padding: 4px 7px;
  border-radius:50%;
}
.mobile-menu-close:hover,.mobile-menu-close:focus {
  color:var(--color-retro-orange);
  background: #f8f4ec44;
  outline:none;
  transform: scale(1.18);
}

.mobile-nav {
  display:flex;
  flex-direction:column;
  gap: 11px;
  margin-top: 9px;
}
.mobile-nav a {
  color:#fff;
  font-size:1.14em;
  font-family:var(--font-display);
  font-weight:600;
  padding:13px 8px 13px 18px;
  border-radius: var(--radius-md);
  margin-bottom:2px;
  transition: background 0.14s, color 0.15s;
}
.mobile-nav a:hover,.mobile-nav a:focus {
  background: var(--color-secondary);
  color: var(--color-primary);
}

/* Backdrop - Overlay for mobile menu */
.mobile-menu-overlay {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(33, 28, 13, 0.28);
  z-index: 119;
  opacity:0;
  pointer-events: none;
  transition: opacity 0.23s;
}
.mobile-menu.active ~ .mobile-menu-overlay {
  opacity:1; pointer-events: auto;
}

/* ===============================
   CARD CONTAINERS & GRID FLEXBOX
===============================*/
.card-container,.card-grid,.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.content-grid {
  gap:20px;
}
.card {
  margin-bottom: 20px;
  position: relative;
  background: #fff8e3;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px 16px 11px 16px;
  transition: box-shadow 0.17s, border .17s, transform 0.12s;
}
.card:hover,.card:focus-within {
  box-shadow: 0 4px 16px #d6b57b66, 0 1.5px 0 0 #f6b73188;
  z-index: 2;
  transform: translateY(-2px) scale(1.018);
}
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* =============== FOOTER ============== */
footer {
  background: var(--color-primary);
  color: #fff;
  padding:32px 0 0 0;
  border-top: 8px solid var(--color-secondary);
  font-size: 1rem;
  margin-top: 60px;
}
footer .container {
  flex-direction: row;
  gap:35px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 30px;
}
footer .content-wrapper {
  flex-direction: row;
  gap: 35px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
}
.footer-brand { flex: 0 1 140px; }
.footer-brand img {
  width:110px; height:auto;
  margin-bottom: 9px;
}
footer nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
footer nav a {
  color: #fff;
  font-family: var(--font-display);
  font-size:1.01em;
  opacity:0.96;
  padding:1px 4px;
  border-radius: var(--radius-sm);
  transition: color 0.13s, background 0.16s;
}
footer nav a:hover, footer nav a:focus {
  color: var(--color-secondary);
  background: #254963;
}
.contact-info {
  min-width:180px;
  max-width:270px;
  font-size:0.98em;
  margin-top: 4px;
  margin-bottom:6px;
}
.contact-info img {
  height: 1em; width:1em; vertical-align:middle; margin-right:5px;
}
.social-media {
  display: flex;
  flex-direction: row;
  gap:13px;
  margin-top: 6px;
}
.social-media a img {
  width:34px; height:34px; border-radius:8px; background:var(--pattern-stripes);
  box-shadow:0 2px 3px #ecb85a4a;
  border:2px solid #f7ead9;
  transition: border 0.13s, box-shadow 0.13s, transform 0.12s;
}
.social-media a:hover img,
.social-media a:focus img {
  border:2px solid var(--color-secondary);
  box-shadow: 0 4px 10px #163b5b44;
  transform: scale(1.08);
}

/* ================================
   COOKIE CONSENT BANNER & MODAL
================================*/
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 199;
  background: var(--color-retro-orange);
  color: #fff;
  padding: 24px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  box-shadow: 0 -2px 30px #BF434277;
  border-top: 6px solid var(--color-secondary);
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 0.32s, transform 0.29s;
}
.cookie-banner.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cookie-banner .cookie-text { font-size: 1em; }
.cookie-banner .cookie-actions {
  display: flex;
  gap: 15px;
}
.cookie-banner button {
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.03em;
  border-radius: var(--radius-sm);
  border:none;
  color: var(--color-primary);
  background: var(--color-secondary);
  padding: 10px 19px;
  box-shadow: var(--shadow-btn);
  cursor:pointer;
  margin-bottom:0;
  transition: background 0.15s, color 0.12s;
}
.cookie-banner button:hover, .cookie-banner button:focus {
  background: var(--color-retro-blue);
  color: #fff;
}
.cookie-banner .cookie-settings-btn {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-secondary);
  margin-left: 8px;
}
.cookie-banner .cookie-settings-btn:hover,.cookie-banner .cookie-settings-btn:focus {
  background: var(--color-retro-olive);
  color: #fff;
}

/* COOKIE SETTINGS MODAL */
.cookie-modal-overlay {
  position: fixed;
  top: 0; left: 0; right:0; bottom:0;
  background: rgba(36,20,12,0.2);
  z-index: 221;
  opacity:0;
  pointer-events: none;
  transition: opacity 0.26s;
}
.cookie-modal-overlay.active { opacity:1; pointer-events: auto; }

.cookie-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%,-48%) scale(0.96);
  min-width: 330px;
  width: 94vw;
  max-width: 420px;
  background: #fff8e3;
  border-radius: var(--radius-lg);
  box-shadow: 0 7px 38px #E76F5199;
  z-index: 230;
  opacity: 0;
  pointer-events: none;
  padding: 34px 22px 24px 22px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition: opacity 0.27s, transform 0.22s;
}
.cookie-modal.active {
  opacity:1; pointer-events: auto;
  transform: translate(-50%,-52%) scale(1);
}
.cookie-modal h2 {
  font-size:1.26em;
  color: var(--color-primary);
  margin-bottom:9px;
  font-weight:700;
}
.cookie-modal .category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:12px;
  margin-bottom: 14px;
}
.cookie-modal .category label {
  font-family: var(--font-body);
  font-size: 1em; color: #775e39;
}
.cookie-modal input[type=checkbox] {
  accent-color: var(--color-secondary);
  width:21px;height:21px;
  border-radius:4px;
  border: 2px solid #cbb062;
}
.cookie-modal .category.essential label {
  color: var(--color-retro-brown);
  font-weight:700;
}

.cookie-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap:12px;
  margin-top:13px;
}
.cookie-modal .cookie-modal-close {
  background: none;
  color: var(--color-retro-orange);
  border:none;
  font-size:1.34em;
  margin-right:auto;
  align-self:flex-start;
  cursor:pointer;
  transition: color 0.12s, transform 0.14s;
}
.cookie-modal .cookie-modal-close:hover,.cookie-modal .cookie-modal-close:focus {
  color: var(--color-primary);
  outline:none;
  transform: scale(1.1);
}
.cookie-modal button {
  font-family: var(--font-display);
  padding:8px 15px;
  font-size:1em;
  border-radius:var(--radius-sm);
  border:none;
  background: var(--color-secondary);
  color: var(--color-primary);
  box-shadow: var(--shadow-btn);
  transition: background 0.16s, color 0.12s;
}
.cookie-modal button:hover, .cookie-modal button:focus {
  background: var(--color-retro-blue);
  color:#fff;
}
@media (max-width: 480px) {
  .cookie-modal { min-width: 0; padding:21px 8px 18px 8px; }
}


/* =======================================
   RESPONSIVE DESIGN
=======================================*/
@media (max-width: 1024px) {
  .container, footer .container {
    max-width: 98vw;
    padding-left:8px; padding-right:8px;
  }
  .feature-grid > div { min-width: 158px; }
}
@media (max-width: 900px) {
  .feature-grid > div,
  .card,
  .testimonial-card {
    min-width:90vw;
    max-width:100%;
    padding-left:11px; padding-right:11px;
  }
}
@media (max-width: 900px) {
  footer .content-wrapper {
    flex-direction: column;
    gap:18px;
  }
  .footer-brand { margin-bottom: 4px; }
}
@media (max-width: 700px) {
  .feature-grid,
  .service-list,
  .card-container,
  .content-grid,
  footer .container {
    flex-direction: column;
    gap:18px;
    padding: 0 4px 0 4px;
  }
}
@media (max-width: 640px) {
  h1,.h1 { font-size: 1.55rem; margin-bottom: 12px; }
  h2,.h2 { font-size: 1.16rem; margin-bottom: 7px; }
  .section { padding: 22px 5px; margin-bottom:28px; }
  .feature-grid > div,
  .card,
  .testimonial-card { min-width: 90vw; max-width: 100vw; }
  .cta-btn, button, input[type=button], input[type=submit] { font-size:0.98em; padding:10px 10px; }
}
@media (max-width: 479px) {
  body, html { font-size: 15px; }
  header .container, footer .container { padding-left: 2px; padding-right: 2px; }
}

/* ============= MISC Retro Patterns, Details & Utilities ============= */
.pattern-border {
  border-style: dashed;
  border-color: var(--color-secondary);
  border-width: 4px 0 0 0;
  border-radius: var(--radius-lg);
  background: var(--pattern-stripes);
}

hr {
  border: none;
  border-top: 4px dashed var(--color-retro-orange);
  margin: 32px 0;
}

::-webkit-scrollbar {
  width: 8px; background: #fffaed; border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: #f6b731aa; border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e76f51cc; }

/* Focus visible for accessibility */
:focus-visible {
  outline: 3px dashed var(--color-secondary);
  outline-offset: 2px;
}

/* =============== SPACING UTILITIES =============== */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top:40px; }
.mb-40 { margin-bottom: 40px; }
.pt-20 { padding-top: 20px; }
.pb-20 { padding-bottom: 20px; }

/* =================== Helper classes ================= */
.hidden { display: none !important; }

/* ====================================
   PRINT RETRO PAPER TEXTURE (optional, modern fallback)
==================================== */
body {
  /* fallback, can add SVG texture as bg-image if assets allow */
  //background-image: url('assets/vintage-paper.svg');
  background-color: var(--color-bg);
}

/* =========================
   CONTACT PAGE STYLES
========================= */
.contact-details {
  background: #fff8e3;
  border-radius: var(--radius-md);
  padding: 17px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size:1.05em;
}

/* =========================
   PAGE-SPECIFIC HIGHLIGHTS
========================= */
/* For retro feel on main sections (e.g. home, offer): */
main section:first-child .section, main > section:first-of-type {
  background: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  padding-top: 50px;
  box-shadow: 0 8px 38px #E76F5155, 0 1.5px 0 #fff2;
}
main section:first-child .section h1,
main section:first-child .section h2,
main section:first-child .section p,
main section:first-child .section a {
  color: var(--color-primary);
}
main section:first-child .section .cta-btn {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px #163b5b44;
}
main section:first-child .section .cta-btn:hover,
main section:first-child .section .cta-btn:focus {
  background: var(--color-retro-orange);
  color: #fff;
}


/* =============================
   ANIMATIONS & MICROINTERACTIONS
============================= */
@media (prefers-reduced-motion: no-preference) {
  .cta-btn,.feature-grid > div,.card,.testimonial-card, .service-list li, .cookie-banner, .cookie-modal {
    transition: box-shadow 0.18s,background 0.18s,border 0.18s,transform 0.12s, color 0.17s, opacity 0.2s;
  }
}

/* Fade in for modals and mobile menu */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
.cookie-modal.active { animation: fadeInUp 0.47s cubic-bezier(.26,1.38,.38,0.97); }
.mobile-menu.active { animation: fadeInUp 0.35s cubic-bezier(.26,1.38,.38,0.97); }

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