/* ==========================================================================
   4Q CONSULTANCY — Design System
   ========================================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

/* --- Custom Properties --- */
:root {
  --color-black:      #0A0A0A;
  --color-white:      #FFFFFF;
  --color-off-white:  #F0F0EC;
  --color-steel-blue: #2E5FA3;
  --color-blue-dark:  #1E4A8A;
  --color-mid-grey:   #3A3A3A;
  --color-light-grey: #D4D4CE;

  --color-bg:         #FFFFFF;
  --color-bg-alt:     #F0F0EC;
  --color-text:       #0A0A0A;
  --color-text-sec:   #3A3A3A;
  --color-border:     #D4D4CE;
  --color-surface:    #FFFFFF;

  --font-primary: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius: 0;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --nav-height: 120px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

[data-theme="dark"] {
  --color-bg:       #111111;
  --color-bg-alt:   #1C1C1C;
  --color-text:     #FFFFFF;
  --color-text-sec: #D4D4CE;
  --color-border:   #3A3A3A;
  --color-surface:  #1C1C1C;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-height);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-steel-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { font-family: var(--font-primary); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-primary); font-size: var(--text-base); }

/* --- Skip Link --- */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:absolute;top:-100%;left:var(--space-4);background:var(--color-steel-blue);color:#fff;padding:var(--space-2) var(--space-4);z-index:9999; }
.skip-link:focus { top:var(--space-4); }

/* --- Layout --- */
.container { width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--space-6); }
.section { padding-block:var(--space-20); }
.section-alt { background-color:var(--color-bg-alt);padding-block:var(--space-20); }
.section-dark { background-color:var(--color-black);color:#fff;padding-block:var(--space-20); }
.section-dark h2,.section-dark p { color:#fff; }
.text-center { text-align:center; }

/* --- Typography --- */
h1,h2,h3,h4,h5,h6 { font-weight:700;line-height:1.15;color:var(--color-text); }
h1 { font-size:clamp(2rem,5vw,var(--text-5xl));margin-bottom:var(--space-6); }
h2 { font-size:clamp(1.5rem,3.5vw,var(--text-4xl));margin-bottom:var(--space-5); }
h3 { font-size:var(--text-2xl);margin-bottom:var(--space-4); }
h4 { font-size:var(--text-xl);margin-bottom:var(--space-3); }
p { margin-bottom:var(--space-4);color:var(--color-text-sec); }
p:last-child { margin-bottom:0; }
strong { color:var(--color-text);font-weight:700; }

/* --- Label / Eyebrow --- */
.label {
  display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-steel-blue);margin-bottom:var(--space-4);
}

/* --- Buttons --- */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:700;letter-spacing:.04em;
  padding:.625rem 1.5rem;border-radius:var(--radius);border:2px solid transparent;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
  white-space:nowrap;text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--color-steel-blue);color:#fff;border-color:var(--color-steel-blue); }
.btn-primary:hover { background:var(--color-blue-dark);border-color:var(--color-blue-dark);color:#fff; }
.btn-outline { background:transparent;color:var(--color-steel-blue);border-color:var(--color-steel-blue); }
.btn-outline:hover { background:var(--color-steel-blue);color:#fff; }
.btn-sm { font-size:var(--text-xs);padding:.4rem 1rem; }
.nav-actions .btn-primary { font-size:var(--text-sm);padding:.7rem 1.6rem; }
.btn-lg { font-size:var(--text-base);padding:.875rem 2rem; }

/* --- Navigation --- */
.site-header {
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-height);
  background:var(--color-bg);border-bottom:1px solid var(--color-border);
  transition:background var(--transition-base),border-color var(--transition-base);
}
.nav-container {
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-height);padding-inline:var(--space-6);max-width:1300px;margin-inline:auto;
}
.nav-logo { display:flex;align-items:center;text-decoration:none;flex-shrink:0; }
.nav-logo img { height:100px;width:auto; }
.logo-dark { display:none; }
[data-theme="dark"] .logo-light { display:none; }
[data-theme="dark"] .logo-dark { display:block; }

.nav-links { display:flex;align-items:center;gap:var(--space-2);list-style:none; }
.nav-item { position:relative; }
.nav-link {
  font-size:var(--text-sm);font-weight:500;color:var(--color-text);
  padding:var(--space-2) var(--space-3);display:flex;align-items:center;gap:var(--space-1);
  background:none;border:none;cursor:pointer;text-decoration:none;
  transition:color var(--transition-fast);border-radius:var(--radius);
}
.nav-link:hover,.nav-link.active { color:var(--color-steel-blue);text-decoration:none; }
.nav-link svg { transition:transform var(--transition-fast); }
.dropdown-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }

