/*
  Amadis Consulting: high-tech holding page.
  Concept: an engineering drawing. Cool white sheet, faint drafting grid, ultramarine ink, crop marks
  at the corners. The one bold element is the pixel tessera logo (two interlocking halves), which
  assembles once on load. Everything is centred on a single column.
*/
:root {
  --sheet: #f4f6fb;          /* drawing sheet */
  --grid: #dfe5f2;           /* drafting grid */
  --ink: #0f1b3d;            /* deep navy text */
  --muted: #56617d;          /* secondary text */
  --ultramarine: #2340d8;    /* accent ink */
  --rule: #c9d2e6;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --sheet: #0b1022; --grid: #17203d; --ink: #e7ecfa; --muted: #98a3c2; --ultramarine: #7d93ff; --rule: #26305a; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}
.page {
  position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  gap: clamp(1.25rem, 4vh, 2.5rem); max-width: 46rem; margin: 0 auto;
  padding: clamp(1.5rem, 6vh, 3.5rem) clamp(1.25rem, 5vw, 2.5rem) clamp(1rem, 3vh, 1.75rem); text-align: center;
}
/* crop marks at the sheet corners */
.page::before, .page::after { content: ""; position: fixed; width: 18px; height: 18px; border: 1.5px solid var(--ultramarine); opacity: .55; pointer-events: none; }
.page::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.page::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* the mini logo */
.logo { display: grid; justify-items: center; gap: .7rem; }
.mark { width: 56px; height: 56px; }
.px.a { fill: var(--ultramarine); }
.px.b { fill: var(--ink); }
.wordmark { margin: 0; font: 700 .95rem/1 var(--mono); letter-spacing: .32em; padding-left: .32em; }
.wordmark span { display: block; margin-top: .45rem; font-weight: 400; font-size: .68rem; letter-spacing: .5em; padding-left: .5em; color: var(--muted); }

main { align-self: center; width: 100%; }
h1 { margin: 0 auto 1rem; max-width: 18ch; font: 700 clamp(2rem, 5.2vw, 3.1rem)/1.08 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.lede { margin: 0 auto 2rem; max-width: 36rem; color: var(--muted); text-wrap: pretty; }

.services { margin: 0 auto; max-width: 40rem; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); background: color-mix(in srgb, var(--sheet) 88%, transparent); text-align: left; }
.services div { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); }
.services div:nth-child(odd) { border-right: 1px solid var(--rule); }
.services div:nth-last-child(-n+2) { border-bottom: 0; }
.services dt { font: 600 .98rem/1.35 var(--sans); margin-bottom: .25rem; }
.services dt::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ultramarine); margin-right: .55rem; vertical-align: .12em; }
.services dd { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }
@media (max-width: 600px) {
  .services { grid-template-columns: 1fr; }
  .services div:nth-child(odd) { border-right: 0; }
  .services div:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}

a { color: var(--ultramarine); text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 4px; }

footer p { margin: 0; color: var(--muted); font: 400 .78rem/1.4 var(--mono); letter-spacing: .04em; }

/* the one moment: the logo's pixels assemble on load */
@media (prefers-reduced-motion: no-preference) {
  .px { animation: pixel-in .38s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
  @keyframes pixel-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
}