/* Decision Modelling worked example: scoped decision-comparison studio. */
.decision-model-page{
  --dm-ink:#17324a;
  --dm-night:#082f49;
  --dm-navy:#003366;
  --dm-teal:#00877e;
  --dm-aqua:#80d6cb;
  --dm-coral:#e85d3f;
  --dm-cream:#f7f3ea;
  --dm-mist:#eef6f5;
  --dm-line:#b9d1d2;
  overflow-wrap:anywhere;
  color:var(--dm-ink);
}
.decision-model-page main{overflow:hidden}
.decision-model-page h1,
.decision-model-page h2,
.decision-model-page h3{color:var(--dm-ink);font-family:var(--serif);line-height:1.04}
.dm-skip{
  position:fixed;
  z-index:30;
  top:.5rem;
  left:.5rem;
  transform:translateY(-180%);
  padding:.75rem 1rem;
  background:var(--dm-night);
  color:#fff;
  font-weight:800;
}
.dm-skip:focus{transform:none}
.dm-header{position:relative;z-index:10;background:#fff}
.dm-header nav a,.dm-header .dfd-brand{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem}
.dm-hero{
  position:relative;
  padding:clamp(2.75rem,5vw,4.75rem) 0 1.1rem;
  background:linear-gradient(122deg,#fff 0 59%,var(--dm-cream) 59%);
}
.dm-hero::before,
.dm-hero::after{
  position:absolute;
  border-radius:50%;
  content:"";
  pointer-events:none;
}
.dm-hero::before{
  right:-8rem;
  top:-11rem;
  width:25rem;
  height:25rem;
  border:1px solid rgba(0,135,126,.25);
}
.dm-hero::after{
  right:22%;
  bottom:-5rem;
  width:11rem;
  height:11rem;
  background:rgba(128,214,203,.14);
}
.dm-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(30rem,.95fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.dm-hero-copy{max-width:42rem}
.dm-hero .dfd-eyebrow{color:var(--dm-teal)}
.dm-hero h1{
  max-width:12ch;
  margin:0;
  color:var(--dm-ink);
  font-size:clamp(2.6rem,3.25vw,2.9rem);
  letter-spacing:-.035em;
}
.dm-method-name{
  margin:1rem 0 0;
  color:var(--dm-teal);
  font-weight:800;
  letter-spacing:.025em;
}
.dm-hero .dfd-lead{
  max-width:38rem;
  margin:1rem 0;
  color:var(--dm-ink);
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.5;
}
.dm-boundary-line{
  max-width:40rem;
  margin:0;
  padding-left:1rem;
  border-left:.25rem solid var(--dm-coral);
}
.dm-map{
  position:relative;
  margin:0;
  padding:clamp(1.25rem,2vw,1.75rem);
  border:1px solid rgba(0,51,102,.18);
  background:rgba(255,255,255,.92);
  box-shadow:0 1.25rem 3.5rem rgba(8,47,73,.09);
}
.dm-map figcaption{
  max-width:28rem;
  margin:auto;
  color:var(--dm-ink);
  font:700 clamp(1.2rem,2vw,1.55rem)/1.2 var(--serif);
  text-align:center;
}
.dm-map figcaption span,
.dm-map-status,
.dm-route-label,
.dm-fact-label{
  display:block;
  color:var(--dm-teal);
  font:800 .72rem/1.3 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dm-map figcaption span{margin-bottom:.35rem}
.dm-map-paths{
  display:block;
  width:100%;
  height:4.5rem;
  margin:.2rem 0 -.5rem;
  overflow:visible;
  fill:none;
  stroke:var(--dm-teal);
  stroke-width:2;
}
.dm-map-paths circle{fill:var(--dm-coral);stroke:none}
.dm-map-options{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.dm-map-options li{
  min-height:5.5rem;
  padding:.75rem;
  border-top:.25rem solid var(--dm-aqua);
  background:var(--dm-mist);
}
.dm-map-options span{
  display:block;
  margin-bottom:.25rem;
  color:var(--dm-teal);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
}
.dm-map-options strong{font-size:.88rem;line-height:1.25}
.dm-map-status{margin:1rem 0 0;text-align:center}
.dm-continue{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  margin-top:.8rem;
  color:var(--dm-ink);
  font-weight:800;
  text-decoration:none;
}
.dm-continue span{margin-left:.55rem;color:var(--dm-coral);font-size:1.4rem}

.dm-section{padding:clamp(4.5rem,8vw,7.5rem) 0}
.dm-section h2{
  max-width:16ch;
  margin:.2rem 0 0;
  font-size:clamp(2rem,3vw,2.75rem);
  letter-spacing:-.025em;
}
.dm-section-heading{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(18rem,.65fr);
  gap:clamp(2rem,7vw,7rem);
  align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.dm-section-heading>p{max-width:34rem;margin:0 0 .3rem}

.dm-situation{background:#fff}
.dm-people{
  display:grid;
  grid-template-columns:minmax(10rem,.35fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,4rem);
  align-items:start;
  margin:0 0 1rem;
  padding:clamp(1.5rem,3vw,2.5rem);
  border-left:.4rem solid var(--dm-coral);
  background:var(--dm-cream);
}
.dm-people p{margin:0}
.dm-people p:last-child{max-width:54rem;font:700 clamp(1.15rem,2vw,1.45rem)/1.45 var(--serif)}
.dm-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  border-block:1px solid var(--dm-line);
}
.dm-facts div{padding:1.5rem clamp(1rem,3vw,2rem)}
.dm-facts div+div{border-left:1px solid var(--dm-line)}
.dm-facts dt{color:var(--dm-teal);font-weight:800}
.dm-facts dd{margin:.6rem 0 0}

.dm-options-section{background:var(--dm-night);color:#fff}
.dm-options-section h2,
.dm-options-section h3{color:#fff}
.dm-options-section .dfd-eyebrow{color:var(--dm-aqua)}
.dm-options-section .dm-section-heading>p{color:#d9e6eb}
.dm-option-lanes{margin:0;padding:0;list-style:none}
.dm-option-lanes li{
  display:grid;
  grid-template-columns:3.5rem 6rem minmax(15rem,1.2fr) minmax(14rem,.8fr);
  gap:clamp(1rem,3vw,2.5rem);
  align-items:center;
  min-height:9rem;
  padding:1.3rem 0;
  border-top:1px solid #476f81;
}
.dm-option-lanes li:last-child{border-bottom:1px solid #476f81}
.dm-option-number{color:var(--dm-aqua);font:700 1.35rem var(--serif)}
.dm-option-signal{
  width:6rem;
  height:3.5rem;
  fill:none;
  stroke:var(--dm-aqua);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.5;
}
.dm-option-signal circle:last-child{fill:var(--dm-coral);stroke:var(--dm-coral)}
.dm-option-lanes h3{margin:0;font-size:clamp(1.3rem,1.8vw,1.65rem)}
.dm-option-lanes p{margin:.5rem 0 0;color:#d9e6eb}
.dm-option-move{padding-left:1.2rem;border-left:1px solid #668b9a}
.dm-option-move span{display:block;color:var(--dm-aqua);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dm-evidence{background:var(--dm-mist)}
.dm-gate-labels,
.dm-gate{
  display:grid;
  grid-template-columns:1.15fr repeat(3,1fr);
}
.dm-gate-labels{
  gap:0;
  padding:0 .5rem .75rem;
  color:var(--dm-teal);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.dm-gate{
  position:relative;
  border-top:1px solid var(--dm-line);
  background:#fff;
}
.dm-gate:last-child{border-bottom:1px solid var(--dm-line)}
.dm-gate>*{margin:0;padding:clamp(1.25rem,2.5vw,2rem)}
.dm-gate>*+*{border-left:1px solid var(--dm-line)}
.dm-gate h3{font-size:clamp(1.2rem,1.6vw,1.5rem)}
.dm-gate h3 span,
.dm-gate h4{
  display:block;
  margin:0 0 .55rem;
  color:var(--dm-teal);
  font:800 .7rem/1.3 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dm-gate p{margin:0}
.dm-gate h4{display:none}
.dm-stop{
  display:grid;
  grid-template-columns:minmax(10rem,.35fr) minmax(0,1fr);
  gap:2rem;
  margin:1.5rem 0 0;
  padding:1.4rem;
  border:2px solid var(--dm-ink);
  background:var(--dm-cream);
}
.dm-stop span{color:var(--dm-coral);font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.dm-record-section{background:#fff}
.dm-record-layout{
  display:grid;
  grid-template-columns:minmax(18rem,.7fr) minmax(30rem,1.3fr);
  gap:clamp(2.5rem,8vw,8rem);
  align-items:start;
}
.dm-record-intro{position:sticky;top:2rem}
.dm-record-intro h2{max-width:13ch}
.dm-record-intro>p:last-child{max-width:35rem;margin-top:2rem}
.dm-record-illustration{display:block;width:min(100%,18rem);margin:2rem auto 0}
.dm-record-illustration img{display:block;width:100%;height:auto}
.dm-record{
  position:relative;
  padding:clamp(1.4rem,4vw,3rem);
  border:1px solid var(--dm-line);
  border-top:.45rem solid var(--dm-coral);
  background:var(--dm-cream);
  box-shadow:.8rem .8rem 0 var(--dm-mist);
}
.dm-record-status{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--dm-line);
  color:var(--dm-teal);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dm-record-status span{color:var(--dm-coral)}
.dm-record dl{margin:0}
.dm-record dl div{
  display:grid;
  grid-template-columns:minmax(8rem,.34fr) minmax(0,1fr);
  gap:1.5rem;
  padding:1rem 0;
  border-top:1px solid var(--dm-line);
}
.dm-record dl div:first-child{border-top:0}
.dm-record dt{color:var(--dm-teal);font-weight:800}
.dm-record dd{margin:0}

.dm-next{background:var(--dm-cream)}
.dm-next-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,.55fr);
  gap:clamp(2rem,7vw,7rem);
  align-items:end;
}
.dm-next-heading>p{margin:0 0 .3rem}
.dm-prompts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(2.5rem,5vw,4rem) 0;
  padding:0;
  border-top:1px solid var(--dm-line);
  list-style:none;
}
.dm-prompts li{
  display:grid;
  align-content:start;
  min-height:10rem;
  padding:1.2rem;
  border-right:1px solid var(--dm-line);
  border-bottom:1px solid var(--dm-line);
}
.dm-prompts li:nth-child(4n+1){border-left:1px solid var(--dm-line)}
.dm-prompts span{color:var(--dm-coral);font-size:.7rem;font-weight:800;letter-spacing:.08em}
.dm-prompts strong{margin:.4rem 0;color:var(--dm-ink);font:700 1.15rem/1.2 var(--serif)}
.dm-prompts small{font-size:.88rem;line-height:1.45}
.dm-route-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(20rem,.55fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
  padding-top:2rem;
  border-top:1px solid var(--dm-line);
}
.dm-route-label{margin:0 0 1rem}
.dm-independent-routes{display:flex;flex-wrap:wrap;gap:.75rem}
.dm-independent-routes .dm-route-label{flex-basis:100%}
.dm-independent-routes .dfd-button{min-height:3.25rem}
.dm-support{padding-left:1.5rem;border-left:.3rem solid var(--dm-coral)}
.dm-support .dfd-actions{display:grid;gap:.2rem;margin:.25rem 0 .75rem}
.dm-support .dfd-actions a{display:flex;align-items:center;min-height:2.75rem;font-weight:800}
.dm-support>p:last-child{margin-bottom:0;font-size:.88rem}

.dm-footer{padding:clamp(2.5rem,5vw,4rem) 0;background:var(--dm-night)}
.dm-footer-layout{
  display:grid;
  grid-template-columns:minmax(12rem,.7fr) minmax(14rem,.8fr) repeat(2,minmax(12rem,1fr));
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
.dm-footer-identity{display:grid;gap:.2rem}
.dm-footer-identity a{display:flex;align-items:center;min-height:2.75rem;font-weight:800;text-decoration:none}
.dm-footer-identity span{color:#c9d9e1;font-size:.88rem}
.dm-footer-prompt{max-width:15ch;margin:0;color:#fff;font:700 clamp(1.35rem,2.2vw,1.75rem)/1.15 var(--serif)}
.dm-footer h2{margin:0 0 .65rem;color:var(--dm-aqua);font:800 .75rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.dm-footer ul{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.dm-footer li a{display:flex;align-items:center;min-height:2.75rem}

@media(max-width:64rem){
  .dm-hero-grid{grid-template-columns:1fr;gap:2.25rem}
  .dm-hero-copy{max-width:none}
  .dm-hero h1{max-width:15ch;font-size:clamp(2.4rem,4vw,2.6rem)}
  .dm-map{max-width:46rem}
  .dm-section-heading,.dm-next-heading{grid-template-columns:1fr;gap:1.5rem}
  .dm-facts{grid-template-columns:1fr}
  .dm-facts div+div{border-top:1px solid var(--dm-line);border-left:0}
  .dm-option-lanes li{grid-template-columns:3rem 5rem minmax(0,1fr)}
  .dm-option-move{grid-column:3;padding-left:0;border-left:0}
  .dm-option-signal{width:5rem}
  .dm-gate-labels{display:none}
  .dm-gate{grid-template-columns:1fr 1fr}
  .dm-gate h3{grid-column:1/-1}
  .dm-gate>*+*{border-top:1px solid var(--dm-line);border-left:0}
  .dm-gate div+div{border-left:1px solid var(--dm-line)}
  .dm-gate div:last-child{grid-column:1/-1;border-left:0}
  .dm-gate h4{display:block}
  .dm-record-layout{grid-template-columns:1fr}
  .dm-record-intro{position:static}
  .dm-prompts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-prompts li:nth-child(4n+1){border-left:0}
  .dm-prompts li:nth-child(2n+1){border-left:1px solid var(--dm-line)}
  .dm-footer-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:42rem){
  .dm-header .dfd-wrap{padding:1rem 0}
  .dm-header nav{gap:.15rem .85rem}
  .dm-header nav a{font-size:.88rem}
  .dm-hero{padding-top:3rem;background:linear-gradient(165deg,#fff 0 48%,var(--dm-cream) 48%)}
  .dm-hero h1{font-size:clamp(2.15rem,9vw,2.25rem)}
  .dm-map{padding:1rem}
  .dm-map-paths{display:none}
  .dm-map-options{grid-template-columns:1fr;margin-top:1rem}
  .dm-map-options li{display:grid;grid-template-columns:2rem 1fr;align-items:center;min-height:3.2rem}
  .dm-map-options span{margin:0}
  .dm-section h2{font-size:clamp(1.8rem,7.5vw,2.15rem)}
  .dm-people{grid-template-columns:1fr;gap:.75rem}
  .dm-option-lanes li{grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem 1rem;padding:1.5rem 0}
  .dm-option-signal{grid-column:1;width:2.5rem;height:2.5rem}
  .dm-option-lanes li>div{grid-column:2}
  .dm-option-move{grid-column:2}
  .dm-gate{grid-template-columns:1fr}
  .dm-gate h3,.dm-gate div:last-child{grid-column:1}
  .dm-gate div+div{border-left:0}
  .dm-stop{grid-template-columns:1fr;gap:.5rem}
  .dm-record{box-shadow:.4rem .4rem 0 var(--dm-mist)}
  .dm-record-status,.dm-record dl div{display:block}
  .dm-record-status span{display:block;margin-bottom:.3rem}
  .dm-record dd{margin-top:.4rem}
  .dm-prompts{grid-template-columns:1fr}
  .dm-prompts li,.dm-prompts li:nth-child(4n+1){border-left:1px solid var(--dm-line)}
  .dm-route-layout{grid-template-columns:1fr}
  .dm-independent-routes .dfd-button{width:100%;justify-content:center;text-align:center}
  .dm-support{padding-top:1.25rem;padding-left:0;border-top:.3rem solid var(--dm-coral);border-left:0}
  .dm-footer-layout{grid-template-columns:1fr}
  .dm-footer-prompt{max-width:22ch}
}
@media(max-width:22rem){
  .dm-record-illustration{width:14rem}
}
@media(prefers-reduced-motion:reduce){
  .decision-model-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media(forced-colors:active){
  .dm-map,.dm-map-options li,.dm-people,.dm-record,.dm-prompts li,.dm-gate,.dm-stop{border:2px solid CanvasText}
  .dm-map-paths,.dm-option-signal{stroke:CanvasText}
  .dm-map-paths circle,.dm-option-signal circle:last-child{fill:Highlight;stroke:Highlight}
  .dm-boundary-line,.dm-support{border-color:Highlight}
}
@media print{
  .decision-model-page{color:#000}
  .dm-header,.dm-footer,.dm-continue,.dm-map-paths,.dm-option-signal,.dm-record-illustration{display:none}
  .dm-hero,.dm-section,.dm-options-section,.dm-evidence,.dm-next{padding:1rem 0;background:#fff!important;color:#000}
  .dm-hero-grid,.dm-section-heading,.dm-next-heading,.dm-record-layout,.dm-route-layout{display:block}
  .dm-hero h1,.dm-section h2,.dm-options-section h2,.dm-options-section h3{color:#000}
  .dm-map,.dm-record{box-shadow:none}
  .dm-map-options,.dm-facts,.dm-prompts{grid-template-columns:repeat(2,1fr)}
  .dm-option-lanes li,.dm-gate{break-inside:avoid}
  .dm-option-lanes p,.dm-options-section .dm-section-heading>p{color:#000}
  .dm-record-intro{position:static}
  .dm-independent-routes,.dm-support{display:none}
}