/* Folded paper is the structure: open sheets, folded labels, and narrow bands. */
:root {
  --paper-fold: #ded4f2;
  --paper-backing: #f0eaf8;
  --paper-rule: #d9d3e4;
  --paper-fold-size: 32px;
}

/* The original edge artwork connects the sheets to the opening identity. */
.site-paper-left { opacity: .48; }
.site-paper-right { opacity: .36; }
.page-intro { position: relative; }
.page-intro::after, .split-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 66px;
  height: 22px;
  background: var(--purple-soft);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.split-hero::after { width: 82px; height: 25px; background: var(--cyan-soft); }

/* A corner has a visible reverse side and an empty triangle above the fold. */
.services-content .price-list,
.design-price-option,
.contact-form,
.profile-fields,
.policy-body,
.legal-list { position: relative; background: #fff; }
.services-content .price-list::before,
.design-price-option::before,
.contact-form::before,
.profile-fields::before,
.policy-body::before,
.legal-list::before,
.services-content .price-list::after,
.design-price-option::after,
.contact-form::after,
.profile-fields::after,
.policy-body::after,
.legal-list::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: var(--paper-fold-size);
  height: var(--paper-fold-size);
  pointer-events: none;
}
.services-content .price-list::before,
.design-price-option::before,
.contact-form::before,
.profile-fields::before,
.policy-body::before,
.legal-list::before {
  background: var(--paper-fold);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.services-content .price-list::after,
.design-price-option::after,
.contact-form::after,
.profile-fields::after,
.policy-body::after,
.legal-list::after {
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Category tabs sit beside whole price sheets rather than repeating cards. */
.services-content .service-group {
  --paper-fold: #d8cdef;
  --paper-backing: #f1ecfa;
  --label-paper: #f1ecfa;
  --label-fold: #b6a0e7;
  align-items: start;
  padding-top: 0;
  border-top: 0;
}
.services-content .service-group:first-child {
  --paper-fold: #c4e5f2;
  --paper-backing: #eaf5fa;
  --label-paper: #e8f5fa;
  --label-fold: #83cbe7;
}
.services-content .service-group:last-child {
  --paper-fold: #f0cbdc;
  --paper-backing: #fbf0f5;
  --label-paper: #f9eaf1;
  --label-fold: #e9a0bf;
}
.services-content .group-heading {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 14px 24px 15px 14px;
  background: var(--label-paper);
  border-bottom: 1px solid var(--paper-fold);
}
.services-content .group-heading::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 12px;
  height: 10px;
  background: var(--label-fold);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.services-content .group-heading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background: var(--label-fold);
  clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 10px));
  pointer-events: none;
}
.services-content .price-list {
  padding: 26px 18px 22px;
  border: 1px solid var(--paper-rule);
  box-shadow: 5px 6px 0 var(--paper-backing);
}
.services-content .price-item:first-child .price-heading { padding-right: 20px; }
.services-content .price-item { border-bottom-color: var(--paper-rule); }
.services-content .price-heading .service-name { text-wrap: pretty; }

/* These two documents deliberately retain equal visual importance. */
.design-price-options { gap: 28px; }
.design-price-option {
  --paper-fold: #bfe2f1;
  --paper-backing: #eaf5fa;
  padding: 28px 20px 16px;
  border: 1px solid var(--paper-rule);
  box-shadow: 5px 6px 0 var(--paper-backing);
}
.design-price-option + .design-price-option {
  --paper-fold: #d4c5f3;
  --paper-backing: #f0eafa;
  border-color: var(--paper-rule);
}
.design-option-heading { margin-bottom: 0; padding: 0 20px 22px 0; border-bottom: 1px solid var(--paper-rule); }
.design-option-note { color: var(--ink-soft); }
.design-price-item { gap: 12px; padding-block: 18px; border-top-color: var(--paper-rule); }
.design-price-item:first-child { border-top: 0; }
.design-price-item dt { text-wrap: pretty; }

/* Figures are three folded bands, with the numerals kept as the main feature. */
.stats-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.stat, .stat:first-child, .stat:last-child {
  --band-front: #a5d9ec;
  --band-back: #e7f3f8;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px 20px 24px 28px;
  border: 0;
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  background: #fff;
}
.stat:nth-child(2) { --band-front: #b6a0e7; --band-back: #eee7f8; }
.stat:nth-child(3) { --band-front: #e9a0bf; --band-back: #faedf3; }
.stat + .stat { border-left: 0; }
.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  bottom: -1px;
  width: 12px;
  background: var(--band-front);
  clip-path: polygon(0 0, 100% 8px, 100% calc(100% - 8px), 0 100%);
  pointer-events: none;
}
.stat::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 0;
  bottom: -8px;
  height: 7px;
  background: var(--band-back);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 8px 100%);
  pointer-events: none;
}
.stat-label { order: 0; font-size: 13px; }
.stat-number { order: 1; font-size: 62px; white-space: nowrap; }
.stat-unit { font-size: 15px; }

/* The service index is a stack of sheets with creases between entries. */
.service-overview {
  position: relative;
  background: #fff;
  border: 1px solid var(--paper-rule);
  box-shadow: 5px 6px 0 #f0eaf8;
}
.overview-row { padding-inline: 16px; border-bottom-color: var(--paper-rule); }
.overview-row:last-child { border-bottom: 0; }
.overview-row:focus-visible { outline-offset: 5px; }
.strength-index { box-shadow: 3px 3px 0 var(--cyan-soft); }
.strength-item:nth-child(2) .strength-index { box-shadow: 3px 3px 0 var(--purple-soft); }
.strength-item:nth-child(3) .strength-index { box-shadow: 3px 3px 0 var(--pink-soft); }

