/* Hedron v8 — Blueprint / schematic. Graph-paper grid, technical drawing cues, node diagram.
   Leans into the "hedron" polyhedron idea: the site is drawn, not just laid out. */

:root {
  /* Canonical page background, consumed by portfolio.css */
  --page-bg: #F4F8FC;
  --orange: #F27110;
  --orange-dark: #C25808;
  --ink: #0F1B2D;
  --body: #46586f;
  --muted: #8397ae;
  --line: #ccd7e4;
  --line-soft: #e3ebf3;
  --bg: #F4F8FC;
  --panel: #ffffff;
  --maxw: 1200px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Liberation Sans", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono",
          "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; color: var(--body); font-family: var(--sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  /* Graph paper: fine 20px grid over a heavier 100px grid */
  background-image:
    linear-gradient(rgba(15,27,45,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,27,45,.045) 1px, transparent 1px),
    linear-gradient(rgba(15,27,45,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,27,45,.075) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.025em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1.1em; }
a { color: var(--orange-dark); }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 100; }
.skip:focus { left: 0; }


/* Technical drawing label: [ 01 · SECTION ] */
.spec {
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-dark); margin: 0 0 16px;
}
.spec::before { content: "[ "; color: var(--muted); }
.spec::after  { content: " ]"; color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,248,252,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand svg { width: 31px; height: 31px; color: var(--orange); }
.brand span { font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; }
.site-header nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-header nav a { font-family: var(--mono); font-size: .82rem; text-decoration: none; color: var(--body); }
.site-header nav a:hover { color: var(--orange-dark); }

.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--ink); color: #fff; font-weight: 600; font-size: .9rem;
  padding: 12px 22px; border-radius: 4px; transition: background .15s ease;
}
.btn:hover { background: var(--orange-dark); color: #fff; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-line:hover { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--orange); }

section { padding: 88px 0; }

/* Panels look like drawing sheets pinned to the blueprint */
.sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  position: relative; padding: 40px;
}
/* Corner ticks — the drafting detail that sells the metaphor */
.sheet::before, .sheet::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--orange);
}
.sheet::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.sheet::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- Hero ---------- */
.hero { padding: 84px 0; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.lede { font-size: 1.15rem; max-width: 52ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Scope-of-work diagram: the four disciplines around the system they support */
.diagram { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 26px; }
.diagram svg { width: 100%; height: auto; }
.diagram figcaption {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}

/* ---------- Services ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* The monitoring and RAG cards carry more copy than the other two. Aligning the
   headings on a shared baseline keeps the row reading as a set rather than four
   ragged columns. */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 26px 22px;
  transition: border-color .16s ease, transform .16s ease;
  display: grid; grid-template-rows: auto auto 1fr; align-content: start;
}
/* Two of the four titles wrap to a second line; reserving it keeps the body copy
   starting on one baseline across the row. */
.card h3 > span { min-height: 2.5em; }
.card:hover { border-color: var(--orange); transform: translateY(-2px); }
.card .ref { font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: .08em; }
/* Icon sits inline with the title. The grid (rather than flex) keeps the icon on
   the heading's FIRST line when the title wraps to two, instead of centring it
   against the whole block. */
.card h3 {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  align-items: start; margin: 16px 0 0;
}
.card h3 svg { width: 26px; height: 26px; color: var(--orange); margin-top: .08em; }
.card p { margin: 14px 0 0; font-size: .92rem; }

/* ---------- Tech ---------- */
.tech { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tech a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 16px; font-family: var(--mono); font-size: .84rem;
}
.tech a:hover { border-color: var(--orange); color: var(--orange-dark); }
.tech svg { width: 19px; height: 19px; color: var(--orange); }

/* ---------- Customers ---------- */
/* Client names live in each cell's title attribute (tooltip on hover) and in the
   image alt text, so the row stays a clean band of marks.

   Each logo ships twice: a monochrome version (flat --ink on transparency, shown
   at rest) and a colour version (the brand original, revealed on hover). The
   colour art sits as a cell background behind the mono <img>, which fades out on
   hover; the <img> stays the semantic content so alt text is unaffected.
   Untouched originals are in img/_orig/. */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.logos div {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 20px 14px; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: background-color .2s ease, border-color .2s ease;
}
/* colour artwork, revealed as the mono image fades */
.logos div::after {
  content: ""; position: absolute; inset: 20px 14px;
  background-image: var(--logo-color);
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.logos img {
  width: 100%; height: 40px; object-fit: contain;
  opacity: .72; transition: opacity .2s ease;
}
.logos div:hover img    { opacity: 0; }
.logos div:hover::after { opacity: 1; }

/* Optical sizing. Accrue is a stacked mark (shape above a wordmark) so it needs
   more height to read at the same size as the single-line logos; Stylitics is
   sparse letterforms and reads light at the standard height. The ::after inset
   is matched so the colour art lands exactly where the mono art was. */
.logos img[src$="accrue.png"]    { height: 58px; }
.logos img[src$="stylitics.png"] { height: 46px; }
.logos div:has(img[src$="accrue.png"])::after    { inset: 12px 14px; }
.logos div:has(img[src$="stylitics.png"])::after { inset: 17px 14px; }

/* FlyerBEE and Avenue A are light artwork made for dark backgrounds: their
   colour versions need a dark plate on hover to stay legible. */
.logos div:has(img[src$="flyerbee.png"]):hover,
.logos div:has(img[src$="myavenuea.png"]):hover {
  background-color: var(--ink); border-color: var(--ink);
}

/* Liveness note in the About sheet — reads as a revision annotation on the drawing. */
.now {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px dashed var(--line);
  font-size: .95rem;
}
.now span {
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-dark); display: block; margin-bottom: 6px;
}

/* ---------- About ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

.contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* .btn is already inline-flex with a gap, so icons just need a size. */
.contact-row .btn svg { width: 18px; height: 18px; flex: none; }
.site-footer { border-top: 1px solid var(--line); padding: 30px 0; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }

/* Cards go two-up earlier than the rest of the layout reflows: the monitoring and
   RAG copy needs more measure than a quarter of a 1100px canvas gives it. */
@media (max-width: 1120px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .card h3 > span { min-height: 0; }
}
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 36px; }
  .logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  section { padding: 58px 0; }
  .site-header nav { display: none; }
  .grid-4 { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .sheet { padding: 26px 20px; }
  /* Give the hero diagram the full card width on small screens; its labels are
     SVG text and shrink with the viewBox. */
  .diagram { padding: 16px 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }