.portfolio-section {
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(232, 109, 126, .16), transparent 36rem),
    linear-gradient(180deg, #fffaf3 0%, #f8efe4 100%);
}

.portfolio-heading {
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.portfolio-heading h2 {
  margin: .65rem 0 1rem;
  color: #234d40;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}

.portfolio-heading p {
  max-width: 620px;
  margin: 0 auto;
  color: #675f58;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
}

.portfolio-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  max-width: 1280px;
  margin: 0 auto;
}

.portfolio-card {
  grid-column: span 4;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 24px 55px rgba(42, 31, 24, .12);
}

.portfolio-card.portfolio-feature {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 720px;
}

.portfolio-card.portfolio-wide {
  grid-column: span 5;
  min-height: 460px;
}

.portfolio-card button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #234d40;
  cursor: zoom-in;
}

.portfolio-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .75, .3, 1);
}

.portfolio-card:hover img,
.portfolio-card button:focus-visible img {
  transform: scale(1.045);
}

.portfolio-card button:focus-visible {
  outline: 4px solid #f2bd4b;
  outline-offset: 4px;
}

.portfolio-overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  padding: 5.5rem 1.5rem 1.4rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(transparent, rgba(18, 26, 22, .78));
}

.portfolio-overlay strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
}

.portfolio-overlay small {
  color: rgba(255, 255, 255, .82);
  font-size: .88rem;
}

.portfolio-invitation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  color: #234d40;
}

.portfolio-invitation p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
}

.site-social-links {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.site-social-links a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: inherit;
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
}

.site-social-links svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.pricing-section {
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  background: #234d40;
  color: #fffaf3;
}

.pricing-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  align-items: end;
  gap: 2rem 5rem;
  max-width: 1180px;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}

.pricing-heading .site-kicker {
  grid-column: 1 / -1;
  color: #f0bd4a;
}

.pricing-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.045em;
}

.pricing-heading p {
  margin: 0;
  color: rgba(255, 250, 243, .74);
  font-size: 1.05rem;
  line-height: 1.75;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.pricing-card {
  display: flex;
  min-height: 430px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .055);
}

.pricing-card-featured {
  color: #234d40;
  background: #f0bd4a;
  transform: translateY(-1rem);
}

.pricing-card > span {
  color: #ef9da8;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pricing-card-featured > span {
  color: #7a3e3e;
}

.pricing-card h3 {
  margin: 1.25rem 0 .85rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.05;
}

.pricing-card p {
  margin: 0;
  color: rgba(255, 250, 243, .7);
  line-height: 1.65;
}

.pricing-card-featured p {
  color: rgba(35, 77, 64, .76);
}

.pricing-card strong {
  display: flex;
  margin-top: auto;
  padding-top: 2.5rem;
  flex-direction: column;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  font-weight: 500;
}

.pricing-card strong small {
  margin-bottom: .25rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  opacity: .7;
}

.pricing-card a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}

.pricing-card-featured a {
  color: #234d40;
}

.pricing-note {
  max-width: 780px;
  margin: 2.5rem auto 0;
  color: rgba(255, 250, 243, .62);
  font-size: .9rem;
  line-height: 1.65;
  text-align: center;
}

.process-section {
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 100% 15%, rgba(240, 189, 74, .18), transparent 30rem),
    #fffaf3;
}

.process-heading {
  max-width: 1180px;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}

.process-heading h2 {
  max-width: 850px;
  margin: .7rem 0 0;
  color: #234d40;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.045em;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid rgba(35, 77, 64, .2);
}

.process-steps article {
  min-height: 330px;
  padding: 2.25rem clamp(1rem, 3vw, 2.25rem);
  border-right: 1px solid rgba(35, 77, 64, .2);
}

.process-steps article:first-child {
  padding-left: 0;
}

.process-steps article:last-child {
  padding-right: 0;
  border-right: 0;
}

.process-steps article > span {
  display: block;
  margin-bottom: clamp(4rem, 8vw, 7rem);
  color: #e46f7f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.process-steps h3 {
  margin: 0 0 .75rem;
  color: #234d40;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 500;
}

.process-steps p {
  margin: 0;
  color: #675f58;
  line-height: 1.7;
}

.process-callout {
  display: grid;
  grid-template-columns: auto minmax(16rem, 1fr) auto;
  align-items: center;
  gap: 1.5rem 2rem;
  max-width: 1180px;
  margin: 1rem auto 0;
  padding: 1.4rem 1.6rem;
  border-radius: 1.1rem;
  color: #fff;
  background: #e46f7f;
}

.process-callout strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.process-callout p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: .9rem;
  line-height: 1.55;
}

