/* RayTra Spark - style.css - Geometric Structured Design (Flexbox-only) */
/* RESET & NORMALIZE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Trebuchet MS", sans-serif; color: #102338; background: #FFFFFF; line-height: 1.6; }
img, picture { max-width: 100%; display: block; height: auto; }
a { color: #183A5B; text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 20px; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid #1FA971; outline-offset: 2px; }

/* CSS CUSTOM PROPERTIES (with fallbacks used below) */
:root {
  --primary: #183A5B; /* deep technical blue */
  --secondary: #1FA971; /* kinetic green */
  --accent: #F4F7FB; /* light panels */
  --ink: #102338; /* base text */
  --muted: #6A7A8C; /* muted text */
  --border: #D5DFEA; /* hairline */
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-1: 0 1px 2px rgba(16,35,56,0.06), 0 4px 10px rgba(16,35,56,0.06);
  --shadow-2: 0 6px 16px rgba(16,35,56,0.10);
  --container: 1160px;
}

/* TYPOGRAPHY SCALE (angular, structured) */
h1, h2, h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: var(--primary); line-height: 1.2; text-rendering: optimizeLegibility; }
h1 { font-size: 32px; letter-spacing: 0.2px; margin: 0 0 16px; text-transform: none; }
h2 { font-size: 24px; letter-spacing: 0.8px; text-transform: uppercase; margin: 0 0 20px; }
h3 { font-size: 18px; letter-spacing: 0.4px; text-transform: uppercase; margin: 0 0 12px; }
p { margin: 0 0 16px; font-size: 16px; color: var(--ink); }
small, .small { font-size: 14px; color: var(--muted); }
strong { color: var(--primary); font-weight: 700; }

/* LAYOUT BASICS */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; }

/* Sections spacing - apply to semantic section and mandatory .section class */
section, .section { margin-bottom: 60px; padding: 40px 20px; background: #FFFFFF; }
section:nth-of-type(odd) { background: var(--accent); }

/* MANDATORY SPACING/ALIGNMENT PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 20px; box-shadow: var(--shadow-1); }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Decorative geometric accent for .card (allowed absolute for decoration) */
.card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 36px; height: 6px; background: var(--secondary); border-top-left-radius: var(--radius-m); }

