/* Workspace48 — Sustainability landing pattern
   Every rule is scoped under .ws48s-page (the pattern's outer wrapper), and
   variables live on that wrapper, so nothing here can affect other pages or
   other WS48 pattern plugins. */

.ws48s-page{
  --ws48s-rust:#b5513a;
  --ws48s-rust-dark:#9a4230;
  --ws48s-ink:#141414;
  --ws48s-text:#3a3a3a;
  --ws48s-cream:#f3efe9;
  --ws48s-cream-2:#f8f6f2;
  --ws48s-navy:#1f4e6b;
  --ws48s-navy-2:#3f7397;
  --ws48s-line:#e2ddd5;
  --ws48s-max:1180px;
  --ws48s-gutter:clamp(16px,5cqw,52px);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ws48s-text);line-height:1.5;
  padding:0 !important;
  container-type:inline-size;container-name:ws48s;
}
.ws48s-page *,.ws48s-page *::before,.ws48s-page *::after{box-sizing:border-box}
.ws48s-page > *{margin-block-start:0 !important;margin-block-end:0 !important;max-width:none !important}
.ws48s-page :where(h1,h2,h3){color:var(--ws48s-ink);letter-spacing:-.02em;line-height:1.05;font-weight:700;margin:0;font-family:inherit}
.ws48s-page p{margin:0}

/* ---------- Shared type ---------- */
.ws48s-page .ws48s-eyebrow{font-size:13px !important;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ws48s-ink);margin-bottom:18px !important}
.ws48s-page .ws48s-dot{color:var(--ws48s-rust)}
.ws48s-page .ws48s-display{font-size:clamp(40px,5.2cqw,64px) !important;margin-bottom:28px !important}
.ws48s-page .ws48s-h2{font-size:clamp(34px,4.2cqw,50px) !important;margin-bottom:32px !important}
.ws48s-page .ws48s-h2--sm{font-size:clamp(32px,3.6cqw,44px) !important;margin-bottom:24px !important}
.ws48s-page .ws48s-h3{font-size:18px !important;letter-spacing:-.01em !important;margin-bottom:6px !important}
.ws48s-page .ws48s-intro{font-size:17px;max-width:420px;margin-bottom:32px !important}
.ws48s-page .ws48s-lead{font-size:19px;max-width:420px}

