/* ============================================================
   ZENOS - About & Contact Page Styles
   ============================================================ */

/* --- Page hero (generic) --- */
.page-hero {
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-2xl);
  position: relative;
}

.page-hero--dark {
  background: var(--black);
  color: var(--white);
}

.page-hero--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(123, 112, 251, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero h1 {
  margin-bottom: var(--space-md);
}

.page-hero p {
  max-width: 640px;
  opacity: 0.6;
  line-height: 1.7;
}

/* --- About page --- */
.about-section {
  padding: var(--section-padding) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 991px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.about-value {
  text-align: center;
  padding: var(--space-lg);
}

.about-value__icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.about-value h4 {
  margin-bottom: var(--space-xs);
}

.about-value p {
  font-size: 0.875rem;
  opacity: 0.6;
}

@media (max-width: 640px) {
  .about-values {
    grid-template-columns: 1fr;
  }
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--space-xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-dark);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-xl);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-xl) - 4px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--purple);
  border: 2px solid var(--black);
}

.timeline__year {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: var(--space-xs);
}

.timeline__item h4 {
  margin-bottom: 4px;
}

.timeline__item p {
  font-size: 0.9375rem;
  opacity: 0.6;
}

/* ============================================================
   Contact page — grid-backed hero, chipped channel cards,
   dark-themed form matching the contact-modal's field language.
   ============================================================ */

/* Hero: subtle cyan grid + radial glow (matches tech-hero vibe) */
.page-hero--grid {
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(84, 255, 224, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 255, 224, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 70%);
}

.page-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(123, 112, 251, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(84, 255, 224, 0.08) 0%, transparent 50%);
}

/* Match the same grid into the contact section below so the page reads
   as one continuous backdrop rather than hero-vs-form. */
.contact-section {
  position: relative;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(84, 255, 224, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 255, 224, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 5%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 5%, transparent 65%);
  pointer-events: none;
}

/* Layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-info h2 {
  margin-bottom: var(--space-md);
}

.contact-info p {
  opacity: 0.65;
  margin-bottom: var(--space-lg);
  max-width: 520px;
  line-height: 1.6;
}

/* Channel cards — chipped, inline icon + label/value + arrow */
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--white);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.contact-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--cyan);
  background: rgba(84, 255, 224, 0.08);
  flex-shrink: 0;
  clip-path: polygon(
    6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px
  );
}

.contact-channel__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.contact-channel__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.contact-channel__value {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.85;
}

.contact-channel__arrow {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cyan);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-fast), transform var(--duration-fast);
  flex-shrink: 0;
}

.contact-channel:hover .contact-channel__arrow {
  opacity: 1;
  transform: translateX(0);
}

.contact-channel:hover .contact-channel__value {
  opacity: 1;
}

/* --- Form (dark-on-dark variant) -----------------------------------
   Wraps a .contact-page-form card. Reuses the .contact-form__* field
   classes from base.css (shared with the modal) but adds a
   --dark input variant for legibility on the dark page. */
.contact-page-form {
  padding: var(--space-xl);
  color: var(--white);
}

.contact-page-form__head {
  margin-bottom: var(--space-md);
}

.contact-page-form__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}

.contact-page-form__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.375rem;
  color: var(--white);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.15;
}

/* Dark input variant (white text on translucent dark bg) */
.contact-form__input--dark {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form__input--dark:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.06);
}

.contact-form__input--dark::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Select chevron — cyan on dark */
.contact-form__select.contact-form__input--dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354FFE0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Option items inside select (dark-themed browsers render this) */
.contact-form__input--dark option,
.contact-form__input--dark optgroup {
  color: var(--black);
  background: var(--white);
}

/* Consent checkbox — tweak for dark bg */
.contact-page-form .contact-form__consent {
  color: rgba(245, 244, 244, 0.6);
}

.contact-page-form .contact-form__consent a {
  color: var(--cyan);
}

.contact-page-form .contact-form__consent input[type="checkbox"] {
  accent-color: var(--cyan);
}

/* ================================================================
   About: light-theme hybrid sections + diagonal cuts between them.
   Mirrors the home page's dark → light → dark rhythm so /about
   doesn't read as five back-to-back dark panels.
   ================================================================ */

/* Hard diagonal cuts (same pattern as home.css). Included here so
   /about can use them without pulling in home.css. */
.section-cut {
  height: 80px;
  position: relative;
  z-index: 2;
}

.section-cut--to-light {
  background: var(--white);
  clip-path: polygon(
    48px 0, 100% 0, 100% 100%, 0 100%, 0 48px
  );
  margin-top: -1px;
  margin-bottom: -1px;
}

.section-cut--to-dark {
  background: var(--white);
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 48px),
    calc(100% - 48px) 100%, 0 100%
  );
  margin-top: -1px;
  margin-bottom: -1px;
}

/* Light-themed about section base */
.section--light.about-section--light {
  background: var(--white);
  color: var(--black);
  padding: var(--space-2xl) 0;
}

.section--light.about-section--light h2,
.section--light.about-section--light h4 {
  color: var(--black);
}

.section--light.about-section--light .label {
  color: var(--purple);
}

/* Values spacing tighter when sitting below the timeline */
.about-section--values {
  padding-top: 0 !important;
}

/* --- Timeline on light -------- override dark dot border to white */
.section--light .timeline::before {
  background: rgba(14, 11, 22, 0.14);
}

.section--light .timeline__item::before {
  background: var(--purple);
  border: 2px solid var(--white);
}

.section--light .timeline__year {
  color: var(--purple);
}

.section--light .timeline__item h4 {
  color: var(--black);
}

.section--light .timeline__item p {
  color: var(--grey);
  opacity: 1;
}

/* --- Values on light ----- chipped-card treatment + alternating accent */
.section--light .about-values {
  gap: var(--space-md);
}

.section--light .about-value {
  padding: var(--space-lg) var(--space-md);
  text-align: left;
}

.section--light .about-value__icon {
  margin-bottom: var(--space-sm);
}

/* Alternate icon colour per card — cyan / purple / cyan */
.section--light .about-value:nth-child(1) .about-value__icon { color: var(--cyan); }
.section--light .about-value:nth-child(2) .about-value__icon { color: var(--purple); }
.section--light .about-value:nth-child(3) .about-value__icon { color: var(--cyan); }

.section--light .about-value h4 {
  color: var(--black);
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.01em;
}

.section--light .about-value p {
  color: var(--grey);
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 1;
}

/* Chipped image showcase — double chip (top-left + bottom-right) matching
   the brand's Z diagonal. Uses clip-path since the image is a solid fill
   (no border required, so z-fighting with clip-path isn't a concern). */
.image-showcase--chipped {
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    28px 0,
    100% 0,
    100% calc(100% - 28px),
    calc(100% - 28px) 100%,
    0 100%,
    0 28px
  );
}

.image-showcase--chipped img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Hero: taller, centered, with a soft bottom fade so the dark
   .section--dark below doesn't draw a visible seam. */
.page-hero {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-3xl);
}

.page-hero--dark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, var(--black) 100%);
  pointer-events: none;
}

/* Kill the section-level top-left ambient glow on the first dark
   section directly after the hero — it reads as a seam with the hero's
   own radial. The section keeps its grid (::after) so it still feels
   atmospheric below. */
.page-hero + .section--dark::before {
  background: none;
}