/* One canvas follows the work from discovery to a practical plan. */
.home-page .approach-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:7%;align-items:end}
.home-page .approach-heading>p{justify-self:end}
/* Desktop: the heading uses the same columns as the steps and card below, so the short intro starts on the card's left edge. */
@media(min-width:1051px){.home-page .approach-heading{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}.home-page .approach-heading>p{justify-self:start}}
.home-page .approach-grid .journey-visual{position:sticky;top:clamp(20px,8svh,72px);align-self:start;width:100%;padding:24px;margin:0;background:#fffaf3;border:1px solid #ddcbc0;border-radius:12px;box-shadow:0 18px 42px #4b111b0c;transform:none;overflow:hidden;container-type:inline-size}
.journey-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;color:var(--label-muted)}
.journey-sample{padding:5px 9px;border-radius:20px;background:#f0e7db;color:#735d60}
.home-page .journey-visual h3{margin:0;color:#35171d;white-space:nowrap}
.journey-caption{color:#765d60;margin-top:9px;min-height:3.1em;text-wrap:pretty}
.journey-scene{--lane-top:34px;position:relative;aspect-ratio:1.8;margin-block:24px 18px;isolation:isolate}
.journey-snapshot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;transform:scale(1);border-radius:5px;transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1)}
/* Step one draws the capability canvas in the same palette as the priority and roadmap stages. */
.jc-board{display:grid;grid-template-columns:1.15fr 1fr 1.05fr;gap:6px}
.jc-domain{display:flex;flex-direction:column;min-width:0;min-height:0;padding:6px;border:1px solid #eadcd0;border-radius:6px;background:#f7efe6}
.jc-label{display:block;margin:0 0 5px 1px;font-size:9px;font-weight:var(--fw-strong);letter-spacing:var(--ls-data-caps);line-height:1.2;text-transform:uppercase;color:#85626b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-mosaic{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:4px}
.jc-mosaic>:last-child:nth-child(odd){grid-column:1/-1}
.jc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:0;padding:3px 4px;border:1px solid;border-radius:5px;text-align:center;color:#54202b;overflow:hidden}
.jc-tile.low{background:#efd0c9;border-color:#dcb9b0}
.jc-tile.mid{background:#ebdcc2;border-color:#dcc8a4}
.jc-tile.high{background:#dfe3cc;border-color:#c9d0b0}
.jc-tile b{font-size:clamp(11px,2.9cqw,17px);font-weight:var(--fw-semibold);line-height:1;letter-spacing:var(--ls-h5);font-variant-numeric:tabular-nums lining-nums}
.jc-tile small{max-width:100%;font-size:clamp(9px,1.4cqw,10px);font-weight:var(--fw-medium);line-height:1.2;color:#764950;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}   /* names wrap to three lines rather than truncate */
.journey-snapshot .jc-tile{gap:1px;padding:2px 4px}
@container (max-width:430px){.jc-tile small{display:none}.jc-label{font-size:9px;margin-bottom:4px;white-space:normal;min-height:2.4em}.jc-board{gap:4px}.jc-domain{padding:4px}.jc-mosaic{gap:3px}}
@container (min-width:431px) and (max-width:500px){.journey-snapshot .jc-tile small{display:none}}   /* too narrow for three-line names: scores only, as on phones */
.journey-priority-labels{position:absolute;inset:0 0 auto;display:flex;gap:19px;padding-inline:12px;font-size:9px;letter-spacing:var(--ls-data-caps);color:#8a6770;opacity:0;transition:opacity .3s;font-weight:var(--fw-strong);text-transform:uppercase}
.journey-roadmap-labels{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:12px;font-weight:var(--fw-semibold);color:#662938;opacity:0;transition:opacity .35s}
.journey-roadmap-labels span{padding:0 9px 10px;border-bottom:2px solid #b58286}
.journey-roadmap-lanes{position:absolute;inset:var(--lane-top) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:0;transition:opacity .35s}
.journey-roadmap-lanes i{border-radius:5px;background:#eee3d763}
/* Cards move by transform, never a layout shift (journey-scroll.js keeps --sw/--sh, the scene, and --tile-x/-y in px). */
.journey-item{position:absolute;left:0;top:0;display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid #dcb9b0;border-radius:6px;background:#efd8cf;color:#54202b;opacity:0;overflow:hidden;--jx:var(--tile-x,0px);--jy:var(--tile-y,0px);transform:translate(var(--jx),var(--jy));transition:transform .75s cubic-bezier(.22,1,.36,1),width .75s cubic-bezier(.22,1,.36,1),height .75s cubic-bezier(.22,1,.36,1),opacity .4s,background .5s;will-change:auto}
.journey-item strong{font-size:14px;font-weight:var(--fw-semibold);line-height:1.3;text-wrap:balance}
.journey-rank{flex-shrink:0;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #b17c80;color:#4b111b}
.journey-action{display:none;font-size:11px;line-height:1.4;color:#764950;text-wrap:pretty}
.journey-item-1{width:var(--tile-width,17%);height:var(--tile-height,22%);background:#efd0c9}
.journey-item-2{width:var(--tile-width,17%);height:var(--tile-height,22%);background:#ecd5c9}
.journey-item-3{width:var(--tile-width,17%);height:var(--tile-height,22%);background:#ebdcc2}
.journey-item-4{width:var(--tile-width,16%);height:var(--tile-height,28%);background:#e4e2cf}
.journey-visual[data-journey-stage="2"] .journey-snapshot,.journey-visual[data-journey-stage="3"] .journey-snapshot{opacity:0;transform:scale(.96)}
.journey-visual[data-journey-stage="2"] .journey-priority-labels{opacity:1}
.journey-visual[data-journey-stage="2"] .journey-item{--jx:0px;width:100%;height:19%;opacity:1}
.journey-visual[data-journey-stage="2"] .journey-item-1{--jy:calc(var(--sh) * .12)}
.journey-visual[data-journey-stage="2"] .journey-item-2{--jy:calc(var(--sh) * .35)}
.journey-visual[data-journey-stage="2"] .journey-item-3{--jy:calc(var(--sh) * .58)}
.journey-visual[data-journey-stage="2"] .journey-item-4{--jy:calc(var(--sh) * .81)}
.journey-visual[data-journey-stage="3"] .journey-roadmap-labels,.journey-visual[data-journey-stage="3"] .journey-roadmap-lanes{opacity:1}
.journey-visual[data-journey-stage="3"] .journey-item{width:calc((100% - 20px)/3);height:min(37%,(100% - var(--lane-top) - 12px)/2);opacity:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:11px;transition-delay:0ms}
.journey-visual[data-journey-stage="3"] .journey-item-1{--jx:0px;--jy:max(calc(var(--sh) * .17),calc(var(--lane-top) + 4px))}
.journey-visual[data-journey-stage="3"] .journey-item-2{--jx:0px;--jy:max(calc(var(--sh) * .6),calc((var(--sh) + var(--lane-top) + 4px)/2))}
.journey-visual[data-journey-stage="3"] .journey-item-3{--jx:calc((var(--sw) + 10px)/3);--jy:calc(var(--sh) * .34)}
.journey-visual[data-journey-stage="3"] .journey-item-4{--jx:calc((var(--sw) + 10px)/3 * 2);--jy:calc(var(--sh) * .51)}
.journey-visual[data-journey-stage="3"] .journey-rank{display:none}
.journey-visual[data-journey-stage="3"] .journey-item strong{font-size:clamp(11px,2.7cqw,14px)}
.journey-visual[data-journey-stage="3"] .journey-action{display:block}
.journey-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding-top:14px;border-top:1px solid #e1d1c6}
.journey-select[hidden]{display:none}
.journey-select button{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 5px;min-height:44px;border:0;border-radius:5px;background:transparent;color:#795c61;font:inherit;cursor:pointer;transition:background .2s,color .2s}
.journey-select button[aria-pressed="true"]{background:#4b111b;color:#fff5e9}
.journey-select button:hover:not([aria-pressed="true"]){background:#f0e5db;color:#4b111b}
.journey-select button:focus-visible{outline:2px solid #812635;outline-offset:2px}
/* The process rail: each step is a reading block (its card, then the hand-off to the next step) on one numbered rail.
   The blocks are laid out by CSS alone, so enhancement never moves them; journey-scroll.js only reads where they are,
   chooses the canvas stage from the step at the reading line, and fills the rail (transform only). */
.home-page #approach .steps{position:relative;gap:0;justify-content:flex-start;align-self:start;max-width:none;--marker-centre:46px}
/* Markers line up with the card headings (card padding plus half the 44px heading). */
@media(max-width:1100px){.home-page #approach .steps{--marker-centre:42px}}
@media(max-width:420px){.home-page #approach .steps{--marker-centre:40px}}
.home-page #approach .steps>article{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;row-gap:0;min-height:0;padding:0;align-items:start}
.home-page #approach .steps>article>.step-card{grid-column:2;grid-row:1;opacity:1;transform:none}
.home-page #approach .steps>article>.step-number{grid-column:1;grid-row:1;position:relative;z-index:1;width:32px;height:32px;margin-top:calc(var(--marker-centre) - 16px);border:1px solid #cdaaa1;background:#fffaf3;color:#735d60;box-shadow:inset 0 1px 0 #fff,0 1px 2px #4b111b14,0 4px 10px -6px #4b111b4c;transition:none}
/* Marker states crossfade by opacity alone: a ring layer for the current step, a filled disc for completed ones. */
.home-page #approach .steps>article>.step-number::before,.home-page #approach .steps>article>.step-number::after{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:50%;opacity:0;transition:opacity .4s;pointer-events:none}
.home-page #approach .steps>article>.step-number::before{border:1px solid #812635;box-shadow:0 0 0 6px #81263512}
.home-page #approach .steps>article>.step-number::after{background:#4b111b;box-shadow:inset 0 1px 0 #ffffff24,0 1px 2px #340a1233,0 6px 12px -8px #340a1299}
.home-page #approach .steps>article>.step-number .step-check{color:#f5efe5}
/* Rail: one track segment per step, from its marker to the next; the claret fill follows the reading line. */
.home-page #approach .steps>article:not(:last-of-type)::before,.home-page #approach .steps>article:not(:last-of-type)::after{content:'';position:absolute;left:15px;top:var(--marker-centre);bottom:calc(var(--marker-centre) * -1);width:2px;background:#d8beb4;transform-origin:top;pointer-events:none}
.home-page #approach .steps>article:not(:last-of-type)::after{background:#812635;transform:scaleY(var(--rail-fill,0))}
/* Hand-off: a slim note on the rail that carries one step's output into the next. It sits centred in the space the
   block keeps below its card, tied to the rail by a node and a short tick. */
.home-page #approach .step-handoff{grid-column:2;grid-row:2;align-self:center;justify-self:start;position:relative;max-width:100%;margin:var(--handoff-gap,22px) 0;padding:8px 16px 9px;border:1px solid #dcc8bb;border-radius:18px;background:#f8f1e7;box-shadow:inset 0 1px 0 #fffdf8,0 1px 2px #4b111b08;color:#5e4247;text-wrap:balance}
/* The node fills at the stage change without a colour transition (motion here is transform and opacity only). */
.home-page #approach .step-handoff::before{content:'';position:absolute;z-index:1;left:-34px;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid #c9a59d;border-radius:50%;background:#f3eadf;box-sizing:border-box}
.home-page #approach .step-handoff::after{content:'';position:absolute;left:-24px;top:50%;width:23px;height:1px;background:#d2b5ac}
.home-page #approach .steps>article.is-past .step-handoff::before{border-color:#812635;background:#812635}
.home-page #approach .steps>.journey-working-note{margin-top:var(--note-space,28px)}
/* Marker states once the outline is enhanced: the current step is ringed, completed steps carry the check. */
.home-page #approach .is-journey-ready .steps>article.is-current>.step-number{color:#4b111b}
.home-page #approach .is-journey-ready .steps>article.is-current>.step-number::before,.home-page #approach .is-journey-ready .steps>article.is-past>.step-number::after{opacity:1}
.home-page #approach .is-journey-ready .steps>article.is-past .step-digit{opacity:0;transform:scale(.6)}
.home-page #approach .is-journey-ready .steps>article.is-past .step-check{opacity:1;transform:scale(1)}
.home-page #approach .is-journey-ready .steps>article.is-past .step-check path{stroke-dashoffset:0}

/* Two columns with the canvas pinned beside the steps: each step block is about half a window tall, so each stage is
   read while it shows. The canvas releases when the grid ends, which is exactly where step three and the note end.
   journey-scroll.js sets --journey-pin so the pinned canvas is centred at about 45% of the window (never above the
   fallback), which keeps tall windows from leaving all their spare height under it. */
@media(min-width:801px){
  .home-page .approach-grid .journey-visual{top:var(--journey-pin,clamp(20px,5svh,56px));display:flex;flex-direction:column}
  .home-page #approach .steps>article:not(:last-of-type){min-height:clamp(380px,48svh,600px)}
  .home-page #approach .steps{--handoff-gap:clamp(32px,4svh + 8px,48px);--note-space:clamp(28px,5svh,52px)}
}
@media(min-width:801px) and (min-height:601px){
  /* Tall windows give the board more height, never squatter than 60% of the card's width. */
  .home-page .approach-grid .journey-scene{height:max(min(360px,42svh),min(42svh,60cqw));aspect-ratio:auto;flex:1 0 auto}
}
/* A canvas taller than the window scrolls with the page instead of pinning partly out of view. */
.home-page .approach-grid.journey-unpinned .journey-visual{position:relative;top:auto}
@media(max-width:1050px) and (min-width:801px){.journey-caption{min-height:4.65em}.home-page .approach-grid{gap:4%;grid-template-columns:1fr 1.1fr}.home-page .approach-grid .journey-visual{padding:20px}.journey-item{padding-inline:10px;gap:10px}.journey-item strong{font-size:13px}.journey-visual[data-journey-stage="3"] .journey-item{padding:8px}.journey-action{font-size:10px}}
@media(max-width:800px){
  .home-page .approach-heading{grid-template-columns:minmax(0,1fr);gap:16px}
  .home-page .approach-heading>p{justify-self:start;margin-top:0}
  .home-page .approach-grid.is-journey-ready{display:flex;flex-direction:column;gap:24px}
  .home-page .approach-grid .journey-visual{top:12px;max-width:none;padding:18px;align-self:stretch}
  .home-page .approach-grid.is-journey-ready .journey-visual{order:-1;z-index:3;box-shadow:0 10px 25px #4b111b0c}
  .journey-top{margin-bottom:10px}
  .journey-caption{margin-top:5px;min-height:4.65em}
  .journey-scene{height:clamp(152px,24svh,230px);aspect-ratio:auto;margin-block:14px 12px}
  .journey-snapshot{object-fit:contain}
  .journey-select{padding-top:9px}
  .journey-select button{min-height:44px;padding-block:6px}
  .home-page #approach .steps{width:100%;--handoff-gap:26px;--note-space:20px}
  .journey-item{padding:7px 10px;gap:10px}
  .journey-item strong{font-size:12px}
  .journey-rank{width:21px;height:21px}
  .journey-visual[data-journey-stage="3"] .journey-item{padding:8px;gap:5px}
  .journey-action{font-size:10px}
  .journey-roadmap-labels{font-size:11px}
}
/* Tile names need a 240px compact scene; shorter scenes show scores only, as on phones. */
@media(max-width:800px) and (min-height:1001px){.journey-scene{height:240px}}
@media(max-width:800px) and (max-height:1000px),(max-height:600px){.jc-tile small{display:none}}
/* Short phones: the pinned canvas drops its caption (the step below says the same) so the steps keep room to read. */
@media(max-width:800px) and (max-height:720px){.home-page .approach-grid.is-journey-ready .journey-caption{display:none}.home-page .approach-grid.is-journey-ready .journey-top{margin-bottom:6px}.home-page .approach-grid.is-journey-ready .journey-scene{height:clamp(136px,23svh,170px);margin-block:12px 10px}}
@media(max-width:370px){.home-page .approach-grid .journey-visual{padding:14px}.journey-select button{gap:5px}.journey-select button>span{display:none}.journey-action{font-size:10px}.journey-visual[data-journey-stage="3"] .journey-item{padding:6px}}
@media(max-height:600px){.home-page .approach-grid .journey-visual{top:8px}.journey-top{margin-bottom:10px}.journey-scene{height:clamp(125px,28svh,180px);aspect-ratio:auto;margin-block:12px}.journey-caption{margin-top:5px}.journey-select{padding-top:8px}.journey-action{display:none!important}}
/* Stacked layouts pin the canvas a few px below the top of the window. A sticky strip in the section's tone (the
   measured left-to-right shading of its background across the grid) covers that gap and, beneath the canvas, its
   rounded top corners, so step text never shows as a cut-off sliver above the canvas. Its negative margins leave the
   canvas and the steps exactly where they were. */
@media(max-width:800px) and (min-height:501px){.home-page .approach-grid.is-journey-ready::before{content:'';order:-2;align-self:stretch;position:sticky;top:0;z-index:2;height:28px;margin:-12px 0 -40px;background:url(/assets/workshop-paper-v1.svg) 0 0/256px 256px,linear-gradient(90deg,#ebdfd2,#eee4d7 19%,#f0e7db 31%,#f3eadf 44%,#f5ede3 56%,#f7efe6 69%,#f8f1e8 81%);pointer-events:none}}
@media(max-width:800px) and (min-height:501px) and (max-height:600px){.home-page .approach-grid.is-journey-ready::before{height:24px;margin-top:-8px}}
/* Print re-lays the scene at page width, so the cards go back to percentages there; the steps print as a plain list. */
@media print{.journey-item{transform:none!important}[data-journey-stage="2"] .journey-item-1{top:12%}[data-journey-stage="2"] .journey-item-2{top:35%}[data-journey-stage="2"] .journey-item-3{top:58%}[data-journey-stage="2"] .journey-item-4{top:81%}[data-journey-stage="3"] .journey-item-1{top:max(17%,var(--lane-top) + 4px)}[data-journey-stage="3"] .journey-item-2{top:max(60%,(100% + var(--lane-top) + 4px)/2)}[data-journey-stage="3"] .journey-item-3{left:calc((100% + 10px)/3);top:34%}[data-journey-stage="3"] .journey-item-4{left:calc((100% + 10px)/3 * 2);top:51%}
  .home-page #approach .steps>article,.home-page #approach .steps>article:not(:last-of-type){min-height:0;break-inside:avoid}
  .home-page #approach .steps{--handoff-gap:14px;--note-space:16px}
  .home-page #approach .steps>article:not(:last-of-type)::after{display:none}
  .home-page .approach-grid.is-journey-ready::before{display:none}
  .home-page .approach-grid .journey-visual{position:relative;top:auto}
  .home-page #approach .step-select-label{display:none}}
@media(prefers-reduced-motion:reduce){.journey-visual *,.home-page #approach .steps>article>*,.home-page #approach .step-number *,.home-page #approach .step-number::before,.home-page #approach .step-number::after,.home-page #approach .step-card::before{transition:none!important}}
:is(.site-reduced-motion,.motion-off) .journey-visual *,:is(.site-reduced-motion,.motion-off) .home-page #approach .steps>article>*,:is(.site-reduced-motion,.motion-off) .home-page #approach .step-number *,:is(.site-reduced-motion,.motion-off) .home-page #approach .step-number::before,:is(.site-reduced-motion,.motion-off) .home-page #approach .step-number::after,:is(.site-reduced-motion,.motion-off) .home-page #approach .step-card::before{transition:none!important}

/* Short landscape screens keep the copy beside a compact visual. */
@media(max-height:500px){
  .home-page .approach-grid .journey-visual{padding:12px;top:8px}
  .journey-top,.journey-caption{display:none}
  .journey-scene{--lane-top:23px;height:110px;margin-block:12px}
  .journey-select{padding-top:7px}
  .journey-select button{min-height:44px;gap:3px}
  .journey-select button>span{display:none}
  .journey-item{padding:3px 8px;gap:8px}
  .journey-visual[data-journey-stage="2"] .journey-item{padding-block:0}
  .journey-item strong{font-size:11px}
  .journey-rank{width:16px;height:16px}
  .journey-priority-labels{font-size:9px;gap:15px}
  .journey-visual[data-journey-stage="3"] .journey-item{padding:6px}
  .journey-roadmap-labels{font-size:10px}
  .journey-roadmap-labels span{padding-bottom:5px}
}
@media(min-width:501px) and (max-width:800px) and (max-height:500px){
  .home-page .approach-grid.is-journey-ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:5%;align-items:start}
  .home-page .approach-grid.is-journey-ready .journey-visual{order:0;align-self:start}
  .home-page #approach .steps>article:not(:last-of-type){min-height:clamp(240px,70svh,340px)}
}
/* Very short stacked layouts (400% zoom, landscape phones): unpin the card so it can never cover the steps. */
@media(max-width:500px) and (max-height:500px){.home-page .approach-grid .journey-visual,.home-page .approach-grid.is-journey-ready .journey-visual{position:relative;top:auto}}