/* ============================================================
   Global Sheds — "Four steps to your new shed" made visual.
   Three options. Tokens only; the line language matches the
   drawings already authored for the why-choose block.

   What the photography can actually cover, checked first: of the
   four steps only the last two have a real job photograph behind
   them, and the library's one plans image is stock carrying
   another company's logo. So two options draw and one uses the
   real photograph at its true size rather than stretched.
   ============================================================ */

.hw-plot{display:block;width:100%;height:auto;color:var(--ember)}   /* 4.81:1 on ink */
.hw-plot .ln{fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round}
.hw-plot .ln-thin{stroke-width:.7;opacity:.75}
.hw-plot .ln-ghost{stroke-width:.7;opacity:.42}
.hw-plot .fill{fill:currentColor;stroke:none}
.hw-n{display:block;font-family:var(--display);font-weight:700;font-size:1.75rem;
  line-height:1;color:var(--ember);font-variant-numeric:tabular-nums;margin-bottom:12px}
.hw-body{color:rgba(255,255,255,.78);line-height:1.55}

/* ---------- A. four states of the same job ---------- */
.hw-a{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.hw-a>li{list-style:none;min-width:0;padding:0 34px;
  border-left:1px solid rgba(255,255,255,.15)}
.hw-a>li:first-child{border-left:0;padding-left:0}
.hw-a>li:last-child{padding-right:0}
.hw-a .hw-plot{margin-bottom:26px}
@supports (grid-template-rows:subgrid){
  .hw-a{grid-template-rows:auto auto auto}
  .hw-a>li{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
}
@media (max-width:991px){
  .hw-a{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 0}
  .hw-a>li:nth-child(odd){border-left:0;padding-left:0}
  .hw-a>li:nth-child(even){padding-right:0}
  @supports (grid-template-rows:subgrid){.hw-a{grid-template-rows:auto}
    .hw-a>li{display:block;grid-row:auto}}
}
@media (max-width:560px){
  .hw-a{grid-template-columns:1fr;gap:38px}
  .hw-a>li{border-left:0;padding:0}
  .hw-a .hw-plot{max-width:260px}
}

/* ---------- B. one route, drawings alternating across the rail ---------- */
.hw-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto 64px auto;align-items:end}
.hw-route>li{list-style:none;min-width:0;padding:0 30px;display:contents}
.hw-rail{grid-column:1/-1;grid-row:2;position:relative;align-self:center;
  height:1px;background:rgba(255,255,255,.22)}
.hw-rail i{position:absolute;top:-5px;width:11px;height:11px;
  border:1px solid var(--ember);background:var(--ink);border-radius:50%}
.hw-rail i:nth-child(1){left:0}
.hw-rail i:nth-child(2){left:25%}
.hw-rail i:nth-child(3){left:50%}
.hw-rail i:nth-child(4){left:75%}
.hw-slot{min-width:0;padding:0 44px 0 0}
.hw-route .hw-plot{max-width:250px}
/* odd steps draw above the rail and read below it, even steps the other way round */
.hw-art-1{grid-column:1;grid-row:1;align-self:end;padding-bottom:22px}
.hw-txt-1{grid-column:1;grid-row:3;padding-top:22px}
.hw-art-2{grid-column:2;grid-row:3;padding-top:22px}
.hw-txt-2{grid-column:2;grid-row:1;align-self:end;padding-bottom:22px}
.hw-art-3{grid-column:3;grid-row:1;align-self:end;padding-bottom:22px}
.hw-txt-3{grid-column:3;grid-row:3;padding-top:22px}
.hw-art-4{grid-column:4;grid-row:3;padding-top:22px}
.hw-txt-4{grid-column:4;grid-row:1;align-self:end;padding-bottom:22px}
@media (max-width:991px){
  .hw-route{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .hw-route>li{display:block;padding:34px 0 0;margin-top:34px;
    border-top:1px solid rgba(255,255,255,.15)}
  .hw-route>li:first-child{margin-top:0;padding-top:0;border-top:0}
  .hw-rail{display:none}
  .hw-slot,[class^="hw-art-"],[class^="hw-txt-"]{padding:0;grid-column:auto;grid-row:auto}
  .hw-route .hw-plot{max-width:240px;margin-bottom:22px}
}

/* ---------- C. the photograph, at the size it actually is ---------- */
.hw-c{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:70px;
  align-items:start}
.hw-c-media img{display:block;width:100%;height:auto;max-width:800px}
.hw-c-cap{margin-top:14px;font-size:.8125rem;color:rgba(255,255,255,.66)}
.hw-c-list{margin:0;padding:0;list-style:none}
.hw-c-list>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 24px;
  align-items:baseline;padding:24px 0;border-top:1px solid rgba(255,255,255,.15)}
.hw-c-list>li:first-child{border-top:0;padding-top:0}
.hw-c-list .hw-n{margin-bottom:0;font-size:1.5rem;min-width:1.4ch}
@media (max-width:991px){
  .hw-c{grid-template-columns:1fr;gap:40px}
  .hw-c-media img{max-width:100%}
}

/* ============================================================
   Second set. A, B and C all kept the four steps as four equal
   items with a small drawing as the visual. These do not.
   ============================================================ */

/* ---------- D. the photograph is the section ---------- */
.hw-full{position:relative;overflow:hidden;background:var(--ink);
  color:#fff;--dim:rgba(255,255,255,.78);--brow:var(--ice)}
.hw-full-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%}
/* Two scrims, not one: a wide left wash that carries the heading and a deep base band
   that carries the four steps. Both measured against the brightest pixel in the sky. */
.hw-full::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,29,56,.94) 0%,rgba(14,29,56,.86) 38%,
    rgba(14,29,56,.55) 72%,rgba(14,29,56,.42) 100%)}
