/* Process page: the meeting journey and the client roadmap (Sept 25, 2026).
   Loaded after one-ground.css on process.html only. Selectors carry three classes where they
   must beat one-ground's (0,2,2) `main p` rule. Brand tokens only: navy #0c1a2d, gold #d7b486,
   gold-text #7d5f33, cream ground #fcfcf9, warm hairlines #e0d7c6 / #d8ceba, muted #4a5568. */

/* ---------- 1. The journey: four meetings as lit bubbles ---------- */
.one-ground .journey{position:relative;--node:58px;--fill:0px;margin-top:6px}
.one-ground .journey-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;margin:0 0 22px}
.one-ground .journey-phase{position:relative;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#7d5f33;padding:0 0 14px}
.one-ground .journey-phase::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  border:1px solid #d8ceba;border-bottom:0;border-radius:8px 8px 0 0}
.one-ground .journey-phase-start{grid-column:1/4}
.one-ground .journey-phase-ongoing{grid-column:4}
.one-ground .journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;position:relative;z-index:1}
.one-ground .journey-step{display:flex;flex-direction:column;align-items:center;min-width:0}
.one-ground .journey-node{width:var(--node);height:var(--node);border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-indent:.12em;font-variant-numeric:tabular-nums;
  background:#0c1a2d;color:#d7b486;border:1.5px solid #0c1a2d;box-shadow:0 0 0 7px rgba(215,180,134,.16);
  margin:0 0 26px;transition:background .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s ease}
