/* Aurora BIM - review-v2 shared stylesheet
   Shared by team.html and services.html; page-specific rules go in interiors.css. */

/* ---------- Tokens ---------- */
:root {
  --midnight: #0A0A14;
  /* The interior pages read as the homepage's black, not as a lighter blue-slate:
     these are the homepage's own section tones (.why / .proof #080811, .services
     drifting to #0b0c17) rather than a second, lighter palette. --slate-2 stays a
     hair above the page so image wells and the profile dialog still read as
     surfaces. (Aaron, 2026-09-12.) */
  --slate: #080811;
  --slate-2: #101120;
  --white: #ffffff;
  --muted: #B9C2D6;
  --muted-dim: #8791A6;
  --turquoise: #46E0D4;
  --turquoise-hover: #6EEAE0;
  --cobalt: #2B5FD7; /* legacy, not used for CTAs here */
  /* Eyebrows and numbers. Separate from turquoise, which is reserved for actions.
     Options compared in ../label-color-options.html (bundle root). */
  --label: #A69CFF;
  --logo-teal: #99D6EA;
  --logo-purple: #7B85D7;
  --deep-navy: #000032;
  --danger: #E05454;

  --font-display: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --space-1: calc(4 * var(--u));
  --space-2: calc(8 * var(--u));
  --space-3: calc(12 * var(--u));
  --space-4: calc(16 * var(--u));
  --space-5: calc(20 * var(--u));
  --space-6: calc(24 * var(--u));
  --space-8: calc(32 * var(--u));
  --space-10: calc(40 * var(--u));
  --space-12: calc(48 * var(--u));
  --space-16: calc(64 * var(--u));
  --space-20: calc(80 * var(--u));
  --space-24: calc(96 * var(--u));

  --radius-sm: calc(6 * var(--u));
  --radius-md: calc(14 * var(--u));
  --radius-lg: calc(24 * var(--u));

  --container-max: calc(1200 * var(--u));

  --header-height: calc(76 * var(--u));

  /* Matches the homepage h2 exactly, so a section title is one size sitewide. */
  --h2-size: clamp(32px, 3.6vw, calc(54 * var(--u)));

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  /* Same ground as the homepage, which paints #000 behind its #080811 sections. */
  background: #000000;
  color: var(--white);
  font-family: var(--font-body);
  font-size: calc(17 * var(--u));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 var(--space-4); line-height: 1.15; font-weight: 600; }
