/* ==========================================================================
   web.css — storefront
   MEASURED off `Home - Desktop` 15592:7229 and `Web/Header` 16987:54988
   Gutter 185 · content 1550 · header 212 (37 + 107 + 68) · footer 675
   ========================================================================== */

.web { display: flex; flex-direction: column; min-height: 100vh; background: var(--grey-light); }
/* The header, nav and footer are full-width bands padded by --web-gutter,
   so the content has to be padded the same way. It used to be a fixed 1551
   centred, which only lines up with the chrome at the 1920 design width and
   drifts at every other size. At 1920 both give the same 1550 column. */
.wwrap { width: auto; margin: 0; padding: 0 var(--web-pad); }
.wmainarea { flex: 1 1 auto; padding: 0 0 64px; }

/* ---------- header ------------------------------------------------------- */
.whead { background: var(--white); position: sticky; top: 0; z-index: 40; }

.wtop {
  display: flex; align-items: center; gap: 36px;
  height: 37px; padding: 10px var(--web-pad);
  border-bottom: 1px solid var(--black-7);
}
.wtop__contact { display: flex; gap: 24px; flex: none; }
.wtop__contact a, .wtop__contact .wtop__ci {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--text-medium); position: relative;
}
.wtop__contact a:hover, .wtop__contact .wtop__ci:hover { color: var(--wrc-green); }
.wtop__contact svg { color: var(--text-light); }
.wtop__promo { position: relative; flex: 1 1 auto; overflow: hidden; height: 17px; }
.wtop__strip {
  display: flex; align-items: center; white-space: nowrap;
  font-size: 14px; color: var(--text-medium);
  animation: wmarquee 44s linear infinite;
}
.wtop__gap { display: inline-block; width: 36px; }
.wtop__fade {
  position: absolute; right: 0; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
}
@keyframes wmarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .wtop__strip { animation: none } }

.wmain {
  display: flex; align-items: center; gap: 24px;
  height: 107px; padding: 24px var(--web-pad);
}
.wmain__logo { flex: none; display: block; }
.wlogo { display: block; }

.wsearch {
  flex: 1 1 auto; display: flex; align-items: center; height: 50px;
  border: 1px solid var(--grey-medium-blue); border-radius: var(--radius-md);
  background: var(--white); padding: 0 6px 0 16px; gap: 10px;
}
.wsearch:focus-within { border-color: var(--wrc-green); }

/* ---------- search typeahead --------------------------------------------
   Figma draws no suggestions panel, so this is built from parts the
   storefront already uses: the order card's 56x42 r6 thumbnail, the meta
   grey for the part number, the brand green for price, and the same 1px
   #000@15% hairline as the rest of the chrome.                            */
