/* =================================================================
   Utility classes — extracted from former inline styles (atomic)
   One declaration per class. Loaded after styles.css so these
   win on equal specificity, matching the old inline behaviour.
   ================================================================= */

.h-56px { height: 56px !important; }
.w-auto { width: auto !important; }
.c-25d366 { color: #25D366 !important; }
.td-none { text-decoration: none !important; }
.d-inline-flex { display: inline-flex !important; }
.ai-center { align-items: center !important; }
.gap-0p3rem { gap: 0.3rem !important; }
.w-14px { width: 14px !important; }
.h-14px { height: 14px !important; }
.fill-25d366 { fill: #25D366 !important; }
.p-100px-5pct { padding: 100px 5% !important; }
.fst-italic { font-style: italic !important; }
.mt-1rem { margin-top: 1rem !important; }
.maxw-1200px { max-width: 1200px !important; }
.m-0-auto { margin: 0 auto !important; }
.bg-ochre { background: var(--ochre) !important; }
.p-60px-5pct { padding: 60px 5% !important; }
.ta-center { text-align: center !important; }
.ff-playfair-d-a296a { font-family: 'Playfair Display',serif !important; }
.fs-clamp-1p3r-4a562 { font-size: clamp(1.3rem,3vw,2rem) !important; }
.c-white { color: var(--white) !important; }
.maxw-820px { max-width: 820px !important; }
.lh-1p7 { line-height: 1.7 !important; }
.mt-2rem { margin-top: 2rem !important; }
.d-inline-block { display: inline-block !important; }
.bg-deep-green { background: var(--deep-green) !important; }
.p-90px-5pct { padding: 90px 5% !important; }
.bg-warm-cream { background: var(--warm-cream) !important; }
.maxw-600px { max-width: 600px !important; }
.c-text-soft { color: var(--text-soft) !important; }
.mt-0p5rem { margin-top: 0.5rem !important; }
.d-grid { display: grid !important; }
.gtc-repeat-aut-70717 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.gap-2rem { gap: 2rem !important; }
.maxw-1100px { max-width: 1100px !important; }
.m-3rem-auto-0 { margin: 3rem auto 0 !important; }
.p-2rem-1p5rem { padding: 2rem 1.5rem !important; }
.w-60px { width: 60px !important; }
.h-60px { height: 60px !important; }
.br-50pct { border-radius: 50% !important; }
.d-flex { display: flex !important; }
.jc-center { justify-content: center !important; }
.m-0-auto-1p2rem { margin: 0 auto 1.2rem !important; }
.fs-1p5rem { font-size: 1.5rem !important; }
.c-white-2 { color: white !important; }
.fw-700 { font-weight: 700 !important; }
.fs-1p05rem { font-size: 1.05rem !important; }
.mb-0p7rem { margin-bottom: 0.7rem !important; }
.c-deep-green { color: var(--deep-green) !important; }
.fs-0p9rem { font-size: 0.9rem !important; }
.c-text-mid { color: var(--text-mid) !important; }
.lh-1p65 { line-height: 1.65 !important; }
.p-0p6rem-1p4rem { padding: 0.6rem 1.4rem !important; }
.br-25px { border-radius: 25px !important; }
.fs-0p85rem { font-size: 0.85rem !important; }
.fw-600 { font-weight: 600 !important; }
.bg-light-clay { background: var(--light-clay) !important; }
.gtc-repeat-aut-6663e { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
.maxw-900px { max-width: 900px !important; }
.bg-white { background: var(--white) !important; }
.br-16px { border-radius: 16px !important; }
.p-2p5rem { padding: 2.5rem !important; }
.shadow-0-4px-20px-68b69 { box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; }
.bd-2px-solid-ddd0bb { border: 2px solid #ddd0bb !important; }
.mb-0p3rem { margin-bottom: 0.3rem !important; }
.mb-1p5rem { margin-bottom: 1.5rem !important; }
.fs-3rem { font-size: 3rem !important; }
.lh-1 { line-height: 1 !important; }
.fs-1rem { font-size: 1rem !important; }
.fw-400 { font-weight: 400 !important; }
.m-0p5rem-0-1p5rem { margin: 0.5rem 0 1.5rem !important; }
.list-none { list-style: none !important; }
.p-0 { padding: 0 !important; }
.m-0 { margin: 0 !important; }
.p-0p6rem-0 { padding: 0.6rem 0 !important; }
.bdb-1px-solid-1abfa { border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
.shadow-0-4px-20px-ee580 { box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; }
.pos-relative { position: relative !important; }
.bd-2px-solid-ochre { border: 2px solid var(--ochre) !important; }
.pos-absolute { position: absolute !important; }
.top-14px { top: -14px !important; }
.left-50pct { left: 50% !important; }
.tf-translatex-50pct { transform: translateX(-50%) !important; }
.fs-0p75rem { font-size: 0.75rem !important; }
.p-4px-16px { padding: 4px 16px !important; }
.br-20px { border-radius: 20px !important; }
.lsp-0p05em { letter-spacing: 0.05em !important; }
.mt-2p5rem { margin-top: 2.5rem !important; }
.fs-1p1rem { font-size: 1.1rem !important; }
.mb-1p2rem { margin-bottom: 1.2rem !important; }
.gtc-repeat-aut-9f15c { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
.gap-1rem { gap: 1rem !important; }
.bd-1p5px-soli-3ae22 { border: 1.5px solid var(--light-clay) !important; }
.br-10px { border-radius: 10px !important; }
.p-1p2rem { padding: 1.2rem !important; }
.mb-0p5rem { margin-bottom: 0.5rem !important; }
.fs-0p95rem { font-size: 0.95rem !important; }
.fs-1p3rem { font-size: 1.3rem !important; }
.c-ochre { color: var(--ochre) !important; }
.fs-0p78rem { font-size: 0.78rem !important; }
.mt-0p2rem { margin-top: 0.2rem !important; }
.fs-0p8rem { font-size: 0.8rem !important; }
.br-12px { border-radius: 12px !important; }
.p-2rem { padding: 2rem !important; }
.c-warm-cream { color: var(--warm-cream) !important; }
.mb-1rem { margin-bottom: 1rem !important; }
.gtc-repeat-aut-5b03d { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.gap-0p6rem { gap: 0.6rem !important; }
.fs-0p88rem { font-size: 0.88rem !important; }
.c-rgba-250-2-71dc4 { color: rgba(250,245,236,0.8) !important; }
.mt-1p5rem { margin-top: 1.5rem !important; }
.m-0-auto-0 { margin: 0 auto 0 !important; }
.bg-rgba-255-2-cc5ef { background: rgba(255,255,255,0.1) !important; }
.bd-1px-solid-346aa { border: 1px solid rgba(255,255,255,0.3) !important; }
.p-1p5rem-2rem { padding: 1.5rem 2rem !important; }
.m-2rem-0 { margin: 2rem 0 !important; }
.lh-1p75 { line-height: 1.75 !important; }
.m-2p5rem-auto-0 { margin: 2.5rem auto 0 !important; }
.c-rgba-250-2-f5a07 { color: rgba(250,245,236,0.6) !important; }
.gtc-1fr-1fr { grid-template-columns: 1fr 1fr !important; }
.gap-5rem { gap: 5rem !important; }
.bg-rgba-255-2-850de { background: rgba(255,255,255,0.25) !important; }
.fs-1p4rem { font-size: 1.4rem !important; }
.fs-0p82rem { font-size: 0.82rem !important; }
.mt-0p3rem { margin-top: 0.3rem !important; }
.fs-1p2rem { font-size: 1.2rem !important; }
.c-red { color: red !important; }
.d-none { display: none !important; }
.maxw-500px { max-width: 500px !important; }
.m-0-auto-0p5rem { margin: 0 auto 0.5rem !important; }
.ov-hidden { overflow: hidden !important; }
.shadow-0-4px-20px-ec2af { box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }
.bd-0 { border: 0 !important; }
.d-block { display: block !important; }
.maxw-700px { max-width: 700px !important; }
.w-90px { width: 90px !important; }
.h-90px { height: 90px !important; }
.m-2rem-auto-1p5rem { margin: 2rem auto 1.5rem !important; }
.w-100pct { width: 100% !important; }
.h-100pct { height: 100% !important; }
.of-cover { object-fit: cover !important; }
.fs-1p15rem { font-size: 1.15rem !important; }
.lh-1p8 { line-height: 1.8 !important; }
.gap-1p5rem { gap: 1.5rem !important; }
.shadow-0-4px-20px-30c05 { box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important; }
.trans-transform-1893b { transition: transform 0.3s, box-shadow 0.3s !important; }
.bg-terracotta { background: var(--terracotta) !important; }
.fs-2p5rem { font-size: 2.5rem !important; }
.p-1p5rem { padding: 1.5rem !important; }
.lsp-0p15em { letter-spacing: 0.15em !important; }
.tt-uppercase { text-transform: uppercase !important; }
.mb-0p6rem { margin-bottom: 0.6rem !important; }
.lh-1p4 { line-height: 1.4 !important; }
.m-1p5rem-auto-0 { margin: 1.5rem auto 0 !important; }
.bg-2d6a4f { background: #2d6a4f !important; }
.fs-2rem { font-size: 2rem !important; }
.mb-0p8rem { margin-bottom: 0.8rem !important; }
.gcol-2-3 { grid-column: 2 / 3 !important; }
.mt-1p2rem { margin-top: 1.2rem !important; }
.gap-0p7rem { gap: 0.7rem !important; }
.mt-0p8rem { margin-top: 0.8rem !important; }
.gap-0p5rem { gap: 0.5rem !important; }
.bg-25d366 { background: #25D366 !important; }
.p-0p75rem { padding: 0.75rem !important; }
.br-6px { border-radius: 6px !important; }
.ff-dm-sans-sans-serif { font-family: 'DM Sans',sans-serif !important; }
.w-18px { width: 18px !important; }
.h-18px { height: 18px !important; }
.fill-white { fill: white !important; }
.bg-ea4335 { background: #EA4335 !important; }
.p-30px-5pct { padding: 30px 5% !important; }
.pos-fixed { position: fixed !important; }
.bot-28px { bottom: 28px !important; }
.right-28px { right: 28px !important; }
.z-9999 { z-index: 9999 !important; }
.shadow-0-6px-24px-1552c { box-shadow: 0 6px 24px rgba(37,211,102,0.5) !important; }
.trans-transform-8f1f5 { transition: transform 0.2s, box-shadow 0.2s !important; }
.w-32px { width: 32px !important; }
.h-32px { height: 32px !important; }
.h-64px { height: 64px !important; }
.pb-0 { padding-bottom: 0 !important; }
.gtc-1p5fr-1fr-1fr-2fr { grid-template-columns: 1.5fr 1fr 1fr 2fr !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.fs-1p8rem { font-size: 1.8rem !important; }
.gap-0p8rem { gap: 0.8rem !important; }
.fwrap-wrap { flex-wrap: wrap !important; }
.w-36px { width: 36px !important; }
.h-36px { height: 36px !important; }
.bg-1877f2 { background: #1877F2 !important; }
.bg-e60023 { background: #E60023 !important; }
.bg-e1306c { background: #E1306C !important; }
.bg-ffffff { background: #ffffff !important; }
.fill-000000 { fill: #000000 !important; }
.c-rgba-250-2-f2e09 { color: rgba(250,245,236,0.5) !important; }
.p-0p3rem-0 { padding: 0.3rem 0 !important; }
.c-rgba-250-2-1b021 { color: rgba(250,245,236,0.4) !important; }

/* Hover interactions (were inline onmouseover/onmouseout handlers) */
.hover-lift { transition: transform .3s, box-shadow .3s; }
.hover-lift:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.13) !important; }
.hover-grow { transition: transform .3s, box-shadow .3s; }
.hover-grow:hover { transform: scale(1.1) !important; box-shadow: 0 10px 30px rgba(37,211,102,0.6) !important; }

/* Responsive: collapse multi-column grids on phones. Placed after the
   atomic gtc-/gcol- rules so these win on equal specificity (source order). */
@media (max-width: 600px) {
  [class*="gtc-"] { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  [class*="gcol-"] { grid-column: auto !important; }
}