@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --paper: #edeae3;
  --ink: #12110f;
  --soft-ink: #6c685e;
  --line: rgba(18, 17, 15, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  width: 100%;
  padding: 25px 32px;
  color: #fff;
}
.brand { display: inline-flex; flex-direction: column; width: max-content; font-size: 12px; font-weight: 800; line-height: .82; letter-spacing: -.7px; }
.brand span:last-child { padding-left: 14px; }
.site-nav { display: flex; gap: 26px; padding-top: 1px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.site-nav a, .header-contact { opacity: .92; transition: opacity 180ms ease; }
.site-nav a:hover, .header-contact:hover { opacity: .58; }
.header-contact { justify-self: end; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.header-contact span { margin-left: 6px; font-size: 15px; vertical-align: -1px; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: min(830px, 100svh);
  flex-direction: column;
  justify-content: space-between;
  padding: 88px 32px 31px;
  color: #fff;
  overflow: hidden;
  background: #201b17 url("images/stone-hero.png") center / cover no-repeat;
}
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(10, 9, 7, .68), rgba(10, 9, 7, .13) 62%, rgba(10, 9, 7, .3)), linear-gradient(0deg, rgba(10, 9, 7, .58), transparent 44%);
}
.hero__texture {
  position: absolute;
  z-index: -1;
  top: -8%;
  right: 11%;
  width: 31%;
  height: 116%;
  opacity: .4;
  border-left: 1px solid rgba(255, 255, 255, .18);
  border-right: 1px solid rgba(255, 255, 255, .13);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 7px);
  transform: skewX(-12deg);
}
.hero__topline { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.hero__logo {
  align-self: center;
  max-width: 900px;
  margin-top: auto;
  margin-bottom: auto;
  font-size: clamp(72px, 13.15vw, 202px);
  font-weight: 800;
  letter-spacing: -.095em;
  line-height: .74;
  text-align: center;
  text-shadow: 0 2px 36px rgba(0, 0, 0, .25);
}
.hero__logo span { display: block; }
.hero__logo span:last-child { padding-left: .33em; }
.hero__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; font-size: 12px; line-height: 1.35; }
.hero__footer p { margin: 0; }
.hero__note { justify-self: end; text-align: right; }
.round-link { display: grid; width: 55px; height: 55px; place-items: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; font-size: 21px; transition: .25s ease; }
.round-link:hover { color: var(--ink); background: #fff; transform: translateY(4px); }

.intro, .projects, .services, .manifesto { padding-right: 32px; padding-left: 32px; }
.intro { padding-top: 126px; padding-bottom: 132px; background: var(--paper); }
.eyebrow { margin: 0; color: var(--soft-ink); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.intro__copy { display: grid; grid-template-columns: minmax(0, 1.56fr) minmax(230px, .55fr); gap: 11%; margin-top: 32px; }
.intro h1, .services h2, .contact h2 { max-width: 880px; margin: 0; font-size: clamp(36px, 5.1vw, 76px); font-weight: 600; letter-spacing: -.07em; line-height: .97; }
.intro__aside { align-self: end; padding-bottom: 6px; }
.intro__aside p { margin: 0 0 35px; color: #464239; font-size: 13px; line-height: 1.58; }
.text-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.text-link span { margin-left: 12px; font-size: 16px; }

.projects { padding-bottom: 25px; background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; padding: 18px 0 22px; border-top: 1px solid var(--line); }
.section-heading > p:last-child { margin: 0; color: var(--soft-ink); font-size: 10px; font-weight: 700; }
.projects-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 11px; }
.project-card { position: relative; display: flex; min-height: 460px; overflow: hidden; background-color: #3a352e; background-position: center; background-size: cover; color: #fff; }
.project-card--hero { grid-column: span 7; min-height: 650px; }
.project-card--tall { grid-column: span 5; min-height: 650px; }
.project-card--standard { grid-column: span 5; }
.project-card--wide { grid-column: span 7; }
.project-01 { background-image: url("images/stone-hero.png"); }
.project-02 { background-image: url("images/stone-plaster.png"); }
.project-03 { background-image: url("images/stone-onyx.png"); }
.project-04 { background-image: url("images/stone-hero.png"); }
.project-05 { background-image: url("images/stone-plaster.png"); }
.project-card__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 55%), linear-gradient(90deg, rgba(0,0,0,.34), transparent 58%); transition: background .4s ease; }
.project-card:hover .project-card__shade { background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.04) 72%); }
.project-card__content { z-index: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; width: 100%; padding: 18px; }
.project-card__index { font-size: 10px; font-weight: 700; }
.project-card__arrow { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 16px; }
.project-card__content div { align-self: end; grid-column: 1 / -1; }
.project-card h2 { margin: 0; font-size: clamp(28px, 3.3vw, 50px); font-weight: 650; letter-spacing: -.07em; line-height: .94; }
.project-card p { margin: 9px 0 0; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.project-card__mark { position: absolute; top: 19px; right: 61px; z-index: 1; margin: 0 !important; color: rgba(255,255,255,.95); font-size: 10px !important; font-weight: 800 !important; line-height: .78; letter-spacing: -.6px; }

.manifesto { min-height: 580px; padding-top: 115px; padding-bottom: 88px; color: #e9e6df; background: #191816; }
.manifesto .eyebrow { color: #aaa69d; }
.manifesto__statement { display: flex; justify-content: space-between; margin-top: 33px; color: var(--paper); font-size: clamp(41px, 7.2vw, 110px); font-weight: 700; letter-spacing: -.09em; line-height: .83; }
.manifesto__statement span:nth-child(2) { color: #8d7461; }
.manifesto__statement span:last-child { color: #d7d0c5; }
.manifesto__copy { max-width: 445px; margin: 111px 0 0 auto; color: #c8c2b9; font-size: 16px; line-height: 1.48; }

.services { display: grid; grid-template-columns: minmax(260px, .88fr) minmax(0, 1.2fr); gap: 8%; padding-top: 128px; padding-bottom: 133px; background: var(--paper); }
.services__lead h2 { margin-top: 31px; font-size: clamp(35px, 4.2vw, 60px); }
.services__list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 45px 1fr minmax(132px, .55fr) 20px; gap: 10px; align-items: center; min-height: 100px; border-bottom: 1px solid var(--line); }
.service-row > span:first-child, .service-row p { color: var(--soft-ink); font-size: 10px; font-weight: 600; }
.service-row h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.04em; }
.service-row p { margin: 0; line-height: 1.4; }
.service-row__arrow { color: var(--ink) !important; font-size: 18px !important; }
.service-row:hover h3 { color: #947152; }

.contact { display: grid; grid-template-columns: .84fr 1.16fr; min-height: 660px; color: #f1eee7; background: #292521; }
.contact__image { min-height: 100%; background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.08)), url("images/stone-onyx.png") center / cover; }
.contact__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 66px 10.4%; }
.contact .eyebrow { color: #aea79e; }
.contact h2 { max-width: 580px; margin-top: 22px; color: #f5f2eb; font-size: clamp(42px, 4.8vw, 69px); }
.contact__panel > p:not(.eyebrow) { max-width: 480px; margin: 19px 0 30px; color: #beb7ae; font-size: 13px; line-height: 1.6; }
.estimate-form { width: 100%; max-width: 620px; }
.estimate-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.estimate-form label { display: block; margin-bottom: 14px; }
.estimate-form label > span { display: block; margin-bottom: 7px; color: #aaa39a; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.estimate-form input, .estimate-form select, .estimate-form textarea {
  width: 100%;
  border: 1px solid rgba(242, 238, 230, .25);
  border-radius: 0;
  outline: none;
  color: #f5f2eb;
  background: rgba(255, 255, 255, .035);
  font: inherit;
  font-size: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.estimate-form input, .estimate-form select { height: 45px; padding: 0 12px; }
.estimate-form textarea { min-height: 82px; padding: 12px; resize: vertical; }
.estimate-form input::placeholder, .estimate-form textarea::placeholder { color: #8e8880; opacity: 1; }
.estimate-form select { color: #d7d0c6; }
.estimate-form select option { color: #181613; background: #f1ede6; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { border-color: #e8dfd2; background: rgba(255, 255, 255, .08); }
.estimate-form__full { margin-bottom: 0 !important; }
.estimate-form__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-top: 9px; }
.estimate-form__footer p { max-width: 255px; margin: 0 !important; color: #aaa39a !important; font-size: 10px !important; line-height: 1.45 !important; }
.estimate-form__footer strong { color: #e6dfd5; font-weight: 600; }
.estimate-form button {
  flex: none;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid #eee9de;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.estimate-form button span { margin-left: 14px; font-size: 17px; }
.estimate-form button:hover { color: #c8a27a; border-color: #c8a27a; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 30px 32px; color: #d0cbc0; background: #12110f; }
.brand--footer { color: #f3f0e9; }
.site-footer p, .site-footer div { margin: 0; font-size: 10px; font-weight: 600; }
.site-footer div { display: flex; justify-content: end; gap: 20px; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: #9f7d58; }

@media (max-width: 740px) {
  .site-header { padding: 20px 17px; grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .header-contact { font-size: 9px; }
  .hero { min-height: 720px; padding: 72px 17px 19px; }
  .hero__topline { font-size: 8px; }
  .hero__logo { width: 100%; font-size: clamp(58px, 17.5vw, 110px); }
  .hero__footer { font-size: 10px; }
  .round-link { width: 48px; height: 48px; }
  .intro, .projects, .services, .manifesto { padding-right: 17px; padding-left: 17px; }
  .intro { padding-top: 78px; padding-bottom: 83px; }
  .intro__copy { grid-template-columns: 1fr; gap: 34px; }
  .intro h1, .services h2 { font-size: 39px; }
  .intro__aside { max-width: 335px; }
  .projects-grid { grid-template-columns: 1fr; gap: 8px; }
  .project-card, .project-card--hero, .project-card--tall, .project-card--standard, .project-card--wide { grid-column: span 1; min-height: 475px; }
  .project-card h2 { font-size: 41px; }
  .manifesto { min-height: 450px; padding-top: 78px; padding-bottom: 55px; }
  .manifesto__statement { flex-direction: column; gap: 10px; font-size: 66px; }
  .manifesto__copy { margin-top: 60px; font-size: 14px; }
  .services { grid-template-columns: 1fr; gap: 50px; padding-top: 80px; padding-bottom: 84px; }
  .service-row { grid-template-columns: 31px 1fr 18px; min-height: 106px; gap: 8px; }
  .service-row p { display: none; }
  .service-row h3 { font-size: 16px; }
  .contact { grid-template-columns: 1fr; }
  .contact__image { min-height: 380px; }
  .contact__panel { min-height: 445px; padding: 58px 17px; }
  .contact h2 { font-size: 51px; }
  .estimate-form__row { grid-template-columns: 1fr; gap: 0; }
  .estimate-form__footer { align-items: flex-start; flex-direction: column; gap: 23px; margin-top: 15px; }
  .estimate-form__footer p { max-width: 315px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 25px; padding: 26px 17px; }
  .site-footer p { justify-self: end; }
  .site-footer div { grid-column: 1 / -1; justify-content: space-between; }
}