/* =============================
   Reset & Base Styles
   ============================= */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html, body { height: 100%; }
body { margin: 0; color: #0F0F10; background-color: #FFFFFF; font-family: Verdana, Geneva, Tahoma, sans-serif; line-height: 1.6; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
ul, ol { margin: 0 0 16px 20px; }
:focus { outline: 2px dashed #C47A3A; outline-offset: 2px; }

/* =============================
   Theme Variables (Monochrome + Brand Accents)
   ============================= */
:root {
  --brand-primary: #1F2A37; /* dark slate (brand) */
  --brand-secondary: #C47A3A; /* subtle bronze accent */
  --brand-accent: #F4EFE9; /* very light warm tint */

  --bg-0: #FFFFFF; /* white */
  --bg-1: #F7F7F7; /* light gray */
  --bg-2: #EFEFEF; /* mid-light gray */
  --ink-0: #0B0B0C; /* near black */
  --ink-1: #1A1A1B; /* dark gray */
  --ink-2: #4B4B4D; /* medium gray */
  --muted: #6B7280; /* muted text */
  --border: #D6D7DA; /* light border */
  --shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}

/* =============================
   Typography
   ============================= */
h1, h2, h3, h4 { font-family: "Trebuchet MS", Verdana, Geneva, Tahoma, sans-serif; color: var(--ink-0); line-height: 1.25; margin: 0 0 12px 0; }
h1 { font-size: 40px; letter-spacing: -0.5px; }
h2 { font-size: 28px; letter-spacing: -0.25px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
p { margin: 0 0 12px 0;  }
.small { font-size: 14px; color: var(--muted); }
.subheadline { font-size: 18px; color: #EDEDED; opacity: 0.95; }

@media (min-width: 992px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* =============================
   Layout Containers (Flex-only)
   ============================= */
.container { width: 100%; display: flex; justify-content: center; padding: 0 16px; }
.content-wrapper { width: 100%; max-width: 1160px; display: flex; flex-direction: column; gap: 20px; }

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--bg-0); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 3px 10px rgba(0,0,0,0.06); }
.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; padding: 20px; background: #FAFAFA; border: 1px solid var(--border); border-left: 4px solid #000000; border-radius: 10px; color: var(--ink-0); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Ensure minimum spacing between blocks inside content */
.text-section { display: flex; flex-direction: column; gap: 14px; }
.text-section > * + * { margin-top: 6px; }
.text-section a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* =============================
   Header & Navigation
   ============================= */
header { position: sticky; top: 0; background: var(--bg-0); border-bottom: 1px solid var(--border); z-index: 1000; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; align-items: center; flex-wrap: wrap; gap: 16px; }
.main-nav a { padding: 8px 10px; border-radius: 6px; color: var(--ink-1); transition: color .2s ease, background-color .2s ease; }
.main-nav a:hover { color: #000000; background: var(--bg-1); }

.header-cta { display: none; align-items: center; gap: 10px; }
.header-cta a { padding: 10px 14px; border-radius: 8px; border: 1px solid #000; background: #000; color: #FFFFFF; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.header-cta a:hover { transform: translateY(-2px); background: #1A1A1A; }
.header-cta a + a { background: #FFFFFF; color: #000; border: 1px solid #000; }
.header-cta a + a:hover { background: #F5F5F5; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-0); transition: background-color .2s ease, transform .2s ease; }
.mobile-menu-toggle:hover { background: var(--bg-1); transform: translateY(-1px); }

/* Mobile Menu (Off-canvas) */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 84%; max-width: 360px; background: var(--bg-0); border-left: 1px solid var(--border); box-shadow: -10px 0 30px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; z-index: 1200; }
.mobile-menu.active, body.menu-open .mobile-menu, .mobile-menu[aria-expanded="true"] { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; margin: 12px; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-1); }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 22px; overflow-y: auto; }
.mobile-nav a { padding: 12px 10px; border-radius: 8px; color: var(--ink-1); border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease; }
.mobile-nav a:hover { background: var(--bg-1); border-color: var(--border); }

/* Desktop nav visibility */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
  .header-cta { display: flex; }
}

/* =============================
   Hero Section (High-contrast monochrome)
   ============================= */
.hero { background: #0E0F12; color: #FFFFFF; padding: 56px 0; }
.hero .content-wrapper { gap: 18px; }
.hero h1 { color: #FFFFFF; }
.hero .subheadline { color: #E9E9E9; }
.hero .text-section a { padding: 12px 16px; border-radius: 10px; border: 1px solid #FFFFFF; color: #0E0F12; background: #FFFFFF; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.hero .text-section a:hover { transform: translateY(-2px); background: #F5F5F5; }
.hero .text-section a + a { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.hero .text-section a + a:hover { background: rgba(255,255,255,0.08); }

/* =============================
   Sections & Content
   ============================= */
main section { padding: 34px 0; border-bottom: 1px solid var(--bg-1); }
main section:last-child { border-bottom: none; }

/* Flexible content blocks */
.text-section ul, .text-section ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.text-section li { display: flex; align-items: center; gap: 10px;  }
.text-section li img { width: 20px; height: 20px; filter: grayscale(100%); opacity: 0.95; }

/* Links general */
a.inline-link { border-bottom: 1px solid #000; }
a.inline-link:hover { opacity: 0.85; }

/* Buttons pattern (applied to CTA anchors globally) */
.text-section a, .footer .text-section a, .header-cta a { text-decoration: none; }
.btn, .button, .cta { padding: 12px 16px; border-radius: 10px; border: 1px solid #000; background: #000; color: #FFF; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover, .button:hover, .cta:hover { transform: translateY(-2px); background: #1A1A1A; }
.btn.outline { background: #FFFFFF; color: #000; }
.btn.ghost { background: transparent; color: #000; }

/* Feature lists and columns (flex only) */
.features, .columns { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.features > *, .columns > * { flex: 1 1 260px; min-width: 240px; }

/* Testimonial emphasis (light background for readability) */
.text-section .testimonial-card + .testimonial-card { margin-top: 20px; }
.testimonial-card h3 { margin-bottom: 4px; color: var(--ink-0); }
.testimonial-card p { margin: 0; }

/* =============================
   Cards Generic
   ============================= */
.card .card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.card .card-title { font-size: 18px; font-weight: 700; color: var(--ink-0); }
.card .card-meta { font-size: 14px; color: var(--muted); }

/* =============================
   Footer (dark, monochrome)
   ============================= */
footer { background: #0C0C0D; color: #F2F2F2; }
footer section { border: none; padding: 34px 0; }
footer .content-wrapper { gap: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: #EAEAEA; padding: 8px 10px; border-radius: 6px; transition: background-color .2s ease, color .2s ease; }
.footer-nav a:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }

/* =============================
   Responsive Rules
   ============================= */
/* Text-image sections stack on mobile */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}

/* Content alignment for larger screens */
@media (min-width: 768px) {
  .content-grid > * { flex: 1 1 calc(50% - 20px); }
  .text-image-section > * { flex: 1 1 320px; }
}

/* =============================
   Forms (generic styling for potential inputs)
   ============================= */
input, select, textarea { width: 100%; padding: 12px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-0); color: var(--ink-1); transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-secondary); box-shadow: 0 0 0 3px rgba(196,122,58,0.22); outline: none; }
label { display: flex; margin-bottom: 8px; color: var(--ink-0); font-weight: 600; }

/* =============================
   Cookie Consent Banner & Modal
   ============================= */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; color: #0B0B0C; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.18); padding: 16px; transform: translateY(120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; z-index: 1400; }
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner .cookie-title { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 18px; color: var(--ink-0); }
.cookie-banner .cookie-text { font-size: 14px; color: var(--ink-1); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-buttons .btn-accept { padding: 10px 14px; border-radius: 10px; background: #000; color: #FFF; border: 1px solid #000; }
.cookie-buttons .btn-accept:hover { background: #1A1A1A; }
.cookie-buttons .btn-reject { padding: 10px 14px; border-radius: 10px; background: #FFFFFF; color: #000; border: 1px solid #000; }
.cookie-buttons .btn-reject:hover { background: #F5F5F5; }
.cookie-buttons .btn-settings { padding: 10px 14px; border-radius: 10px; background: var(--bg-1); color: #000; border: 1px solid var(--border); }
.cookie-buttons .btn-settings:hover { background: var(--bg-2); }

/* Cookie Preferences Modal */
.cookie-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1490; }
.cookie-backdrop.show { opacity: 1; pointer-events: auto; }
.cookie-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); width: 92%; max-width: 720px; background: #FFFFFF; color: #0B0B0C; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); padding: 18px; display: flex; flex-direction: column; gap: 14px; opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; z-index: 1500; }
.cookie-modal.show { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-1); }
.cookie-category .label { font-weight: 600; color: var(--ink-0); }

/* Toggle switch */
.switch { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #D1D5DB; display: inline-flex; align-items: center; padding: 2px; transition: background .2s ease; }
.switch .dot { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transform: translateX(0); transition: transform .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.switch.on { background: #000; }
.switch.on .dot { transform: translateX(20px); }

.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-modal .modal-actions .btn-accept { padding: 10px 14px; border-radius: 10px; background: #000; color: #FFF; border: 1px solid #000; }
.cookie-modal .modal-actions .btn-accept:hover { background: #1A1A1A; }
.cookie-modal .modal-actions .btn-reject, .cookie-modal .modal-actions .btn-save { padding: 10px 14px; border-radius: 10px; border: 1px solid #000; background: #FFFFFF; color: #000; }
.cookie-modal .modal-actions .btn-reject:hover, .cookie-modal .modal-actions .btn-save:hover { background: #F5F5F5; }

/* =============================
   Utilities
   ============================= */
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; border: 1px solid #000; background: #FFF; color: #000; font-size: 12px; }
.muted { color: var(--muted); }
.divider { height: 1px; width: 100%; background: var(--bg-2); }

/* Ensure minimum spacing between all primary sections */
main > section + section { margin-top: 8px; }

/* =============================
   Page-specific accents (Monochrome hierarchy)
   ============================= */
/* Headings underline accent for dramatic hierarchy */
main h2 { position: relative; padding-bottom: 6px; }
main h2::after { content: ""; display: block; height: 2px; width: 50px; background: #000; margin-top: 8px; }

/* Lists inside content blocks: compact, precise */
.text-section ul li::marker, .text-section ol li::marker { color: #000; }

/* =============================
   Accessibility & States
   ============================= */
:focus-visible { outline: 2px dashed #C47A3A; outline-offset: 2px; }
[hidden] { display: none !important; }

/* =============================
   Print styles (basic)
   ============================= */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal, .cookie-backdrop { display: none !important; }
  main section { border: none; padding: 12px 0; }
}

/* =============================
   Additional spacing safety
   ============================= */
/* Prevent overlap and ensure breathing room */
.testimonial-card, .card, .feature-item, .text-section > div, .text-section > p, .text-section > ul, .text-section > ol { margin-bottom: 20px; }

/* =============================
   Brand nods (subtle, monochrome-first)
   ============================= */
/* Use brand secondary as subtle focus ring and tiny rules without breaking monochrome */
a:hover { color: #000; }
hr { border: none; border-top: 1px solid var(--border); }

/* =============================
   Ensured Flexbox everywhere relevant (no grid/columns)
   ============================= */
/* Footer contact block alignment */
footer .content-wrapper { display: flex; flex-direction: column; }

/* Header internal alignment already flex; ensure nav wraps nicely */
.main-nav, .footer-nav { display: flex; }

/* =====================================
   End of stylesheet
   ===================================== */