/*Tokens*/
:root {
  --clr-accent-1: #f15a23; /*logo orange-red*/
  --clr-accent-2: #fbb615; /*logo yellow*/
  --clr-accent-3: #f7941d; /*logo orange*/
  --clr-base: #ffffff;
  --clr-base-2: #faf6f2;
  --clr-base-3: #ebe4dd;
  --clr-contrast: #2b2a2b;
  --clr-contrast-2: #4c4c4e;
  --clr-contrast-3: #6f6d6e;
  /*Orange dark enough for white button text to stay readable*/
  --clr-accent-1-strong: color-mix(in srgb, var(--clr-accent-1) 82%, black);
  --paint-stripe: linear-gradient(90deg,
    var(--clr-accent-2) 0 25%, var(--clr-accent-3) 25% 50%,
    color-mix(in srgb, var(--clr-accent-3), var(--clr-accent-1)) 50% 75%, var(--clr-accent-1) 75%);
  --shadow-natural: 0 .5rem 1rem rgba(0, 0, 0, 0.07);

  --font-size--small: 0.875rem;
  --font-size--medium: 1.125rem;
  --font-size--large: clamp(1.25rem, 1.19rem + 0.24vw, 1.375rem);
  --font-size--x-large: clamp(1.875rem, 1.2rem + 2vw, 2.75rem);
  --font-size--xx-large: clamp(2.375rem, 1.3rem + 3.6vw, 4rem);
  --content-width: 76rem;

  --corner-shape-squircle: initial;
  --squircle-s: .75rem;
  --squircle-m: 1.5rem;
  --squircle-l: 2rem;
}
@supports (corner-shape: squircle) {
  :root {
    --corner-shape-squircle: squircle;
    --squircle-s: 1rem;
    --squircle-m: 2rem;
    --squircle-l: 3rem;
  }
}

/*Reset*/
* { box-sizing: border-box; margin: 0; padding: 0; }
html { text-size-adjust: none; scroll-behavior: smooth; scroll-padding-block-start: 6rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size--medium);
  line-height: 1.65;
  color: var(--clr-contrast-2);
  background-color: var(--clr-base);
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
::selection { background: var(--clr-accent-2); color: var(--clr-contrast); }

h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--clr-contrast); text-wrap: balance; }
h1 { font-size: var(--font-size--xx-large); }
h2 { font-size: var(--font-size--x-large); }
h3 { font-size: var(--font-size--large); }
h1:not(:last-child), h2:not(:last-child) { margin-block-end: 1.25rem; }
h3:not(:last-child) { margin-block-end: .5rem; }
p:not(:last-child) { margin-block-end: 1.25rem; }
p a { font-weight: 600; color: var(--clr-accent-1-strong); }

section {
  padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 1.25rem;
  > div { max-width: var(--content-width); margin-inline: auto; }
}

.eyebrow {
  font-size: var(--font-size--small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent-1-strong);
  &:not(:last-child) { margin-block-end: .5rem; }
}

.stars { color: var(--clr-accent-2); letter-spacing: .1em; }

.section-head {
  max-width: 40rem;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/*Buttons*/
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: var(--font-size--medium);
  font-weight: 600;
  text-decoration: none;
  padding: .75rem 2rem;
  border-radius: var(--squircle-m);
  corner-shape: var(--corner-shape-squircle);
  background-color: var(--clr-accent-1-strong);
  color: var(--clr-base);
  box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--clr-accent-1) 30%, transparent);
  transition: background-color .2s ease;

  &:not(.no-arrow)::after {
    content: "→";
    transition: transform .2s ease;
  }
  &:hover {
    background-color: color-mix(in srgb, var(--clr-accent-1) 65%, black);
    &::after { transform: translateX(.25rem); }
  }
  &.secondary {
    background-color: transparent;
    color: var(--clr-contrast);
    box-shadow: inset 0 0 0 2px var(--clr-contrast);
    &:hover { background-color: var(--clr-contrast); color: var(--clr-base); }
  }
}
.cta-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  @media (max-width: 40rem) {
    .cta-button { flex: 1 1 100%; }
  }
}

/*Header*/
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background-color: color-mix(in srgb, var(--clr-base) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 4px solid transparent;
  border-image: var(--paint-stripe) 1;
}
.site-header-inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: .5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;

  nav {
    display: flex;
    gap: 1.75rem;
    margin-inline-start: auto;
    a { color: var(--clr-contrast); font-weight: 600; text-decoration: none; }
    a:hover { color: var(--clr-accent-1-strong); }
    @media (max-width: 56rem) { display: none; }
  }
}
.site-logo img { inline-size: 4.75rem; }
.header-phone {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-weight: 700;
  color: var(--clr-contrast);
  text-decoration: none;
  svg { inline-size: 1.25rem; fill: var(--clr-accent-1); }
  @media (max-width: 56rem) { margin-inline-start: auto; }
  @media (max-width: 30rem) {
    span { display: none; }
    svg { inline-size: 1.75rem; }
  }
}
.header-cta { padding: .5rem 1.25rem; font-size: 1rem; }