.process-callout a {
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.faq-section {
  display: grid;
  grid-template-columns: minmax(16rem, .75fr) minmax(22rem, 1.25fr);
  gap: clamp(3rem, 8vw, 8rem);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  color: #fffaf3;
  background: #34293d;
}

.faq-intro {
  max-width: 470px;
}

.faq-intro .site-kicker {
  color: #f0bd4a;
}

.faq-intro h2 {
  margin: .75rem 0 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}

.faq-intro p {
  color: rgba(255, 250, 243, .7);
  line-height: 1.7;
}

.faq-intro a {
  display: inline-flex;
  gap: .5rem;
  margin-top: 1rem;
  color: #f0bd4a;
  font-weight: 800;
  text-decoration: none;
}

.faq-list {
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.faq-list details {
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #f0bd4a;
  font-family: system-ui, sans-serif;
  font-size: 1.25rem;
  transition: transform .25s ease;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 680px;
  margin: -.35rem 3.5rem 1.7rem 0;
  color: rgba(255, 250, 243, .7);
  line-height: 1.7;
}

.care-section {
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 100% 0, rgba(240, 189, 74, .22), transparent 34rem),
    #fffaf3;
}

.care-heading {
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.care-heading h2 {
  margin: .65rem 0 1rem;
  color: #234d40;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
}

.care-heading p {
  max-width: 620px;
  margin: 0 auto;
  color: #675f58;
  line-height: 1.7;
}

.care-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  max-width: 1160px;
  margin: 0 auto;
}

.care-card {
  align-self: start;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid rgba(35, 77, 64, .16);
  border-radius: 1.5rem;
  color: #234d40;
  background: #fff;
  box-shadow: 0 24px 60px rgba(35, 77, 64, .1);
}

.care-card-title {
  padding-bottom: 1.25rem;
  border-bottom: 2px solid #f0bd4a;
}

.care-card-title span {
  color: #c64f63;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.care-card-title h3,
.trust-panel h3 {
  margin: .35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
}

.care-card ol {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: care-step;
}

.care-card li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: .8rem;
  counter-increment: care-step;
}

.care-card li::before {
  grid-row: span 2;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e86d7c;
  font-size: .75rem;
  font-weight: 900;
  content: counter(care-step);
}

.care-card li strong {
  font-size: .92rem;
}

.care-card li span,
.care-card-note {
  color: #675f58;
  font-size: .84rem;
  line-height: 1.55;
}

.care-card-note {
  padding: .9rem 1rem;
  border-radius: .8rem;
  background: #f8efe4;
}

.care-print-button {
  width: 100%;
  margin-top: .6rem;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #234d40;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
}

.trust-panel {
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  color: #234d40;
}

.trust-panel > .site-kicker {
  color: #c64f63;
}

.trust-panel h3 {
  max-width: 620px;
  margin: .65rem 0 2rem;
}

.trust-panel details {
  border-top: 1px solid rgba(35, 77, 64, .2);
}

.trust-panel details:last-child {
  border-bottom: 1px solid rgba(35, 77, 64, .2);
}

.trust-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.trust-panel summary::-webkit-details-marker {
  display: none;
}

.trust-panel summary span {
  color: #e86d7c;
  font-size: 1.25rem;
  transition: transform .2s ease;
}

.trust-panel details[open] summary span {
  transform: rotate(45deg);
}

.trust-panel details p {
  margin: -.25rem 2.5rem 1.25rem 0;
  color: #675f58;
  line-height: 1.65;
}

.story-portrait {
  position: relative;
  width: min(100%, 390px);
  margin: 0 auto 2rem;
  transform: rotate(-2deg);
}

.story-portrait::before {
  position: absolute;
  z-index: -1;
  inset: .8rem -.8rem -.8rem .8rem;
  border-radius: 45% 45% 1.5rem 1.5rem;
  background: #f0bd4a;
  content: "";
}

.story-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 45% 45% 1.5rem 1.5rem;
  filter: saturate(.9) contrast(1.03);
}

.story-portrait figcaption {
  max-width: 18rem;
  margin: .9rem auto 0;
  color: #234d40;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  transform: rotate(2deg);
}

.story-art-enhanced {
  align-content: center;
}

.story-market {
  position: relative;
  width: min(72%, 290px);
  margin: -5rem 0 1.5rem auto;
  transform: rotate(3deg);
}

.story-market::before {
  position: absolute;
  z-index: -1;
  inset: .55rem .55rem -.55rem -.55rem;
  border-radius: 1.2rem;
  background: #e86d7c;
  content: "";
}

.story-market img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: .4rem solid #fffaf3;
  border-radius: 1.2rem;
  box-shadow: 0 20px 45px rgba(35, 77, 64, .2);
}

.story-market figcaption {
  margin: .75rem .25rem 0;
  color: #234d40;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.35rem;
  margin-top: 1.8rem;
}

.story-actions .site-primary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.35rem;
  border-radius: 999px;
  color: #fffaf3;
  background: #234d40;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

.story-actions .site-primary:hover,
.story-actions .site-primary:focus-visible {
  background: #e86d7c;
  transform: translateY(-2px);
}

.story-socials {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #7a7068;
  font-size: .84rem;
  font-weight: 800;
}

.story-socials a {
  color: #234d40;
  text-underline-offset: .22rem;
}

.story-socials a:hover,
.story-socials a:focus-visible {
  color: #c64f63;
}

.booking-card form[data-booking-enhanced="true"] {
  align-items: start;
}

.booking-card form[data-booking-enhanced="true"] label > span {
  display: block;
  margin-bottom: .45rem;
}

.booking-card form[data-booking-enhanced="true"] input,
.booking-card form[data-booking-enhanced="true"] select,
.booking-card form[data-booking-enhanced="true"] textarea {
  width: 100%;
}

.booking-delivery-note {
  margin: .15rem 0 .35rem;
  padding: .85rem 1rem;
  border-left: 3px solid #f0bd4a;
  border-radius: 0 .7rem .7rem 0;
  color: #5f665f;
  background: #fff8e9;
  font-size: .82rem;
  line-height: 1.55;
}

.portfolio-lightbox {
  width: min(94vw, 1100px);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.5rem;
  color: #fff;
  background: #172c25;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .45);
}

@media (max-width: 700px) {
  .story-market {
    width: min(68%, 250px);
    margin-top: -3.5rem;
  }

  .story-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

.portfolio-lightbox::backdrop {
  background: rgba(11, 20, 17, .88);
  backdrop-filter: blur(8px);
}

.portfolio-lightbox img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #0d1915;
}

