/*
 * ActuLogiX inner-page technical mastheads.
 * Shared geometry, page-specific SVG systems, no external dependencies.
 */

.alx-page--visual {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.alx-page-masthead {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(30rem, 1.14fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 5rem);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.alx-page-masthead__copy {
  min-width: 0;
}

.alx-page-masthead__copy .alx-page__title {
  max-width: 12ch;
  font-size: clamp(2.6rem, 4.9vw, 4.65rem);
  line-height: .98;
  letter-spacing: -.045em;
  margin-bottom: 1.5rem;
}

.alx-page-masthead__copy .alx-page__lead {
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.alx-page-masthead__copy .alx-section__label {
  display: inline-flex;
  margin-bottom: 1.25rem;
}

.alx-page-visual {
  --alx-pv-accent: var(--alx-orange);
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(185, 198, 208, .22);
  border-radius: 1.15rem;
  background: var(--alx-ink);
  color: var(--alx-white);
  box-shadow: 0 1.5rem 4rem rgba(13, 23, 32, .16);
  isolation: isolate;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.alx-page-visual::before {
  content: "";
  position: absolute;
  inset: -25% auto auto -15%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--alx-pv-accent) 22%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.alx-page-visual:hover,
.alx-page-visual:focus-within,
.alx-page-visual.is-in-view {
  border-color: color-mix(in srgb, var(--alx-pv-accent) 62%, var(--alx-line));
  box-shadow: 0 1.8rem 4.5rem rgba(13, 23, 32, .2);
}

.alx-page-visual__readout {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(185, 198, 208, .14);
  color: var(--alx-mist);
  font-family: var(--alx-font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.alx-page-visual__readout span:last-child {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--alx-white);
}

.alx-page-visual__readout i {
  display: block;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--alx-pv-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--alx-pv-accent) 18%, transparent);
}

.alx-page-visual__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
}

.alx-page-visual__caption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .8rem;
  padding: 1.05rem 1.15rem 1.2rem;
  border-top: 1px solid rgba(185, 198, 208, .14);
  background: rgba(7, 15, 22, .78);
}

.alx-page-visual__caption strong {
  color: var(--alx-white);
  font-size: .93rem;
  line-height: 1.35;
}

.alx-page-visual__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--alx-mist);
  font-family: var(--alx-font-mono);
  font-size: .64rem;
  line-height: 1.4;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.alx-page-visual__legend li {
  position: relative;
}

.alx-page-visual__legend li:not(:last-child)::after {
  content: "›";
  position: absolute;
  left: calc(100% + .45rem);
  color: var(--alx-pv-accent);
}

