/* TCPU Solutions — "floorplan": unequal blocks on a strict grid, hairline
   traces, cleanroom grey. One accent, spent in one place. */

@font-face {
  font-family: Archivo;
  src: url(/fonts/archivo-latin-var.woff2) format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #e5e9ed;
  --panel: #fff;
  --ink: #0e1218;
  --ink-2: #525b67;
  --trace: #c3c9d2;
  --iris: #4a1fd4;
  --iris-hot: #e42c6e;
  --frame: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1.5rem, 3.5vw, 3rem);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Archivo, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0 0 .6em; font-weight: 900; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }
h3 { font-size: 1.1rem; line-height: 1.25; letter-spacing: -.012em; }
p { margin: 0 0 1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--iris); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--iris-hot); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: #fff; padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* Frame: continuous hairline rails down the whole page, like a die edge. */
.frame {
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--pad);
  border-inline: 1px solid var(--trace);
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }

/* ---- header ---- */
.head { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid var(--trace); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.mark { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--ink); }
.mark-box {
  position: relative; border: 1.5px solid var(--ink); padding: .12em .42em .16em;
  font-weight: 900; letter-spacing: -.02em; font-size: 1.05rem;
}
.mark-box::before { /* pin-1 dot */
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--iris-hot);
}
.mark-word { color: var(--ink-2); font-weight: 500; }
.nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  padding-block: .25rem; border-bottom: 2px solid transparent;
}
.nav a:hover { border-color: var(--trace); color: var(--ink); }
.nav a[aria-current] { border-color: var(--iris); }

/* ---- sections ---- */
.top { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.top-tall { padding-block: clamp(4rem, 10vw, 8rem); }
.band { padding-block: clamp(2.75rem, 6vw, 5rem); border-top: 1px solid var(--trace); }
.band-alt { background: var(--panel); }
.band-head { margin-bottom: var(--gap); }

/* ---- hero ---- */
.hero-in {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap);
  align-items: center; padding-block: clamp(2.5rem, 6vw, 5.5rem);
}
.hero-say .lead { margin-top: 1.2rem; }
.btn {
  display: inline-block; margin-top: 1.75rem;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
  padding: .8rem 1.4rem; font: inherit; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--iris); border-color: var(--iris); color: #fff; }
.btn-light { background: var(--panel); color: var(--ink); border-color: var(--panel); }
.btn-light:hover { background: var(--iris-hot); border-color: var(--iris-hot); color: #fff; }

/* ---- the floorplan ---- */
.plan {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: repeat(3, minmax(5.5rem, 1fr));
  gap: 1px; background: var(--trace); border: 1px solid var(--trace);
}
.plan-b {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--panel); color: var(--ink); text-decoration: none;
  padding: .9rem 1rem; position: relative;
  transition: background-color .15s;
}
.plan-b:hover { background: #f4f6f8; color: var(--ink); }
.plan-b1 { grid-area: 1 / 1 / 3 / 2; }
.plan-b2 { grid-area: 1 / 2 / 2 / 3; }
.plan-b3 { grid-area: 2 / 2 / 3 / 3; }
.plan-b4 { grid-area: 3 / 1 / 4 / 3; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .9rem; }
/* The core block carries the only iridescence on the page. */
.plan-b1::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--iris), var(--iris-hot));
}
.plan-label { color: var(--ink-2); font-weight: 700; font-size: .82rem; }
.plan-b1 .plan-label { color: var(--iris); }
.plan-title { font-weight: 900; letter-spacing: -.02em; font-size: 1.05rem; line-height: 1.1; }
.plan-b1 .plan-title { font-size: 1.3rem; } /* the core block reads first */
.plan-note { margin-top: .9rem; color: var(--ink-2); font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) {
  .plan-b { clip-path: inset(0 100% 0 0); animation: wipe .45s cubic-bezier(.2,.7,.3,1) var(--d, 0ms) forwards; }
  @keyframes wipe { to { clip-path: inset(0); } }
}

/* ---- service grid: unequal blocks, no cards ---- */
.grid-svc {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
  background: var(--trace); border: 1px solid var(--trace);
}
.svc { background: var(--panel); padding: clamp(1.25rem, 2.4vw, 2rem); }
.svc:nth-child(1), .svc:nth-child(4) { grid-column: span 7; }
.svc:nth-child(2), .svc:nth-child(3) { grid-column: span 5; }
.svc h3 { margin-bottom: .35em; font-size: 1.35rem; }
.svc h3 a { color: var(--ink); text-decoration: none; }
.svc h3 a:hover { color: var(--iris); }
.svc p { color: var(--ink-2); }
.svc-pts { margin-top: 1rem; font-size: .92rem; color: var(--ink-2); }
.svc-pts li { padding-left: 1.1rem; position: relative; margin-bottom: .35rem; }
.svc-pts li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; background: var(--iris);
}

