/* ==========================================================================
   static-pages.css — Services · Tools · Locations · About · Contact ·
   We Buy · Blog · Search.

   MEASURED off the five Static sections on page "Website" 15226:1359.
   Shared template: Content 1551, pad 48/0/72, gap 44 · Web/Stat Card pad 16
   gap 12 r10 with a 48 r10 #ffece6 icon chip · Web/Section Heading Inter
   Regular 30 · Web/Category Card 204x217 (image 161) · Web/Callout Card 283
   tall, pad 44, image under #121721 at 78%.
   ========================================================================== */

/* The single --web-gutter on `.wwrap` sets the content edge, so page
   wrappers must not re-centre a fixed column inside it — that put these
   pages 32px in from the header. */
.spage { width: 100%;
         padding: 48px 0 72px; display: flex; flex-direction: column; gap: 44px; }
.spage__lead { font: 400 18px/1.45 Inter, sans-serif; color: #364153; margin: 0; }
.spage__caveat { font: 500 14px/1.45 Inter, sans-serif; color: #e55a33; margin: 0; }

.ssec { display: flex; flex-direction: column; gap: 16px; }
.ssec__h { font: 400 30px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.ssec__p { font: 400 16px/1.5 Inter, sans-serif; color: #364153; margin: 0; }
.ssec__b { font: 600 16px/1.4 Inter, sans-serif; color: #101828; margin: 0; }
.slist, .ssteps { margin: 0; padding-left: 20px;
                  display: flex; flex-direction: column; gap: 6px; }
.slist li, .ssteps li { font: 400 16px/1.5 Inter, sans-serif; color: #364153; }

/* Web/Stat Card */
.sstats { display: flex; flex-wrap: wrap; gap: 20px; }
.sstat { flex: 1 1 240px; padding: 16px; border-radius: 10px; background: #fff;
         box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
         display: flex; flex-direction: column; gap: 12px; }
.sstat__chip { width: 48px; height: 48px; border-radius: 10px; background: #ffece6;
               display: inline-grid; place-items: center; }
.sstat__chip svg { fill: #e55a33; }
.sstat__v { font: 400 30px/1.2 Inter, sans-serif; color: #101828; }
.sstat__d { font: 400 16px/1.25 Inter, sans-serif; color: #364153; }

/* Web/Category Card 204x217 */
.scards { display: grid; gap: 20px;
          grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); }
.scard { width: auto; border-radius: 10px; background: #fff; overflow: hidden;
         padding-bottom: 20px; display: flex; flex-direction: column; gap: 14px;
         text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.scard:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.scard__img { display: block; height: 161px; background: #f0f0f0 center/cover no-repeat; }
.scard__t { padding: 0 12px; font: 500 18px/1.25 Inter, sans-serif; color: #364153;
            text-align: center; }

.sfigure { display: flex; flex-direction: column; gap: 8px; }
.sfigure img, .sfull { width: 100%; height: auto; border-radius: 10px; display: block; }
.sfigure__c { font: 400 13px/1.4 Inter, sans-serif; color: #656772; }
.srow { display: flex; flex-wrap: wrap; gap: 16px; }
.srow__i { flex: 0 1 360px; max-width: 100%; height: auto; border-radius: 8px; display: block; }
.schips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip { padding: 7px 14px; border-radius: 999px; background: #fff;
         box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
         font: 500 14px/1.3 Inter, sans-serif; color: #101828; }

/* Web/Callout Card */
.scallout { position: relative; border-radius: 10px; overflow: hidden;
            background: #2c2c35 center/cover no-repeat; }
.scallout::after { content: ""; position: absolute; inset: 0;
                   background: #121721; opacity: .78; }
.scallout__in { position: relative; z-index: 1; padding: 44px;
                display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.scallout__in h2 { font: 400 30px/1.28 Inter, sans-serif; color: #fff; margin: 0; }
.scallout__in p  { font: 400 18px/1.45 Inter, sans-serif; color: #fff; margin: 0;
                   max-width: 664px; }
.scallout__cta { height: 48px; padding: 0 31px; border-radius: 10px; background: #fff;
                 display: inline-flex; align-items: center; text-decoration: none;
                 font: 600 16px/1 Inter, sans-serif; color: #101828; }
.scallout__cta:hover { background: #f0f0f0; }

/* ---- Tools --------------------------------------------------------------- */
.scatalogs { display: flex; flex-wrap: wrap; gap: 20px; }
.scat { width: 288px; padding-bottom: 16px; border-radius: 10px; background: #fff;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
        display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.scat__img { display: block; height: 170px; background: #f0f0f0 center/cover no-repeat; }
.scat__t { padding: 0 14px; font: 600 18px/1.3 Inter, sans-serif; color: #101828; }
.scat__u { padding: 0 14px; font: 400 12px/1.3 Inter, sans-serif; color: #656772; }
.scat .btn { margin: 6px 14px 0; }

/* `Tools - Quote Genie` 17752:36110 — the panel is a solid #101828 and the
   photo sits INSIDE it at opacity 0.4. The photo arrives as this element's
   own background, so the dark base never showed; a 60% #101828 overlay
   composites to exactly the same thing (photo x .4 + dark x .6). */
.sgenie { position: relative; border-radius: 12px; overflow: hidden; padding: 40px;
          background: #101828 center/cover no-repeat;
          display: flex; gap: 32px; align-items: center; }
.sgenie::before { content: ""; position: absolute; inset: 0;
                  background: #101828; opacity: .6; pointer-events: none; }
.sgenie__t { position: relative; z-index: 1;
             flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.sgenie__art { position: relative; z-index: 1; }
.sgenie__w { font: 400 60px/1.1 Inter, sans-serif; color: #fff; }
.sgenie__tag { font: 400 20px/1.4 Inter, sans-serif; color: #fff; margin: 0; }
.sgenie__p { font: 400 16px/1.5 Inter, sans-serif; color: rgba(255,255,255,.8); margin: 0; }
.sgenie__art { flex: 0 0 320px; max-width: 320px; height: auto; }

.sfaq { display: flex; flex-direction: column; gap: 20px; }
.sfaqitem { display: flex; gap: 20px; padding: 18px; border-radius: 10px; background: #fff;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.sfaqitem__img { flex: 0 0 220px; height: 150px; border-radius: 8px;
                 background: #f0f0f0 center/cover no-repeat; }
.sfaqitem h3 { font: 600 24px/1.3 Inter, sans-serif; color: #101828; margin: 0; }
.sfaqitem p  { font: 400 16px/1.5 Inter, sans-serif; color: #364153; margin: 0; }

.ssteps2 { display: flex; flex-direction: column; gap: 16px; }
.sstep { display: flex; gap: 16px; padding: 18px; border-radius: 10px; background: #fff;
         box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.sstep__n { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 999px;
            background: rgba(0,128,95,.07); color: #00805f;
            display: inline-grid; place-items: center; font: 600 16px/1 Inter, sans-serif; }
.sstep h3 { font: 400 24px/1.3 Inter, sans-serif; color: #101828; margin: 0; }
.sstep p  { font: 400 16px/1.5 Inter, sans-serif; color: #364153; margin: 0; }

.sstyles { display: flex; flex-wrap: wrap; gap: 20px; }
.sstyle { flex: 1 1 420px; padding: 18px; border-radius: 10px; background: #fff;
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
          display: flex; flex-direction: column; gap: 10px; }
.sstyle__imgs { display: flex; gap: 12px; }
.sstyle__imgs img { flex: 1 1 0; min-width: 0; height: auto; border-radius: 8px; }
.sstyle h3 { font: 400 24px/1.3 Inter, sans-serif; color: #101828; margin: 0; }
.sstyle p  { font: 400 16px/1.5 Inter, sans-serif; color: #364153; margin: 0; }

.sspecs { display: flex; gap: 32px; }
.sspec { display: flex; flex-direction: column; gap: 3px; }
.sspec__k { font: 400 12px/1.3 Inter, sans-serif; color: #656772; }
.sspec__v { font: 600 16px/1.3 Inter, sans-serif; color: #101828; }

.sexamples { display: flex; flex-wrap: wrap; gap: 20px; }
.sexample { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.sexample__img { position: relative; display: block; height: 220px; border-radius: 10px;
                 background: #f0f0f0 center/cover no-repeat; }
.sexample__tag { position: absolute; left: 12px; top: 12px; padding: 4px 10px;
                 border-radius: 999px; background: #00805f;
                 font: 500 10px/1.4 Inter, sans-serif; color: #fff; }
.sexample__n { font: 400 16px/1.4 Inter, sans-serif; color: #364153; }

.scompare { display: flex; flex-wrap: wrap; gap: 20px; }
.scompare__c { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.scompare__t { font: 600 14px/1.3 Inter, sans-serif; }
.scompare__t.is-ok  { color: #00805f; }
.scompare__t.is-bad { color: #e55a33; }

.saisles { display: flex; flex-wrap: wrap; gap: 20px; }
.saisle { flex: 1 1 320px; padding: 18px; border-radius: 10px; background: #fff;
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
          display: flex; flex-direction: column; gap: 6px; }
.saisle__img { display: block; height: 180px; border-radius: 8px; margin-bottom: 6px;
               background: #f0f0f0 center/cover no-repeat; }
.saisle__k { font: 400 24px/1.3 Inter, sans-serif; color: #101828; }
.saisle__truck { font: 400 14px/1.3 Inter, sans-serif; color: #656772; }
.saisle__d { font: 600 30px/1.2 Inter, sans-serif; color: #00805f; }
.saisle__lab { font: 400 12px/1.3 Inter, sans-serif; color: #656772; }

.slabels { display: flex; flex-wrap: wrap; gap: 20px; }
.slabel { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.slabel__img { position: relative; display: block; height: 170px; border-radius: 10px;
               background: #f0f0f0 center/cover no-repeat; }
.slabel__tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px;
               border-radius: 999px; font: 500 10px/1.4 Inter, sans-serif; color: #fff; }
.slabel__tag.is-ok  { background: #00805f; }
.slabel__tag.is-bad { background: #e55a33; }
.slabel__t { font: 600 18px/1.35 Inter, sans-serif; color: #101828; }

.sanchors { display: flex; flex-wrap: wrap; gap: 8px; }
.sanchor { padding: 7px 14px; border-radius: 999px; background: #fff; text-decoration: none;
           box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
           font: 600 14px/1.3 Inter, sans-serif; color: #101828; }
.sanchor:hover { box-shadow: inset 0 0 0 1px #00805f; color: #00805f; }

.spanel { padding: 24px; border-radius: 12px; background: #fff;
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
          display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.spanel h2 { font: 400 30px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.spanel p  { font: 400 18px/1.45 Inter, sans-serif; color: #364153; margin: 0; }

/* ---- Locations ----------------------------------------------------------- */
.locgrid { display: grid; gap: 20px;
           grid-template-columns: repeat(auto-fill, minmax(366px, 1fr)); }
.loccard { width: auto; border-radius: 12px; background: #fff; overflow: hidden;
           text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
           display: flex; flex-direction: column; }
.loccard:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.loccard__img { position: relative; display: block; height: 180px;
                background: #f0f0f0 center/cover no-repeat; }
.loccard__img.is-none { display: grid; place-items: center; }
.loccard__img.is-none svg { fill: #b9bcc6; }
.loccard__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
                width: 34px; height: 34px; border-radius: 999px; background: #e55a33;
                display: grid; place-items: center; }
.loccard__pin { color: #fff; }
.loccard__b { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.loccard__b h3 { font: 600 18px/1.3 Inter, sans-serif; color: #101828; margin: 0; }
.loccard__a { font: 400 14px/1.45 Inter, sans-serif; color: #656772; margin: 0;
              white-space: pre-line; }
/* three locations genuinely have no address on the live site — flag, never invent */
.loccard__a.is-todo { color: #e55a33; font-style: italic; }
.loccard__p { font: 600 15px/1.3 Inter, sans-serif; color: #00805f; }

.locdetail { display: flex; gap: 32px; align-items: stretch; }
.locdetail__card { flex: 1 1 0; padding: 24px; border-radius: 12px; background: #fff;
                   box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
                   display: flex; flex-direction: column; gap: 14px; }
.locdetail__card h2 { font: 400 24px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.locdetail__photo { flex: 1 1 0; min-height: 320px; border-radius: 12px;
                    background: #f0f0f0 center/cover no-repeat; }
.locdetail__photo.is-none { display: grid; place-items: center; }
.locdetail__photo.is-none svg { fill: #b9bcc6; }
.lockv__k { font: 400 12px/1.3 Inter, sans-serif; color: #656772; }
.lockv__v { font: 600 16px/1.4 Inter, sans-serif; color: #101828; white-space: pre-line; }
.locmap { position: relative; height: 260px; border-radius: 12px; background: #e9edf2;
          display: grid; place-items: center; gap: 8px; align-content: center; }
.locmap__c { font: 500 14px/1.4 Inter, sans-serif; color: #656772; }
.locmap .loccard__pin { position: static; transform: none; }
/* the live embed fills the same 260 box the placeholder had */
.locmap.is-live { display: block; padding: 0; overflow: hidden; background: #e9edf2; }
.locmap.is-live iframe { display: block; width: 100%; height: 100%; border: 0; }
.locothers { display: flex; flex-wrap: wrap; gap: 12px; }
.locother { flex: 1 1 260px; padding: 14px 16px; border-radius: 10px; background: #fff;
            text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
            display: flex; flex-direction: column; gap: 3px; }
.locother:hover { box-shadow: inset 0 0 0 1px #00805f; }
.locother__n { font: 600 14px/1.3 Inter, sans-serif; color: #101828; }
.locother__p { font: 400 12px/1.3 Inter, sans-serif; color: #656772; }

/* ---- About --------------------------------------------------------------- */
.sabout { display: flex; flex-wrap: wrap; gap: 20px; }
.saboutcard { flex: 1 1 480px; padding: 22px; border-radius: 10px; background: #fff;
              box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
              display: flex; flex-direction: column; gap: 8px; }
.saboutcard h3 { font: 400 24px/1.3 Inter, sans-serif; color: #101828; margin: 0; }
.saboutcard p  { font: 400 16px/1.5 Inter, sans-serif; color: #364153; margin: 0; }

/* ---- Contact ------------------------------------------------------------- */
.scontact { display: flex; gap: 32px; align-items: flex-start; }
.scontact__form { flex: 1 1 0; padding: 24px; border-radius: 12px; background: #fff;
                  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
                  display: flex; flex-direction: column; gap: 14px; }
.scontact__form h2 { font: 400 24px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.scontact__consent { font: 400 12px/1.5 Inter, sans-serif; color: #656772; margin: 0; }
.scontact__d { flex: 0 0 400px; padding: 24px; border-radius: 12px; background: #fff;
               box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
               display: flex; flex-direction: column; gap: 12px; }
.scontact__d h3 { font: 600 18px/1.3 Inter, sans-serif; color: #101828; margin: 0; }
.scontact__nums { list-style: none; margin: 0; padding: 0;
                  display: flex; flex-direction: column; gap: 8px; }
.scontact__nums li { display: flex; justify-content: space-between;
                     font: 400 14px/1.4 Inter, sans-serif; color: #656772; }
.scontact__nums a { color: #101828; text-decoration: none; font-weight: 600; }

/* ---- Blog ---------------------------------------------------------------- */
.bcats { display: flex; flex-wrap: wrap; gap: 8px; }
.bcat { padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer; background: #fff;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
        font: 600 14px/1.3 Inter, sans-serif; color: #101828; }
.bcat.is-on { background: #00805f; box-shadow: none; color: #fff; }
/* A wrapping flex of fixed-width cards leaves a ragged gap at the end of
   every row once the wrap is not an exact multiple of the card. The frame's
   366 becomes the MINIMUM and the columns share what is left, so the grid
   always fills the content column — at 1551 that is still 4 x ~366. */
.bloggrid { display: grid; gap: 20px;
            grid-template-columns: repeat(auto-fill, minmax(366px, 1fr)); }
.blogcard { width: auto; border-radius: 12px; background: #fff; overflow: hidden;
            text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.blogcard:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.blogcard__img { display: block; height: 190px; background: #f0f0f0 center/cover no-repeat; }
.blogcard__b { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.blogcard__b h3 { font: 600 18px/1.35 Inter, sans-serif; color: #101828; margin: 0; }
.blogcard__d { font: 400 12px/1.3 Inter, sans-serif; color: #656772; }
.blogcard__b p { font: 400 14px/1.45 Inter, sans-serif; color: #656772; margin: 0; }
.blogcard__r { font: 600 14px/1.3 Inter, sans-serif; color: #00805f; }

.bpost { width: min(880px, 100%); margin: 0 auto;
         display: flex; flex-direction: column; gap: 18px; }
.bpost__meta { display: flex; align-items: center; gap: 12px;
               font: 400 12px/1.3 Inter, sans-serif; color: #656772; }
.bpost__cat { padding: 3px 10px; border-radius: 999px; background: rgba(0,128,95,.07);
              font: 500 10px/1.5 Inter, sans-serif; color: #00805f; }
.bpost__h { font: 600 24px/1.3 Inter, sans-serif; color: #101828; margin: 8px 0 0; }
.bpost__p { font: 400 16px/1.65 Inter, sans-serif; color: #364153; margin: 0; }
.bpost__link { font: 600 16px/1.4 Inter, sans-serif; color: #00805f; text-decoration: none; }
.bpost__end { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              padding-top: 18px; border-top: 1px solid rgba(0,0,0,.07); }
.bpost__back { font: 600 16px/1.3 Inter, sans-serif; color: #00805f; text-decoration: none; }
.bpost__share { border: 0; background: none; cursor: pointer; padding: 0;
                font: 400 12px/1.3 Inter, sans-serif; color: #656772; }
.bpost__share:hover { color: #101828; }

@media (max-width: 1100px) {
  .scontact, .locdetail, .sgenie { flex-direction: column; }
  .scontact__d { flex: 0 0 auto; width: 100%; }
  .sgenie__art { flex: 0 0 auto; max-width: 100%; }
  .sfaqitem { flex-direction: column; }
  .sfaqitem__img { flex: 0 0 auto; width: 100%; }
}

/* ---------- Capacity Chart — `Tools - Capacity Chart - Desktop` 17816:126568
   Content gap 36 between sections, 14 inside one. The anchor row is three
   SQUARE 36-tall boxes on a #00805F @ 7% ground with a 14 Semi Bold green
   label, gap 10. Each chart is a white r8 card, 1px #000@15% INSIDE, 20px
   padding, no shadow, artwork centred.
*/
.sanchors { gap: 10px; }
.spage .sanchor {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 0; background: var(--wrc-green-7, rgba(0, 128, 95, .07));
  box-shadow: none; font-size: 14px; font-weight: 600; color: #00805f;
}
.spage .sanchor:hover { background: rgba(0, 128, 95, .14); box-shadow: none; }

.ssec--chart { gap: 14px; }
.schart {
  display: flex; flex-direction: column; align-items: center; gap: 35px;
  padding: 20px; border-radius: var(--radius-md); background: var(--white);
  box-shadow: inset 0 0 0 1px var(--black-15);
}
.schart img { max-width: 100%; height: auto; display: block; }