/* ==========================================================================
   Webcart Design System
   Built from the approved brand guidelines: angular geometric language,
   Primary Cyan accent (10%), Core Black/Charcoal (60%), White/Grey (30%).
   Oswald for display, Inter for body/UI.
   ========================================================================== */

/* ---- Tokens ---- */
:root {
  /* Brand colors */
  --color-cyan: #02A4C1;
  --color-cyan-deep: #087D94;
  --color-cyan-soft: #6CC8D8;
  --color-black: #000000;
  --color-charcoal: #171A1C;
  --color-grey: #E9EEF0;
  --color-white: #FFFFFF;

  /* Functional aliases */
  --color-bg: var(--color-white);
  --color-bg-dark: var(--color-black);
  --color-text: var(--color-charcoal);
  --color-text-inverse: var(--color-white);
  --color-text-muted: #52585C;
  --color-border: #DDE3E6;
  --color-accent: var(--color-cyan);

  /* Type */
  --font-display: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion: fast, precise, smooth, geometric */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
}

/* ---- Fonts ----
   Self-hosted, per the Core Web Vitals strategy: no Google Fonts CDN
   request, no render-blocking @import (an earlier version of this file
   used one, which is both a Core Web Vitals violation and the direct
   cause of headings silently falling back to the browser's default
   condensed system font on any network that blocks or delays a
   third-party font request, corporate firewalls and ad/privacy blockers
   both do this routinely). font-display: swap means visible text never
   waits on the font file, it paints in the fallback immediately and
   swaps in Oswald/Inter the moment they're ready. Pair this with the
   <link rel="preload"> tags in head_meta.html.j2 for the two weights
   used above the fold. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oswald-400.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/oswald-500.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/oswald-600.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/oswald-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* Skip link for accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-black); color: var(--color-white);
  padding: var(--space-2) var(--space-4);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

/* ---- Layout helpers ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
.section--dark { background: var(--color-black); color: var(--color-white); }
.section--grey { background: var(--color-grey); }
.section--charcoal { background: var(--color-charcoal); color: var(--color-white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--color-cyan);
  margin-right: var(--space-2);
  vertical-align: middle;
}

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.lede { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 64ch; }
.section--dark .lede, .section--charcoal .lede { color: #C7CDD0; }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.9em 1.75em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-cyan); color: var(--color-black); }
.btn-primary:hover { background: var(--color-cyan-deep); color: var(--color-white); }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline:hover { background: var(--color-cyan); border-color: var(--color-cyan); color: var(--color-black); }
.btn-ghost { background: transparent; color: var(--color-cyan); text-transform: none; font-weight: 600; padding: 0.5em 0; }
.btn-ghost::after { content: "→"; margin-left: var(--space-2); transition: transform var(--dur-fast) var(--ease); }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.logo-link { display: flex; align-items: center; }
.logo-link img { height: 44px; width: auto; }
.main-nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-list { display: flex; gap: var(--space-5); list-style: none; }
.nav-list > li { position: relative; }
.nav-list > li > a, .nav-list > li > button {
  background: none; border: none; color: var(--color-text);
  font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.02em;
  text-transform: uppercase; display: flex; align-items: center; gap: 4px;
  padding: var(--space-2) 0;
}
.nav-list > li > a:hover, .nav-list > li > button:hover { color: var(--color-cyan); }
.mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--color-white); border: 1px solid var(--color-border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  padding: var(--space-5); display: none; gap: var(--space-2) var(--space-6);
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  min-width: 480px; border-radius: var(--radius-md);
}
.nav-list > li:hover .mega-menu,
.nav-list > li:focus-within .mega-menu { display: grid; }
.mega-menu a { display: block; padding: var(--space-2) var(--space-2); font-size: var(--fs-small); border-radius: var(--radius-sm); }
.mega-menu a:hover { background: var(--color-grey); color: var(--color-cyan-deep); }
.mega-menu a strong { display: block; font-weight: 600; }
.mega-menu a span { display: block; color: var(--color-text-muted); font-size: 0.8rem; margin-top: 2px; }
.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle { display: none; background: none; border: none; padding: var(--space-2); }
.nav-toggle svg { display: block; }

@media (max-width: 960px) {
  .main-nav { position: fixed; inset: 76px 0 0 0; background: var(--color-white);
    flex-direction: column; align-items: stretch; padding: var(--space-5) var(--container-pad);
    overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-base) var(--ease);
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--color-border); }
  .nav-list > li > a, .nav-list > li > button { width: 100%; padding: var(--space-4) 0; justify-content: space-between; }
  .mega-menu { position: static; transform: none; display: none; grid-template-columns: 1fr; box-shadow: none; border: none; min-width: 0; padding: 0 0 var(--space-3); }
  .nav-list > li.is-open .mega-menu { display: grid; }
  .header-cta { margin-top: var(--space-5); flex-direction: column; align-items: stretch; }
  .nav-toggle { display: block; }
}

/* ---- Hero ---- */
.hero { padding-block: var(--space-9) var(--space-8); position: relative; overflow: hidden; }
.hero--dark { background: var(--color-black); color: var(--color-white); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--space-4); }
.hero .lede { font-size: var(--fs-body-lg); margin-bottom: var(--space-5); }
.hero--dark .lede { color: #C7CDD0; }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-white);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--color-cyan); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); }
.card-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-weight: 600; color: var(--color-cyan-deep); font-size: var(--fs-small); }

