/* CSS Reset & Normalize (Mobile-first) */
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;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
 display: block;
}
body {
 line-height: 1.5;
 background: #fff;
 color: #15151B;
}
*,*:before,*:after {
 box-sizing: inherit;
}
input,button,select,textarea {
 font-family: inherit;
}
img {
 max-width: 100%;
 display: block;
 height: auto;
}
a {
 color: inherit;
 text-decoration: none;
 transition: color 0.2s;
}
ul,ol {
 list-style: none;
}

/* Typography */
:root {
 --color-bg: #fff;
 --color-bg-soft: #F6F7FA;
 --color-section: #E7ECEF;
 --color-primary: #181A1C;
 --color-secondary: #6C6E74;
 --color-accent: #FA8901;
 --color-brand-primary: #253059;
 --color-gray-light: #E7ECEF;
 --color-gray-medium: #A6A8AB;
 --color-gray-dark: #181A1C;
 --color-white: #fff;
 --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
 --font-body: 'Roboto', Arial, Helvetica, sans-serif;
 --shadow-card: 0 3px 16px rgba(24, 26, 28, 0.08);
 --shadow-elevate: 0 6px 32px 0 rgba(24, 26, 28, 0.10);
 --radius: 10px;
}
body {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 16px;
 color: var(--color-primary);
 background: var(--color-bg);
}
h1, .hero h1 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 2.2rem;
 letter-spacing: -0.01em;
 color: var(--color-brand-primary);
 line-height: 1.14;
 margin-bottom: 20px;
}
h2 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 1.45rem;
 color: var(--color-brand-primary);
 margin-bottom: 20px;
 line-height: 1.2;
}
h3 {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 1.12rem;
 color: var(--color-brand-primary);
 margin-bottom: 16px;
}
h4,h5,h6 {
 font-family: var(--font-display);
 color: var(--color-primary);
}
p,li,ul,ol {
 font-size: 1rem;
 color: var(--color-primary);
 margin-bottom: 0.8em;
}
ul,ol {
 margin-bottom: 1.2em;
 padding-left: 18px;
}
em {
 color: var(--color-secondary);
}
strong {
 color: var(--color-primary);
 font-weight: 600;
}
.text-section p {
 margin-bottom: 1em;
}

/* Global Container & Section Styles */
.container {
 max-width: 1140px;
 width: 100%;
 margin: 0 auto;
 padding-left: 16px;
 padding-right: 16px;
}
.section {
 margin-bottom: 60px;
 padding: 40px 20px;
 background: var(--color-bg-soft);
 border-radius: var(--radius);
 box-shadow: var(--shadow-card);
}
.content-wrapper {
 display: flex;
 flex-direction: column;
 gap: 20px;
}
.text-section {
 margin-bottom: 20px;
}

