/* Warm editorial spacing, organic photography and quiet layered details. */
:root {
  --beige: #f5f2eb;
  --mint: #dff2e9;
  --peach: #f6dfd0;
  --pale-blue: #e6eefb;
}
.boxed { border-radius: 24px; }
.serif-accent { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; letter-spacing: -.04em; }
.button { transition: background 280ms, color 280ms, box-shadow 280ms, transform 280ms var(--ease); }
.button:active { transform: scale(.98); }
.button:focus-visible svg { transform: translateX(3px); }


.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sky-deep); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.how-photo { border-radius: 150px 24px 24px 24px; height: 740px; }
.how-photo picture { margin-block: -22px; height: calc(100% + 44px); transform: translateY(var(--photo-drift, 0px)); }
.how-photo figcaption { font-size: 27px; }
.step-number { display: grid; place-items: center; background: var(--sky-soft); color: var(--sky-deep); width: 38px; height: 38px; border-radius: 50%; font-size: 12px; padding: 0; flex-shrink: 0; }
.steps li { gap: 18px; }
.steps h3 { font-size: 23px; padding-top: 4px; }
.steps p { color: var(--muted); font-size: 16px; }

.price-panel { border-radius: 28px; position: relative; overflow: hidden; }
.price-panel::before { content: ''; position: absolute; width: 180px; height: 180px; border: 1px solid #ffffff12; border-radius: 50%; top: -95px; right: -60px; pointer-events: none; }
.price-panel .price-amount { font-weight: 450; }
.final-section { border-radius: 24px 130px 24px 24px; }
.faq-section { background: var(--sky-soft); border-radius: 100px 24px 24px 24px; }
.faq-heading .eyebrow { justify-content: center; }
.faq-trigger { border-color: #b7d4e8; background: #ffffff70; }
.faq-trigger:hover { background: #d5eefb; }
.faq-answer p { background: #fffcf7; }
.site-footer { border-radius: 24px; }
.footer-top nav > :is(a, button) { transition: color 200ms; }

.will-reveal { transform: translateY(20px); transition: none; }
.will-reveal.is-visible { transform: none; transition: opacity 1100ms var(--ease), transform 1100ms var(--ease); transition-delay: var(--reveal-delay, 0ms); }
@keyframes quiet-arrival { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
  .how-photo img { transition: transform 1100ms var(--ease); }
  .how-photo:hover img { transform: scale(1.025); }
}
@media (hover: none) {
  .button-label > span { transition: none; }
  :is(.button, .text-link):hover .button-label > span:first-child { transform: none; }
  .button-label > span + span { display: none; }
}
@media (max-width: 1200px) {
  .how-photo { height: 740px; }
}
@media (max-width: 1050px) {
  .how-photo { border-top-left-radius: 110px; }
}
@media (max-width: 760px) {
  .boxed { border-radius: 20px; }
  .how-photo { height: 480px; border-radius: 100px 20px 20px 20px; }
  .how-photo figcaption { font-size: 25px; }
  .steps h3 { font-size: 22px; }
  .step-number { width: 32px; height: 32px; }
  .price-panel { border-radius: 24px; }
  .final-section { border-top-right-radius: 80px; }
  .faq-section { border-top-left-radius: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .how-photo picture, .how-photo img, .button:hover { transform: none !important; }
  .will-reveal { opacity: 1; transform: none; }
}