/* Anna's introduction follows the planning guidance, with its original portrait and copy. */
.pricing-page .pricing-about { background: var(--paper); }
.pricing-page .pricing-about-layout { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); align-items: center; gap: clamp(40px,6vw,88px); max-width: 1120px; }
.pricing-about-photo { position: relative; width: 100%; max-width: 380px; }
.pricing-page .pricing-about-photo .photo { margin: 0; }
.pricing-page .pricing-about-photo img { display: block; width: 100%; height: auto; }
.pricing-about-photo > .experience-photo-change { position: absolute; bottom: 20px; left: 20px; margin: 0; background: var(--paper); }
.pricing-about-copy { min-width: 0; }
.pricing-page .pricing-about-copy h2 { font-size: clamp(25.5px,2.501vw,34.5px); line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; margin: 0 0 22px; }
.pricing-page .pricing-about-copy p { font: 400 15.5px/1.75 var(--serif); color: var(--muted); margin: 0 0 20px; }
.pricing-page .pricing-about-copy .text-link { margin-top: 4px; }
@media (max-width:760px) {
 .pricing-page .pricing-about-layout { grid-template-columns: 1fr; gap: 32px; }
 .pricing-about-photo { max-width: 380px; justify-self: center; }
 .pricing-page .pricing-about-copy h2 { font-size: clamp(24.5px,5.74vw,34.5px); }
 .pricing-page .pricing-about-copy p { font-size: 15px; line-height: 1.7; }
}
/* A full-frame portrait anchors the spread beside copy and a centered detail pair. */
.pricing-page .pricing-experience { padding: 0; background: var(--paper); background-image: none; }
.pricing-page .pricing-experience .pricing-introduction-layout {
  display: grid; grid-template-columns: var(--experience-photo-width, 43%) minmax(0,1fr);
  align-items: center; gap: 0; width: 100%; max-width: none; margin: 0;
}
.pricing-page .pricing-experience .experience-gallery {
  position: relative; width: 100%; max-width: none; justify-self: stretch; align-self: start; order: 0;
}
.pricing-page .pricing-experience .photo { margin: 0; width: 100%; }
.pricing-page .pricing-experience img { display: block; width: 100%; height: auto; }
.pricing-page .pricing-experience .pricing-introduction-copy {
  width: 100%; max-width: 780px; justify-self: center; align-self: start; order: 0;
  padding: clamp(32px,3vw,48px) clamp(36px,4vw,64px);
}
.pricing-page .pricing-experience #experience-title {
  grid-column: auto; max-width: none; margin: 0 0 20px; text-align: left;
  font-size: clamp(25.5px,2.46vw,35.5px); letter-spacing: -.03em; line-height: 1.15; text-wrap: pretty;
}
.pricing-page .pricing-experience .pricing-introduction-lead {
  font-size: clamp(18px,1.353vw,19.5px); line-height: 1.5; margin: 0 0 22px;
}
.pricing-page .pricing-experience .experience-body-copy { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 0; }
.pricing-page .pricing-experience .experience-body-copy p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
/* Landscape replacements retain their full frame above the copy. */
.pricing-page .pricing-experience.experience-landscape .pricing-introduction-layout { grid-template-columns: 1fr; }
@media (min-width:901px) and (max-width:1200px) {
 .pricing-page .pricing-experience .pricing-introduction-copy { padding: 24px; }
 .pricing-page .pricing-experience #experience-title { font-size: 24.5px; margin-bottom: 20px; }
 .pricing-page .pricing-experience .pricing-introduction-lead { font-size: 17px; margin-bottom: 24px; }
 .pricing-page .pricing-experience .experience-body-copy { gap: 24px; }
 .pricing-page .pricing-experience .experience-body-copy p { font-size: 14.5px; line-height: 1.65; }
}
@media (max-width:900px) {
 .pricing-page .pricing-experience .pricing-introduction-layout { grid-template-columns: 1fr; }
 .pricing-page .pricing-experience .pricing-introduction-copy { padding: 36px var(--gutter); }
}
@media (max-width:760px) {
 .pricing-page .pricing-experience #experience-title { font-size: clamp(24.5px,5.74vw,34.5px); }
 .pricing-page .pricing-experience .pricing-introduction-lead { font-size: 19px; margin-bottom: 24px; }
 .pricing-page .pricing-experience .experience-body-copy { gap: 24px; }
 .pricing-page .pricing-experience .experience-body-copy p { font-size: 15px; line-height: 1.7; }
}
.experience-photo-change {
  margin-top: 20px; padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--sea-deep); border-radius: 2px;
  background: transparent; color: var(--sea-deep); font: 13px/1.4 var(--sans);
}
.experience-photo-change[hidden] { display: none; }
.experience-gallery > .experience-photo-change { position: absolute; left: 20px; bottom: 20px; margin: 0; background: var(--paper); }
.experience-photo-change:focus-visible { outline: 2px solid var(--sea-deep); outline-offset: 3px; }

.pricing-page .experience-small-photos { display: grid; grid-template-columns: var(--experience-detail-columns, 1fr 1fr); gap: 12px; width: 100%; max-width: 480px; margin: 28px auto 0; align-items: start; }
.pricing-page .experience-photo-item { position: relative; min-width: 0; }
.pricing-page .experience-photo-item > .experience-photo-change { position: absolute; left: 12px; bottom: 12px; margin: 0; background: var(--paper); }

/* One complete portrait meets the edges of the planning section. */
.pricing-page .pricing-guidance { padding: 0; }
.pricing-page .pricing-guidance .pricing-introduction-layout { grid-template-columns: minmax(0,1fr) var(--guidance-photo-width,36%); width: 100%; max-width: none; margin: 0; gap: 0; align-items: center; }
.pricing-page .pricing-guidance .pricing-introduction-copy { width: 100%; max-width: 780px; justify-self: center; padding: clamp(36px,4vw,64px) clamp(36px,4vw,64px); }
.pricing-page .pricing-guidance .guidance-gallery { display: block; width: 100%; align-self: start; }
.pricing-page .pricing-guidance .guidance-photo-item { position: relative; }
.pricing-page .pricing-guidance .photo { width: 100%; margin: 0; }
.pricing-page .pricing-guidance .photo img { display: block; width: 100%; height: auto; }
.pricing-page .guidance-photo-item > .experience-photo-change { position: absolute; right: 20px; bottom: 20px; margin: 0; background: var(--paper); }
.pricing-page .pricing-guidance.guidance-landscape .pricing-introduction-layout { grid-template-columns: 1fr; }
@media (max-width:900px) {
 .pricing-page .pricing-guidance .pricing-introduction-layout { grid-template-columns: 1fr; }
 .pricing-page .pricing-guidance .pricing-introduction-copy { padding: 36px var(--gutter); }
}