/* Stats band */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); text-align: center; }
@media (max-width: 640px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat-number { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--color-cyan); }
.stat-label { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-1); }
.section--dark .stat-label, .section--charcoal .stat-label { color: #9AA1A5; }

/* Trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: center; opacity: 0.85; }

/* Process / numbered steps */
.step-list { list-style: none; counter-reset: step; display: grid; gap: var(--space-4); }
.step-list li { counter-increment: step; display: flex; gap: var(--space-4); align-items: flex-start; }
.step-list li::before {
  content: counter(step);
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-cyan); color: var(--color-cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem;
}

/* FAQ accordion (native details/summary, zero JS) */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: var(--space-4) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  font-weight: 600; font-family: var(--font-body);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-cyan); flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding-bottom: var(--space-4); color: var(--color-text-muted); max-width: 70ch; }

/* Badge / pill */
.badge {
  display: inline-block; padding: 0.3em 0.8em; border-radius: 999px;
  border: 1px solid var(--color-cyan); color: var(--color-cyan-deep);
  font-size: var(--fs-small); font-weight: 600;
}

/* CTA band (pre-footer) */
.cta-band { background: var(--color-black); color: var(--color-white); text-align: center; }
.cta-band h2 { margin-bottom: var(--space-3); }
.cta-band .lede { color: #C7CDD0; margin-inline: auto; margin-bottom: var(--space-5); }
.cta-band .btn-row { justify-content: center; }

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-cyan-deep); }
.breadcrumb .sep { margin-inline: var(--space-2); }

