/* ===== Homepage: Project Slides (Hero Cards) ===== */
.project-slides {
  margin-top: 0;
}
.project-slide {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh; /* mobile browser chrome must not clip the slide CTA */
  overflow: hidden;
  will-change: transform;
  transform-origin: center center;
  transition: transform 0.5s ease-out, border-radius 0.5s ease-out;
}
.project-slide:nth-child(1) { z-index: 1; }
.project-slide:nth-child(2) { z-index: 2; }
.project-slide:nth-child(3) { z-index: 3; }
.project-slide:nth-child(4) { z-index: 4; }
.project-slide:not(:first-child)::after {
  content: '';
  position: absolute;
  top: -20px; left: 0; right: 0;
  height: 20px;
  background: rgba(0,0,0,0.3);
  filter: blur(10px);
  z-index: 5;
  pointer-events: none;
}
.project-slide__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
}
.project-slide__content {
  position: absolute;
  bottom: 80px;
  left: 60px;
  max-width: 600px;
  color: #fff;
}
.project-slide__label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 12px;
  opacity: 0.8;
  font-weight: 500;
}
.project-slide__label--hero {
  font-size: 22px;
  letter-spacing: 4px;
  opacity: 0.95;
}
@media (max-width: 768px) {
  .project-slide__label--hero { font-size: 16px; letter-spacing: 3px; }
}
.project-slide__title {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.project-slide__subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 28px;
  max-width: 560px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.project-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 4px;
  transition: border-color 0.3s, gap 0.3s;
  position: relative;
}
/* ≥44px tap target without changing the underline position or layout */
.project-slide__cta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.project-slide__cta:hover {
  border-color: #fff;
  gap: 14px;
}

/* Scroll indicator on first slide */
.project-slide:first-child::after {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  background: none;
  filter: none;
  top: auto;
  right: auto;
}
.project-slide:first-child::before {
  content: '';
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  animation: scrollIndicator 2s ease-in-out infinite;
  z-index: 1;
}
@keyframes scrollIndicator {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.3; transform: translateX(-50%) translateY(10px); }
}

@media (max-width: 768px) {
  .project-slide__content { left: 24px; bottom: 96px; right: 24px; }
  .project-slide__title { font-size: 46px; }
  .project-slide__subtitle { font-size: 17px; margin-bottom: 22px; }
}
@media (max-width: 480px) {
  .project-slide__title { font-size: 34px; }
  .project-slide__subtitle { font-size: 15px; }
}

/* ===== Portfolio Filters ===== */
.portfolio-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 40px 40px 0;
  max-width: var(--content-max-width);
  margin: 0 auto;
  flex-wrap: wrap;
}
.portfolio-filters__btn {
  padding: 10px 24px;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-body);
  cursor: pointer;
  transition: all 0.3s;
}
.portfolio-filters__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.portfolio-filters__btn--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

@media (max-width: 768px) {
  .portfolio-filters { padding: 30px 24px 0; gap: 8px; }
  .portfolio-filters__btn { padding: 8px 16px; font-size: 11px; }
}

/* ===== Portfolio Page ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.project-card {
  position: relative;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.project-card__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.project-card:hover .project-card__image {
  transform: scale(1.08);
}
/* Video cards don't zoom */
.project-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.project-card__discipline {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255,255,255,0.95);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  z-index: 2;
}
.project-card__content {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
}
.project-card__name {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}
.project-card__client {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}

@media (max-width: 768px) {
  .portfolio-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .project-card { height: 320px; }
}

/* ===== Discipline Page Hero (image 75% + text 25%) ===== */
.page-hero--fullscreen {
  height: 75vh;
}
.page-hero--fullscreen .page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}
.page-hero--fullscreen .page-hero__content {
  text-align: left;
}
.page-hero--fullscreen .page-hero__title {
  font-size: 56px;
}
@media (max-width: 768px) {
  .page-hero--fullscreen { height: 60vh; }
  .page-hero--fullscreen .page-hero__title { font-size: 36px; }
}

/* Discipline intro sits below hero, filling remaining ~25vh */
.discipline-hero-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25vh;
  padding: 40px 60px;
  background: #fff;
}
.discipline-hero-intro .discipline-intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 768px) {
  .discipline-hero-intro { min-height: 30vh; padding: 30px 24px; }
}