/* BUTTONS */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-s); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease; border: 2px solid transparent; }
.btn-primary { background: var(--secondary); color: #0E2A1F; border-color: var(--secondary); box-shadow: var(--shadow-1); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary); color: #FFFFFF; }

/* HEADER & NAVIGATION */
header { position: sticky; top: 0; z-index: 50; background: #FFFFFF; border-bottom: 1px solid var(--border); }
header nav { max-width: var(--container); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
header nav a { color: var(--primary); font-weight: 600; padding: 8px 10px; border-radius: var(--radius-s); }
header nav a:hover { background: var(--accent); text-decoration: none; }
header nav a img { height: 28px; width: auto; display: block; }

/* Mobile menu toggle */
.mobile-menu-toggle { margin: 8px 20px 12px; width: 44px; height: 44px; border-radius: 6px; border: 2px solid var(--primary); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; background: #fff; box-shadow: var(--shadow-1); transition: background-color 160ms ease, transform 160ms ease; }
.mobile-menu-toggle:hover { background: var(--accent); transform: translateY(-1px); }

/* Mobile menu (overlay) */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: 100%; height: 100vh; background: #FFFFFF; transform: translateX(100%); transition: transform 260ms ease; z-index: 100; display: flex; flex-direction: column; padding: 20px; box-shadow: -6px 0 16px rgba(16,35,56,0.15); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; border-radius: 6px; border: 2px solid var(--primary); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; background: #fff; margin-bottom: 10px; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.mobile-nav a { display: flex; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-m); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.mobile-nav a:hover { background: var(--accent); }

/* Hide desktop nav links on mobile, show burger */
@media (max-width: 768px) {
  header nav a:not(:first-child) { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}
@media (min-width: 769px) {
  .mobile-menu-toggle { display: none; }
}

/* HERO specifics */
.logo-strip { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.logo-strip img { width: 72px; height: auto; filter: saturate(0.9); }

/* FLEX LAYOUT COLLECTIONS (cards, features, lists) */
.feature-grid, .service-cards, .case-teasers, .industry-cards, .use-case-grid, .plan-cards, .faq-list, .contact-cards, .leadership-profiles, .module-grid, .case-list, .compliance-badges, .partner-logos, .analytics-dashboards, .kpi-stats, .kpi-highlights, .capability-matrix, .purposes-grid, .department-cards {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch;
}
/* Children behave like responsive cards */
.feature-grid > div, .service-cards > div, .case-teasers > div, .industry-cards > div, .use-case-grid > div, .plan-cards > div, .faq-list > div, .contact-cards > div, .leadership-profiles > div, .module-grid > div, .case-list > div, .department-cards > div {
  flex: 1 1 260px; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 20px; box-shadow: var(--shadow-1); position: relative; min-width: 240px;
}
/* Geometric accent bar */
.feature-grid > div::before, .service-cards > div::before, .case-teasers > div::before, .industry-cards > div::before, .use-case-grid > div::before, .plan-cards > div::before, .faq-list > div::before, .contact-cards > div::before, .leadership-profiles > div::before, .module-grid > div::before, .case-list > div::before, .department-cards > div::before {
  content: ""; position: absolute; left: 0; top: 0; height: 6px; width: 42px; background: var(--secondary); border-top-left-radius: var(--radius-m);
}

/* Icon in feature/service cards */
.feature-grid img, .service-cards img, .contact-cards img { width: 28px; height: 28px; }
.feature-grid h3, .service-cards h3, .industry-cards h3, .use-case-grid h3, .plan-cards h3, .faq-list h3, .module-grid h3, .case-list h3, .department-cards h3 { margin-top: 6px; }

/* KPI blocks */
.kpi-stats { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.kpi-stats > * { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px 16px; box-shadow: var(--shadow-1); font-weight: 700; letter-spacing: 0.6px; }
.kpi-stats strong { font-size: 24px; color: var(--secondary); margin-right: 6px; }

/* Text-image / badge rows */
.compliance-badges { align-items: center; }
.compliance-badges img { width: 28px; height: 28px; }
.analytics-dashboards, .capability-matrix { align-items: flex-start; }

/* TESTIMONIALS - high contrast (dark text on light bg) */
.testimonial-card { background: var(--accent); border: 1px solid var(--border); border-left: 6px solid var(--secondary); border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.testimonial-card p { margin: 0; color: var(--ink); font-style: italic; }
.testimonial-card strong { color: var(--primary); }

/* FOOTER */
footer { background: #0F2438; color: #EAF0F6; padding: 30px 0; margin-top: 40px; }
footer a { color: #EAF0F6; }
footer .container { display: flex; flex-direction: column; gap: 20px; }
.footer-nav, .footer-contact, .legal-links, .newsletter-signup { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-nav a { padding: 6px 10px; border-radius: var(--radius-s); border: 1px solid rgba(255,255,255,0.08); }
.footer-nav a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.footer-contact span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-s); background: rgba(255,255,255,0.04); }
.footer-contact img { filter: brightness(2); width: 18px; height: 18px; }
.legal-links { opacity: 0.9; }
.newsletter-signup { flex-direction: column; align-items: flex-start; margin-top: 10px; }
.newsletter-signup h3 { color: #FFFFFF; }

/* LINKS micro-interactions */
a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
a:active { opacity: 0.9; }

/* LISTS - geometric bullets */
ul { list-style: square; }
ol { list-style: decimal-leading-zero; }

/* ADDRESS blocks */
address { font-style: normal; color: var(--ink); }

/* UTILITIES */
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { display: flex; justify-content: center; align-items: center; }

/* RESPONSIVE RULES */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
  .content-wrapper { gap: 14px; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
}
@media (min-width: 769px) {
  .content-wrapper { gap: 20px; }
  h1 { font-size: 40px; }
  h2 { font-size: 26px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
}

/* HOVER STATES FOR CARDS */
.feature-grid > div:hover, .service-cards > div:hover, .plan-cards > div:hover, .industry-cards > div:hover, .case-teasers > div:hover, .use-case-grid > div:hover, .faq-list > div:hover, .leadership-profiles > div:hover, .module-grid > div:hover, .case-list > div:hover, .department-cards > div:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* PAGE-SPECIFIC MINOR STYLES */
.supporting-kpi, .sla-info, .methodology-note, .retention-policy, .response-time-note, .retention-times, .opt-out-instructions, .privacy-note, .consent-info, .culture-points, .kpi-by-industry, .kpi-highlights {
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px 18px; box-shadow: var(--shadow-1); }

/* BROWSE RESOURCES LINKS (thank-you) */
.browse-resources-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* HEADER CTA inside nav spacing fix */
header nav .btn-primary { padding: 8px 14px; min-height: 36px; }

/* MOBILE-FIRST ACCESSIBILITY SPACING */
.contact-cards > div, .department-cards > div { min-height: 88px; display: flex; flex-direction: column; justify-content: center; }
.contact-cards > div a, .contact-cards > div span, .contact-cards > div address { font-weight: 700; color: var(--primary); }
.contact-cards > div img { width: 22px; height: 22px; margin-bottom: 6px; }

/* COOKIE CONSENT BANNER & MODAL */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 2px solid var(--primary); box-shadow: 0 -6px 20px rgba(16,35,56,0.12); z-index: 120; transform: translateY(110%); transition: transform 260ms ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .inner { max-width: var(--container); margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cookie-banner p { margin: 0; color: var(--ink); }
.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-s); border: 2px solid var(--primary); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.cookie-btn.primary { background: var(--secondary); border-color: var(--secondary); color: #0E2A1F; }
.cookie-btn.secondary { background: #FFFFFF; color: var(--primary); }
.cookie-btn.ghost { background: #FFFFFF; color: var(--primary); border-style: dashed; }
.cookie-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* Cookie Preferences Modal */
.cookie-overlay { position: fixed; inset: 0; background: rgba(16,35,56,0.5); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 140; }
.cookie-overlay.open { opacity: 1; pointer-events: auto; }
.cookie-modal { position: fixed; right: 0; top: 0; height: 100vh; width: min(520px, 100%); background: #FFFFFF; transform: translateX(100%); transition: transform 260ms ease; z-index: 150; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(16,35,56,0.2); }
.cookie-modal.open { transform: translateX(0); }
.cookie-modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cookie-modal .content { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; overflow-y: auto; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px 12px; }
.cookie-category .desc { display: flex; flex-direction: column; gap: 4px; }
.cookie-actions { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
/* Toggle switch */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 20px; background: var(--border); transition: background-color 160ms ease; display: inline-flex; align-items: center; padding: 3px; }
.toggle::after { content: ""; width: 20px; height: 20px; background: #fff; border: 1px solid var(--primary); border-radius: 50%; transition: transform 160ms ease; }
.toggle.on { background: rgba(31,169,113,0.35); }
.toggle.on::after { transform: translateX(20px); }

/* ACCESSIBILITY HELPERS */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* GEOMETRIC DIVIDERS */
.hr-geom { height: 2px; background: var(--primary); width: 80px; }

/* PREVENT OVERLAPS: ensure consistent spacing between stacked elements */
section .container > * + * { margin-top: 12px; }

/* Ensure all layouts are Flexbox-only: no grid used anywhere */
/* Additional alignment rules */
.content-grid { justify-content: space-between; align-items: flex-start; }
.text-image-section { align-items: center; }

/* Desktop alignment enhancements */
@media (min-width: 1024px) {
  .feature-grid, .service-cards, .industry-cards, .use-case-grid, .plan-cards, .faq-list, .module-grid, .case-teasers, .case-list, .department-cards { justify-content: space-between; }
}

/* LINKS inside copy blocks */
.content-wrapper a:not(.btn-primary):not(.btn-secondary) { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* HEADER hero first section spacing tune */
main > section:first-of-type { padding-top: 50px; }

/* ADDRESS rows in thank-you - phone/email rows */
main .content-wrapper > div img + span { font-weight: 700; }

/* LEGAL PAGES readability */
.legal-links a { text-decoration: underline; text-underline-offset: 2px; }

/* Z-INDEX sanity */
header { z-index: 60; }
.mobile-menu { z-index: 100; }
.cookie-banner { z-index: 120; }
.cookie-overlay { z-index: 140; }
.cookie-modal { z-index: 150; }

/* PRINT STYLES (light) */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-overlay, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}