/* ============================================================
   Global Sheds — CouncilSafe, four ways to make it compact.

   The block today is 912px tall for 175 words, in three stacked bands: a two-column
   intro, a three-column timeline, and a closing row. Each band is fine and the stack
   is the problem. Every option below collapses the bands into one object.

   Colours resolve from avast.css. The ratios used, all computed:
     white on navy      11.01:1      ice on navy     5.91:1
     ink on concrete    15.15:1      steel on white  5.78:1
     ice on ink          9.01:1      ember on ink    4.75:1
     red on white        5.89:1      ember on navy   3.13:1  (large text and marks only)
   ============================================================ */

.cs2{--dim:var(--steel)}
.cs2-fig{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.cs2-when{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* ---------- A. one card. The three bands become a single object on the ground ----------

   The section keeps the body's white and drops .sec's 140px band, which was 280px of the
   873 this block measured: with the card carrying its own 52px of internal padding, the
   section's was padding around padding. The strip above ends on 90px of its own and the
   pricing section below opens on 60px, so 56px here puts 146px above the card and 156px
   below it, close to even without the band coming back.

   The concrete ground went with it. It was separating this block from its neighbours, and
   a navy card on white does that on its own. */
.csa-sec{padding-top:56px;padding-bottom:96px}
@media (max-width:767px){.csa-sec{padding-top:36px;padding-bottom:64px}}
/* ---------- A. one card. The three bands become a single object on the ground ---------- */
/* A light card, the way the pricing and popular-shed cards sit on a light ground: white
   with the stylesheet's own lift, and the steps on concrete so the two halves stay
   distinct without a rule between them.

   Going light means every value inside changes, not just the two grounds. Ice at 1.86:1
   and ember at 3.52:1 on white are both the wrong side of readable here, so the lockup
   takes the page's own mark colour instead. Each ratio computed:

     ink on white         16.9:1      ink on concrete      15.15:1
     steel on white        5.78:1     steel on concrete     5.25:1
     icon red on white     5.66:1     red on concrete       5.35:1
*/
/* 12px rather than the stylesheet's 4px card radius. The dropdown panel already sits at
   14 and its rows at 10, so the softer corner is in the page's vocabulary; this is just
   the first card to use it. overflow:hidden is what makes the concrete panel clip to it. */
.csa{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  background:#fff;color:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:var(--lift);border:1px solid var(--hairline)}
.csa-copy{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.csa-lock{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.csa-lock svg{width:26px;height:26px;color:var(--icon);flex:0 0 auto}      /* 5.66:1 */
.csa-lock span{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red)}                                                        /* 5.89:1 */
.csa-copy h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.75rem,2.6vw,2.375rem);line-height:1.1;margin-bottom:16px;
  color:var(--ink)}                                                        /* 16.9:1 */
.csa-copy p{color:var(--steel);line-height:1.6;max-width:62ch}             /* 5.78:1 */
.csa-copy p+p{margin-top:15px}
.csa-fine{font-size:.875rem;margin-top:20px!important}
.csa-copy .btn{margin-top:26px;align-self:flex-start}
.csa-steps{background:var(--concrete);padding:44px 48px;display:flex;flex-direction:column;
  justify-content:center;gap:0}
.csa-steps li{list-style:none;display:grid;grid-template-columns:9.5rem minmax(0,1fr);
  gap:4px 22px;padding:20px 0;border-top:1px solid rgba(14,29,56,.13)}
.csa-steps li:first-child{border-top:0;padding-top:0}
.csa-steps li:last-child{padding-bottom:0}
.csa-steps .cs2-fig{grid-row:span 2;align-self:center;font-size:clamp(1.5rem,2.1vw,2rem);
  color:var(--ink)}                                                        /* 15.15:1 */
.csa-steps .cs2-when{color:var(--red)}                                     /* 5.35:1 */
.csa-steps p:last-child{color:var(--steel);font-size:.9375rem;line-height:1.55}  /* 5.25:1 */
@media (max-width:991px){
  .csa{grid-template-columns:minmax(0,1fr)}
  .csa-copy{padding:38px 30px}
  .csa-steps{padding:32px 30px}
}

/* ---------- B. the docket. A refund guarantee shaped like the receipt for one ---------- */
.csb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:center}
.csb-copy h2{margin-bottom:16px}
.csb-copy .lede+.lede{margin-top:16px}
.csb-copy .btn{margin-top:28px}
.csb-card{position:relative;background:#fff;box-shadow:0 24px 60px rgba(14,29,56,.14);
  padding:34px 34px 30px;
  /* the torn foot: white half-circles bitten out of the bottom edge */
  -webkit-mask-image:radial-gradient(circle 9px at 12px 100%,transparent 98%,#000 100%);
  mask-image:radial-gradient(circle 9px at 12px 100%,transparent 98%,#000 100%);
  -webkit-mask-size:24px 100%;mask-size:24px 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.csb-head{display:flex;align-items:center;gap:10px;padding-bottom:16px;
  border-bottom:1px dashed rgba(14,29,56,.3)}
.csb-head svg{width:22px;height:22px;color:var(--red)}                   /* 5.89:1 on white */
.csb-head span{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red)}
.csb-line{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 0;border-bottom:1px dashed rgba(14,29,56,.22)}
.csb-line dt{font-size:.875rem;color:var(--steel);margin:0}              /* 5.78:1 */
.csb-line dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.25rem;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.csb-total{padding:18px 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.csb-total dt{font-size:.875rem;font-weight:600;color:var(--ink);margin:0}
.csb-total dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--red)}
.csb-fine{margin-top:6px;font-size:.75rem;color:var(--steel);line-height:1.5}
@media (max-width:991px){.csb{grid-template-columns:minmax(0,1fr);gap:36px}}

/* ---------- C. the bar. Everything on one line, the smallest this can honestly be ---------- */
.csc{background:var(--ink);color:#fff;border-radius:4px;
  padding:34px 40px;display:flex;align-items:center;flex-wrap:wrap;gap:28px 44px}
.csc-lead{flex:1 1 320px;min-width:0}
.csc-lock{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.csc-lock svg{width:22px;height:22px;color:var(--ember)}
.csc-lock span{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice)}
.csc h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.15}
.csc-lead p{margin-top:8px;color:rgba(255,255,255,.82);font-size:.9375rem;line-height:1.55;max-width:52ch}
.csc-figs{display:flex;gap:36px;flex:0 0 auto}
.csc-figs div{min-width:0}
.csc-figs .cs2-fig{font-size:clamp(1.5rem,2.2vw,2.125rem);color:#fff;margin-bottom:4px}
.csc-figs .cs2-when{color:var(--ice);font-size:.6875rem}
.csc-figs p:last-child{margin-top:5px;font-size:.8125rem;color:rgba(255,255,255,.7);max-width:17ch;line-height:1.45}
.csc .btn{flex:0 0 auto}
@media (max-width:767px){.csc{padding:28px 24px;gap:22px}.csc-figs{gap:24px}}

/* ---------- D. the shield carries the two dates that actually matter ---------- */
.csd{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;align-items:center}
.csd-mark{position:relative;aspect-ratio:1/1.12;display:grid;place-items:center;
  background:var(--ink);color:#fff;
  -webkit-clip-path:polygon(50% 0,100% 16%,100% 58%,50% 100%,0 58%,0 16%);
  clip-path:polygon(50% 0,100% 16%,100% 58%,50% 100%,0 58%,0 16%)}
.csd-mark div{text-align:center;padding:0 18px}
.csd-mark .cs2-when{color:var(--ice);display:block}
.csd-mark .cs2-fig{font-size:clamp(1.75rem,2.6vw,2.25rem);color:#fff;margin:7px 0 0}
.csd-mark hr{border:0;border-top:1px solid rgba(255,255,255,.2);margin:20px 22px}
.csd-copy h2{margin-bottom:14px}
.csd-copy .lede{max-width:60ch}
.csd-copy .lede+.lede{margin-top:14px}
.csd-steps{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--hairline)}
.csd-steps li{list-style:none;font-size:.875rem;color:var(--steel);
  display:flex;align-items:center;gap:8px}
.csd-steps li::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--red);flex:0 0 auto}
.csd-copy .btn{margin-top:26px}
@media (max-width:767px){.csd{grid-template-columns:minmax(0,1fr);gap:32px}
  .csd-mark{max-width:240px;margin-inline:auto}}

