/* Process-page composition. All type roles come from typography.css. */
.process-page { --process-columns:repeat(2,minmax(0,1fr)); --process-gap:72px; }
.process-opening { display:grid; grid-template-columns:var(--process-columns); gap:var(--process-gap); align-items:center; padding-block:56px 60px; }
.process-opening h1 em { display:inline-block; color:var(--sage); margin-top:6px; }
.process-promise { margin-block:26px 18px; }
.process-opening .copy { max-width:510px; }
.process-plan-stack { position:relative; isolation:isolate; justify-self:center; width:min(100% - 24px,530px); aspect-ratio:1.25; }
.process-plan { position:absolute; width:76%; margin:0; padding:12px 12px 0; background:#f8f6ef; box-shadow:0 18px 40px #263b3517; transition:transform .45s; }
.process-plan img { display:block; width:100%; height:auto; aspect-ratio:4/3; }
.process-plan figcaption { padding-block:12px; color:var(--muted); text-align:center; }
.process-plan-back { left:calc(1% - clamp(0px,30vw - 300px,125px)); bottom:2%; transform:rotate(-7deg); }
.process-plan-front { z-index:1; right:1%; top:4%; transform:rotate(6deg); }
.process-plan-stack:hover .process-plan-back { transform:rotate(-9deg) translate(-2px,2px); }
.process-plan-stack:hover .process-plan-front { transform:rotate(3deg) translateY(-3px); }
.process-path { padding-bottom:32px; }
.process-path>.eyebrow { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:0; }
.process-timeline { position:relative; margin:0; padding:0; list-style:none; }
.process-timeline::before { content:''; position:absolute; left:16px; top:45px; bottom:54px; width:1px; background:var(--line); }
.process-step { position:relative; display:grid; grid-template-columns:var(--process-columns); gap:var(--process-gap); padding-block:34px; }
.process-step+.process-step::before { content:''; position:absolute; top:0; left:56px; right:0; border-top:1px solid var(--line); }
.process-step-heading { display:grid; grid-template-columns:32px 1fr; gap:24px; align-items:start; }
.process-number { display:grid; place-items:center; min-height:32px; background:var(--coral); border-radius:50%; position:relative; outline:8px solid var(--paper); color:var(--ink); }
.process-step-heading h3 { padding-top:3px; max-width:380px; }
.process-exchange { display:grid; grid-template-columns:var(--process-columns); gap:32px; margin:0; }
.process-exchange dt { margin-bottom:10px; }
.process-exchange dd { margin:0; color:var(--muted); }
.process-page .process-step-link .text-link { margin-top:20px; }
.process-preparation { margin-top:24px; }
.process-preparation summary { padding-block:18px; }
.process-preparation details>div { max-width:none; padding:14px 0 20px; }
.process-preparation-grid { display:grid; grid-template-columns:175px 1fr; gap:26px; align-items:start; }
.process-map { margin:0; background:#e8e8dc; padding:10px; }
.process-map img { width:100%; height:auto; }
.process-map figcaption { padding-top:10px; color:var(--muted); }
.process-preparation-list { list-style:none; margin:0; padding:0; }
.process-preparation-list li+li { margin-top:18px; }
.process-preparation-list strong { display:block; margin-bottom:7px; }
.process-preparation-note { border-left:2px solid var(--sage); margin-top:24px; padding-left:16px; color:var(--muted); }
.process-online { display:grid; grid-template-columns:.9fr 1.2fr auto; gap:32px; align-items:center; padding:28px 32px; background:#e5e9d9; }
.process-online>div { display:flex; gap:18px; align-items:center; }
.process-online .link-leaf { color:var(--sage); flex:none; }
.process-online p { color:var(--muted); }
.process-page .process-online .text-link { margin:0; white-space:nowrap; }
.process-faq { display:grid; grid-template-columns:var(--process-columns); gap:var(--process-gap); align-items:start; }
.process-faq h2 em { color:var(--sage); }
.process-contact { padding-block:60px; background:var(--coral); }
.process-contact-grid { display:grid; grid-template-columns:var(--process-columns); gap:var(--process-gap); align-items:center; }
.process-contact-grid .copy { max-width:410px; color:var(--ink); }
.process-contact h2 em { color:var(--ink); }
.process-contact .button { margin-top:22px; background:var(--ink); color:var(--paper); }
@media(max-width:1100px) {
  .process-page { --process-gap:40px; }
  .process-opening { padding-block:45px 50px; }
  .process-step { grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
  .process-step-heading { gap:18px; }
  .process-exchange { gap:22px; }
  .process-preparation-grid { grid-template-columns:150px 1fr; gap:20px; }
  .process-online { grid-template-columns:1fr 1.3fr; gap:18px 30px; padding:26px; }
  .process-online>.text-link { grid-column:2; justify-self:start; }
}
@media(max-width:800px) {
  .process-opening { grid-template-columns:1fr; gap:36px; padding-block:38px 48px; }
  .process-promise { margin-top:24px; }
  .process-plan-stack { width:min(100% - 24px,480px); }
  .process-step { grid-template-columns:1fr; gap:22px; padding-block:28px; }
  .process-step-heading { gap:20px; }
  .process-step>div:not(.process-step-heading),.process-step>.process-exchange { margin-left:52px; }
  .process-step+.process-step::before { left:52px; }
  .process-exchange { gap:25px; }
  .process-timeline::before { top:42px; bottom:40px; }
  .process-preparation-grid { grid-template-columns:175px 1fr; gap:24px; }
  .process-path { padding-bottom:24px; }
  .process-online { grid-template-columns:1fr; gap:18px; padding:26px 24px; }
  .process-online>.text-link { grid-column:auto; }
  .process-faq { grid-template-columns:1fr; gap:30px; }
  .process-contact { padding-block:48px; }
  .process-contact-grid { grid-template-columns:1fr; gap:28px; }
}
@media(max-width:550px) {
  .process-exchange { grid-template-columns:1fr; gap:20px; }
  .process-preparation-grid { grid-template-columns:1fr; }
  .process-map { max-width:205px; }
  .process-step-heading h3 { padding-top:3px; }
  .process-plan { padding:8px 8px 0; }
  .process-plan figcaption { padding-block:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .process-plan { transition:none; }
}
html[data-motion=off] .process-plan { transition:none; }