/* GW Why Us — Figma 32:2100 (desktop 1440) / 32:2213 (mobile 390).
   Mobile-first: base = mobile 390 exact, >=768 fluid tablet (still stacked,
   cards still rows), >=1025 desktop 1440 exact (50/50 row + 2x2 card grid).
   Colours are design literals reaching CSS as --gw-why-* from the scoped
   <style>; every one has its Figma value as the var() fallback, so the
   section renders correctly even with all colour settings blank.
   line-height is `normal` throughout: every Figma text node emits
   leading-[normal], NOT the lineHeight:100 carried in the style definitions.
   Border-radius is 0 everywhere — the frames emit none on any node.
   ONE square 1080x1080 photo serves both crops through object-position
   alone (center 89.6% desktop / center center mobile), so the merchant
   uploads a single swappable image — the gw-collective-pricing precedent. */
.gw-why-us{padding:64px 16px;background-color:var(--gw-why-bg,transparent)}
.gw-why-us__wrap{display:flex;flex-direction:column;gap:32px;width:100%;max-width:1344px;margin-inline:auto}
.gw-why-us__media{order:-1;flex:0 0 auto;width:100%;overflow:clip}
.gw-why-us__media-img{display:block;width:100%;height:100%;aspect-ratio:358/412;object-fit:cover;object-position:center center}
.gw-why-us__copy{display:flex;flex-direction:column;gap:32px;min-width:1px;overflow:hidden}
.gw-why-us__head{display:flex;flex-direction:column;gap:12px}
.gw-why-us__eyebrow{width:auto;margin:0;font-size:14px;font-weight:600;line-height:normal;letter-spacing:2.52px;text-transform:uppercase;color:var(--gw-why-eyebrow-color,#a88e57)}
.gw-why-us__titles{display:flex;flex-direction:column;gap:16px}
.gw-why-us__heading{margin:0;font-size:40px;font-weight:400;line-height:normal;letter-spacing:0;text-transform:capitalize;color:var(--gw-why-heading-color,#242424)}
.gw-why-us__intro{margin:0;font-size:16px;font-weight:400;line-height:normal;letter-spacing:0;color:var(--gw-why-intro-color,#3c3c3c)}
.gw-why-us__cards{display:grid;grid-template-columns:1fr;gap:12px}
.gw-why-us__card{display:flex;flex-direction:row;align-items:center;gap:16px;box-sizing:border-box;padding:24px 12px;overflow:clip;background-color:var(--gw-why-card-bg,#fdfaf4)}
.gw-why-us__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;overflow:clip}
.gw-why-us__icon-img{display:block;width:100%;height:100%;object-fit:contain}
.gw-why-us__text{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1 0 0;min-width:1px;text-align:left}
.gw-why-us__title{margin:0;font-size:18px;font-weight:400;line-height:normal;letter-spacing:0;color:var(--gw-why-card-text-color,#242424)}
.gw-why-us__desc{margin:0;font-size:16px;font-weight:400;line-height:normal;letter-spacing:0;color:var(--gw-why-card-text-color,#242424)}
.gw-why-us__placeholder{width:100%;padding:24px;font-size:14px;line-height:21px;text-align:center;color:#6a5632;background-color:#fdfaf4;outline:1px dashed #a88e57;outline-offset:-1px}
@media screen and (min-width:768px){
.gw-why-us{padding:clamp(64px,8vw,96px) clamp(24px,5vw,48px)}
.gw-why-us__heading{font-size:clamp(40px,3.6vw,48px)}
.gw-why-us__media-img{aspect-ratio:16/10}
}
@media screen and (min-width:1025px){
.gw-why-us{padding:96px 48px}
/* The content row is the 50/50 split: copy 656 | image 656, gap 32. Both
   children are flex:1 0 0 and the row stretches, so the copy column takes
   the image's height and its own space-between drops the design's 43px
   residual between the header block and the card grid. */
.gw-why-us__wrap{flex-direction:row;align-items:stretch;gap:32px}
.gw-why-us__media{order:1;flex:1 0 0;min-width:1px}
.gw-why-us__media-img{aspect-ratio:656/547;object-position:center 89.6%}
.gw-why-us__copy{flex:1 0 0;justify-content:space-between;gap:43px}
/* Reproduced from the frame exactly, by request: the 522px title holds one
   line and the copy column's own overflow:hidden clips it rather than
   letting it push the layout — the Figma container carries that same clip. */
.gw-why-us__heading{font-size:48px;text-transform:none;white-space:nowrap}
/* 2x2: a two-column grid needs no row wrappers in the Liquid, and grid
   rows stretch by default — so each PAIR equalises to its taller
   description (the frame draws 181 then 160), which a single flex column
   of four could not do. */
.gw-why-us__cards{grid-template-columns:1fr 1fr}
.gw-why-us__card{flex-direction:column;align-items:center;padding:24px;gap:12px}
.gw-why-us__icon{width:48px;height:48px}
.gw-why-us__text{flex:0 1 auto;text-align:center}
}