/*
  Primary page collection — About, Services and Solutions.
  These styles are intentionally scoped to .primary-page so the homepage
  remains untouched while all three pages retain the TechCoder visual system.
*/

.primary-page {
  background: #f4f8ff;
}

.primary-page main {
  overflow: hidden;
}

.primary-page .page-hero {
  position: relative;
  min-height: 680px;
  padding: 174px 0 106px;
  overflow: hidden;
  color: #f8fbff;
  background: #081326;
  isolation: isolate;
}

.primary-page .page-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(117, 167, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(117, 167, 235, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.primary-page .page-hero::after {
  position: absolute;
  z-index: -1;
  top: -210px;
  right: -100px;
  width: min(62vw, 840px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  opacity: .7;
  background: radial-gradient(circle at 39% 56%, rgba(49, 219, 255, .25), rgba(104, 101, 255, .12) 32%, transparent 67%);
  filter: blur(4px);
}

.primary-page .page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(350px, .97fr);
  align-items: center;
  gap: clamp(46px, 7vw, 112px);
}

.primary-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 25px;
  color: #a1badc;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .05em;
}

.primary-page .breadcrumb a {
  color: #c6eaff;
  transition: color .2s ease;
}

.primary-page .breadcrumb a:hover { color: var(--cyan); }
.primary-page .breadcrumb span { color: #7691b5; }

.primary-page .page-hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 5.3vw, 5.45rem);
}

.primary-page .page-hero .hero-lead {
  max-width: 630px;
  margin-bottom: 34px;
  color: #b8c9e2;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.82;
}

.primary-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.primary-page .hero-actions .button { min-width: 170px; }

.primary-page .page-hero-visual {
  position: relative;
  min-height: 390px;
}

.primary-page .visual-caption {
  position: absolute;
  right: 0;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #9db5d4;
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.primary-page .visual-caption::before {
  width: 29px;
  height: 1px;
  content: "";
  background: #62dff5;
}

.primary-page .section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(260px, .62fr);
  align-items: end;
  gap: clamp(34px, 7vw, 100px);
  margin-bottom: 52px;
}

.primary-page .section-intro h2 {
  color: #102d59;
}

.primary-page .section-intro > p:not(.eyebrow) {
  max-width: 430px;
  margin: 0 0 5px;
  color: #647894;
  font-size: .96rem;
  line-height: 1.82;
}

