/*
 * live-circuit.css — the "Live Circuit" dark theme for True IT.
 *
 * This file is an override layer loaded AFTER the Webflow stylesheets on
 * every page. It re-skins the site (colors, typography, cards, forms) without
 * touching Webflow's layout/grid/interaction rules, so the original CSS keeps
 * working underneath. The circuit-trace hero animation lives in
 * /js/circuit-canvas.js and draws onto canvases this theme positions.
 *
 * Palette:  ground #0A141F · surface #101D2A · trace #20364C
 *           ink #EAF2F9 · muted #A9BCCC · brand orange #F5A31C
 * Type:     Chakra Petch (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
 */

:root {
  --lc-ground: #0A141F;
  --lc-ground-2: #0C1826;
  --lc-footer: #081019;
  --lc-surface: rgba(18, 32, 46, .72);
  --lc-trace: #20364C;
  --lc-ink: #EAF2F9;
  --lc-muted: #A9BCCC;
  --lc-faint: #8FA5B8;
  --lc-orange: #F5A31C;
  --lc-orange-soft: #FFC65C;
  --lc-display: 'Chakra Petch', 'IBM Plex Sans', sans-serif;
  --lc-body: 'IBM Plex Sans', sans-serif;
  --lc-mono: 'IBM Plex Mono', monospace;
}

/* ---------- base ---------- */

body {
  background-color: var(--lc-ground);
  color: var(--lc-muted);
  font-family: var(--lc-body);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--lc-orange); }
a:hover { color: var(--lc-orange-soft); }
a:focus-visible { outline: 2px solid var(--lc-orange); outline-offset: 2px; }