/* ===== 2-Up Portfolio with titles below (Discipline Pages) ===== */
.portfolio-grid--fullscreen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1900px;
  margin: 0 auto;
  padding: 40px 40px;
}
.portfolio-grid--fullscreen .project-card {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
}
.portfolio-grid--fullscreen .project-card__image-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65%;
  overflow: hidden;
}
.portfolio-grid--fullscreen .project-card__image,
.portfolio-grid--fullscreen .project-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.portfolio-grid--fullscreen .project-card:hover .project-card__image,
.portfolio-grid--fullscreen .project-card:hover .project-card__video {
  transform: scale(1.03);
}
.portfolio-grid--fullscreen .project-card__overlay {
  display: none;
}
.portfolio-grid--fullscreen .project-card__content {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  padding: 12px 0 0;
}
.portfolio-grid--fullscreen .project-card__name {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 4px;
}
.portfolio-grid--fullscreen .project-card__client {
  display: block;
  font-size: 14px;
  color: var(--color-body);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .portfolio-grid--fullscreen { grid-template-columns: 1fr; gap: 30px; padding: 30px 24px; }
  .portfolio-grid--fullscreen .project-card__name { font-size: 16px; }
}

/* ===== Leadership Page (text-only — no individual photos) ===== */
.leader-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.leader-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 36px 40px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.leader-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.leader-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(6, 147, 227, 0.3);
}
.leader-card__body { min-width: 0; }
.leader-card__name {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.leader-card__title {
  font-size: 13px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin: 0 0 14px;
}
.leader-card__years {
  font-size: 13px;
  color: var(--color-secondary);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.leader-card__years i {
  color: var(--color-accent);
  font-size: 12px;
}
.leader-card__bio {
  font-size: 15px;
  color: var(--color-body);
  line-height: 1.75;
}
.leader-card__bio p { margin: 0 0 10px; }
.leader-card__bio p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .leader-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 24px;
    text-align: left;
  }
  .leader-card__avatar { width: 72px; height: 72px; font-size: 24px; }
  .leader-card__name { font-size: 22px; }
}

/* ===== Contact Page ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact-info__item {
  margin-bottom: 24px;
}
.contact-info__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}
.contact-info__value {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
}
.contact-info__value a {
  color: var(--color-accent);
}
.contact-form__group {
  margin-bottom: 20px;
}
.contact-form__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text);
}
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.3s;
  border-radius: 4px;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent);
}
.contact-form__textarea {
  min-height: 150px;
  resize: vertical;
}
.contact-form__submit {
  padding: 14px 36px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s;
}
.contact-form__submit:hover {
  background: var(--color-accent-hover);
}
.contact-map {
  width: 100%;
  height: 300px;
  border: none;
  border-radius: 8px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ===== Careers Page ===== */
.job-listing {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 28px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}
.job-listing:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.job-listing__title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}
.job-listing__meta {
  font-size: 14px;
  color: var(--color-secondary);
  margin-bottom: 12px;
}
.job-listing__description {
  font-size: 15px;
  color: var(--color-body);
  line-height: 1.7;
  margin-bottom: 16px;
}
.job-listing__apply {
  display: inline-block;
  padding: 10px 24px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.3s;
}
.job-listing__apply:hover {
  background: var(--color-accent-hover);
}

/* ===== Discipline Page ===== */
.content-section {
  padding: 60px 0;
}
/* Override when containing fullscreen grid */
.content-section:has(.portfolio-grid--fullscreen) {
  padding: 0;
}
.content-section:has(.portfolio-grid--fullscreen) .content-section__inner {
  max-width: 100%;
  padding: 0;
}
.content-section:has(.portfolio-grid--fullscreen) .discipline-intro {
  display: none;
}
/* The discipline pages (cmt/environmental/geotechnical/landmark) don't use the
   .firm-after wrapper, so their content sat behind the sticky z-index:1 video
   hero and was hidden on scroll. Lift the after-hero content above the hero
   (same role .firm-after plays on the other pages) with an opaque background. */
