/* Centex Exteriors site. Colors come from his logo. The questions page has its own style.css. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ink: #191d1f;
  --ink-soft: #2e3538;
  --text: #22282b;
  --muted: #57636a;
  --todo: #87929a;
  --blue: #0867a7;
  --blue-deep: #054f81;
  --blue-wash: #e7f0f6;
  --stone: #f1f3f4;
  --field: #c3ccd2;
  --error: #b42318;
  --white: #ffffff;
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blue);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--blue-deep);
}

a[href^="tel:"] {
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.hero :focus-visible,
.page-hero :focus-visible,
.highlights :focus-visible,
.section--dark :focus-visible,
.estimate__intro :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.35rem + 3vw, 3.5rem);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 1.02rem;
  font-stretch: 106%;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--white);
}

.button--outline {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.button--outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.button--light {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}

.button--light:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.button--small {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.95rem;
}

.button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* Header and menu */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  box-shadow: 0 1px 0 rgb(25 29 31 / 0.09);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-height: 72px;
}

.site-header__logo {
  flex: none;
  margin-right: auto;
}

.site-header__logo img {
  width: auto;
  height: 40px;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a:not(.button) {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-weight: 550;
  text-decoration: none;
}

.site-nav__list a:not(.button):hover,
.site-nav__list a[aria-current="page"] {
  color: var(--blue);
}

.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__phone {
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__call,
.nav-toggle,
.site-nav__estimate {
  display: none;
}

.site-header__call,
.nav-toggle {
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.site-header__call {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

/* Below desktop width the menu sits under the bar: open and closed with the
   Menu button when scripts run, always shown when they don't. */
@media (max-width: 1139px) {
  .site-nav {
    order: 3;
    width: 100%;
    padding-bottom: 12px;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .site-nav__list a:not(.button) {
    padding: 12px 0;
    font-size: 1.15rem;
  }

  .site-nav__estimate {
    display: block;
    margin-top: 12px;
  }

  .site-nav__estimate .button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .site-header__bar {
    min-height: 64px;
    gap: 10px 12px;
  }

  .site-header__logo img {
    height: 32px;
  }

  .site-header__phone,
  .site-header__estimate {
    display: none;
  }

  .site-header__call {
    display: inline-flex;
  }

  .site-header__actions {
    gap: 8px;
  }
}

@media (max-width: 359px) {
  .site-header__logo img {
    height: 26px;
  }
}

/* Sections */

.section {
  padding-block: clamp(56px, 8vw, 104px);
}

.section--stone {
  background: var(--stone);
}

.section--dark {
  background: var(--ink);
  color: #c4cbcf;
}

.section--dark h2 {
  color: var(--white);
}

.section__title {
  margin-bottom: clamp(24px, 4vw, 40px);
  font-size: clamp(1.8rem, 1.25rem + 2vw, 2.6rem);
}

.hero__lead {
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 480px) {
  .hero__actions .button {
    width: 100%;
  }
}

/* Home page top: his patio cover photo behind his headline (follow-up
   question 1). The shade is darkest where the text sits. On phones and
   tablets it starts just above the text, wherever that lands, so the photo
   stays clear above it. On desktops it covers the left side, over the
   bright sky. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(620px, calc(100svh - 64px));
  padding-block: 170px 36px;
  overflow: hidden;
  background: var(--ink);
  color: #e3e7ea;
}

.hero__text {
  position: relative;
}

.hero__text::before {
  position: absolute;
  inset: -140px -100vw -36px;
  z-index: -1;
  background: linear-gradient(rgb(25 29 31 / 0), rgb(25 29 31 / 0.74) 140px, rgb(25 29 31 / 0.88));
  content: "";
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
}

.hero__text {
  max-width: 36rem;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.5rem);
}

.hero .hero__lead {
  color: #e3e7ea;
}

@media (min-width: 960px) {
  .hero {
    align-items: center;
    min-height: clamp(540px, 76vh, 700px);
    padding-block: 80px;
  }

  .hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(25 29 31 / 0.88), rgb(25 29 31 / 0.78) 50%, rgb(25 29 31 / 0.25) 78%, rgb(25 29 31 / 0.05));
    content: "";
  }

  .hero__text::before {
    content: none;
  }

  .hero__bg {
    object-position: center 35%;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 1rem + 2.6vw, 3.5rem);
  }
}

/* The four facts from his answers, on his logo blue under the photo. */

.highlights {
  background: var(--blue);
  color: var(--white);
  font-weight: 650;
}

.highlights__list {
  display: grid;
  gap: 8px 32px;
  margin-block: 0;
  padding: 18px 0;
  list-style: none;
}

.highlights__list li,
.hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* A small slanted bar, like the bars in his logo. */
.highlights__list li::before,
.hero__facts li::before {
  flex: none;
  width: 12px;
  height: 5px;
  background: var(--blue);
  transform: translateY(-3px) skewX(-40deg);
  content: "";
}

.highlights__list li::before {
  background: var(--white);
}

@media (min-width: 600px) {
  .highlights__list {
    grid-template-columns: repeat(2, max-content);
  }
}

@media (min-width: 1000px) {
  .highlights__list {
    display: flex;
    justify-content: space-between;
    padding-block: 22px;
  }
}

/* What-we-do lists at the top of each service page */

.page-hero__grid {
  display: grid;
  gap: 32px;
}

.page-hero__photo img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.hero__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 32px;
  margin: 24px 0 0;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  list-style: none;
}

/* Two columns where each item fits on one line: wide phones and tablets,
   and desktops wide enough for the text column. */
@media (min-width: 600px) and (max-width: 959px), (min-width: 1200px) {
  .hero__facts {
    grid-template-columns: repeat(2, max-content);
  }

  .hero__facts li {
    white-space: nowrap;
  }
}

/* Service page top */

/* Dark like the home page top, so the photo stands out. */
.page-hero {
  padding-block: clamp(28px, 5vw, 64px);
  background: var(--ink);
  color: #e3e7ea;
}

.page-hero h1,
.page-hero .hero__facts {
  color: var(--white);
}

.page-hero .hero__lead {
  color: #e3e7ea;
}

.page-hero .hero__facts li::before {
  background: #3d95d4;
}

.page-hero__photo img {
  aspect-ratio: 3 / 2;
}

.page-hero__photo--tall img {
  aspect-ratio: 4 / 5;
  max-height: 620px;
}

@media (min-width: 960px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }
}

/* What we do */

.services {
  display: grid;
  gap: 48px 32px;
}

@media (min-width: 760px) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service {
  position: relative;
}

.service__photo {
  width: 100%;
  margin-bottom: 20px;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.service__name {
  margin-bottom: 0.35em;
  font-size: 1.55rem;
}

.service__name a {
  color: var(--ink);
  text-decoration: none;
}

/* The whole card opens the service page. */
.service__name a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.service:hover .service__name a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.service__jobs {
  color: var(--muted);
}

/* Before and after */

.before-after {
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .before-after {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (min-width: 960px) {
  .before-after--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }
}

.before-after__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.before-after figure {
  position: relative;
  margin: 0;
}

.before-after img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.before-after figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgb(25 29 31 / 0.86);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 650;
}

.before-after__note {
  margin-top: 14px;
  color: var(--muted);
}

/* Reviews */

.reviews {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .reviews {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .reviews .review--long {
    grid-row: span 2;
  }
}

.review {
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--stone);
}

.section--stone .review {
  background: var(--white);
}

.section--dark .review {
  background: var(--ink-soft);
}

.section--dark .review blockquote {
  color: var(--white);
}

.section--dark .review figcaption {
  color: #c4cbcf;
}

.review blockquote {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.55;
}

.review blockquote p {
  margin-bottom: 0.7em;
}

.review blockquote p:last-child {
  margin-bottom: 0;
}

.review--long blockquote {
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem);
}

/* He says every review was 5 stars (follow-up question 3). */
.review__stars {
  margin: 0 0 14px;
  line-height: 0;
}

.review__stars svg {
  fill: #e9a51e;
}

.review figcaption {
  color: var(--ink-soft);
  font-weight: 650;
}

.single-review {
  max-width: 760px;
  margin-top: 40px;
}

/* Photo grid, opened large by main.js */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The four photos that repeat the "What we do" pictures, left out on phones
   to keep the home page shorter. */
@media (max-width: 639px) {
  .gallery__extra {
    display: none;
  }
}

.gallery a {
  display: block;
  border-radius: 4px;
  overflow: hidden;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.gallery a:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .gallery img {
    transition: none;
  }
}

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgb(12 14 15 / 0.94);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 64px 16px 88px;
}

.lightbox__figure img {
  width: auto;
  max-width: min(1200px, 100%);
  max-height: 100%;
  border-radius: 4px;
  object-fit: contain;
}

.lightbox__figure figcaption {
  max-width: 60ch;
  margin-top: 12px;
  color: #dfe4e7;
  text-align: center;
}

.lightbox__button {
  position: fixed;
  min-width: 48px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.14);
  color: var(--white);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.lightbox__button:hover {
  background: rgb(255 255 255 / 0.26);
}

.lightbox__close {
  top: 12px;
  right: 12px;
}

.lightbox__prev,
.lightbox__next {
  bottom: 20px;
}

.lightbox__prev {
  left: 16px;
}

.lightbox__next {
  right: 16px;
}

/* Where we work */

.area {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  .area {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 56px;
  }
}

.area__map svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.area-map__land {
  fill: #eef0f2;
}

.area-map__counties {
  fill: none;
  stroke: #cfd6db;
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
}

.area-map__water {
  fill: #b5d4ec;
}

.area-map__highway-edge,
.area-map__highway,
.area-map__freeway-edge,
.area-map__freeway {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-map__highway-edge {
  stroke: #c3cbd1;
  stroke-width: 4.2;
}

.area-map__highway {
  stroke: var(--white);
  stroke-width: 2.6;
}

.area-map__freeway-edge {
  stroke: #d39b35;
  stroke-width: 6;
}

.area-map__freeway {
  stroke: #f5cb68;
  stroke-width: 4;
}

.area-map__shield rect {
  fill: var(--white);
  stroke: #8d979e;
  stroke-width: 1.2;
}

.area-map__shield text {
  fill: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.area-map__shield--interstate rect {
  fill: #2d5f9a;
  stroke: var(--white);
}

.area-map__shield--interstate text {
  fill: var(--white);
}

.area-map__shield {
  transform-box: fill-box;
  transform-origin: center;
}

.area-map__dot {
  fill: var(--ink-soft);
  stroke: var(--white);
  stroke-width: 1.5;
}

.area-map__dot--home {
  fill: var(--blue);
  stroke-width: 3;
}

/* Labels get an outline in the land color, so they read over roads. */
.area-map__label,
.area-map__water-label {
  font-family: "Archivo", system-ui, sans-serif;
  paint-order: stroke;
  stroke: #eef0f2;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.area-map__label {
  fill: var(--ink-soft);
  font-size: 17px;
  font-weight: 550;
}

.area-map__water-label {
  fill: #2f6f9f;
  font-size: 14px;
  font-weight: 500;
}

.area-map__label--city {
  fill: var(--ink);
  font-size: 22px;
  font-weight: 750;
}

.area-map__label--home {
  fill: var(--blue);
  font-size: 21px;
  font-weight: 750;
}

@media (max-width: 640px) {
  .area-map__dot {
    r: 6px;
  }

  .area-map__dot--home {
    r: 10px;
  }

  .area-map__highway-edge {
    stroke-width: 7;
  }

  .area-map__highway {
    stroke-width: 4.4;
  }

  .area-map__freeway-edge {
    stroke-width: 10;
  }

  .area-map__freeway {
    stroke-width: 7;
  }

  .area-map__shield {
    transform: scale(1.45);
  }

  .area-map__label,
  .area-map__water-label {
    stroke-width: 6px;
  }

  /* Bigger dots need a little more room beside them. */
  .area-map__label[text-anchor="start"] {
    transform: translateX(5px);
  }

  .area-map__label[text-anchor="end"] {
    transform: translateX(-5px);
  }

  .area-map__label {
    font-size: 26px;
  }

  .area-map__water-label {
    font-size: 23px;
  }

  .area-map__label--city,
  .area-map__label--home {
    font-size: 32px;
  }
}

/* Short facts: hours, payment, warranty and so on */

.facts {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
}

.facts div {
  display: grid;
  gap: 2px;
}

/* From tablet width up, labels share one column sized to the longest label,
   so each one stays on a single line and the answers line up. */
@media (min-width: 520px) {
  .facts {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 14px 28px;
  }

  .facts div {
    display: contents;
  }
}

.facts dt {
  color: var(--ink);
  font-weight: 650;
}

.facts dd {
  margin: 0;
}

/* About */

.about {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 56px;
  }
}

.about__photo img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Questions he hasn't answered yet, shown in the same gray as the example
   text in form fields. Find them all with: grep -rn data-todo site */
.todo {
  color: var(--todo);
}

.todo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 32px;
  border: 2px dashed #b5bfc5;
  border-radius: var(--radius);
  background: #fafbfb;
  color: var(--todo);
  text-align: center;
  aspect-ratio: 4 / 5;
}

.todo-box p {
  margin: 0;
}

@media (max-width: 899px) {
  .about__photo img {
    aspect-ratio: 3 / 2;
    object-position: center 55%;
  }
}

/* Other services, at the bottom of each service page */

.more-services {
  display: grid;
  gap: 28px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .more-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.more-services li {
  position: relative;
}

.more-services li:has(a[aria-current]) {
  display: none;
}

.more-services img {
  width: 100%;
  margin-bottom: 12px;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.more-services a {
  color: var(--ink);
  font-size: 1.25rem;
  font-stretch: 112%;
  font-weight: 700;
  text-decoration: none;
}

.more-services a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.more-services li:hover a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Estimate form */

/* On his logo blue, with the form on a white card. */
.estimate {
  background: var(--blue);
  color: var(--white);
}

.estimate h2 {
  color: var(--white);
}

.estimate__intro a,
.estimate__intro a:hover {
  color: var(--white);
}

.estimate__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .estimate__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    align-items: start;
    gap: 64px;
  }
}

.estimate__intro p {
  color: var(--white);
  font-size: 1.1rem;
}

.estimate-form {
  padding: clamp(20px, 4vw, 40px);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(25 29 31 / 0.08);
}

.field-row {
  display: grid;
  gap: 0 20px;
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191d1f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
}

.field ::placeholder {
  color: var(--todo);
  opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgb(8 103 167 / 0.25);
  outline-offset: 0;
}

.field [aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 0.92rem;
  font-weight: 550;
}

.choices__list {
  display: flex;
  gap: 8px;
}

.choices__list label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  font-weight: 500;
  cursor: pointer;
}

.choices__list input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--blue);
}