.hw-full::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,29,56,.96) 0%,rgba(14,29,56,.9) 40%,
    rgba(14,29,56,0) 100%)}
.hw-full-in{position:relative;z-index:2;width:100%;max-width:var(--shell);
  margin-inline:auto;padding:130px 0 0;min-height:70vh;display:flex;flex-direction:column;
  justify-content:space-between}
.hw-full-in .h-sec{margin-bottom:0}
.hw-steps-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:120px;padding-bottom:10px}
.hw-steps-row>li{list-style:none;min-width:0;padding:26px 34px 0;
  border-top:1px solid rgba(255,255,255,.3)}
.hw-steps-row>li:first-child{padding-left:0}
.hw-steps-row>li:last-child{padding-right:0}
.hw-steps-row .hw-n{font-size:1.5rem;margin-bottom:10px}
.hw-steps-row .hw-body{color:rgba(255,255,255,.88)}
@media (max-width:991px){
  .hw-full-in{padding-top:80px;min-height:0}
  .hw-steps-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0;margin-top:70px}
  .hw-steps-row>li:nth-child(odd){padding-left:0}
  .hw-steps-row>li:nth-child(even){padding-right:0}
}
@media (max-width:560px){
  .hw-steps-row{grid-template-columns:1fr;gap:24px}
  .hw-steps-row>li{padding:22px 0 0}
}

/* ---------- E. the numerals are the design ---------- */
.hw-e{border-top:1px solid rgba(255,255,255,.16)}
.hw-e>li{list-style:none;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:0 56px;align-items:center;padding:40px 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.hw-fig{font-family:var(--display);font-weight:700;line-height:.82;letter-spacing:-.04em;
  font-size:clamp(3.5rem,8vw,7rem);color:transparent;font-variant-numeric:tabular-nums;
  -webkit-text-stroke:1.5px var(--ember);text-stroke:1.5px var(--ember)}
/* the outline carries no fill, so browsers without text-stroke get a solid figure
   rather than an invisible one */
@supports not (-webkit-text-stroke:1px red){.hw-fig{color:var(--ember)}}
.hw-e p{font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.4;color:#fff;
  max-width:36ch;text-wrap:balance}
@media (max-width:767px){
  .hw-e>li{grid-template-columns:1fr;gap:12px;padding:30px 0}
  .hw-fig{font-size:3.25rem}
}

/* ---------- F. the timeline, scaled to what the copy actually says ---------- */
.hw-t{margin-top:10px}
.hw-t-head{display:flex;justify-content:space-between;gap:20px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.22)}
.hw-t-row{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);gap:0 40px;
  align-items:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.hw-t-label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;
  align-items:baseline}
.hw-t-label .hw-n{font-size:1.375rem;margin-bottom:0;min-width:1.4ch}
.hw-t-label p{color:rgba(255,255,255,.8);line-height:1.5;font-size:.9375rem}
.hw-t-track{position:relative;height:38px;display:flex;align-items:center}
.hw-t-bar{height:14px;background:var(--ember);position:relative}
.hw-t-bar.is-open{background:repeating-linear-gradient(135deg,
  rgba(240,80,95,.85) 0 5px,rgba(240,80,95,.3) 5px 10px)}