main h2 { font-size: var(--h2-size); line-height: 1.03; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Layout helpers ---------- */
/* Same column as the header and the homepage: --site-content and --site-gutter
   come from site-header.css. */
.container {
  width: min(var(--site-content), 100% - 2 * var(--site-gutter));
  margin-inline: auto;
}

/* Same vertical rhythm as the homepage sections, so interior pages do not read
   as tighter than the homepage. */
.section {
  padding-block: clamp(88px, 10vw, calc(152 * var(--u)));
}
/* The homepage .services band exactly: a shallow drift in and back out, so a long
   section is not one flat fill and the edges meet the neighbouring black cleanly. */
.section--slate { background: linear-gradient(to bottom, var(--slate) 0, #0B0C17 calc(180 * var(--u)), #0B0C17 calc(100% - 180 * var(--u)), var(--slate) 100%); }
.section--tight { padding-block: var(--space-10); }
/* Matches the homepage's mobile section padding. */
@media (max-width: 639px) {
  .section { padding-block: 76px; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-60 * var(--u));
  background: var(--turquoise);
  color: var(--midnight);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus {
  top: var(--space-4);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  /* 19px, the homepage .section-label size. */
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  /* 20px, the homepage .section-label spacing. */
  margin-bottom: calc(20 * var(--u));
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(52 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  border-radius: calc(7 * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn--primary {
  background: var(--turquoise);
  color: var(--midnight);
}
.btn--primary:hover { background: var(--turquoise-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.42);
}
.btn--secondary:hover { border-color: var(--white); }

/* ---------- Header / nav ----------
   The sticky header is shared with the homepage: see site-header.css and
   site-header.js. --header-height above matches its desktop height. */

/* ---------- Hero / Aurora ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--midnight);
  padding-top: calc(var(--header-height) + var(--space-20));
  padding-bottom: var(--space-24);
  min-height: 92vh;
  display: flex;
  align-items: center;
}

.aurora-curtains {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Vertical curtain ribbons: crisper edges (less blur than a flat haze),
   brighter peak color, concentrated toward the upper-right two thirds of
   the hero so the left/text side of the field reads near-black. */
.aurora-curtains__layer {
  position: absolute;
  top: -38%;
  bottom: 4%;
  width: 15%;
  filter: blur(calc(11 * var(--u)));
  opacity: 0.85;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,0.14) 80%),
    linear-gradient(180deg,
      rgba(153, 214, 234, 0) 0%,
      rgba(153, 214, 234, 0.85) 14%,
      rgba(70, 224, 212, 0.85) 38%,
      rgba(70, 224, 212, 0.55) 58%,
      rgba(123, 133, 215, 0.6) 78%,
      rgba(123, 133, 215, 0) 98%);
  transform-origin: bottom center;
}
.aurora-curtains__layer--1 { left: 4%;  width: 12%; opacity: 0.4;  transform: skewX(-14deg) scaleY(1.02); animation: aurora-drift-1 23s ease-in-out infinite; }
.aurora-curtains__layer--2 { left: 22%; width: 16%; opacity: 0.75; transform: skewX(9deg)   scaleY(1.18); animation: aurora-drift-2 27s ease-in-out infinite; }
.aurora-curtains__layer--3 { left: 40%; width: 14%; opacity: 0.9;  transform: skewX(-7deg)  scaleY(1.28); animation: aurora-drift-1 31s ease-in-out infinite reverse; }
.aurora-curtains__layer--4 { left: 55%; width: 17%; opacity: 0.95; transform: skewX(11deg)  scaleY(1.34); animation: aurora-drift-2 25s ease-in-out infinite reverse; }
.aurora-curtains__layer--5 { left: 73%; width: 14%; opacity: 0.8;  transform: skewX(-9deg)  scaleY(1.2);  animation: aurora-drift-1 29s ease-in-out infinite; }
.aurora-curtains__layer--6 { left: 88%; width: 12%; opacity: 0.5;  transform: skewX(8deg)   scaleY(1.05); animation: aurora-drift-2 21s ease-in-out infinite reverse; }

.aurora-curtains__glow {
  position: absolute;
  left: 58%; top: -10%;
  width: 90%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(70,224,212,0.22), rgba(10,10,20,0) 72%);
}

/* Dark vignette above the curtains: keeps the field reading as near-black
   with light concentrated in curtains rather than a uniform teal wash, and
   guarantees hero copy contrast on the text side. */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(85% 70% at 12% 62%, rgba(10,10,20,0.94) 0%, rgba(10,10,20,0.7) 38%, rgba(10,10,20,0) 72%),
    linear-gradient(180deg, rgba(10,10,20,0.5) 0%, rgba(10,10,20,0) 22%, rgba(10,10,20,0) 68%, rgba(10,10,20,0.85) 100%);
}

@keyframes aurora-drift-1 {
  0%, 100% { transform: skewX(-8deg) scaleY(1.05) translateX(0); }
  50% { transform: skewX(-3deg) scaleY(1.14) translateX(2%); }
}
@keyframes aurora-drift-2 {
  0%, 100% { transform: skewX(6deg) scaleY(1.15) translateX(0); }
  50% { transform: skewX(11deg) scaleY(1.06) translateX(-2%); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-curtains__layer { animation: none !important; }
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero__copy h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  max-width: 16ch;
}
.hero__lede {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 52ch;
  margin-bottom: var(--space-8);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.hero__reassurance {
  margin-top: var(--space-6);
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.hero__schematic { position: relative; }
.schematic-frame { width: 100%; height: auto; display: block; }

/* ---------- Why Aurora ---------- */
.why-aurora__layout {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 860px) {
  .why-aurora__layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}
.why-aurora__intro {
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);
  max-width: 62ch;
}

/* Flat list, not a boxed card grid: hairline dividers only. */
.why-aurora__list {
  display: grid;
  gap: 0;
}
.why-aurora__item {
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.why-aurora__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.why-aurora__item h3 {
  font-size: 1.1rem;
  color: var(--turquoise);
  margin-bottom: var(--space-2);
}
.why-aurora__item p {
  color: var(--muted);
  margin-bottom: 0;
  max-width: 52ch;
}

/* ---------- Audience toggle / services preview ---------- */
.audience-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
}
.audience-toggle__btn {
  min-height: calc(52 * var(--u));
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 0 calc(24 * var(--u));
  border-radius: calc(7 * var(--u));
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}
/* Same active treatment as the homepage toggle, glow included. */
.audience-toggle__btn[aria-pressed="true"] {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: var(--midnight);
  font-weight: 600;
  box-shadow: 0 0 calc(22 * var(--u)) rgba(70, 224, 212, 0.17);
}
/* Inactive state: still clearly readable and clearly a button, not a dim
   afterthought - light text plus a visible border, distinct from the
   solid turquoise active fill. */
.audience-toggle__btn[aria-pressed="false"] {
  color: var(--white);
  border-color: rgba(255,255,255,0.42);
}
.audience-toggle__btn[aria-pressed="false"]:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.06);
}

.audience-panels { position: relative; }
.audience-panel[hidden] { display: none; }

/* Numbered plain list, not a bordered card grid. */
.audience-panel__list {
  counter-reset: service;
  max-width: 68ch;
}
.audience-panel__list li {
  counter-increment: service;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 1.02rem;
}
.audience-panel__list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.audience-panel__list li::before {
  content: counter(service, decimal-leading-zero);
  font-family: var(--font-mono);
  color: var(--turquoise);
  font-size: 0.8rem;
  flex: none;
}
.services-preview__cta { margin-top: var(--space-8); margin-bottom: 0; }

/* ---------- Proof ---------- */
.proof-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.45;
  max-width: 46ch;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  border-left: 3px solid var(--turquoise);
}
.proof-attribution {
  margin: 0;
  padding-left: calc(var(--space-6) + 3px);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted-dim);
}

/* ---------- Team teaser ---------- */
.team-grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
.team-card { text-align: left; }
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  background: var(--slate-2);
}
.team-card h3 { font-size: 1.1rem; margin-bottom: var(--space-1); }
.team-card__role {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--turquoise);
  display: block;
  margin-bottom: var(--space-3);
}
.team-card p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0; }
.team-preview__cta { margin-top: var(--space-10); margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact__center {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}
.contact__center .hero__reassurance {
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.contact__center .eyebrow { display: block; }

/* ---------- Footer ---------- */
/* Compact: little vertical space around the logo row and the copyright line. The 24px gap
   above the copyright still clears half the mark's height (brand clear-space rule). */
.site-footer {
  padding-block: var(--space-6) var(--space-4);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-footer .footer__logo { width: calc(72 * var(--u)); height: auto; }
.site-footer .footer__legal {
  justify-content: center;
  margin-top: var(--space-6);
  font-size: 0.95rem;
  color: var(--muted);
}
.footer__social {
  display: flex;
  gap: var(--space-8);
}
.footer__social a {
  color: var(--muted);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}
.footer__social a:hover { color: var(--turquoise); }