.portfolio-lightbox > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem 1.35rem;
}

.portfolio-lightbox strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 500;
}

.portfolio-lightbox span {
  color: rgba(255, 255, 255, .7);
}

.portfolio-close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 20, 17, .72);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 900px) {
  .pricing-heading {
    grid-template-columns: 1fr;
  }

  .pricing-heading .site-kicker {
    grid-column: auto;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    min-height: 360px;
  }

  .pricing-card-featured {
    transform: none;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-steps article,
  .process-steps article:first-child,
  .process-steps article:last-child {
    min-height: 0;
    padding: 2rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(35, 77, 64, .2);
  }

  .process-steps article > span {
    margin-bottom: 2rem;
  }

  .process-callout {
    grid-template-columns: 1fr;
  }

  .faq-section {
    grid-template-columns: 1fr;
  }

  .care-layout {
    grid-template-columns: 1fr;
  }

  .portfolio-card,
  .portfolio-card.portfolio-wide {
    grid-column: span 6;
    min-height: 400px;
  }

  .portfolio-card.portfolio-feature {
    grid-column: span 12;
    grid-row: auto;
    min-height: 620px;
  }
}

@media print {
  @page {
    size: auto;
    margin: .45in;
  }

  body > *:not(.care-print-sheet):not(.quote-print-sheet) {
    display: none !important;
  }

  .care-print-sheet {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .care-print-sheet .care-card {
    width: auto;
    margin: 0;
    padding: .3in;
    break-inside: avoid;
    page-break-inside: avoid;
    border: 2px solid #234d40;
    border-radius: .15in;
    box-shadow: none;
  }

  .care-print-sheet .care-card-title h3 {
    font-size: 28pt;
  }

  .care-print-sheet .care-card ol {
    gap: .11in;
    margin: .18in 0;
  }

  .care-print-sheet .care-card-note {
    margin-bottom: 0;
  }

  .quote-print-sheet {
    display: block !important;
    color: #243d34;
    font-family: Arial, sans-serif;
  }

  .quote-print-sheet > article {
    padding: .25in;
    border: 2px solid #234d40;
    border-radius: .12in;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .quote-print-sheet header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: .18in;
    border-bottom: 3px solid #f0bd4a;
  }

  .quote-print-sheet header > div:last-child {
    display: grid;
    gap: .05in;
    text-align: right;
  }

  .quote-print-sheet header span,
  .quote-print-sheet section > span,
  .quote-print-dates span {
    color: #b74457;
    font-size: 8pt;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .quote-print-sheet h1 {
    margin: .03in 0;
    font-family: Georgia, serif;
    font-size: 28pt;
    font-weight: 500;
  }

  .quote-print-sheet p {
    margin: .04in 0;
    color: #65736d;
    font-size: 9pt;
    line-height: 1.45;
  }

  .quote-print-customer,
  .quote-print-description {
    margin-top: .18in;
  }

  .quote-print-sheet h2 {
    margin: .04in 0;
    font-family: Georgia, serif;
    font-size: 16pt;
    font-weight: 500;
  }

  .quote-print-sheet table {
    width: 100%;
    margin: .18in 0;
    border-collapse: collapse;
    font-size: 9pt;
  }

  .quote-print-sheet td {
    padding: .07in .08in;
    border-bottom: 1px solid #d9e0dc;
  }

  .quote-print-sheet td:last-child {
    text-align: right;
  }

  .quote-print-sheet tr.total td {
    border-top: 2px solid #234d40;
    color: #234d40;
    font-size: 12pt;
    font-weight: 800;
  }

  .quote-print-sheet tr.balance td {
    color: #b74457;
    font-weight: 800;
  }

  .quote-print-dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .12in;
  }

  .quote-print-dates div {
    display: grid;
    gap: .03in;
    padding: .1in;
    border-radius: .06in;
    background: #f1f6f3;
    font-size: 9pt;
  }

  .quote-print-sheet footer {
    margin-top: .18in;
    padding-top: .12in;
    border-top: 1px solid #cfd9d4;
    color: #65736d;
    font-size: 8pt;
    line-height: 1.4;
  }
}

.care-print-sheet {
  display: none;
}

@media (max-width: 620px) {
  .portfolio-section {
    padding-inline: 1rem;
  }

  .portfolio-card,
  .portfolio-card.portfolio-feature,
  .portfolio-card.portfolio-wide {
    grid-column: span 12;
    min-height: 430px;
  }

  .portfolio-card.portfolio-feature {
    min-height: 520px;
  }

  .portfolio-invitation,
  .portfolio-lightbox > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

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

.customer-directory-button {
  border: 1px solid #cddbd4;
  border-radius: .75rem;
  padding: .72rem 1rem;
  color: #315f50;
  background: #f7fbf9;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}

.cloud-backup-button {
  display: grid;
  gap: .05rem;
  padding: .55rem .8rem;
  border: 1px solid #cddbd4;
  border-radius: .75rem;
  color: #315f50;
  background: #f7fbf9;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cloud-backup-button span {
  font-size: .76rem;
  font-weight: 850;
}

.cloud-backup-button small {
  color: #718078;
  font-size: .6rem;
}

.studio-safe-mode-banner {
  position: sticky;
  z-index: 10000;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: .75rem 1rem;
  color: #46350c;
  background: #f7cb56;
  box-shadow: 0 8px 24px rgba(32, 27, 14, .2);
  font-family: system-ui, sans-serif;
}

html.studio-auth-pending #root,
html.studio-auth-locked #root {
  display: none !important;
}

html.studio-auth-pending body {
  min-height: 100vh;
  background: #f4efe7;
}

.studio-account-gate {
  display: grid;
  min-height: 100vh;
  padding: 1.25rem;
  place-items: center;
  color: #263d35;
  background:
    radial-gradient(circle at 15% 15%, rgba(232, 109, 124, .18), transparent 28rem),
    radial-gradient(circle at 85% 85%, rgba(240, 189, 74, .2), transparent 30rem),
    #f4efe7;
  font-family: system-ui, sans-serif;
}

.studio-account-gate > section {
  width: min(100%, 440px);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid rgba(35, 77, 64, .14);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 30px 80px rgba(35, 77, 64, .16);
}

.studio-gate-mark {
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  margin-bottom: 1.2rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #234d40;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.studio-account-gate > section > span {
  color: #c64f63;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studio-account-gate h1 {
  margin: .4rem 0 .7rem;
  color: #234d40;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 8vw, 3.3rem);
  font-weight: 500;
  line-height: .98;
}

.studio-account-gate > section > p,
.studio-account-gate small {
  color: #6a756f;
  line-height: 1.6;
}

.studio-account-gate form {
  display: grid;
  gap: .8rem;
  margin: 1.4rem 0 1rem;
}

.studio-account-gate label {
  display: grid;
  gap: .35rem;
}

.studio-account-gate label span {
  color: #315f50;
  font-size: .74rem;
  font-weight: 850;
}

.studio-account-gate input {
  width: 100%;
  padding: .82rem .9rem;
  border: 1px solid #cad7d1;
  border-radius: .7rem;
  background: #fff;
  font: inherit;
}

.studio-account-gate form > button {
  padding: .85rem 1rem;
  border: 0;
  border-radius: .7rem;
  color: #fff;
  background: #234d40;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.studio-account-gate form > button:disabled {
  cursor: wait;
  opacity: .65;
}

.studio-gate-error {
  min-height: 1.1rem;
  margin: 0;
  color: #b53d50 !important;
  font-size: .74rem;
  font-weight: 800;
}

.studio-account-gate small {
  display: block;
  font-size: .7rem;
}

.studio-safe-mode-banner > div {
  display: grid;
  gap: .1rem;
}

.studio-safe-mode-banner span {
  font-size: .74rem;
}

.studio-safe-mode-banner button {
  padding: .5rem .7rem;
  border: 0;
  border-radius: .55rem;
  color: #fff;
  background: #234d40;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.studio-health-button {
  display: grid;
  gap: .05rem;
  padding: .55rem .8rem;
  border: 1px solid #bed9cc;
  border-radius: .75rem;
  color: #245c49;
  background: #effaf5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.message-template-button {
  margin-top: .6rem;
  padding: .62rem .78rem;
  border: 1px solid #cdd9d3;
  border-radius: .65rem;
  color: #315f50;
  background: #fff;
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}

.message-template-dialog {
  width: min(94vw, 760px);
  max-height: 92vh;
  padding: clamp(1.2rem, 4vw, 2rem);
  overflow: auto;
  border: 0;
  border-radius: 1.2rem;
  color: #263d35;
  background: #fff;
  box-shadow: 0 35px 100px rgba(10, 25, 19, .35);
}

.message-template-dialog::backdrop {
  background: rgba(15, 25, 21, .76);
  backdrop-filter: blur(7px);
}

.message-template-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.message-template-dialog > header span {
  color: #c64f63;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.message-template-dialog > header h2 {
  margin: .3rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 500;
}

.message-template-close {
  border: 0;
  color: #607068;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.message-template-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.2rem 0 .75rem;
}

.message-template-controls label,
.message-subject-field,
.message-body-field {
  display: grid;
  gap: .35rem;
}

.message-template-controls label > span,
.message-subject-field > span,
.message-body-field > span {
  font-size: .72rem;
  font-weight: 850;
}

.message-template-controls select,
.message-subject-field input,
.message-body-field textarea {
  width: 100%;
  padding: .72rem .78rem;
  border: 1px solid #cedad4;
  border-radius: .65rem;
  color: #263d35;
  background: #fff;
  font: inherit;
  font-size: .8rem;
}

.message-subject-field,
.message-body-field {
  margin-top: .75rem;
}

.message-body-field textarea {
  line-height: 1.55;
  resize: vertical;
}

.message-template-status {
  min-height: 1.1rem;
  margin: .6rem 0;
  color: #2f705c;
  font-size: .72rem;
  font-weight: 800;
}

.message-template-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
}

.message-template-dialog > footer a,
.message-template-dialog > footer button {
  padding: .72rem .9rem;
  border-radius: .65rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
}

.message-open-email {
  color: #315f50;
  border: 1px solid #cdd9d3;
  text-decoration: none;
}

.message-copy {
  border: 0;
  color: #fff;
  background: #315f50;
  cursor: pointer;
}

@media (max-width: 620px) {
  .message-template-controls {
    grid-template-columns: 1fr;
  }

  .message-template-dialog > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .message-template-dialog > footer a,
  .message-template-dialog > footer button {
    text-align: center;
  }
}

.studio-health-button.attention {
  border-color: #e5c47a;
  color: #71520c;
  background: #fff8df;
}

.studio-health-button span {
  font-size: .76rem;
  font-weight: 850;
}

.studio-health-button small {
  color: inherit;
  opacity: .75;
  font-size: .6rem;
}

.studio-health-dialog {
  width: min(94vw, 780px);
  max-height: 92vh;
  padding: clamp(1.2rem, 4vw, 2rem);
  overflow: auto;
  border: 0;
  border-radius: 1.2rem;
  color: #263d35;
  background: #fff;
  box-shadow: 0 35px 100px rgba(10, 25, 19, .35);
}

.studio-health-dialog::backdrop {
  background: rgba(15, 25, 21, .76);
  backdrop-filter: blur(7px);
}

.studio-health-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.studio-health-dialog > header span,
.health-publish-checklist > span,
.health-errors > div:first-child > span {
  color: #2f8063;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.studio-health-dialog > header h2 {
  margin: .3rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 500;
}

.health-close {
  border: 0;
  color: #607068;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.health-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1.2rem 0;
}

.health-checks article {
  display: grid;
  gap: .3rem;
  padding: .85rem;
  border-radius: .75rem;
}

.health-checks article.good {
  color: #245c49;
  background: #ebf8f2;
}

.health-checks article.warning {
  color: #72530d;
  background: #fff5d3;
}

.health-checks article strong {
  font-size: .84rem;
}

.health-checks article span {
  font-size: .68rem;
  line-height: 1.4;
}

.health-publish-checklist {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  border: 1px solid #d7e2dd;
  border-radius: .85rem;
}

.health-publish-checklist h3 {
  margin: -.15rem 0 .25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.health-publish-checklist label {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
}

.health-publish-checklist input {
  width: 1rem;
  height: 1rem;
  accent-color: #2f8063;
}

.health-checklist-status {
  min-height: 1rem;
  margin: 0;
  color: #2f8063;
  font-size: .7rem;
  font-weight: 800;
}

.health-errors {
  margin-top: 1rem;
}

.health-errors > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.health-errors > div:first-child button {
  border: 0;
  color: #a33c4e;
  background: transparent;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

.health-error-list {
  display: grid;
  gap: .4rem;
  margin-top: .55rem;
}

.health-error-list article {
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  border-left: 3px solid #d75a6d;
  border-radius: 0 .65rem .65rem 0;
  background: #fff3f5;
}

.health-error-list article strong {
  font-size: .75rem;
}

.health-error-list article span,
.health-error-list > p {
  color: #718078;
  font-size: .66rem;
}

.health-recovery {
  margin-top: 1rem;
  border-top: 1px solid #d7e2dd;
  border-bottom: 1px solid #d7e2dd;
}

.health-recovery summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.health-recovery summary::-webkit-details-marker {
  display: none;
}

.health-recovery ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  color: #68776f;
  font-size: .74rem;
  line-height: 1.65;
}

.studio-health-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: 1rem;
}

.studio-health-dialog > footer button {
  padding: .7rem .85rem;
  border-radius: .65rem;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.health-open-site {
  border: 1px solid #cad8d1;
  color: #315f50;
  background: #fff;
}

.health-sign-out {
  border: 1px solid #dfc7cc;
  color: #a43b4d;
  background: #fff;
}

.health-safe-mode {
  border: 0;
  color: #fff;
  background: #71520c;
}

@media (max-width: 620px) {
  .studio-safe-mode-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .health-checks {
    grid-template-columns: 1fr;
  }

  .studio-health-dialog > footer {
    align-items: stretch;
    flex-direction: column;
  }
}

.cloud-backup-dialog {
  width: min(92vw, 680px);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 0;
  border-radius: 1.2rem;
  color: #263d35;
  background: #fff;
  box-shadow: 0 35px 100px rgba(10, 25, 19, .35);
}

.cloud-backup-dialog::backdrop {
  background: rgba(15, 25, 21, .76);
  backdrop-filter: blur(7px);
}

.cloud-backup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cloud-backup-head span {
  color: #8b5cf6;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.cloud-backup-head h2 {
  margin: .3rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  font-weight: 500;
}

.cloud-backup-head > button {
  border: 0;
  color: #607068;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.cloud-backup-dialog > p {
  color: #68776f;
  line-height: 1.6;
}

.cloud-backup-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.2rem 0;
}

.cloud-backup-summary div {
  display: grid;
  gap: .15rem;
  padding: .75rem;
  border-radius: .7rem;
  background: #f1f6f3;
}

.cloud-backup-summary strong {
  font-size: 1.05rem;
}

.cloud-backup-summary span {
  color: #718078;
  font-size: .65rem;
}

.cloud-backup-status {
  min-height: 1.3rem;
  color: #315f50 !important;
  font-size: .78rem;
  font-weight: 800;
}

.cloud-restore-preview {
  margin: .8rem 0 1rem;
  padding: 1rem;
  border: 1px solid #decff9;
  border-radius: .8rem;
  background: #f7f3ff;
}

.cloud-restore-preview strong {
  color: #5d3b96;
}

.cloud-restore-preview p {
  margin: .45rem 0;
  color: #665d70;
  font-size: .78rem;
  line-height: 1.5;
}

.cloud-restore-preview button {
  margin-top: .35rem;
  padding: .65rem .8rem;
  border: 1px solid #cfbded;
  border-radius: .6rem;
  color: #5d3b96;
  background: #fff;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.cloud-backup-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
}

.cloud-backup-actions button {
  padding: .72rem .9rem;
  border-radius: .65rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}

.cloud-restore {
  border: 1px solid #cdd9d3;
  color: #315f50;
  background: #fff;
}

.cloud-save {
  border: 0;
  color: #fff;
  background: #8b5cf6;
}

@media (max-width: 620px) {
  .cloud-backup-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cloud-backup-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

.production-plan-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  margin: .35rem 0 .8rem;
  padding: .68rem .8rem;
  border: 1px solid #ead8a7;
  border-radius: .65rem;
  color: #654c0c;
  background: #fff8df;
  font: inherit;
  cursor: pointer;
}

.production-plan-button span {
  font-size: .7rem;
  font-weight: 800;
}

.production-plan-button strong {
  font-size: .72rem;
}

.production-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #ead8a7;
  border-radius: 1rem;
  color: #654c0c;
  background: linear-gradient(135deg, #fffaf0, #fff5d5);
}

.production-overview > div:first-child {
  display: grid;
  gap: .15rem;
}

.production-overview > div:first-child span {
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.production-overview > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.production-overview > div:last-child span {
  padding: .38rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  font-size: .7rem;
  font-weight: 850;
}

.production-overview > div:last-child span.attention {
  color: #fff;
  background: #c64f63;
}

.production-plan-dialog {
  width: min(94vw, 820px);
  max-height: 92vh;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 1.25rem;
  color: #263d35;
  background: #fff;
  box-shadow: 0 35px 100px rgba(10, 25, 19, .35);
}

.production-plan-dialog::backdrop {
  background: rgba(15, 25, 21, .76);
  backdrop-filter: blur(7px);
}

.production-plan-dialog form {
  padding: clamp(1.2rem, 4vw, 2.2rem);
}

.production-plan-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.production-plan-dialog header span {
  color: #c64f63;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.production-plan-dialog header h2 {
  margin: .3rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 500;
}

.production-close {
  border: 0;
  color: #607068;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.production-order-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.2rem 0;
}

.production-order-summary div {
  display: grid;
  gap: .2rem;
  padding: .75rem;
  border-radius: .7rem;
  background: #f1f6f3;
}

.production-order-summary span {
  color: #718078;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.production-order-summary strong {
  font-size: .82rem;
}

.production-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.production-fields label {
  display: grid;
  gap: .35rem;
}

.production-fields label.wide {
  grid-column: 1 / -1;
}

.production-fields label > span {
  font-size: .72rem;
  font-weight: 850;
}

.production-fields input,
.production-fields select,
.production-fields textarea {
  width: 100%;
  padding: .7rem .75rem;
  border: 1px solid #cedad4;
  border-radius: .6rem;
  background: #fff;
  font: inherit;
  font-size: .8rem;
}

.production-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #d7e1dc;
  border-radius: .8rem;
}

.production-checklist legend {
  padding: 0 .35rem;
  color: #315f50;
  font-size: .75rem;
  font-weight: 900;
}

.production-checklist label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
}

.production-checklist input {
  width: 1rem;
  height: 1rem;
  accent-color: #315f50;
}

.production-progress {
  display: grid;
  gap: .35rem;
  margin: .8rem 0 1rem;
}

.production-progress > div {
  height: .45rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e2eae6;
}

.production-progress > div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e86d7c, #f0bd4a);
  transition: width .2s ease;
}

