/* Oric64 site layer.
   The prototypes in the handoff carried their styling inline, an artefact of the
   design tool. Every one of those declarations lives here instead, as a class.
   Colours, fonts, spacing and radii come from industry.css tokens; nothing in
   this file hard-codes a value the design system already carries.
   Media queries express the three breakpoints the handoff called for: nav
   collapse below 480px, hero lockup below 620px, stack table below 720px. */

:root {
  /* Two muted steps the pages use over and over: body copy inside cards, and
     small furniture text (footer, captions, field labels, form notes). */
  --site-body-muted: color-mix(in srgb, var(--color-text) 78%, transparent);
  --site-furniture: color-mix(in srgb, var(--color-text) 70%, transparent);

  --site-gutter: clamp(20px, 5vw, 72px);
  --site-measure: 1200px;
  --site-section-gap: clamp(48px, 7vw, 88px);
}

/* ── base ──────────────────────────────────────────────────────────────── */

body { margin: 0; text-wrap: pretty; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }

/* The About page is the smooth-scroll target of every "Get in touch" link. */
html[data-page="about"] { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html[data-page="about"] { scroll-behavior: auto; }
}

.skip-link {
  position: absolute; left: var(--space-2); top: var(--space-2);
  z-index: 10; padding: var(--space-2) var(--space-3);
  background: var(--color-accent-900); color: var(--color-bg);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--color-bg); }

.shell { min-height: 100vh; }

.page {
  max-width: var(--site-measure);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}

/* ── shell: nav ────────────────────────────────────────────────────────── */

.site-nav { padding-inline: var(--site-gutter); flex-wrap: wrap; row-gap: 8px; }
.site-nav .nav-brand {
  color: inherit; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.site-nav .nav-brand svg { display: block; flex: none; }

/* The system's .btn is inline-flex with white-space:normal, so labels wrap
   inside nav and action rows unless this is set. */
.btn { white-space: nowrap; flex: none; }

/* Below 480px the brand takes its own line and the links wrap beneath it,
   rather than the row squeezing to one item per line. */
@media (max-width: 480px) {
  .site-nav { column-gap: var(--space-3); row-gap: 12px; }
  .site-nav .nav-brand { flex: 1 0 100%; margin-right: 0; }
}

/* ── shell: banner band ────────────────────────────────────────────────── */

.banner {
  position: relative;
  height: clamp(108px, 14vw, 180px);
  background: var(--color-accent-900);
  overflow: hidden;
}
.banner svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── shell: footer ─────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: 32px 0 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--site-furniture);
}
.footer-heading {
  display: block;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text);
}

/* ── sections and their furniture ──────────────────────────────────────── */

.section { padding: 0 0 var(--site-section-gap); }
.section-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 5vw, 56px); }
.section-hero-home { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); }

.kicker {
  display: block;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 12px;
}
/* Inside an accent-900 field the kicker cannot take the accent, so it steps
   back with opacity against the reversed type instead. */
.kicker-reversed { color: inherit; opacity: 0.8; margin-bottom: 16px; }
/* The tighter kicker that sits inside a card, above its title. */
.kicker-card { letter-spacing: 0.1em; margin-bottom: 8px; }

.rule { height: 1px; border: 0; margin: 0 0 24px; background: var(--color-divider); }
.rule-wide { margin-bottom: 32px; }

/* ── grids ─────────────────────────────────────────────────────────────── */

/* One intrinsic grid; each use sets its own track minimum and gap.
   The min() guard matters: a bare minmax(300px, 1fr) keeps forcing 300px
   tracks in a column narrower than that, which pushes the page sideways on a
   small phone. Capping the minimum at 100% lets the track collapse instead. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
  gap: var(--grid-gap, clamp(24px, 3vw, 48px));
}
.grid-capability { --grid-min: 260px; }
.grid-cards      { --grid-min: 300px; }
.grid-trio       { --grid-min: 240px; }
.grid-columns    { --grid-min: 300px; --grid-gap: clamp(24px, 4vw, 64px); }
.grid-split      { --grid-min: 280px; --grid-gap: clamp(24px, 4vw, 64px); align-items: start; }
.grid-plain      { --grid-min: 240px; --grid-gap: 32px clamp(24px, 4vw, 64px); }

/* ── home hero ─────────────────────────────────────────────────────────── */

.hero-row {
  display: flex; align-items: center;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}
.hero-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; max-width: 22ch; flex: 1 1 340px;
}
.hero-title span { display: block; }

/* The lockup is either full size or absent — never a clipped intermediate.
   Below 620px the nav mark already carries the brand. */
.hero-lockup {
  flex: 0 0 auto;
  display: grid; justify-items: center; gap: 16px;
  container-type: inline-size;
  width: min(280px, 26vw);
}
.hero-lockup svg { display: block; width: 100%; height: auto; }
.hero-lockup-word {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: min(15cqw, 42px);
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
@media (max-width: 620px) {
  .hero-lockup { display: none; }
}

/* The 40px floor of the hero clamp is wider than a very narrow column can
   hold — "specification." on its own measures more than the content width, and
   a flex item will not shrink below its longest word. Step the floor down
   rather than let the page scroll sideways. */
@media (max-width: 400px) {
  .hero-title { font-size: clamp(30px, 9vw, 40px); }
  .page-title { font-size: clamp(28px, 8.5vw, 34px); }
}

/* ── page headings and copy ────────────────────────────────────────────── */

.page-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 5.5vw, 72px);
  line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; max-width: 24ch;
}
.page-title-narrow { max-width: 22ch; }