/* Dropdown */
.dropdown-menu {
  display:none;position:absolute;top:100%;left:0;
  background:var(--color-bg);border:1px solid var(--color-border);
  min-width:240px;box-shadow:var(--shadow-md);list-style:none;z-index:200;
  /* Top padding bridges any sub-pixel gap so hover stays active */
  padding-top:4px;
}
/* Bridge element prevents hover loss between button and menu */
.dropdown-menu::before {
  content:"";position:absolute;top:-6px;left:0;right:0;height:6px;
}
.has-dropdown:hover .dropdown-menu,
.dropdown-menu.is-open { display:block; }
.dropdown-menu li a {
  display:block;padding:var(--space-3) var(--space-5);font-size:var(--text-sm);
  color:var(--color-text);text-decoration:none;
  transition:background var(--transition-fast),color var(--transition-fast);
  /* Ensure full-width click target */
  pointer-events:all;
}
.dropdown-menu li a:hover { background:var(--color-bg-alt);color:var(--color-steel-blue); }

/* Nav actions */
.nav-actions { display:flex;align-items:center;gap:var(--space-3); }
.theme-toggle {
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  color:var(--color-text);background:none;border:1px solid var(--color-border);
  cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast);
}
.theme-toggle:hover { color:var(--color-steel-blue);border-color:var(--color-steel-blue); }
.icon-sun { display:block; }
.icon-moon { display:none; }
[data-theme="dark"] .icon-sun { display:none; }
[data-theme="dark"] .icon-moon { display:block; }

/* Mobile toggle */
.mobile-menu-toggle {
  display:none;flex-direction:column;gap:5px;width:36px;height:36px;
  align-items:center;justify-content:center;background:none;border:1px solid var(--color-border);cursor:pointer;
}
.mobile-menu-toggle span {
  display:block;width:20px;height:2px;background:var(--color-text);
  transition:transform var(--transition-fast),opacity var(--transition-fast);
}
.mobile-menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity:0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  display:none;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;
  background:var(--color-bg);overflow-y:auto;z-index:999;padding:var(--space-6);
  flex-direction:column;
}
.mobile-nav.is-open { display:flex; }
.mobile-nav-links { list-style:none;display:flex;flex-direction:column;gap:0; }
.mobile-nav-link {
  display:block;width:100%;padding:var(--space-4) 0;font-size:var(--text-lg);font-weight:500;
  color:var(--color-text);text-decoration:none;background:none;border:none;text-align:left;
  border-bottom:1px solid var(--color-border);cursor:pointer;
}
.mobile-dropdown { list-style:none;padding-left:var(--space-4);display:none; }
.mobile-dropdown.is-open { display:block; }
.mobile-dropdown li a {
  display:block;padding:var(--space-3) 0;font-size:var(--text-base);
  color:var(--color-text-sec);text-decoration:none;border-bottom:1px solid var(--color-border);
}
.mobile-dropdown li a:hover { color:var(--color-steel-blue); }

