/* Consultation page only (loaded by /consultation). Everything is prefixed .cs- so other pages are unaffected. */
.cs-timeline,.cs-glance-band{--cs-sage:#8A9A7B;--cs-sage-line:rgba(138,154,123,.55);--cs-rule:rgba(20,16,13,.14)}

/* hero: landscape 3:2 photo instead of the arch */
.cs-hero__img{background:var(--walnut)}
.phero__img.cs-hero__img{aspect-ratio:3/2;border-radius:6px}
@media (min-width:821px){
  .phero__grid.cs-hero__grid{grid-template-columns:1fr 1fr;align-items:center}
}
@media (max-width:820px){
  /* sits below the introductory text on phones */
  .phero__img.cs-hero__img{order:0;margin-top:8px}
}

/* first visit at a glance: three compact cards + a short supporting list */
.cs-block{padding-bottom:clamp(36px,5vw,60px)}
.cs-block>h2{margin:0 0 clamp(20px,2.6vw,30px)}
.cs-glance{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.cs-glance li{background:var(--paper-2);border:1px solid rgba(20,16,13,.09);border-radius:6px;padding:clamp(20px,2.4vw,30px)}
.cs-glance__value{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em;color:#221812}
.cs-glance__label{display:block;margin-top:10px;color:var(--muted);font-size:16px;line-height:1.55}
.cs-meta{margin:clamp(24px,3vw,36px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
.cs-meta>div{padding:16px 0;border-top:1px solid var(--cs-rule)}
.cs-meta dt{font:400 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.cs-meta dd{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
@media (max-width:1000px){
  .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cs-glance{grid-template-columns:1fr}
  .cs-meta{grid-template-columns:1fr}
}

/* timeline band */
.cs-timeline{background:var(--hanji);border-top:1px solid rgba(20,16,13,.08);border-bottom:1px solid rgba(20,16,13,.08)}
.cs-timeline__head{max-width:62ch;margin:0 auto clamp(36px,5vw,64px);text-align:center}
.cs-timeline__head h2{margin:0}
.cs-steps{list-style:none;margin:0;padding:0}
.cs-step{position:relative}
.cs-step__fig{margin:0;display:flex;align-items:center;justify-content:center}
.cs-step__fig picture{display:block;width:100%;height:100%}
.cs-step__fig img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--cs-scale,1))}
.cs-step__num{position:relative;display:flex;align-items:center;justify-content:center}
.cs-step__num span{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--cs-sage);font:400 15px var(--sans);color:#221812}
.cs-step__h{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(21px,1.9vw,25px);line-height:1.2;letter-spacing:-.01em;color:#221812}
.cs-step__d{margin:10px 0 0;color:var(--muted);font-size:16.5px;line-height:1.6}

/* visual balance: the artwork has different built-in margins, so nudge each to a similar optical size */
.cs-step--goals{--cs-scale:1.12}
.cs-step--records{--cs-scale:.96}
.cs-step--findings{--cs-scale:1.12}
.cs-step--next-step{--cs-scale:1.04}

/* expandable details */
.cs-more{margin-top:14px;border-top:1px solid var(--cs-rule)}
.cs-more summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;list-style:none;cursor:pointer;padding:12px 4px 12px 0;
  font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6B5338;border-radius:3px}
.cs-more summary::-webkit-details-marker{display:none}
.cs-more summary::after{content:"+";font-family:var(--serif);font-size:20px;line-height:1;color:var(--amber);flex:none}
.cs-more[open] summary::after{content:"\2212"}
.cs-more summary:hover{color:#8A5A2B}
.cs-more summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.cs-more__body{padding:2px 0 14px;font-size:16px;line-height:1.7;color:var(--text)}
.cs-more__body p{margin:0 0 .9em}
.cs-more__body p:last-child{margin-bottom:0}

/* wide desktop: five columns in one row, numbered track behind-the-circles line */
@media (min-width:1101px){
  .cs-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start}
  .cs-step__h,.cs-step__d{text-align:center}
  .cs-step__fig{width:150px;height:150px;margin:0 auto}
  .cs-step__num{margin-top:26px;height:38px}
  .cs-step__num::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--cs-sage-line)}
  .cs-step:first-child .cs-step__num::before{left:50%}
  .cs-step:last-child .cs-step__num::before{right:50%}
  .cs-step__body{margin-top:22px;padding:0 clamp(10px,1.2vw,20px);text-align:center}
  /* where subgrid is available, headings, descriptions and "More" rows line up across all five columns */
  @supports (grid-template-rows:subgrid){
    .cs-step{display:grid;grid-row:span 5;grid-template-rows:subgrid}
    .cs-step__body{display:contents}
    .cs-step__h{margin-top:22px;padding:0 clamp(10px,1.2vw,20px)}
    .cs-step__d{padding:0 clamp(10px,1.2vw,20px)}
    .cs-step .cs-more{margin-inline:clamp(10px,1.2vw,20px)}
  }
  .cs-more summary{justify-content:center;gap:10px}
  .cs-more__body{text-align:left;font-size:15.5px}
}

/* tablet and phone: vertical timeline with a thin line through the numbers */
@media (max-width:1100px){
  .cs-steps{max-width:640px;margin:0 auto}
  .cs-step{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-areas:"num fig" "num body";column-gap:clamp(18px,3vw,28px);padding-bottom:clamp(34px,5vw,48px)}
  .cs-step:last-child{padding-bottom:0}
  .cs-step__num{grid-area:num;align-items:flex-start;justify-content:center}
  .cs-step__num::before{content:"";position:absolute;top:19px;bottom:calc(-1 * clamp(34px,5vw,48px));left:50%;width:1px;transform:translateX(-.5px);background:var(--cs-sage-line)}
  .cs-step:last-child .cs-step__num::before{display:none}
  .cs-step__fig{grid-area:fig;justify-content:flex-start;width:clamp(120px,22vw,150px);height:clamp(120px,22vw,150px);margin:0 0 10px -6px}
  .cs-step__body{grid-area:body}
}
@media (prefers-reduced-motion:no-preference){
  .cs-more summary::after{transition:transform .2s ease}
}