/* Divider line device, echoes the logo's line motif */
.line-device { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-eyebrow); letter-spacing: 0.15em; text-transform: uppercase; }
.line-device::before, .line-device::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* Forms */
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--space-2); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 0.85em 1em; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-cyan); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Image placeholder */
.img-ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, #EDEFF0, #EDEFF0 10px, #E2E5E7 10px, #E2E5E7 20px);
  border: 1px dashed #B7BEC2;
  color: #6B7276;
  font-family: var(--font-body); font-size: 0.8rem; text-align: center;
  overflow: hidden;
}
.img-ph .img-ph-label { padding: var(--space-3); max-width: 90%; }
.img-ph .img-ph-tag { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-cyan-deep); margin-bottom: 4px; font-size: 0.7rem; }
.img-ph .img-ph-dims { display: block; margin-top: 4px; color: #8A9095; }

/* Section-specific image shapes */
.img-ph--hero { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.img-ph--square { aspect-ratio: 1 / 1; border-radius: var(--radius-md); }
.img-ph--wide { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.img-ph--logo-strip { aspect-ratio: 3 / 1; width: 120px; border-radius: var(--radius-sm); }

/* Real generated/uploaded images dropped into the same slots as the
   placeholders above: same shape classes drive aspect-ratio/radius/sizing,
   this just adds the fill behavior a <div> placeholder didn't need. */
.img-real { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.img-ph--avatar.img-real { object-fit: cover; }

/* Avatar placeholders are too small to hold label text: show an icon only,
   the full "what goes here" description is carried in the alt attribute
   for screen readers and developers inspecting the markup. */
.img-ph--avatar {
  aspect-ratio: 1 / 1; border-radius: 50%; width: 96px; flex: none;
}
.img-ph--avatar .img-ph-label { display: none; }
.img-ph--avatar::after {
  content: "?";
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: #9AA1A5;
}

/* Footer */
.site-footer { background: var(--color-charcoal); color: #C7CDD0; padding-block: var(--space-8) var(--space-5); }
.footer-top { display: grid; grid-template-columns: 1.1fr 3fr; gap: var(--space-6); margin-bottom: var(--space-7); align-items: start; }
.footer-brand img { height: 40px; width: auto; margin-bottom: var(--space-4); }
.footer-nav-group { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5); padding-left: var(--space-6); border-left: 1px solid #2A2E31; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-nav-group { grid-template-columns: repeat(2, 1fr); border-left: none; padding-left: 0; padding-top: var(--space-5); border-top: 1px solid #2A2E31; }
}
@media (max-width: 560px) { .footer-nav-group { grid-template-columns: 1fr; } }
.footer-col h5 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-small); color: var(--color-white); margin-bottom: var(--space-3); }
.footer-col ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-col a:hover { color: var(--color-cyan); }
/* Services carries 11 links, noticeably taller than every other footer
   column, split it into two columns once its track is wide enough to
   keep each one readable (matches the 2fr share footer-nav-group gives
   it above the 900px breakpoint, where footer-nav-group is still a
   4-track row and Services occupies the wide first track). Below that,
   the column narrows too much for two, so it drops back to one. */
@media (min-width: 901px) {
  .footer-col ul.footer-services-list { display: block; columns: 2; column-gap: var(--space-5); }
  .footer-col ul.footer-services-list li { break-inside: avoid; margin-bottom: var(--space-2); }
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid #2A2E31; font-size: var(--fs-small); }
.footer-legal { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.social-row { display: flex; gap: var(--space-3); }
.social-row a { width: 36px; height: 36px; border: 1px solid #3A3F42; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.social-row a:hover { border-color: var(--color-cyan); color: var(--color-cyan); }

/* Cookie consent banner: overlay, non-reflowing (CWV: no CLS) */
.cookie-banner {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  max-width: 560px; margin-inline: auto;
  background: var(--color-black); color: var(--color-white);
  border-radius: var(--radius-md); padding: var(--space-5);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  z-index: 300; display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner p { font-size: var(--fs-small); color: #C7CDD0; margin-bottom: var(--space-4); }
.cookie-banner .btn-row { flex-wrap: wrap; }

/* Prose (legal pages, long-form content) */
.prose { max-width: 76ch; }
.prose h2 { font-size: 1.4rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-3); color: var(--color-text); }
.prose p em { color: var(--color-text-muted); }
.prose ul, .prose ol { margin: 0 0 var(--space-3) 1.25rem; }
.prose li { margin-bottom: var(--space-2); }
.prose strong { font-weight: 600; }

/* Utility */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.no-index-banner { background: var(--color-grey); color: var(--color-text-muted); font-size: var(--fs-small); text-align: center; padding: var(--space-2); }