/* --- Page Hero --- */
.page-hero {
  background:var(--color-bg-alt);padding-block:var(--space-20);
  border-bottom:1px solid var(--color-border);
}
.page-hero .container { max-width:800px; }
.page-hero h1 { margin-top:var(--space-3); }
.hero-sub {
  font-size:var(--text-xl);color:var(--color-text-sec);max-width:640px;
  margin-top:var(--space-4);margin-bottom:0;
}

/* --- Homepage Hero (image) --- */
.hero--image {
  position:relative;min-height:90vh;display:flex;align-items:center;
  padding-block:var(--space-24);overflow:hidden;
  border-bottom:2px solid var(--color-steel-blue);
}
.hero-bg {
  position:absolute;inset:0;z-index:0;
}
.hero-bg img {
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
}
.hero-overlay {
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.45) 60%, rgba(10,10,10,.2) 100%);
}
.hero-content {
  position:relative;z-index:2;max-width:700px;
}
.hero-eyebrow {
  font-size:var(--text-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:var(--space-4);
}
.hero--image h1 { color:#fff;margin-bottom:var(--space-5); }
.hero--image .hero-sub { color:rgba(255,255,255,.8);max-width:580px;font-size:var(--text-xl); }
.hero-actions { display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-8); }
.btn-outline-white {
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);
  display:inline-flex;align-items:center;font-size:var(--text-base);font-weight:700;
  padding:.875rem 2rem;text-decoration:none;
  transition:background var(--transition-fast),border-color var(--transition-fast);
}
.btn-outline-white:hover { background:rgba(255,255,255,.15);border-color:#fff;color:#fff;text-decoration:none; }

/* --- Ticker --- */
.ticker {
  background:var(--color-steel-blue);color:#fff;overflow:hidden;padding-block:var(--space-3);
  border-top:2px solid var(--color-blue-dark);border-bottom:2px solid var(--color-blue-dark);
}
/* Single continuous loop — JS clones the track once so we scroll exactly one width */
.ticker-wrap { display:flex;width:max-content; }
.ticker-track {
  display:flex;gap:var(--space-10);white-space:nowrap;flex-shrink:0;padding-right:var(--space-10);
  animation:ticker-scroll 35s linear infinite;
}
@media (prefers-reduced-motion:reduce) { .ticker-track { animation:none; } }
/* Scrolls exactly one track width — clone fills the visual gap */
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-100%)} }
.ticker-item { font-size:var(--text-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase; }

/* --- Services Grid --- */
.services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--color-border); }
.service-card {
  background:var(--color-bg);padding:var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-4);
}
.service-num { font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;color:var(--color-steel-blue); }
.service-card h2,.service-card h3 { font-size:var(--text-xl);margin-bottom:0; }
.service-card h2 a,.service-card h3 a { color:var(--color-text);text-decoration:none; }
.service-card h2 a:hover,.service-card h3 a:hover { color:var(--color-steel-blue); }
.service-card p { color:var(--color-text-sec);margin-bottom:0; }
.service-list { list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2); }
.service-list li { font-size:var(--text-sm);color:var(--color-text-sec);padding-left:var(--space-4);position:relative; }
.service-list li::before { content:"—";position:absolute;left:0;color:var(--color-steel-blue); }

/* --- Link Arrow --- */
.link-arrow {
  display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);
  font-weight:700;color:var(--color-steel-blue);text-decoration:none;margin-top:auto;
}
.link-arrow::after { content:"→";transition:transform var(--transition-fast); }
.link-arrow:hover::after { transform:translateX(4px); }
.link-arrow:hover { text-decoration:none; }

/* --- Two Column Layout --- */
.two-col-layout { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start; }

/* --- Diff List --- */
.diff-list { display:flex;flex-direction:column;gap:var(--space-6); }
.diff-item {
  padding-left:var(--space-5);border-left:3px solid var(--color-steel-blue);
}
.diff-item strong { display:block;font-size:var(--text-base);margin-bottom:var(--space-2);color:var(--color-text); }
.diff-item p { font-size:var(--text-sm);color:var(--color-text-sec);margin:0; }