.discipline-hero-intro { position: relative; z-index: 3; }
.content-section { position: relative; z-index: 3; background: #ffffff; }
.discipline-hero-intro ~ .cta-banner,
.discipline-hero-intro ~ footer.footer,
.page-main ~ footer.footer { position: relative; z-index: 4; }
.discipline-intro {
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
}
.discipline-intro__text {
  font-size: 18px;
  color: var(--color-body);
  line-height: 1.8;
}

/* ===== Stats Row ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  padding: 60px 40px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.stat__number {
  font-size: 48px;
  font-weight: 300;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.stat__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-secondary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 40px 24px; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .stat__number { font-size: 36px; }
}

/* ===== Mission Statement Pillars ===== */
.mission-pillars {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mission-pillar__heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.mission-pillar__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}
@media (max-width: 768px) {
  .mission-pillars { gap: 24px; }
  .mission-pillar__heading { font-size: 19px; }
}

/* ===== Work page sticky tabs ===== */
.work-tabs {
  position: sticky;
  top: 80px; /* matches header height */
  z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.work-tabs__inner {
  display: flex;
  gap: 36px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.work-tabs__inner::-webkit-scrollbar { display: none; }
.work-tabs__tab {
  display: inline-block;
  padding: 20px 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #555;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.work-tabs__tab:hover { color: #0b5fbf; }
.work-tabs__tab.work-tabs__tab--active {
  color: #0b5fbf;
  border-bottom-color: #0b5fbf;
}

.work-section {
  padding: 60px 0;
}
.work-section--gray { background: #f7f7f7; }
.work-section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.work-section__heading {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  color: #1a1a1a;
}
@media (max-width: 768px) {
  .work-tabs__inner { gap: 24px; padding: 0 24px; }
  .work-tabs__tab { padding: 16px 2px; font-size: 12px; letter-spacing: 1px; }
  .work-section { padding: 40px 0; }
  .work-section__inner { padding: 0 24px; }
  .work-section__heading { font-size: 26px; margin-bottom: 24px; }
}

/* ===== Services page — categorized test lists ===== */
.service-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.service-cat__title {
  font-size: 16px;
  font-weight: 600;
  color: #313131;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #005cb9;
}
.service-cat__desc { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.service-cat__list { list-style: none; padding: 0; margin: 0; }
.service-cat__list li {
  font-size: 14px;
  color: #555;
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.4;
}
.service-cat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  background: #005cb9;
  border-radius: 50%;
}

/* ===== Project listing numbering removed per client (D12–D15) — tiles show plain names ===== */

/* ===== Accreditation (home band + services logo) ===== */
.accreditation { padding: 56px 24px; background: #f7f7f7; }
.accreditation__inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
.accreditation__logo { width: 150px; height: auto; flex-shrink: 0; }
.accreditation__text { flex: 1; min-width: 280px; }
.accreditation__heading { font-size: 22px; color: #313131; margin-bottom: 10px; }
.accreditation__text p { font-size: 15px; color: #555; line-height: 1.6; }
.accreditation-logos { margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
.accreditation-logo { width: 180px; height: auto; }

/* ===== Home montage / tiling ===== */
.montage { padding: 80px 0 0; }
.montage__header { max-width: var(--content-max-width); margin: 0 auto 32px; padding: 0 40px; }
.montage__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 6px; }
.montage__tile { overflow: hidden; }
.montage__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.montage__tile:hover img { transform: scale(1.06); }
.montage__tile--feature { grid-column: span 2; grid-row: span 2; }
.montage__tile--wide { grid-column: span 2; }
@media (max-width: 768px) {
  .montage { padding: 56px 0 0; }
  .montage__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .montage__tile--feature { grid-column: span 2; grid-row: span 1; }
  .montage__tile--wide { grid-column: span 2; }
  .montage__header { padding: 0 24px; }
}

/* ===== Project page: before/after + gallery ===== */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 28px; }
.beforeafter__item { margin: 0; }
.beforeafter__item img { width: 100%; height: 320px; object-fit: cover; display: block; }
.beforeafter__item figcaption { margin-top: 10px; font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }
.project-gallery { padding: 0; margin-top: 6px; }
.project-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.project-gallery__grid img { width: 100%; height: 340px; object-fit: cover; display: block; }
@media (max-width: 768px) {
  .beforeafter { grid-template-columns: 1fr; }
  .project-gallery__grid { grid-template-columns: 1fr; }
  .project-gallery__grid img { height: 240px; }
}

/* ===== Project overview stats list ===== */
.project-stats { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 24px; }
.project-stats li { font-size: 15px; color: #555; padding-left: 14px; position: relative; }
.project-stats li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: #005cb9; border-radius: 50%; }
.project-stats strong { color: #313131; font-weight: 700; }
@media (max-width: 768px) { .project-stats { grid-template-columns: 1fr; } }

/* ===== Single Family Residential sub-communities ===== */
.subprojects { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 32px; }
.subproject__name { font-size: 20px; color: #313131; margin-bottom: 8px; }
.subproject__text { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 14px; }
.subproject__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.subproject__imgs img { width: 100%; height: clamp(200px, 22vw, 260px); object-fit: cover; display: block; }
@media (max-width: 768px) { .subprojects { grid-template-columns: 1fr; } .subproject__imgs img { height: 220px; } }

/* ===== Firm full-screen montage; content scrolls over it (C5) ===== */
.firm-montage { position: sticky; top: 0; height: 100vh; z-index: 1; overflow: hidden; background-color: #1a1a1a; }
/* I2 fix (2026-07-02): footer must paint above the sticky montage hero so the image doesn't cover it at page bottom */
.firm-after ~ footer.footer, .firm-after + footer.footer { position: relative; z-index: 4; }
.firm-montage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: firmMontageFade 21s infinite; }
.firm-montage__img:nth-child(2) { animation-delay: 7s; }
.firm-montage__img:nth-child(3) { animation-delay: 14s; }
@keyframes firmMontageFade { 0%{opacity:0;} 3%{opacity:1;} 30%{opacity:1;} 36%{opacity:0;} 100%{opacity:0;} }
.firm-montage--single .firm-montage__img { animation: none; opacity: 1; }
/* Q6/d07-t02 — Services hero 6-frame slideshow (cylinders + 5 Services Images). Own keyframe so firm.html's 3-frame montage is untouched. */
.firm-montage--six .firm-montage__img { animation: firmMontageFade6 42s infinite; }
.firm-montage--six .firm-montage__img:nth-child(1) { animation-delay: 0s; }
.firm-montage--six .firm-montage__img:nth-child(2) { animation-delay: 7s; }
.firm-montage--six .firm-montage__img:nth-child(3) { animation-delay: 14s; }
.firm-montage--six .firm-montage__img:nth-child(4) { animation-delay: 21s; }
.firm-montage--six .firm-montage__img:nth-child(5) { animation-delay: 28s; }
.firm-montage--six .firm-montage__img:nth-child(6) { animation-delay: 35s; }
@keyframes firmMontageFade6 { 0%{opacity:0;} 2%{opacity:1;} 15%{opacity:1;} 17%{opacity:0;} 100%{opacity:0;} }
@media (prefers-reduced-motion: reduce){ .firm-montage--six .firm-montage__img{ animation: none; } .firm-montage--six .firm-montage__img:nth-child(1){ opacity:1; } }
.firm-montage__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%); }
.firm-montage__content { position: relative; z-index: 2; height: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.firm-after { position: relative; z-index: 3; background: #ffffff; }
@media (prefers-reduced-motion: reduce){ .firm-montage__img{ animation: none; } .firm-montage__img:nth-child(1){ opacity:1; } }
@media (max-width: 768px){ .firm-montage__content { padding: 0 24px; } }

/* D8 — tasteful per-project heading fonts. Opt-in via a body class + the matching
   Google-font <link> on that one project page. Only the hero title + section/CTA
   headings change; body copy stays Inter. Reuse across pages — no per-project rules. */
.project-font--serif .page-hero__title,
.project-font--serif .section__heading,
.project-font--serif .cta-banner__heading { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; }
.project-font--slab .page-hero__title,
.project-font--slab .section__heading,
.project-font--slab .cta-banner__heading { font-family: 'Roboto Slab', Georgia, serif; }

/* D7 — per-project hero video (reuses page-hero--fullscreen) */
.page-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.page-hero--fullscreen .page-hero__overlay,.page-hero--fullscreen .page-hero__content{position:relative;z-index:1;}

/* I4 — reusable project image carousel (Splide, self-hosted; assets/js/project-carousel.js) */
.project-carousel{margin:0;padding:0;}
.project-carousel .splide__slide{display:flex;align-items:center;justify-content:center;}
.project-carousel .splide__slide img{width:100%;height:clamp(240px,40vw,460px);object-fit:cover;display:block;border-radius:2px;}
/* Graceful no-JS fallback: before Splide mounts (.is-active added on mount),
   show the slides as a horizontally scrollable row so images are never hidden. */
.project-carousel:not(.is-active) .splide__list{display:flex;gap:6px;overflow-x:auto;list-style:none;margin:0;padding:0;}
.project-carousel:not(.is-active) .splide__slide{flex:0 0 clamp(280px,60vw,520px);}

/* H1 (Q18) — enlarge the pagination dot's HIT AREA, not its ink.
   The dot still renders at 8x8; a transparent centred ::before grows the clickable
   region to 14x24 (64px^2 -> 336px^2). No paint change.
   Width is deliberately 14px, NOT 24px: the dots sit on a 14px pitch (8px dot +
   3px margin each side), so 24px-wide overlays would overlap and each dot would
   steal its neighbour's — measured, an inactive dot's own ink became unclickable.
   A full WCAG 2.5.8 pass needs the pitch raised to >=24px, which is a visible
   spacing change and is NOT approved; raised as Q23. */
.splide__pagination__page::before{content:"";position:absolute;top:50%;left:50%;
  width:14px;height:24px;transform:translate(-50%,-50%);z-index:-1;}
/* The active dot is scale(1.4)'d by Splide, which would scale its overlay to 19.6px
   and let it eat 2.8px of each neighbour. Counter-scale so every dot's hit area is
   the same 14x24 on screen. */
.splide__pagination__page.is-active::before{transform:translate(-50%,-50%) scale(.714286);}

/* I3 — interleave text + images down the page (alternating Text|Image / Image|Text)
   instead of all-text-top / all-images-bottom. Reusable, reuses existing color vars.
   Markup: <div class="project-split"><div class="project-split__text">…</div>
   <figure class="project-figure"><img …><figcaption class="project-figure__overlay">caption</figcaption></figure></div>
   Add --reverse to put the image on the left. Stacks to 1 column at 768px. */
.project-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:48px 0;}
.project-split--reverse .project-figure{order:-1;}
.project-split__text{color:#555;font-size:16px;line-height:1.7;}
.project-figure{position:relative;margin:0;overflow:hidden;border-radius:2px;}
.project-figure img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover;display:block;}
.project-figure__overlay{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-size:13px;letter-spacing:0.02em;background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);}
@media (max-width: 768px){ .project-split{grid-template-columns:1fr;gap:20px;margin:32px 0;} .project-split--reverse .project-figure{order:0;} }

/* I5 — scroll-reveal (self-hosted, assets/js/scroll-reveal.js). Elements tagged
   `.reveal` fade + rise in when scrolled into view. Hidden state is gated behind
   `.js-reveal-on` (added to <html> only when the script runs) so JS-off / no-support
   leaves everything visible. `prefers-reduced-motion` disables the motion entirely. */
.js-reveal-on .reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;}
.js-reveal-on .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .js-reveal-on .reveal{opacity:1;transform:none;transition:none;} }

/* Labeled feature list (Burnett Bayland Park overview — R23) */
.feature-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.feature-list li { position: relative; padding-left: 22px; line-height: 1.6; color: #555; font-size: 15px; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--accent, #b31b1b); border-radius: 2px; }
.feature-list li strong { color: #313131; }

/* d01-t06 — blue-tone treatment for the homepage About visual (Q1: still image, no video) */
.section__image--blue {
  filter: grayscale(0.55) sepia(0.35) hue-rotate(175deg) saturate(1.6) brightness(0.92) contrast(1.05);
}

/* Q5 — custom 404 page (404.html). Two-column: licensed field-work photo beside a text
   panel; stacks to one column at 768px with the photo capped in height so the message
   stays above the fold on a phone. Colours are the existing palette only (#0b5fbf,
   #313131, #555, #f7f7f7) — all of which already pass AA on their backgrounds, so this
   page adds nothing to the Q16 contrast list. Tap targets are >=44px tall (Q18). */
.notfound{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:100vh;}
.notfound__photo{width:100%;height:100%;min-height:520px;object-fit:cover;display:block;}
.notfound__panel{padding:120px 6vw 60px;max-width:620px;}
.notfound__code{font-size:13px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#0b5fbf;margin:0 0 14px;}
.notfound__title{font-size:clamp(30px,3.4vw,44px);font-weight:700;color:#313131;line-height:1.15;letter-spacing:-0.01em;margin:0 0 18px;}
.notfound__text{font-size:17px;color:#555;line-height:1.65;margin:0 0 30px;}
.notfound__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;}
.notfound__btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 34px;border-radius:9999px;text-decoration:none;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;font-size:13px;transition:background .2s ease,color .2s ease;}
.notfound__btn--primary{background:#0b5fbf;color:#fff;}
.notfound__btn--primary:hover{background:#005cb9;}
.notfound__btn--ghost{background:transparent;color:#0b5fbf;box-shadow:inset 0 0 0 1px #0b5fbf;}
.notfound__btn--ghost:hover{background:#f7f7f7;}
.notfound__links{font-size:15px;color:#555;line-height:2;margin:0 0 18px;padding-top:22px;border-top:1px solid #eaeaea;}
/* Underlined so these are not distinguished by colour alone (the WCAG 1.4.1 issue Q15
   tracks on the older body-prose links). */
.notfound__links a,.notfound__phone a{color:#0b5fbf;text-decoration:underline;}
.notfound__phone{font-size:15px;color:#555;margin:0;}
@media (max-width: 900px){
  .notfound{grid-template-columns:1fr;min-height:0;}
  .notfound__photo{min-height:0;height:38vh;max-height:320px;}
  .notfound__panel{padding:44px 24px 64px;max-width:none;}
}
@media (max-width: 480px){
  .notfound__photo{height:30vh;max-height:240px;}
  .notfound__actions .notfound__btn{flex:1 1 100%;}
}