.production-progress strong {
  font-size: .75rem;
}

.production-progress small {
  color: #718078;
}

.production-plan-dialog footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
}

.production-plan-dialog footer button,
.production-contact {
  padding: .72rem .9rem;
  border-radius: .65rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 850;
}

.production-plan-dialog footer button {
  border: 0;
  color: #fff;
  background: #315f50;
  cursor: pointer;
}

.production-contact {
  color: #315f50;
  border: 1px solid #cbd8d2;
  text-decoration: none;
}

@media (max-width: 620px) {
  .production-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .production-order-summary,
  .production-fields,
  .production-checklist {
    grid-template-columns: 1fr;
  }

  .production-fields label.wide {
    grid-column: auto;
  }
}

.customer-directory-dialog {
  width: min(96vw, 1080px);
  height: min(90vh, 760px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.3rem;
  color: #263d35;
  background: #fff;
  box-shadow: 0 35px 100px rgba(10, 25, 19, .35);
}

.customer-directory-dialog::backdrop {
  background: rgba(15, 25, 21, .76);
  backdrop-filter: blur(7px);
}

.customer-directory-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid #dbe4df;
}

.customer-directory-dialog > header span,
.customer-profile-head > div > span,
.customer-history > span {
  color: #c64f63;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.customer-directory-dialog > header h2 {
  margin: .3rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
}

