/* ===========================================================================
   Page-level pieces: portfolio index, services showcase, 404
   =========================================================================== */

/* --- Filter bar ------------------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
}

.filter-btn {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue-ink);
  transform: translateY(-2px);
}

.filter-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.filter-btn.is-active:hover { color: var(--white); }

/* --- Portfolio grid -------------------------------------------------------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 16px;
  align-items: start;
}

@media (min-width: 860px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 28px;
  }
}

.work {
  display: flex;
  flex-direction: column;
}

/* Filtered-out cards collapse out of the grid once they have faded. */
.work.is-filtered {
  display: none;
}

.work__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #eef3fa;
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
}

/* The design package alternates one softened corner per card down the grid. */
.work:nth-child(6n + 2) .work__frame { border-radius: 16px 16px 56px 16px; }
.work:nth-child(6n + 3) .work__frame { border-radius: 56px 16px 16px 16px; }
.work:nth-child(6n + 4) .work__frame { border-radius: 16px 56px 16px 16px; }
.work:nth-child(6n + 6) .work__frame { border-radius: 16px 16px 16px 56px; }

.work__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.work:hover .work__frame img { transform: scale(1.06); }

.work__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  transition: transform var(--dur-mid) var(--ease-out);
}

.work:hover .work__tag { transform: translateY(-2px); }

/* A blue veil washes over the photo on hover. */
.work__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 81, 132, 0.55), rgba(13, 22, 38, 0.05));
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
  pointer-events: none;
}

.work:hover .work__frame::after { opacity: 1; }

.work__meta { padding: 16px 4px 8px; }

.work__name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  transition: color var(--dur-fast) ease;
}

.work:hover .work__name { color: var(--blue-ink); }

.work__loc {
  font-size: 0.75rem;
  color: var(--slate-soft);
  margin-top: 5px;
  letter-spacing: 0.5px;
}

/* --- "The rest of the portfolio" panel ------------------------------------- */

.more-panel {
  margin-top: clamp(4rem, 2.6rem + 4vw, 6.25rem);
  background: var(--mist);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 860px) {
  .more-panel {
    flex-direction: row;
    align-items: center;
  }
}

.more-panel__title {
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}

.more-panel__copy {
  font-size: 0.8125rem;
  color: var(--slate);
  line-height: 1.7;
  max-width: 640px;
}

.more-panel .btn { flex: none; }

@media (max-width: 859px) {
  .more-panel .btn { width: 100%; }
}

/* --- 404 ------------------------------------------------------------------- */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 80px;
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}

.error-page img.error-page__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.error-page__inner { position: relative; z-index: 2; }

.error-page__code {
  font-family: var(--font-head);
  font-size: clamp(4rem, 2rem + 9vw, 7.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: 4px;
}

.error-page h1 {
  font-size: var(--step-h3);
  color: var(--white);
  margin: 18px 0 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.error-page p {
  font-size: var(--step-body);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
  margin: 0 auto 32px;
  line-height: 1.9;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* --- Map (contact page) ----------------------------------------------------
   Click-to-load, same bargain as the careers video: nothing reaches Google
   until a visitor asks for the interactive map. Until then it is a blueprint
   panel with the address on it, which is what most visitors came for anyway.
   ------------------------------------------------------------------------- */

.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  box-shadow: var(--shadow-md);
}

@media (min-width: 960px) {
  .map-frame { aspect-ratio: 1 / 1; }
}

.map-frame iframe,
.map-frame__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-frame__facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: var(--white);
  background-image:
    linear-gradient(rgba(157, 195, 234, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 195, 234, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  transition: background-color var(--dur-mid) ease;
}

.map-frame__facade:hover { background-color: rgba(61, 116, 180, 0.14); }

/* Drawn rather than bitmapped: the site's map-pin.png is only 28×42 and goes
   soft the moment it is scaled up. */
.map-frame__pin {
  width: 54px;
  height: 54px;
  color: var(--blue-light);
  transition: transform var(--dur-mid) var(--ease-out);
}

.map-frame__facade:hover .map-frame__pin { transform: translateY(-4px); }

.map-frame__address {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.7;
}

.map-frame__hint {
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-light);
  border: 1px solid rgba(157, 195, 234, 0.45);
  padding: 10px 18px;
  margin-top: 4px;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.map-frame__facade:hover .map-frame__hint {
  background: var(--blue);
  color: var(--white);
}

/* --- Contact detail cards --------------------------------------------------- */

.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 560px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.contact-card__label {
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 8px;
}

.contact-card a,
.contact-card p {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  margin: 0;
}

.contact-card a:hover { color: var(--blue-ink); }

/* --- Services showcase -----------------------------------------------------
   A sticky photo panel beside a column of scrolling steps. As each step
   passes the middle of the viewport it takes over the panel, so the picture
   always shows the trade being described.

   Below 960px the panel is dropped entirely and each step carries its own
   photo, which is the same file, so nothing extra is downloaded.
   ------------------------------------------------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 960px) {
  .showcase {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    /* Sticky needs a start-aligned track, or the item is stretched and has
       nowhere to travel. */
    align-items: start;
  }
}

/* --- Sticky panel --------------------------------------------------------- */

.showcase__media { display: none; }

@media (min-width: 960px) {
  .showcase__media {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

.showcase__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--navy);
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--header-h) - 150px);
  box-shadow: var(--shadow-lg);
}