::selection { background: rgba(245, 163, 28, .35); color: #fff; }

/* ---------- navigation ---------- */

.navbar {
  background-color: rgba(10, 20, 31, .88);
  border-bottom: 1px solid var(--lc-trace);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding-top: 28px;
  padding-bottom: 30px;
}

.nav-link.light {
  font-family: var(--lc-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--lc-faint);
  border-radius: 3px;
}

.nav-link.light:hover {
  color: var(--lc-ink);
  border-color: var(--lc-trace);
  background-color: transparent;
}

.nav-link.light.w--current { color: var(--lc-orange); }

/* mobile menu drop-down panel */
.nav-menu[data-nav-menu-open],
.w-nav-overlay .nav-menu {
  background-color: var(--lc-ground-2);
  border: 1px solid var(--lc-trace);
}
.transparant-menu-button { color: #fff; }
.transparant-menu-button.w--open { background-color: rgba(245, 163, 28, .2); }

/* ---------- buttons ---------- */

.button {
  font-family: var(--lc-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lc-ground);
  background-color: var(--lc-orange);
  border-radius: 4px;
  padding: 14px 26px;
  transition: box-shadow .25s, transform .25s, background-color .25s;
}

.button:hover {
  color: var(--lc-ground);
  background-color: var(--lc-orange-soft);
  box-shadow: 0 0 28px 2px rgba(245, 163, 28, .35);
  transform: translateY(-1px);
}

/* the 404 page's green button joins the palette */
.button.green { background-color: var(--lc-orange); }
.button.green:hover { background-color: var(--lc-orange-soft); }

/* ---------- home hero (video + circuit canvas) ---------- */

.hero-video { position: relative; overflow: hidden; }

.hero-video video {
  filter: saturate(.45) brightness(.5) contrast(1.05);
}

/* canvas injected by circuit-canvas.js sits between video and content */
.circuit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-overlay-block {
  position: relative;
  z-index: 2;
  background-color: transparent;
  background-image: linear-gradient(90deg,
    rgba(10, 20, 31, .92) 0%,
    rgba(10, 20, 31, .55) 55%,
    rgba(10, 20, 31, .18) 100%);
  padding-top: 200px;
  padding-bottom: 170px;
}

.container.hero-container { text-align: left; }

.hero-main-title {
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: 1.08;
  max-width: 15ch;
  text-wrap: balance;
}

.hero-main-title.subtitle {
  font-family: var(--lc-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--lc-muted);
  width: auto;
  max-width: 56ch;
  margin: 26px 0 0;
  text-wrap: initial;
}

.hero-cta { margin-top: 34px; }

/* ---------- sections (dark ground) ---------- */

.section {
  background-color: var(--lc-ground);
  padding-bottom: 140px;
}

/* Webflow's pulled-up white panel (services grid, about CTA) goes glassless —
   the cards themselves carry the surface now. margin-top: 0 cancels the
   -125px pull-up everywhere; the dark theme never overlaps panels upward. */
.container.centered {
  background-color: transparent;
  border-style: none;
  box-shadow: none;
  margin-top: 0;
}

/* ...and without the panel, the -125px pull-up over the hero video reads as
   an accident — let the services section start on its own ground */
.section > .container.centered { margin-top: 0; padding-top: 40px; }

/* Equal-height cards: Webflow splits the grid into two float-based rows, so
   cards could only match within their own row. Collapse the row wrappers
   (display: contents) and lay the section out as one grid — every card
   stretches to the tallest in the section. */
.section > .container.centered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* title row sizes to content; both card rows share the tallest height */
  grid-template-rows: auto 1fr 1fr;
  gap: 18px;
}
.section > .container.centered .section-title-wrapper { grid-column: 1 / -1; }
.section > .container.centered .features-row { display: contents; }
.section > .container.centered .feature-column {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}
/* Webflow's clearfix pseudo-elements would become stray grid items */
.section > .container.centered::before,
.section > .container.centered::after,
.section > .container.centered .features-row::before,
.section > .container.centered .features-row::after { content: none; }

.section-title,
.section-title-white {
  font-family: var(--lc-display);
  font-weight: 600;
  color: var(--lc-ink);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
  text-wrap: balance;
}

.section-title-wrapper { margin-bottom: 50px; }

.section-description,
.section-description.small {
  color: var(--lc-muted);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- service cards (home) ---------- */

.features-row { margin-top: 30px; }

.feature-block.wide {
  text-align: left;
  width: 100%;
  background: var(--lc-surface);
  border: 1px solid var(--lc-trace);
  border-radius: 8px;
  padding: 26px 24px;
  margin: 0;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.feature-block.wide:hover {
  border-color: rgba(245, 163, 28, .55);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 18px rgba(245, 163, 28, .12);
}

.feature-title {
  font-family: var(--lc-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--lc-ink);
  margin-bottom: 10px;
}

.paragraph {
  color: var(--lc-muted);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
}

/* recolor the blue line icons to brand orange */
.feature-icon,
.small-feature-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(59%) saturate(1543%) hue-rotate(357deg) brightness(102%) contrast(92%);
}

/* ---------- "why choose" band ---------- */

.image-section {
  background-image: none;
  background-color: var(--lc-ground-2);
  border-top: 1px solid var(--lc-trace);
  border-bottom: 1px solid var(--lc-trace);
}

.image-section-overlay.color { background-color: transparent; }

.feature-info-title {
  font-family: var(--lc-display);
  font-weight: 600;
  color: var(--lc-ink);
}

.feature-info-paragraph { color: var(--lc-muted); }

/* ---------- subpage headers (about / contact / invoice / 404) ---------- */

/* NOTE: no overflow:hidden here — the contact/invoice card intentionally
   overhangs the header (margin-bottom: -265px) and must not be clipped */
.subpage-header,
.subpage-header.contact-1,
.subpage-header.about-1,
.subpage-header.ui {
  background-image: none;
  background-color: var(--lc-ground);
  border-bottom: 1px solid var(--lc-trace);
  position: relative;
}

.subpage-header > .w-container {
  position: relative;
  z-index: 2;
}

.subpage-title {
  font-family: var(--lc-display);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 50px);
  line-height: 1.12;
  color: var(--lc-ink);
  text-wrap: balance;
}

.subpage-title.smaller { font-size: clamp(30px, 3.6vw, 38px); line-height: 1.15; }

.page-subtitle {
  font-family: var(--lc-body);
  color: var(--lc-muted);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- about page ---------- */

.cta-title {
  font-family: var(--lc-display);
  font-weight: 600;
  color: var(--lc-ink);
}

.cta-title.subtitle {
  font-family: var(--lc-body);
  font-weight: 400;
  color: var(--lc-muted);
  line-height: 1.6;
}

/* same equal-height grid treatment for the about page's card rows.
   margin-bottom: 0 cancels Webflow's -220px (-130px tablet) pull-down that
   made the white cards overlap the photo section in the original theme —
   on the dark theme it just collided with the section border. */
.container.above-image-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
  margin-bottom: 0;
}
.container.above-image-section .feature-blocks-row { display: contents; }
.container.above-image-section .feature-blocks-column {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}
.container.above-image-section::before,
.container.above-image-section::after,
.container.above-image-section .feature-blocks-row::before,
.container.above-image-section .feature-blocks-row::after { content: none; }

.feature-line-block {
  width: 100%;
  background: var(--lc-surface);
  border: 1px solid var(--lc-trace);
  border-radius: 8px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.feature-line-block:hover {
  border-color: rgba(245, 163, 28, .55);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 14px rgba(245, 163, 28, .1);
}

.small-feature-title {
  font-family: var(--lc-display);
  font-weight: 600;
  color: var(--lc-ink);
}

.small-paragraph { color: var(--lc-muted); }

/* about page closing CTA band (was a white-gradient photo section) */
.image-section.about-us-2 { background-image: none; }

/* the about hero's video lightbox has no video configured (empty Webflow
   items list) — hide the dead element and its stock photo; the circuit
   canvas fills that side of the header instead */
.video-column-right-2 .overall-video-lightbox { display: none; }

.image-section-overlay.white-gradient {
  color: var(--lc-ink);
  background-image: linear-gradient(rgba(12, 24, 38, 0) 0%, rgba(12, 24, 38, .9) 45%);
  background-color: transparent;
  /* the original 195px/240px padding assumed cards overhanging into this
     section; 75px puts the title 96px below the section top, matching the
     "Why choose True IT?" band on the home page */
  padding-top: 75px;
  padding-bottom: 150px;
}

/* ---------- contact + invoice card ---------- */

.white-contact-form {
  color: var(--lc-ink);
  background-color: rgba(14, 26, 39, .92);
  border: 1px solid var(--lc-trace);
  border-radius: 10px;
  height: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.white-contact-form.centered { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* invoice page: no section below to absorb the -265px overhang, so the card
   was covering the footer links */
.white-contact-form.centered.no-overhang { margin-bottom: 40px; }

.white-contact-form img[src*="under-contruction"] {
  filter: brightness(0) saturate(100%) invert(70%) sepia(59%) saturate(1543%) hue-rotate(357deg) brightness(102%) contrast(92%);
}

.form-title {
  font-family: var(--lc-display);
  font-weight: 600;
  color: var(--lc-ink);
}

.form-title.subtitle {
  font-family: var(--lc-body);
  color: var(--lc-muted);
  line-height: 1.6;
}

.field-label {
  font-family: var(--lc-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--lc-faint);
}

.field,
.field.rounded {
  background-color: rgba(255, 255, 255, .06);
  border: 1px solid var(--lc-trace);
  color: var(--lc-ink);
  transition: background-color .2s, border-color .2s;
}

.field:hover,
.field.rounded:hover { background-color: rgba(255, 255, 255, .09); color: var(--lc-ink); }

.field:focus,
.field.rounded:focus {
  background-color: rgba(255, 255, 255, .09);
  border-color: var(--lc-orange);
  color: var(--lc-ink);
  outline: none;
}

.success-message {
  color: #7ADFA8;
  background-color: rgba(61, 185, 120, .12);
  border: 1px solid rgba(61, 185, 120, .45);
}

.error-bg { color: #FF8A7A; }

.section.below-contact-form {
  background-color: var(--lc-ground);
  border-bottom: 1px solid var(--lc-trace);
}

.text-column-title {
  font-family: var(--lc-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--lc-orange);
}

/* ---------- footer ---------- */

.simple-footer {
  background-color: var(--lc-footer);
  border-top: 1px solid var(--lc-trace);
  padding-top: 46px;
  padding-bottom: 10px;
}

.footer-inline-link {
  font-family: var(--lc-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--lc-faint);
  text-decoration: none;
}

.footer-inline-link:hover { color: var(--lc-orange); }

.bottom-footer-paragraph.right {
  color: var(--lc-faint);
  font-family: var(--lc-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding-bottom: 14px;
}

/* ---------- small screens ---------- */

@media (max-width: 767px) {
  .hero-overlay-block { padding-top: 150px; padding-bottom: 120px; }
  .section > .container.centered { grid-template-columns: 1fr; grid-template-rows: none; }
  .container.above-image-section { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .white-contact-form { padding: 28px 22px; }
}