/*Hero*/
.hero {
  background: linear-gradient(180deg, var(--clr-base-2), var(--clr-base));
  padding-block-start: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.hero-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.hero .lede { font-size: var(--font-size--large); max-width: 36rem; }
.hero .cta-button-group:not(:last-child) { margin-block-end: 1.75rem; }
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--clr-contrast-2);
  text-decoration: none;
  .stars { font-size: 1.25rem; }
  &:hover span:last-child { text-decoration: underline; }
}
.hero-media {
  position: relative;
  img {
    inline-size: 100%;
    border-radius: var(--squircle-l);
    corner-shape: var(--corner-shape-squircle);
    box-shadow: var(--shadow-natural);
  }
  /*Paint-swatch strip borrowed from the logo*/
  &::after {
    content: "";
    position: absolute;
    inset-inline-start: 8%;
    inset-block-end: -1rem;
    inline-size: 45%;
    block-size: 2rem;
    background: var(--paint-stripe);
    border-radius: var(--squircle-s);
    corner-shape: var(--corner-shape-squircle);
  }
}

/*Services*/
.service-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem;

  li {
    padding: 1.5rem;
    background-color: var(--clr-base-2);
    border-block-start: 4px solid var(--clr-accent-3);
    border-radius: var(--squircle-s);
    corner-shape: var(--corner-shape-squircle);
  }
  li:nth-child(4n+1) { border-block-start-color: var(--clr-accent-2); }
  li:nth-child(4n+3) { border-block-start-color: color-mix(in srgb, var(--clr-accent-3), var(--clr-accent-1)); }
  li:nth-child(4n+4) { border-block-start-color: var(--clr-accent-1); }
  p { font-size: 1rem; }
}

/*Process*/
.process {
  background-color: var(--clr-contrast);
  color: color-mix(in srgb, var(--clr-base) 80%, transparent);
  h2, h3 { color: var(--clr-base); }
  .eyebrow { color: var(--clr-accent-2); }
}
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;

  li {
    counter-increment: step;
    &::before {
      content: counter(step, decimal-leading-zero);
      display: block;
      font-size: 2.5rem;
      font-weight: 800;
      line-height: 1;
      margin-block-end: 1rem;
      color: var(--clr-accent-3);
    }
  }
  p { font-size: 1rem; }
}

/*Reviews*/
.reviews { background-color: var(--clr-base-2); }
.review-card {
  background-color: var(--clr-base);
  border-radius: var(--squircle-m);
  corner-shape: var(--corner-shape-squircle);
  box-shadow: var(--shadow-natural);
  overflow: hidden;

  blockquote { margin-block-end: 1rem; }
  blockquote p { font-size: 1rem; }
}
.review-body {
  padding: 1.5rem;
  .stars { display: block; margin-block-end: .5rem; }
}
.review-author {
  font-weight: 700;
  color: var(--clr-contrast);
  span {
    display: block;
    font-size: var(--font-size--small);
    font-weight: 400;
    color: var(--clr-contrast-3);
  }
}
.photo-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.5rem;
  align-items: start;
  margin-block-end: 1.5rem;
}
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background-color: var(--clr-base);

  figure { position: relative; }
  img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  &.tall img { aspect-ratio: 3 / 4; }
  figcaption {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: var(--squircle-s);
    corner-shape: var(--corner-shape-squircle);
    background-color: color-mix(in srgb, var(--clr-contrast) 80%, transparent);
    color: var(--clr-base);
  }
  figure:last-child figcaption { background-color: var(--clr-accent-1-strong); }
}
.text-reviews {
  columns: 20rem;
  column-gap: 1.5rem;
  .review-card { break-inside: avoid; margin-block-end: 1.5rem; }
}
.review-photo { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/*About*/
.about > .split:not(:last-child) { margin-block-end: clamp(3.5rem, 2rem + 5vw, 6rem); }
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);

  > img {
    inline-size: 100%;
    border-radius: var(--squircle-l);
    corner-shape: var(--corner-shape-squircle);
  }
  &.reverse > img {
    @media (min-width: 52rem) { order: 2; }
  }
}

/*Final CTA*/
.final-cta {
  text-align: center;
  background-color: var(--clr-base-2);
  border-block-start: 6px solid transparent;
  border-image: var(--paint-stripe) 1;
  .cta-button-group { justify-content: center; }
}

/*Footer*/
.site-footer {
  background-color: var(--clr-contrast);
  color: color-mix(in srgb, var(--clr-base) 75%, transparent);
  padding: 3.5rem 1.25rem 2rem;
  font-size: 1rem;

  h3 { color: var(--clr-base); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
  a { color: inherit; font-weight: 400; }
  a:hover { color: var(--clr-accent-2); }
}
.site-footer-inner {
  max-width: var(--content-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2rem;
  p { overflow-wrap: anywhere; }
}
.footer-logo {
  inline-size: 7rem;
  padding: .75rem;
  background-color: var(--clr-base);
  border-radius: var(--squircle-m);
  corner-shape: var(--corner-shape-squircle);
}
.copyright {
  max-width: var(--content-width);
  margin: 2.5rem auto 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--clr-base) 15%, transparent);
  font-size: var(--font-size--small);
}