.container {
  width: min(calc(100% - 40px), var(--ag-container));
  margin-inline: auto;
}

.container--wide {
  max-width: var(--ag-container-wide);
}

.content-layout {
  max-width: var(--ag-content);
}

.section {
  padding-block: clamp(64px, 10vw, 128px);
}

.section--warm {
  background: var(--ag-color-warm);
}

.section--dark {
  color: var(--ag-color-white);
  background: var(--ag-color-charcoal);
}

.editorial-grid {
  display: grid;
  gap: var(--ag-space-7);
  align-items: center;
}

.editorial-media {
  min-height: 360px;
}

.editorial-image,
.editorial-media__placeholder {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.editorial-media__placeholder {
  background: var(--ag-color-warm);
}

.editorial-copy {
  max-width: 520px;
}

.editorial-copy > p:not(.eyebrow) {
  max-width: 46ch;
  color: var(--ag-color-muted);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-5);
  justify-content: space-between;
  margin-bottom: var(--ag-space-7);
}

.section-heading h2 {
  max-width: 15ch;
  margin-bottom: 0;
}

.section-heading > p {
  max-width: 46ch;
  margin-bottom: 0;
  color: var(--ag-color-muted);
}

.section--dark .section-heading > p {
  color: rgb(255 255 255 / 72%);
}

.treatment-grid,
.team-grid,
.testimonial-grid,
.post-grid,
.collection-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ag-space-6);
}

.contact-cta {
  background: var(--ag-color-warm);
}

.contact-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-5);
  align-items: flex-start;
  justify-content: space-between;
}

.contact-cta h2 {
  max-width: 14ch;
  margin-bottom: 0;
}

.contact-layout {
  display: grid;
  gap: var(--ag-space-8);
}

.appointment-request {
  padding-top: var(--ag-space-8);
  margin-top: var(--ag-space-8);
  border-top: 1px solid var(--ag-color-border);
}

.appointment-request__heading {
  max-width: 58ch;
  margin-bottom: var(--ag-space-6);
}

.appointment-request__heading > p:last-child,
.appointment-request__privacy {
  color: var(--ag-color-muted);
  font-size: 0.875rem;
}

.appointment-form {
  display: grid;
  gap: var(--ag-space-4);
}

.appointment-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-field label {
  display: block;
  margin-bottom: var(--ag-space-2);
  font-size: 0.875rem;
  font-weight: var(--ag-weight-medium);
}

.form-field label > span {
  color: var(--ag-color-muted);
}

.form-field--full {
  grid-column: 1 / -1;
}

.appointment-form__consent label {
  display: flex;
  gap: var(--ag-space-3);
  align-items: flex-start;
  font-weight: var(--ag-weight-regular);
}

.appointment-form__consent input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 2px 0 0;
}

.appointment-form__consent span {
  color: var(--ag-color-charcoal);
  font-size: 0.8125rem;
  font-weight: var(--ag-weight-regular);
}

.appointment-request__privacy {
  margin-top: var(--ag-space-4);
}

.form-notice {
  padding: var(--ag-space-4);
  margin-bottom: var(--ag-space-5);
  border-left: 3px solid var(--ag-color-charcoal);
  background: var(--ag-color-warm);
}

.form-notice--error {
  border-left-color: #8a1f1f;
}

.form-notice--success {
  border-left-color: #35664a;
}

.profile-layout {
  display: grid;
  gap: var(--ag-space-7);
  align-items: start;
}

.detail-hero {
  position: relative;
  display: flex;
  min-height: 360px;
  align-items: flex-end;
  overflow: hidden;
  color: var(--ag-color-white);
  background: var(--ag-color-charcoal);
}

.detail-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--ag-space-8);
}

.detail-hero__image,
.detail-hero__placeholder,
.detail-hero__shade {
  position: absolute;
  inset: 0;
}

.detail-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero__placeholder {
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--ag-color-white);
  background: linear-gradient(135deg, #55504b, #302d2a 68%, #1c1b1a);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-align: center;
}

.detail-hero__shade {
  background: linear-gradient(0deg, rgb(0 0 0 / 72%), rgb(0 0 0 / 12%));
}

.detail-hero .eyebrow,
.detail-hero .detail-intro {
  color: rgb(255 255 255 / 84%);
}

.detail-intro {
  max-width: 56ch;
  margin-bottom: var(--ag-space-5);
  color: var(--ag-color-muted);
}

.inline-cta {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-5);
  align-items: flex-start;
  padding-top: var(--ag-space-7);
  margin-top: var(--ag-space-8);
  border-top: 1px solid var(--ag-color-border);
}

.treatment-detail-section {
  padding-top: var(--ag-space-7);
  margin-top: var(--ag-space-8);
  border-top: 1px solid var(--ag-color-border);
}

.treatment-detail-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.treatment-faq {
  padding-block: var(--ag-space-4);
  border-bottom: 1px solid var(--ag-color-border);
}

.treatment-faq summary {
  min-height: 44px;
  padding-block: var(--ag-space-2);
  color: var(--ag-color-charcoal);
  font-weight: var(--ag-weight-medium);
  cursor: pointer;
}

.treatment-faq .prose {
  padding-top: var(--ag-space-3);
}

.testimonial__portrait,
.testimonial-detail__portrait {
  max-width: 180px;
  margin-bottom: var(--ag-space-5);
  overflow: hidden;
  border-radius: 50%;
}

.testimonial__portrait img,
.testimonial-detail__portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.gallery-detail__image {
  margin: 0 0 var(--ag-space-7);
}

.gallery-detail__image img {
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: cover;
}

.gallery-detail__image figcaption {
  padding-top: var(--ag-space-3);
  color: var(--ag-color-muted);
  font-size: 0.875rem;
}

.gallery-detail__placeholder {
  aspect-ratio: 16 / 10;
}

.consent-reminder {
  padding: var(--ag-space-4);
  margin-top: var(--ag-space-7);
  color: var(--ag-color-muted);
  background: var(--ag-color-warm);
  font-size: 0.875rem;
}

.error-page h1 {
  max-width: 12ch;
}

.error-page > p:not(.eyebrow) {
  color: var(--ag-color-muted);
}

.error-page__links {
  margin-block: var(--ag-space-5);
}

.related-articles {
  padding-top: var(--ag-space-8);
  margin-top: var(--ag-space-8);
  border-top: 1px solid var(--ag-color-border);
}
