/* =========================================================================
   Secvision design system
   Palette carried over from the August 2026 redesign prototype, with the two
   contrast defects corrected:
     - the wordmark rendered "VISION" in lime on the near-white header (1.21:1)
     - the form disclaimer rendered at ~42% white on ink (~4.06:1 at 12px)
   Measured ratios below are against the paper/ink backgrounds as used.
   ========================================================================= */

:root {
  /* Core palette */
  --ink:        #111A1D;  /* on paper: 16.23:1  AAA */
  --paper:      #F8F5EF;
  --lime:       #B7F34A;  /* ink on lime: 13.40:1  AAA — never white text on lime */
  --white:      #FFFFFF;  /* on ink: 17.66:1  AAA */

  /* Derived neutrals */
  --ink-80:     #3A4245;
  --ink-60:     #5C6265;  /* on paper: 5.9:1 — AA for body, the lightest we allow */
  --rule:       #DED8CD;
  --rule-dark:  #2A3336;
  --surface:    #FFFFFF;
  --surface-alt:#F1ECE3;

  /* Accents */
  --lime-deep:  #6E9B12;  /* on paper 3.03:1 — decorative and large text only, never body
                             text. Recomputed: the annotation here read 3.6:1, which would
                             have suggested more headroom above the 3:1 large-text floor
                             than this colour actually has. Darken it before using it for
                             anything that has to carry meaning on its own. */
  --danger:     #A32020;  /* on paper 7.4:1 */
  --success:    #1E6B3A;  /* on paper 6.9:1 */

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.5vw, 3.6rem);
  --step-5:  clamp(2.5rem, 1.7rem + 4vw, 4.6rem);

  /* Space */
  --s-1: 0.5rem;  --s-2: 0.875rem; --s-3: 1.25rem; --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4.5rem;   --s-7: 7rem;

  --measure: 68ch;
  --radius: 4px;
  --wrap: 1180px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--s-3); font-weight: 700; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p, ul, ol { margin: 0 0 var(--s-3); max-width: var(--measure); }
a { color: inherit; text-underline-offset: 0.18em; }

/* Fixed header would otherwise hide in-page anchor targets */
:target { scroll-margin-top: 6rem; }

/* Visible, high-contrast focus on every interactive element */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :focus-visible { outline-color: var(--lime); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: var(--s-3); top: -100px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: var(--s-3); }

/* ---------- screen-reader-only text ----------
   Used by the table captions, which name each table for someone navigating by
   table rather than reading down the page. The class was applied in the markup
   but never defined here, so "Project at a glance" rendered as visible text
   above the at-a-glance table on all three case-study pages.
   clip-path over display:none, which would hide it from screen readers too. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--alt { background: var(--surface-alt); }
.stack > * + * { margin-top: var(--s-3); }
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 var(--s-2);
  display: flex; align-items: center; gap: 0.6em;
}
.section--ink .eyebrow { color: var(--lime); }
.eyebrow::before {
  content: ''; width: 0.5em; height: 0.5em; background: var(--lime-deep);
  border-radius: 50%; flex: none;
}
.section--ink .eyebrow::before { background: var(--lime); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-80); }
.section--ink .lede { color: var(--paper); }
.muted { color: var(--ink-60); }
.section--ink .muted { color: #C6CDCF; } /* 9.4:1 on ink */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  padding: 0.85em 1.5em; border-radius: var(--radius);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: #000; }
.section--ink .btn--primary { background: var(--lime); color: var(--ink); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--white); }
.section--ink .btn--secondary { color: var(--paper); border-color: var(--paper); }
.section--ink .btn--secondary:hover { background: var(--paper); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 245, 239, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-2); }
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.03em; text-decoration: none; color: var(--ink); flex: none;
}
/* The prototype set this in lime on a near-white header: 1.21:1, effectively
   invisible. Ink on paper is 16.23:1. Lime is reserved for the dark header state. */