.customer-directory-close {
  border: 0;
  color: #607068;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.customer-directory-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: calc(100% - 90px);
}

.customer-directory-layout > aside {
  padding: 1rem;
  overflow: auto;
  border-right: 1px solid #dbe4df;
  background: #f5f8f6;
}

.customer-directory-layout > aside label {
  display: grid;
  gap: .35rem;
}

.customer-directory-layout > aside label span {
  color: #68776f;
  font-size: .7rem;
  font-weight: 850;
}

.customer-directory-layout > aside input {
  width: 100%;
  padding: .7rem .75rem;
  border: 1px solid #cdd9d3;
  border-radius: .65rem;
  font: inherit;
  font-size: .78rem;
}

.customer-list {
  display: grid;
  gap: .4rem;
  margin-top: .8rem;
}

.customer-list button {
  display: grid;
  gap: .15rem;
  padding: .72rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  color: #315f50;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.customer-list button:hover,
.customer-list button.active {
  border-color: #cbdad3;
  background: #fff;
}

.customer-list button span {
  overflow: hidden;
  color: #718078;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-profile {
  padding: clamp(1.1rem, 3vw, 2rem);
  overflow: auto;
}

.customer-empty {
  display: grid;
  min-height: 320px;
  place-content: center;
  color: #718078;
  text-align: center;
}

.customer-empty strong {
  color: #315f50;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 500;
}

.customer-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.customer-profile-head h3 {
  margin: .25rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
}

.customer-profile-head p {
  margin: .25rem 0 0;
  color: #718078;
}

.customer-repeat-order {
  padding: .72rem .9rem;
  border: 0;
  border-radius: .65rem;
  color: #fff;
  background: #315f50;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}

.customer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin: 1.2rem 0;
}

.customer-stats div {
  display: grid;
  gap: .15rem;
  padding: .8rem;
  border-radius: .7rem;
  background: #f1f6f3;
}

.customer-stats strong {
  font-size: 1.05rem;
}

.customer-stats span {
  color: #718078;
  font-size: .68rem;
}

.customer-notes-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  padding: 1rem;
  border: 1px solid #d8e3dd;
  border-radius: .85rem;
}

