/* ============================================================
   Global Sheds — CouncilSafe layout options.
   Three directions for the same content. Nothing here invents a
   colour or a scale: everything resolves from avast.css tokens.

   No photography in any of them. The one council image in the
   library is stock, and it carries another company's logo on the
   subject's shirt, so it cannot be used. The rest of the real
   library is sheds and builds, none of which says "approval".
   ============================================================ */

/* the shield, shared by all three */
.cs-shield{flex:0 0 auto;width:34px;height:34px;color:var(--icon)}   /* 5.14:1 on concrete */
.cs-lockup{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.cs-name{font-family:var(--body);font-size:.875rem;font-weight:600;letter-spacing:.214em;
  text-transform:uppercase;color:var(--red);line-height:1}

/* ---------- A. one panel, everything inside it ---------- */
.cs-panel{background:#fff;border:1px solid var(--hairline);border-top:3px solid var(--red);
  box-shadow:var(--lift);color:var(--ink);--dim:var(--steel)}
.cs-panel-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:70px;padding:56px 56px 50px}
.cs-panel-head .h-sec{margin-bottom:0}
.cs-panel-head .lede{max-width:62ch}
.cs-panel-head .lede+.lede{margin-top:18px}
.cs-panel-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hairline);margin:0;padding:0;list-style:none}
.cs-panel-steps>li{padding:42px 40px 46px;border-left:1px solid var(--hairline);min-width:0}
.cs-panel-steps>li:first-child{border-left:0}
.cs-step-n{display:block;font-family:var(--display);font-weight:700;font-size:2.25rem;
  line-height:1;color:var(--red);margin-bottom:16px;font-variant-numeric:tabular-nums}
.cs-panel-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 40px;padding:26px 56px;border-top:1px solid var(--hairline);background:var(--concrete)}
.cs-panel-foot p{font-size:.9375rem;line-height:1.5;color:var(--steel);max-width:62ch}
@media (max-width:991px){
  .cs-panel-head{grid-template-columns:1fr;gap:26px;padding:40px 30px 34px}
  .cs-panel-steps{grid-template-columns:1fr}
  .cs-panel-steps>li{border-left:0;border-top:1px solid var(--hairline);padding:30px}
  .cs-panel-steps>li:first-child{border-top:0}
  .cs-panel-foot{padding:24px 30px}
}

/* ---------- B. the argument on the left, the sequence down the right ---------- */
.cs-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:100px;align-items:start}
.cs-hold{position:sticky;top:40px}
.cs-hold .lede+.lede{margin-top:18px}
.cs-hold .btn-row{margin-top:36px}
.cs-hold .small-print{margin-top:26px}
.cs-rail{margin:0;padding:0;list-style:none}
.cs-rail>li{position:relative;padding:0 0 46px 92px;min-width:0}
.cs-rail>li:last-child{padding-bottom:0}
/* the rule runs from under one marker to the top of the next, so the sequence reads
   as time passing rather than as three separate notes */
.cs-rail>li::before{content:"";position:absolute;left:27px;top:64px;bottom:0;width:1px;
  background:var(--hairline)}
.cs-rail>li:last-child::before{display:none}
.cs-rail-n{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  background:#fff;border:1px solid var(--red);color:var(--red);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.375rem;font-variant-numeric:tabular-nums}
.cs-rail p{color:var(--steel);line-height:1.6;padding-top:13px}
@media (max-width:991px){
  .cs-split{grid-template-columns:1fr;gap:48px}
  .cs-hold{position:static}
  .cs-rail>li{padding-left:76px;padding-bottom:38px}
  .cs-rail-n{width:48px;height:48px;font-size:1.25rem}
  .cs-rail>li::before{left:23px;top:56px}
}

/* ---------- C. the two deadlines, forward ---------- */
.cs-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:74px;border-top:1px solid var(--ink)}
.cs-time>li{position:relative;padding:38px 44px 0 0;min-width:0;list-style:none}
.cs-time>li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;
  border-radius:50%;background:var(--red)}
.cs-when{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);margin-bottom:14px}
.cs-fig{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.2vw,3rem);
  line-height:1;letter-spacing:-.02em;margin-bottom:20px;font-variant-numeric:tabular-nums}
.cs-time p{color:var(--steel);line-height:1.6}
.cs-close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px 40px;margin-top:60px;padding-top:30px;border-top:1px solid var(--hairline)}
.cs-close p{max-width:62ch;font-size:.9375rem;line-height:1.6;color:var(--steel)}
@media (max-width:991px){
  .cs-time{grid-template-columns:1fr;margin-top:52px;border-top:0}
  .cs-time>li{padding:0 0 34px 30px;border-left:1px solid var(--hairline)}
  .cs-time>li:last-child{padding-bottom:0}
  .cs-time>li::before{top:4px;left:-6px}
  .cs-close{margin-top:44px}
}