/* Project rows stay open; each folded corner is above the text area. */
.works-list .work-item { position: relative; padding-inline: 18px; background: #fff; }
.works-list .work-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #d8eefa;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.works-list .work-item:nth-child(3n + 2)::after { background: #e7dcf7; }
.works-list .work-item:nth-child(3n)::after { background: #f5dfe9; }

/* Flow notes and open answers expose the reverse side of the paper. */
.step-content { position: relative; padding-right: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--paper-rule); }
.step-content::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 30px;
  height: 12px;
  background: #e4dcf1;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.payment-note { padding: 26px 24px; background: #f8f5fc; border-left: 1px solid var(--paper-rule); box-shadow: 4px 5px 0 #eee7f7; }
.faq-list .faq-item { position: relative; padding-inline: 16px; background: #fff; }
.faq-list .faq-item[open] { background: #fcfbfe; box-shadow: 4px 5px 0 #f0eafa; margin-bottom: 8px; }
.faq-list .faq-item[open]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: #ddd1f3;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Forms and disclosure tables are single documents, not grids of cards. */
.contact-form { --paper-fold: #c6e7f4; padding: 28px 18px; border: 1px solid var(--paper-rule); box-shadow: 5px 6px 0 #edf7fb; }
.contact-form > h2 { padding-right: 22px; }
.profile-fields { --paper-fold-size: 24px; padding-inline: 18px; border: 1px solid var(--paper-rule); box-shadow: 4px 5px 0 #f2edf9; }
.profile-field:last-child { border-bottom: 0; }
.policy-body { padding: 30px 20px; border: 1px solid var(--paper-rule); box-shadow: 4px 5px 0 #f2edf9; }
.policy-body > .policy-item:first-child { padding-right: 20px; }
.legal-list { --paper-fold-size: 24px; --paper-fold: #efd1df; padding-inline: 18px; border: 1px solid var(--paper-rule); box-shadow: 4px 5px 0 #faf0f5; }
.legal-row:last-child { border-bottom: 0; }

/* The closing color plane receives a folded corner; its controls stay round. */
.contact-callout::before { width: 88px; height: 88px; right: 0; top: 0; transform: none; background: var(--brand-cyan); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.contact-callout::after { width: 88px; height: 88px; right: 0; top: 0; transform: none; background: #766abd; clip-path: polygon(0 0, 100% 0, 100% 100%); }

@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .stat, .stat:first-child, .stat:last-child { display: flex; align-items: flex-start; gap: 22px; padding: 30px 18px 32px 26px; }
  .stat-number { order: 0; font-size: 76px; }
  .stat-label { order: 1; font-size: 14px; }
  .stat-unit { font-size: 17px; }
  .services-content .price-list { padding: 32px 28px 26px; }
  .services-content .price-item:first-child .price-heading { padding-right: 16px; }
  .design-price-option { padding: 30px 24px 18px; }
  .overview-row { padding-inline: 24px; }
  .works-list .work-item { padding-inline: 26px; }
  .contact-form { padding: 38px 32px; }
  .profile-fields, .legal-list { padding-inline: 26px; }
  .policy-body { padding: 36px 32px; }
  .faq-list .faq-item { padding-inline: 24px; }
}

@media (min-width: 1000px) {
  .stat-number { font-size: clamp(76px, 6.9vw, 104px); }
  .stat-unit { font-size: 18px; }
  .stat, .stat:first-child, .stat:last-child { padding-inline: 22px 14px; }
}

@media (max-width: 639px) {
  .overview-row { grid-template-columns: 32px minmax(0, 1fr) 28px; gap: 12px; padding-inline: 12px; }
  .service-symbol { width: 32px; height: 32px; }
  .overview-row > .arrow-icon { width: 28px; height: 28px; padding: 6px; }
  .design-price-item dd { font-size: 1.0625rem; }
  .services-content .group-heading { font-size: 1.375rem; }
  .faq-answer { padding-right: 0; }
  .contact-callout::before, .contact-callout::after { width: 58px; height: 58px; }
}

@media print {
  .page-intro::after, .split-hero::after,
  .services-content .group-heading::before, .services-content .group-heading::after,
  .services-content .price-list::before, .services-content .price-list::after,
  .design-price-option::before, .design-price-option::after,
  .stat::before, .stat::after, .works-list .work-item::after,
  .step-content::after, .faq-list .faq-item[open]::before,
  .contact-form::before, .contact-form::after,
  .profile-fields::before, .profile-fields::after,
  .policy-body::before, .policy-body::after,
  .legal-list::before, .legal-list::after { display: none; }
  .services-content .group-heading { width: auto; padding: 0; border: 0; background: #fff; }
  .services-content .price-list, .design-price-option, .service-overview,
  .contact-form, .profile-fields, .policy-body, .legal-list { padding: 0; border: 0; background: #fff; box-shadow: none; }
  .services-content .price-item:first-child .price-heading, .design-option-heading,
  .policy-body > .policy-item:first-child, .contact-form > h2 { padding-right: 0; }
  .design-price-options { display: block; }
  .design-price-option + .design-price-option { margin-top: 20pt; }
  .design-option-heading { padding-bottom: 10pt; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat, .stat:first-child, .stat:last-child { display: flex; padding: 12pt 0; gap: 12pt; border: 0; }
  .stat-number { order: 0; font-size: 32pt; }
  .stat-label { order: 1; font-size: 10pt; }
  .stat-unit { font-size: 10pt; }
  .overview-row, .works-list .work-item, .faq-list .faq-item { padding-inline: 0; }
  .step-content { padding-right: 0; padding-bottom: 10pt; }
  .payment-note, .faq-list .faq-item[open], .strength-index,
  .strength-item:nth-child(2) .strength-index, .strength-item:nth-child(3) .strength-index { background: #fff; box-shadow: none; }
}