.customer-notes-form label {
  display: grid;
  gap: .3rem;
}

.customer-notes-form label span {
  font-size: .7rem;
  font-weight: 850;
}

.customer-notes-form input,
.customer-notes-form textarea {
  width: 100%;
  padding: .65rem .7rem;
  border: 1px solid #cedad4;
  border-radius: .55rem;
  font: inherit;
  font-size: .78rem;
}

.customer-notes-form .wide {
  grid-column: 1 / -1;
}

.customer-notes-form > button {
  justify-self: end;
  padding: .68rem .85rem;
  border: 0;
  border-radius: .55rem;
  color: #fff;
  background: #315f50;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.customer-important-dates {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.customer-important-dates span {
  padding: .45rem .6rem;
  border-radius: 999px;
  color: #755600;
  background: #fff2c9;
  font-size: .7rem;
}

.customer-save-status {
  min-height: 1rem;
  margin: 0;
  color: #2f705c;
  font-size: .72rem;
  font-weight: 800;
}

.customer-history {
  margin-top: 1.25rem;
}

.customer-history > div {
  display: grid;
  gap: .45rem;
  margin-top: .6rem;
}

.customer-history article {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .65rem .75rem;
  border-radius: .65rem;
  background: #f6f9f7;
}

.customer-history article i {
  color: #c64f63;
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
}

