/* ==========================================================================
   ARSAVIVA — stylesheet v2

   Design rules this file enforces. Read before editing.

   1. COLOUR DISCIPLINE. Three colours, sampled from the logo file:
        white   #FFFFFF   the surface for most of the site
        ink     #373643   all text, all dark bands
        orange  #FD7709   primary buttons, active nav, link arrows. Nothing else.
      Every grey is a tint of ink, so nothing drifts into a second neutral.
      Orange should appear roughly three times on a screen. If you are adding
      a fourth, use ink or a border instead.

   2. RESTRAINED TYPE. Roboto only. Headings top out at 40px and use normal
      letter-spacing. Large display type with tight tracking reads consumer;
      enterprise reads smaller, denser and quieter.

   3. STRUCTURE OVER DECORATION. Hairline rules, aligned columns and tables
      carry the hierarchy. Radius is 3px everywhere. No shadows except the
      header on scroll. No animation.
   ========================================================================== */

:root {
  --paper:      #FFFFFF;
  --ink:        #373643;
  --ink-dark:   #2C2B36;
  --orange:     #FD7709;
  --orange-dk:  #DF6603;

  --text:       #373643;
  --text-2:     #55545F;
  --muted:      #6E6D79;
  --faint:      #96959F;

  --surface:    #F6F7F9;
  --surface-2:  #EEEFF2;
  --line:       #E0E1E6;
  --line-2:     #CFD0D7;
  --line-dark:  rgba(255,255,255,.16);

  --radius:     3px;
  --wrap:       1200px;
  --pad:        clamp(3.5rem, 6vw, 5.5rem);

  --font: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* --- type ----------------------------------------------------------------- */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(1.95rem, 3.4vw, 2.5rem);  line-height: 1.18; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.25; }
h3 { font-size: 1.0625rem; font-weight: 500; }
h4 { font-size: .9375rem;  font-weight: 500; }

p, li { max-width: 70ch; }
p + p { margin-top: .9rem; }

.lead { font-size: 1.125rem; line-height: 1.65; color: var(--text-2); font-weight: 400; }
.small { font-size: .9375rem; }
.tiny  { font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.muted { color: var(--muted); }
strong { font-weight: 500; color: var(--ink); }

/* Section label: a hairline and a small weighted word. No colour, no caps. */
.eyebrow {
  font-size: .8125rem; font-weight: 500; color: var(--muted);
  padding-bottom: .7rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* --- layout --------------------------------------------------------------- */
.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 2rem); } }

section { padding-block: var(--pad); }
section.tight { padding-block: calc(var(--pad) * .66); }
section.slim  { padding-block: 2.5rem; }
section.slim + section.slim { padding-top: 0; }

