/* ==========================================================================
   Maven Pro, self-hosted. One variable file covering 400-900, subset to the
   Latin range - 16 kB against three round trips to Google Fonts, and no
   third-party request from the site at all.
   Regenerate with ../../branding/generate-assets.py
   ========================================================================== */

@font-face {
  font-family: "Maven Pro";
  src: url("assets/fonts/maven-pro-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Pixworks - prototype stylesheet
   Palette: Slate Teal #2F4F4F | Energizing Amber #FFBF00
            Light Silver #D3D3D3 | Soft White #F8F8F8
   Type:    Maven Pro (Google Fonts), the brand face
   Motif:   a 26px pixel grid (24px cell + 2px gap, from the pixel studies)
   ========================================================================== */

:root {
  --teal: #2F4F4F;
  --teal-700: #24403f;
  --teal-900: #1b3130;
  --amber: #FFBF00;
  --amber-600: #e0a800;
  --silver: #D3D3D3;
  --soft-white: #F8F8F8;
  --white: #fff;

  --ink: #223a3a;
  --ink-muted: #5c7070;
  --line: #e2e6e5;

  --cell: 26px;                   /* the pixel grid unit */
  --shell: 1180px;
  --radius: 4px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: "Maven Pro", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--soft-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* the faint pixel grid that everything sits on */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(47,79,79,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47,79,79,.045) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 78%);
}

body > * { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0;
}

p { margin: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.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 {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--teal); color: var(--soft-white);
  padding: 10px 16px; border-radius: var(--radius);
  text-decoration: none; font-weight: 700;
  transition: top .18s var(--ease);
}
.skip:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------- wordmark ----- */
/* Custom P (inline SVG) + "ixworks" set in Maven Pro ExtraBold.            */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--teal);
  font-size: 30px;
}

.wordmark .mark {
  width: .577em;              /* 85/106 - the mark's own aspect ratio */
  height: .72em;              /* Maven Pro cap height */
  flex: none;
  align-self: baseline;
  transform: translateY(.005em);
}

.wordmark-text {
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -.018em;
  margin-left: .035em;
  line-height: 1;
}

.wordmark .aperture, .wordmark rect { transition: fill .25s var(--ease); }
.wordmark:hover rect { fill: var(--amber-600); }

/* ----------------------------------------------------------- buttons ---- */

.btn {
  --btn-bg: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}

.btn-amber:hover { background: var(--amber-600); transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(47,79,79,.5); }

/* the ghost button only ever sits on the teal hero */
.btn-ghost {
  background: transparent;
  border-color: rgba(248,248,248,.34);
  color: var(--soft-white);
}
.btn-ghost:hover { border-color: var(--soft-white); background: rgba(248,248,248,.09); }

.btn-sm { padding: 10px 18px; font-size: 14px; }

/* U+2192 is not in Maven Pro, so the arrow is drawn rather than typed */
.arrow {
  width: .95em;
  height: .95em;
  flex: none;
  transition: transform .22s var(--ease);
}
.btn:hover .arrow, .card-link:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------ header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--teal);   /* solid, or it reads lighter than the hero */
  border-bottom: 1px solid transparent;
}

.site-header .wordmark { color: var(--soft-white); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.site-header .wordmark { font-size: 30px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: rgba(248,248,248,.84);
  position: relative;
  padding-block: 4px;
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }
.site-nav a:not(.btn):hover { color: var(--soft-white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 9px;
  background: none;
  border: 1px solid rgba(248,248,248,.28);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--soft-white); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav[hidden] { display: none; }

.mobile-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(248,248,248,.14);
  background: var(--teal);
}
.mobile-nav a {
  padding: 15px 24px;
  text-decoration: none;
  font-weight: 600;
  color: var(--soft-white);
  border-bottom: 1px solid rgba(248,248,248,.14);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- hero ---- */

.hero {
  padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: rgba(248,248,248,.82);
}

/* the pixel grid, brighter, as on the contact band */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(248,248,248,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(248,248,248,.055) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  mask-image: radial-gradient(ellipse 85% 95% at 72% 45%, #000 18%, transparent 76%);
}
.hero > .shell { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(38px, 5.4vw, 60px);
  letter-spacing: -.028em;
  color: var(--soft-white);
}

/* A translucent amber wash goes olive over teal, so on the dark hero the
   highlight is a solid amber rule under the word. The light sections keep
   the wash - see .section .hl below. */
.hl {
  background-image: linear-gradient(var(--amber), var(--amber));
  background-repeat: no-repeat;
  background-size: 100% .16em;
  background-position: 0 calc(100% - .06em);
  padding-inline: .05em;
}

.section .hl {
  background-image: linear-gradient(rgba(255,191,0,.45), rgba(255,191,0,.45));
  background-size: 100% .34em;
  background-position: 0 calc(100% - .1em);
}

.lede {
  margin-top: 22px;
  max-width: 44ch;
  font-size: 17px;
  color: rgba(248,248,248,.76);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.strapline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(248,248,248,.7);
}
.strapline i { width: 5px; height: 5px; background: var(--amber); flex: none; }

/* hero artwork - the mark, its dissolve, and the brand micro-type beside it */
.hero-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: stretch;
}

.art { width: 100%; height: auto; overflow: visible; align-self: center; }

.art-notes {
  display: grid;
  align-content: space-between;
  gap: 32px;
  padding-block: 8%;
}

.art-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(248,248,248,.68);
  line-height: 1.85;
}
.art-note-top::after {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--amber); margin-top: 12px;
}

