:root{--paper:#f9f9f9;--ink:#222;--muted:#696969;--line:#d8d8d8;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit}
.site-header{position:sticky;top:-139px;z-index:20;background:var(--paper);text-align:center;padding:45px 24px 0}
.site-logo{display:inline-block;color:#161616;text-decoration:none;font:500 38px/1.2 Cinzel,Georgia,serif;letter-spacing:.16em}
.site-header p{margin:5px 0 30px;color:#898989;font-size:11px;letter-spacing:.025em}
.site-header nav{display:flex;align-items:center;justify-content:center;gap:36px;min-height:51px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.site-header nav a{color:#4b4b4b;text-decoration:none;font-size:11px;letter-spacing:.11em;transition:color .2s}
.site-header nav a:hover,.site-header nav a.current{color:#111}
.page{max-width:1280px;margin:0 auto;padding:64px 36px 80px}
h1{margin:0 0 54px;text-align:center;font:400 clamp(42px,5vw,68px)/1.13 Cinzel,Georgia,serif;letter-spacing:.01em}
.story{position:relative;max-width:1150px;margin:0 auto}
.sticky-stage{position:sticky;top:68px;z-index:3}
/* A quiet hierarchy: phase titles above compact step controls. */
.phases{display:grid;grid-template-columns:1fr 2fr 3fr 2fr;gap:0;padding:20px 0 30px;background:var(--paper)}
.phase{position:relative;min-width:0;text-align:center;--accent:#647b67}
.phase+.phase:before{content:"";position:absolute;left:0;top:5px;width:1px;height:26px;background:#dedee1}
.phase h2{margin:0 0 16px;font:400 clamp(22px,2.3vw,30px)/1.2 Cinzel,Georgia,serif;color:#858585;transition:color .3s}
.phase.is-current h2{color:#344c3a}
.phase-steps{display:flex;gap:0;min-height:60px}
.step{position:relative;flex:1;min-width:0;border:0;border-radius:0;padding:10px 3px 29px;background:transparent;color:#777;font-size:15px;line-height:20px;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s}
.step:before{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:#d8ded9;pointer-events:none}
.step:after{content:"";position:absolute;width:6px;height:6px;left:calc(50% - 3px);bottom:5.5px;border-radius:50%;background:#c8ceca;box-shadow:0 0 0 4px var(--paper);transition:background .25s,box-shadow .25s,scale .25s}
.phase:first-child .step:first-child:before{left:50%}
.phase:last-child .step:last-child:before{right:50%}
.step:hover{color:#344c3a;background:linear-gradient(transparent,#eaf0e980)}
.step.is-active{color:#344c3a;font-weight:500;background:radial-gradient(ellipse at 50% 100%,#dfe9df90,transparent 75%)}
.step.is-active:after{background:var(--accent);scale:1.35;box-shadow:0 0 0 4px var(--paper),0 0 0 7px #647b671a}
.step.is-past:before{background:#9aaa9d}.step.is-past:after{background:#91a393}
.step:focus-visible,.nav-arrow:focus-visible{outline:2px solid #74747b;outline-offset:4px}
.detail-shell{position:relative;margin:0 22px}
.detail{border:0;border-radius:24px;background:#fff;padding:32px 36px 30px;box-shadow:0 12px 48px #1d1d2906;transition:opacity .2s}
.nav-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#e9e9ed;color:#515157;cursor:pointer;transition:background .2s,color .2s,opacity .2s,scale .2s;touch-action:manipulation}
.nav-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.detail-shell>.nav-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%)}
.nav-back{left:-22px}.nav-next{right:-22px}
.nav-arrow:hover:not(:disabled){background:#dcdce2;color:#16161a;scale:1.06}
.nav-arrow:active:not(:disabled){scale:.96}
.nav-arrow:disabled{opacity:.3;cursor:default}
.detail.is-changing{opacity:.5}
.detail-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
.detail-copy{padding:10px 4px 0 5px}
.detail-copy h2{margin:0 0 14px;font:400 clamp(32px,3.4vw,46px)/1.15 Cinzel,Georgia,serif}
.detail-lead{max-width:590px;margin:0 0 15px;font-size:18px;line-height:1.46;color:#292929}
.detail-body{max-width:590px;margin:0;color:#626262;font-size:14px;line-height:1.65}
.detail-body p{margin:0 0 14px}.detail-body p:last-child{margin-bottom:0}
.setup-rituals{display:none}
.is-setup .detail-top{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:58px}
.is-setup .detail-image,.is-setup>.detail-bottom{display:none}
.is-setup .setup-rituals{display:grid;gap:24px;padding:18px 0 0}
.ritual{background:#f7f7f8;border-radius:16px;padding:22px 24px}
.ritual h3{margin:0 0 12px;color:#77777d;font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.ritual p{margin:0;color:#626262;font-size:14px;line-height:1.65}
.ritual .ritual-title{margin-bottom:8px;color:#292929;font-size:18px}
.detail-image{border-radius:12px;height:238px;margin:0;overflow:hidden;background:#e8e3dd}
.detail-image img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.75);transition:transform .9s,opacity .25s}
.detail-image img.is-changing{opacity:.5;transform:scale(1.035)}
.detail-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px;padding-top:20px;border-top:1px solid #e3e3e3}
.detail-group+.detail-group{padding-left:35px;border-left:1px solid #e7e7e7}
.detail-group h3{margin:0 0 18px;font:400 clamp(26px,2.5vw,34px)/1.2 Cinzel,Georgia,serif;letter-spacing:normal;color:var(--ink)}
.tool-list{display:grid;gap:8px}
.tool{display:grid;grid-template-columns:minmax(130px,.43fr) 1fr;gap:12px;align-items:baseline;font-size:12px;line-height:1.4}
.tool strong{font-weight:500;color:#303030}
.tool span{color:#717171}
.scroll-runway{height:525vh;pointer-events:none}
.mobile-chapters{display:none}
.site-footer{display:flex;justify-content:space-between;max-width:1228px;margin:0 auto;padding:23px 36px 35px;border-top:1px solid #dedede;color:#8a8a8a;font-size:11px}
@media(max-height:760px) and (min-width:761px){
 .sticky-stage{top:57px}.phases{padding:12px 0 24px}.phase h2{margin-bottom:12px;font-size:27px}
 .detail{padding:22px 30px}.detail-top{gap:30px}.detail-image{height:190px}.detail-copy h2{font-size:34px}
 .detail-group h3{font-size:28px;margin-bottom:16px}
 .detail-lead{font-size:16px}.detail-body{font-size:13px}
 .is-setup .detail-top{gap:36px}.is-setup .setup-rituals{gap:16px;padding-top:10px}.ritual{padding:18px 20px}.ritual p{font-size:13px}.ritual .ritual-title{font-size:16px}.detail-bottom{margin-top:17px;padding-top:15px}.tool-list{gap:5px}
}
@media(min-width:761px) and (max-width:1000px){
 .phases{gap:16px}.step{padding:11px 8px;font-size:12px}.phase h2{font-size:21px}.phase+.phase:before{left:-8px;height:20px}.phase-steps{gap:6px}.step+.step:before{left:-6px;width:6px}
 .is-setup .detail-top{gap:25px}.is-setup .detail-body{font-size:12px}.ritual{padding:15px}
 .detail-top{gap:25px}.detail{padding:25px}.tool{grid-template-columns:1fr;gap:1px}.tool-list{gap:7px}
}
@media(max-width:760px){
 .site-header{top:-100px;padding:30px 15px 0}.site-logo{font-size:29px}.site-header p{margin-bottom:20px}
 .site-header nav{gap:20px;overflow-x:auto;justify-content:flex-start;min-height:48px;padding:0 18px;white-space:nowrap}
 .page{padding:44px 18px 70px}h1{text-align:left;margin-bottom:30px;font-size:43px}.sticky-stage{display:contents}
 .phases{position:sticky;top:49px;z-index:10;display:flex;gap:25px;overflow-x:auto;scroll-snap-type:x proximity;padding:20px 4px 22px;background:var(--paper);scrollbar-width:none}
 .phases::-webkit-scrollbar{display:none}.phase{flex:0 0 auto;scroll-snap-align:center}.phase h2{font-size:23px;margin-bottom:12px}
 .phase-steps{gap:8px;min-height:44px}.step+.step:before{left:-8px;width:8px}.step{font-size:14px;padding:10px 13px}
 .detail-shell,.scroll-runway{display:none}.mobile-chapters{display:block}
 .mobile-chapter{padding:26px 22px 30px;margin:14px 0 24px;background:white;border-radius:22px;scroll-margin-top:195px}
 .mobile-chapter h2{margin:0;font:400 30px/1.2 Cinzel,Georgia,serif}
 .mobile-chapter .detail-group h3{font-size:26px}
 .chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
 .chapter-controls{display:flex;gap:7px;flex-shrink:0}.chapter-controls .nav-arrow{width:36px;height:36px}
 .mobile-chapter.is-setup .setup-rituals{margin-top:24px;padding:0;gap:16px}.ritual{padding:22px}.ritual p{font-size:14px}
 .mobile-chapter .detail-lead{font-size:17px}.mobile-chapter .detail-body{font-size:14px}
 .mobile-chapter figure{height:200px;margin:24px 0 0;overflow:hidden;border-radius:10px}.mobile-chapter figure img{width:100%;height:100%;object-fit:cover}
 .mobile-chapter .detail-bottom{display:grid;grid-template-columns:1fr;gap:25px;padding-top:22px;margin-top:23px}
 .mobile-chapter .detail-group+.detail-group{padding:22px 0 0;border-left:0;border-top:1px solid #e5e5e5}
 .tool{grid-template-columns:minmax(100px,.43fr) 1fr;font-size:12px}.site-footer{padding:20px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Continuous, grouped timeline and unframed illustration scenes. */
.detail-image{height:260px;border-radius:0;background:white;overflow:visible}
.detail-image img{object-fit:contain;filter:none}
@media(min-width:761px){
 .detail{max-height:calc(100dvh - 235px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ccd2cc transparent}
 .detail-top{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media(max-height:760px) and (min-width:761px){.detail{max-height:calc(100dvh - 210px)}}
.is-setup .detail-top{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:165px auto;gap:14px 42px}
.is-setup .detail-copy{grid-column:1;grid-row:1 / 3}
.is-setup .detail-image{display:block;grid-column:2;grid-row:1;height:165px}
.is-setup .setup-rituals{grid-column:2;grid-row:2;gap:16px;padding:0}
.is-setup .ritual{background:transparent;border-radius:0;padding:0 8px}
.is-setup .ritual h3{margin-bottom:5px;color:#647b67}
.is-setup .ritual .ritual-title{display:none}
@media(max-height:760px) and (min-width:761px){.detail-image{height:220px}.is-setup .detail-top{grid-template-rows:145px auto;gap:10px 36px}.is-setup .detail-image{height:145px}.is-setup .setup-rituals{gap:12px}}
@media(min-width:761px) and (max-width:1000px){.phases{gap:0}.phase h2{font-size:21px}.phase+.phase:before{left:0}.phase-steps{gap:0}.step{padding:10px 2px 29px;font-size:12px}.step+.step:before{left:0;width:auto}.is-setup .detail-top{gap:14px 25px}}
@media(max-width:760px){
 .phases{gap:0;padding:18px 0 15px}.phase{flex:none}.phase[data-phase="setup"]{width:110px}.phase[data-phase="understand"],.phase[data-phase="deliver"]{width:220px}.phase[data-phase="create"]{width:330px}
 .phase+.phase:before{left:0;height:23px}.phase h2{font-size:23px;margin-bottom:10px}.phase-steps{gap:0;min-height:60px}.step{padding:10px 3px 29px;font-size:14px}.step+.step:before{left:0;width:auto}
 .mobile-chapter figure{border-radius:0;height:220px}.mobile-chapter figure img{object-fit:contain}
 .mobile-chapter.is-setup figure{margin:0 0 22px}.mobile-chapter.is-setup .setup-rituals{gap:20px}
}

/* Equally spaced phases; the small arrows indicate reading direction. */
.phases{grid-template-columns:repeat(4,minmax(0,1fr))}
.phase+.phase:before{content:"";left:-10px;top:15px;width:20px;height:1px;background:#bfc6bf}
.phase+.phase:after{content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;border-top:1px solid #bfc6bf;border-right:1px solid #bfc6bf;transform:rotate(45deg)}
@media(min-width:761px) and (max-width:1000px){.phase h2{font-size:20px}.phase+.phase:before{top:12px}.phase+.phase:after{top:9px}.step{font-size:11px}}
@media(max-width:760px){
 .phase[data-phase="setup"],.phase[data-phase="understand"],.phase[data-phase="create"],.phase[data-phase="deliver"]{width:290px}
 .phase+.phase:before{top:13px;height:1px}.phase+.phase:after{top:10px}
}

/* Two reading levels: a clear overview, then the thinking behind each choice. */
.perspective{margin:24px 0 18px;color:inherit}
.perspective-title{margin:0 0 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0;text-transform:none;color:#405d47}
.tool-card summary{list-style:none;cursor:pointer;position:relative}
.tool-card summary::-webkit-details-marker{display:none}
.tool-card summary:after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.tool-card[open]>summary:after{transform:rotate(225deg)}
.tool-card summary:focus-visible,.tool-explanation a:focus-visible,.selected-work-link:focus-visible{outline:2px solid #647b67;outline-offset:3px;border-radius:4px}
.context-flow{font-size:13px;color:#405d47;font-weight:500}
.process-note{font-size:12px;color:#677367}
.step-outcome{display:grid;gap:5px;margin:17px 0 0!important;color:#454d46;font-size:13px;line-height:1.5}
.step-outcome>span:first-child{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#68746b}
.selected-work-link{display:inline-block;margin-top:18px;color:#405d47;text-underline-offset:4px}
.tool-list{gap:3px}
.tool-card{min-width:0;border-radius:12px;transition:background .2s}
.tool-card:hover,.tool-card[open]{background:#f6f8f5}
.tool-card summary{display:flex;align-items:center;gap:12px;padding:11px 10px;min-height:65px;border-radius:12px}
.tool-card summary:after{margin-left:auto;margin-right:3px;color:#718174}
.tool-mark{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:42px;background:transparent}
.tool-mark img{display:block;width:36px;height:36px;object-fit:contain}
.tool-mark-wordmark img{width:48px;height:32px}
.tool-mark-group{display:grid;grid-template-columns:repeat(2,22px);gap:3px;align-content:center;justify-content:center;height:48px}
.tool-mark-group img{width:22px;height:22px}
.tool-mark-group img:last-child:nth-child(3){grid-column:1 / -1;justify-self:center}
.tool-labels{display:grid;gap:4px;min-width:0}
.tool-labels strong{font-size:13px;line-height:1.35;font-weight:500;color:#2b332d;overflow-wrap:anywhere}
.tool-labels>span{font-size:12px;line-height:1.4;color:#626d65}
.tool-explanation{padding:0 15px 15px 70px;font-size:13px;line-height:1.65;color:#5b655e}
.tool-explanation p{margin:0}
.tool-explanation a{display:inline-block;margin-top:10px;color:#405d47;font-size:12px;text-underline-offset:3px}
@media(max-width:760px){.tool-card summary{padding:12px 6px;gap:10px}.tool-explanation{padding:0 10px 16px 64px}.tool-labels strong{font-size:14px}.tool-explanation{font-size:14px}.step-outcome{font-size:14px}}