.band-tint { background: var(--surface); }
.band-ink  { background: var(--ink); color: #D5D4DC; }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4, .band-ink strong { color: #fff; }
.band-ink .lead, .band-ink p, .band-ink li { color: #C3C2CC; }
.band-ink .eyebrow { color: #9E9DA8; border-bottom-color: var(--line-dark); }
.band-ink .tiny { color: #9E9DA8; }

.sec-head { max-width: 62ch; margin-bottom: 2.5rem; }
.sec-head p { margin-top: .85rem; }

.cols-2 { display: grid; gap: 2rem; }
@media (min-width: 860px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.cols-2-wide { display: grid; gap: 2rem; }
@media (min-width: 960px) { .cols-2-wide { grid-template-columns: 1fr 1.35fr; gap: 4rem; } }

hr.rule { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9375rem; font-weight: 500; letter-spacing: .01em;
  padding: .72rem 1.4rem; border-radius: var(--radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dk); border-color: var(--orange-dk); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.band-ink .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.band-ink .btn-ghost:hover, .hero .btn-ghost:hover, .cta-band .btn-ghost:hover { border-color: #fff; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

/* The only other place orange is allowed: an inline link. */
a.tlink {
  color: var(--ink); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--orange); padding-bottom: 1px;
}
a.tlink:hover { color: var(--orange); }
.band-ink a.tlink { color: #fff; }
.band-ink a.tlink:hover { color: var(--orange); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* --- header --------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: 2rem; height: 68px; }
.brand img { height: 27px; width: auto; }

.nav { display: none; margin-left: auto; align-items: center; height: 100%; }
@media (min-width: 1060px) { .nav { display: flex; } }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  display: flex; align-items: center; gap: .3rem; height: 100%;
  padding: 0 .9rem; font-size: .9375rem; font-weight: 400;
  color: var(--text); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-link:hover { color: var(--orange); }
.nav-link[aria-current] { font-weight: 500; border-bottom-color: var(--orange); }
.nav-link .chev { width: 10px; height: 10px; opacity: .5; }

/* dropdowns sit flush under the header bar, full-bleed for the mega menu */
.drop, .mega {
  position: absolute; top: 100%; background: var(--paper);
  border: 1px solid var(--line); border-top: 0;
  opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s;
  box-shadow: 0 16px 32px -20px rgba(44,43,54,.35);
}
.drop { left: 0; min-width: 260px; padding: .5rem 0; }
.nav-item:hover .drop, .nav-item:focus-within .drop,
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; }
.drop a { display: block; padding: .55rem 1.1rem; font-size: .9375rem; text-decoration: none; color: var(--text-2); }
.drop a:hover { background: var(--surface); color: var(--ink); }
.drop .sep { border-top: 1px solid var(--line); margin: .45rem 0; }

.mega { left: 50%; transform: translateX(-50%); width: min(96vw, 1000px); padding: 2rem; }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.mega-col h4 { font-size: .75rem; font-weight: 700; color: var(--ink); margin-bottom: .75rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.mega-col a { display: block; padding: .3rem 0; font-size: .875rem; color: var(--text-2); text-decoration: none; line-height: 1.45; }
.mega-col a:hover { color: var(--orange); }
.mega-foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.head-cta { display: none; margin-left: 1.25rem; }
@media (min-width: 1060px) { .head-cta { display: inline-flex; } }

.burger { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; }
@media (min-width: 1060px) { .burger { display: none; } }
.burger span { display: block; width: 17px; height: 1px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 17px; height: 1px; background: var(--ink); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }

.mnav { position: fixed; inset: 68px 0 0; background: var(--paper); z-index: 55; display: none; flex-direction: column; }
.mnav.open { display: flex; }
.mnav-scroll { flex: 1; overflow-y: auto; padding-bottom: 2rem; }
.mnav-sec { border-bottom: 1px solid var(--line); }
.mnav-sec > button, .mnav-sec > a {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; background: none; border: 0; cursor: pointer;
  font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; text-align: left;
}
.mnav-sec > button .chev { width: 12px; height: 12px; transition: transform .18s; }
.mnav-sec.open > button .chev { transform: rotate(180deg); }
.mnav-panel { display: none; padding-bottom: .8rem; }
.mnav-sec.open .mnav-panel { display: block; }
.mnav-panel h4 { font-size: .75rem; color: var(--muted); margin: .9rem 0 .3rem; font-weight: 500; }
.mnav-panel a { display: block; padding: .42rem 0; color: var(--text-2); font-size: .9375rem; text-decoration: none; }
.mnav-foot { padding: 1.25rem 0; display: grid; gap: .6rem; }
body.locked { overflow: hidden; }

/* --- hero ----------------------------------------------------------------- */
.hero { background: var(--ink); color: #C3C2CC; padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.hero h1 { color: #fff; margin-bottom: 1.35rem; max-width: 20ch; }
.hero .lead { color: #BFBEC9; max-width: 46ch; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }

/* Flat system diagram. Hairlines, no fill, one orange element. No animation. */
.diagram { width: 100%; height: auto; }
.diagram .box { fill: none; stroke: rgba(255,255,255,.28); }
.diagram .hub  { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.diagram .hubmark { fill: var(--orange); }
.diagram .flow { stroke: rgba(255,255,255,.22); stroke-dasharray: 3 4; }
.diagram .lbl  { fill: #D5D4DC; font-family: var(--font); font-size: 12.5px; }
.diagram .hublbl { fill: #fff; font-family: var(--font); font-size: 13px; font-weight: 500; }
.diagram .cap  { fill: #9796A2; font-family: var(--font); font-size: 11.5px; }

/* --- stats strip ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats > div { padding: 1.75rem 1.5rem 1.75rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .stats > div { border-bottom: 0; } }
.stats dt { font-size: 2.125rem; font-weight: 300; color: var(--ink); line-height: 1.1; }
.stats dd { margin: .35rem 0 0; font-size: .875rem; color: var(--muted); max-width: 22ch; line-height: 1.45; }

/* --- client logos --------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px)  { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logos { grid-template-columns: repeat(6, 1fr); } }
.logos div { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 1.5rem 1.25rem; }
.logos img { max-height: 42px; width: auto; filter: grayscale(1); opacity: .68; }

/* --- cards ---------------------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 660px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--paper); padding: 1.75rem 1.6rem; text-decoration: none; color: inherit; display: block; position: relative; }
a.card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: transparent; }
a.card:hover::after { background: var(--orange); }
a.card:hover h3 { color: var(--orange); }
.card-nav { background: var(--surface); display: flex; flex-direction: column; justify-content: center; }
.card-nav h3 { font-weight: 700; }
.card .ic { width: 20px; height: 20px; color: var(--muted); margin-bottom: 1rem; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.band-ink .grid { background: var(--line-dark); border-color: var(--line-dark); }
.band-ink .card { background: var(--ink); }
.band-ink .card p { color: #A9A8B4; }
.band-ink .card .ic { color: #8B8A96; }

/* --- definition rows: used for "what AI does", capabilities, etc. ---------- */
.rows { border-top: 1px solid var(--line); }
.rows > div { display: grid; gap: .4rem 2.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .rows > div { grid-template-columns: 15rem 1fr; } }
.rows h3 { margin: 0; }
.rows p { font-size: .9375rem; color: var(--muted); margin: 0; }
.rows .repl { display: block; margin-top: .55rem; font-size: .8125rem; color: var(--faint); }
.band-ink .rows, .band-ink .rows > div { border-color: var(--line-dark); }
.band-ink .rows p { color: #A9A8B4; }

/* --- compact link list ---------------------------------------------------- */
.list-links { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .list-links { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.list-links a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.list-links a:hover .ll-name { color: var(--orange); }
.ll-name { display: block; font-size: .9375rem; font-weight: 500; }
.ll-desc { display: block; margin-top: .15rem; font-size: .8125rem; color: var(--muted); line-height: 1.5; max-width: 46ch; }

/* --- numbered process ----------------------------------------------------- */
.flow { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line); } }
.flow > li { list-style: none; counter-increment: step; padding: 1.6rem 1.75rem; border-bottom: 1px solid var(--line); max-width: none; }
@media (min-width: 900px) { .flow > li { border-right: 1px solid var(--line); } }
.flow > li::before { content: counter(step, decimal-leading-zero); display: block; font-size: .75rem; font-weight: 500; color: var(--faint); margin-bottom: .6rem; }
.flow h3 { margin-bottom: .35rem; }
.flow p { font-size: .9375rem; color: var(--muted); }
.band-ink .flow, .band-ink .flow > li { border-color: var(--line-dark); }
.band-ink .flow p { color: #A9A8B4; }

/* --- tick lists ----------------------------------------------------------- */
.ticks { list-style: none; padding: 0; display: grid; gap: .8rem; }
.ticks li { position: relative; padding-left: 1.4rem; font-size: .9375rem; color: var(--text-2); max-width: 64ch; break-inside: avoid; }
@media (min-width: 900px) {
  .ticks.two { display: block; column-count: 2; column-gap: 3.5rem; }
  .ticks.two li { margin-bottom: .8rem; max-width: none; }
}
.ticks li::before { content: ''; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; background: var(--line-2); }
.ticks.key li::before { background: var(--orange); }
.band-ink .ticks li { color: #C3C2CC; }
.band-ink .ticks li::before { background: rgba(255,255,255,.35); }

/* --- tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; font-size: .8125rem; color: var(--muted); background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 500; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-size: 1rem; font-weight: 500; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: .5rem; top: 1.7rem; background: var(--muted); transition: opacity .15s; }
.faq summary::before { width: 11px; height: 1px; }
.faq summary::after { width: 1px; height: 11px; right: 1rem; top: 1.45rem; }
.faq details[open] summary::after { opacity: 0; }
.faq .ans { padding: 0 0 1.4rem; }
.faq .ans p { font-size: .9375rem; color: var(--text-2); }

/* --- products ------------------------------------------------------------- */
.prod { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .prod { grid-template-columns: repeat(2, 1fr); } }
.prod > .prod-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prod-card { background: var(--paper); padding: 1.85rem 1.7rem; display: flex; flex-direction: column; }
.prod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.prod-head h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.prod-head .dom { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.prod-card p { font-size: .9375rem; color: var(--muted); flex: 1; }
.prod-card .go { margin-top: 1.2rem; }

/* --- case studies --------------------------------------------------------- */
.case { border: 1px solid var(--line); padding: 1.85rem 1.7rem; background: var(--paper); }
.case .meta { font-size: .8125rem; color: var(--muted); padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.case h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .6rem; }
.case p { font-size: .9375rem; color: var(--muted); }
.case dl { margin-top: 1.1rem; display: grid; gap: .55rem; }
.case dt { font-size: .75rem; color: var(--faint); }
.case dd { margin: 0; font-size: .9375rem; color: var(--text-2); }

/* --- breadcrumbs and page heads ------------------------------------------- */
.crumbs { font-size: .8125rem; color: var(--muted); padding-top: 1.25rem; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--orange); }
.crumbs span { margin: 0 .45rem; color: var(--line-2); }

.phead { padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.phead h1 { margin-bottom: 1rem; max-width: 22ch; }
.phead .lead { max-width: 60ch; }

/* --- prose ---------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.75rem; margin-bottom: .9rem; font-size: 1.375rem; }
.prose h3 { margin-top: 1.75rem; margin-bottom: .5rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15rem; display: grid; gap: .45rem; margin-top: .9rem; }
.prose li { font-size: .9375rem; color: var(--text-2); }

/* --- CTA ------------------------------------------------------------------ */
.cta-band { background: var(--ink); color: #C3C2CC; padding: clamp(2.25rem, 4vw, 3.25rem); }
.cta-band h2 { color: #fff; margin-bottom: .9rem; }
.cta-band p { color: #BFBEC9; max-width: 58ch; }
.callout { border: 1px solid var(--line); border-left: 2px solid var(--orange); padding: 1.4rem 1.6rem; background: var(--surface); }
.callout h3 { margin-bottom: .4rem; }
.callout p { font-size: .9375rem; color: var(--text-2); }

/* --- forms ---------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.f-row { display: grid; gap: 1.15rem; }
@media (min-width: 680px) { .f-row { grid-template-columns: 1fr 1fr; } }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; color: var(--ink); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; font-family: var(--font); font-size: .9375rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.notice { padding: 1.1rem 1.25rem; border: 1px solid var(--line); font-size: .9375rem; background: var(--surface); }
.notice-ok { border-left: 2px solid var(--orange); }

/* --- contact detail rows -------------------------------------------------- */
.detail { border-top: 1px solid var(--line); }
.detail > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.detail dt { font-size: .75rem; color: var(--faint); }
.detail dd { margin: 0; font-size: .9375rem; }
.detail dd a { text-decoration: none; font-weight: 500; }
.detail dd a:hover { color: var(--orange); }

/* --- footer --------------------------------------------------------------- */
.site-foot { background: var(--ink); color: #A9A8B4; padding-block: clamp(3rem, 5vw, 4rem) 1.75rem; font-size: .875rem; }
.foot-top { display: grid; gap: 2.5rem; padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1.2fr 1fr; } }
.foot-brand img { height: 34px; width: auto; }
.foot-brand p { margin-top: 1rem; color: #A9A8B4; max-width: 44ch; font-size: .875rem; }
.foot-contact { display: grid; gap: .45rem; }
.foot-contact a { color: #fff; text-decoration: none; }
.foot-contact a:hover { color: var(--orange); }
.foot-contact span { color: #A9A8B4; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 780px)  { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .foot-grid { grid-template-columns: repeat(5, 1fr); } }
.foot-grid h4 { color: #fff; font-size: .8125rem; font-weight: 500; margin-bottom: .9rem; }
.foot-grid a { display: block; padding: .25rem 0; color: #A9A8B4; text-decoration: none; }
.foot-grid a:hover { color: var(--orange); }
.foot-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: space-between; font-size: .8125rem; color: #8B8A96; }
.foot-bottom a { color: #8B8A96; text-decoration: none; }
.foot-bottom a:hover { color: var(--orange); }
.foot-social { display: flex; gap: 1rem; }
.foot-social a { color: #A9A8B4; }
.foot-social svg { width: 17px; height: 17px; }
.foot-social a:hover { color: var(--orange); }

/* --- utilities ------------------------------------------------------------ */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .7rem 1rem; border: 1px solid var(--ink); }
.mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.nowrap { white-space: nowrap; }

/* ==========================================================================
   MOTION AND ILLUSTRATION
   --------------------------------------------------------------------------
   Rules that keep this from tipping back into looking amateur:
     • One kind of entrance, used everywhere: 10px rise and a fade, 500ms.
       Never bounce, never scale, never slide in from the side.
     • Each element animates once, on first sight, and is then left alone.
     • Stagger is capped at 4 steps of 60ms. Long cascades draw attention to
       the animation rather than the content.
     • Hover states change one property. Nothing lifts off the page.
     • Everything here is disabled by prefers-reduced-motion, in one block at
       the bottom of this file.
   ========================================================================== */

.js .reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.6,.3,1); }
.reveal.d1.in { transition-delay: .06s; }
.reveal.d2.in { transition-delay: .12s; }
.reveal.d3.in { transition-delay: .18s; }

/* Grid children stagger by column, so a row reads left to right. */
.js .grid .card { opacity: 0; transform: translateY(10px); }
.grid.in .card { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.6,.3,1); }
.grid.in .card:nth-child(4n+2) { transition-delay: .05s; }
.grid.in .card:nth-child(4n+3) { transition-delay: .1s; }
.grid.in .card:nth-child(4n+4) { transition-delay: .15s; }

/* --- hero: one orchestrated sequence, on load only ------------------------ */
.js .diagram .d-box, .js .diagram .d-lbl { opacity: 0; animation: fade-in .5s ease forwards; }
.diagram .d-box:nth-of-type(n), .diagram .d-lbl:nth-of-type(n) { animation-delay: .15s; }
.diagram .s2 { animation-delay: .25s; } .diagram .s3 { animation-delay: .35s; }
.diagram .s4 { animation-delay: .45s; } .diagram .s5 { animation-delay: .55s; }
.diagram .s6 { animation-delay: .65s; }
.js .diagram .flow { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1s ease .8s forwards; }
.js .diagram .hub, .js .diagram .hubmark, .js .diagram .hublbl { opacity: 0; animation: fade-in .5s ease 1.5s forwards; }
.js .diagram .cap { opacity: 0; animation: fade-in .5s ease 1.9s forwards; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- icons get a tile, so they read as part of the structure -------------- */
.ic-tile {
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
  transition: border-color .18s, background-color .18s;
}
.ic-tile svg { width: 19px; height: 19px; color: var(--ink); }
a.card:hover .ic-tile { border-color: var(--orange); background: var(--orange-tint, #FFF3E8); }
a.card:hover .ic-tile svg { color: var(--orange); }
.band-ink .ic-tile { border-color: var(--line-dark); }
.band-ink .ic-tile svg { color: #fff; }
.flow .ic-tile { width: 34px; height: 34px; margin-bottom: .85rem; }
.flow .ic-tile svg { width: 16px; height: 16px; }

/* --- client logos: colour on hover ---------------------------------------- */
.logos img { transition: filter .25s ease, opacity .25s ease; }
.logos div:hover img { filter: grayscale(0); opacity: 1; }

/* --- illustrations -------------------------------------------------------- */
.viz { width: 100%; height: auto; }
.viz-panel  { fill: #fff; stroke: var(--line); stroke-width: 1; }
.viz-fill   { fill: var(--surface); }
.viz-sheet  { fill: #fff; stroke: var(--line); stroke-width: 1; }
.viz-card   { fill: #fff; stroke: var(--line); stroke-width: 1; }
.viz-thumb  { fill: var(--surface-2); }
.viz-line, .viz-grid { stroke: var(--line); stroke-width: 1; }
.viz-divider { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-dot    { fill: var(--line-2); }
.viz-bar    { fill: var(--surface-2); }
.viz-bar.strong { fill: #CFD0D7; }
.viz-col    { fill: var(--surface-2); }
.viz-accent { fill: var(--orange); }
.viz-accent-dot { fill: var(--orange); }
.viz-arrow  { stroke: var(--line-2); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz-connect{ stroke: var(--line-2); stroke-width: 1; fill: none; }
.viz-node-box { fill: #fff; stroke: var(--line); stroke-width: 1; }
.viz-node   { fill: #fff; stroke: var(--muted); stroke-width: 1.4; }
.viz-plot   { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.viz-plot.forecast { stroke: var(--orange); stroke-dasharray: 4 3; }
.viz-bubble { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.viz-bubble.out { fill: #fff; stroke: var(--line-2); }
.viz text  { font-family: var(--font); }
.viz-title { fill: var(--muted); font-size: 12px; }
.viz-label { fill: var(--faint); font-size: 11px; }
.viz-label.accent, .viz-value.accent { fill: var(--orange); }
.viz-value { fill: var(--ink); font-size: 13px; font-weight: 500; }
.viz-value.small { font-size: 11px; }
.viz-stat  { fill: var(--ink); font-size: 17px; font-weight: 500; }
.viz-nav   { fill: var(--muted); font-size: 11.5px; }
.viz-nav.on{ fill: var(--ink); font-weight: 500; }
.viz-nodelbl { fill: var(--ink); font-size: 11.5px; }
.viz-msg   { fill: var(--text-2); font-size: 11.5px; }
.viz-msg.out { fill: var(--ink); }

/* Illustrations draw themselves in once, on first sight. */
.js .viz-wrap .viz { opacity: 0; }
.viz-wrap.in .viz { opacity: 1; transition: opacity .6s ease; }

/* --- about-page timeline -------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 1.75rem 1.75rem; max-width: none; }
.timeline li::before {
  content: ''; position: absolute; left: -4.5px; top: .55rem;
  width: 8px; height: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 50%;
}
.timeline li.now::before { background: var(--orange); border-color: var(--orange); }
.timeline li:last-child { padding-bottom: 0; }
.t-year { display: block; font-size: .75rem; color: var(--faint); margin-bottom: .15rem; }
.t-text { display: block; font-size: .9375rem; color: var(--text-2); }
.timeline li.now .t-text { color: var(--ink); font-weight: 500; }

/* --- stat counters -------------------------------------------------------- */
.stats dt { font-variant-numeric: tabular-nums; }

/* --- dark bands get a faint grid, so they read as a surface --------------- */
.band-ink, .hero {
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
}

/* --- everything above, switched off for anyone who asked ------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .grid .card, .viz-wrap .viz { opacity: 1 !important; transform: none !important; }
  .diagram .d-box, .diagram .d-lbl, .diagram .hub, .diagram .hubmark,
  .diagram .hublbl, .diagram .cap { opacity: 1 !important; animation: none !important; }
  .diagram .flow { stroke-dashoffset: 0 !important; animation: none !important; }
}