/* Page layouts: typography, generous rows, and a shared paper-white ground. */
.page-intro {
  padding-block: 58px 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.page-title {
  max-width: 20em;
  margin-bottom: 24px;
  color: var(--brand-deep, #47418b);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.page-title:last-child { margin-bottom: 0; }
.page-title-part { display: inline-block; }
.page-lead { max-width: 44em; font-size: 1rem; line-height: 2; }
body[data-page="privacy"] .page-intro { max-width: var(--content-width); }
.page-intro + .section { padding-top: 0; }
.services-content, .process-content, .contact-content, .legal-content { padding-bottom: 36px; }

/* Services: category labels and an open, aligned price list. */
.services-content .service-group {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.services-content .service-group:first-child { padding-top: 0; border-top: 0; }
.services-content .service-group:last-child { margin-bottom: 0; }
.services-content .group-heading {
  padding: 0;
  margin: 0;
  color: var(--brand-deep, #47418b);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.7;
}
.services-content .price-list { border-top: 0; }
.services-content .price-item { padding-block: 28px; }
.services-content .price-item:first-child { padding-top: 0; }
.services-content .price-item:last-child { padding-bottom: 0; border-bottom: 0; }
.services-content .price-heading { display: block; }
.services-content .price-heading .service-name {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.9;
}
.services-content .price-heading .price {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  color: var(--brand-deep, #47418b);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: left;
}
.services-content .service-description { max-width: 42em; margin-top: 16px; font-size: 0.9375rem; line-height: 2.1; }
.monthly-title-part { display: inline-block; }

/* Separately supplied design rates, with the two AI choices given equal weight. */
.design-service { scroll-margin-top: 120px; }
.design-price-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; }
.design-price-option { min-width: 0; padding-top: 22px; border-top: 2px solid var(--brand-deep, #47418b); }
.design-price-option + .design-price-option { border-color: var(--purple-ink, #6541a3); }
.design-option-heading { margin: 0 0 24px; color: var(--brand-deep, #47418b); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; line-height: 1.7; }
.design-option-note { display: block; margin-top: 12px; color: var(--muted); font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.9; }
.design-price-list { margin: 0; }
.design-price-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding-block: 20px; border-top: 1px solid var(--line); }
.design-price-item dt { min-width: 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.9; }
.design-price-item dd { margin: 0; color: var(--brand-deep, #47418b); font-size: 1.125rem; font-weight: 500; line-height: 1.8; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Work stays factual, with generous space for each supplied description. */
.works-list .work-summary-only h2 { grid-column: 1 / -1; }
.works-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.works-list .work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-block: 32px;
  background: transparent;
  border-radius: 0;
}
.works-list .work-item:last-child { border-bottom: 1px solid var(--line); }
.works-list .work-item h2 {
  margin: 0;
  color: var(--brand-deep, #47418b);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.works-list .work-item p { margin: 0; font-size: 1rem; line-height: 2.1; }

/* Process: the circular numbers make one continuous, readable sequence. */
.process-content { max-width: 1040px; }
.steps-list { max-width: none; }
.step-item {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 40px;
}
.step-item:last-child { padding-bottom: 0; }
.step-number {
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-deep, #47418b);
  border-radius: 50%;
  color: var(--brand-deep, #47418b);
  background: #fff;
  font-size: 1.0625rem;
  font-weight: 400;
}
.step-item:not(:last-child)::before { left: 21.5px; top: 54px; bottom: 10px; }
.step-content { padding-top: 4px; }
.step-content h2 { color: var(--ink); font-size: 1.125rem; font-weight: 600; line-height: 1.85; }
.step-content p { font-size: 0.9375rem; line-height: 2.1; }
.payment-note {
  max-width: none;
  margin-top: 48px;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  line-height: 2.1;
}
.payment-note p { margin-bottom: 8px; }
.payment-note p:last-child { margin-bottom: 0; }

/* Native details preserve keyboard access and no-script reading. */
.faq-list { max-width: 1040px; }
.faq-list .faq-item { border-radius: 0; background: transparent; }
.faq-item summary { align-items: flex-start; min-height: 92px; gap: 20px; padding-block: 26px; }
.faq-question { padding-top: 3px; font-size: 1rem; font-weight: 500; line-height: 1.9; }
.faq-plus {
  width: 36px;
  height: 36px;
  margin: 0;
  border-color: var(--brand-deep, #47418b);
  border-radius: 50%;
  color: var(--brand-deep, #47418b);
  background: #fff;
}
.faq-plus:empty::before, .faq-plus:empty::after { width: 13px; height: 1.5px; border-radius: 2px; }
.faq-plus svg { stroke-linecap: round; stroke-linejoin: round; }
.faq-item[open] .faq-plus { color: #fff; background: var(--brand-deep, #47418b); border-color: var(--brand-deep, #47418b); }
.faq-answer { max-width: 48em; padding: 0 0 28px; font-size: 1rem; line-height: 2.1; }
.faq-item summary:focus-visible { outline-color: var(--brand-deep, #47418b); outline-offset: 6px; }

/* Profile: the approved mark and a text-led introduction, without portraits. */
.profile-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 36px; }
.profile-identity { padding: 0; border: 0; background: transparent; }
.profile-identity > svg, .profile-identity > img { width: 160px; height: auto; margin: 0; }
.profile-content > h2 { margin-bottom: 26px; color: var(--brand-deep, #47418b); font-size: 1.5rem; font-weight: 500; line-height: 1.7; }
.profile-content > p { max-width: 41em; font-size: 1rem; line-height: 2.1; }
.profile-fields { margin-top: 40px; }
.profile-field { grid-template-columns: minmax(0, 1fr); gap: 9px; padding-block: 24px; border-radius: 0; background: transparent; }
.profile-field dt { color: var(--brand-deep, #47418b); font-size: 0.875rem; }
.profile-field dd { font-size: 0.9375rem; line-height: 2.05; }
.profile-field .tools-text { font-size: 0.875rem; line-height: 2.2; }

/* Contact: clear labels, comfortable input areas, and distinct selections. */
body[data-page="contact"] main .container { max-width: 920px; }
.contact-form { max-width: none; }
.contact-form > h2 { margin-bottom: 30px; color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; font-weight: 500; }
.form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
.form-field { margin-bottom: 32px; }
.field-label { margin-bottom: 12px; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.015em; }
.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea {
  min-height: 58px;
  padding: 15px 18px;
  border-color: #c9c6d1;
  border-radius: 16px;
  background: #fff;
  font-size: 1rem;
}
.contact-form textarea { min-height: 224px; }
.contact-form select { padding-right: 40px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--brand-deep, #47418b); }
.service-options { align-items: center; gap: 12px 8px; }
.service-option {
  min-height: 46px;
  padding: 10px 17px;
  border-color: #cbc8d2;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: 0.875rem;
}
.service-option:has(input:checked) { border-color: var(--brand-deep, #47418b); color: #fff; background: var(--brand-deep, #47418b); }
.service-option input[type="radio"] { accent-color: var(--brand-deep, #47418b); }
.service-option:has(input:checked) input { accent-color: #fff; }
.service-option:has(input:focus-visible) { outline: 2px solid var(--brand-deep, #47418b); outline-offset: 4px; }
.form-actions { margin-top: 12px; }
.contact-form button:disabled,
.contact-form button:disabled:hover { color: #716c7a; border-color: #e5e2e9; background: #efedf2; }

/* Policy and legal disclosures are composed as a reading column and table. */
.policy-body { max-width: 880px; padding-bottom: 36px; font-size: 1rem; line-height: 2.15; }
.policy-body > .policy-item { margin: 0; padding-block: 27px; border-radius: 0; background: transparent; }
.policy-body > .policy-item:first-child { border-top: 0; padding-top: 0; }
.policy-body > .policy-date { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-content { max-width: 1080px; }
.legal-list { max-width: none; }
.legal-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 26px; border-radius: 0; background: transparent; }
.legal-row dt { color: var(--brand-deep, #47418b); font-size: 0.875rem; font-weight: 500; }
.legal-row dd { font-size: 0.9375rem; line-height: 2.1; }

@media (min-width: 640px) {
  .page-intro { padding-block: 80px 40px; margin-bottom: 52px; }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .profile-field { grid-template-columns: 138px minmax(0, 1fr); gap: 24px; }
  .legal-row { grid-template-columns: 192px minmax(0, 1fr); gap: 40px; }
  .faq-answer { padding-right: 74px; }
  .faq-question { font-size: 1.125rem; }
  .faq-plus { width: 40px; height: 40px; }
  .step-item { grid-template-columns: 52px minmax(0, 1fr); gap: 30px; padding-bottom: 44px; }
  .step-number { width: 52px; height: 52px; font-size: 1.25rem; }
  .step-item:not(:last-child)::before { left: 25.5px; top: 62px; bottom: 10px; }
  .step-content { padding-top: 9px; }
  .profile-content > h2 { font-size: 1.75rem; }
}

@media (min-width: 900px) {
  .page-intro { padding-block: 108px 50px; margin-bottom: 64px; }
  .page-title { font-size: clamp(3.25rem, 4.5vw, 4rem); }
  .page-lead { margin-top: 30px; }
  .services-content .service-group { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding-top: 38px; margin-bottom: 68px; }
  .services-content .service-group:first-child { padding-top: 0; }
  .services-content .group-heading { font-size: 1.625rem; }
  .services-content .price-item { padding-block: 34px; }
  .services-content .price-heading .service-name { font-size: 1.125rem; }
  .services-content .price-heading .price { font-size: 1.1875rem; }
  .works-list .work-item { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: 64px; padding-block: 48px; }
  .works-list .work-item h2 { font-size: 1.5rem; }
  .step-content { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 36px; }
  .step-content h2 { margin: 0; font-size: 1.1875rem; }
  .step-content p { font-size: 1rem; }
  .payment-note { margin-top: 58px; padding-block: 32px; }
  .faq-item summary { padding-block: 32px; }
  .faq-answer { padding-bottom: 36px; }
  .profile-layout { grid-template-columns: minmax(200px, 0.65fr) minmax(0, 1.35fr); gap: 80px; }
  .profile-identity > svg, .profile-identity > img { width: 224px; }
  .legal-row { grid-template-columns: 228px minmax(0, 1fr); gap: 48px; padding-block: 28px; }
}

@media (min-width: 1200px) {
  .services-content .service-group { grid-template-columns: 240px minmax(0, 1fr); gap: 68px; }
  .services-content .price-heading { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: baseline; gap: 28px; }
  .services-content .price-heading .price { margin: 0; text-align: right; }
  .design-price-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .design-price-option { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
  .profile-layout { gap: 112px; }
}

@media (hover: hover) {
  .service-option:hover { border-color: var(--brand-deep, #47418b); }
  .faq-item summary:hover .faq-question { color: var(--brand-deep, #47418b); }
}

@media print {
  .page-intro { margin-bottom: 18pt; padding-block: 0 14pt; }
  .page-title { font-size: 23pt; color: #000; }
  .page-lead { margin-top: 12pt; }
  .services-content, .process-content, .contact-content, .legal-content,
  .profile-layout, .policy-body { max-width: none; padding-bottom: 0; }
  body[data-page="contact"] main .container, body[data-page="privacy"] .page-intro { max-width: none; }
  .services-content .service-group { display: block; margin-bottom: 20pt; padding-top: 14pt; }
  .services-content .group-heading { margin-bottom: 12pt; color: #000; font-size: 15pt; }
  .services-content .price-item, .works-list .work-item { padding-block: 13pt; }
  .services-content .price-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; }
  .services-content .price-heading .price { margin: 0; color: #000; text-align: right; }
  .works-list .work-item { display: block; }
  .works-list .work-item h2 { margin-bottom: 10pt; color: #000; }
  .step-item { grid-template-columns: 28pt minmax(0, 1fr); gap: 14pt; padding-bottom: 20pt; }
  .step-number { width: 28pt; height: 28pt; color: #000; border-color: #777; font-size: 11pt; }
  .step-item:not(:last-child)::before { left: 13.5pt; top: 34pt; bottom: 6pt; }
  .step-content { display: block; padding-top: 0; }
  .step-content h2 { margin-bottom: 6pt; }
  .payment-note { margin-top: 20pt; padding-block: 14pt; }
  .faq-item summary { min-height: 0; padding-block: 14pt 8pt; }
  .faq-plus { display: none; }
  .faq-answer { max-width: none; padding: 0 0 14pt; }
  .profile-layout { display: block; }
  .profile-identity > svg, .profile-identity > img { width: 90pt; margin-bottom: 20pt; }
  .profile-content > h2, .profile-field dt, .legal-row dt { color: #000; }
  .policy-body > .policy-item, .legal-row { padding-block: 13pt; }
  .legal-row { grid-template-columns: 125pt minmax(0, 1fr); gap: 16pt; }
  .form-field { margin-bottom: 16pt; }
}