/* --- Process Steps --- */
.process-steps { display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-6); }
.process-step { display:flex;gap:var(--space-6);align-items:flex-start; }
.step-num {
  flex-shrink:0;width:44px;height:44px;background:var(--color-steel-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);
}
.process-step strong { display:block;font-size:var(--text-base);margin-bottom:var(--space-2); }
.process-step p { font-size:var(--text-sm);color:var(--color-text-sec);margin:0; }

.process-list { padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4); }
.process-list li { font-size:var(--text-sm);color:var(--color-text-sec); }

/* --- Stats Bar --- */
.stats-bar { background:var(--color-steel-blue);padding-block:var(--space-12); }
.stats-inner { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);text-align:center;max-width:700px;margin-inline:auto; }
.stat-value { font-size:var(--text-4xl);font-weight:700;color:#fff;line-height:1; }
.stat-label { font-size:var(--text-sm);color:rgba(255,255,255,.7);margin-top:var(--space-2); }

/* --- Blog Grid / Cards --- */
.blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8); }
.blog-card { display:flex;flex-direction:column;border:1px solid var(--color-border);background:var(--color-bg); }
.blog-card-meta { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6) 0;font-size:var(--text-xs);color:var(--color-text-sec); }
.blog-date { color:var(--color-text-sec); }
.blog-card-title { font-size:var(--text-xl);font-weight:700;padding:var(--space-4) var(--space-6) 0;margin:0;line-height:1.3; }
.blog-card-title a { color:var(--color-text);text-decoration:none; }
.blog-card-title a:hover { color:var(--color-steel-blue); }
.blog-card-excerpt { font-size:var(--text-sm);color:var(--color-text-sec);padding:var(--space-3) var(--space-6);margin:0;flex:1; }
.blog-card .link-arrow { padding:var(--space-5) var(--space-6); }

/* --- CTA Band --- */
.cta-band { background:var(--color-bg-alt);border-top:2px solid var(--color-steel-blue);padding-block:var(--space-20); }
.cta-band h2 { margin-bottom:var(--space-3); }
.cta-band p { color:var(--color-text-sec);max-width:500px;margin-inline:auto; }

/* --- Contact --- */
.contact-layout { display:grid;grid-template-columns:1fr 1.6fr;gap:var(--space-16);align-items:start; }
.contact-info h2 { margin-bottom:var(--space-6); }
.contact-info h3 { font-size:var(--text-xl); }
.contact-item { display:flex;flex-direction:column;gap:var(--space-1);padding-block:var(--space-4);border-bottom:1px solid var(--color-border); }
.contact-item strong { font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-sec); }
.contact-item a,.contact-item span { font-size:var(--text-base);color:var(--color-text); }

/* --- Forms --- */
.contact-form-wrap h2 { margin-bottom:var(--space-6); }
.form-group { display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5); }
.form-group label { font-size:var(--text-sm);font-weight:700;color:var(--color-text); }
.form-group input,.form-group select,.form-group textarea {
  padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);
  transition:border-color var(--transition-fast);width:100%;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  outline:none;border-color:var(--color-steel-blue);
}
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5); }
.form-checkbox { flex-direction:row;align-items:flex-start;gap:var(--space-3); }
.form-checkbox input { width:auto;margin-top:3px; }
.form-checkbox label { font-weight:400;font-size:var(--text-sm); }
.form-submit { margin-top:var(--space-4); }
.form-success { background:var(--color-bg-alt);border:1px solid var(--color-steel-blue);padding:var(--space-4) var(--space-5);margin-top:var(--space-4); }
.form-success p { color:var(--color-text);margin:0; }