/* ----------------------------------------------------------- sections --- */

.section { padding: clamp(56px, 7vw, 92px) 0; }

.section-tint {
  background: linear-gradient(180deg, rgba(211,211,211,.22), rgba(211,211,211,.1));
  border-block: 1px solid var(--line);
}

.label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--teal);
}
.label-muted { color: var(--ink-muted); font-weight: 600; }
.label-invert { color: var(--amber); }

.section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head .label { flex: none; }
.section-head .rule { flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--line); }

/* ------------------------------------------------------------- cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  position: relative;
  padding: 30px 28px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--amber);
  border-radius: 6px 6px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(47,79,79,.5); border-color: #d6dcdb; }
.card:hover::before { transform: scaleX(1); }

.card-icon,
.pillar-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: rgba(47,79,79,.07);
  color: var(--teal);
}
.card-icon svg, .pillar-icon svg { width: 22px; height: 22px; }

.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--ink-muted); font-size: 15px; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}
.card-link .arrow { color: var(--amber-600); }
.card-link:hover { color: var(--amber-600); }

/* --------------------------------------------------------- solutions ---- */

.solutions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solutions li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  border-radius: 6px;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.solutions li + li { box-shadow: -1px 0 0 var(--line); }
.solutions li:hover { background: var(--white); transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(47,79,79,.6); }
.solutions svg { width: 30px; height: 30px; stroke: var(--teal); }
.solutions li:hover svg { stroke: var(--amber-600); }

/* ---------------------------------------------------------- approach ---- */

.approach {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: 36px;
}

