/* front page */

.home {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 88vh;
  min-height: 88svh;
}
.home__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding-top: calc(var(--fixed-top) + 3rem);
  padding-bottom: 4rem;
}

/* the longest word, LIVERPOOL, is about 5.3em wide: the size is capped so it always fits
   the container, and capped again by the height so four lines never outgrow the screen */
.headline {
  --hl-size: min(calc((min(100vw, 86rem) - 2 * var(--gutter)) / 5.6), 19vh);
  --hl-size: min(calc((min(100vw, 86rem) - 2 * var(--gutter)) / 5.6), 19svh);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--hl-size);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  margin: auto 0;
}
.line { display: block; white-space: nowrap; will-change: transform; }
.line-one { opacity: 0.92; }
.line-two { align-self: flex-end; }
.line-three { padding-left: 0.12em; }
.line-four { align-self: stretch; text-align: center; }
.clip { position: relative; display: inline-block; }
.clip_text { display: inline-block; }
.clip_mask {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.clip_mask::before {
  content: attr(data-text);
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-mute);
  opacity: 0;
  transition: opacity .6s ease;
}
.headline:hover .clip_mask::before { opacity: 0.4; }

#asterisk {
  display: inline-block;
  margin-left: 0.18em;
  vertical-align: 0.06em;
  color: var(--ink);
}
#asterisk .c-num { display: block; }
#star { display: block; width: 0.58em; height: 0.58em; }

.home__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.home__sub {
  max-width: 30rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.home__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.home__link { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

.scroll-dot {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #3b3936;
}

/* about */
.about-block { padding: 3rem 0 3.5rem; }
.copytext { max-width: 62rem; }
.lead-copy {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-indent: 2.5em;
}
.lead-copy.is-second { margin-top: 2.25rem; text-indent: 0; padding-left: 1.25rem; color: var(--ink-soft); }
.greeting { color: var(--ink); }

.small-heading {
  font-family: var(--serif);
  font-size: 2.125rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.small-note { font-size: 0.875rem; color: var(--ink-soft); max-width: 36rem; }
.small-note a { color: var(--ink); }

/* designs */
.projects { padding: 3rem 0 4rem; }
.projects-head { margin-bottom: 2rem; }
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem 1.25rem;
}
.link { display: block; position: relative; }
.container__img {
  position: relative;
  aspect-ratio: 675 / 900;
  overflow: hidden;
  background: var(--bg-soft);
}
.content__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1s cubic-bezier(.19,1,.22,1), filter .6s ease;
  filter: grayscale(0.25);
}
.link:hover .content__img { transform: scale(1.04); filter: grayscale(0); }
.container__details { padding-top: 0.875rem; }
.project-name {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.credits__price { color: var(--ink); }

.is-own-plans .own-plans {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  aspect-ratio: 675 / 900;
  padding: 1.5rem;
  border: 1px solid var(--line);
}
.own-plans__kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.own-plans__title {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.own-plans__note { font-size: 0.9375rem; color: var(--ink-soft); }
.is-own-plans:hover .own-plans { border-color: var(--ink-soft); }
.studio .credits__price::after { content: " + VAT"; color: var(--ink-mute); }
.outbuilding { outline: 0; }

/* how a house is made */
.process-block { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.process-head { margin-bottom: 2rem; }
.process-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: none; }
.process-step {
  padding: 1.5rem 0 1.625rem;
  border-top: 1px solid var(--line);
}
.process-step__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.process-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .4s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
.process-step:hover .process-step__icon { border-color: var(--ink-soft); transform: rotate(-8deg); }
.process-step__svg { display: block; }
.process-step__n {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink-mute);
}
.process-step__title {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.process-step__text { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); max-width: 26rem; }
.process-step__meta {
  display: inline-block;
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* shell or turnkey */
.finish-block { padding: 3rem 0 3.5rem; border-top: 1px solid var(--line); }
.finish-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 1.5rem 0 1.75rem; }
.finish-row { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.finish-row__name {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.finish-row__price {
  margin: 0.625rem 0 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.finish-row__list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* spec list, laid out like a press list */
.recognition-block { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.spec-list { margin-top: 2rem; }
.spec-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.is-list-link { margin-top: 1.25rem; }

/* stages */
.stages-block { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.stage-list { margin: 1.5rem 0 1.5rem; }
.stage-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.125rem 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.stage-item__n { grid-row: span 3; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--ink-mute); }
.stage-item__what { font-size: 1.125rem; font-weight: 500; text-transform: uppercase; }
.stage-item__time { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.stage-item__pay { font-size: 0.9375rem; color: var(--ink-soft); }

/* marquee */
.banner { padding: 2rem 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#direction > div { overflow: hidden; }
.u-title-left,
.u-title-right {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 18vw;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  animation: marquee-left 30s linear infinite;
}
.u-title-right {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  animation-name: marquee-right;
  transform: translateX(-50%);
}
@keyframes marquee-left { to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* contact */
.contact { padding: 3.5rem 0 3rem; }
.email { margin-bottom: 1.5rem; }
.emoji-button {
  font-family: var(--serif);
  font-size: 8.5vw;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  word-break: break-all;
}
.emoji-button span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.connect ul { display: flex; flex-direction: column; gap: 0.5rem; }
.connect li { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.plain-line { color: var(--ink-soft); }
.emoji-wrapper { height: 0; }

@media (prefers-reduced-motion: reduce) {
  .u-title-left, .u-title-right { animation: none; }
}

@media (min-width: 48rem) {
  .home { min-height: 100vh; min-height: 100svh; }
  .home__inner { padding-top: calc(var(--fixed-top) + 4rem); padding-bottom: 5rem; }
  .home__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; }
  .home__sub { font-size: 1.125rem; }
  .home__actions { grid-column: 1; }
  .about-block { padding: 5rem 0 5.5rem; }
  .lead-copy { font-size: 1.75rem; }
  .lead-copy.is-second { padding-left: 7rem; }
  .small-heading { font-size: 3.25rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.5rem; }
  .finish-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .finish-row__name { font-size: 3.25rem; }
  .spec-list li { font-size: 1.25rem; padding: 0.9375rem 0; }
  .stage-item { grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 1fr); align-items: baseline; }
  .stage-item__n { grid-row: auto; font-size: 2rem; }
  .emoji-button { font-size: 6vw; }
  .connect ul { flex-direction: row; gap: 2.5rem; }
}

@media (min-width: 64rem) {
  .home__inner { padding-top: calc(var(--fixed-top) + 3.5rem); }
  .line-one { margin-left: 0.4em; }
  .line-three { padding-left: 0.5em; }
  .about-block { padding: 7rem 0 7rem; }
  .lead-copy { font-size: 2.125rem; }
  .lead-copy.is-second { padding-left: 11rem; }
  .projects { padding: 5rem 0 6rem; }
  .projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
  .projects-head .small-heading { margin-bottom: 0; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 2rem; }
  .grid .link:nth-child(3n+2) { margin-top: 5rem; }
  .finish-block, .recognition-block, .stages-block { padding: 6rem 0; }
  .process-block { padding: 6rem 0; }
  .process-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
  .process-head .small-heading { margin-bottom: 0; }
  .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
  .process-step { padding: 2rem 0 2.5rem; }
  .process-step__icon { width: 4.75rem; height: 4.75rem; }
  .spec-list li { font-size: 1.5rem; }
  .u-title-left, .u-title-right { font-size: 13vw; }
  .emoji-button { font-size: 5.25vw; word-break: normal; }
}