.primary-page .section-intro--light h2 { color: #f2f8ff; }
.primary-page .section-intro--light > p:not(.eyebrow) { color: #9db4d3; }

.primary-page .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: #4f78ac;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.primary-page .section-kicker i { color: #417fe1; }

.primary-page .text-link--light { color: #b8f5ff; }
.primary-page .text-link--light:hover { color: var(--cyan); }

/* Shared compact proof row. */
.primary-page .page-proof {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  color: #d8ecff;
  background: #0d2244;
}

.primary-page .page-proof .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.primary-page .page-proof p {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 71px;
  margin: 0;
  padding: 13px 26px;
  border-right: 1px solid rgba(164, 209, 255, .15);
  color: #c0d5ed;
  font-size: .72rem;
  font-weight: 700;
}

.primary-page .page-proof p:last-child { border-right: 0; }
.primary-page .page-proof i { color: var(--cyan); }

/* About page — manifesto and timeline. */
.about-page .about-hero::after {
  top: -100px;
  right: -150px;
  background: radial-gradient(circle at 42% 45%, rgba(94, 122, 255, .24), rgba(45, 218, 255, .11) 36%, transparent 67%);
}

.about-page .about-hero .page-hero-grid { grid-template-columns: minmax(0, .96fr) minmax(370px, 1.04fr); }

.about-manifesto {
  position: relative;
  width: min(100%, 488px);
  min-height: 376px;
  margin-left: auto;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(146, 218, 255, .32);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(29, 66, 112, .8), rgba(13, 27, 63, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 31px 65px rgba(0, 10, 38, .33);
}

.about-manifesto::before,
.about-manifesto::after {
  position: absolute;
  border: 1px solid rgba(137, 229, 255, .24);
  border-radius: 50%;
  content: "";
}

.about-manifesto::before {
  top: -137px;
  right: -98px;
  width: 355px;
  height: 355px;
  box-shadow: 0 0 0 36px rgba(72, 134, 255, .05), 0 0 0 73px rgba(72, 134, 255, .03);
}

.about-manifesto::after {
  bottom: -167px;
  left: -109px;
  width: 274px;
  height: 274px;
  border-color: rgba(169, 124, 255, .34);
}

.about-manifesto-top,
.about-manifesto-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }

.about-manifesto-top {
  color: #a8c8ea;
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .1em;
}

.about-manifesto-top i { color: var(--cyan); font-size: .95rem; }

.about-manifesto blockquote {
  position: relative;
  z-index: 1;
  max-width: 370px;
  margin: 65px 0 48px;
  color: #f1f7ff;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: 1.08;
}

.about-manifesto blockquote em {
  color: #8cecff;
  font-style: normal;
}

.about-manifesto-footer {
  gap: 14px;
  padding-top: 15px;
  border-top: 1px solid rgba(173, 217, 255, .18);
  color: #afc5e0;
  font-size: .68rem;
}

.about-manifesto-footer strong { color: #e5f3ff; }
.about-manifesto-footer span { color: #7fe9ff; font-family: var(--font-mono); font-size: .58rem; }

.about-principles { background: #f6faff; }

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #cddff2;
  border-left: 1px solid #cddff2;
}

.principle-card {
  position: relative;
  min-height: 280px;
  padding: 28px;
  overflow: hidden;
  border-right: 1px solid #cddff2;
  border-bottom: 1px solid #cddff2;
  background: rgba(255, 255, 255, .72);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), background .32s ease, box-shadow .32s ease;
}

.principle-card::before {
  position: absolute;
  top: -52px;
  right: -53px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  content: "";
  opacity: 0;
  background: radial-gradient(circle, rgba(56, 205, 255, .32), transparent 68%);
  transition: opacity .3s ease;
}

.principle-card:hover {
  z-index: 1;
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 22px 42px rgba(25, 67, 118, .14);
}

.principle-card:hover::before { opacity: 1; }

.principle-number {
  display: block;
  margin-bottom: 61px;
  color: #628bc1;
  font-family: var(--font-mono);
  font-size: .61rem;
}

.principle-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid #a6d6f4;
  border-radius: 12px;
  color: #246abf;
  background: #ebf7ff;
}

.principle-card:nth-child(2) .principle-icon { color: #7652d6; background: #f0ecff; border-color: #d5c6ff; }
.principle-card:nth-child(3) .principle-icon { color: #0c8398; background: #e6fcff; border-color: #a8e8ed; }
.principle-card:nth-child(4) .principle-icon { color: #42771e; background: #f2ffe5; border-color: #cce8aa; }

.principle-card h3 { margin-bottom: 10px; color: #183a68; }
.principle-card p { margin: 0; color: #6c7f99; font-size: .78rem; line-height: 1.72; }

.about-story-section { padding-bottom: 0; background: #edf5ff; }

.about-story-layout {
  display: grid;
  grid-template-columns: minmax(250px, .76fr) minmax(0, 1.24fr);
  gap: clamp(48px, 9vw, 144px);
  align-items: start;
}

.story-aside { position: sticky; top: 120px; }
.story-aside h2 { max-width: 380px; margin-bottom: 22px; color: #102d59; }
.story-aside > p:not(.eyebrow) { max-width: 346px; margin-bottom: 28px; color: #5b7293; font-size: .92rem; line-height: 1.8; }

.story-index {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6585af;
  font-family: var(--font-mono);
  font-size: .62rem;
}

.story-index::after { width: 68px; height: 1px; content: ""; background: #9cc4ed; }

.story-timeline {
  position: relative;
  display: grid;
  gap: 17px;
  padding-bottom: 100px;
}

.story-timeline::before {
  position: absolute;
  top: 21px;
  bottom: 125px;
  left: 24px;
  width: 1px;
  content: "";
  background: linear-gradient(#67d9f4, #8192f6 67%, transparent);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  padding: 27px;
  border: 1px solid #c7dcf2;
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 13px 30px rgba(21, 67, 122, .05);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.timeline-item:hover { border-color: #8acdee; box-shadow: 0 21px 38px rgba(21, 67, 122, .12); transform: translateX(8px); }

.timeline-dot {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #77cef0;
  border-radius: 50%;
  color: #1969ad;
  background: #ecfbff;
  box-shadow: 0 0 0 6px #edf5ff;
  font-family: var(--font-mono);
  font-size: .6rem;
}

.timeline-item:nth-child(2) .timeline-dot { color: #7353d0; border-color: #b6a3f7; background: #f4f1ff; }
.timeline-item:nth-child(3) .timeline-dot { color: #2b7a48; border-color: #a7ddb7; background: #effbf2; }

.timeline-copy small { display: block; margin-bottom: 9px; color: #4f85c5; font-family: var(--font-mono); font-size: .58rem; font-weight: 500; letter-spacing: .09em; }
.timeline-copy h3 { margin-bottom: 9px; color: #173a68; }
.timeline-copy p { margin: 0; color: #687e9d; font-size: .79rem; line-height: 1.72; }

.about-cta {
  padding: 91px 0;
  color: #eaf8ff;
  background: linear-gradient(115deg, #0a1c3b, #10295b 56%, #242365);
}

.about-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

.about-cta h2 { max-width: 690px; }
.about-cta h2 span { color: #7fe9ff; }

/* Services page — modular service suite and delivery path. */
.services-page .services-hero::after {
  top: -138px;
  right: -60px;
  background: radial-gradient(circle at 38% 55%, rgba(37, 223, 250, .26), rgba(130, 102, 255, .16) 30%, transparent 68%);
}

.service-orbital {
  position: absolute;
  inset: 3px 7px 14px 0;
  display: grid;
  place-items: center;
}

.service-orbital::before,
.service-orbital::after {
  position: absolute;
  border: 1px solid rgba(130, 221, 255, .3);
  border-radius: 50%;
  content: "";
}

.service-orbital::before { width: min(28vw, 320px); aspect-ratio: 1; }
.service-orbital::after { width: min(43vw, 468px); aspect-ratio: 1; border-color: rgba(162, 131, 255, .26); transform: rotate(25deg) scaleY(.52); }

.service-core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 164px;
  height: 164px;
  place-items: center;
  border: 1px solid rgba(155, 231, 255, .64);
  border-radius: 38px;
  color: #eafaff;
  background: linear-gradient(145deg, rgba(50, 159, 203, .42), rgba(49, 47, 125, .63));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 65px rgba(40, 201, 255, .21);
  text-align: center;
  transform: rotate(11deg);
}

.service-core i { display: block; margin-bottom: 10px; color: #83f1ff; font-size: 2rem; transform: rotate(-11deg); }
.service-core strong { display: block; font-size: .78rem; letter-spacing: -.03em; transform: rotate(-11deg); }

.service-orbit-tag {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(174, 225, 255, .28);
  border-radius: 8px;
  color: #d9efff;
  background: rgba(18, 48, 94, .74);
  box-shadow: 0 12px 25px rgba(0, 7, 30, .22);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .045em;
}

.service-orbit-tag i { color: #83ebff; }
.service-orbit-tag--one { top: 27px; right: 31px; }
.service-orbit-tag--two { bottom: 56px; left: 2px; }
.service-orbit-tag--three { right: -3px; bottom: 123px; }

.services-suite { background: #f7faff; }

.service-suite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.service-suite-card {
  position: relative;
  display: flex;
  min-height: 326px;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #cbdff3;
  border-radius: 20px;
  color: #284668;
  background: #fff;
  box-shadow: 0 13px 29px rgba(24, 61, 111, .055);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease, border-color .32s ease;
}

.service-suite-card::before {
  position: absolute;
  top: -105px;
  right: -92px;
  width: 206px;
  height: 206px;
  border-radius: 50%;
  content: "";
  opacity: .82;
  background: radial-gradient(circle, rgba(74, 205, 255, .16), transparent 69%);
  transition: transform .5s ease;
}

.service-suite-card:nth-child(2)::before,
.service-suite-card:nth-child(5)::before { background: radial-gradient(circle, rgba(149, 112, 255, .17), transparent 69%); }
.service-suite-card:nth-child(3)::before,
.service-suite-card:nth-child(6)::before { background: radial-gradient(circle, rgba(97, 145, 255, .17), transparent 69%); }

.service-suite-card:hover {
  z-index: 1;
  border-color: #83d6f6;
  box-shadow: 0 24px 48px rgba(24, 61, 111, .14);
  transform: translateY(-8px);
}

.service-suite-card:hover::before { transform: scale(1.35); }

.service-suite-icon {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 48px;
  border: 1px solid #a6d5f1;
  border-radius: 14px;
  color: #1e75bf;
  background: #eaf8ff;
  font-size: 1rem;
}

.service-suite-card:nth-child(2) .service-suite-icon,
.service-suite-card:nth-child(5) .service-suite-icon { border-color: #d2c4ff; color: #7454d3; background: #f1edff; }
.service-suite-card:nth-child(3) .service-suite-icon,
.service-suite-card:nth-child(6) .service-suite-icon { border-color: #bdd0ff; color: #466fd3; background: #edf2ff; }

.service-suite-card h3 { position: relative; margin-bottom: 12px; color: #183b69; }
.service-suite-card p { position: relative; margin: 0 0 22px; color: #667c99; font-size: .78rem; line-height: 1.72; }

.service-suite-card a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-top: auto;
  color: #1769b7;
  font-size: .7rem;
  font-weight: 800;
  transition: gap .2s ease, color .2s ease;
}

.service-suite-card a:hover { gap: 12px; color: #704fd0; }

.delivery-section { color: #ecf6ff; background: #0a1c38; }

.delivery-section::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .55;
  background: linear-gradient(120deg, transparent 15%, rgba(56, 139, 255, .12), transparent 60%);
}

.delivery-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.delivery-path::before {
  position: absolute;
  top: 39px;
  right: 11%;
  left: 11%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #41d9f5, #7d91ff 55%, #b094ff);
}

.delivery-step { position: relative; z-index: 1; padding-top: 1px; }

.delivery-step-number {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  margin-bottom: 29px;
  border: 1px solid rgba(139, 229, 255, .54);
  border-radius: 50%;
  color: #8befff;
  background: #0d2851;
  box-shadow: 0 0 0 7px #0a1c38;
  font-family: var(--font-mono);
  font-size: .72rem;
  transition: transform .25s ease, color .25s ease, background .25s ease;
}

.delivery-step:hover .delivery-step-number { color: #0a2448; background: #89edff; transform: scale(1.09); }
.delivery-step h3 { margin-bottom: 11px; color: #e8f5ff; font-size: 1.22rem; }
.delivery-step p { max-width: 230px; margin: 0; color: #9db4d1; font-size: .76rem; line-height: 1.72; }

.service-models { background: #edf5ff; }

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.model-card {
  padding: 28px;
  border: 1px solid #c7dcf2;
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
}

.model-card > span { display: block; margin-bottom: 30px; color: #5582b8; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; }
.model-card h3 { margin-bottom: 11px; color: #173964; }
.model-card p { margin: 0; color: #687e9b; font-size: .77rem; line-height: 1.7; }

.services-cta {
  padding: 88px 0;
  color: #effaff;
  background: linear-gradient(115deg, #112c55, #192768 58%, #1e526d);
}

.services-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.services-cta h2 { max-width: 710px; }
.services-cta h2 span { color: #82eeff; }

/* Solutions page — command centre, workflow cards and FAQ. */
.solutions-page { background: #f2f7ff; }

.solutions-page .solutions-hero {
  min-height: 730px;
  background: #06132a;
}

.solutions-page .solutions-hero::after {
  top: -96px;
  right: -100px;
  background: radial-gradient(circle at 38% 54%, rgba(78, 243, 255, .2), rgba(115, 80, 255, .2) 32%, transparent 68%);
}

.solutions-console {
  position: relative;
  width: min(100%, 510px);
  min-height: 401px;
  margin-left: auto;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(145, 223, 255, .31);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(18, 53, 91, .93), rgba(10, 22, 56, .95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 29px 59px rgba(0, 3, 27, .38);
}

.solutions-console::after {
  position: absolute;
  top: 44px;
  right: -102px;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(97, 222, 255, .16), transparent 68%);
  filter: blur(2px);
}

.console-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 13px;
  border-bottom: 1px solid rgba(167, 213, 255, .13);
  color: #b9d0e9;
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .08em;
}

.console-live { display: inline-flex; align-items: center; gap: 7px; color: #a8f3c7; }
.console-live i { font-size: .42rem; color: #83eaa8; animation: pulse-dot 1.8s ease-in-out infinite; }

.console-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.console-step {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid rgba(163, 217, 255, .18);
  border-radius: 10px;
  background: rgba(11, 36, 73, .7);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.console-step:hover { border-color: rgba(117, 232, 255, .72); background: rgba(20, 58, 105, .86); transform: translateX(5px); }

.console-step > i {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 8px;
  color: #83eeff;
  background: rgba(52, 210, 255, .13);
  font-size: .78rem;
}

.console-step:nth-child(2) > i { color: #c6b2ff; background: rgba(159, 121, 255, .17); }
.console-step:nth-child(3) > i { color: #9fcbff; background: rgba(81, 137, 255, .15); }
.console-step:nth-child(4) > i { color: #b9f599; background: rgba(153, 221, 99, .13); }

.console-step small { display: block; margin-bottom: 3px; color: #8ca8ca; font-family: var(--font-mono); font-size: .48rem; letter-spacing: .05em; }
.console-step strong { display: block; color: #e5f4ff; font-size: .69rem; }
.console-step b { color: #86ecff; font-family: var(--font-mono); font-size: .56rem; }

.console-insight {
  position: absolute;
  z-index: 3;
  right: 21px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(170, 230, 255, .27);
  border-radius: 9px;
  color: #d5efff;
  background: rgba(23, 50, 100, .88);
  box-shadow: 0 13px 28px rgba(0, 9, 30, .22);
  backdrop-filter: blur(10px);
  font-size: .62rem;
}

.console-insight i { color: #8becff; }
.console-insight strong { color: #94f1ca; }

.solution-workflows { background: #f5f9ff; }

.workflow-catalogue { display: grid; gap: 15px; }

.workflow-card {
  position: relative;
  display: grid;
  grid-template-columns: 75px minmax(0, .86fr) minmax(0, 1.14fr) auto;
  align-items: center;
  gap: 25px;
  min-height: 160px;
  padding: 22px 26px;
  overflow: hidden;
  border: 1px solid #cbdff2;
  border-radius: 17px;
  color: #244467;
  background: #fff;
  box-shadow: 0 11px 28px rgba(26, 65, 117, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.workflow-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  content: "";
  background: linear-gradient(#2edcff, #668eff);
}

.workflow-card:nth-child(2)::before { background: linear-gradient(#9d7aff, #5f8fff); }
.workflow-card:nth-child(3)::before { background: linear-gradient(#4ccae3, #7dcf91); }
.workflow-card:hover { border-color: #8bd1ef; box-shadow: 0 23px 44px rgba(26, 65, 117, .12); transform: translateX(7px); }

.workflow-order {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid #a8d9f3;
  border-radius: 14px;
  color: #2073bc;
  background: #edfaff;
  font-family: var(--font-mono);
  font-size: .67rem;
}

.workflow-card:nth-child(2) .workflow-order { color: #7652d2; border-color: #d0c2ff; background: #f2efff; }
.workflow-card:nth-child(3) .workflow-order { color: #21845c; border-color: #b8e4cf; background: #effdf7; }

.workflow-card h3 { margin-bottom: 7px; color: #163964; }
.workflow-card h3 + p { margin: 0; color: #687e9d; font-size: .75rem; line-height: 1.64; }

.workflow-card ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; list-style: none; }
.workflow-card li { padding: 7px 8px; border: 1px solid #d4e4f3; border-radius: 6px; color: #5c7699; background: #f9fcff; font-size: .61rem; font-weight: 700; }

.workflow-card a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #bfd8ed;
  border-radius: 9px;
  color: #296cb1;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.workflow-card a:hover { border-color: #58cfe8; color: #102c58; background: #8deeff; transform: translate(3px, -3px); }

.outcomes-section { color: #eaf7ff; background: #081a36; }

.outcomes-layout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 9vw, 135px);
  align-items: center;
}

.outcomes-copy h2 { margin-bottom: 21px; color: #f1f8ff; }
.outcomes-copy > p:not(.eyebrow) { max-width: 410px; margin-bottom: 28px; color: #a8bdd8; font-size: .92rem; line-height: 1.8; }

.outcome-quote {
  max-width: 440px;
  padding-left: 17px;
  border-left: 2px solid #50dfee;
  color: #d9ecff;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.65;
}

.outcome-quote span { display: block; margin-top: 9px; color: #83a8ce; font-size: .62rem; font-weight: 500; }

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.outcome-card {
  min-height: 166px;
  padding: 23px;
  border: 1px solid rgba(166, 217, 255, .18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(35, 74, 124, .62), rgba(17, 34, 75, .57));
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.outcome-card:hover { border-color: rgba(106, 229, 255, .64); background: linear-gradient(145deg, rgba(45, 94, 146, .74), rgba(24, 47, 96, .7)); transform: translateY(-6px); }
.outcome-card span { display: block; margin-bottom: 27px; color: #99f3ff; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; }
.outcome-card strong { display: block; margin-bottom: 9px; color: #f1f8ff; font-size: clamp(1.85rem, 3vw, 2.45rem); letter-spacing: -.07em; line-height: 1; }
.outcome-card p { margin: 0; color: #a9bed8; font-size: .68rem; font-weight: 700; line-height: 1.5; }

.solution-faq { background: #edf5ff; }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 9vw, 140px);
  align-items: start;
}

.faq-layout h2 { max-width: 410px; color: #112f5d; }
.faq-aside > p:not(.eyebrow) { max-width: 330px; margin: 22px 0 0; color: #607894; font-size: .88rem; line-height: 1.76; }

.faq-list { display: grid; gap: 10px; }

.faq-list details {
  overflow: hidden;
  border: 1px solid #c6dcf2;
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.faq-list details[open] { border-color: #8bd3f0; background: #fff; box-shadow: 0 12px 28px rgba(30, 74, 132, .08); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 23px;
  color: #193c68;
  cursor: pointer;
  font-size: .87rem;
  font-weight: 800;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #bed7ec;
  border-radius: 50%;
  content: "+";
  color: #3477bd;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  transition: transform .22s ease, color .22s ease, background .22s ease;
}

.faq-list details[open] summary::after { color: #113567; background: #8eefff; transform: rotate(45deg); }
.faq-list details p { max-width: 690px; margin: 0; padding: 0 58px 21px 23px; color: #667d9c; font-size: .78rem; line-height: 1.75; }

.solutions-cta {
  padding: 91px 0;
  color: #ecfaff;
  background: linear-gradient(115deg, #0c254a, #202866 54%, #155b6b);
}

.solutions-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.solutions-cta h2 { max-width: 710px; }
.solutions-cta h2 span { color: #87f1ff; }

/* Footer identity on inner pages. */
.primary-page .footer-brand .brand-logo {
  width: auto;
  max-width: 172px;
  height: 42px;
}

/* Ensure page-specific layouts collapse smoothly independently of the shared homepage breakpoints. */
@media (max-width: 1080px) {
  .primary-page .page-hero { min-height: 0; padding: 145px 0 88px; }
  .primary-page .page-hero-grid,
  .about-page .about-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 49px; }
  .primary-page .page-hero-copy { max-width: 760px; }
  .primary-page .page-hero-visual { width: min(580px, 100%); min-height: 365px; margin-inline: auto; }
  .about-manifesto,
  .solutions-console { margin-left: 0; }
  .primary-page .section-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .primary-page .section-intro > p:not(.eyebrow) { max-width: 680px; }
  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-story-layout,
  .outcomes-layout,
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .story-aside { position: static; }
  .story-aside > p:not(.eyebrow),
  .faq-aside > p:not(.eyebrow) { max-width: 660px; }
  .delivery-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .delivery-path::before { display: none; }
  .delivery-step-number { margin-bottom: 19px; }
  .workflow-card { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 21px; }
  .workflow-card ul { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  .primary-page .page-hero { padding: 122px 0 73px; }
  .primary-page .page-hero h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }
  .primary-page .page-hero .hero-lead { font-size: .97rem; }
  .primary-page .hero-actions .button { width: 100%; }
  .primary-page .page-hero-visual { min-height: 340px; }
  .primary-page .page-proof .container { grid-template-columns: minmax(0, 1fr); }
  .primary-page .page-proof p { min-height: 0; padding: 16px 0; border-right: 0; border-bottom: 1px solid rgba(164, 209, 255, .15); }
  .primary-page .page-proof p:last-child { border-bottom: 0; }
  .principle-grid,
  .service-suite-grid,
  .model-grid { grid-template-columns: minmax(0, 1fr); }
  .principle-card { min-height: 231px; }
  .principle-number { margin-bottom: 33px; }
  .about-story-section { padding-bottom: 0; }
  .story-timeline { padding-bottom: 72px; }
  .timeline-item { gap: 17px; padding: 21px; }
  .about-cta,
  .services-cta,
  .solutions-cta { padding: 72px 0; }
  .about-cta .container,
  .services-cta .container,
  .solutions-cta .container { align-items: flex-start; flex-direction: column; gap: 28px; }
  .about-cta .button,
  .services-cta .button,
  .solutions-cta .button { width: 100%; }
  .service-orbit-tag--one { right: 2px; }
  .service-orbit-tag--three { right: -8px; }
  .service-suite-card { min-height: 258px; }
  .service-suite-icon { margin-bottom: 32px; }
  .delivery-path { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .delivery-step { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: start; }
  .delivery-step-number { width: 58px; height: 58px; margin: 0; }
  .delivery-step h3 { margin: 4px 0 9px; }
  .delivery-step p { max-width: none; }
  .solutions-page .solutions-hero { min-height: 0; }
  .workflow-card { grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding: 21px; }
  .workflow-card ul { grid-column: 1 / -1; }
  .workflow-card > a { position: absolute; right: 18px; bottom: 19px; }
  .workflow-card ul { padding-right: 43px; }
  .outcome-grid { grid-template-columns: minmax(0, 1fr); }
  .outcome-card { min-height: 142px; }
  .outcome-card span { margin-bottom: 19px; }
  .faq-list summary { padding: 18px; font-size: .81rem; }
  .faq-list details p { padding: 0 18px 19px; }
}

@media (max-width: 480px) {
  .primary-page .breadcrumb { margin-bottom: 19px; font-size: .55rem; }
  .primary-page .page-hero { padding-bottom: 63px; }
  .primary-page .page-hero-visual { min-height: 310px; }
  .about-manifesto { min-height: 311px; padding: 20px; border-radius: 20px; }
  .about-manifesto blockquote { margin: 45px 0 33px; font-size: 1.75rem; }
  .about-manifesto-footer { font-size: .61rem; }
  .service-core { width: 136px; height: 136px; border-radius: 30px; }
  .service-orbital::before { width: 235px; }
  .service-orbital::after { width: 330px; }
  .service-orbit-tag { padding: 8px 9px; font-size: .5rem; }
  .service-orbit-tag--two { bottom: 30px; }
  .service-orbit-tag--three { right: -15px; bottom: 110px; }
  .solutions-console { min-height: 365px; padding: 13px; border-radius: 18px; }
  .console-step { grid-template-columns: 31px minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
  .console-step > i { width: 31px; height: 31px; font-size: .64rem; }
  .console-insight { right: 12px; bottom: 12px; padding: 8px 10px; font-size: .55rem; }
  .timeline-item { grid-template-columns: 39px minmax(0, 1fr); gap: 14px; }
  .timeline-dot { width: 39px; height: 39px; font-size: .52rem; }
  .story-timeline::before { left: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-page *,
  .primary-page *::before,
  .primary-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.7); }
}