/* --- Accordion / FAQ --- */
.faq-group-heading { font-size:var(--text-2xl);padding-bottom:var(--space-4);border-bottom:2px solid var(--color-steel-blue);margin-bottom:var(--space-5);margin-top:var(--space-10); }
.faq-group-heading:first-child { margin-top:0; }
.accordion { display:flex;flex-direction:column;margin-bottom:var(--space-8); }
.accordion-item { border-bottom:1px solid var(--color-border); }
.accordion-trigger {
  width:100%;text-align:left;padding:var(--space-5) 0;font-size:var(--text-base);
  font-weight:700;color:var(--color-text);background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
}
.accordion-trigger::after { content:"+";font-size:var(--text-xl);color:var(--color-steel-blue);flex-shrink:0; }
.accordion-trigger[aria-expanded="true"]::after { content:"−"; }
.accordion-trigger:hover { color:var(--color-steel-blue); }
.accordion-content { display:none;padding-bottom:var(--space-5); }
.accordion-content.is-open { display:block; }
.accordion-content p { font-size:var(--text-sm);color:var(--color-text-sec);margin-bottom:var(--space-3); }
.accordion-content p:last-child { margin-bottom:0; }

/* --- Data Table --- */
.data-table-wrap { overflow-x:auto;margin-block:var(--space-6); }
.data-table { width:100%;border-collapse:collapse;font-size:var(--text-sm); }
.data-table th { background:var(--color-steel-blue);color:#fff;padding:var(--space-3) var(--space-4);text-align:left;font-weight:700; }
.data-table td { padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-sec); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:nth-child(even) td { background:var(--color-bg-alt); }

/* --- Article Page --- */
.article-page {}
.article-header { background:var(--color-bg-alt);padding-block:var(--space-16);border-bottom:1px solid var(--color-border); }
.article-meta { display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap; }
.article-date,.article-read { font-size:var(--text-xs);color:var(--color-text-sec); }
.article-header h1 { font-size:clamp(1.75rem,4vw,var(--text-4xl));margin-bottom:var(--space-4); }
.article-deck { font-size:var(--text-lg);color:var(--color-text-sec);max-width:680px; }
.article-body { padding-block:var(--space-16); }
.article-body h2 { font-size:var(--text-2xl);margin-top:var(--space-12);margin-bottom:var(--space-4); }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { font-size:var(--text-xl);margin-top:var(--space-8);margin-bottom:var(--space-3); }
.article-body p { font-size:var(--text-base);line-height:1.75;margin-bottom:var(--space-5);color:var(--color-text-sec); }
.article-body ul,.article-body ol { padding-left:var(--space-6);margin-bottom:var(--space-5); }
.article-body ul { list-style:disc; }
.article-body ol { list-style:decimal; }
.article-body li { font-size:var(--text-base);color:var(--color-text-sec);margin-bottom:var(--space-2);line-height:1.7; }
.article-body strong { color:var(--color-text); }
.article-body a { color:var(--color-steel-blue); }
.article-body a:hover { text-decoration:underline; }
.article-footer { padding-bottom:var(--space-8); }

/* --- Footer --- */
.site-footer { background:var(--color-black);color:#fff;padding-top:var(--space-16); }
.footer-inner { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-12);max-width:1200px;margin-inline:auto;padding-inline:var(--space-6);padding-bottom:var(--space-12); }
.footer-brand img { height:60px;width:auto; }
.footer-brand p { font-size:var(--text-sm);color:#ffffff;margin-top:var(--space-4);max-width:280px; }
.footer-brand p a { color:#ffffff;text-decoration:none; }
.footer-brand p a:hover { text-decoration:underline; }
.footer-col h4 { font-size:var(--text-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:var(--space-5); }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:var(--space-3); }
.footer-col ul li a { font-size:var(--text-sm);color:#ffffff;text-decoration:none;transition:color var(--transition-fast); }
.footer-col ul li a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1);padding:var(--space-5) var(--space-6);max-width:1200px;margin-inline:auto; }
.footer-bottom p { font-size:var(--text-xs);color:#ffffff;margin:0; }

/* --- Cookie Banner --- */
.cookie-banner {
  position:fixed;bottom:0;left:0;right:0;z-index:9000;
  background:var(--color-bg);border-top:1px solid var(--color-border);
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
  transform:translateY(100%);transition:transform .3s ease;
}
.cookie-banner.is-visible { transform:translateY(0); }
.cookie-banner-inner {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--space-4);max-width:1200px;margin-inline:auto;padding:var(--space-4) var(--space-6);
}
.cookie-banner-inner p { margin:0;font-size:var(--text-sm); }
.cookie-banner-actions { display:flex;gap:var(--space-3);flex-wrap:wrap; }

/* Cookie Modal */
.cookie-modal {
  position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;
}
.cookie-modal.is-visible { opacity:1;pointer-events:all; }
.cookie-modal-inner {
  background:var(--color-bg);max-width:520px;width:90%;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.cookie-modal-header { display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border); }
.cookie-modal-header h2 { font-size:var(--text-xl);margin:0; }
.cookie-modal-close { font-size:var(--text-2xl);line-height:1;color:var(--color-text-sec);background:none;border:none;cursor:pointer; }
.cookie-modal-close:hover { color:var(--color-text); }
.cookie-modal-body { padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-5); }
.cookie-row { display:flex;align-items:center;justify-content:space-between;gap:var(--space-6); }
.cookie-row strong { display:block;font-size:var(--text-sm);margin-bottom:var(--space-1); }
.cookie-row p { font-size:var(--text-xs);color:var(--color-text-sec);margin:0; }
.cookie-modal-footer { padding:var(--space-5) var(--space-6);border-top:1px solid var(--color-border); }

/* Toggle switch */
.toggle { position:relative;display:inline-flex;align-items:center;flex-shrink:0; }
.toggle input { opacity:0;width:0;height:0;position:absolute; }
.slider {
  width:44px;height:24px;background:var(--color-border);cursor:pointer;
  transition:background var(--transition-fast);position:relative;
}
.slider::before {
  content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;
  background:#fff;transition:transform var(--transition-fast);
}
.toggle input:checked + .slider { background:var(--color-steel-blue); }
.toggle input:checked + .slider::before { transform:translateX(20px); }
.toggle input:disabled + .slider { opacity:.5;cursor:not-allowed; }

/* --- Quick Nav (article) --- */
.quick-nav { background:var(--color-bg-alt);border:1px solid var(--color-border);padding:var(--space-5);margin-bottom:var(--space-8); }
.quick-nav h4 { font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-3); }
.quick-nav ol { padding-left:var(--space-5);list-style:decimal; }
.quick-nav li { font-size:var(--text-sm);margin-bottom:var(--space-2); }
.quick-nav li a { color:var(--color-steel-blue); }

