/* =========================================================
   Subpages — accent hero, then rounded panels rising over it.
   Mirrors the reference's stacked-panel architecture.
   ========================================================= */

.p-body { background: var(--color-sandstone); }

/* ---------- hero ---------- */

.p-hero {
  position: relative;
  background: var(--accent);
  min-height: 780px;
  padding: 0 0 40px;
  overflow: hidden;
}

.p-hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 190px 40px 0;
}

.p-hero-text { max-width: 62%; }

.p-kicker {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  opacity: 0.72;
  margin-bottom: 22px;
}

.p-title {
  font-size: min(112px, 8vw);
  font-weight: var(--font-weight-medium);
  line-height: 0.95;
  letter-spacing: -0.06em;
  word-spacing: 0.02em;
  color: var(--color-ink-black);
}

/* body copy sits right and low, the way the reference offsets it */
.p-lead {
  max-width: 520px;
  margin-top: 34px;
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-ink-black);
}

/* the breathing illustration, bleeding off the hero's bottom-right */
.p-art {
  position: absolute;
  right: -2%;
  bottom: -6%;
  width: 56%;
  z-index: 1;
  pointer-events: none;
}

/* ---------- stacked panels ---------- */

.p-panel {
  position: relative;
  margin-top: -60px;                 /* each panel rides up over the one above */
  border-radius: 60px 60px 0 0;
  padding: 96px 40px 104px;
}

.p-panel-white { background: var(--color-pure-white); z-index: 4; }
.p-panel-cream { background: var(--color-cream-paper); z-index: 5; }
.p-panel-sand  { background: var(--color-sandstone);  z-index: 6; }

.p-inner { max-width: var(--page-max-width); margin: 0 auto; }

.p-panel-title {
  font-size: 68px;
  font-weight: var(--font-weight-medium);
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--color-ink-black);
  margin-bottom: 56px;
}

.p-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 64px;
}

.p-block h3 {
  font-size: var(--text-heading-sm);   /* 30px */
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink-black);
  margin-bottom: 10px;
}

.p-block p {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-ink-black);
  max-width: 46ch;
}

/* ---------- closing block ---------- */

.p-close { text-align: center; }

.p-close-title {
  font-size: 88px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--color-ink-black);
}

.p-close-line {
  margin: 20px 0 40px;
  font-size: var(--text-subheading);
  color: var(--color-stone-gray);
}

.p-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--color-pure-white);
  border-radius: var(--radius-buttons);
  padding: 18px 66px 18px 36px;
  --btn-pad: 36px;
  --btn-shift: 30px;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-ink-black);
}

.p-btn-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-sky-pop);
  flex: none;
}

.p-back { margin-top: 44px; font-size: var(--text-body-sm); }
.p-back a { color: var(--color-stone-gray); border-bottom: 1px solid var(--color-hairline-mist); padding-bottom: 2px; }

/* ---------- contact form ---------- */

.p-form-panel {
  background: var(--color-fresh-grass);
  border-radius: 64px;
  padding: 64px 72px;
}

.p-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 40px; }
.p-field { display: flex; flex-direction: column; gap: 10px; }
.p-field-wide { grid-column: 1 / -1; }

.p-field label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
}

.p-field input, .p-field select, .p-field textarea {
  font-family: var(--font-inter);
  font-size: var(--text-body-lg);
  color: var(--color-ink-black);
  background: var(--color-pure-white);
  border: none;
  border-radius: 24px;
  padding: 16px 20px;
  resize: vertical;
}

.p-form-actions { grid-column: 1 / -1; }

/* ---------- the page rises from the bottom ----------
   Self-contained: the incoming page animates itself, so nothing has to
   snapshot the homepage (which is 7000px tall with ten videos on it —
   capturing that locked the page for a beat and swallowed clicks). */

html { background: var(--color-sandstone); }

.p-body {
  animation: p-rise 520ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

@keyframes p-rise {
  from { transform: translateY(100vh); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .p-body { animation: none; }
}

/* ---------- narrow ---------- */

@media (max-width: 1180px) {
  .p-hero-inner { grid-template-columns: 1fr; padding-top: 150px; }
  .p-lead { margin-top: 20px; max-width: 60ch; }
  .p-art { position: relative; right: auto; bottom: auto; width: 92%; margin: 30px auto 0; }
  .p-hero { min-height: 0; }
  .p-blocks, .p-form { grid-template-columns: 1fr; }
  .p-panel-title { font-size: 44px; }
  .p-close-title { font-size: 52px; }
  .p-form-panel { padding: 40px 32px; }
}

/* ---------- contact extras ---------- */

.p-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.p-form-warn {
  background: var(--color-sunshine-pop);
  border-radius: 20px;
  padding: 14px 20px;
  margin-bottom: 28px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
}

.p-cal {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.p-cal-line {
  font-size: var(--text-subheading);
  color: var(--color-ink-black);
}

.p-cal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--color-fresh-grass);
  border-radius: var(--radius-buttons);
  padding: 14px 54px 14px 28px;
  --btn-pad: 28px;
  --btn-shift: 26px;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-ink-black);
}

.p-cal-btn .p-btn-dot { background: var(--color-ink-black); }

/* ---------- form result states ---------- */

.p-form-success {
  display: none;
  background: var(--color-fresh-grass);
  border-radius: 64px;
  padding: 64px 72px;
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink-black);
}

.p-form-success.is-shown { display: block; }

.p-form-error:not(:empty) {
  background: var(--color-coral-pop);
  color: var(--color-pure-white);
  border-radius: 24px;
  padding: 14px 22px;
  margin-bottom: 22px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.p-field-error:not(:empty) {
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
  background: var(--color-sunshine-pop);
  border-radius: 12px;
  padding: 5px 12px;
  align-self: flex-start;
}

.p-form [aria-invalid="true"] { outline: 2.5px solid var(--color-coral-pop); outline-offset: 2px; }

/* the submit button is a <button>, so it needs the reset overridden */
.p-btn-submit { border: none; cursor: pointer; font-family: var(--font-inter); }
.p-btn-submit[disabled] { opacity: 0.55; cursor: progress; }

.p-cal-todo { font-size: var(--text-body-sm); color: var(--color-stone-gray); }