/* ══════════════════════════════════════════════════════════════════════════
   TerraNexa — solution page styles (/enterprise-solutions and /partnerships)

   Loaded after /work/work.css, which supplies the shared layer (header, footer,
   hero, cards, chips, panels, buttons, custom cursor). This file adds only the
   blocks those two pages need, and like work.css it reads every colour, radius
   and font from the site's own design tokens declared in assets/index-ZkSL_AJM.css.

   Class names are prefixed `tns-` so they cannot collide with the `tn-` layer.
   The same components render both pages, so a change here lands on both.
   ══════════════════════════════════════════════════════════════════════════ */

/* `.tn-h2` carries no top margin, so headings that follow an eyebrow need one. */
.tns-mt-3 {
  margin-top: 0.75rem;
}

/* `.tn-btn-row` centres its buttons, which is right inside a panel but wrong
   under a hero or a page heading. */
.tn-btn-row-left {
  justify-content: flex-start;
}

/* ── value propositions ─────────────────────────────────────────────────── */

.tns-value-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 768px) {
  .tns-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.tns-value {
  border-top: 1px solid hsl(var(--border) / 0.7);
  padding-top: 1.25rem;
}

.tns-value-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: hsl(var(--primary));
}

.tns-value-title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

.tns-value-body {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

/* ── core capabilities ──────────────────────────────────────────────────── */

.tns-cap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .tns-cap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tns-cap {
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 0.25rem);
  background: hsl(var(--card) / 0.5);
  padding: 1.75rem;
}

.tns-cap-tag {
  align-self: flex-start;
  border: 1px solid hsl(var(--primary) / 0.4);
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.1);
  padding: 0.2rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.tns-cap-title {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

.tns-cap-body {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

/* The bullets are reused from the shared layer; inside a card they sit tighter. */
.tns-cap .tn-bullets {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border) / 0.6);
}

/* ── technical stack ────────────────────────────────────────────────────── */

.tns-stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .tns-stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tns-stack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
  }
}

.tns-stack-group {
  border-top: 1px solid hsl(var(--border) / 0.7);
  padding-top: 1.125rem;
}

.tns-stack-group-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: hsl(var(--foreground));
}

/* `.tn-stack` sets its own top margin for use inside cards; here the group
   heading already provides the spacing. */
.tns-stack-group .tn-stack {
  margin-top: 0.875rem;
}

/* ── GEV ────────────────────────────────────────────────────────────────── */

.tns-gev {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 0.5rem);
  background: hsl(var(--card) / 0.55);
}

.tns-gev-glow {
  position: absolute;
  top: -14rem;
  right: -8rem;
  width: 34rem;
  height: 24rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.14);
  filter: blur(110px);
  pointer-events: none;
}

.tns-gev-inner {
  position: relative;
  padding: 2.5rem 1.75rem;
}

@media (min-width: 768px) {
  .tns-gev-inner {
    padding: 3.25rem 3rem;
  }
}

.tns-gev-badge {
  display: inline-block;
  margin-bottom: 0.875rem;
  border: 1px solid hsl(var(--primary) / 0.45);
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.12);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: hsl(var(--primary));
}

.tns-gev-lead {
  margin-top: 1.25rem;
  max-width: 46rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}

@media (min-width: 768px) {
  .tns-gev-lead {
    font-size: 1.5rem;
  }
}

.tns-gev-body {
  margin-top: 1rem;
  max-width: 52rem;
  font-size: 1rem;
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
}

.tns-gev-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 2.25rem;
}

@media (min-width: 1024px) {
  .tns-gev-cols {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.tns-gev-use {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.tns-gev-use li {
  border-left: 2px solid hsl(var(--primary) / 0.4);
  padding-left: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: hsl(var(--foreground) / 0.9);
}

/* ── portfolio: featured ────────────────────────────────────────────────── */

.tns-featured-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}

.tns-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 0.25rem);
  background: hsl(var(--card) / 0.5);
}

@media (min-width: 1024px) {
  .tns-featured {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.tns-featured-media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--secondary) / 0.4);
}

@media (min-width: 1024px) {
  .tns-featured-media {
    border-bottom: 0;
    border-right: 1px solid hsl(var(--border) / 0.6);
  }
}

.tns-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: cover;
  object-position: top left;
}

/* CashPilot ships no screenshot, so it gets a typographic panel rather than a
   borrowed image of something else. */
.tns-featured-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  min-height: 16rem;
  background:
    radial-gradient(60% 60% at 50% 0%, hsl(var(--primary) / 0.18), transparent 70%),
    hsl(var(--secondary) / 0.5);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.tns-featured-placeholder-kind {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.tns-featured-body {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

@media (min-width: 768px) {
  .tns-featured-body {
    padding: 2.25rem;
  }
}

.tns-featured-kind {
  align-self: flex-start;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--secondary) / 0.7);
  padding: 0.2rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.tns-featured-title {
  margin-top: 0.875rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.tns-featured-sector {
  margin-top: 0.5rem;
}

.tns-featured-summary {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: hsl(var(--foreground) / 0.92);
}

.tns-featured-detail {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: hsl(var(--muted-foreground));
}

.tns-featured-subhead {
  margin-top: 1.5rem;
}

.tns-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid hsl(var(--border) / 0.6);
}

/* ── portfolio: the remaining live products ─────────────────────────────── */

.tns-grid-tight {
  gap: 1.25rem;
}

@media (min-width: 1280px) {
  .tns-grid-tight {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── engagement models ──────────────────────────────────────────────────── */

.tns-engage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .tns-engage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tns-engage {
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 0.25rem);
  background: hsl(var(--card) / 0.4);
  padding: 1.75rem;
}

.tns-engage-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.tns-engage-title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}

.tns-engage-body {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

.tns-engage .tn-bullets {
  margin-top: 1.25rem;
}

.tns-engage-best {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border) / 0.6);
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.tns-engage-best strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

/* ── assurances ─────────────────────────────────────────────────────────── */

.tns-assure {
  margin-top: 2.5rem;
  border-top: 1px solid hsl(var(--border) / 0.7);
}

.tns-assure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  padding: 1rem 0;
}