.wsearch, .wmsearch__f { position: relative; }
.wsug { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 60;
        max-height: min(60vh, 420px); overflow-y: auto;
        border-radius: 8px; background: #fff;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 18px 40px -12px rgba(0, 0, 0, .25); }
.wsug__i { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
           text-decoration: none; }
.wsug__i:hover { background: #f8f8f8; }
.wsug__th { flex: 0 0 56px; width: 56px; height: 42px; border-radius: 6px;
            background: #f0f0f0 center/cover no-repeat; }
.wsug__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsug__t strong { font: 500 14px/1.3 Inter, sans-serif; color: #101828;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsug__t span { font: 400 11px/1.28 Inter, sans-serif; color: #656772; }
.wsug__p { flex: 0 0 auto; font: 600 14px/1.28 Inter, sans-serif; color: #00805f; }
.wsug__none { padding: 16px 14px; margin: 0;
              font: 400 13px/1.4 Inter, sans-serif; color: #656772; }
.wsug__all { display: flex; align-items: center; justify-content: center; gap: 8px;
             width: 100%; height: 46px; border: 0; cursor: pointer; background: #f8f8f8;
             box-shadow: inset 0 1px 0 rgba(0, 0, 0, .07);
             font: 600 13px/1 Inter, sans-serif; color: #00805f; }
.wsug__all:hover { background: #f0f0f0; }
.wsug__all svg { stroke: currentColor; }
.wsearch input {
  flex: 1 1 auto; border: 0; outline: 0; background: none;
  font: inherit; font-size: 14px; color: var(--text-dark);
}
.wsearch input::placeholder { color: var(--text-light); }
.wsearch__btn {
  width: 44px; height: 36px; flex: none; border-radius: var(--radius-sm);
  background: var(--wrc-green); color: #fff; display: grid; place-items: center;
}
.wsearch__btn:hover { background: var(--wrc-green-dark); }

.wacts { display: flex; align-items: flex-start; gap: 16px; flex: none; }
.wact {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-medium);
}
.wact:hover { color: var(--wrc-green); }
.wact__i { position: relative; display: block; }
.wact__l { font-size: 12px; }
.wact__badge {
  position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--radius-full); background: var(--wrc-orange);
  color: #fff; font-size: 10px; font-weight: 600; font-style: normal;
  display: grid; place-items: center;
}

.wnav {
  display: flex; align-items: center; gap: 36px;
  height: 68px; padding: 16px var(--web-pad);
  background: var(--wrc-green);
}
.wnav__all {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: 32px; padding: 0 16px 0 14px; border-radius: var(--radius-sm);
  color: #fff; font-size: 15px; font-weight: 600;
}
.wnav__all:hover { background: rgba(255, 255, 255, .07); }
.wnav__links { display: flex; align-items: center; gap: 0; margin-left: auto; }
.wnav__l {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  color: #fff; font-size: 14px; font-weight: 400; background: none; white-space: nowrap;
}
.wnav__l.is-active { background: rgba(255, 255, 255, .14); }
.wnav__l:hover  { background: rgba(255, 255, 255, .07); }
.wnav__l:active { background: rgba(0, 0, 0, .15); }
.wnav__liq {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  margin-left: 8px; border-radius: var(--radius-sm);
  background: var(--wrc-orange); color: #fff; font-size: 14px; font-weight: 400;
}
.wnav__liq:hover  { background-image: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)); }
.wnav__liq:active { background-image: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)); }

/* Web/Contact Hover State=Open — a 221x130 popover of branch phone numbers. */
.wtop__ci { cursor: default; }
.wtop__pop {
  position: absolute; top: 100%; left: -10px; z-index: 45; width: 221px;
  padding: 18px 14px 10px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-7);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
  display: none; flex-direction: column;
}
/* No margin — the 8px of air is padding INSIDE the panel, so the pointer stays
   over the trigger's subtree the whole way down and the panel never flickers. */
.wtop__ci.is-open .wtop__pop,
.wtop__ci:hover .wtop__pop,
.wtop__ci:focus-within .wtop__pop { display: flex; }
.wtop__bphone { cursor: pointer; }
.wtop__bphone:hover { text-decoration: underline; }
.wtop__branch { display: flex; align-items: center; gap: 10px; height: 26px; padding: 4px 0; }
.wtop__bcity { flex: 0 0 84px; font-size: 13px; font-weight: 400; color: var(--text-light); }
.wtop__bphone { font-size: 14px; font-weight: 500; color: var(--text-dark); }

/* ---------- rows --------------------------------------------------------- */
.wrow { display: flex; flex-direction: column; gap: 26px; margin-top: 64px; }
.wrow--34 { gap: 34px; }
.wrow--29 { gap: 29px; }
.wrow:first-child { margin-top: 0; }

.wsec { display: flex; align-items: flex-end; gap: 24px; }
.wsec__t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.wsec__t h2 { font-size: 30px; font-weight: 400; color: var(--text-dark); line-height: 1.2; }
.wsec__t p { font-size: 16px; color: var(--text-light); }
.wsec__all {
  flex: none; display: inline-flex; align-items: center; gap: 0;
  font-size: 15px; font-weight: 500; color: var(--text-dark);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.wsec__all svg { flex: none; }
.wsec__all:hover { color: var(--wrc-green); border-bottom-color: var(--wrc-green); }

/* ---------- banner -------------------------------------------------------
   `Web/Banner Row` 17086:40676 — 1551 wide, HORIZONTAL, gap 16, holding
   Web/Banner 1028x476 (image 1028x411 + a 65 controls strip in FLOW below it,
   pad 13/16/12/16) and a 507-wide promos column of two 507x230 cards whose
   controls are ABSOLUTE, inset 12 left/right/bottom, 40 tall.

   The two columns are a 1028:507 RATIO, not two fixed widths. As fixed
   flex-bases they summed to 1551 — the frame's content width — so on any
   narrower wrap the promo column pushed past the wrapper and, with nothing
   clipping it, took the whole page into horizontal scroll. A grid of
   `1028fr 507fr` holds the same proportion at every width and cannot
   overflow. Both images then carry the ratios the frame locks by name:
   the banner is "image · AR 5:2 LOCKED" 1028x411 and the promo is
   "image · AR 11:5 LOCKED" 507x230.

   The 10px above the row is the frame's own: `Web/Header` is ABSOLUTE at y0
   and the page reserves paddingTop 222 for a 212.22-tall header.            */
.wbanner {
  display: grid; grid-template-columns: 1028fr 507fr; gap: 16px;
  align-items: start; height: auto;
}
.wbanner > * { min-width: 0; }
/* The banner is the first .wrow, and the generic `.wrow:first-child` reset
   above would zero this out — hence the extra class to outrank it. */
.wbanner.wrow:first-child { margin-top: 10px; }

.wcarousel {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
}
.wcarousel__img {
  flex: none; display: block; aspect-ratio: 1028 / 411;
  background-size: cover; background-position: center; background-color: var(--grey-light);
}
.wcarousel__ctl {
  height: 65px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 12px;
}
.wdots { display: flex; align-items: center; }
.wdots--big { flex: 1 1 auto; gap: 14px; }
.wdots--sm  { gap: 6px; }
.wdot {
  width: 9px; height: 9px; flex: none; border-radius: 2px;
  background: var(--black-15); padding: 0; border: 0;
}
.wdot.is-on { background: var(--wrc-orange); }
.wdots--sm .wdot { background: var(--white-75); }
.wdots--sm .wdot.is-on { background: var(--wrc-orange); }

.wcarousel__nav { display: flex; gap: 9px; flex: none; }
.wcarousel__nav button {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--wrc-orange-7); color: var(--wrc-orange);
  display: grid; place-items: center; border: 0;
}
.wcarousel__nav button:hover { background: var(--wrc-orange-20); }

.wpromos { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
/* 507x230 — the image IS the card, and it keeps its ratio rather than
   stretching to whatever height the banner beside it happens to be. */
.wpromo { position: relative; flex: none; aspect-ratio: 507 / 230;
          border-radius: var(--radius-md); overflow: hidden; }
.wpromo__img {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: center; background-color: var(--grey-light);
}
.wpromo__ctl {
  position: absolute; left: 12px; right: 12px; bottom: 12px; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.wpromo__nav {
  display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-md);
  background: var(--white);
}
.wpromo__nav button {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--wrc-orange-7); color: var(--wrc-orange);
  display: grid; place-items: center; border: 0;
}
.wpromo__nav button:hover { background: var(--wrc-orange-20); }

/* `Slider` closes every carousel row on the phone; the desktop rows use
   their own dots + arrows instead. */
.wslider { display: none; }

.wfeat__nav { display: flex; gap: 9px; }
.wfeat__nav button {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  border: 1px solid var(--black-15); background: var(--white);
  display: grid; place-items: center; color: var(--text-medium);
}
.wfeat__nav button:hover:not(:disabled) { border-color: var(--wrc-green); color: var(--wrc-green); }
.wfeat__nav button:disabled { opacity: .35; cursor: default; }

/* Web/Eyebrow: 95x34 r999 #d9ece7, label 14 Inter Medium #00805f, no tracking. */
.weyebrow {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: var(--radius-full); background: var(--wrc-green-light);
  color: var(--wrc-green); font-size: 14px; font-weight: 500; letter-spacing: 0;
}
.weyebrow--dark { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- category grid ------------------------------------------------ */
.wcats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.wcats > * { min-width: 0; }
/* Web/Category Card 245x239 r10, 1px #000@7% INSIDE (a real border is
   legal here — the card is fixed on both axes), gap 14, label centred.
   The frame declares paddingBottom 20 but pins the card to 239 and
   clips, so what renders under the label is 10.4. */
.wcat {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 10px; gap: 14px;
  border: 1px solid var(--black-7);
}
.wcat:hover { box-shadow: 0 8px 24px rgba(16,24,40,.10); transform: translateY(-2px); }
.wcat { transition: box-shadow .14s, transform .14s; }
/* A fixed height is only the right ratio at the frame's exact card width.
   The frame draws 245 x 192.622 (1.272); locked to 4:3 to match every
   other image on the site. */
.wcat__img { display: block; aspect-ratio: 4 / 3;
             background-size: cover; background-position: center; }
.wcat__n { padding: 0 16px; font-size: 18px; font-weight: 500; color: var(--text-medium); }

/* ---------- cards (liquidations + products) ------------------------------ */
.wliqs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.wprods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.wcard {
  background: var(--white); border: 1px solid var(--black-7);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 12px; gap: 10px;
  transition: box-shadow .14s, transform .14s;
}
.wcard:hover { box-shadow: 0 8px 24px rgba(16,24,40,.10); transform: translateY(-2px); }
.wcard__img {
  position: relative; display: block; height: 183px;
  background-size: cover; background-position: center; background-color: var(--grey-light);
}
.wtag {
  position: absolute; top: 12px; left: 12px; height: 20px; padding: 0 8px;
  border-radius: var(--radius-full); background: var(--white-75);
  backdrop-filter: blur(2px); color: var(--text-medium);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center;
}
.wtag--new  { background: var(--wrc-green); color: #fff; }
/* Liquidation urgency badge — Figma `label`: r999 solid #e55a33, h26, pad 7/14,
   text 10 Inter Medium #fff. Scoped so the product cards keep the shared pill. */
.wliqs .wtag, .wtag--expiry {
  height: 26px; padding: 0 14px; background: var(--wrc-orange);
  backdrop-filter: none; color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0;
}
.wtag--used { background: var(--dark-strong); color: #fff; }
.wcard__d { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.wcard__pn { font-size: 10.5px; color: var(--text-light); letter-spacing: .02em; }
.wcard__t {
  font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Figma's liquidation title is 18 Inter Medium #101828, one line, ellipsised. */
.wliqs .wcard__t, .wprods .wcard__t {
  font-size: 18px; font-weight: 500; line-height: 1.28;
  display: block; white-space: normal; overflow: visible;
}
.wliqs .wcard__m, .wprods .wcard__m {
  font-size: 14px; font-weight: 500; color: var(--text-light);
}
.wcard__m { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-light); }
.wcard__p { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--wrc-green); }
.wcard__was { text-decoration: line-through; color: var(--black-25); }

.wliqstats { display: flex; gap: 12px; }
.wliqstat {
  flex: 1 1 0; padding: 12px; border-radius: var(--radius-md); background: var(--grey-light);
  display: flex; flex-direction: column; gap: 3px;
}
.wliqstat .k { font-size: 10px; color: var(--text-light); letter-spacing: .03em; }
.wliqstat .v { font-size: 17px; font-weight: 700; color: var(--text-dark); }

/* ---------- featured carousel -------------------------------------------
   Figma: a 1550 clipping window over a 1712 track of 272px item-cards, gap 16,
   so the sixth card is a deliberate half-cut peek. Five dots, one per step.  */
.wfeat { display: flex; flex-direction: column; }
.wfeat__view { overflow: hidden; width: 100%; }
.wfeat__track { display: flex; gap: 16px; transition: transform .25s ease; }
.wfeat__ctl { display: flex; align-items: center; gap: 16px; padding: 20px 0 8px; }
.wfeat__ctl .wdots { flex: 1 1 auto; gap: 6px; }
.wfeat__nav {
  display: flex; align-items: center; gap: 6px; padding: 4px;
  border-radius: var(--radius-md); background: var(--white);
}
.wfeat__nav button {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 0;
  background: var(--wrc-orange-7); color: var(--wrc-orange);
  display: grid; place-items: center;
}
.wfeat__nav button:hover:not(:disabled) { background: var(--wrc-orange-20); }
.wfeat__nav button:disabled { opacity: .35; cursor: default; }

/* ---------- item card (Featured Products) -------------------------------- */
.icard {
  flex: 0 0 272px; width: 272px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--white); border: 1px solid var(--black-15);
  border-radius: var(--radius-xl);
}
.icard__img {
  display: block; height: 180px; border-radius: var(--radius-md);
  background-size: cover; background-position: center; background-color: var(--grey-light);
}
.icard__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.icard__chip {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px;
  border-radius: var(--radius-full); background: var(--grey-strong);
  font-size: 10px; font-weight: 600; color: var(--text-light);
}
.icard__k { font-size: 10px; font-weight: 500; color: var(--text-light); }
.icard__v { font-size: 10px; font-weight: 500; color: var(--text-medium);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icard__t {
  font-size: 18px; font-weight: 500; color: var(--text-dark); line-height: 1.28;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icard__t:hover { color: var(--wrc-green); }
.icard__d { font-size: 12px; color: var(--text-light); }
.icard__prices { display: flex; align-items: baseline; gap: 10px; }
.icard__was { font-size: 13px; color: var(--text-light); }
.icard__p { font-size: 24px; font-weight: 400; color: var(--wrc-orange); }
.icard__sites { display: flex; flex-wrap: wrap; gap: 8px; }
.icard__site {
  height: 30px; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--grey-medium-blue);
  font-size: 13px; color: var(--text-dark);
}
.icard__site.is-on { background: var(--wrc-green-dark); border-color: var(--wrc-green-dark); color: #fff; }
.icard__qty { display: flex; align-items: center; gap: 8px; }
.icard__step {
  display: flex; align-items: center; height: 36px; width: 96px;
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--black-15);
}
.icard__step button {
  width: 30px; height: 36px; flex: none; background: var(--grey-light);
  color: var(--text-medium); display: grid; place-items: center; border: 0;
}
.icard__step button:hover { background: var(--grey-medium); }
.icard__qv { flex: 1 1 auto; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-dark); }
.icard__ib {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-15);
  color: var(--text-light); display: grid; place-items: center;
}
.icard__ib:hover { color: var(--wrc-green); border-color: var(--wrc-green); }
.icard__add { height: 44px; border-radius: var(--radius-lg); font-size: 16px; }

/* ---------- quote genie --------------------------------------------------
   Panel 1551x409 r10 on #101828 with a full-bleed photo at 40%; hero inset
   x96, centred; artwork 503x358 at top 26 / right 60.                      */
.wgenie {
  position: relative; margin-top: 64px; min-height: 409px;
  background: var(--text-dark); border-radius: var(--radius-lg); overflow: hidden;
}
.wgenie__bg {
  position: absolute; inset: 0; opacity: .40;
  background-size: cover; background-position: center;
}
.wgenie__c {
  position: relative; min-height: 409px; max-width: 765px;
  padding: 56px 56px 56px 96px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  color: #fff;
}
.wgenie__c h2 { font-size: 60px; font-weight: 400; line-height: 1.2; }
.wgenie__c p {
  margin-top: 20px; font-size: 20px; font-weight: 500; line-height: 1.2; color: #d1d5dc;
}
.wgenie__c .row { margin-top: 36px; }
.wgenie__img {
  position: absolute; top: 26px; right: 60px; width: 503px; height: 358px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ---------- about -------------------------------------------------------- */
.wabout {
  margin-top: 24px; display: flex; gap: 32px; padding: 32px 36px;
  background: var(--white); border-radius: var(--radius-lg);
}
.wabout__c { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.wabout__c h2 { font-size: 36px; font-weight: 400; color: var(--text-dark); line-height: 1.28; }
.wabout__c p { font-size: 18px; font-weight: 400; line-height: 1.28; color: #4a5565; }

/* three check-circle feature rows, gap 16, row gap 10, text column gap 4 */
.wfeatures { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.wfeature { display: flex; align-items: flex-start; gap: 10px; }
.wfeature > svg { flex: none; color: var(--wrc-green); margin-top: 1px; }
.wfeature__t { gap: 4px; }
.wfeature__t strong { font-size: 18px; font-weight: 500; color: var(--text-dark); line-height: 1.28; }
.wfeature__t span { font-size: 16px; font-weight: 400; color: #364153; line-height: 1.28; }

.wabout__r { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; padding-top: 54px; }
.wabout__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wabout__stat {
  min-height: 174px; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--black-15);
}
.wabout__static {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-lg);
  background: var(--wrc-orange-light); color: var(--wrc-orange);
  display: grid; place-items: center;
}
.wabout__statt { gap: 4px; }
.wabout__statt strong { font-size: 30px; font-weight: 400; color: var(--text-dark); line-height: 1.28; }
.wabout__statt span { font-size: 16px; font-weight: 400; color: #364153; line-height: 1.28; }

.wcallout {
  padding: 44px; border-radius: var(--radius-lg); background: var(--dark-strong);
  color: #fff; display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.wcallout h3 { font-size: 30px; font-weight: 400; line-height: 1.28; }
.wcallout p { font-size: 18px; font-weight: 400; line-height: 1.28; }

/* ---------- trust bar ---------------------------------------------------- */
/* Figma stroke is bottom-only #e5e7eb; chips are orange, not green. */
.wtrust {
  margin-top: 24px; display: flex; gap: 32px; padding: 24px 36px;
  background: var(--white); border-radius: var(--radius-lg);
  border: 0; border-bottom: 1px solid var(--grey-medium-blue);
}
.wtrust__i { flex: 1 1 0; display: flex; align-items: flex-start; gap: 16px; }
.wtrust__ic {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-lg);
  background: var(--wrc-orange-light); color: var(--wrc-orange);
  display: grid; place-items: center;
}
.wtrust__ic svg { color: var(--wrc-orange); stroke: var(--wrc-orange); }
.wtrust__i .col { gap: 4px; }
.wtrust__i strong { font-size: 16px; font-weight: 400; line-height: 1.28; color: var(--text-dark); }
.wtrust__i span { font-size: 14px; font-weight: 400; line-height: 1.28; color: #364153; }

/* ---------- footer -------------------------------------------------------
   MEASURED off `Web/Footer`: pad 40/185/24, gap 28; seven Web/Location Group
   cards 209.4x228 r10 on #fff@7% pad 12 gap 12 (photo 185.4x90 r6, green r4
   role badge, phone 14 Semi Bold, address 12.5 @75%, SHOW ON MAP 10 @35%);
   four Central America cells 375.5 wide; legal bar 13 with payment marks.  */
.wfoot {
  background: var(--dark-strong); color: #fff;
  padding: 40px var(--web-pad) 24px;
  display: flex; flex-direction: column; gap: 28px;
}
.wfoot__brand { display: flex; align-items: center; gap: 24px; }
.wfoot__bleft { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; }
.wfoot__tag { font-size: 15px; font-weight: 600; color: #fff; }
.wfoot__social { display: flex; gap: 16px; }
.wfoot__social a { color: rgba(255, 255, 255, .75); line-height: 0; }
.wfoot__social a:hover { color: #fff; }

.wfoot__nl { display: flex; align-items: center; gap: 40px; }
.wfoot__nltext { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.wfoot__nltext h4 { font-size: 18px; font-weight: 600; }
.wfoot__nltext p { font-size: 14px; color: rgba(255, 255, 255, .75); }
.wfoot__form { flex: 0 0 600px; display: flex; gap: 10px; }
.wfoot__form input {
  flex: 1 1 auto; height: 44px; padding: 0 16px; border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07);
  color: #fff; font: inherit; font-size: 14px;
}
.wfoot__form input::placeholder { color: rgba(255, 255, 255, .35); }
.wfoot__form .btn { height: 44px; padding: 0 26px; font-size: 14px; font-weight: 500; }
.wfoot__rule { height: 1px; background: rgba(255, 255, 255, .07); }

.wfoot__locs { display: flex; flex-direction: column; gap: 12px; }
.wfoot__lab {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; color: rgba(255, 255, 255, .35);
}
.wfoot__cities { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.wfoot__city {
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
  border-radius: var(--radius-lg); background: rgba(255, 255, 255, .07);
}
/* Web/Title S is variable-bound — 15 on desktop, 14 on mobile — over a
   128% line box, and the card's own 12px padding is the only space above it. */
.wfoot__city h5 { font-size: 15px; font-weight: 600; line-height: 1.28; color: #fff; }
.wfoot__site { display: flex; flex-direction: column; gap: 8px; }
/* the site photo is FILL wide and a FIXED 90 tall — 148x90 is 74:45 on the
   mobile frame, not a ratio, so the height is what is pinned. */
.wfoot__photo {
  position: relative; display: block; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background-size: cover; background-position: center; background-color: rgba(255, 255, 255, .06);
}
/* the title and the photo are the same link, so they light up together */
.wfoot__ct { color: inherit; }
.wfoot__ct:hover { text-decoration: underline; }
.wfoot__photo:hover { opacity: .85; }
.wfoot__badge {
  position: absolute; top: 8px; left: 8px; padding: 3px 8px;
  border-radius: var(--radius-xs); background: var(--wrc-green);
  font-size: 8px; font-weight: 600; color: #fff; white-space: nowrap;
}
.wfoot__phone { font-size: 14px; font-weight: 600; color: #fff; }
.wfoot__caphone { font-size: 14px; font-weight: 500; color: #fff; }
.wfoot__addr { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .75); }
.wfoot__map {
  display: flex; align-items: center; gap: 5px; line-height: 0;
  font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .35);
}
.wfoot__map:hover { color: rgba(255, 255, 255, .7); }
.wfoot__map span { line-height: 1; }

.wfoot__ca { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.wfoot__cagrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wfoot__cacell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.wfoot__country { font-size: 15px; font-weight: 600; color: #fff; }
.wfoot__cacell .wfoot__addr { font-size: 12px; }

.wfoot__legal {
  display: flex; align-items: center; gap: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px;
}
.wfoot__legal > span { flex: 1 1 auto; color: rgba(255, 255, 255, .35); }
.wfoot__llinks { display: flex; align-items: center; gap: 18px; }
.wfoot__llinks a { color: rgba(255, 255, 255, .75); }
.wfoot__llinks a:hover { color: #fff; text-decoration: underline; }
.wfoot__pay { display: flex; gap: 8px; }
/* Figma's own Web/Payment Methods artwork — plate and mark are in the SVG. */
.wfoot__card { display: block; width: 40px; height: auto; }

/* ---------- responsive gutter ------------------------------------------- */
/* --web-gutter is the minimum breathing room at the screen edge. --web-pad is
   what everything actually uses: the same gutter until the content would grow
   past --web-max, then whatever is needed to centre a --web-max column.

   One value, read by the top bar, the main row, the nav, the footer, the
   subpage hero AND .wwrap — so the chrome and the content cannot drift apart,
   which is exactly what the old fixed-width column got wrong.

   Engages at 2510 (185 gutter each side + 2140). Below that nothing changes:
   at 1920 the padding is still 185 and the column still 1550. */
:root {
  --web-gutter: 185px;
  --web-max: 2140px;
  /* the padding needed to centre a --web-max column; negative (so harmless
     inside max()) until the viewport is wider than the cap */
  --web-cap: calc((100% - var(--web-max)) / 2);
  --web-pad: max(var(--web-gutter), var(--web-cap));
}
@media (max-width: 1600px) { :root { --web-gutter: 80px; } }
@media (max-width: 1500px) {
  .wfoot__cities { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1280px) {
  :root { --web-gutter: 32px; }
  .wcats, .wliqs, .wprods { grid-template-columns: repeat(4, 1fr); }
  .wbanner { grid-template-columns: 1fr; }
  /* the two promos sit side by side once the column is full width */
  .wpromos { flex-direction: row; }
  .wpromos > * { flex: 1 1 0; }
  .wgenie__c { padding: 40px; max-width: none; }
  .wgenie__img { position: static; width: 100%; height: 260px; margin: 0 0 32px; }
  .wabout { flex-direction: column; }
  .wabout__r { padding-top: 0; }
  .wabout__stats { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wcats, .wliqs, .wprods { grid-template-columns: repeat(2, 1fr); }
  .wtrust { flex-wrap: wrap; }
  .wtrust__i { flex: 1 1 40%; }
  .wfoot__cities { grid-template-columns: 1fr 1fr; }
  .wfoot__cagrid { grid-template-columns: 1fr 1fr; }
  .wnav__links { display: none; }
}