/* =====================================================================
   CelestiForce | Industrial Modern Theme
   Complete CSS for all pages – mobile-first, flexbox-only
   ===================================================================== */

/* ---------------------------
   RESET / NORMALIZE
---------------------------- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { margin: 0 0 16px 22px; padding: 0; }
button { font: inherit; background: transparent; border: none; padding: 0; cursor: pointer; color: inherit; }
:focus { outline: 2px dashed #C27A36; outline-offset: 2px; }

/* ---------------------------
   THEME TOKENS
---------------------------- */
:root {
  --cf-primary: #1F2933;           /* gunmetal slate */
  --cf-secondary: #C27A36;         /* aged copper */
  --cf-accent: #F3F4F6;            /* fog light */
  --cf-bg: #0F1419;                /* industrial black-blue */
  --cf-surface: #151C23;           /* dark panel */
  --cf-surface-2: #19222B;         /* darker panel */
  --cf-line: #2A3440;              /* steel edge */
  --cf-muted: #9AA6B2;             /* muted label */
  --cf-text: #E6EAF0;              /* primary text on dark */
  --cf-text-invert: #0A0D10;       /* text on light or copper */
  --cf-shadow: rgba(0,0,0,0.35);
}

/* ---------------------------
   BASE TYPOGRAPHY
---------------------------- */
body {
  font-family: Verdana, "Segoe UI", Tahoma, sans-serif; /* brand body */
  font-size: 16px; line-height: 1.65; color: var(--cf-text); background: var(--cf-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: "Trebuchet MS", "Franklin Gothic Medium", "Segoe UI", Arial, sans-serif; color: #F2F4F7; letter-spacing: .3px; margin: 0 0 12px; }

h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.35; }

p { margin: 0 0 14px; color: #D9DEE5; }
strong { color: #FFFFFF; font-weight: 700; }

/* Decorative heading accent */
.content-wrapper > h1, .content-wrapper > h2 { position: relative; padding-left: 14px; }
.content-wrapper > h1::before, .content-wrapper > h2::before { content: ""; width: 4px; height: 100%; background: var(--cf-secondary); position: absolute; left: 0; top: 0; }

/* Links */
a { color: #DADFE6; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
a:hover { color: var(--cf-secondary); }

/* Lists in light panels (testimonials, legal pages) get dark text automatically via container styling */

/* ---------------------------
   LAYOUT WRAPPERS (flex-only)
---------------------------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 14px; background: var(--cf-surface); border: 1px solid var(--cf-line); border-radius: 10px; padding: 24px; box-shadow: 0 8px 24px var(--cf-shadow); }

/* Mandatory spacing and alignment patterns (exact declarations included) */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.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; }

/* ---------------------------
   HEADER / NAV
---------------------------- */
header { background: #0E141A; border-bottom: 1px solid var(--cf-line); position: relative; z-index: 50; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
header img { height: 36px; width: auto; }

/* Desktop nav hidden on mobile (mobile-first) */
header nav { display: none; align-items: center; gap: 16px; }
header nav a { padding: 8px 10px; border-radius: 6px; color: #E8EDF3; border: 1px solid transparent; }
header nav a:hover { border-color: var(--cf-secondary); color: #FFFFFF; }
header nav a.cta { background: var(--cf-secondary); color: #FFFFFF; border-color: #b06e31; }
header nav a.cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Mobile burger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--cf-line); border-radius: 8px; color: #E6EBF2; background: #121820; }
.mobile-menu-toggle:hover { border-color: var(--cf-secondary); color: #FFFFFF; }

/* Mobile Menu Overlay */
.mobile-menu { position: fixed; inset: 0; background: rgba(9,12,16,0.9); backdrop-filter: blur(4px); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s ease; z-index: 9999; }
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; margin: 16px 16px 0 0; width: 42px; height: 42px; border: 1px solid var(--cf-line); border-radius: 8px; color: #E6EBF2; background: #121820; }
.mobile-menu-close:hover { border-color: var(--cf-secondary); color: #FFFFFF; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 28px; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 14px; border-radius: 8px; background: #121820; border: 1px solid var(--cf-line); color: #E8EDF3; font-weight: 600; }
.mobile-nav a:hover { border-color: var(--cf-secondary); color: #FFFFFF; }

/* ---------------------------
   BREADCRUMB
---------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--cf-muted); font-size: 14px; }
.breadcrumb a { color: #C9D1D9; }
.breadcrumb a:hover { color: var(--cf-secondary); }

/* ---------------------------
   BUTTONS / CTAs
---------------------------- */
.cta, .secondary-cta, .cookie-btn, .cookie-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; letter-spacing: .2px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }

.cta { background: var(--cf-secondary); color: #FFFFFF; box-shadow: 0 6px 18px rgba(194,122,54,0.25); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(194,122,54,0.35); }

.secondary-cta { background: transparent; color: #E6EBF2; border-color: var(--cf-secondary); }
.secondary-cta:hover { background: rgba(194,122,54,0.12); color: #FFFFFF; }

.quick-links { display: flex; flex-wrap: wrap; gap: 12px; }
.quick-links a { border: 1px solid var(--cf-line); padding: 10px 14px; border-radius: 8px; background: #111821; }
.quick-links a:hover { border-color: var(--cf-secondary); color: #FFFFFF; }

/* ---------------------------
   HERO / SECTIONS
---------------------------- */
main > section { padding: 22px 0; }

/* Trust badges and short services */
.trust-badges { display: flex; flex-wrap: wrap; gap: 8px 14px; color: #C7CFD8; font-size: 14px; }
.service-shortlist { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; }
.service-shortlist li { padding: 8px 12px; border-radius: 999px; background: #10161D; border: 1px solid var(--cf-line); color: #D7DEE6; }

/* ---------------------------
   SERVICES / FEATURES
---------------------------- */
.service-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.service-card { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; background: var(--cf-surface-2); border: 1px solid var(--cf-line); border-radius: 12px; padding: 18px; box-shadow: 0 8px 18px var(--cf-shadow); }
.service-card h3 { margin-bottom: 6px; }
.service-card a { align-self: flex-start; color: var(--cf-secondary); font-weight: 700; }
.service-card:hover { border-color: #334152; box-shadow: 0 12px 28px var(--cf-shadow); transform: translateY(-2px); }

.feature-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.feature-grid > div { flex: 1 1 240px; background: #121A22; border: 1px solid var(--cf-line); border-radius: 10px; padding: 16px; }

.metrics, .certifications { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 6px 0 0 0; padding: 0; }
.metrics li, .certifications span { padding: 8px 12px; border-radius: 8px; background: #0F161E; border: 1px solid var(--cf-line); color: #D5DCE4; }

/* ---------------------------
   PROCESS / LISTS
---------------------------- */
ol { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }

/* ---------------------------
   TESTIMONIALS (accessibility requirement)
---------------------------- */
.testimonial-list { display: flex; flex-wrap: wrap; gap: 16px; }
.testimonial-card { flex: 1 1 260px; background: var(--cf-accent); color: var(--cf-primary); border: 1px solid #E2E4E8; border-left: 4px solid var(--cf-secondary); border-radius: 10px; box-shadow: 0 10px 22px rgba(0,0,0,0.08); }
.testimonial-card p { color: #0F1720; }
.testimonial-card div { color: #1F2933; }
.rating-summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #10161D; border: 1px solid var(--cf-line); border-radius: 999px; color: #E7ECF3; font-weight: 700; }

/* ---------------------------
   FAQ
---------------------------- */
.faq-list { display: flex; flex-wrap: wrap; gap: 14px; }
.faq-list > div { flex: 1 1 260px; background: #131B23; border: 1px solid var(--cf-line); border-radius: 10px; padding: 16px; }
.faq-list h3 { margin-bottom: 6px; }

/* ---------------------------
   CONTACT
---------------------------- */
.contact-details { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-details > div { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #121821; border: 1px solid var(--cf-line); color: #D7DEE6; }
.contact-details img { width: 18px; height: 18px; filter: grayscale(60%) contrast(120%); }

.opening-hours { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #111821; border: 1px solid var(--cf-line); color: #D7DEE6; }
.opening-hours img { width: 18px; height: 18px; filter: grayscale(60%) contrast(120%); }

.contact-options { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-options a { padding: 10px 14px; border-radius: 8px; background: var(--cf-secondary); color: #FFFFFF; border: 1px solid #B06E31; }
.contact-options a:hover { filter: brightness(1.05); transform: translateY(-1px); }

.map-embed { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--cf-line); border-radius: 10px; background: #111821; color: #C9D1D9; }
.map-embed img { width: 22px; height: 22px; }

/* ---------------------------
   NOTES / FORMS (static description blocks)
---------------------------- */
.notes, .form-instructions, .consent, .submit-action, .sla { display: flex; flex-direction: column; gap: 10px; }
.notes { background: #121A22; border: 1px solid var(--cf-line); border-radius: 10px; padding: 14px; }
.form-instructions { background: #0F161E; border: 1px solid var(--cf-line); border-radius: 10px; padding: 14px; }
.consent { background: #121A22; border: 1px solid var(--cf-line); border-radius: 10px; padding: 12px; }
.submit-action { gap: 12px; }
.sla { color: #D8DEE6; font-weight: 700; }

/* ---------------------------
   FOOTER
---------------------------- */
footer { background: #0B1015; border-top: 1px solid var(--cf-line); margin-top: 24px; }
footer .content-wrapper { background: transparent; border: none; box-shadow: none; padding: 20px 0; }
.footer-nav, .footer-legal, .footer-contact { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.footer-nav a, .footer-legal a { padding: 8px 10px; border-radius: 6px; border: 1px solid transparent; color: #C9D1D9; }
.footer-nav a:hover, .footer-legal a:hover { border-color: var(--cf-secondary); color: #FFFFFF; }
.footer-contact span { display: inline-flex; align-items: center; gap: 8px; color: #AEB7C1; }
.footer-contact img { width: 16px; height: 16px; filter: grayscale(70%) contrast(120%); }

/* ---------------------------
   LEGAL PAGE CONTENT PANELS (lighter readability if needed)
---------------------------- */
.breadcrumb + h1 + p, .breadcrumb + h1, .breadcrumb + h1 + p + div, .breadcrumb + h1 + p + h2 { /* no-op for specificity anchor */ }

/* ---------------------------
   COOKIE CONSENT BANNER & MODAL
---------------------------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; flex-direction: column; gap: 12px; background: #0F161E; border-top: 1px solid var(--cf-line); color: #E8EDF3; padding: 14px 16px; transform: translateY(110%); transition: transform .35s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons, .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn, .cookie-action { border-radius: 10px; padding: 10px 14px; }
.cookie-btn--primary { background: var(--cf-secondary); color: #FFFFFF; border: 1px solid #B06E31; }
.cookie-btn--outline { background: transparent; color: #E8EDF3; border: 1px solid var(--cf-secondary); }
.cookie-btn--ghost { background: #111821; color: #E8EDF3; border: 1px solid var(--cf-line); }
.cookie-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cookie-btn--outline:hover { background: rgba(194,122,54,0.12); }
.cookie-btn--ghost:hover { border-color: var(--cf-secondary); }

.cookie-modal { position: fixed; inset: 0; background: rgba(9,12,16,0.85); display: none; align-items: center; justify-content: center; z-index: 10000; }
.cookie-modal.show { display: flex; }
.cookie-modal-content { width: min(920px, 92vw); display: flex; flex-direction: column; gap: 12px; background: #10161D; border: 1px solid var(--cf-line); border-radius: 12px; padding: 18px; box-shadow: 0 20px 48px var(--cf-shadow); color: #E8EDF3; }
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0F141A; border: 1px solid var(--cf-line); border-radius: 10px; padding: 10px 12px; }
.cookie-category .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-toggle { display: inline-flex; align-items: center; width: 46px; height: 26px; padding: 2px; border-radius: 20px; background: #2B3743; position: relative; transition: background .2s ease; }
.cookie-toggle::after { content: ""; width: 22px; height: 22px; background: #E8EDF3; border-radius: 50%; transform: translateX(0); transition: transform .2s ease; }
.cookie-toggle.is-on { background: var(--cf-secondary); }
.cookie-toggle.is-on::after { transform: translateX(20px); }

/* ---------------------------
   RESPONSIVE
---------------------------- */
@media (min-width: 540px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}

@media (min-width: 768px) {
  .text-image-section { flex-direction: row; }
  .content-wrapper { padding: 28px; gap: 16px; }
  .service-card { padding: 20px; }
}

@media (min-width: 992px) {
  header nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  main > section { padding: 28px 0; }
}

/* ---------------------------
   ACCESSIBLE STATES
---------------------------- */
.cta:focus, .secondary-cta:focus, .mobile-menu-toggle:focus, .mobile-menu-close:focus, .mobile-nav a:focus { outline: 2px dashed var(--cf-secondary); outline-offset: 2px; }

/* ---------------------------
   EXTRA UTILITIES & DEFAULTS
---------------------------- */
hr { border: none; border-top: 1px solid var(--cf-line); margin: 16px 0; }
.small { font-size: 14px; color: var(--cf-muted); }
.muted { color: var(--cf-muted); }

/* Ensure no overlap and good spacing between content blocks */
.content-wrapper > * + * { margin-top: 4px; }

/* ---------------------------
   PAGE-SPECIFIC MICRO STYLES
---------------------------- */
/* Rating badges in various pages */
.rating-summary { margin-top: 6px; }

/* Cookie page choices */
.cookie-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-choices button { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--cf-line); background: #121820; color: #E8EDF3; }
.cookie-choices button:hover { border-color: var(--cf-secondary); color: #FFFFFF; }

/* Footer columns stack on mobile handled by flex-wrap */

/* ---------------------------
   FLEXBOX-ONLY VERIFICATION
---------------------------- */
/* All layout groups declared with display:flex and flex-wrap where needed. No CSS Grid or Columns used. */