.customer-history article > div {
  display: grid;
}

.customer-history article span,
.customer-history time {
  color: #718078;
  font-size: .68rem;
}

@media (max-width: 720px) {
  .customer-directory-dialog {
    height: 94vh;
  }

  .customer-directory-layout {
    grid-template-columns: 1fr;
    height: calc(100% - 84px);
  }

  .customer-directory-layout > aside {
    max-height: 180px;
    border-right: 0;
    border-bottom: 1px solid #dbe4df;
  }

  .customer-profile-head {
    flex-direction: column;
  }

  .customer-stats,
  .customer-notes-form {
    grid-template-columns: 1fr;
  }

  .customer-notes-form .wide {
    grid-column: auto;
  }

  .customer-history article {
    grid-template-columns: 1fr;
  }
}

.publish-site-button {
  border: 0;
  border-radius: .75rem;
  padding: .75rem 1rem;
  color: #fff;
  background: #8b5cf6;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
}

.inquiry-attention-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid #d8e4df;
  border-radius: 1rem;
  color: #234d40;
  background: linear-gradient(135deg, #fffaf3, #f5fbf8);
  box-shadow: 0 10px 30px rgba(35, 77, 64, .08);
}

.inquiry-attention-banner > div:first-child {
  display: grid;
  gap: .15rem;
}

.inquiry-attention-banner > div:first-child span {
  color: #7b7069;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.inquiry-attention-banner strong {
  font-size: 1rem;
}

.inquiry-attention-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.inquiry-attention-counts span {
  padding: .4rem .65rem;
  border-radius: 999px;
  color: #64716b;
  background: #e7efeb;
  font-size: .72rem;
  font-weight: 850;
}

.inquiry-attention-counts .urgent {
  color: #fff;
  background: #c94d5f;
}

.inquiry-attention-counts .today {
  color: #49370d;
  background: #f0bd4a;
}

.inquiry-followup-tools {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto;
  align-items: end;
  gap: .55rem;
  margin: 1rem 0;
  padding: .8rem;
  border-radius: .8rem;
  background: #f4f7f5;
}

.inquiry-followup-tools label {
  display: grid;
  gap: .3rem;
}