@media (min-width: 640px) {
  .tns-assure-row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}

.tns-assure-row dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.tns-assure-row dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: hsl(var(--foreground) / 0.92);
}

/* ── contact + enquiry form ─────────────────────────────────────────────── */

.tns-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

@media (min-width: 1024px) {
  .tns-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4rem;
  }
}

.tns-contact-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tns-contact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tns-contact-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.tns-contact-list a {
  font-size: 1rem;
  color: hsl(var(--primary));
  text-decoration: none;
}

.tns-contact-list a:hover {
  text-decoration: underline;
}

.tns-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 0.25rem);
  background: hsl(var(--card) / 0.5);
  padding: 1.75rem;
}

@media (min-width: 768px) {
  .tns-form {
    padding: 2.25rem;
  }
}

.tns-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .tns-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tns-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tns-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.tns-label em {
  font-style: normal;
  color: hsl(var(--primary));
}

.tns-field input,
.tns-field select,
.tns-field textarea {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  background: hsl(var(--background) / 0.75);
  padding: 0.7rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
}

.tns-field textarea {
  resize: vertical;
  min-height: 9rem;
}

.tns-field input::placeholder,
.tns-field textarea::placeholder {
  color: hsl(var(--muted-foreground) / 0.75);
}

.tns-field input:focus,
.tns-field select:focus,
.tns-field textarea:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}

/* The select needs an explicit colour or it inherits the OS light theme. */
.tns-field select option {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.tns-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.tns-form-status {
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.tns-form-status.is-success {
  color: hsl(var(--primary));
}

.tns-form-status.is-error {
  color: hsl(var(--destructive));
}

.tns-form-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.tns-form-note a {
  color: hsl(var(--primary));
}

/* ── capability statement page ──────────────────────────────────────────── */

.tns-stmt-head {
  padding-top: 2.5rem;
}

.tns-stmt-intro {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: hsl(var(--foreground) / 0.92);
}

.tns-stmt-h2 {
  margin-top: 3rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}

.tns-stmt-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  .tns-stmt-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tns-stmt-item h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.tns-stmt-item p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

.tns-stmt-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.tns-stmt-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--foreground) / 0.92);
}

.tns-stmt-list li svg {
  flex: 0 0 auto;
  margin-top: 0.35rem;
  color: hsl(var(--primary));
}

.tns-stmt-contact {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.tns-stmt-contact > div {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.tns-stmt-contact dt {
  min-width: 4.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  align-self: center;
}

.tns-stmt-contact dd a {
  color: hsl(var(--primary));
  text-decoration: none;
}

.tns-stmt-foot {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border) / 0.7);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

.tns-stmt-foot a {
  color: hsl(var(--primary));
}

/* ── print / PDF ────────────────────────────────────────────────────────── */

/* The capability-statement PDF is produced by printing this page with headless
   Chrome, so these rules are what the PDF actually looks like. The site is dark
   by default; a dark PDF is wasteful to print and poor to read, so print output
   is inverted to ink-on-paper. */
@media print {
  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }

  header,
  footer,
  .tn-cursor,
  .tn-hero-glow,
  /* `tns-`, not `tn-`: the class the page emits is `tns-noprint`. As `tn-noprint`
     this selector matched nothing and the print-only exclusions never applied,
     so the back link and the button row appeared in the PDF. */
  .tns-noprint {
    display: none !important;
  }

  .tn-main,
  .tns-stmt-head {
    padding-top: 0 !important;
  }

  .tn-section,
  .tns-stmt-head {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .tns-stmt-intro,
  .tns-stmt-item p,
  .tns-stmt-list li,
  .tns-stmt-contact dd,
  .tn-stmt-value {
    color: #222 !important;
  }

  .tns-stmt-h2,
  .tns-stmt-item h3 {
    color: #000 !important;
    border-bottom-color: #ccc !important;
  }

  .tns-stmt-h2 {
    margin-top: 1.5rem;
    break-after: avoid;
  }

  .tns-stmt-items > div,
  .tns-stmt-list li,
  .tns-stmt-contact > div {
    break-inside: avoid;
  }

  .tns-stmt-foot {
    color: #444 !important;
    border-top-color: #ccc !important;
  }

  .tn-detail-h1 {
    color: #000 !important;
  }

  .tn-detail-tagline,
  .tn-eyebrow {
    color: #444 !important;
  }

  .tns-stmt-list li svg {
    color: #0e7490 !important;
  }

  a,
  .tns-stmt-contact dd a,
  .tns-stmt-foot a {
    color: #0e7490 !important;
    text-decoration: none !important;
  }

  .tn-divider {
    border-top-color: #e5e5e5 !important;
  }
}