/* Flexbox Layout Patterns */
.card-container {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.card {
 background: var(--color-white);
 border-radius: var(--radius);
 box-shadow: var(--shadow-card);
 margin-bottom: 20px;
 padding: 28px 22px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 position: relative;
 transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover, .card:focus-within {
 box-shadow: var(--shadow-elevate);
 transform: translateY(-3px);
}
.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;
}
@media (max-width: 768px) {
 .text-image-section {
   flex-direction: column;
   align-items: flex-start;
   gap: 20px;
 }
}
.testimonials-row {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 margin-top: 20px;
}
.testimonial-card {
 background: var(--color-white);
 color: var(--color-primary);
 border-radius: var(--radius);
 box-shadow: var(--shadow-card);
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 20px;
 padding: 20px;
 min-width: 240px;
 min-height: 170px;
 flex: 1 1 240px;
 margin-bottom: 20px;
 transition: box-shadow 0.2s, transform 0.2s;
}
.testimonial-card:hover {
 box-shadow: var(--shadow-elevate);
 transform: translateY(-3px);
}
.feature-item {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 15px;
 padding: 24px 0;
}
.icons-row {
 display: flex;
 flex-wrap: wrap;
 gap: 32px;
 margin: 30px 0 20px 0;
}
.icons-row > div {
 display: flex;
 flex-direction: column;
 align-items: center;
 min-width: 90px;
 max-width: 150px;
 flex: 1 1 90px;
 gap: 10px;
}

/* HERO Section */
.hero {
 background: var(--color-brand-primary);
 color: var(--color-white);
 padding: 60px 0 50px 0;
 border-radius: 0 0 var(--radius) var(--radius);
}
.hero .content-wrapper {
 gap: 24px;
}
.hero h1, .hero p {
 color: var(--color-white);
}
.hero .cta-button {
 background: var(--color-accent);
 color: #181A1C;
 border: none;
}

/* Buttons */
.cta-button {
 display: inline-block;
 padding: 14px 30px;
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 1rem;
 border-radius: 99px;
 border: none;
 background: var(--color-brand-primary);
 color: var(--color-white);
 box-shadow: 0 2px 8px rgba(37,48,89,0.18);
 letter-spacing: 0.03em;
 transition: background 0.18s, box-shadow 0.18s, color 0.16s, transform 0.18s;
 cursor: pointer;
 margin-top: 8px;
 margin-bottom: 8px;
 text-align: center;
}
.cta-button:focus {
 outline: 2px solid var(--color-accent);
 box-shadow: 0 0 0 3px var(--color-accent);
}
.cta-button:hover, .cta-button:active {
 background: var(--color-accent);
 color: var(--color-brand-primary);
 transform: translateY(-2px) scale(1.03);
 box-shadow: 0 6px 18px 0 rgba(250,137,1,0.2);
}

/* Header & Navigation */
header {
 background: #fff;
 box-shadow: 0 4px 18px rgba(24,26,28,0.05);
 z-index: 1001;
}
header .container {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 24px;
 justify-content: space-between;
 padding-top: 16px;
 padding-bottom: 16px;
}
header nav {
 display: flex;
 flex-wrap: wrap;
 gap: 22px;
 align-items: center;
}
header nav a {
 font-family: var(--font-display);
 font-size: 1rem;
 color: var(--color-brand-primary);
 opacity: 0.85;
 padding: 2px 6px;
 border-radius: 6px;
 transition: background 0.15s, color 0.15s, opacity 0.15s;
}
header nav a:hover,header nav a:focus {
 background: var(--color-section);
 color: var(--color-accent);
 opacity: 1;
}
header .cta-button {
 margin-left: 8px;
 margin-right: 8px;
}
header img {
 max-height: 42px;
 height: auto;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 1.7rem;
 background: none;
 border: none;
 color: var(--color-brand-primary);
 padding: 8px 14px;
 margin-left: 12px;
 border-radius: 13px;
 cursor: pointer;
 z-index: 2001;
 transition: background 0.16s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
 background: var(--color-section);
 color: var(--color-accent);
}
.mobile-menu {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(18,19,23,0.94);
 z-index: 3000;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-end;
 transform: translateX(100%);
 transition: transform 0.38s cubic-bezier(0.77,0,0.175,1);
 pointer-events: none;
 opacity: 0;
}
.mobile-menu.open {
 transform: translateX(0);
 pointer-events: auto;
 opacity: 1;
}
.mobile-menu-close {
 margin-top: 24px;
 margin-right: 28px;
 font-size: 2.2rem;
 background: none;
 color: var(--color-white);
 border: none;
 cursor: pointer;
 border-radius: 12px;
 transition: background 0.15s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
 background: rgba(255,255,255,0.12);
}
.mobile-nav {
 margin-top: 50px;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 24px;
 padding-right: 40px;
}
.mobile-nav a {
 font-family: var(--font-display);
 font-size: 1.38rem;
 color: var(--color-white);
 letter-spacing: 0.012em;
 padding: 13px 0;
 min-width: 180px;
 text-align: right;
 opacity: 0.94;
 border-radius: 8px 0 0 8px;
 transition: color 0.17s, background 0.14s, opacity 0.17s, transform 0.11s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
 color: var(--color-accent);
 background: rgba(250,137,1,0.10);
 opacity: 1;
 transform: translateX(-4px);
}
@media (max-width: 1024px) {
 header nav,.cta-button {
   display: none;
 }
 .mobile-menu-toggle {
   display: inline-flex;
 }
}
@media (min-width: 1025px) {
 .mobile-menu, .mobile-menu-toggle {
   display: none !important;
 }
}

/* Footer */
footer {
 background: var(--color-section);
 color: var(--color-primary);
 padding: 36px 0 14px 0;
 margin-top: 50px;
 font-size: 0.97rem;
 box-shadow: 0 -1px 8px rgba(37,48,89,0.06);
}
.footer-top {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 18px;
 justify-content: space-between;
 margin-bottom: 20px;
}
.footer-top nav {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 12px;
 font-size: 0.98rem;
}
.footer-top nav a {
 color: var(--color-brand-primary);
 opacity: 0.7;
 transition: color 0.16s, opacity 0.16s;
}
.footer-top nav a:hover {
 color: var(--color-accent);
 opacity: 1;
 text-decoration: underline;
}
footer img {
 max-height: 30px;
}
footer .text-section {
 margin-top: 10px;
}
footer address {
 font-style: normal;
 color: var(--color-secondary);
 margin-top: 2px;
 font-size: 0.96em;
 line-height: 1.7;
}

/* Table Styles (for Comparison Table) */
.comparison-table {
 margin: 32px 0;
 overflow-x: auto;
 width: 100%;
 background: var(--color-white);
 box-shadow: var(--shadow-card);
 border-radius: var(--radius);
}
.comparison-table table {
 width: 100%;
 border-collapse: collapse;
 min-width: 440px;
 font-size: 1rem;
}
.comparison-table th,
.comparison-table td {
 padding: 14px 10px;
 border-bottom: 1px solid var(--color-gray-light);
 text-align: left;
}
.comparison-table th {
 background: var(--color-section);
 color: var(--color-brand-primary);
 font-weight: 600;
}
.comparison-table tr:last-child td {
 border-bottom: none;
}

/* Districts section */
.districts-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.district-card {
 background: var(--color-white);
 border-radius: var(--radius);
 box-shadow: var(--shadow-card);
 flex: 1 1 210px;
 min-width: 185px;
 padding: 24px 16px;
 margin-bottom: 20px;
 transition: box-shadow 0.19s, transform 0.15s;
}
.district-card:hover {
 box-shadow: var(--shadow-elevate);
 transform: translateY(-3px);
}

/* FAQ styles */
.faq {
 display: flex;
 flex-direction: column;
 gap: 32px;
}
.faq h3 {
 font-size: 1.07rem;
 font-weight: 600;
 margin-bottom: 6px;
 color: var(--color-brand-primary);
}
.faq p {
 font-size: 1rem;
 color: var(--color-primary);
}

/* Services List */
.services-list {
 display: flex;
 flex-direction: column;
 gap: 32px;
 margin: 18px 0 38px 0;
}
.services-list li {
 background: var(--color-white);
 border-radius: var(--radius);
 box-shadow: var(--shadow-card);
 padding: 28px 22px;
 min-width: 280px;
 display: flex;
 flex-direction: column;
 gap: 13px;
 transition: box-shadow 0.16s, transform 0.15s;
}
.services-list li:hover {
 box-shadow: var(--shadow-elevate);
 transform: translateY(-2px);
}
.service-price {
 color: var(--color-accent);
 font-weight: 600;
}

/* Map Placeholder */
.map-placeholder {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 120px;
 margin: 18px 0 6px 0;
 background: #f5f7fb;
 border-radius: var(--radius);
}

/* Team Row */
.team-row {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.team-bio {
 background: var(--color-white);
 border-radius: var(--radius);
 box-shadow: var(--shadow-card);
 padding: 24px 18px 18px 18px;
 min-width: 185px;
 flex: 1 1 185px;
 margin-bottom: 20px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 transition: box-shadow 0.16s, transform 0.15s;
}
.team-bio h3 {
 font-family: var(--font-display);
 font-size: 1.16rem;
 margin-bottom: 6px;
}
.team-bio:hover {
 box-shadow: var(--shadow-elevate);
 transform: translateY(-2px);
}

/* Address Link Styles */
address a,
.text-section a {
 color: var(--color-accent);
 text-decoration: underline;
 word-break: break-word;
}
address a:hover,
.text-section a:hover {
 color: var(--color-brand-primary);
}


/* Cookie Banner Styles */
.cookie-banner {
 position: fixed;
 left: 0; right: 0; bottom: 0;
 width: 100vw;
 z-index: 4000;
 background: var(--color-brand-primary);
 color: var(--color-white);
 padding: 24px 18px 20px 18px;
 display: flex;
 flex-direction: column;
 align-items: center;
 box-shadow: 0 -2px 14px rgba(24,26,28,0.11);
 gap: 14px;
 animation: cookieBannerSlideIn 0.47s cubic-bezier(0.77,0,0.175,1);
}
@keyframes cookieBannerSlideIn {
 from { transform: translateY(100%); opacity:0; } to { transform: translateY(0); opacity:1; }
}
.cookie-banner p {
 color: var(--color-white);
 margin-bottom: 8px;
 font-family: var(--font-body);
 font-size: 0.98rem;
}
.cookie-banner .cookie-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
}
.cookie-banner button {
 border: none;
 padding: 11px 24px;
 border-radius: 22px;
 font-family: var(--font-display);
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 background: var(--color-section);
 color: var(--color-brand-primary);
 transition: background 0.16s, color 0.16s, box-shadow 0.19s, transform 0.17s;
}
.cookie-banner .cookie-accept {
 background: var(--color-accent);
 color: var(--color-brand-primary);
}
.cookie-banner .cookie-accept:hover,
.cookie-banner .cookie-accept:focus {
 background: var(--color-white);
 color: var(--color-accent);
 box-shadow: 0 6px 24px 0 rgba(250,137,1,0.14);
 transform: translateY(-2px);
}
.cookie-banner .cookie-reject {
 background: var(--color-section);
 color: var(--color-brand-primary);
}
.cookie-banner .cookie-reject:hover,
.cookie-banner .cookie-reject:focus {
 background: var(--color-gray-medium);
 color: var(--color-white);
}
.cookie-banner .cookie-settings {
 background: transparent;
 color: var(--color-white);
 border: 1.5px solid var(--color-white);
}
.cookie-banner .cookie-settings:hover,
.cookie-banner .cookie-settings:focus {
 background: var(--color-white);
 color: var(--color-brand-primary);
}

/* Cookie Settings Modal */
.cookie-modal-overlay {
 position: fixed;
 z-index: 4100;
 left: 0; top: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(37,48,89,0.55);
 display: flex;
 align-items: center;
 justify-content: center;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.26s;
}
.cookie-modal-overlay.open {
 pointer-events: auto;
 opacity: 1;
}
.cookie-modal {
 background: var(--color-white);
 color: var(--color-primary);
 padding: 38px 30px 30px 30px;
 box-shadow: 0 8px 40px rgba(24,26,28,0.19);
 border-radius: var(--radius);
 min-width: 330px;
 max-width: 96vw;
 display: flex;
 flex-direction: column;
 gap: 22px;
 position: relative;
 animation: cookieModalIn 0.27s cubic-bezier(0.77,0,0.175,1);
}
@keyframes cookieModalIn {
 from {transform: translateY(26px) scale(0.97); opacity:0;} to{transform: none; opacity:1;}
}
.cookie-modal h3 {
 font-size: 1.14rem;
 color: var(--color-brand-primary);
 margin-bottom: 13px;
}
.cookie-categories {
 display: flex;
 flex-direction: column;
 gap: 16px;
}
.cookie-category {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 4px;
}
.cookie-category .toggle {
 width: 36px; height: 22px;
 background: var(--color-section);
 border-radius: 12px;
 position: relative;
 outline: none;
 border: none;
 cursor: pointer;
 transition: background 0.12s;
}
.cookie-category .toggle[aria-checked="true"] {
 background: var(--color-accent);
}
.cookie-category .toggle:before {
 content: '';
 display: block;
 position: absolute;
 top: 3px; left: 3px;
 width: 16px; height: 16px;
 border-radius: 50%;
 background: var(--color-white);
 box-shadow: 0 2px 6px rgba(24,26,28,0.11);
 transition: left 0.13s, background 0.11s;
}
.cookie-category .toggle[aria-checked="true"]:before {
 left: 17px;
 background: var(--color-brand-primary);
}
.cookie-modal .close-modal {
 position: absolute;
 top: 18px; right: 18px;
 font-size: 1.6rem;
 color: var(--color-gray-dark);
 background: none;
 border: none;
 cursor: pointer;
}
.cookie-modal .close-modal:hover,
.cookie-modal .close-modal:focus {
 color: var(--color-accent);
}
.cookie-modal .actions {
 display: flex;
 gap: 18px;
 align-items: center;
 margin-top: 10px;
}
.cookie-modal .actions button {
 padding: 11px 23px;
 border-radius: 22px;
 border: none;
 background: var(--color-brand-primary);
 color: var(--color-white);
 font-family: var(--font-display);
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.15s, color 0.15s;
}
.cookie-modal .actions button:hover, .cookie-modal .actions button:focus {
 background: var(--color-accent);
 color: var(--color-brand-primary);
}

/* Utility: Visually hidden (for accessibility) */
.visually-hidden {
 border: 0!important;
 clip: rect(1px,1px,1px,1px)!important;
 clip-path: inset(50%)!important;
 height: 1px!important;
 overflow: hidden!important;
 padding: 0!important;
 position: absolute!important;
 white-space: nowrap!important;
 width: 1px!important;
}

/* Responsive Styles Mobile First */
@media (max-width: 768px) {
 
 .container {
   padding-left: 10px;
   padding-right: 10px;
 }
 .footer-top {
   flex-direction: column;
   gap: 8px;
   align-items: flex-start;
   margin-bottom: 8px;
 }
 .card-container, .testimonials-row, .districts-grid, .team-row, .icons-row, .content-grid {
   flex-direction: column;
   gap: 20px;
 }
 .card, .district-card, .team-bio {
   min-width: 0;
   width: 100%;
 }
 .section {
   padding: 24px 4px;
 }
 .services-list li {
   padding: 18px 8px;
 }
 .comparison-table table {
   font-size: 0.97em;
 }
 header .container {
   flex-direction: row;
   gap: 13px;
 }
}
@media (max-width: 480px) {
 h1,.hero h1 {
   font-size: 1.37rem;
 }
 h2 {
   font-size: 1.05rem;
 }
 h3 {
   font-size: 0.97rem;
 }
 footer .container, .section, .card, .district-card, .team-bio {
   padding-left: 6px;
   padding-right: 6px;
 }
 .cookie-modal {
   min-width: 90vw;
   padding: 17px 8px 16px 8px;
 }
 .cookie-banner {
   padding: 14px 7px 10px 7px;
 }
}

/* Smooth micro-interactions for icons, buttons, and cards */
.card img, .district-card img, .icons-row img {
 transition: transform 0.19s;
}
.card:hover img, .district-card:hover img, .icons-row > div:hover img {
 transform: scale(1.06) rotate(-2deg);
}

/* Miscellaneous for a high-contrast, sophisticated monochrome effect */
.section {
 background: var(--color-section);
 color: var(--color-primary);
}
.card, .district-card, .team-bio, .services-list li {
 background: var(--color-white);
 border: 1.5px solid var(--color-gray-light);
}
.hero {
 background: linear-gradient(96deg, var(--color-brand-primary) 85%, #181A1C 100%);
}
.hero h1, .hero p {
 text-shadow: 0 2px 16px rgba(24,26,28,0.13);
}

/* Ensure no content overlap and universal minimum spacing */
.section, .card-container > *,.testimonials-row > *, .districts-grid > *, .services-list > *, .content-grid > *, .team-row > * {
 margin-bottom: 20px;
}

/* Hide scrollbar for mobile menu */
.mobile-menu::-webkit-scrollbar { display: none; }
.mobile-menu { -ms-overflow-style: none; scrollbar-width: none; }