/* ---------- Buttons & links ---------- */
.ws48s-page .ws48s-btn .wp-block-button__link{background:var(--ws48s-rust);color:#fff;border-radius:2px;font-size:15px;font-weight:500;padding:14px 22px;transition:background .2s}
.ws48s-page .ws48s-btn .wp-block-button__link:hover{background:var(--ws48s-rust-dark);color:#fff}
.ws48s-page .ws48s-btn--lg .wp-block-button__link{padding:18px 32px}
.ws48s-page .ws48s-link a{color:var(--ws48s-rust);font-weight:500;text-decoration:none}
.ws48s-page .ws48s-link a:hover{color:var(--ws48s-rust-dark)}
.ws48s-page .ws48s-link--underline a{border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- Full-bleed split sections (hero + materials) ---------- */
.ws48s-page .ws48s-split-wrap{padding:0 !important}
.ws48s-page .ws48s-split{gap:0 !important;margin:0 !important;align-items:stretch !important}
.ws48s-page .ws48s-split > .wp-block-column{flex-basis:50% !important;width:auto !important;min-width:0}
.ws48s-page .ws48s-media{position:relative;min-height:340px}
.ws48s-page .ws48s-media .wp-block-image{position:absolute;inset:0;margin:0}
.ws48s-page .ws48s-media .wp-block-image img{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#d9cfc2,#b9a998)}
.ws48s-page .ws48s-split-copy{padding:80px var(--ws48s-gutter)}
.ws48s-page .ws48s-split-copy--left{padding-left:calc(var(--ws48s-gutter) + max(0px,(100cqw - 2 * var(--ws48s-gutter) - var(--ws48s-max)) / 2))}
.ws48s-page .ws48s-split-copy--right{padding:64px var(--ws48s-gutter) 64px clamp(32px,5cqw,52px)}

.ws48s-page .ws48s-hero{background:var(--ws48s-cream)}
.ws48s-page .ws48s-hero .ws48s-split{min-height:600px}
.ws48s-page .ws48s-hero .ws48s-intro{max-width:400px;margin-bottom:36px !important}

/* ---------- Stats ---------- */
.ws48s-page .ws48s-stats{background:#fff;padding:36px var(--ws48s-gutter) !important}
.ws48s-page .ws48s-stats-grid{gap:0 !important;margin:0 auto !important;max-width:var(--ws48s-max)}
.ws48s-page .ws48s-stat{text-align:center;padding:12px 16px}
.ws48s-page .ws48s-stat + .ws48s-stat{border-left:1px solid var(--ws48s-line)}
.ws48s-page .ws48s-stat-num{font-size:clamp(32px,3.6cqw,46px) !important;font-weight:700;color:var(--ws48s-ink);letter-spacing:-.03em;line-height:1.1}
.ws48s-page .ws48s-stat-num--sm{font-size:clamp(22px,2.4cqw,30px) !important;line-height:1.6}
.ws48s-page .ws48s-stat-label{font-size:15px;color:var(--ws48s-ink)}

/* ---------- Approach ---------- */
.ws48s-page .ws48s-approach{background:var(--ws48s-cream);padding:clamp(56px,7cqw,92px) var(--ws48s-gutter) !important}
.ws48s-page .ws48s-approach-grid{gap:64px !important;max-width:var(--ws48s-max);margin:0 auto !important}
.ws48s-page .ws48s-features{display:grid;gap:34px;padding-top:16px}
.ws48s-page .ws48s-features > *{margin:0 !important}
.ws48s-page .ws48s-feature{gap:20px !important}
.ws48s-page .ws48s-icon{width:46px;height:46px;flex:0 0 60px;color:var(--ws48s-ink)}
.ws48s-page .ws48s-feature-text p{font-size:15px;max-width:340px}

/* ---------- Materials ---------- */
.ws48s-page .ws48s-materials{background:var(--ws48s-cream-2)}
.ws48s-page .ws48s-materials .ws48s-split > .ws48s-media{flex-basis:52% !important;min-height:440px}

/* ---------- Products ---------- */
.ws48s-page .ws48s-products{background:var(--ws48s-cream-2);padding:clamp(56px,6cqw,80px) var(--ws48s-gutter) clamp(56px,6cqw,72px) !important}
.ws48s-page .ws48s-products > *{max-width:var(--ws48s-max);margin-left:auto !important;margin-right:auto !important}
.ws48s-page .ws48s-products .ws48s-h2{margin-bottom:44px !important}
.ws48s-page .ws48s-product-grid{gap:28px !important}
.ws48s-page .ws48s-card-img{margin:0 0 22px !important;aspect-ratio:16/9.3;overflow:hidden}
.ws48s-page .ws48s-card-img a,.ws48s-page .ws48s-card-img img{display:block;width:100%;height:100%}
.ws48s-page .ws48s-card-img img{object-fit:cover;transition:transform .5s;background:linear-gradient(135deg,#d9cfc2,#b9a998)}
.ws48s-page .ws48s-card:hover .ws48s-card-img img{transform:scale(1.03)}
.ws48s-page .ws48s-card-title{font-size:22px !important;letter-spacing:-.01em !important;margin-bottom:8px !important}
.ws48s-page .ws48s-card p:not(.ws48s-link){font-size:16px;max-width:400px;margin-bottom:18px}

/* ---------- CTA ---------- */
.ws48s-page .ws48s-cta{background:var(--ws48s-navy);color:#fff;position:relative;overflow:hidden;padding:clamp(56px,6cqw,80px) var(--ws48s-gutter) !important}
.ws48s-page .ws48s-cta::after{content:"";position:absolute;right:-90px;bottom:-150px;width:300px;height:300px;border-radius:50%;background:var(--ws48s-navy-2);opacity:.85;pointer-events:none}
.ws48s-page .ws48s-cta-grid{position:relative;z-index:1;gap:40px !important;max-width:var(--ws48s-max);margin:0 auto !important}
.ws48s-page .ws48s-cta .ws48s-eyebrow,.ws48s-page .ws48s-cta h2{color:#fff !important}
.ws48s-page .ws48s-cta .ws48s-intro{max-width:560px;color:rgba(255,255,255,.92);margin-bottom:0 !important}
.ws48s-page .ws48s-cta-grid > .wp-block-column{width:auto !important;min-width:0}
.ws48s-page .ws48s-cta-grid > .wp-block-column:first-child{flex:1 1 0% !important}
.ws48s-page .ws48s-cta-action{flex:0 0 auto !important}

/* ---------- Responsive ---------- */
@container ws48s (max-width:960px){
  .ws48s-page .ws48s-split,.ws48s-page .ws48s-approach-grid,.ws48s-page .ws48s-cta-grid{flex-wrap:wrap !important}
  .ws48s-page .ws48s-split > .wp-block-column,
  .ws48s-page .ws48s-materials .ws48s-split > .ws48s-media,
  .ws48s-page .ws48s-approach-grid > .wp-block-column,
  .ws48s-page .ws48s-cta-grid > .wp-block-column{flex-basis:100% !important}
  .ws48s-page .ws48s-split-copy,.ws48s-page .ws48s-split-copy--left,.ws48s-page .ws48s-split-copy--right{padding:56px var(--ws48s-gutter)}
  .ws48s-page .ws48s-hero .ws48s-split{min-height:0}
  .ws48s-page .ws48s-media{min-height:360px}
  .ws48s-page .ws48s-materials .ws48s-split > .ws48s-media{min-height:320px}
  .ws48s-page .ws48s-approach-grid{gap:40px !important}
}
@container ws48s (max-width:781px){
  .ws48s-page .ws48s-stat + .ws48s-stat{border-left:0;border-top:1px solid var(--ws48s-line)}
  .ws48s-page .ws48s-stat{padding:20px 0}
  .ws48s-page .ws48s-product-grid{gap:44px !important}
}

/* ---------- Optional edge-to-edge mode ----------
   Add the class "ws48s-bleed" to the outer Group (Advanced > Additional CSS
   class) to stretch the colour bands to the full browser width when the theme
   wraps page content in a fixed-width box. */
.ws48s-page.ws48s-bleed{width:100vw;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important}
body:has(.ws48s-bleed){overflow-x:clip}