/* Options A and C inline the shield straight into a flex row, so it needs sizing here:
   the markup carries a viewBox and no width or height, which without a rule renders at the
   replaced-element default and blew the two option blocks past the height they were meant
   to beat. council.css sizes the lockup version used by B and D. */
.csa-lock>svg,.csc-lock>svg,.csb-head>svg{flex:0 0 auto}

/* 320: the figures row and the card padding were together wider than the viewport */
@media (max-width:420px){
  .csa-copy{padding:30px 20px}
  .csa-steps{padding:26px 20px}
  .csa-steps li{grid-template-columns:minmax(0,1fr);gap:2px}
  .csa-steps .cs2-fig{grid-row:auto;min-width:0;margin-bottom:4px}
  .csc{padding:24px 16px}
  .csc-figs{flex-wrap:wrap;gap:18px;width:100%}
  .csc-figs>div{flex:1 1 130px;min-width:0}
  .csc .btn{width:100%;justify-content:center}
  .csb-card{padding:26px 22px 24px}
  .csb-line{gap:12px}
  .csb-line dd{font-size:1.0625rem}
  /* "Talk to us about your project" plus the .btn padding is 305px, wider than a 320
     viewport less its gutters, so at this width the action goes full width and wraps */
  .cs2 .btn{width:100%;align-self:stretch;justify-content:center;white-space:normal;
    text-align:center}
}

/* the option blocks are flex and grid children, so they need the same min-width:0 the
   stylesheet gives .shell's children, or a long unbroken figure sets the floor */
.csa>*,.csb>*,.csc>*,.csd>*,.csc-figs>*{min-width:0}