/* ELITE — page-level composition */

/* --- Photographic layer -------------------------------------------------- */
/* Photography is illustrative, so it sits behind the type rather than
   competing with it: greyscale already, then dimmed and scrimmed so the
   headline keeps its contrast at every viewport. */
.media-layer {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.media-layer__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(100%) contrast(1.05);
}
/* Scrim: heavy where the type sits, clearing quickly so the photograph is
   actually legible in the open part of the frame. */
.media-layer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.72) 32%,
    rgba(0,0,0,.30) 66%,
    rgba(0,0,0,.06) 100%
  );
}
/* Masthead variant. Contrast is controlled entirely by this scrim rather than
   by also dimming the image, because stacking the two crushed the photograph
   to near-black. Darkest at the lower left, where the title and lead sit. */
.media-layer--soft::after {
  background:
    linear-gradient(to top,   rgba(0,0,0,.90) 0%, rgba(0,0,0,.58) 70%, rgba(0,0,0,.48) 100%),
    linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.12) 100%);
}

/* Below the text column the gradient runs vertically instead, since there is
   no longer a clear left-hand text edge to protect. */
@media (max-width: 780px) {
  .media-layer::after {
    background: linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.40) 100%);
  }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(30rem, 76vh, 48rem);
  display: flex; align-items: flex-end;
  background: var(--ink-950); color: var(--ink-000);
  overflow: hidden;
  isolation: isolate;
}
.hero .media-layer__img { opacity: 1; }

/* The chamfer motif, blown up to architectural scale as the hero's only
   ornament — the same 45deg cut that shapes the logo's E and T. */
.hero__field { position: absolute; inset: 0; z-index: -1; opacity: .3; }
.hero__field span {
  position: absolute; display: block;
  background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%);
}
.hero__field span:nth-child(1) {
  top: -8%; right: -4%; width: 46%; aspect-ratio: 1;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.hero__field span:nth-child(2) {
  top: 18%; right: 14%; width: 30%; aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #171717 0%, #050505 100%);
}
.hero__field span:nth-child(3) {
  bottom: 22%; left: 30%; width: 22%; aspect-ratio: 1;
  clip-path: polygon(0 100%, 100% 0, 0 0);
  background: linear-gradient(135deg, #141414 0%, #000 100%);
}

.hero__inner { width: 100%; padding-block: clamp(4rem, 9vh, 6.5rem) clamp(2.5rem, 6vh, 4rem); }

/* Two columns once there is room for the inset beside the headline. Below that
   the inset is dropped entirely rather than stacked, which would push the
   call to action off the first screen. */
.hero__inset { display: none; }

@media (min-width: 1100px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 24vw, 22rem);
    column-gap: var(--s-8);
    align-items: end;
  }
  .hero__content { grid-column: 1; }
  .hero__disciplines { grid-column: 1 / -1; }

  .hero__inset {
    display: block;
    grid-column: 2;
    position: relative;
    margin: 0 0 var(--s-2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 26px 64px rgba(0, 0, 0, .6);
  }
  .hero__inset img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.06);
  }
  .hero__inset-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--s-4) var(--s-4) var(--s-3);
    background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
    font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase; color: var(--ink-000);
  }
}

.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: #9a9a9a; margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
  content: ""; width: 3px; height: 2.5rem; background: var(--ink-000); flex: none;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin-bottom: var(--s-6);
}
.hero__lead {
  max-width: 54ch; font-size: var(--fs-lead); color: #b4b4b4;
  margin-bottom: var(--s-7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.hero__disciplines {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: #8c8c8c;
}

/* --- Service cards ------------------------------------------------------ */
.service-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 19rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Padding moves onto the body so the image can sit flush to the card edge. */
.service-card > :not(.service-card__media):not(.service-card__link) {
  padding-inline: var(--s-6);
}
.service-card > .service-card__num { padding-top: var(--s-6); }
.service-card > .service-card__more { padding-bottom: var(--s-6); }
.service-card:not(:has(.service-card__media)) > .service-card__num { padding-top: var(--s-6); }

.service-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-100);
  margin-bottom: var(--s-5);
}
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.service-card:hover .service-card__media img,
.service-card:focus-within .service-card__media img {
  transform: scale(1.05);
  opacity: .75;
}
.service-card:has(.service-card__media) .service-card__num { margin-bottom: var(--s-3); }
.service-card:hover,
.service-card:focus-within {
  background: var(--ink-950); color: var(--ink-000); border-color: var(--ink-950);
  transform: translateY(-4px);
}
.service-card__num {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700;
  opacity: .45; margin-bottom: var(--s-6);
}
.service-card__title { font-size: var(--fs-h3); margin-bottom: var(--s-4); text-transform: uppercase; }
.service-card__body { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--s-5); }
.service-card:hover .service-card__body,
.service-card:focus-within .service-card__body { color: #a8a8a8; }
.service-card__more { margin-top: auto; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.service-card__link { position: absolute; inset: 0; }
.service-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- Project card ------------------------------------------------------- */
.project-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--rule); background: var(--bg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.project-card:hover { transform: translateY(-4px); border-color: var(--ink-900); }
.project-card__link { position: absolute; inset: 0; z-index: 2; }
.project-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-050); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.project-card__title { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.project-card__scope { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-4); }
.project-card__meta {
  margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--rule);
  display: flex; gap: var(--s-4); justify-content: space-between;
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* --- Portfolio filter --------------------------------------------------- */
.filters { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
.filter-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.filter-group__label {
  flex: none; width: 7rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.filter-chip {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule);
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--ink-900); }
.filter-chip[aria-current="true"],
.filter-chip.is-active { background: var(--ink-900); color: var(--ink-000); border-color: var(--ink-900); }

.results-count { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-5); }

