:root { --pipeline-paper: #f7f5f0; --pipeline-dark: #171918; }

body { background: var(--pipeline-paper); }

.announcement {
  position: absolute;
  z-index: 20;
  top: 0;
  width: 100%;
  padding: .62rem 4vw;
  border-bottom: 1px solid rgba(255,255,255,.45);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .68rem;
}

.announcement a { margin-left: .7rem; border-bottom: 1px solid; }

.nav {
  top: 38px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 1.35rem 4vw;
  border-bottom: 1px solid rgba(255,255,255,.45);
}

.nav nav { justify-self: start; gap: 1.7rem; }
.nav .brand { align-items: center; justify-self: center; }
.nav .brand span { font-size: 2.45rem; letter-spacing: .03em; font-weight: 400; }
.nav .brand small { letter-spacing: .35em; }

.nav-actions { justify-self: end; display: flex; align-items: center; gap: 1.7rem; text-transform: uppercase; font-size: .72rem; letter-spacing: .13em; }
.nav-cta { border: 1px solid rgba(255,255,255,.75); padding: .72rem 1.1rem; }

.hero { align-items: center; justify-items: center; padding: 11rem 4vw 5rem; text-align: center; }
.hero-image { background-position: center 48%; filter: saturate(.78) contrast(1.05); }
.hero-image:after { background: linear-gradient(0deg, rgba(10,10,9,.38), rgba(10,10,9,.04) 55%, rgba(10,10,9,.28)); }
.hero-copy { max-width: 880px; }
.hero h1 { font-size: clamp(4.2rem, 7.6vw, 8rem); line-height: .9; }
.hero h1 em { color: #fff; font-weight: 500; }
.hero .lede { margin: 1.6rem auto 2.2rem; max-width: 620px; }
.hero-actions { display: flex; justify-content: center; gap: 1rem; }
.primary-button,.secondary-button { min-width: 180px; padding: 1rem 1.25rem; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.primary-button { background: #fff; color: var(--ink); }
.secondary-button { border: 1px solid rgba(255,255,255,.85); color: #fff; }
.scroll-note { display: none; }

.intro { text-align: center; background: #fff; }
.intro h2 { margin-right: auto; margin-left: auto; max-width: 1050px; font-size: clamp(3rem, 5vw, 5.7rem); }
.intro-grid { margin: 4rem auto 0; max-width: 900px; text-align: left; }

.services { background: var(--pipeline-paper); }
.services .section-heading { text-align: center; }
.service-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; border: 0; }
.service-list article { display: flex; flex-direction: column; min-height: 330px; padding: 2rem; border: 1px solid rgba(23,25,24,.18); justify-content: space-between; transition: background .25s,color .25s,transform .25s; }
.service-list article:hover { background: var(--pipeline-dark); color: #fff; transform: translateY(-4px); }
.service-list article > span { font-size: .7rem; letter-spacing: .16em; }
.service-list article b { align-self: flex-end; }
.service-list h3 { font-size: 2rem; }

.feature { min-height: 820px; }
.feature-copy { padding-right: 8vw; }

.projects { background: var(--pipeline-paper); }
.projects .section-heading { text-align: center; }
.project-grid { gap: 1rem; }
.color-card { background: #91cfe9; color: var(--ink); }

.real-gallery { background: #fff; color: var(--ink); text-align: center; }
.gallery-grid { text-align: left; gap: .65rem; }
.gallery-grid figcaption { background: rgba(247,245,240,.9); color: var(--ink); }

.contact { background: #91cfe9; }
.contact button { padding: 1.15rem 1.6rem; }

footer { border-top: 1px solid rgba(255,255,255,.25); }

@media (max-width: 1000px) {
  .service-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .announcement { font-size: .6rem; padding: .55rem 12px; white-space: nowrap; }
  .nav { top: 32px; grid-template-columns: 44px 1fr 44px; padding: 1rem 18px; }
  .nav .brand { grid-column: 2; }
  .nav .brand span { font-size: 1.8rem; }
  .nav-actions { grid-column: 3; grid-row: 1; }
  .nav-actions a:first-child { display: none; }
  .nav-cta { padding: .55rem; font-size: 0; }
  .nav-cta:after { content: '↗'; font-size: 1rem; }
  .hero { min-height: 100svh; padding: 9rem 22px 4rem; }
  .hero h1 { font-size: clamp(3.4rem,15vw,5.2rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .service-list { grid-template-columns: 1fr; }
  .service-list article { min-height: 250px; }
}