/* ==========================================================================
   RESPONSIVE — Desktop first
   Breakpoints:
     Tablet  : max-width 1024px
     Mobile  : max-width 640px
   ========================================================================== */

/* --- Tablet (768px – 1024px) --- */
@media (max-width:1024px) {
  /* Nav */
  .nav-links { display:none; }
  .nav-actions .btn-primary { display:none; }
  .mobile-menu-toggle { display:flex; }
  .nav-container { padding-inline:var(--space-5); }

  /* Hero */
  .hero--image { min-height:70vh;padding-block:var(--space-20); }
  .hero-content { max-width:100%; }

  /* Layouts */
  .two-col-layout { grid-template-columns:1fr;gap:var(--space-10); }
  .contact-layout { grid-template-columns:1fr;gap:var(--space-10); }
  .hero-inner { grid-template-columns:1fr; }
  .hero-art { display:none; }

  /* Grids */
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .stats-inner { grid-template-columns:repeat(2,1fr);gap:var(--space-8); }

  /* Footer */
  .footer-inner { grid-template-columns:1fr 1fr;gap:var(--space-8); }
  .footer-brand { grid-column:1 / -1; }

  /* Article */
  .article-header .container { padding-inline:var(--space-5); }
  .article-body.container { padding-inline:var(--space-5); }

  /* Process steps */
  .process-steps { gap:var(--space-6); }

  /* Data table horizontal scroll */
  .data-table-wrap { -webkit-overflow-scrolling:touch; }
}