.showcase__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.65s var(--ease-out);
  pointer-events: none;
}

.showcase__shot.is-active {
  opacity: 1;
  pointer-events: auto;
}

.showcase__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Settles out of a slow push-in as its step takes over. */
  transform: scale(1.07);
  transition: transform 2s var(--ease-out);
}

.showcase__shot.is-active img { transform: scale(1); }

.showcase__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 24px;
  background: linear-gradient(to top, rgba(13, 22, 38, 0.88), rgba(13, 22, 38, 0));
  color: var(--white);
}

.showcase__cap b {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.showcase__cap span {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* --- Progress readout ----------------------------------------------------- */

.showcase__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.showcase__count {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--slate-soft);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.showcase__count b { color: var(--blue-ink); }

.showcase__track {
  position: relative;
  height: 2px;
  flex: 1;
  background: var(--line-strong);
}

.showcase__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--blue);
  transition: width 0.5s var(--ease-out);
}

/* --- Steps ---------------------------------------------------------------- */

.showcase__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.showcase__step {
  position: relative;
  padding: 28px 0 28px 26px;
  border-left: 2px solid var(--line-strong);
}

/* The rail fills in behind the step that owns the panel. */
.showcase__step::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s var(--ease-out);
}

@media (min-width: 960px) {
  .showcase__step {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 40px 32px;
    /* Inactive steps sit back so the active one reads first. */
    opacity: 0.45;
    transition: opacity 0.5s ease;
  }

  .showcase__step.is-current { opacity: 1; }
  .showcase__step.is-current::before { transform: scaleY(1); }

  /* The first step is short so the panel pins early. The last one is tall
     enough to keep the column running past the panel's own height, or the
     panel unpins and slides away while you are still reading step seven. */
  .showcase__step:first-child { min-height: 46vh; }
  .showcase__step:last-child { min-height: 78vh; }
}

.showcase__num {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--blue-ink);
}

.showcase__name {
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin: 10px 0 12px;
}

.showcase__copy {
  font-size: var(--step-body);
  font-weight: 300;
  line-height: 1.9;
  color: var(--slate);
  margin: 0;
  max-width: 46ch;
}

/* Per-step photo, mobile only. */
.showcase__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.showcase__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 960px) {
  .showcase__thumb { display: none; }
}

/* --- Compact trade list --------------------------------------------------- */

.trades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
}

@media (min-width: 860px) {
  .trades { grid-template-columns: repeat(3, 1fr); }
}

.trade {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  transition: padding-left var(--dur-mid) var(--ease-out), color var(--dur-fast) ease;
}

.trade::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--blue);
  transition: transform var(--dur-mid) var(--ease-out);
}

.trade:hover {
  padding-left: 10px;
  color: var(--blue-ink);
}

.trade:hover::before { transform: rotate(45deg) scale(1.2); }