/* --- Project register table (dense view of all 63) ---------------------- */
.register { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.register th, .register td { padding: var(--s-4) var(--s-3); text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.register th {
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--text-muted); font-weight: 500;
  border-bottom-width: 2px; border-bottom-color: var(--ink-900);
}
.register tbody tr { transition: background var(--dur-fast) var(--ease); }
.register tbody tr:hover { background: var(--bg-alt); }
.register__scroll { overflow-x: auto; }

/* --- Scope list (service detail pages) ---------------------------------- */
.scope-list {
  list-style: none; padding: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.scope-list li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--fs-sm); line-height: 1.5;
}
.scope-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* --- Numbered process steps --------------------------------------------- */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-5);
  padding: var(--s-6) 0; border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700;
  color: var(--text-muted);
}
.steps h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.steps p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Client marquee ------------------------------------------------------ */
/* Grid rather than flex: a flex row would stretch a lone item on the last
   row to full width, which reads as a layout error. */
.clients {
  display: grid; gap: 0; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.clients li {
  list-style: none;
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  font-size: var(--fs-sm); font-weight: 500;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 5.5rem;
}
.section--invert .clients, .section--invert .clients li { border-color: var(--rule-invert); }

/* --- Page masthead (interior pages) ------------------------------------- */
.masthead {
  position: relative;
  background: var(--ink-950); color: var(--ink-000);
  padding-block: clamp(5rem, 12vh, 8rem) clamp(3rem, 7vh, 5rem);
  isolation: isolate;
  overflow: hidden;
}
.masthead--photo { padding-block: clamp(6rem, 15vh, 10rem) clamp(4rem, 9vh, 6rem); }
.masthead--photo .media-layer__img { opacity: 1; }
.masthead__title { font-size: var(--fs-h1); max-width: 18ch; }
.masthead__lead { margin-top: var(--s-5); max-width: 60ch; font-size: var(--fs-lead); color: #b4b4b4; }

/* --- Breadcrumb --------------------------------------------------------- */
.crumbs { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-5); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.masthead .crumbs { color: #8c8c8c; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background: var(--ink-950); color: var(--ink-000); padding-block: var(--section-y); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6); }
.cta-band h2 { font-size: var(--fs-h2); max-width: 16ch; }
.cta-band p { color: #b4b4b4; max-width: 44ch; margin-top: var(--s-4); }

/* --- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.contact-detail { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.contact-detail dt {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-2);
}
.contact-detail dd { margin: 0; font-size: var(--fs-lead); font-weight: 500; }
.contact-detail a { text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field label { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea, .field select {
  padding: var(--s-4); background: var(--bg); color: var(--text);
  border: 1px solid var(--rule); font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink-900); }
.field textarea { min-height: 9rem; resize: vertical; }

/* --- Prose (editor content) --------------------------------------------- */
.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.prose img { margin-block: var(--s-6); }
.prose blockquote {
  border-left: 3px solid var(--ink-900); padding-left: var(--s-5);
  font-size: var(--fs-lead); font-style: normal;
}

/* --- Pagination ---------------------------------------------------------- */
.pagination { margin-top: var(--s-8); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding-inline: var(--s-3);
  border: 1px solid var(--rule); text-decoration: none; font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--ink-900); }
.pagination .page-numbers.current { background: var(--ink-900); color: var(--ink-000); border-color: var(--ink-900); }

/* --- Notice (used for the no-results state) ------------------------------ */
.notice { padding: var(--s-7); border: 1px dashed var(--rule); text-align: center; color: var(--text-muted); }

/* --- Utilities ----------------------------------------------------------- */
.stack > * + * { margin-top: var(--s-5); }
.text-muted { color: var(--text-muted); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; }

@media (max-width: 700px) {
  .filter-group__label { width: 100%; }
  .steps li { grid-template-columns: 3rem 1fr; gap: var(--s-4); }
}