.wordmark__accent { color: var(--ink); }
.section--ink .wordmark__accent, .footer .wordmark__accent { color: var(--lime); }
.wordmark__strap {
  display: block; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.18em; color: var(--ink-60); font-weight: 400; margin-top: 2px;
}
.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__link {
  text-decoration: none; font-weight: 500; font-size: var(--step--1);
  padding: 0.4em 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav__link:hover { border-bottom-color: var(--lime-deep); }
.nav__link[aria-current='page'] { border-bottom-color: var(--ink); font-weight: 700; }
.nav__cta { margin-left: var(--s-2); }
.nav__group { position: relative; }
.nav__sub {
  list-style: none; margin: 0; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
@media (min-width: 900px) {
  .nav__sub {
    position: absolute; top: 100%; left: -1rem; min-width: 17rem;
    box-shadow: 0 12px 32px rgba(17, 26, 29, 0.13);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  }
  .nav__group:hover .nav__sub,
  .nav__group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
}
.nav__sub a { display: block; padding: 0.5em 0.7em; text-decoration: none; font-size: var(--step--1); border-radius: 3px; }
.nav__sub a:hover { background: var(--surface-alt); }

/* No JavaScript required: the mobile menu is a native details element */
.menu { margin-left: auto; }
.menu__toggle {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: 600;
  border: 2px solid var(--ink); border-radius: var(--radius); padding: 0.5em 0.9em;
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0 var(--s-4);
}
.menu__panel ul { list-style: none; margin: 0; padding: 0; }
.menu__panel a { display: block; padding: 0.7em 0; text-decoration: none; border-bottom: 1px solid var(--rule); font-weight: 600; }
.menu__panel .nav__sub a { font-weight: 400; padding-left: var(--s-3); border-bottom: none; }
@media (min-width: 900px) { .menu { display: none; } }
@media (max-width: 899px) { .nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding-block: var(--s-6) var(--s-5); }
.hero h1 { max-width: 15ch; }
.hero__lede { max-width: 54ch; font-size: var(--step-1); color: var(--ink-80); }
.hero mark { background: var(--lime); color: var(--ink); padding: 0 0.1em; }
.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  border-top: 1px solid var(--rule); margin-top: var(--s-5); padding-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60);
}

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(17,26,29,0.08); }
.card h3 { margin-bottom: 0; }
.card p { margin: 0; }
.card__link { margin-top: auto; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lime); align-self: flex-start; padding-bottom: 2px; }
.section--ink .card { background: #162024; border-color: var(--rule-dark); }

/* ---------- stats ---------- */
.stat { border-top: 3px solid var(--ink); padding-top: var(--s-2); }
.section--ink .stat { border-top-color: var(--lime); }
.stat__value { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; display: block; line-height: 1.05; }
.stat__label { display: block; margin-top: var(--s-1); }
.stat__basis { display: block; margin-top: var(--s-1); font-size: var(--step--1); color: var(--ink-60); }
.section--ink .stat__basis { color: #C6CDCF; }

/* ---------- logos ---------- */
.logos { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; list-style: none; padding: 0; margin: 0; }
.logos li { display: flex; flex-direction: column; gap: 0.35em; align-items: flex-start; }
.logos img { max-height: 42px; width: auto; }
.logos .name { font-size: var(--step--1); font-weight: 600; }
.logos .sector { font-size: var(--step--1); color: var(--ink-60); }

/* ---------- quotes ---------- */
.quote { border-left: 4px solid var(--lime); padding-left: var(--s-3); }
.quote blockquote { margin: 0 0 var(--s-2); font-size: var(--step-1); line-height: 1.45; }
.quote figcaption { display: flex; align-items: center; gap: var(--s-2); font-size: var(--step--1); }
.quote img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

/* ---------- prose lists ---------- */
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.6em; margin-bottom: var(--s-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.75em; height: 0.75em; background: var(--lime); border-radius: 2px; }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: var(--s-3); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--step--1);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; }
.chips li {
  font-family: var(--font-mono); font-size: var(--step--1);
  border: 1px solid var(--rule); background: var(--surface);
  padding: 0.35em 0.7em; border-radius: 999px;
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 0.7em 0.9em; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-display); background: var(--ink); color: var(--white); }

/* ---------- forms ---------- */
.form { max-width: 42rem; }
.field { margin-bottom: var(--s-3); }
.field label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.field .hint { display: block; font-size: var(--step--1); color: var(--ink-60); margin-bottom: 0.4em; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--step-0);
  padding: 0.7em 0.85em; border: 2px solid var(--ink-60);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 9rem; resize: vertical; }
.req { color: var(--danger); }
.form__note {
  /* The prototype rendered this at ~42% white on ink (~4.06:1 at 12px), below
     the 4.5:1 required for small text. This is full-size body copy at 5.9:1. */
  font-size: var(--step--1); color: var(--ink-60); max-width: 42rem;
}
.form__status { padding: var(--s-3); border-radius: var(--radius); margin-bottom: var(--s-3); border: 2px solid; }
.form__status--ok { border-color: var(--success); color: var(--success); background: #EFF6F1; }
.form__status--err { border-color: var(--danger); color: var(--danger); background: #FBF0F0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: var(--s-6) var(--s-4); }
.footer a { color: var(--paper); }
.footer h2 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); font-weight: 500; color: var(--lime); margin-bottom: var(--s-2); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.45em; }
.footer__grid { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__base {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--step--1); color: #C6CDCF;
}

/* ---------- WhatsApp float ---------- */
.whatsapp {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--ink); color: var(--white);
  padding: 0.8em 1.1em; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: var(--step--1);
  box-shadow: 0 8px 22px rgba(17,26,29,0.28);
}
.whatsapp:hover { background: #000; }

/* ---------- editorial notice (drafts / unfilled placeholders) ---------- */
.notice {
  border: 2px dashed var(--danger); background: #FBF0F0; color: var(--ink);
  padding: var(--s-3); border-radius: var(--radius); margin-bottom: var(--s-4);
}
.notice strong { color: var(--danger); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: var(--step--1); color: var(--ink-60); margin-bottom: var(--s-3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: 0.5em; color: var(--rule); }

@media print {
  .header, .footer, .whatsapp, .skip { display: none; }
  body { background: #fff; }
}