/* ============================================================================
cfp-2026.css — Carbon Footprint Ltd design system (2026 refresh)
Source of truth for the new look: Cormorant Garamond + DM Sans, forest-green
palette, grid-line backgrounds, "wireframe" image frames, alternating split
rows, dark sections. Link this on a page and use the markup classes below.
Fonts (add to ):
========================================================================== */
:root {
--dark: #0d1f12;
--forest: #1a3a22;
--green: #2d6a3f;
--mid: #3e8a52;
--light-green: #5aad6e;
--mint: #e8f4eb;
--pale: #f2f9f4;
--white: #ffffff;
--text: #1a2e20;
--muted: #5a7362;
--border: #d0e8d5;
--gold: #c8a84b;
--grid-line: rgba(45,106,63,0.05);
--maxw: 1160px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--text); overflow-x: hidden; }
img { max-width: 100%; }
/* ── TOP BAR ── */
.top-bar { position: relative; z-index: 1000; background: var(--dark); color: rgba(255,255,255,0.75); font-size: 0.78rem; padding: 9px 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.top-bar a { color: rgba(255,255,255,0.75); text-decoration: none; }
.top-bar a:hover { color: var(--light-green); }
.top-bar .spacer { flex: 1; }
/* ── NAV ── */
.site-nav { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 40px; display: flex; align-items: center; height: 72px; }
.nav-logo img { height: 58px; }
.nav-links { display: flex; align-items: stretch; gap: 4px; margin-left: 36px; list-style: none; height: 72px; }
.nav-links > li { position: relative; display: flex; align-items: center; }
.nav-links > li > a { color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 8px 13px; border-radius: 6px; display: block; transition: background 0.2s, color 0.2s; letter-spacing: 0.02em; }
.nav-links > li > a:hover { background: var(--mint); color: var(--green); }
.nav-links > li > a.has-drop::after { content: ' ▾'; font-size: 0.7rem; }
/* dropdown touches the bottom of the full-height nav item (no gap to cross),
so it stays open while the cursor travels from the link down into the menu */
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border); border-radius: 0 0 10px 10px; padding: 8px 0; min-width: 230px; box-shadow: 0 12px 36px rgba(0,0,0,0.1); z-index: 200; }
.nav-links > li:hover .dropdown, .nav-links > li:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 8px 18px; color: var(--text); font-size: 0.83rem; text-decoration: none; transition: background 0.15s; }
.dropdown a:hover { background: var(--mint); color: var(--green); }
.dropdown .section-label { padding: 10px 18px 4px; font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; pointer-events: none; }
.dropdown hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login { color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 8px 6px; white-space: nowrap; transition: color 0.2s; }
.nav-login:hover { color: var(--green); }
/* In-site page search (injected by cfp-2026-styles.js) */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--green); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.nav-search-toggle:hover { background: var(--mint); border-color: var(--green); }
.nav-search-toggle svg { width: 18px; height: 18px; }
.nav-search-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 380px; max-width: 90vw; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(13,31,18,0.18); padding: 10px; z-index: 1100; }
.nav-search.open .nav-search-panel { display: block; animation: cfpFadeIn 0.16s ease; }
.nav-search.open .nav-search-toggle { background: var(--green); border-color: var(--green); color: #fff; }
.nav-search-input { width: 100%; padding: 10px 14px; font-family: inherit; font-size: 0.95rem; color: var(--text); border: 1px solid var(--border); border-radius: 8px; outline: none; }
.nav-search-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--mint); }
.nav-search-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 56vh; overflow-y: auto; }
.nav-search-results li { margin: 0; }
.nav-search-results a { display: block; padding: 9px 11px; border-radius: 8px; text-decoration: none; color: var(--text); }
.nav-search-results a:hover, .nav-search-results li.is-active a { background: var(--pale); }
.nav-search-results .r-title { display: block; font-weight: 600; font-size: 0.92rem; color: var(--green); overflow-wrap: anywhere; }
.nav-search-results .r-context { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.nav-search-results mark { background: #fbeec2; color: inherit; padding: 0 1px; border-radius: 2px; }
.nav-search-empty { padding: 16px 12px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.nav-search-hint { padding: 8px 12px 2px; font-size: 0.72rem; color: var(--muted); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--dark); }
/* ── BUTTONS ── */
.btn { display: inline-block; padding: 10px 22px; border-radius: 50px; font-weight: 500; font-size: 0.85rem; text-decoration: none; cursor: pointer; transition: all 0.2s; border: none; }
.btn-outline { border: 1.5px solid var(--green); color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--forest); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45,106,63,0.35); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: var(--forest); }
.btn-white { background: #fff; color: var(--dark); }
.btn-white:hover { background: var(--mint); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-lg { padding: 14px 32px; font-size: 0.95rem; }
/* ── SHARED: grid-line background + section header + tags ── */
.grid-bg { position: relative; overflow: hidden; }
.grid-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(90,173,110,0.12) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(45,106,63,0.07) 0%, transparent 60%); pointer-events: none; }
.section-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.row.dark .section-tag, .dark .section-tag { color: var(--light-green); }
.section-header { text-align: center; max-width: 660px; margin: 0 auto 64px; position: relative; z-index: 1; }
.section-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; color: var(--dark); line-height: 1.15; margin-bottom: 16px; }
.section-header h2 em { color: var(--green); font-style: italic; }
.section-header p { color: var(--muted); font-size: 1rem; line-height: 1.65; font-weight: 300; }
/* ── HERO (homepage, centered) ── */
.hero { min-height: 88vh; background: var(--pale); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 40px 80px; overflow: hidden; }
.hero video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.5; pointer-events: none; }
.hero h1 { text-shadow: 0 1px 24px rgba(242,249,244,0.7); }
.hero::before, .hero::after { z-index: 0; }
/* liquid-glass panel keeps hero text readable over the video */
.hero-panel { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto 52px; padding: 32px 44px 36px; text-align: center; background: rgba(255,255,255,0.3); backdrop-filter: blur(16px) saturate(180%) brightness(1.05); -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05); border: 1px solid rgba(255,255,255,0.7); border-radius: 28px; box-shadow: 0 18px 60px rgba(13,31,18,0.2), inset 0 2px 1px rgba(255,255,255,1), inset 0 -14px 34px rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.12); overflow: hidden; }
/* glossy specular sheen across the top — the "liquid" highlight */
.hero-panel::before, .hero-stats::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 58%; background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0) 100%); pointer-events: none; z-index: 0; }
.hero-panel > *, .hero-stats > * { position: relative; z-index: 1; }
.hero-panel .hero-sub { color: var(--text); margin: 0 auto 28px; text-shadow: 0 1px 3px rgba(255,255,255,0.7); }
.hero-panel .hero-actions { margin-bottom: 0; }
@media (max-width: 560px) { .hero-panel { padding: 28px 22px 32px; } }
/* Clean eyebrow label above the hero heading (no pill, no dot) */
.hero-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 18px; position: relative; z-index: 1; }
.hero-badge .dot { display: none; }
.hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.9rem, 6vw, 5.4rem); font-weight: 600; line-height: 1.05; color: var(--dark); max-width: 900px; position: relative; z-index: 1; margin-bottom: 26px; }
.hero h1 em { color: var(--green); font-style: italic; }
.hero-sub { font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 640px; line-height: 1.65; position: relative; z-index: 1; margin-bottom: 40px; font-weight: 300; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; margin-bottom: 64px; }
.hero-stats { display: flex; gap: 0; position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto; background: rgba(255,255,255,0.42); backdrop-filter: blur(18px) saturate(180%) brightness(1.05); -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.05); border: 1px solid rgba(255,255,255,0.85); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 60px rgba(13,31,18,0.28), inset 0 2px 1px rgba(255,255,255,1), inset 0 -14px 34px rgba(255,255,255,0.3), inset 0 0 0 1px rgba(255,255,255,0.18); flex-wrap: wrap; }
.stat-item { padding: 22px 38px; text-align: center; border-right: 1px solid rgba(13,31,18,0.08); flex: 1 1 auto; color: inherit; text-decoration: none; transition: background 0.2s; }
.stat-item:last-child { border-right: none; }
a.stat-item:hover { background: rgba(255,255,255,0.4); }
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 600; color: var(--green); line-height: 1; text-shadow: 0 1px 3px rgba(255,255,255,0.7); }
.stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 4px; font-weight: 400; text-shadow: 0 1px 2px rgba(255,255,255,0.7); }
/* ── PAGE HERO (inner pages, split text + visual) ── */
.page-hero { background: var(--pale); position: relative; padding: 72px 40px; overflow: hidden; }
.page-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; position: relative; z-index: 1; }
.page-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.4rem, 4.5vw, 4rem); font-weight: 600; line-height: 1.05; color: var(--dark); margin-bottom: 22px; }
.page-hero h1 em { color: var(--green); font-style: italic; }
.page-hero .hero-sub { text-align: left; margin: 0 0 32px; max-width: none; }
.page-hero .hero-actions { justify-content: flex-start; margin-bottom: 0; }
/* ── BREADCRUMB ── */
.breadcrumb { background: var(--pale); padding: 14px 40px; font-size: 0.8rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.breadcrumb-inner { max-width: var(--maxw); margin: 0 auto; }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { margin: 0 8px; color: var(--border); }
.breadcrumb .current { color: var(--green); font-weight: 500; }
/* ── IMAGE FRAME (the "wireframe" — real image OR placeholder) ── */
.img-frame { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--mint) 0%, #d4ead8 100%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 40px rgba(13,31,18,0.08); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-frame.contain { background: var(--pale); }
.img-frame.contain img { object-fit: contain; padding: 28px; }
.img-frame .placeholder { color: var(--green); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; opacity: 0.55; padding: 24px; text-align: center; }
.img-frame .placeholder::before { content: '◇'; display: block; font-size: 1.6rem; margin-bottom: 8px; font-style: normal; }
.img-frame.tall { aspect-ratio: 3 / 4; }
.img-frame.wide { aspect-ratio: 16 / 10; }
/* Full-size: show the whole image at its natural ratio instead of cropping to the frame */
.img-frame.natural { aspect-ratio: auto; background: var(--pale); }
.img-frame.natural img { height: auto; object-fit: contain; }
.row-visual video { border: none; outline: none; display: block; width: 100%; }
/* Caption shown below an image frame (no longer overlaid on the image) */
.img-caption { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.8rem; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }
.img-caption::before { content: ''; width: 6px; height: 6px; background: var(--light-green); border-radius: 50%; flex-shrink: 0; }
/* ── SPLIT ROWS (alternating text + visual) ── */
section.row { padding: 100px 40px; position: relative; }
.row-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.row.alt { background: var(--pale); }
.row.dark { background: var(--dark); color: #fff; }
.row.reverse .row-inner > .row-text { order: 2; }
.row.reverse .row-inner > .row-visual { order: 1; }
.row-text h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; color: var(--dark); line-height: 1.15; margin-bottom: 18px; }
.row.dark .row-text h2 { color: #fff; }
.row-text h2 em { color: var(--green); font-style: italic; }
.row.dark .row-text h2 em { color: var(--light-green); }
.row-text p { color: var(--muted); font-size: 1rem; line-height: 1.7; font-weight: 300; margin-bottom: 16px; }
.row.dark .row-text p { color: rgba(255,255,255,0.7); }
.feature-list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 12px; font-size: 0.92rem; color: var(--text); line-height: 1.55; position: relative; }
.row.dark .feature-list li { color: rgba(255,255,255,0.85); }
.feature-list li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); flex-shrink: 0; margin-top: 3px; }
.row.dark .feature-list li::before { background: rgba(90,173,110,0.2); }
.feature-list li::after { content: '✓'; position: absolute; transform: translate(4px, 2px); color: var(--green); font-size: 0.7rem; font-weight: 700; }
.feature-list li strong { color: var(--dark); font-weight: 600; }
.row.dark .feature-list li strong { color: #fff; }
/* ── CARD GRID (platforms / generic feature cards) ── */
.card-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; position: relative; z-index: 1; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.full { max-width: none; }
.feature-card { border: 1px solid var(--border); border-radius: 20px; padding: 38px; transition: all 0.3s; text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden; background: #fff; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, linear-gradient(90deg, var(--green), var(--light-green))); transform: scaleX(0); transition: transform 0.3s; }
.feature-card:hover { border-color: var(--card-accent, var(--light-green)); box-shadow: 0 12px 40px rgba(45,106,63,0.12); box-shadow: 0 12px 40px color-mix(in srgb, var(--card-accent, #2d6a3f) 18%, transparent); transform: translateY(-3px); }
.feature-card:hover::before { transform: scaleX(1); }
/* Per-platform hover accent line (brand colours) */
.feature-card.accent-sustrax { --card-accent: #9662cb; }
.feature-card.accent-comp { --card-accent: #1ca941; }
.feature-card.accent-crisp { --card-accent: #f5a623; }
.feature-card.accent-cadi { --card-accent: #2f6fb0; }
.feature-card.accent-nzs { --card-accent: #2d6a3f; }
.feature-card.accent-ffp { --card-accent: #0288d1; }
.feature-card .card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--mint); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--green); margin-bottom: 22px; }
.feature-card .platform-logo { height: 56px; margin-bottom: 22px; display: flex; align-items: center; }
.feature-card .platform-logo img { max-height: 56px; max-width: 200px; object-fit: contain; }
.feature-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--dark); margin-bottom: 12px; }
.feature-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; font-weight: 300; margin-bottom: 22px; }
.tag { display: inline-block; background: var(--mint); color: var(--green); font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-right: 6px; margin-bottom: 6px; }
.card-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.card-link::after { content: '→'; transition: transform 0.2s; }
.feature-card:hover .card-link::after { transform: translateX(4px); }
/* Static label that shares the card-link style but is not a link (e.g. price). */
.card-link.no-arrow::after { content: none; }
/* ── PATHWAY (numbered step cards) ── */
.pathway-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; }
.pathway-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.pathway-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.path-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; transition: all 0.3s; position: relative; display: block; text-decoration: none; color: inherit; }
.path-card:hover { border-color: var(--light-green); box-shadow: 0 8px 28px rgba(45,106,63,0.1); transform: translateY(-2px); }
.path-num { font-family: 'Cormorant Garamond', serif; font-size: 0.9rem; color: var(--green); font-weight: 600; margin-bottom: 8px; letter-spacing: 0.1em; }
.path-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; line-height: 1.2; }
.path-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; font-weight: 300; }
/* ── REVIEWS ── */
.reviews-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reviews-grid.cols-4 { max-width: 1500px; grid-template-columns: repeat(4, 1fr); }
.review-card { background: var(--pale); border: 1px solid var(--border); border-radius: 16px; padding: 30px 34px 36px; position: relative; overflow: hidden; text-align: center; }
/* White banner across the top — gives logos with non-transparent backgrounds a clean ground */
.review-client { margin: -30px -34px 22px; padding: 20px 24px; min-height: 86px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.review-logo { height: 50px; max-width: 160px; object-fit: contain; transition: transform 0.3s ease; }
.review-card:hover .review-logo { transform: scale(1.12); }
.review-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 3px; margin-bottom: 4px; }
.review-text { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--text); margin: 18px 0 0; }
/* Quote marks at the start & end of the text — green and slightly larger */
.review-text::before, .review-text::after { color: var(--green); font-style: normal; font-weight: 600; font-size: 1.35em; line-height: 0; vertical-align: -0.28em; }
.review-text::before { content: '\201C'; margin-right: 2px; }
.review-text::after { content: '\201D'; margin-left: 2px; }
/* ── CLIENT LOGO TICKER (proven seamless-scroll technique from the old homepage) ── */
.logo-ticker-section { padding: 64px 40px; background: var(--white); border-top: 1px solid var(--border); }
.logo-ticker-section .ticker-label { text-align: center; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; }
.logo-ticker-container { overflow: hidden; width: 100%; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.logo-ticker-track { display: inline-block; animation: logo-scroll 55s linear infinite; }
.logo-ticker-container:hover .logo-ticker-track { animation-play-state: paused; }
.logo-item { display: inline-flex; align-items: center; height: 72px; margin-right: 60px; vertical-align: middle; }
.logo-item img { max-height: 52px; max-width: 150px; width: auto; object-fit: contain; transition: transform 0.3s ease; }
.logo-item img:hover { transform: scale(1.18); }
@keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* ── PROJECT CARDS (image top) ── */
.projects-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; }
.project-card { border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: block; position: relative; background: #fff; border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
.project-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.project-info { padding: 24px; }
.project-info h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.project-info p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; font-weight: 300; }
/* ── PILLS (frameworks / standards) ── */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; position: relative; z-index: 1; }
.pill { background: #fff; border: 1.5px solid var(--border); border-radius: 50px; padding: 10px 24px; font-size: 0.85rem; font-weight: 500; color: var(--text); text-decoration: none; transition: all 0.2s; }
.pill:hover { border-color: var(--green); background: var(--mint); color: var(--green); }
/* ── TWO-UP CARDS (marketplace / pricing) ── */
.duo { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; position: relative; z-index: 1; }
.duo-card { border-radius: 20px; padding: 44px; }
.duo-card.dark { background: var(--dark); color: #fff; }
.duo-card.light { background: var(--mint); border: 1px solid var(--border); }
.duo-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; margin-bottom: 8px; }
.duo-card.dark h3 { color: #fff; } .duo-card.light h3 { color: var(--dark); }
.duo-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.duo-card.dark .duo-label { color: var(--light-green); } .duo-card.light .duo-label { color: var(--green); }
.duo-card p { font-size: 0.9rem; line-height: 1.65; font-weight: 300; margin-bottom: 22px; }
.duo-card.dark p { color: rgba(255,255,255,0.65); } .duo-card.light p { color: var(--muted); }
.check-list { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; }
.duo-card.dark .check-list li { color: rgba(255,255,255,0.8); } .duo-card.light .check-list li { color: var(--text); }
.check-list li::before { content: '✦'; color: var(--green); font-size: 0.75rem; flex-shrink: 0; margin-top: 3px; }
.duo-card.dark .check-list li::before { color: var(--light-green); }
/* ── SECTION SHELLS (light / pale / dark wrappers with a centered header) ── */
.section { padding: 110px 40px; position: relative; }
.section.pale { background: var(--pale); }
.section.dark { background: var(--dark); }
.section.dark .section-header h2 { color: #fff; } .section.dark .section-header h2 em { color: var(--light-green); }
.section.dark .section-header p { color: rgba(255,255,255,0.65); }
/* ── FINAL CTA ── */
.final-cta { padding: 110px 40px; background: var(--dark); text-align: center; position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(90,173,110,0.12) 0%, transparent 70%); pointer-events: none; }
.final-cta h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 600; color: #fff; max-width: 760px; margin: 0 auto 18px; line-height: 1.12; position: relative; z-index: 1; }
.final-cta h2 em { color: var(--light-green); font-style: italic; }
.final-cta p { color: rgba(255,255,255,0.6); font-size: 1rem; max-width: 540px; margin: 0 auto 40px; line-height: 1.65; font-weight: 300; position: relative; z-index: 1; }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
/* ── FOOTER (uses