/* ==========================================================================
   SEC 2026 — internal pages (Who we are · Services · Projects)
   Only new class names live here. Nothing in this file touches a selector the
   homepage uses, so the approved homepage cannot be affected by it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal — opt-in, and inert when the visitor prefers reduced motion
   -------------------------------------------------------------------------- */
/* Nothing is hidden until reveal.js confirms it can bring it back: the script
   sets .sec-reveal on <html> from the document head, before first paint. With
   JavaScript off the class never appears and every section renders normally. */
.sec-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.sec-reveal .reveal.is-visible,
.sec-reveal .reveal.is-static { opacity: 1; transform: none; }

.sec-reveal .reveal:nth-child(2) { transition-delay: 70ms; }
.sec-reveal .reveal:nth-child(3) { transition-delay: 140ms; }
.sec-reveal .reveal:nth-child(4) { transition-delay: 210ms; }
.sec-reveal .reveal:nth-child(5) { transition-delay: 280ms; }
.sec-reveal .reveal:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .sec-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Page intro — the lead paragraph under a page hero
   -------------------------------------------------------------------------- */
.page-intro {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 1000px) {
  .page-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-10); }
}
.page-intro__lead {
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--fw-light);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.page-intro__body { color: var(--color-muted); }
.page-intro__body > p + p { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg);
}
.stat__value {
  display: block;
  font-size: var(--step-4);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--color-muted);
}

.section--dark .stat-grid { background: var(--color-line-invert); border-color: var(--color-line-invert); }
.section--dark .stat { background: var(--color-panel); }
.section--dark .stat__label { color: var(--color-muted-invert); }

/* --------------------------------------------------------------------------
   Vision / mission statements
   -------------------------------------------------------------------------- */
.statement-grid {
  display: grid;
  gap: 2px;
}
@media (min-width: 900px) { .statement-grid { grid-template-columns: repeat(2, 1fr); } }

.statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-7);
  background: var(--color-panel);
  color: var(--sec-white);
}
.statement:nth-child(2) { background: var(--color-panel-2); }

.statement__label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sec-gray);
}
.statement__lead {
  margin: 0;
  font-size: var(--step-2);
  font-weight: var(--fw-light);
  line-height: 1.4;
}
.statement__close {
  margin: 0;
  font-size: var(--step-2);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Core values
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  counter-reset: sec-value;
}
@media (min-width: 620px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
  padding: var(--space-6) var(--space-5);
  border-top: 3px solid var(--color-ink);
  background: var(--color-surface);
}
.value-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--step-1);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.value-card__text { margin: 0; color: var(--color-muted); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Capability list
   -------------------------------------------------------------------------- */
.capability-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } }

.capability {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
}
.capability .icon { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--sec-gray); }
.capability__title {
  margin: 0 0 var(--space-2);
  font-size: var(--step-0);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.capability__text { margin: 0; font-size: var(--step--1); color: var(--color-muted); }

/* --------------------------------------------------------------------------
   Alternating image / text rows
   -------------------------------------------------------------------------- */
.feature-row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .feature-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-9); }
  .feature-row--flip .feature-row__media { order: 2; }
}
.feature-row + .feature-row { margin-top: var(--section-y); }

.feature-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sec-black);
}
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; }

.feature-row__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.feature-row__title {
  margin: 0 0 var(--space-4);
  font-size: var(--step-3);
  text-transform: uppercase;
}
.feature-row__text { color: var(--color-muted); margin-bottom: var(--space-5); }

.feature-row .spec-list { margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   Projects gallery
   -------------------------------------------------------------------------- */
.project-gallery {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .project-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .project-gallery { grid-template-columns: repeat(3, 1fr); } }

.project-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  background: var(--sec-black);
  color: var(--sec-white);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.project-item__media { position: absolute; inset: 0; z-index: -2; }
.project-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.project-item--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 24, 32, 0.25) 0%, rgba(16, 24, 32, 0.88) 100%);
  transition: background var(--dur) var(--ease);
}
.project-item--photo:hover::after { background: linear-gradient(180deg, rgba(16, 24, 32, 0.1) 0%, rgba(16, 24, 32, 0.8) 100%); }
.project-item:hover .project-item__media img { transform: scale(1.05); }

/* Projects the profile documents without a photograph get a typographic card
   rather than an unrelated stock image. */
.project-item--text { border: 1px solid var(--color-line-invert); background: var(--color-panel-2); }
.project-item--text:hover { border-color: rgba(255, 255, 255, 0.45); }

.project-item__body {
  margin-top: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.project-item__sector {
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sec-gray);
}
.project-item__title {
  margin: 0;
  font-size: var(--step-1);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.project-item__scope {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted-invert);
}
.project-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--step--2);
  color: var(--sec-gray);
}
.project-item__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.project-item__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.project-item__more .icon { width: 0.7em; height: 0.7em; }

.gallery-count {
  margin: 0 0 var(--space-5);
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Call-to-action band
   -------------------------------------------------------------------------- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-7);
  background: var(--color-panel);
  color: var(--sec-white);
}
.cta-band__title {
  margin: 0;
  font-size: var(--step-3);
  text-transform: uppercase;
  max-width: 24ch;
}
.cta-band__text { margin: var(--space-3) 0 0; color: var(--color-muted-invert); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   Filter bar — the projects gallery filters with buttons rather than links,
   so they need the same treatment the archive filter links already have.
   -------------------------------------------------------------------------- */
.filters button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  background: transparent;
  color: inherit;
  font-size: var(--step--2);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.filters button:hover,
.filters button[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}