/* --- Mobile (≤ 640px) --- */
@media (max-width:640px) {
  /* Base */
  body { padding-top:var(--nav-height); }
  .container { padding-inline:var(--space-4); }

  /* Typography */
  h1 { font-size:clamp(1.75rem,7vw,var(--text-3xl));line-height:1.2; }
  h2 { font-size:clamp(1.4rem,5vw,var(--text-2xl));line-height:1.25; }
  h3 { font-size:var(--text-xl); }

  /* Spacing */
  .section,.section-alt,.section-dark { padding-block:var(--space-14); }
  .page-hero { padding-block:var(--space-14); }

  /* Nav */
  --nav-height: 80px;
  .nav-logo img { height:64px; }
  .nav-container { padding-inline:var(--space-4); }

  /* Hero */
  .hero--image { min-height:85vh;padding-block:var(--space-16); }
  .hero-eyebrow { font-size:var(--text-xs); }
  .hero--image h1 { font-size:clamp(1.75rem,7vw,2.5rem); }
  .hero--image .hero-sub { font-size:var(--text-base); }
  .hero-actions { flex-direction:column;gap:var(--space-3); }
  .hero-actions .btn { width:100%;justify-content:center; }

  /* Grids → single column */
  .services-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:1fr 1fr;gap:var(--space-6); }

  /* Service cards */
  .service-card { padding:var(--space-6); }
  .stat-value { font-size:var(--text-3xl); }

  /* Forms */
  .form-row { grid-template-columns:1fr; }
  .contact-form-wrap h2 { font-size:var(--text-2xl); }

  /* Buttons */
  .btn-lg { font-size:var(--text-sm);padding:.75rem 1.5rem; }

  /* Footer */
  .footer-inner { grid-template-columns:1fr;gap:var(--space-8); }
  .footer-brand { grid-column:auto; }
  .footer-bottom { text-align:center; }

  /* Cookie banner */
  .cookie-banner-inner { flex-direction:column;align-items:flex-start; }
  .cookie-banner-actions { width:100%;justify-content:flex-end; }

  /* Accordion */
  .accordion-trigger { font-size:var(--text-sm); }

  /* Article */
  .article-header { padding-block:var(--space-10); }
  .article-body { padding-block:var(--space-10); }
  .article-body h2 { font-size:var(--text-xl);margin-top:var(--space-8); }
  .article-meta { gap:var(--space-3); }

  /* Process */
  .process-step { gap:var(--space-4); }
  .step-num { width:36px;height:36px;font-size:var(--text-xs);flex-shrink:0; }

  /* FAQ group heading */
  .faq-group-heading { font-size:var(--text-xl); }

  /* CTA band */
  .cta-band { padding-block:var(--space-14); }

  /* Page hero text */
  .hero-sub { font-size:var(--text-base); }

  /* Data table — allow horizontal scroll on mobile */
  .data-table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
  .data-table { min-width:500px; }

  /* Diff list */
  .diff-list { gap:var(--space-5); }

  /* Blog card meta wrap */
  .blog-card-meta { flex-wrap:wrap;gap:var(--space-2); }
}

/* --- Additions --- */
.mobile-dropdown-toggle {
  display:block;width:100%;padding:var(--space-4) 0;font-size:var(--text-lg);font-weight:500;
  color:var(--color-text);text-decoration:none;background:none;border:none;
  border-bottom:1px solid var(--color-border);text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-dropdown-toggle::after { content:"›";color:var(--color-steel-blue); }

.contact-form { display:flex;flex-direction:column; }