/* Project development (owner, 28-29 Oct 2026): how we plan (the design-thinking diamond), the path that draws itself,
   the village and lofts, and the builder's photos at the bottom. Site palette only; orange only inside the drawings. */
.prepared-by{max-width:44rem;margin:-6px 0 28px;color:#526571;font-size:16px;line-height:1.55}
.prepared-by a{white-space:nowrap}

.method-figure{margin:28px 0 0;max-width:760px}
.method-diamond{width:100%;height:auto;overflow:visible}
.method-diamond .dd-line{fill:none;stroke:#4A90A4;stroke-width:2;stroke-linejoin:round}
.method-diamond .dd-join{stroke:#4A90A4;stroke-width:2}
.method-diamond .dd-back{fill:none;stroke:#9FB6C0;stroke-width:1.5;stroke-dasharray:.012 .012}
.method-diamond .dd-label{font:600 15px/1 Arial,Helvetica,sans-serif;fill:#193D4E}
.method-diamond .dd-now{fill:#B85500}
.method-diamond .dd-marker{fill:#B85500}
.method-diamond .dd-pointer{stroke:#B85500;stroke-width:1.2}
.method-diamond .dd-here{font:700 13px/1 Arial,Helvetica,sans-serif;fill:#B85500;letter-spacing:.01em}
.method-diamond .dd-note{font:400 13px/1 Arial,Helvetica,sans-serif;fill:#526571}
.method-figure figcaption{margin-top:14px;max-width:44rem;color:#526571;font-size:16px;line-height:1.55}
/* the drawing draws itself once, when it comes into view (JS adds .is-drawn); without JS or with reduced motion it is complete */
.js-roadmap .method-diamond .dd-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.js-roadmap .method-diamond .dd-second{transition-delay:.5s}
.js-roadmap .method-diamond .dd-marker,.js-roadmap .method-diamond .dd-pointer,.js-roadmap .method-diamond .dd-here,.js-roadmap .method-diamond .dd-back{opacity:0;transition:opacity .5s ease-out 1.5s}
.js-roadmap .method-diamond.is-drawn .dd-line{stroke-dashoffset:0}
.js-roadmap .method-diamond.is-drawn .dd-marker,.js-roadmap .method-diamond.is-drawn .dd-pointer,.js-roadmap .method-diamond.is-drawn .dd-here,.js-roadmap .method-diamond.is-drawn .dd-back{opacity:1}
.js-roadmap .method-diamond.is-drawn .dd-marker{animation:dd-pulse 1.6s ease-out 1.9s 2}
@keyframes dd-pulse{0%{r:7}50%{r:10}100%{r:7}}

/* the path: a vertical line on the left, filled as the reader scrolls */
.path{position:relative;margin-top:30px;padding-left:64px}
.path-line{position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:#D9E3E8;border-radius:2px}
.path-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:#4A90A4;border-radius:2px;transform-origin:top;transform:scaleY(var(--path-fill,1))}
.path-group{margin:0 0 30px}
.path-group-label{margin:0 0 12px;font-weight:700;color:#193D4E;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.path-here{display:inline-flex;align-items:center;gap:8px;color:#A84B00;font-size:14px;font-weight:700}
.path-here::before{content:"";width:10px;height:10px;border-radius:50%;background:#B85500;box-shadow:0 0 0 4px #FDF1E4}
.path-steps{list-style:none;margin:0;padding:0}
.path-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 36px}
.path-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid #D9E3E8}
.path-dot{position:absolute;left:-49px;top:26px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #4A90A4}
.path-tracks .path-dot{display:none}
.path-now .path-group-label::after{content:none}
.path-icon{width:34px;height:34px;margin-top:6px;fill:none;stroke:#276578;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.path-step .roadmap-stage{border:0;margin:0;padding:0;background:none}
.path-step .roadmap-stage h3{margin:6px 0 4px}
.path-condition{margin:6px 0 0;padding:16px 18px;background:#fff;border:1px solid #D9E3E8;border-radius:4px;color:#193D4E;max-width:44rem}

/* the village, the lofts and the builder's photos (the id beats the site's 32em text width for lists) */
#building ul.photo-strip{max-width:960px;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}
#building .photo-strip li{max-width:none}
#building .photo-strip li:first-child{grid-column:1/-1}
#building .photo-strip li:first-child img{aspect-ratio:16/9}
.lead-figures{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.lead-figure{margin:0}
.lead-figure img{width:100%;height:auto;display:block;border-radius:4px}
.lead-figure figcaption,.photo-strip figcaption{margin-top:10px;color:#526571;font-size:15px;line-height:1.5}
.photo-strip{list-style:none;margin:24px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.photo-strip figure{margin:0}
.photo-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:4px}

@media (max-width:760px){
  .path{padding-left:40px}
  .path-line{left:11px}
  .path-dot{left:-35px}
  .path-tracks{grid-template-columns:minmax(0,1fr)}
  .lead-figures{grid-template-columns:minmax(0,1fr)}
  .photo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the drawing runs edge to edge on phones, with larger labels so they stay readable */
  .method-figure{margin-left:-12px;margin-right:-12px}
  .method-diamond .dd-label{font-size:21px}
  .method-diamond .dd-here{font-size:20px}
  .method-diamond .dd-note{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .js-roadmap .method-diamond .dd-line{transition:none;stroke-dashoffset:0}
  .js-roadmap .method-diamond .dd-marker,.js-roadmap .method-diamond .dd-pointer,.js-roadmap .method-diamond .dd-here,.js-roadmap .method-diamond .dd-back{transition:none;opacity:1;animation:none}
  .path-fill{transform:none}
}