.hw-t-when{margin-left:14px;font-family:var(--mono);font-size:.8125rem;
  color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.hw-t-foot{margin-top:22px;font-size:.875rem;color:rgba(255,255,255,.7);max-width:70ch}
@media (max-width:767px){
  .hw-t-row{grid-template-columns:1fr;gap:16px;padding:22px 0}
  .hw-t-head{display:none}
}

/* ============================================================
   Third set, all led by the step numbers.
   ============================================================ */
.hn-copy{color:rgba(255,255,255,.8);line-height:1.6}

/* ---------- G. solid numerals heading four columns ---------- */
.hn-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 56px}
.hn-g>li{list-style:none;min-width:0}
.hn-solid{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(3.5rem,6vw,6rem);line-height:.82;letter-spacing:-.05em;
  color:var(--icon);font-variant-numeric:tabular-nums;margin-bottom:20px}   /* 2.97:1 on ink */
.hn-g .hn-rule{display:block;height:1px;background:rgba(255,255,255,.22);margin-bottom:22px}
@supports (grid-template-rows:subgrid){
  .hn-g{grid-template-rows:auto auto auto}
  .hn-g>li{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
}
@media (max-width:991px){
  .hn-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
  @supports (grid-template-rows:subgrid){.hn-g{grid-template-rows:auto}
    .hn-g>li{display:block;grid-row:auto}}
}
@media (max-width:560px){
  .hn-g{grid-template-columns:1fr;gap:34px}
}

/* ---------- H. the numeral behind the copy ---------- */
.hn-h{border-top:1px solid rgba(255,255,255,.14)}
.hn-h>li{position:relative;list-style:none;display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:0 40px;align-items:center;
  padding:44px 0;border-bottom:1px solid rgba(255,255,255,.14);overflow:hidden}
/* .07 of white over the ink ground lands at rgb(31,45,70); copy at .8 white still
   measures well past 4.5 there, so the numeral can sit behind the text rather than beside */
.hn-wash{position:absolute;left:-14px;top:50%;transform:translateY(-50%);z-index:0;
  font-family:var(--display);font-weight:700;font-size:clamp(5rem,12vw,10rem);
  line-height:.78;letter-spacing:-.06em;color:rgba(255,255,255,.07);
  font-variant-numeric:tabular-nums;pointer-events:none;user-select:none}
.hn-h .hn-when,.hn-h .hn-copy{position:relative;z-index:1}
.hn-h .hn-when.is-none{color:rgba(255,255,255,.62)}
.hn-when{font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember)}
.hn-h .hn-copy{font-size:1.0625rem;max-width:52ch}
@media (max-width:767px){
  .hn-h>li{grid-template-columns:1fr;gap:10px;padding:34px 0}
  .hn-wash{left:auto;right:-6px;font-size:5rem}
}

/* ---------- I. numerals on the rail, with the timings the copy gives ---------- */
.hn-i{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;padding-top:34px}
.hn-i::before{content:"";position:absolute;left:32px;right:32px;top:66px;height:1px;
  background:rgba(255,255,255,.2)}
.hn-i>li{list-style:none;min-width:0;padding:0 40px 0 0;position:relative}
.hn-mark{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;
  background:var(--ember);color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:1.625rem;font-variant-numeric:tabular-nums;margin-bottom:28px}  /* 4.80:1 */
.hn-i .hn-when{display:block;margin-bottom:10px}
.hn-i .hn-when.is-none{color:rgba(255,255,255,.58)}      /* .45 measured 4.38:1 */
@media (max-width:991px){
  .hn-i{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0}
  .hn-i::before{display:none}
}
@media (max-width:560px){
  .hn-i{grid-template-columns:1fr;gap:32px}
  .hn-i>li{padding-right:0}
  .hn-mark{width:56px;height:56px;font-size:1.375rem;margin-bottom:20px}
}

/* outlined numerals. The fill goes transparent and the figure paints with its stroke, so
   a browser without text-stroke gets a solid numeral rather than an invisible one */
.hn-outline{color:transparent;-webkit-text-stroke:1.8px var(--icon);
  text-stroke:1.8px var(--icon)}
@supports not (-webkit-text-stroke:1px red){.hn-outline{color:var(--icon)}}