.one-ground .journey-rail{position:absolute;left:12.5%;right:12.5%;top:calc(var(--phase-h,49px) + var(--node) / 2 - 1px);height:2px;
  background:#e0d7c6;border-radius:2px;pointer-events:none}
.one-ground .journey-rail-fill{position:absolute;inset:0 auto 0 0;width:100%;background:#0c1a2d;border-radius:2px;
  transform-origin:0 50%;transform:scaleX(var(--progress,1));transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.one-ground .journey-card{position:relative;width:100%;flex:1;background:#fff;border:1px solid #d8ceba;border-radius:22px;
  padding:28px 26px 30px;box-shadow:0 24px 50px -30px rgba(12,26,45,.35);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s ease}
.one-ground .journey-card::before{content:"";position:absolute;left:50%;top:-14px;width:14px;height:14px;background:inherit;
  border-left:1px solid;border-top:1px solid;border-color:inherit;transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0}
.one-ground .journey .journey-card .journey-meta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#7d5f33;margin:0 0 12px;line-height:1.5}
.one-ground .journey-card h3{font-family:"General Sans",Arial,sans-serif;font-size:21px;font-weight:500;line-height:1.3;
  letter-spacing:-.01em;color:#0c1a2d;margin:0 0 12px}
.one-ground .journey .journey-card p:not(.journey-meta){font-size:15.5px;line-height:1.75;color:#4a5568;margin:0}

/* Live state (JavaScript present): steps ahead of the pointer rest unlit. Text colours do not
   change, so contrast is identical lit or unlit; only the object around the text changes. */
.one-ground .journey.is-live .journey-step:not(.is-lit) .journey-node{background:#fcfcf9;color:#7d5f33;border-color:#d8ceba;box-shadow:0 0 0 0 rgba(215,180,134,0)}
.one-ground .journey.is-live .journey-step:not(.is-lit) .journey-card{background:#fcfcf9;border-color:#e0d7c6;box-shadow:none}
.one-ground .journey.is-live .journey-step.is-current .journey-node{transform:scale(1.08);box-shadow:0 0 0 9px rgba(215,180,134,.28)}
.one-ground .journey.is-live .journey-step.is-current .journey-card{transform:translateY(-6px);border-color:#c9bba2;
  box-shadow:0 30px 60px -28px rgba(12,26,45,.45)}
.one-ground .journey.is-live .journey-rail-fill{transform:scaleX(var(--progress,0))}
.one-ground .journey.is-live .journey-card{cursor:default}

/* Sept 25, evening (Joseph): the four cards read as off-centre because their eyebrows wrap to
   one or two lines and "Mutual commitment" wrapped, so each title and paragraph started at a
   different height, and the current card lifted 6px. Above 1100px the four steps now share one
   set of rows through subgrid (node, eyebrow, title, paragraph), so every eyebrow, title and
   paragraph starts on the same line whatever the copy does. The lift is gone; the current card
   keeps its deeper shadow and border. 22px side padding lets "Mutual commitment" sit on one line. */
@media(min-width:1101px){
  .one-ground .journey-steps{grid-template-rows:repeat(4,auto)}
  .one-ground .journey-step{display:grid;grid-template-rows:subgrid;grid-row:span 4;justify-items:center}
  .one-ground .journey-card{display:grid;grid-template-rows:subgrid;grid-row:2 / span 3;justify-self:stretch;align-content:start;
    padding:28px 22px 30px}
  .one-ground .journey.is-live .journey-step.is-current .journey-card{transform:none}
}

@media(max-width:1100px){
  .one-ground .journey-phases,.one-ground .journey-rail{display:none}
  .one-ground .journey{--node:46px;padding-left:0}
  .one-ground .journey-steps{grid-template-columns:minmax(0,1fr);row-gap:26px;padding-left:0}
  .one-ground .journey-step{display:grid;grid-template-columns:var(--node) minmax(0,1fr);column-gap:22px;align-items:start;position:relative}
  .one-ground .journey-node{margin:6px 0 0;box-shadow:0 0 0 5px rgba(215,180,134,.16)}
  .one-ground .journey-step:not(:last-child)::after{content:"";position:absolute;left:calc(var(--node) / 2 - 1px);
    top:calc(var(--node) + 12px);bottom:-20px;width:2px;background:#e0d7c6;border-radius:2px}
  .one-ground .journey.is-live .journey-step.is-lit:not(:last-child)::after{background:#0c1a2d}
  .one-ground .journey-step::after{transition:background .45s ease}
  .one-ground .journey-card::before{left:-8px;top:calc(var(--node) / 2 - 1px);transform:rotate(-45deg);border-radius:3px 0 0 0}
  .one-ground .journey.is-live .journey-step.is-current .journey-card{transform:translateX(4px)}
}
@media(max-width:640px){
  .one-ground .journey{--node:40px}
  .one-ground .journey-step{column-gap:16px}
  .one-ground .journey-card{padding:22px 20px 24px;border-radius:18px}
  .one-ground .journey .journey-card p:not(.journey-meta){font-size:16px}
  .one-ground .journey-card h3{font-size:20px}
}

/* ---------- 2. The roadmap ---------- */
.one-ground .roadmap-head{max-width:700px}
.one-ground .process-steps-head .roadmap-eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7d5f33;margin:0 0 14px}
.one-ground .roadmap{margin:0}
.one-ground .rm-board{position:relative;background:#fff;border:1px solid #e0d7c6;border-radius:28px;padding:44px 44px 48px;
  box-shadow:0 40px 80px -56px rgba(12,26,45,.45);overflow:hidden;
  background-image:radial-gradient(circle,rgba(12,26,45,.07) 1px,transparent 1.4px);background-size:22px 22px;background-position:-11px -11px}
.one-ground .rm-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;position:relative}
.one-ground .rm-root{grid-column:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative;z-index:1;
  background:linear-gradient(160deg,#0c1a2d 0%,#08121f 100%);border-radius:18px;padding:22px 40px 24px;
  box-shadow:0 26px 50px -24px rgba(12,26,45,.55)}
.one-ground .rm-root-kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#d7b486}
.one-ground .rm-root-title{font-family:"Editor's Note","Lora",Georgia,serif;font-weight:300;font-size:30px;letter-spacing:-.02em;line-height:1.15;color:#f3f3f3}
.one-ground .rm-root-sub{font-size:13px;line-height:1.5;color:#c7cdd6}
.one-ground .rm-legend{grid-column:3;justify-self:end;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  border-left:1px solid #e0d7c6;padding-left:18px}
.one-ground .rm-key{display:inline-flex;white-space:nowrap;align-items:center;gap:10px;background:none;border:0;border-radius:999px;cursor:pointer;
  font:500 13px/1 "General Sans",Arial,sans-serif;color:#4a5568;padding:6px 10px 6px 4px;min-height:30px;transition:background .2s,color .2s}
.one-ground .rm-key:hover{background:#f6f1e8;color:#0c1a2d}
.one-ground .rm-key[aria-pressed="true"]{background:#0c1a2d;color:#f3f3f3;padding-left:8px}
.one-ground .rm-key:focus-visible{outline:2px solid #0c1a2d;outline-offset:2px}

/* status marks: navy ring; half fill; full fill with a gold tick; a circular arrow for recurring */
.one-ground .rm-dot{position:relative;flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #0c1a2d;background:#fff;display:inline-block}
.one-ground .rm-dot.is-doing{background:linear-gradient(90deg,#0c1a2d 0 50%,#fff 50% 100%)}
.one-ground .rm-dot.is-done{background:#0c1a2d}
.one-ground .rm-dot.is-done::after{content:"";position:absolute;left:4.3px;top:2px;width:3.6px;height:7px;border:solid #d7b486;border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.one-ground .rm-dot.is-repeat{border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d5f33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 6.4A5.4 5.4 0 0 0 3.4 4.8'/%3E%3Cpath d='M3 2.2v2.9h2.9'/%3E%3Cpath d='M2.8 9.6a5.4 5.4 0 0 0 9.8 1.6'/%3E%3Cpath d='M13 13.8v-2.9h-2.9'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.one-ground .rm-key[aria-pressed="true"] .rm-dot{border-color:#f3f3f3}
.one-ground .rm-key[aria-pressed="true"] .rm-dot.is-repeat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d7b486' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 6.4A5.4 5.4 0 0 0 3.4 4.8'/%3E%3Cpath d='M3 2.2v2.9h2.9'/%3E%3Cpath d='M2.8 9.6a5.4 5.4 0 0 0 9.8 1.6'/%3E%3Cpath d='M13 13.8v-2.9h-2.9'/%3E%3C/svg%3E")}

/* connectors: a trunk from the root, a bar across, a drop into each branch pill.
   Every drop lands on the pill's icon centre, 22px from the branch's left edge. */
.one-ground .rm-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:30px;margin-top:0;padding-top:64px;position:relative}
.one-ground .rm-branches::before{content:"";position:absolute;left:50%;top:0;height:30px;width:1.5px;background:#0c1a2d;transform:translateX(-50%)}
.one-ground .rm-branch{position:relative;min-width:0;padding:0}
.one-ground .rm-branch:not(:last-child)::before{content:"";position:absolute;top:-34px;left:21.25px;right:-51.25px;height:34px;border-top:1.5px solid #0c1a2d}
.one-ground .rm-branch:first-child::before{border-left:1.5px solid #0c1a2d;border-top-left-radius:16px}
.one-ground .rm-branch:not(:first-child):not(:last-child)::after{content:"";position:absolute;left:21.25px;top:-34px;height:34px;width:1.5px;background:#0c1a2d}
.one-ground .rm-branch:last-child::after{content:"";position:absolute;left:5.25px;top:-34px;width:17.5px;height:34px;box-sizing:border-box;
  border-top:1.5px solid #0c1a2d;border-right:1.5px solid #0c1a2d;border-top-right-radius:16px}
.one-ground .rm-head{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;max-width:100%;
  font-family:"General Sans",Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#0c1a2d;
  background:#fff;border:1.5px solid #0c1a2d;border-radius:999px;padding:5px 18px 5px 5px;line-height:1.2;white-space:nowrap}
.one-ground .rm-icon{width:32px;height:32px;border-radius:50%;background:#0c1a2d;display:grid;place-items:center;flex:none}
.one-ground .rm-icon svg{width:18px;height:18px;fill:none;stroke:#d7b486;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.one-ground .rm-items,.one-ground .rm-sub{list-style:none;margin:0;padding:0}
.one-ground .rm-items{position:relative;padding-left:44px}
.one-ground .rm-items::before{content:"";position:absolute;left:21.25px;top:-24px;bottom:18px;width:1.5px;background:#d8ceba;transform-origin:0 0}
.one-ground .rm-item{position:relative;display:flex;gap:11px;align-items:flex-start;padding:0 0 18px}
.one-ground .rm-item::before{content:"";position:absolute;left:-22px;top:9px;width:18px;height:1.5px;background:#d8ceba}
.one-ground .rm-item>.rm-dot{margin-top:2px}
.one-ground .roadmap .rm-text{font-size:14px;line-height:1.6;color:#4a5568;min-width:0}
.one-ground .roadmap .rm-text b{font-weight:600;color:#0c1a2d}
.one-ground .rm-sub{position:relative;margin:10px 0 2px;padding-left:18px}
.one-ground .rm-sub::before{content:"";position:absolute;left:4px;top:-4px;bottom:9px;width:1.5px;background:#e0d7c6}
.one-ground .rm-sub li{position:relative;display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.55;color:#4a5568;padding:0 0 8px}
.one-ground .rm-sub li::before{content:"";position:absolute;left:-14px;top:8px;width:10px;height:1.5px;background:#e0d7c6}
.one-ground .rm-sub .rm-dot{width:13px;height:13px;margin-top:2px;border-width:1.3px}
.one-ground .rm-sub .rm-dot.is-done::after{left:3.4px;top:1.4px;width:3px;height:6px;border-width:0 1.5px 1.5px 0}

/* filter: the chosen status stays, the rest steps back. Sept 27, 2026: the rows that step back
   stay readable (their text keeps AA contrast, #6b7280 on the cream ground); their dots fade and
   their labels lose weight instead. At opacity .28 the text had dropped to about 1.6:1. */
.one-ground .rm-item,.one-ground .rm-sub li{transition:color .3s ease}
/* The dots fade with filter, not opacity: opacity belongs to the reveal (the is-armed rules below set
   it on completed dots at equal specificity, later in the file, and hold it at 1 under reduced motion). */
.one-ground .rm-dot{transition:filter .3s ease}
.one-ground .roadmap[data-filter] .rm-item:not([data-match])>.rm-dot,
.one-ground .roadmap[data-filter] .rm-sub li:not([data-match])>.rm-dot{filter:opacity(.3)}
.one-ground .roadmap[data-filter] .rm-item:not([data-match])>.rm-text,
.one-ground .roadmap[data-filter] .rm-sub li:not([data-match]){color:#6b7280}
.one-ground .roadmap[data-filter] .rm-item:not([data-match])>.rm-text b{color:#6b7280;font-weight:500}
.one-ground .roadmap[data-filter] .rm-item[data-match]>.rm-dot,
.one-ground .roadmap[data-filter] .rm-sub li[data-match]>.rm-dot{box-shadow:0 0 0 4px rgba(215,180,134,.35)}

.one-ground .roadmap figcaption{font-size:13px;line-height:1.7;color:#4a5568;margin:18px 4px 0;max-width:760px}

/* entrance (Sept 25, evening; Joseph: "the different spots kind of all fell in... in sequential
   order... first 90 days, first year, all of that is stagnant"). The branch heads never move. The
   items drop in one at a time in reading order: across the whole board on the four-column layout
   (every First 90 days item, then First year, then the quarterly and yearly ones), branch by
   branch as each scrolls into view on narrower screens. A branch's rail draws as its first item
   arrives and completed marks tick in just after their item lands. JS sets --d (the item's place
   in the sequence), --b0 (the branch's first place) and --step, and arms it only when the board
   starts below the fold; ?qa=1, reduced motion and print all show everything at once. */
.one-ground .roadmap.is-armed .rm-items::before{transform:scaleY(0);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.one-ground .roadmap.is-armed .rm-item{opacity:0;transform:translateY(-14px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
/* task dots only: the legend's Completed key keeps its tick while the board animates (Astra 2, #3) */
.one-ground .roadmap.is-armed .rm-items .rm-dot.is-done{transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.one-ground .roadmap.is-armed .rm-branch.is-in .rm-items::before{transform:scaleY(1);transition-delay:calc(var(--b0,0) * var(--step,130ms) + 120ms)}
.one-ground .roadmap.is-armed .rm-branch.is-in .rm-item{opacity:1;transform:none;transition-delay:calc(var(--d,0) * var(--step,130ms) + 200ms)}
.one-ground .roadmap.is-armed .rm-branch.is-in .rm-dot.is-done{transform:none;opacity:1;transition-delay:calc(var(--d,0) * var(--step,130ms) + 520ms)}

/* on wide screens the board steps out past the text column so the four branches get room to read */
@media(min-width:1300px){
  .one-ground .roadmap{margin-left:-56px;margin-right:-56px}
  .one-ground .roadmap figcaption{margin-left:60px}
  .one-ground .rm-board{padding:44px 40px 48px}
}
@media(max-width:1100px){
  .one-ground .rm-board{padding:36px 30px 40px}
  .one-ground .rm-top{grid-template-columns:1fr;justify-items:center}
  .one-ground .rm-root{grid-column:1}
  .one-ground .rm-legend{grid-column:1;justify-self:center;flex-direction:row;flex-wrap:wrap;justify-content:center;border-left:0;padding-left:0;gap:4px 8px}
  .one-ground .rm-branches{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px;padding-top:40px}
  .one-ground .rm-branches::before,.one-ground .rm-branch::before,.one-ground .rm-branch::after{display:none}
}
@media(max-width:640px){
  .one-ground .rm-board{padding:28px 18px 30px;border-radius:22px;background-size:18px 18px}
  .one-ground .rm-root{padding:18px 24px 20px;width:100%}
  .one-ground .rm-root-title{font-size:26px}
  .one-ground .rm-branches{grid-template-columns:minmax(0,1fr);row-gap:34px;padding-top:32px}
  .one-ground .roadmap .rm-text{font-size:15px}
  .one-ground .rm-sub li{font-size:14px}
  .one-ground .rm-key{min-height:36px}
}
@media (prefers-reduced-motion:reduce){
  .one-ground .journey-node,.one-ground .journey-card,.one-ground .journey-rail-fill,.one-ground .journey-step::after,
  .one-ground .rm-item,.one-ground .rm-sub li,.one-ground .rm-items::before,.one-ground .rm-dot{transition:none!important}
}
@media print{
  .one-ground .journey.is-live .journey-step .journey-card{transform:none;box-shadow:none}
  .one-ground .rm-board{box-shadow:none;background-image:none}
  .one-ground .roadmap.is-armed .rm-item,.one-ground .roadmap.is-armed .rm-dot{opacity:1!important;transform:none!important}
  .one-ground .roadmap.is-armed .rm-items::before{transform:none!important}
}

/* ---------- On the page kit (Sept 26, 2026) ----------
   Joseph asked for the process page to take the pricing page's direction: a photo hero, larger
   sections and the change of colour. The hero, pills, bands and centred heads come from
   styles/page-kit.css. The journey sits on the sand band and the roadmap on the cream ground.
   The journey and roadmap keep the 1120px wrap (1072 of content) they were measured against:
   the roadmap board steps 56px past it each side at 1300px and up, so a wider wrap would push
   the board off a 1300px screen. */
body.page-kit.one-ground.process-refined main>section.pk-band>.wrap{width:auto;max-width:1120px;padding:0 24px}
.page-kit .pk-head+.journey,.page-kit .pk-head+.roadmap{margin-top:60px}
.one-ground.page-kit.process-refined main .pk-head>h2{max-width:22ch}
/* on sand: the unlit rail and the phase brackets need one step more ink to stay visible */
.one-ground .pk-sand .journey-rail{background:#d8ceba}
.one-ground .pk-sand .journey-phase::after{border-color:#c9bba2}
.one-ground .pk-sand .journey.is-live .journey-step:not(.is-lit) .journey-card{background:#f8f3ea;border-color:#e0d4bf}
.one-ground .pk-sand .journey.is-live .journey-step:not(.is-lit) .journey-node{background:#f8f3ea;border-color:#c9bba2}
@media(max-width:760px){
  body.page-kit.one-ground.process-refined main>section.pk-band>.wrap{padding:0 20px}
  .page-kit .pk-head+.journey,.page-kit .pk-head+.roadmap{margin-top:40px}
}


/* Phones (Astra 2, #15): the lit cards cast a smaller, closer shadow on the sand, so a stacked
   column of them no longer reads as a grey cloud. The current step still lifts and still has
   the darker edge; the approved desktop depth is unchanged. */
@media(max-width:760px){
  .one-ground .journey-card{box-shadow:0 10px 24px -18px rgba(12,26,45,.28)}
  .one-ground .journey.is-live .journey-step.is-current .journey-card{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(12,26,45,.34)}
}

/* A little more room for the roadmap's task text on wide screens (Astra 2, #27): the item connector
   and its indent are 8px shorter, the dot sits 2px closer to its text, and the board's side
   padding gives back 8px a side. Connectors, periods, filters and wording are unchanged. */
@media(min-width:1101px){
  .one-ground .rm-items{padding-left:36px}
  .one-ground .rm-item::before{left:-14px;width:10px}
  .one-ground .rm-item{gap:9px}
}
@media(min-width:1300px){
  .one-ground .rm-board{padding-left:32px;padding-right:32px}
}