.inquiry-followup-tools label span {
  color: #64716b;
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.inquiry-followup-tools input {
  min-width: 0;
  padding: .55rem .65rem;
  border: 1px solid #cdd9d3;
  border-radius: .55rem;
  background: #fff;
  font: inherit;
  font-size: .78rem;
}

.inquiry-followup-tools button {
  padding: .62rem .75rem;
  border: 0;
  border-radius: .55rem;
  color: #fff;
  background: #234d40;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.inquiry-followup-tools .followup-state {
  grid-column: 1 / -1;
  color: #728079;
  font-size: .7rem;
}

.inquiry-followup-tools .followup-state.overdue {
  color: #b9364a;
}

.inquiry-followup-tools .followup-state.today {
  color: #8a6200;
}

.inquiry-followup-tools .followup-state.saved {
  color: #2f705c;
}

.inquiry-card.inquiry-followup-overdue {
  box-shadow: inset 4px 0 #c94d5f;
}

.inquiry-card.inquiry-followup-today {
  box-shadow: inset 4px 0 #f0bd4a;
}

.quote-card-button {
  width: 100%;
  margin: .35rem 0 .8rem;
  padding: .65rem .8rem;
  border: 1px solid #c9d8d1;
  border-radius: .65rem;
  color: #315f50;
  background: #f7fbf9;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}

.quote-manager-dialog {
  width: min(94vw, 820px);
  max-height: 92vh;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 1.25rem;
  color: #243d34;
  background: #fff;
  box-shadow: 0 35px 100px rgba(10, 25, 19, .35);
}

.quote-manager-dialog::backdrop {
  background: rgba(15, 25, 21, .76);
  backdrop-filter: blur(7px);
}

.quote-manager-dialog form {
  padding: clamp(1.2rem, 4vw, 2.2rem);
}

.quote-manager-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.quote-manager-dialog header span {
  color: #c64f63;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quote-manager-dialog header h2 {
  margin: .35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 500;
}

.quote-close {
  border: 0;
  color: #607068;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.quote-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.quote-form-grid label {
  display: grid;
  gap: .35rem;
}

.quote-form-grid label.wide {
  grid-column: 1 / -1;
}

.quote-form-grid label > span {
  font-size: .72rem;
  font-weight: 850;
}

.quote-form-grid input,
.quote-form-grid select,
.quote-form-grid textarea {
  width: 100%;
  padding: .72rem .8rem;
  border: 1px solid #d1dcd7;
  border-radius: .65rem;
  background: #fff;
  font: inherit;
  font-size: .82rem;
}

.quote-calculation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: 1rem 0;
}

.quote-calculation span {
  display: grid;
  gap: .2rem;
  padding: .8rem;
  border-radius: .7rem;
  color: #718078;
  background: #f1f6f3;
  font-size: .68rem;
}

.quote-calculation strong {
  color: #234d40;
  font-size: .92rem;
}

.quote-manager-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
}

.quote-manager-dialog footer button {
  padding: .72rem .9rem;
  border-radius: .65rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 850;
  cursor: pointer;
}

.quote-delete {
  margin-right: auto;
  border: 1px solid #e8c7cd;
  color: #a7384a;
  background: #fff;
}

.quote-print {
  border: 1px solid #ccd8d2;
  color: #315f50;
  background: #fff;
}

.quote-save {
  border: 0;
  color: #fff;
  background: #315f50;
}

.quote-overview {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid #d8e4df;
  border-radius: 1rem;
  background: #f7fbf9;
}

.quote-overview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.quote-overview > header > div {
  display: grid;
  gap: .15rem;
}

.quote-overview > header > div span {
  color: #748079;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.quote-overview > header > span {
  padding: .4rem .65rem;
  border-radius: 999px;
  color: #64716b;
  background: #e6efea;
  font-size: .7rem;
  font-weight: 850;
}

.quote-overview > header > span.urgent {
  color: #fff;
  background: #c94d5f;
}

.quote-overview > div {
  display: grid;
  gap: .45rem;
}

.quote-overview article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: .65rem .75rem;
  border-radius: .65rem;
  background: #fff;
}

.quote-overview article > div {
  display: grid;
}

.quote-overview article span {
  color: #718078;
  font-size: .72rem;
}

.quote-overview article button {
  padding: .45rem .65rem;
  border: 0;
  border-radius: .5rem;
  color: #fff;
  background: #315f50;
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}

.quote-print-sheet {
  display: none;
}

@media (max-width: 620px) {
  .inquiry-attention-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .inquiry-attention-counts {
    justify-content: flex-start;
  }

  .inquiry-followup-tools {
    grid-template-columns: 1fr;
  }

  .inquiry-followup-tools .followup-state {
    grid-column: auto;
  }

  .quote-form-grid,
  .quote-calculation {
    grid-template-columns: 1fr;
  }

  .quote-form-grid label.wide {
    grid-column: auto;
  }

  .quote-manager-dialog footer {
    flex-wrap: wrap;
  }

  .quote-overview article {
    grid-template-columns: 1fr;
  }
}

.publish-site-dialog {
  width: min(92vw, 680px);
  padding: 0;
  border: 0;
  border-radius: 1.4rem;
  color: #23362f;
  background: #fffaf3;
  box-shadow: 0 32px 90px rgba(16, 28, 23, .35);
}

.publish-site-dialog::backdrop {
  background: rgba(15, 25, 21, .72);
  backdrop-filter: blur(7px);
}

.publish-site-dialog form {
  padding: 2rem;
}

.publish-site-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.publish-site-head span {
  color: #8b5cf6;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.publish-site-head h2 {
  margin: .35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

.publish-site-head > button {
  border: 0;
  color: #52645d;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.publish-site-dialog form > p {
  color: #68766f;
  line-height: 1.6;
}

.publish-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin: 1.5rem 0;
}

.publish-price-grid label {
  display: grid;
  gap: .45rem;
}

.publish-price-grid label span {
  font-size: .76rem;
  font-weight: 800;
}

.publish-price-grid input {
  width: 100%;
  padding: .8rem;
  border: 1px solid #d7ded9;
  border-radius: .7rem;
  font: inherit;
}

.publish-site-summary {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border-radius: .8rem;
  background: #f1ebe3;
}

.publish-site-summary span {
  color: #6d756f;
  font-size: .86rem;
}

.publish-site-status {
  min-height: 1.4rem;
  color: #315f50 !important;
  font-weight: 800;
}

.publish-site-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

.publish-site-actions button {
  padding: .8rem 1.1rem;
  border-radius: .7rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.publish-cancel {
  border: 1px solid #ccd5d0;
  color: #52645d;
  background: #fff;
}

.publish-confirm {
  border: 0;
  color: #fff;
  background: #315f50;
}

@media (max-width: 620px) {
  .publish-price-grid {
    grid-template-columns: 1fr;
  }
}