.alx-page-visual--energy { --alx-pv-accent: #ffab3d; }
.alx-page-visual--safety { --alx-pv-accent: #ffb563; }
.alx-page-visual--systems { --alx-pv-accent: #f3912c; }
.alx-page-visual--privacy { --alx-pv-accent: #dfe7ed; }

.alx-pv-bg { fill: #0d1720; }
.alx-pv-gridline { fill: none; stroke: rgba(185, 198, 208, .075); stroke-width: 1; }
.alx-pv-corners { fill: none; stroke: rgba(185, 198, 208, .38); stroke-width: 1.5; }
.alx-pv-line { fill: none; stroke: #526879; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.alx-pv-line--physical { stroke: #b9c6d0; stroke-width: 2.5; }
.alx-pv-line--active { stroke: var(--alx-pv-accent); stroke-width: 2.8; }
.alx-pv-line--safe { stroke: #dfe7ed; stroke-width: 2.5; }
.alx-pv-node { fill: #14232e; stroke: #607486; stroke-width: 2; }
.alx-pv-core { fill: color-mix(in srgb, var(--alx-pv-accent) 18%, #14232e); stroke: var(--alx-pv-accent); stroke-width: 2.5; }
.alx-pv-ring { fill: none; stroke: rgba(185, 198, 208, .46); stroke-width: 2; }
.alx-pv-dot { fill: #dfe7ed; stroke: #0d1720; stroke-width: 3; }
.alx-pv-pulse { fill: var(--alx-pv-accent); stroke: #0d1720; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.alx-pv-bus { fill: none; stroke: var(--alx-pv-accent); stroke-width: 5; stroke-linecap: round; }
.alx-pv-deck { fill: #263a49; stroke: #dfe7ed; stroke-width: 2.5; stroke-linejoin: round; }
.alx-pv-housing { fill: #14232e; stroke: var(--alx-pv-accent); stroke-width: 3; }
.alx-pv-barrier { fill: none; stroke: var(--alx-pv-accent); stroke-width: 7; stroke-linecap: square; }
.alx-pv-water { fill: none; stroke: #3e7898; stroke-width: 2; opacity: .75; }
.alx-pv-rail { fill: none; stroke: #dfe7ed; stroke-width: 3; stroke-linecap: round; }
.alx-pv-scan { fill: rgba(255, 140, 0, .08); stroke: var(--alx-pv-accent); stroke-width: 2; stroke-dasharray: 7 7; }
.alx-pv-trace { fill: none; stroke: rgba(185, 198, 208, .36); stroke-width: 1.4; stroke-dasharray: 5 7; }
.alx-pv-boundary { fill: rgba(20, 35, 46, .72); stroke: var(--alx-pv-accent); stroke-width: 2; stroke-dasharray: 10 7; }

.alx-page-visual.is-in-view .alx-pv-pulse {
  animation: alx-page-visual-pulse 2.2s ease-in-out infinite;
}

.alx-page-visual:hover .alx-pv-node,
.alx-page-visual.is-in-view .alx-pv-node {
  stroke: color-mix(in srgb, var(--alx-pv-accent) 62%, #607486);
}

@keyframes alx-page-visual-pulse {
  0%, 100% { opacity: .72; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* Inner content gains the same deliberate panel geometry as the masthead. */
.alx-page--visual .alx-section-split > div,
.alx-page--visual .alx-expertise-relevant,
.alx-page--visual .alx-about-card,
.alx-page--visual .alx-contact-info,
.alx-page--visual .alx-contact-form {
  border: 1px solid var(--alx-line-light);
  border-radius: var(--alx-radius-l);
  background: var(--alx-white);
  padding: 1.75rem;
}

.alx-page--visual .alx-section-split {
  gap: 1.5rem;
}

.alx-page--visual .alx-expertise-relevant {
  margin-top: 1.5rem;
}

/* Contact: a compact direct-contact panel and a wider, calm form. */
.alx-page--visual .alx-contact-grid {
  grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 1.5rem;
  margin-top: 0;
}

.alx-contact-info,
.alx-contact-form {
  min-width: 0;
}

.alx-page--visual .alx-contact-info {
  position: sticky;
  top: 6.5rem;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 140, 0, .16), transparent 42%),
    linear-gradient(145deg, #14232e, #243846);
  color: rgba(255, 255, 255, .82);
  box-shadow: 0 22px 55px rgba(20, 35, 46, .16);
}

.alx-contact-panel__title,
.alx-contact-form > h2 {
  min-height: 1.55rem;
  margin: 0 0 1.5rem;
  color: var(--alx-deep);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.alx-page--visual .alx-contact-info .alx-contact-panel__title,
.alx-page--visual .alx-contact-info a {
  color: var(--alx-white);
}

.alx-page--visual .alx-contact-info address {
  color: rgba(255, 255, 255, .78);
}

.alx-contact-info__block {
  margin-bottom: 1.5rem;
}

.alx-contact-info__block:last-child {
  margin-bottom: 0;
}

.alx-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.alx-contact-actions a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .65rem .9rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.alx-contact-actions a:first-child {
  border-color: var(--alx-orange);
  background: var(--alx-orange);
  color: var(--alx-deep);
}

.alx-contact-actions a:hover,
.alx-contact-actions a:focus-visible {
  transform: translateY(-1px);
  border-color: var(--alx-white);
}

.alx-contact-form .alx-form__field input,
.alx-contact-form .alx-form__field select,
.alx-contact-form .alx-form__field textarea {
  background: #f8fafb;
}

.alx-contact-form .alx-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 960px) {
  .alx-page-masthead {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .alx-page-masthead__copy {
    max-width: 46rem;
  }

  .alx-page-masthead__copy .alx-page__title {
    max-width: 15ch;
  }

  .alx-page-visual {
    width: 100%;
    max-width: 46rem;
  }

  .alx-page--visual .alx-contact-grid {
    grid-template-columns: 1fr;
  }

  .alx-page--visual .alx-contact-info {
    position: static;
  }
}

@media (max-width: 767px) {
  .alx-page--visual {
    padding-top: 1.75rem;
  }

  .alx-page-masthead {
    margin-bottom: 2.75rem;
  }

  .alx-page-masthead__copy .alx-page__title {
    max-width: none;
    font-size: clamp(2.35rem, 12vw, 3.5rem);
    overflow-wrap: break-word;
  }

  .alx-page--privacy .alx-page-masthead__copy .alx-page__title {
    font-size: clamp(2rem, 9vw, 3.5rem);
    overflow-wrap: anywhere;
  }

  .alx-page-visual {
    border-radius: .85rem;
  }

  .alx-page-visual__readout {
    padding: .75rem .85rem;
    font-size: .56rem;
  }

  .alx-page-visual__readout span:first-child {
    max-width: 58%;
  }

  .alx-page-visual__caption {
    padding: .9rem;
  }

  .alx-page-visual__caption strong {
    font-size: .85rem;
  }

  .alx-page-visual__legend {
    gap: .4rem 1rem;
    font-size: .57rem;
  }

  .alx-page--visual .alx-contact-grid {
    grid-template-columns: 1fr;
  }

  .alx-page--visual .alx-section-split > div,
  .alx-page--visual .alx-expertise-relevant,
  .alx-page--visual .alx-about-card,
  .alx-page--visual .alx-contact-info,
  .alx-page--visual .alx-contact-form {
    padding: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alx-page-visual,
  .alx-pv-pulse,
  .alx-pv-node {
    animation: none !important;
    transition: none !important;
  }
}