.lead { font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 24px 0 0; }
.section-hero-home .lead { margin-top: 28px; }

.section-title {
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0;
}
.section-body {
  font-size: 16px; line-height: 1.65; max-width: 60ch;
  margin: 16px 0 0; color: var(--site-body-muted);
}

.prose { font-size: 16px; line-height: 1.7; margin: 0; max-width: 60ch; }
.prose + .prose { margin-top: 20px; }
.section-title + .prose { margin-top: 20px; }
/* The About hero's two side-by-side paragraphs sit below the h1. */
.about-intro { margin-top: 32px; }
.prose-muted { color: var(--site-body-muted); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.actions-roomy { margin-top: 32px; }

/* ── panels (blueprint frames) ─────────────────────────────────────────── */

.panel { padding: 24px; }
.panel-title {
  font-size: 24px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0;
}
.panel-title-md { font-size: 22px; line-height: 1.2; }
.panel-title-sm { font-size: 20px; }
.panel-body {
  font-size: 15px; line-height: 1.6;
  margin: var(--panel-body-gap, 14px) 0 0;
  color: var(--site-body-muted);
}
.panel-body-roomy { --panel-body-gap: 16px; }

/* Unframed text blocks — the home "where we work" cells. */
.block-title { font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.block-body {
  font-size: 15px; line-height: 1.6; margin: 12px 0 0;
  color: var(--site-body-muted);
}

/* ── the accent-900 full field ─────────────────────────────────────────── */

.field-block {
  padding: clamp(24px, 4vw, 48px);
  background: var(--color-accent-900);
  color: var(--color-bg);
  border-color: var(--color-accent-900);
}
.field-title {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0; max-width: 30ch;
}
.field-title-wide { font-size: clamp(24px, 3vw, 36px); max-width: 34ch; }
.field-body {
  font-size: 16px; line-height: 1.65; max-width: 62ch;
  margin: 20px 0 0; opacity: 0.9;
}
.field-body-narrow { max-width: 60ch; }
/* The one button that sits on the field: reversed out of it. */
.btn-reversed {
  background: var(--color-bg);
  color: var(--color-accent-900);
  border-color: var(--color-bg);
}
.btn-reversed:hover { background: var(--color-accent-200); color: var(--color-accent-900); }
.btn-reversed:active { background: var(--color-accent-300); }
.field-block :focus-visible { outline-color: var(--color-bg); }

/* ── organisation chips ────────────────────────────────────────────────── */

.chip-intro {
  font-size: 16px; line-height: 1.65; max-width: 62ch;
  margin: 0 0 28px; color: var(--site-body-muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── the stack table ───────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; max-width: 100%; }
.stack-table { table-layout: fixed; min-width: 620px; }
.stack-table th { padding: 12px 24px; }
.stack-table th:first-child { width: 26%; }
.stack-table th:last-child { padding-left: 0; }
.stack-table td { padding: 14px 24px; font-size: 15px; }
.stack-table td:last-child { padding-left: 0; }
.stack-layer {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em;
}

/* Below 720px the two columns stack per row instead of scrolling sideways:
   the layer name becomes a label above its technologies. */
@media (max-width: 720px) {
  .table-scroll { overflow-x: visible; }
  .stack-table { min-width: 0; display: block; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack-table tbody, .stack-table tr, .stack-table td { display: block; }
  .stack-table tr { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
  .stack-table tr:last-child { border-bottom: 0; }
  .stack-table td { border-bottom: 0; padding: 0 20px; }
  .stack-table td:first-child { padding-top: 18px; }
  .stack-table td:last-child { padding-bottom: 18px; padding-top: 6px; }
}

/* ── about: the mark panel ─────────────────────────────────────────────── */

.figure-panel {
  padding: 24px; align-self: stretch;
  display: grid; align-content: center; justify-items: center; gap: 20px;
  min-height: 220px;
}
.figure-panel svg { display: block; }
.figure-caption {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--site-furniture);
  text-align: center;
}

/* ── contact ───────────────────────────────────────────────────────────── */

.contact-panel { padding: clamp(20px, 3vw, 32px); }
.contact-title {
  font-size: 24px; text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0 0 20px;
}
.contact-form { display: grid; gap: 16px; }
.contact-form .field { display: grid; gap: 6px; }
.field-caption {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.contact-form .input { min-height: 38px; }
.contact-form textarea.input {
  resize: vertical; font-family: var(--font-body);
  line-height: 1.6; padding: 10px 12px;
}
/* Honeypot: off-screen, out of the tab order, hidden from assistive tech.
   display:none is skipped by some bots, so it is positioned away instead. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note { font-size: 13px; line-height: 1.6; color: var(--site-furniture); }
.form-message { font-size: 15px; line-height: 1.7; margin: 0; }
.form-message-error { margin-bottom: 16px; color: var(--color-accent-900); }

.contact-details { margin: 0; display: grid; gap: 24px; }
.contact-details dt {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--site-furniture);
}
.contact-details dd { margin: 6px 0 0; font-size: 17px; line-height: 1.6; }