.choices__list label:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-wash);
}

.field--trap {
  position: absolute;
  left: -9999px;
}

.estimate-form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .estimate-form__send .button {
    width: 100%;
  }
}

.estimate-form__status:empty {
  display: none;
}

.estimate-form__status.is-error {
  color: var(--error);
  font-weight: 550;
}

.estimate-form__done h3 {
  font-size: 1.5rem;
}

/* It gets focus so screen readers announce it; it's not something to act on. */
.estimate-form__done:focus {
  outline: none;
}

/* Thanks and not-found pages */

.message-page__inner {
  max-width: 680px;
}

.message-page__links {
  margin: 0 0 1.5em;
  padding-left: 1.2em;
}

/* Footer */

.site-footer {
  padding-block: 56px 32px;
  background: var(--ink);
  color: #c4cbcf;
  font-size: 0.98rem;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}

.site-footer__brand img {
  width: auto;
  height: 40px;
  margin-bottom: 16px;
}

.site-footer__heading {
  margin-bottom: 10px;
  color: var(--white);
  font-size: 1rem;
  font-stretch: 100%;
}

.site-footer p {
  margin-bottom: 0.8em;
}

.site-footer__links {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal {
  margin-top: 40px;
  color: #939ca2;
  font-size: 0.9rem;
}

/* Logo files page (/brand) */

.logo-kit__all {
  margin: 24px 0 8px;
}

.logo-kit__title {
  margin-top: 48px;
  font-size: 1.6rem;
}

.logo-kit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.logo-kit__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 24px;
  border: 1px solid #dde2e5;
  border-radius: var(--radius);
  background: var(--white);
}

.logo-kit__preview--dark {
  border-color: var(--ink);
  background: var(--ink);
}

.logo-kit__preview img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.logo-kit--wide .logo-kit__preview img {
  width: 100%;
  height: auto;
}

.logo-kit__name {
  margin: 12px 0 4px;
  color: var(--ink);
  font-weight: 650;
}

.logo-kit__links {
  display: flex;
  gap: 16px;
}

.logo-kit__links a {
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}