.approach h2 { font-size: clamp(30px, 3.4vw, 40px); }
.approach-copy p { margin-top: 20px; color: var(--ink-muted); font-size: 16px; max-width: 42ch; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.pillar { padding: 4px 26px; }
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar h3 { font-size: 18px; margin-bottom: 8px; }
.pillar p { color: var(--ink-muted); font-size: 15px; }
.pillar-icon { border-radius: 50%; }

/* ----------------------------------------------------------- contact ---- */

.contact {
  position: relative;
  padding: clamp(56px, 7vw, 84px) 0;
  background: var(--teal);
  color: rgba(248,248,248,.86);
  overflow: hidden;
}

/* pixel grid, brighter, on the dark band */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(248,248,248,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(248,248,248,.055) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  mask-image: radial-gradient(ellipse 70% 100% at 0% 50%, #000 10%, transparent 72%);
}
.contact > * { position: relative; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.contact h2 { color: var(--soft-white); font-size: clamp(30px, 3.6vw, 42px); margin-top: 18px; }
.contact-copy > p { margin-top: 20px; max-width: 40ch; font-size: 16px; }

.amber-rule {
  display: block;
  width: 60px; height: 4px;
  background: var(--amber);
  margin: 26px 0 0;
}

.contact-details {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.contact-details li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.contact-details svg { width: 21px; height: 21px; color: var(--amber); flex: none; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { color: var(--amber); }

/* form */
.form-card {
  background: var(--white);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.6);
  color: var(--ink);
}
.form-card h3 { font-size: 21px; }
.form-sub { margin-top: 6px; font-size: 14px; color: var(--ink-muted); }

form { margin-top: 20px; display: grid; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: block; }

input, textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--soft-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
input::placeholder, textarea::placeholder { color: #93a5a5; }
input:focus, textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(255,191,0,.28);
}
textarea { resize: vertical; min-height: 104px; }

input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #c0392b; }

.form-error { font-size: 14px; font-weight: 600; color: #c0392b; }
.form-note { margin-top: 4px; font-size: 12.5px; color: var(--ink-muted); }
.form-note a { color: var(--teal); }

.form-done[hidden], form[hidden] { display: none; }

.form-done { text-align: center; padding: 22px 6px 6px; display: grid; justify-items: center; gap: 12px; }
.form-done .tick {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,191,0,.2);
  color: var(--teal);
}
.form-done .tick svg { width: 26px; height: 26px; }
.form-done p { font-size: 14.5px; color: var(--ink-muted); max-width: 34ch; }
.form-done a { color: var(--teal); font-weight: 600; }

/* ------------------------------------------------------------ footer ---- */

.site-footer {
  padding: 44px 0 34px;
  background: var(--soft-white);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-muted);
}

.footer-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 36px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.site-footer .wordmark { font-size: 24px; }
.footer-nav { display: flex; gap: 28px; flex: 1; }
.footer-nav a { text-decoration: none; font-weight: 600; color: var(--ink); }
.footer-nav a:hover { color: var(--amber-600); }
.footer-site { font-weight: 600; color: var(--ink); }

.disclosures {
  padding: 22px 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
  line-height: 1.7;
}
.disclosures strong { color: var(--teal); font-weight: 700; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.footer-tag { font-style: italic; }

/* ------------------------------------------------------------ motion ---- */

.reveal { animation: rise .7s var(--ease) both; animation-delay: var(--d, 0ms); }

.px { animation: pop .5s var(--ease) both; animation-delay: var(--d, 0ms); transform-box: fill-box; transform-origin: center; }
.hero-mark { animation: rise .8s var(--ease) both; animation-delay: 120ms; }
.hero-mark path { fill: var(--soft-white); }

/* the deepest golds go muddy on teal - step each up one stop, staying
   inside the palette from logo_pix.json */
.px[fill="#8E7D29"] { fill: #C99B14; }
.px[fill="#C99B14"] { fill: #E0AE1A; }
.aperture { animation: aperture 3.8s var(--ease) 1.3s infinite; transform-box: fill-box; transform-origin: center; }

.reveal-on-scroll {
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.js .reveal-on-scroll { opacity: 0; transform: translateY(18px); }
html.js .reveal-on-scroll.in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes aperture {
  0%, 82%, 100% { transform: none; }
  88%  { transform: scale(1.22); }
  94%  { transform: scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  html.js .reveal-on-scroll { opacity: 1; transform: none; }
}

/* ==========================================================================
   404
   The zero is the mark's own counter: a Soft White aperture with the amber
   square low and left inside it, in the same proportions as the P.
   ========================================================================== */

.notfound {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 62vh;
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--teal);
  color: rgba(248,248,248,.82);
}

.notfound::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(248,248,248,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(248,248,248,.055) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  mask-image: radial-gradient(ellipse 85% 95% at 75% 50%, #000 18%, transparent 76%);
}
.notfound > .shell { position: relative; }

.notfound-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.notfound h1 {
  margin-top: 18px;
  color: var(--soft-white);
  font-size: clamp(34px, 4.6vw, 52px);
}

.notfound .lede { max-width: 42ch; }

.code404 {
  display: flex;
  /* baseline, not centre: an empty flex item's baseline is its bottom edge,
     so the aperture sits on the text baseline exactly as the digits do. The
     digits have no descender, so all three line up without a magic offset. */
  align-items: baseline;
  justify-content: flex-end;
  gap: .05em;
  margin: 0;
  color: var(--soft-white);
  font-size: clamp(88px, 13vw, 190px);
  font-weight: 800;
  line-height: 1;
  /* No letter-spacing: each digit is its own flex item, so tracking would
     only trim the right edge of each span and throw the zero off centre.
     The gap below does the spacing instead. */
  letter-spacing: normal;
}

/* The zero is a ring, not a filled block: on the mark the counter is a hole
   with the background showing through and the amber square sitting inside it.
   Filling it solid turns the aperture into a blob. The amber sits low and
   left in the counter, in the same proportions as the P. */
.code404 .aperture {
  position: relative;
  display: inline-block;
  flex: none;
  /* The 4 carries a 0.0388em left and 0.0315em right sidebearing. The
     aperture has none, so this makes up the 0.0073em difference and centres
     it between the two digits. */
  margin-left: .007em;
  /* Maven Pro ExtraBold: the 4 inks 0.544 x 0.667em, the 0 inks 0.593 x
     0.694em. A hard rectangle carries more visual mass than a round zero at
     the same size, so this sits just under the 4 rather than matching the 0. */
  width: .55em;
  height: .667em;              /* exactly cap height, level with the 4s */
  border: .13em solid var(--soft-white);
  /* Rounded outside, near-square counter - the same construction as the P,
     whose bowl curves while its aperture stays a plain rectangle. The inner
     radius is whatever is left after the border (.2 - .13 = .07em), so the
     counter keeps its corners and the amber square still sits square in it. */
  border-radius: .2em;
  background: transparent;
}
.code404 .aperture::after {
  content: "";
  position: absolute;          /* offsets are from inside the border */
  left: .035em;
  bottom: .035em;
  width: .13em;
  height: .13em;
  background: var(--amber);
}

@media (max-width: 860px) {
  .notfound-grid { grid-template-columns: 1fr; gap: 28px; }
  .code404 { justify-content: flex-start; }
  .notfound h1 br { display: none; }
}

/* ------------------------------------------------------- breakpoints ---- */

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 620px; }
  .approach { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .solutions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solutions li + li { box-shadow: none; }
}

@media (max-width: 720px) {
  .section-head .rule,
  .section-head .label-muted { display: none; }
}

@media (max-width: 860px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .cards { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 26px; }
  .pillar { padding: 0; }
  .pillar + .pillar { border-left: 0; }
}

@media (max-width: 560px) {
  .hero-art { grid-template-columns: 1fr; }
  .art-notes { display: none; }
  .solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-nav { flex-wrap: wrap; gap: 16px; }
  .hero h1 br { display: none; }
}