/* ---- service list (services page) ---- */
.list-svc { border-top: 1px solid var(--trace); }
.svc-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gap);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-bottom: 1px solid var(--trace);
}
.svc-row h2 { margin-bottom: .3em; }
.svc-row h2 a { color: var(--ink); text-decoration: none; }
.svc-row h2 a:hover { color: var(--iris); }
.svc-row-body p { color: var(--ink-2); }
.lnk { font-weight: 700; }

/* ---- columns divided by traces ---- */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--gap); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.col { padding-inline: clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--trace); }
.col:first-child { padding-left: 0; border-left: 0; }
.col p { color: var(--ink-2); font-size: .95rem; }

/* ---- prose + aside ---- */
.prose-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: var(--gap); }
.prose p { font-size: 1.08rem; }
.side h2 { font-size: 1rem; margin-bottom: .5em; }
.side p { color: var(--ink-2); font-size: .95rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li { border: 1px solid var(--trace); padding: .25rem .55rem; font-size: .85rem; color: var(--ink-2); }

.checks { columns: 2; column-gap: var(--gap); margin-top: 1rem; }
.checks li {
  break-inside: avoid; padding-left: 1.4rem; position: relative;
  margin-bottom: .7rem; color: var(--ink-2); max-width: 46ch;
}
.checks li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border: 1.5px solid var(--iris);
}

.other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--trace); border: 1px solid var(--trace); margin-top: 1rem; }
.other a { display: block; background: var(--panel); padding: 1rem; text-decoration: none; color: var(--ink); }
.other a:hover { background: #f4f6f8; }
.other strong { display: block; margin-bottom: .2rem; }
.other span { color: var(--ink-2); font-size: .9rem; }

/* ---- steps: a real sequence, so it is numbered ---- */
.steps { border-top: 1px solid var(--trace); }
.step {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--trace);
}
.step-n { font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--trace); letter-spacing: -.03em; }
.step h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.step p { color: var(--ink-2); }

/* ---- breadcrumbs ---- */
.crumbs { color: var(--ink-2); font-size: .9rem; margin-bottom: 1rem; }
.crumbs span[aria-hidden] { color: var(--trace); padding-inline: .3rem; }

/* ---- closing band ---- */
.cta { background: var(--ink); color: #fff; }
.cta .frame { border-color: #2a3038; }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: clamp(2.5rem, 5vw, 4rem); }
.cta h2 { margin-bottom: .35em; }
.cta p { color: #aab2bd; }

/* ---- form ---- */
.form-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--gap); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: .95rem; }
.opt { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel);
  border: 1.5px solid var(--trace); padding: .65rem .75rem; border-radius: 0;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus { border-color: var(--iris); outline-offset: 1px; }
.field.bad input, .field.bad textarea { border-color: var(--iris-hot); }
.err { color: #b21150; font-size: .9rem; margin: .35rem 0 0; }
.alert { border-left: 3px solid var(--iris-hot); background: var(--panel); padding: .75rem 1rem; margin-bottom: 1.25rem; }
.form-note { margin-top: 1rem; color: var(--ink-2); font-size: .9rem; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--trace); }
.foot-in { padding-block: clamp(2rem, 4vw, 3rem); }
.foot-name { font-weight: 900; letter-spacing: -.02em; margin-bottom: .2rem; }
.foot-line { color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
.foot-legal { color: var(--ink-2); font-size: .85rem; }

/* ---- narrower screens ---- */
@media (max-width: 60rem) {
  .hero-in, .prose-grid, .form-grid, .svc-row { grid-template-columns: 1fr; }
  .cols, .cols-4, .other { grid-template-columns: 1fr; }
  .col { padding-inline: 0; padding-top: 1.25rem; margin-top: 1.25rem; border-left: 0; border-top: 1px solid var(--trace); }
  .col:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .other { gap: 1px; }
  .svc:nth-child(n) { grid-column: span 12; }
  .checks { columns: 1; }
}

@media (max-width: 34rem) {
  .head-in { flex-direction: column; align-items: flex-start; gap: .4rem; padding-block: .7rem; }
  .nav { flex-wrap: wrap; }
  .plan { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(4.5rem, auto)); }
  .plan-b1, .plan-b2, .plan-b3, .plan-b4 { grid-area: auto; flex-direction: column; align-items: flex-start; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
}