@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, blockquote, dl, dd { margin: 0; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
}

@layer base {
  :root {
    --ink: #191715;
    --paper: #f1ede4;
    --mortar: #d7d0c3;
    --lime: #f8f5ef;
    --oxide: #9f2924;
    --oxide-dark: #721d1a;
    --brick: #ba5d44;
    --stone: #81796b;
    --sage: #39443d;
    --line: #aaa194;
    --display: "Libre Caslon Display", Georgia, serif;
    --utility: "Barlow Condensed", "Arial Narrow", sans-serif;
  }

  html { background: var(--ink); }
  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--utility);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, blockquote { font-family: var(--display); }
  h1, h2, h3 { line-height: .96; letter-spacing: -.035em; }
  h2 { font-size: clamp(3rem, 6.4vw, 7.8rem); }
  h3 { font-size: clamp(2rem, 3.1vw, 3.7rem); }
  p { max-width: 62ch; }
  a { text-underline-offset: .18em; }
  ::selection { background: var(--oxide); color: white; }

  .skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 999;
    background: white;
    color: black;
    padding: .7rem 1rem;
  }
  .skip-link:focus { top: 1rem; }


}

@layer layout {
  .estimate-bar {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 2.1vw;
    background: var(--oxide);
    color: #fff;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .estimate-bar a { font-weight: 700; }

  .site-header {
    position: relative;
    z-index: 10;
    min-height: 106px;
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr auto;
    align-items: center;
    gap: 3vw;
    padding: 0 2.1vw;
    background: var(--ink);
    color: #fff;
    border-bottom: 1px solid #35312e;
  }
  .brand { width: min(100%, 214px); background: white; }
  .brand img { width: 100%; height: 74px; object-fit: contain; }
  .site-header nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 3.4rem); }
  .site-header nav a,
  .header-call {
    font-size: .88rem;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .site-header nav a:hover { color: #e48769; }
  .header-call { border-bottom: 2px solid var(--brick); padding-bottom: .25rem; }

  .hero {
    position: relative;
    min-height: calc(100svh - 144px);
    display: grid;
    grid-template-columns: 41% 59%;
    grid-template-rows: 1fr auto;
    background: var(--ink);
    color: white;
  }
  #hero-img {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    min-height: calc(100svh - 144px);
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16,14,13,.96) 0 41%, rgba(16,14,13,.14) 63%, rgba(16,14,13,.06));
    pointer-events: none;
  }
  .hero-title {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: clamp(3rem, 7vw, 8rem) 4vw clamp(2rem, 5vw, 5rem);
  }

  .hero h1 { font-size: clamp(4.3rem, 7.5vw, 9.5rem); }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.5rem; }
  .button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.2rem;
    border: 1px solid currentColor;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .button-light { background: var(--paper); color: var(--ink); }
  .button-light:hover { background: #fff; }
  .text-link { font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
  .hero-proof {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(159,41,36,.94);
  }
  .hero-proof strong {
    padding: 1rem 1.2rem;
    border-left: 1px solid rgba(255,255,255,.28);
    font-size: .78rem;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
  }

  .diagnosis {
    display: grid;
    grid-template-columns: minmax(340px, 1.1fr) minmax(300px, .9fr);
    min-height: 72vh;
    border-bottom: 1px solid var(--line);
  }
  .diagnosis > * { padding: clamp(3rem, 7vw, 8rem) clamp(1.4rem, 4vw, 5rem); }

  .diagnosis-title { display: flex; align-items: center; border-right: 1px solid var(--line); }
  .diagnosis-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; font-size: clamp(1.2rem, 1.65vw, 1.75rem); }

  .work { background: var(--mortar); padding: clamp(5rem, 9vw, 10rem) 4vw; }
  .work-heading {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    align-items: end;
    gap: 3vw;
    margin-bottom: clamp(4rem, 8vw, 9rem);
  }
  .work-heading h2 { max-width: 11ch; }
  .work-heading p { font-size: 1.14rem; }
  .bond-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
  }
  .masonry-unit {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 2.4vw, 3rem);
    border: 1px solid rgba(25,23,21,.45);
  }
  .masonry-unit > span { font-size: .76rem; letter-spacing: .14em; }
  .masonry-unit h3 { margin: auto 0 1.2rem; max-width: 8ch; }
  .masonry-unit p { max-width: 46ch; }
  .unit-brick { grid-column: 1 / 8; background: #a94b38; color: #fff8ef; }
  .unit-tuck { grid-column: 8 / 13; background: #eee8dd; }
  .unit-stone { grid-column: 1 / 6; margin-left: 8.333%; background: #7b7469; color: white; }
  .unit-chimney { grid-column: 6 / 13; background: var(--sage); color: white; }

  .old-homes {
    display: grid;
    grid-template-columns: 43% 57%;
    min-height: 920px;
    background: var(--ink);
    color: var(--paper);
  }
  .old-homes-mark {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 12px;
    padding: 12px;
    background: #b9b0a3;
    overflow: hidden;
  }
  .old-homes-mark span { background: var(--oxide-dark); }
  .old-homes-mark span:nth-child(3),
  .old-homes-mark span:nth-child(4) { transform: translateX(22%); }
  .old-homes-mark::after {
    content: "MORTAR / COLOR / JOINT / PROFILE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    font: 700 clamp(1rem, 2vw, 2.3rem)/1 var(--utility);
    letter-spacing: .16em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  .old-homes-copy { align-self: center; padding: clamp(4rem, 8vw, 10rem) clamp(2rem, 7vw, 9rem); }
  .old-homes-copy h2 { max-width: 8.5ch; margin: 2rem 0 3rem; }
  .old-homes-copy .lead { font: 600 clamp(1.45rem, 2.1vw, 2.35rem)/1.3 var(--display); max-width: 40ch; }
  .old-homes-copy > p + p { margin-top: 1.8rem; color: #c8c1b7; font-size: 1.1rem; }
  .material-ledger { margin-top: 4rem; border-top: 1px solid #55504a; }
  .material-ledger div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #55504a; }
  .material-ledger dt { color: #e48769; font-size: 1.4rem; }
  .material-ledger dd { color: #ddd6cd; }

  .field-notes { padding: clamp(5rem, 10vw, 12rem) 4vw; background: var(--lime); }
  .field-notes > header { display: grid; grid-template-columns: 1fr;gap: 2vw; margin-bottom: 8vw; }
  .field-notes > header h2 { max-width: 10ch; }
  .case {
    width: min(78%, 1160px);
    display: grid;
    grid-template-columns: minmax(180px, .45fr) 1fr;
    gap: 3vw;
    padding: clamp(2rem, 4vw, 4.5rem);
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 9px 9px 0 var(--mortar);
  }
  .case + .case { margin-top: 5vw; }
  .case-right { margin-left: auto; }
  .case-id { border-right: 1px solid var(--line); padding-right: 2vw; }
  .case-id b { display: block; font: 700 clamp(3rem, 6vw, 8rem)/.8 var(--display); color: var(--oxide); }
  .case-id span { display: block; margin-top: 1.5rem; text-transform: uppercase; letter-spacing: .1em; }
  .case blockquote { font-size: clamp(1.45rem, 2.35vw, 2.85rem); line-height: 1.25; }
  .case cite { grid-column: 2; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
  .case-short { width: min(65%, 940px); }

  .review-wall {
    min-height: 82vh;
    display: grid;
    grid-template-columns: .6fr 1.4fr;
    align-content: center;
    gap: 6vw;
    padding: 8vw;
    background: var(--oxide);
    color: white;
    border-block: 14px solid var(--mortar);
  }
  .rating span { display: block; letter-spacing: .18em; }
  .rating strong { display: block; margin-top: .8rem; text-transform: uppercase; letter-spacing: .08em; }
  .review-wall blockquote { font-size: clamp(2rem, 4.1vw, 5.2rem); line-height: 1.08; }
  .review-wall cite { grid-column: 2; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

  .estimate { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
  .estimate-copy { padding: clamp(4rem, 8vw, 10rem) 7vw; }
  .estimate-copy h2 { max-width: 9ch; margin: 2rem 0 2.5rem; }
  .estimate-copy > p { font-size: 1.2rem; }
  .phone-lockup { display: block; margin-top: 3.5rem; font: 700 clamp(2.5rem, 4.6vw, 5.5rem)/1 var(--display); color: var(--oxide-dark); text-decoration: none; }
  .phone-lockup small { display: block; margin-bottom: .7rem; font: 700 .78rem/1 var(--utility); color: var(--ink); letter-spacing: .14em; text-transform: uppercase; }
  .hours { display: flex; gap: 4rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .location { position: relative; min-height: 760px; background: var(--stone); color: white; }
  .location iframe { width: 100%; height: 100%; min-height: 760px; border: 0; filter: grayscale(1) contrast(.9); }
  .location address {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    padding: 1.2rem 1.4rem;
    background: var(--ink);
    font-style: normal;
  }
  .location > a { position: absolute; right: 2rem; bottom: 2rem; padding: .8rem 1rem; background: var(--oxide); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

  footer {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 3rem;
    min-height: 170px;
    padding: 2rem 4vw;
    background: var(--ink);
    color: white;
  }
  footer img { width: 220px; height: 90px; object-fit: contain; background: white; }
  footer p { text-transform: uppercase; letter-spacing: .09em; }
}

@layer responsive {
  @media (max-width: 980px) {
    .site-header { grid-template-columns: 180px 1fr; min-height: 88px; }
    .brand img { height: 62px; }
    .site-header nav { display: none; }
    .header-call { justify-self: end; }
    .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; background: var(--ink); }
    #hero-img { grid-column: 1; grid-row: 1; min-height: 46vh; height: 46vh; object-position: 56% center; }
    .hero::after { display: none; }
    .hero-title { grid-column: 1; grid-row: 2; padding: 3rem 5vw; }
    .hero h1 { font-size: clamp(4rem, 12vw, 7rem); }
    .hero-proof { grid-column: 1; grid-row: 3; }
    .diagnosis { grid-template-columns: 1fr 1fr; }
    .diagnosis-title { border-right: 0; border-bottom: 1px solid var(--line); }
    .work-heading { grid-template-columns: 1.35fr .65fr; }
    .bond-grid { grid-template-columns: 1fr 1fr; }
    .unit-brick, .unit-tuck, .unit-stone, .unit-chimney { grid-column: auto; margin-left: 0; }
    .old-homes { grid-template-columns: 36% 64%; }
    .case { width: 92%; }
    .review-wall { grid-template-columns: 1fr; }
    .review-wall cite { grid-column: 1; }
    .estimate { grid-template-columns: 1fr; }
    .location, .location iframe { min-height: 560px; }
    footer { grid-template-columns: 180px 1fr; }
    footer p:last-child { grid-column: 2; }
  }

  @media (max-width: 620px) {
    body { font-size: 17px; }
    .estimate-bar { justify-content: center; text-align: center; }
    .estimate-bar span { display: none; }
    .site-header { grid-template-columns: 142px 1fr; padding: 0 4vw; }
    .brand img { height: 58px; }
    .header-call { font-size: .78rem; }
    #hero-img { height: 40vh; min-height: 310px; object-position: 54% center; }
    .hero-title { padding: 2.7rem 5vw 3.2rem; }
    .hero-title > p { margin-bottom: 1.4rem; font-size: .7rem; }
    .hero h1 { font-size: clamp(3.7rem, 18vw, 5.4rem); }
    .hero-actions { align-items: stretch; flex-direction: column; margin-top: 2rem; }
    .button { width: 100%; }
    .hero-proof { grid-template-columns: 1fr 1fr; }
    .hero-proof strong { border-bottom: 1px solid rgba(255,255,255,.25); }
    .diagnosis { display: block; min-height: 0; }
    .diagnosis > * { padding: 3rem 5vw; }

    .diagnosis h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
    .diagnosis-copy { font-size: 1.1rem; }
    .work { padding: 5rem 5vw; }
    .work-heading { display: block; }

    .work-heading h2 { font-size: clamp(3.2rem, 14vw, 5rem); margin-bottom: 1.5rem; }
    .bond-grid { display: block; }
    .masonry-unit { min-height: 0; padding: 2rem; }
    .masonry-unit + .masonry-unit { margin-top: 12px; }
    .masonry-unit h3 { margin: 3.2rem 0 1rem; }
    .old-homes { display: block; min-height: 0; }
    .old-homes-mark { height: 340px; }
    .old-homes-mark::after { writing-mode: horizontal-tb; text-align: center; padding: 1rem; }
    .old-homes-copy { padding: 4.5rem 5vw 5.5rem; }
    .old-homes-copy h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
    .material-ledger div { grid-template-columns: 5.5rem 1fr; }
    .field-notes { padding: 5rem 5vw; }
    .field-notes > header { display: block; margin-bottom: 3rem; }

    .field-notes h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
    .case, .case-short { width: 100%; display: block; padding: 1.6rem; box-shadow: 6px 6px 0 var(--mortar); }
    .case + .case { margin-top: 2.2rem; }
    .case-id { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 1.5rem; margin-bottom: 1.5rem; }
    .case-id b { font-size: 3.6rem; }
    .case blockquote { font-size: 1.4rem; }
    .case cite { display: block; margin-top: 1.2rem; }
    .review-wall { min-height: 0; display: block; padding: 5rem 5vw; border-width: 10px; }
    .review-wall blockquote { margin: 3rem 0 2rem; font-size: 2rem; }
    .estimate-copy { padding: 5rem 5vw; }
    .estimate-copy h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
    .phone-lockup { font-size: clamp(2.4rem, 11.8vw, 3.5rem); }
    .hours { gap: 1.5rem; flex-direction: column; }
    .location, .location iframe { min-height: 480px; }
    .location address { left: 1rem; bottom: 4.8rem; }
    .location > a { left: 1rem; right: auto; bottom: 1rem; }
    footer { display: block; padding: 3rem 5vw; }
    footer img { width: 190px; margin-bottom: 2rem; }
    footer p + p { margin-top: 1rem; }
  }
}