/* ----------------------------------------------------------------------------
   EARTHDEFINE MAIN STYLESHEET
   ---------------------------------------------------------------------------- */

/* BEST PRACTICES:
   - Order: Variables → Reset → Typography → Layout → Components → Responsive
   - Within sections: Parent first, then children, then states (:hover, :focus)
   - Comment the "why", not the "what"
   - Keep related selectors together
   - Use variables for repeated values
   - Delete dead code, don't comment it out
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   0. SELF-HOSTED DISPLAY FONT
   Source Serif 4 (latin) is self-hosted + preloaded (see base.html) so the brand
   heading is ready before first paint - no fallback-font flash / swap when
   navigating between pages. Inter (body) stays on Google Fonts.
   ---------------------------------------------------------------------------- */
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-serif-4-400.11c8ede91d1e.woff2") format('woff2');
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4-600.8c50fc5a475f.woff2") format('woff2');
}

/* ----------------------------------------------------------------------------
   1. CSS VARIABLES
   ---------------------------------------------------------------------------- */
:root {
    /* Brand Colors (Figma: Brand/Blue, Brand/Green, Brand/Orange) */
    --logo-blue: #006699;
    --logo-green: #669933;
    --logo-orange: #FF9933;
    --text-on-green: #336600;                /* Text/On-green — green stroke-button text (matches stroke) */

    /* Hover & interaction tokens (see style-guide "Hover & interaction").
       Convention: blue + green LIGHTEN on hover; orange DARKENS. Dark = pressed. */
    --logo-blue-hover: #0088AA;              /* blue button hover (lightens) */
    --logo-blue-dark: #005580;               /* blue pressed/active only */
    --logo-blue-tint: rgba(0, 102, 153, 0.15);
    --logo-green-hover: #88CC33;             /* green button hover (lightens) */
    --logo-green-dark: #557A29;              /* green pressed/active only */
    --logo-green-tint: rgba(102, 153, 51, 0.15);
    --logo-orange-hover: #D97F1F;            /* orange button hover (darkens) */
    --logo-orange-light: #FFB347;            /* soft peachy-orange for tints/accents */
    --logo-orange-tint: rgba(255, 153, 51, 0.15);
    --focus-ring: #0088AA;                   /* keyboard focus ring (3px, 2px offset) */

    /* Text / neutral colours (Figma token names in comments) */
    --light-gray: #f5f5f5;
    --text-dark-grey: #333333;               /* Text/Heading — also text on orange fills/strokes */
    --text-body: #666666;                    /* Text/Body */
    --text-light-grey: #999999;              /* Text/Secondary */
    --text-inverse: #FFFFFF;                 /* Text/Inverse — on blue and green fills */
    --text-orange: #995500;                  /* Text/Orange — the ONE readable orange text (WCAG AA on white), used sparingly */
    --hairline:     var(--hairline);   /* Figma Text/Secondary hairline (cards, accordion, filter) */
    --border-light: #DDDDDD;   /* light structural borders (inputs, dividers, iframes) */

    /* Layout rhythm */
    --block-space: 32px;   /* standard vertical padding around stacked content blocks */
    --band-height: 100px;  /* shared height for the stats-card + full-span-ribbon bands */

    /* Typography */
    --font-serif-display: 'Source Serif 4', Georgia, serif;  /* NEW — display headings */
    --font-sans-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Type scale (rem; 16px base) - one canonical scale (2026-06-22). */
    --fs-xs:   0.75rem;   /* 12px - badges, tiny labels */
    --fs-sm:   0.875rem;  /* 14px - captions, small UI, sm buttons */
    --fs-base: 1rem;      /* 16px - body, default */
    --fs-md:   1.125rem;  /* 18px - lead / intro / prose */
    --fs-lg:   1.25rem;   /* 20px - h4, card titles */
    --fs-xl:   1.5rem;    /* 24px - h3, hero tagline */
    --fs-2xl:  1.75rem;   /* 28px - story / sample-section headings */
    --fs-3xl:  2rem;      /* 32px - h2 */
    --fs-4xl:  2.25rem;   /* 36px - large headings / final CTA */
    --fs-5xl:  3rem;      /* 48px - h1 */

    /* Font weights. Serif display headings use --fw-regular (400). */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
}

/* ----------------------------------------------------------------------------
   2. RESET & BASE STYLES
   ---------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Always reserve the vertical scrollbar gutter so centred layouts don't shift
   (jitter) between short pages (no scrollbar) and long pages (scrollbar). */
html {
    scrollbar-gutter: stable;
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY - GLOBAL STYLES
   ---------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans-base);
    color: var(--text-body);   /* Text/Body #666 */
    line-height: 1.55;
    letter-spacing: -0.02em;   /* tightened tracking (matches headings) for a crisp, polished read */
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);                    /* Base size - everything scales from this */
    -webkit-font-smoothing: antialiased; /* Smoother text on Mac/iOS */
    -moz-osx-font-smoothing: grayscale;  /* Smoother text on Firefox Mac */
    text-rendering: optimizeLegibility;  /* Better kerning and ligatures */
	min-height: 100vh;
    background-color: white;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Avoid orphans: keep body copy from stranding a single word on the last
       line. Inherited, so it applies site-wide; headings override with balance.
       Degrades gracefully where unsupported. */
    text-wrap: pretty;
}

/* Canonical heading system (style-guide): Source Serif 4, Text/Heading #333.
   THE single source for heading family/colour/weight/tracking/leading. Page/hero
   title 48 (h1), section 32 (h2), then 24 / 20. Components set ONLY font-size +
   margins; they must NOT redeclare family/colour/weight/letter-spacing/line-height. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif-display);
    color: var(--text-dark-grey);
    font-weight: var(--fw-regular);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    text-wrap: balance;   /* even out short headings; avoids a lone trailing word */
}

/* Heading size is set ONCE here, by level. Components pick the right level and
   never restate size; h1 is fluid so hero/page titles need no media queries. */
h1 { font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl)); }   /* page / hero title, fluid 32-48 */
h2 { font-size: var(--fs-3xl); }                              /* 32 — section / block heading */
h3 { font-size: var(--fs-xl); }                               /* 24 — sub-heading / card title */
h4 { font-size: var(--fs-lg); }                               /* 20 */
h5 { font-size: var(--fs-md); }                               /* 18 */
h6 { font-size: var(--fs-base); }                             /* 16 */

/* Display utility for the largest hero headlines (alias of h1 size). */
.h-display { font-size: var(--fs-5xl); }

p {
    line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   4. LAYOUT CONTAINERS
   ---------------------------------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ----------------------------------------------------------------------------
   5. NAVIGATION — matches Figma Menu (16:579): full-width white, 80px tall
   ---------------------------------------------------------------------------- */
.main-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    height: 80px;
}

.nav-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo img {
    height: 56px;
    width: auto;
    display: block;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 28px;
    align-items: center;
}

.nav-menu a {
    color: var(--text-dark-grey);
    text-decoration: none;
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    line-height: 1.3;
    transition: color 0.18s;
}

.nav-menu a:hover {
    color: var(--logo-blue);
}

/* ---- Nav dropdowns (products, stories) ----
   Items coloured by family: blue / green; "dark" = orange/Terrain context
   (#333, since we never use orange text), matching the /products page. */
.nav-dropdown {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.nav-dropdown-toggle::after {
    content: " \25BE";   /* ▾ */
    font-size: 0.8rem;
}
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;                       /* left-aligned to the menu word */
    transform: translateY(6px);
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);   /* flush to nav bottom: no hover gap */
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: var(--fs-base);               /* match the main menu text size */
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    text-transform: lowercase;     /* lower-case dropdown words */
    color: var(--text-dark-grey);
}
.nav-dropdown-menu a.nav-link--blue   { color: var(--logo-blue); }
.nav-dropdown-menu a.nav-link--green  { color: var(--text-on-green); }
.nav-dropdown-menu a.nav-link--orange { color: var(--text-orange); }
.nav-dropdown-menu a:hover { background: var(--logo-blue-tint); }
.nav-new {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--text-orange);
    margin-left: 6px;
}

.nav-menu li.nav-search {
    display: flex;
    align-items: center;
}

.nav-search-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-dark-grey);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: color 0.18s;
}

.nav-search-toggle:hover {
    color: var(--logo-blue);
}

.nav-search-toggle svg {
    display: block;
    position: relative;
    top: 3px;
}

/* Inline search box revealed when the magnifying glass is clicked. */
.nav-search-form {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}

.nav-search.open .nav-search-form {
    width: 200px;
    opacity: 1;
    margin-left: 10px;
}

.nav-search-form input {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: var(--fs-sm);
    color: var(--text-dark-grey);
    outline: none;
}

.nav-search-form input:focus {
    border-color: var(--logo-blue);
}

.nav-menu li.nav-api a {
    /* the .btn-fill-blue.btn-sm classes already style it; reset menu styles */
    color: #fff;
    font-weight: var(--fw-medium);
}

/* Hamburger toggle: hidden on desktop, shown <=900px (see mobile nav block).
   Three bars that morph into an X when .main-nav is .open. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-dark-grey);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.main-nav.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.main-nav.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.main-nav.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav (<=900px): collapse the row into a hamburger-triggered panel that
   drops below the bar. Dropdowns (products/stories) expand inline instead of on
   hover, since touch has no hover. */
@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 16px;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 12px 24px rgba(0,0,0,0.10);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .main-nav.open .nav-menu { display: flex; }
    .nav-menu > li { width: 100%; }
    .nav-menu > li > a,
    .nav-dropdown-toggle { display: block; padding: 12px 24px; }

    /* Dropdowns expand inline (no hover, no absolute panel). */
    .nav-dropdown { display: block; align-self: stretch; }
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0;
        padding: 0 0 8px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .nav-dropdown-menu a { padding: 8px 40px; }   /* indent sub-items */

    /* Search + API stack full width inside the panel. */
    .nav-menu li.nav-search { padding: 8px 24px; }
    .nav-search.open .nav-search-form { width: 100%; }
    .nav-menu li.nav-api { padding: 12px 24px; }
    .nav-menu li.nav-api a { display: inline-block; }
}

/* ----------------------------------------------------------------------------
   10. SECTION INTRO BLOCKS
   Centered heading and/or paragraph for page section introductions
   Reusable across any page via StreamField
   ---------------------------------------------------------------------------- */
.section-intro-wrapper {
    padding: var(--block-space) 0;
    text-align: center;
    background: white;
}

/* One source of truth for the section-intro width: heading + description span
   exactly 1140px (clear contrast with the 784px page intro). The container is
   border-box with 20px side padding, so 1140 content + 40 padding = 1180px
   max-width. Heading + description fill it — no per-element max-widths. */
.section-intro-wrapper .container {
    max-width: 1180px;
}

/* Section heading — size + spacing only; family/colour/weight/tracking inherit h1-h6. */
.section-intro-wrapper h2 {
    margin-bottom: 10px;
}

/* Playful hand-drawn dotted "streamers" flanking the heading. Heading is pinned
   to true page centre by equal 1fr side columns; the asymmetric streamer lengths
   (set per heading length in the block) hug inward. Colour = product category
   (Built/Veg/Terrain), set on the block; the dots use currentColor. */
.section-intro-streamers {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    margin-bottom: 16px;
}
.section-intro-streamers h2 { margin: 0; white-space: nowrap; }
.section-intro-streamer { display: block; }
.section-intro-streamers > svg:first-of-type { justify-self: end; }
.section-intro-streamers > svg:last-of-type  { justify-self: start; }
.section-intro-streamers.is-blue   { color: var(--logo-blue); }
.section-intro-streamers.is-green  { color: var(--logo-green); }
.section-intro-streamers.is-orange { color: var(--logo-orange); }
/* On product pages, streamers always take the product family colour (overrides
   the block's own colour), so every product page is colour-coordinated. */
body.product--blue   .section-intro-streamers { color: var(--logo-blue); }
body.product--green  .section-intro-streamers { color: var(--logo-green); }
body.product--orange .section-intro-streamers { color: var(--logo-orange); }
@media (max-width: 768px) {
    .section-intro-streamers { grid-template-columns: 1fr; }
    .section-intro-streamers > svg { display: none; }
    .section-intro-streamers h2 { white-space: normal; }
}

.section-intro-wrapper p {
    font-size: var(--fs-lg);          /* 20px */
    line-height: 1.6;
    font-weight: var(--fw-medium);    /* 500 — slightly bolder than body, more present */
    color: var(--text-dark-grey);     /* #333, lifts it above the #666 page-intro text below */
}

/* Split variant: two fixed 350px halves with an 84px gap = 784px of content,
   centred on the page. Width lives on the grid itself (not the container) so it
   spans exactly 784px regardless of the wrapper width. */
.section-intro-wrapper--split { text-align: left; }
.section-intro-split {
    display: grid;
    /* Flexible halves so the two text boxes shrink to fit the stat-card box. */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* Same outer size as the stat card (784px), with roomier 32px side padding
       between the text and the border. */
    max-width: 784px;
    margin: 0 auto;
    align-items: center;
    background: white;
    border: 0.5px solid var(--text-light-grey);   /* var(--hairline) */
    border-radius: 15px;
    padding: 22px 32px;
}
.section-intro-split h2 { margin: 0; }
.section-intro-split p { margin: 0; }
@media (max-width: 768px) {
    .section-intro-split { grid-template-columns: 1fr; gap: 16px; }
}

/* ----------------------------------------------------------------------------
   PAGE INTRO TEXT  (Figma "PageIntroText")
   Lead paragraph under the hero banner; centred column, no heading.
   ---------------------------------------------------------------------------- */
.page-intro-wrapper {
    padding: var(--block-space) 0 8px;
    background: white;
}

/* When page-intro-text follows a section-intro directly, the two paddings stack
   to a 60px gap that reads too wide. Drop the page-intro's top padding and trim
   the section-intro's bottom so only a small gap remains. */
.section-intro-wrapper:has(+ .page-intro-wrapper) {
    padding-bottom: 12px;   /* was 30px */
}
.section-intro-wrapper + .page-intro-wrapper {
    padding-top: 0;
}

.page-intro-text {
    max-width: 784px;
    margin: 0 auto;
    font-size: var(--fs-lg);          /* 20px */
    line-height: 1.6;
}

/* The /samples/ page intro (.samples-intro-text) reuses this whole treatment
   (typography + bullets) so the two intros read identically; only the samples
   layout (flex row beside the bundle CTA) differs, set in the FREE SAMPLES
   section. Keep the two intros in sync by editing these shared selectors. */
.page-intro-text p,
.samples-intro-text p {
    margin-bottom: 1.2rem;
}

.page-intro-text p:last-child,
.samples-intro-text p:last-child {
    margin-bottom: 0;
}

/* Lists: indent the whole list in from the text column, and (matching the
   richtext house style) use the brand-green round bullet with the text set
   further in than the bullet. */
.page-intro-text ul,
.page-intro-text ol,
.samples-intro-text ul,
.samples-intro-text ol {
    margin: 0 0 1.2rem;
    padding-left: 1.25rem;            /* bullets sit in from the text margin */
}
.page-intro-text ol,
.samples-intro-text ol { padding-left: 2.6rem; }
.page-intro-text ul,
.samples-intro-text ul { list-style: none; }
.page-intro-text li,
.samples-intro-text li { margin: 0.4rem 0; }
.page-intro-text ul > li,
.samples-intro-text ul > li {
    position: relative;
    padding-left: 1.4rem;             /* text a bit further in than the bullet */
}
.page-intro-text ul > li::before,
.samples-intro-text ul > li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.8rem;             /* centred on the 20px line */
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--logo-green);    /* default (non-product pages) */
}
/* On product pages the bullet uses a fixed off-family colour so bullets never
   match the family-coloured streamers: blue->orange, orange->green, green->orange. */
body.product--blue   .page-intro-text ul > li::before { background: var(--logo-orange); }
body.product--orange .page-intro-text ul > li::before { background: var(--logo-green); }
body.product--green  .page-intro-text ul > li::before { background: var(--logo-orange); }

/* ----------------------------------------------------------------------------
   STATS CARD  (Figma "StatsCard")
   White card, 0.5px hairline border, 15px radius; blue value over green caption.
   ---------------------------------------------------------------------------- */
.stats-card-wrapper {
    padding: var(--block-space) 0;
    background: white;
}

.stats-card {
    max-width: 784px;
    margin: 0 auto;
    display: flex;
    align-items: center;                           /* centre the stat columns in the band */
    min-height: var(--band-height);                /* shared 100px band height (see ribbon) */
    background: white;
    border: 0.5px solid var(--text-light-grey);   /* var(--hairline) */
    border-radius: 15px;
    padding: 22px 16px;
}

.stats-card-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 0 12px;
}

.stats-card-value {
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);           /* 24px */
    line-height: 1.2;
    color: var(--logo-blue);     /* #006699 */
}

.stats-card-label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);         /* 14px */
    line-height: 1.3;
    color: var(--logo-green);    /* #669933 */
}

@media (max-width: 640px) {
    .stats-card {
        flex-direction: column;
        gap: 20px;
   }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
   }
    to {
        opacity: 1;
        transform: translateY(0);
   }
}

/* ----------------------------------------------------------------------------
   12. ACCORDION
   ---------------------------------------------------------------------------- */
.accordion-wrapper {
    padding: var(--block-space) 16px;
    background: white;
}

/* 784px content column to match the Figma "Accordion" component (78:37) */
.accordion {
    max-width: 784px;
    margin: 0 auto;
}

.accordion-title {
    margin-bottom: 16px;
}

.accordion-item {
    border-bottom: .5px solid var(--hairline);   /* Figma Text/Secondary hairline */
}

/* Question row: text left, triangle indicator right (Inter 20px / #333) */
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    color: var(--text-dark-grey);
    cursor: pointer;
    list-style: none;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

/* CSS triangle: brand-green and right-pointing while collapsed */
.accordion-indicator {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--logo-green);
    transition: transform 0.2s ease;
}

/* Open: question + triangle turn brand-blue, triangle rotates to point down */
details[open] > .accordion-header {
    color: var(--logo-blue);
}

details[open] > .accordion-header .accordion-indicator {
    transform: rotate(90deg);
    border-left-color: var(--logo-blue);
}

.accordion-content {
    padding: 0 16px 16px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-dark-grey);
}

.accordion-content > * {
    max-width: 640px;
}

/* ----------------------------------------------------------------------------
   13. FOOTER — matches Figma Footer (23:149): logo + 3-line contact, 100px tall
   ---------------------------------------------------------------------------- */
/* Footer: sitewide link hub + NAP. Brand-blue ground, darker legal bar; all
   colours are existing brand tokens. Inherits Inter (body font). */
.main-footer {
    background: var(--logo-blue);
    color: var(--text-inverse);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: grid;
    grid-template-columns: 1.5fr 1.15fr 1fr 1.2fr;
    gap: 48px;
}
.main-footer a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    transition: color 0.15s ease;
}
.main-footer a:hover { color: var(--text-inverse); }
.main-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.footer-col-h {
    margin: 0 0 18px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-inverse);
}
.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Brand column */
.footer-brand-logo { display: block; width: 188px; margin: 2px 0 18px; }
.footer-brand-logo img { width: 100%; height: auto; display: block; }
.footer-brand-desc { margin: 0 0 22px; color: rgba(255,255,255,0.72); max-width: 34ch; }
.footer-brand-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;
    color: rgba(255,255,255,0.72);
}
.footer-social:hover {
    color: var(--text-inverse);
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.06);
}
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }
/* CTA reuses the standard .btn (size + pill shape); a white fill with brand-grey
   text. Scoped under .main-footer so the colour beats the generic footer-link rule. */
.main-footer .footer-cta {
    background: #fff;
    border-color: #fff;
    color: var(--text-dark-grey);
}
.main-footer .footer-cta:hover {
    background: #f1f7fa;
    color: var(--text-dark-grey);
}

/* Secondary product link (e.g. the Buildings API) shown under its product, with
   a little elbow arrow and one step smaller. */
.footer-sublink {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: var(--fs-xs);
}
.footer-elbow { color: rgba(255,255,255,0.45); }

/* Products column, grouped by family */
.footer-fam { display: flex; flex-direction: column; gap: 24px; }
.footer-fam-label {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 11px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-inverse);
}
.footer-fam-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.footer-fam-dot--built { background: #fff; }
.footer-fam-dot--veg { background: var(--logo-green); }
.footer-fam-dot--terrain { background: var(--logo-orange); }
.footer-new {
    margin-left: 7px; font-size: 0.62rem; font-weight: var(--fw-bold);
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--logo-orange);
}

/* Contact / NAP block */
.footer-nap { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-direction: column; gap: 10px; }
.footer-nap-row { display: flex; gap: 11px; align-items: flex-start; }
.footer-nap-row svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.52); flex: 0 0 auto; margin-top: 3px; }
.footer-nap address { font-style: normal; color: rgba(255,255,255,0.72); }

/* Bottom legal bar */
.footer-bottom { background: var(--logo-blue-dark); color: rgba(255,255,255,0.52); }
.footer-bottom-inner {
    max-width: 1200px; margin: 0 auto; padding: 18px 24px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs);
}
.footer-legal { display: flex; gap: 10px; align-items: center; }
.footer-legal-sep { color: rgba(255,255,255,0.28); }

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer-inner { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------------------------------
   14. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------------------------- */

/* Tablet and Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: var(--fs-3xl);
   }
    
    h2 {
        font-size: var(--fs-2xl);
   }
}

/* ----------------------------------------------------------------------------
   16. BANNER SECTION
   Shorter, full-width hero-style section for product pages
   ---------------------------------------------------------------------------- */
.banner-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: var(--block-space) 0;   /* same 32px inter-block rhythm as other blocks */
}

.banner-wrapper.height-medium {
    height: 400px;
}

.banner-wrapper.height-large {
    height: 600px;
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.banner-overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;                 /* keep the card off the edges on small screens */
}

/* Centred white rounded card (mirrors the product hero card) carrying the
   banner text, so we drop the busy white-text-on-dark-scrim treatment. */
.banner-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px 40px;
    max-width: 760px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.banner-heading { margin: 0; }     /* size/family inherit h2 */

.banner-subheading {
    color: var(--text-body);       /* neutral supporting text; heading carries the colour */
    font-size: var(--fs-lg);
    margin: 12px 0 0;
}

/* Heading colour choices — brand text colours only, all readable on white. */
.banner-text-dark   .banner-heading { color: var(--text-dark-grey); }
.banner-text-blue   .banner-heading { color: var(--logo-blue); }
.banner-text-green  .banner-heading { color: var(--text-on-green); }
.banner-text-orange .banner-heading { color: var(--text-orange); }

/* ============================================================================
   BUTTON SYSTEM — Figma component (12 variants)
   Anatomy: pill shape (border-radius 100px), 1px solid border.
   Modifiers: .btn-{fill|stroke}-{blue|green|orange}  +  .btn-lg / .btn-sm
   Default size if no modifier: large.
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid transparent;
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Sizes */
.btn-lg { padding: 12px 24px; font-size: var(--fs-base); }
.btn-sm { padding: 8px 16px;  font-size: var(--fs-sm); }
.btn:not(.btn-lg):not(.btn-sm) { padding: 12px 24px; font-size: var(--fs-base); }  /* default = large */

/* Fill variants */
.btn-fill-blue {
    background-color: var(--logo-blue);
    border-color: var(--logo-blue);
    color: #fff;
}
.btn-fill-blue:hover {
    background-color: var(--logo-blue-hover);
    border-color: var(--logo-blue-hover);
    box-shadow: 0 4px 12px rgba(0, 102, 153, 0.30);
}

.btn-fill-green {
    background-color: var(--logo-green);
    border-color: var(--logo-green);
    color: #fff;
}
.btn-fill-green:hover {
    background-color: var(--logo-green-hover);
    border-color: var(--logo-green-hover);
    box-shadow: 0 4px 12px rgba(102, 153, 51, 0.30);
}

.btn-fill-orange {
    background-color: var(--logo-orange);
    border-color: var(--logo-orange);
    color: var(--text-dark-grey);   /* dark text on light orange */
}
.btn-fill-orange:hover {
    background-color: var(--logo-orange-hover);
    border-color: var(--logo-orange-hover);
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.30);
}

/* Pressed/active: dark variants (the moment of click, not hover). */
.btn-fill-blue:active  { background-color: var(--logo-blue-dark);  border-color: var(--logo-blue-dark);  transform: translateY(0); }
.btn-fill-green:active { background-color: var(--logo-green-dark); border-color: var(--logo-green-dark); transform: translateY(0); }

/* Keyboard focus ring (accessible, on-brand). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Stroke variants */
.btn-stroke-blue {
    background-color: #fff;
    border-color: var(--logo-blue);
    color: var(--logo-blue);
}
.btn-stroke-blue:hover {
    background-color: var(--logo-blue);
    color: #fff;
}

.btn-stroke-green {
    background-color: #fff;
    border-color: var(--logo-green);
    color: var(--text-on-green);
}
.btn-stroke-green:hover {
    background-color: var(--logo-green);
    color: #fff;
}

.btn-stroke-orange {
    background-color: #fff;
    border-color: var(--logo-orange);
    color: var(--text-orange);   /* brand orange text, like blue/green strokes (AA on white) */
}
.btn-stroke-orange:hover {
    background-color: var(--logo-orange);
    color: var(--text-dark-grey);
}

.accordion-column .accordion {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   21. RESPONSIVE - PRODUCT PAGE COMPONENTS
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .banner-wrapper.height-medium {
        height: 300px;
   }
    
    .banner-wrapper.height-large {
        height: 400px;
   }
    
    .banner-subheading {
        font-size: var(--fs-base);
   }
}

/* Column content styling */
.column h3 {
    color: var(--logo-blue);
    margin-bottom: 15px;
}

.column p {
    margin-bottom: 15px;
}

.column-image {
    margin: 20px 0;
}

.column-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.column-list {
    list-style: none;
    padding: 0;
}

.column-list li {
    padding: 10px 0 10px 25px;
    position: relative;
    line-height: 1.6;
}

/* Custom bullet points using brand color */
.column-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--logo-green);
    font-size: 1.25rem;
}

/* ----------------------------------------------------------------------------
   24. INFO BUTTON COMPONENT
   Inline info tooltips that can be placed anywhere in text
   ---------------------------------------------------------------------------- */

/* Info button - inline with text */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--logo-green);
    color: white;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    font-style: normal;
    cursor: pointer;
    margin: 0 4px;
    vertical-align: middle;
    position: relative;
    transition: all 0.2s ease;
    border: none;
    font-family: var(--font-serif-display);
}

.info-btn:hover {
    background: var(--logo-green-dark);
    transform: scale(1.1);
}

/* Info popup box */
.info-popup {
    display: none;
    position: absolute;
    z-index: 1000;
    background: white;
    border: 2px solid var(--logo-green);
    border-radius: 6px;
    padding: 15px;
    min-width: 250px;
    max-width: 350px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-dark-grey);
    margin-top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

/* When active */
.info-popup.active {
    display: block;
    animation: popupFadeIn 0.2s ease;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
   }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
   }
}

/* Arrow pointing to button */
.info-popup::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--logo-green);
}

/* Close button inside popup */
.info-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--logo-green);
    font-size: var(--fs-md);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 1;
}

.info-popup-close:hover {
    color: var(--logo-green-dark);
}

/* Links inside popup */
.info-popup a {
    color: var(--logo-blue);
    text-decoration: none;
    font-weight: var(--fw-medium);
}

.info-popup a:hover {
    text-decoration: underline;
}

/* Popup positioning variants */
.info-popup.position-above {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
    margin-top: 0;
}

.info-popup.position-above::before {
    top: auto;
    bottom: -8px;
    border-bottom: none;
    border-top: 8px solid var(--logo-green);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .info-popup {
        position: fixed;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90vw;
        margin: 0;
   }
    
    .info-popup::before {
        display: none;
   }
    
    /* Backdrop overlay on mobile */
    .info-popup.active::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: -1;
   }
}

/* ============================================================================
   PRODUCT PAGE — NEW BLOCKS (pp-hero + 11 blocks + 2 shared)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PRODUCT HERO — BANNER LAYOUT  (Figma product hero)
   Full-width photo with a centred white overlay card and two pill CTAs.
   ---------------------------------------------------------------------------- */
.pp-hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed height (not min-height) so the banner is identical on every product
       page regardless of how tall the overlay card is — no jump when switching
       products. Comfortably fits the tallest card (2-line heading + 2-line
       tagline + CTAs). Mobile reverts to auto below so narrow text never clips. */
    height: 460px;
    padding: 48px 24px;
    overflow: hidden;
    background: #2a3b2f;             /* fallback behind the photo */
}
.pp-hero-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.pp-hero-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pp-hero-banner-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 34px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}
.pp-hero-banner-heading {
    margin-bottom: 12px;   /* size/family/colour all inherit h1 */
}
.pp-hero-banner-tagline {
    font-size: var(--fs-xl);                   /* 24px */
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: var(--text-dark-grey);
    margin-bottom: 24px;
}
/* When the tagline is rendered from a RichText intro (e.g. About), the inner
   <p> would add stray margins; flatten it and drop the trailing gap. */
.pp-hero-banner-tagline p { margin: 0; }
.pp-hero-banner-card .pp-hero-banner-tagline:last-child { margin-bottom: 0; }
.pp-hero-banner-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Pill CTAs (Figma button style: rounded-100px, Inter Medium 16px) */
.btn-pill {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);                     /* 16px */
    line-height: 1;
    color: #fff;
    text-decoration: none;
    transition: filter 0.18s, transform 0.18s;
}
.btn-pill:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-pill-blue { background: var(--logo-blue); }
.btn-pill-green { background: var(--logo-green); }

@media (max-width: 640px) {
    .pp-hero-banner { height: auto; min-height: 360px; }   /* flow on mobile so wrapped text never clips */
    .pp-hero-banner-card { padding: 32px 24px; border-radius: 24px; }
}

/* Breadcrumb — slim bar under the hero (Home / Products / this product).
   Links take the product family colour to match the page (see product--*). */
.pp-breadcrumb {
    margin: 20px 0 4px;
    font-size: var(--fs-sm);
    color: var(--text-dark-grey);
}
.pp-breadcrumb a { color: var(--logo-blue); text-decoration: none; }
.pp-breadcrumb a:hover { text-decoration: underline; }
.pp-breadcrumb-sep { margin: 0 8px; color: var(--text-light-grey); }
.pp-breadcrumb-current { color: var(--text-dark-grey); }
.product--green  .pp-breadcrumb a { color: var(--text-on-green); }
.product--orange .pp-breadcrumb a { color: var(--text-orange); }

/* ----------------------------------------------------------------------------
   COMPARE TWO  (Figma "CompareTwo")
   Two square images side by side, each with a caption below.
   ---------------------------------------------------------------------------- */
.compare-two-wrapper { padding: var(--block-space) 0; }
.compare-two {
    display: flex;
    gap: 20px;
    max-width: 1140px;
    margin: 0 auto;
}
.compare-two-item {
    flex: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.compare-two-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
.compare-two-caption {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);       /* 16px */
    color: var(--text-dark-grey);
    text-align: center;
}
@media (max-width: 640px) {
    .compare-two { flex-direction: column; }
}

/* ----------------------------------------------------------------------------
   FULL-WIDTH IMAGE  (Figma "FullWidthImage")
   ---------------------------------------------------------------------------- */
.fullwidth-photo-wrapper { padding: var(--block-space) 0; }
.fullwidth-photo-img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

/* ----------------------------------------------------------------------------
   VIDEO EMBED  (YouTube/Vimeo, responsive 16:9)
   With a quote: video 2/3 + quote 1/3. Without: video spans full content width.
   ---------------------------------------------------------------------------- */
.video-embed { padding: 24px 20px; }
.video-embed-inner {
    max-width: 1140px;
    margin: 0 auto;
}
/* Two-up layout only when a quote is present. */
.video-embed--with-quote .video-embed-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}
.video-embed-main { min-width: 0; }   /* let the column shrink; keeps 16:9 honest */

/* Title: sits above the video, constrained to the video's width (its column). */
.video-embed-heading { margin: 0 0 12px; }   /* an <h3>; size/family inherit h1-h6 */

.video-embed-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;   /* 16:9 */
    height: 0;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
}
.video-embed-frame iframe,
.video-embed-frame object,
.video-embed-frame embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Pull-quote in the 1/3 column. */
.video-embed-quote { margin: 0; }
.video-embed-quote blockquote {
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid var(--logo-blue);
    font-family: var(--font-serif-display);
    font-size: var(--fs-lg);
    line-height: 1.4;
    color: var(--text-dark-grey);
}

/* Stack on tablet/mobile: video full width, quote below. */
@media (max-width: 860px) {
    .video-embed--with-quote .video-embed-inner {
        grid-template-columns: 1fr;
        gap: 20px;
   }
}

/* ----------------------------------------------------------------------------
   FLEXIBLE IMAGE  (width + alignment + optional link + optional companion text)
   ---------------------------------------------------------------------------- */
.flex-image { padding: 24px 20px; }
.flex-image-inner { max-width: 1140px; margin: 0 auto; }
.flex-image-img { display: block; width: 100%; height: auto; border-radius: 15px; }
.flex-image-media a { display: block; }

/* --- No companion text: size the image and align it within the full width --- */
.flex-image--w-fill:not(.flex-image--has-text)       .flex-image-media { width: 100%; }
.flex-image--w-two-thirds:not(.flex-image--has-text) .flex-image-media { width: 66.6667%; }
.flex-image--w-half:not(.flex-image--has-text)       .flex-image-media { width: 50%; }
.flex-image--w-one-third:not(.flex-image--has-text)  .flex-image-media { width: 33.3333%; }

.flex-image--left:not(.flex-image--has-text)   .flex-image-media { margin-right: auto; }
.flex-image--center:not(.flex-image--has-text) .flex-image-media { margin-left: auto; margin-right: auto; }
.flex-image--right:not(.flex-image--has-text)  .flex-image-media { margin-left: auto; }

/* --- With companion text: image fraction + text in the remaining columns --- */
.flex-image--has-text .flex-image-inner {
    display: flex;
    gap: 32px;
    align-items: center;
}
.flex-image--has-text .flex-image-media,
.flex-image--has-text .flex-image-text { min-width: 0; }      /* allow shrink */

.flex-image--w-two-thirds.flex-image--has-text .flex-image-media { flex: 2; }
.flex-image--w-two-thirds.flex-image--has-text .flex-image-text { flex: 1; }
.flex-image--w-half.flex-image--has-text .flex-image-media,
.flex-image--w-half.flex-image--has-text .flex-image-text { flex: 1; }
.flex-image--w-one-third.flex-image--has-text .flex-image-media { flex: 1; }
.flex-image--w-one-third.flex-image--has-text .flex-image-text { flex: 2; }
/* Full width + companion text has no side room: fall back to two-thirds split. */
.flex-image--w-fill.flex-image--has-text .flex-image-media { flex: 2; }
.flex-image--w-fill.flex-image--has-text .flex-image-text { flex: 1; }

/* Right-aligned puts the image on the right; center behaves like left here. */
.flex-image--right.flex-image--has-text .flex-image-inner { flex-direction: row-reverse; }

.flex-image-text { font-size: var(--fs-base); line-height: 1.6; }
.flex-image-text > :first-child { margin-top: 0; }
.flex-image-text > :last-child { margin-bottom: 0; }

/* Responsive: stack the companion layout; let small images grow on phones. */
@media (max-width: 860px) {
    .flex-image--has-text .flex-image-inner { flex-direction: column; gap: 20px; }
    .flex-image--has-text .flex-image-media { width: 100%; }
}
@media (max-width: 540px) {
    .flex-image:not(.flex-image--has-text) .flex-image-media { width: 100%; }
}

/* ----------------------------------------------------------------------------
   VALUE PROP CARDS  (Figma "ValueProp")
   Bordered cards: circular icon + brand-coloured title + description.
   ---------------------------------------------------------------------------- */
.value-prop-wrapper { padding: var(--block-space) 0; }
.value-prop-heading,
.product-cards-heading {
    text-align: center;
    margin-bottom: 28px;
}
.value-prop-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}
.vp-card {
    flex: 1;
    max-width: 280px;
    border: 1px solid var(--text-light-grey);   /* var(--hairline) */
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
}
.vp-card-icon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}
.vp-card-title {
    text-align: center;   /* an <h3>; family/size inherit h1-h6; colour from the --blue/green/orange modifier */
}
.vp-card-title--blue   { color: var(--logo-blue); }
.vp-card-title--green  { color: var(--logo-green); }
.vp-card-title--orange { color: var(--text-orange); }   /* Text/Orange */
.vp-card-desc {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);             /* 16px */
    line-height: 1.4;
    text-align: center;
}

/* ----------------------------------------------------------------------------
   PRODUCT CARDS  (Figma "ProductCard")
   White card, coloured border, image + name + description + outline pill.
   ---------------------------------------------------------------------------- */
.product-cards-wrapper { padding: var(--block-space) 0; }
.product-cards-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}
.pc-card {
    flex: 1;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--logo-blue);
    border-radius: 15px;
    overflow: hidden;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.pc-card--blue   { border-color: var(--logo-blue); }
.pc-card--green  { border-color: var(--logo-green); }
.pc-card--orange { border-color: var(--logo-orange); }
.pc-card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 249;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
.pc-card-name {
    text-align: center;
    padding: 0 16px;   /* an <h3>; family/size/colour inherit h1-h6 */
}
.pc-card-desc {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);         /* 14px */
    color: var(--text-dark-grey);
    text-align: center;
    padding: 0 16px;
}
.pc-card-btn {
    display: inline-block;
    margin-top: auto;   /* pin to the card's base so buttons line up across cards */
    padding: 8px 16px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid var(--logo-blue);
    color: var(--logo-blue);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);         /* 14px */
    line-height: 1;
    text-decoration: none;
    transition: filter 0.18s, transform 0.18s;
}
.pc-card-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pc-card-btn--blue   { border-color: var(--logo-blue);   color: var(--logo-blue); }
.pc-card-btn--green  { border-color: var(--logo-green);  color: var(--logo-green); }
.pc-card-btn--orange { border-color: var(--logo-orange); color: var(--text-orange); }   /* Text/Orange */

@media (max-width: 640px) {
    .value-prop-grid,
    .product-cards-grid { flex-direction: column; align-items: center; }
}

/* Related products at the foot of a story (reuses the .pc-card kit). */
.story-related { margin-top: 56px; }
.story-related-heading { margin-bottom: 24px; }

/* ----------------------------------------------------------------------------
   IMAGERY BANNER
   ---------------------------------------------------------------------------- */
/* Product description block — constrained to content width */
.block-product_description {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--text-dark-grey);
}

.imagery-banner { width: 100%; overflow: hidden; }
.ib-wrapper { position: relative; line-height: 0; }
.ib-image { width: 100%; height: auto; display: block; }
.ib-overlay {
    position: absolute; padding: 18px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    color: #fff; font-size: var(--fs-base); line-height: 1.5;
}
.ib-overlay p { margin: 0; }
.ib-overlay--bottom-left  { bottom: 0; left: 0; right: 0; text-align: left; }
.ib-overlay--bottom-right { bottom: 0; left: 0; right: 0; text-align: right; }
.ib-overlay--centre       { top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; }
.ib-caption {
    text-align: center; font-size: var(--fs-xs); 
    padding: 10px 24px; background: #f9f9f9;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   LAYER VIEWER
   ---------------------------------------------------------------------------- */
.layer-viewer-section { padding: var(--block-space) 0; background: #fff; }
.layer-viewer-section .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.lv-container {
    position: relative; max-width: 860px; margin: 0 auto;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.lv-base, .lv-layer { width: 100%; display: block; }
.lv-layer {
    position: absolute; top: 0; left: 0;
    opacity: 0;
    transition: opacity 0.25s ease;   /* legacy fade */
}
.lv-layer.lv-layer--visible { opacity: 1; }
.lv-location {
    position: absolute; bottom: 12px; left: 16px;
    background: rgba(0,0,0,0.55); color: #fff;
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.05em;
    padding: 4px 10px; border-radius: 4px;
}
.lv-controls {
    max-width: 860px; margin: 16px auto 0;
    padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 16px;
    background: var(--light-gray); border-radius: 8px;
}
.lv-toggle-label {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-dark-grey); cursor: pointer;
}
.lv-toggle-label--disabled { opacity: 0.55; cursor: default; }
.lv-toggle { accent-color: var(--logo-blue); width: 18px; height: 18px; cursor: pointer; }
.lv-placeholder {
    padding: 64px 24px; text-align: center;
    font-size: var(--fs-sm); 
    background: var(--light-gray); border-radius: 8px;
}

.final-cta { background: #fff; padding: 64px 40px; text-align: center; max-width: 1140px; margin: 0 auto; }
.final-cta h2 {
    margin-bottom: 12px;
}
.final-cta p { font-size: var(--fs-md); margin: 0 auto 28px; max-width: 600px; line-height: 1.6; }
.cta-pair { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-sub { margin-top: 18px; font-size: var(--fs-sm); color: var(--text-light-grey); }

/* ============================================================================
   FULL-SPAN RIBBON
   Soft-shadow card (no border): an optional hand-drawn fragment bleeding to the
   card's top & bottom edges + h2 + pill button, hugging each other (image 28px
   from the heading, button 40px from it) and centred, capped at 1440px. The
   card is a fixed 100px tall (var(--band-height), matching the stats card) and
   the image fills it (height:100% + cover) so its aspect ratio can't inflate it.
   ============================================================================ */
.ribbon {
    background: #fff;
    padding: var(--block-space) 20px;
}
.ribbon-inner {
    display: flex;
    align-items: center;
    gap: 40px;                                   /* heading -> button gap */
    width: fit-content;                          /* hug the content, not the page */
    max-width: min(1440px, 100%);                /* never exceed 1440px */
    margin: 0 auto;                              /* centre the group */
    height: var(--band-height);                  /* shared 100px band height (matches stats card) */
    padding: 0 22px;                             /* no vertical padding so the image bleeds */
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .10);   /* mild shadow, no border */
}
.ribbon-left {
    display: flex;
    align-items: center;
    gap: 28px;                                   /* fragment -> heading gap */
    height: 100%;
}
.ribbon-frag {
    height: 100%;                                /* bleed to the card's top & bottom edges */
    width: 116px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.ribbon-heading { margin: 0; }                   /* Source Serif 4 32px, inherits h2 */
.ribbon-inner .btn { flex-shrink: 0; align-self: center; }

@media (max-width: 640px) {
    .ribbon-inner, .ribbon-left { flex-direction: column; height: auto; gap: 16px; text-align: center; }
    .ribbon-inner { padding: 20px 22px; }
    .ribbon-frag { height: 90px; width: auto; }
}

/* ============================================================================
   PHASE 3.5 BLOCKS (SampleLinks, ClientLogos, Jotform, Mapbox, Juxtapose)
   ============================================================================ */

.sample-links { padding: var(--block-space) 0; background: #fff; }
.sample-links .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sl-heading { margin-bottom: 12px; }   /* inherits canonical h2 */
.sl-description { font-size: var(--fs-base); color: var(--text-light-grey); margin-bottom: 24px; max-width: 700px; margin-left: auto; margin-right: auto; }
.sl-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.jotform-embed { padding: 32px 0; }
.jotform-embed .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.jf-heading { margin-bottom: 6px; }   /* tight to the form, inherits canonical h2 */
.jf-iframe { width: 100%; border: 1px solid var(--border-light); border-radius: 4px; }

.juxtapose-slider { padding: 32px 0; }
.juxtapose-slider .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.juxtapose-slider .juxtapose { width: 100%; }

/* ============================================================================
   STANDARDPAGE LAYOUT
   Hero reuses the product banner+card (.pp-hero-banner). Image-less pages get a
   clean centred title (.page-header); intro renders below.
   ============================================================================ */

.page-header { padding: 56px 0 16px; text-align: center; }
.page-header .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* .page-header h1 inherits the canonical h1 (serif #333, 48px). */
.page-intro { padding: 24px 0; background: #fff; }
.page-intro .container { max-width: 784px; margin: 0 auto; padding: 0 24px; font-size: var(--fs-md); line-height: 1.6; }
/* Samples-page intro heading (the "lead" field): canonical heading treatment
   (Source Serif / #333, inherited from h2), centred like other page headings. */
.samples-intro-heading { text-align: center; margin: 0 0 16px; }

/* Contact page: match the products-landing header treatment (centred H1 + a 20px
   centred description), keep the form and "Reach us" panel on one consistent
   column, and give the panel's three sub-headings a uniform size with clear
   separation. Scoped to .page-contact so the shared blocks elsewhere are unchanged. */
.page-contact .page-intro { padding: 4px 0 0; text-align: center; }
.page-contact .page-intro .container {
    max-width: 760px;                 /* same column + size as the /products lead */
    font-size: var(--fs-lg);          /* 20px */
    line-height: 1.5;
    color: var(--text-dark-grey);
}
.page-contact .jotform-embed { padding: 40px 0; }
.page-contact .flex-image { padding: 8px 24px 64px; }
.page-contact .jotform-embed .container,
.page-contact .flex-image-inner { max-width: 860px; }

/* "Reach us" / "Business hours" / "Our location": one size, more space between. */
.page-contact .flex-image-text h2,
.page-contact .flex-image-text h3,
.page-contact .flex-image-text h4 {
    font-size: var(--fs-lg);
    line-height: 1.2;
    margin-bottom: 6px;
}
.page-contact .flex-image-text p + h2,
.page-contact .flex-image-text p + h3,
.page-contact .flex-image-text p + h4 { margin-top: 32px; }

/* ============================================================================
   RICH TEXT PROSE  (.richtext block) + story article body (.story-content)
   Styled to the site: serif #333 headings, brand links, tidy bullets.
   ============================================================================ */
.richtext {
    max-width: 784px;
    margin: 0 auto;
    padding: 24px 20px;
    font-size: var(--fs-md);
    line-height: 1.6;
}
.richtext > :first-child { margin-top: 0; }
.richtext > :last-child { margin-bottom: 0; }

/* Prose headings: only spacing rhythm; size/family/colour all inherit h1-h6. */
.richtext h2, .story-content h2 { margin: 2rem 0 0.75rem; }
.richtext h3, .story-content h3 { margin: 1.75rem 0 0.5rem; }
.richtext h4, .story-content h4 { margin: 1.5rem 0 0.5rem; }

.richtext p, .story-content p { margin: 0 0 1rem; }

/* Prose links — the single source of truth for text-link colour across every
   rich-text container (StreamField blocks + page intros). Brand blue, underlined;
   hover darkens to blue-dark. :not(.btn) so a button placed in a content region
   keeps its own button colours instead of being repainted as a text link.
   Add any new rich-text container's class here so its links stay on-brand. */
.richtext a:not(.btn),
.story-content a:not(.btn),
.page-intro a:not(.btn),            /* StandardPage + Samples page intros */
.page-intro-text a:not(.btn),       /* page_intro_text block */
.accordion-content a:not(.btn),     /* accordion answers (product FAQs) */
.flex-image-text a:not(.btn),       /* flexible image companion text */
.cs-intro a:not(.btn),              /* clutter schema intro */
.sample-section-prose a:not(.btn),  /* /samples/ section prose */
.stories-intro a:not(.btn),         /* stories index + category intros */
.home-whatwedo-text a:not(.btn) {   /* home "what we do" */
    color: var(--logo-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.richtext a:not(.btn):hover,
.story-content a:not(.btn):hover,
.page-intro a:not(.btn):hover,
.page-intro-text a:not(.btn):hover,
.accordion-content a:not(.btn):hover,
.flex-image-text a:not(.btn):hover,
.cs-intro a:not(.btn):hover,
.sample-section-prose a:not(.btn):hover,
.stories-intro a:not(.btn):hover,
.home-whatwedo-text a:not(.btn):hover { color: var(--logo-blue-dark); }

.richtext ol, .story-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.richtext ul, .story-content ul { margin: 0 0 1rem; padding-left: 0; list-style: none; }
.richtext li, .story-content li { margin: 0.35rem 0; }
.richtext ul > li, .story-content ul > li { position: relative; padding-left: 1.4rem; }
.richtext ul > li::before, .story-content ul > li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.6rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--logo-green);   /* brand bullet */
}

.richtext blockquote, .story-content blockquote {
    margin: 1.25rem 0;
    padding-left: 16px;
    border-left: 3px solid var(--logo-blue);
    font-family: var(--font-serif-display);
    font-size: var(--fs-lg);
    color: var(--text-dark-grey);
}
.richtext hr, .story-content hr { border: 0; border-top: 1px solid var(--border-light); margin: 2rem 0; }

/* ============================================================================
   HOMEPAGE — matches Figma node 25:86 (EarthDefine-Wagtail / Home / Homepage)
   Layout: nav + hero are full-width; everything below sits inside a 1440px
   centered container.
   ============================================================================ */

/* Reusable container the design spec calls for (max-width 1440, side gutter) */
.home-whatwedo .container,
.home-capabilities .container,
.home-precision .container,
.home-trusted .container,
.home-final .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section headings shared across sections */
.home-section-heading {
    text-align: center;
    margin: 0 0 16px;
}

.home-section-subtitle {
    font-size: var(--fs-lg);
    line-height: 1.4;
    color: var(--text-dark-grey);
    text-align: center;
    margin: 0 auto 32px;
    max-width: 800px;
}

/* ---- 1. HERO ----------------------------------------------------------- */
.home-hero {
    position: relative;
    width: 100%;
    height: 569px;
    overflow: hidden;
    background: #f6faf6;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.home-hero-bg-placeholder {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        #f0f4f0 0,
        #f0f4f0 24px,
        #fff 24px,
        #fff 48px
    );
    z-index: 0;
}

.home-hero-card {
    position: relative;
    z-index: 1;
    width: min(784px, calc(100% - 48px));
    margin: 130px auto 0;
    background: #fff;
    border-radius: 34px;
    padding: 48px 56px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.home-hero-card-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
}


.home-hero-accent {
    font-size: var(--fs-xl);
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--logo-blue);   /* accent pop (no orange text) */
    text-align: right;
    margin: 0;
}

.home-hero-ctas {
    display: flex;
    flex-wrap: wrap;          /* wrap instead of overflowing on narrow widths */
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

.home-hero-trust {
    font-size: var(--fs-sm);
    line-height: 1.6;
    letter-spacing: -0.14px;
    color: var(--text-dark-grey);
    text-align: center;
    margin: 24px 0 0;
}

/* ---- 2. WHAT WE DO ----------------------------------------------------- */
.home-whatwedo { padding: 96px 0 48px; }

.home-whatwedo-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: start;
}

/* No kicker: centre the lead paragraph so it lines up with the hero card above
   (both cap at 784px), instead of hugging the left edge. */
.home-whatwedo-grid--full { grid-template-columns: 1fr; }
.home-whatwedo-grid--full .home-whatwedo-text { margin: 0 auto; }

.home-whatwedo-kicker {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    line-height: 1.6;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    color: var(--text-dark-grey);
    margin: 8px 0 0;
}

.home-whatwedo-text {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--text-dark-grey);
    max-width: 784px;
}

.home-whatwedo-text p {
    margin: 0 0 16px;
}

/* ---- 3. CAPABILITY GRID + HOVER CARDS --------------------------------- */
.home-capabilities { padding: 48px 0 96px; }

.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Row gap (40px) gives the taller hover cards room to spill without
       colliding with the row below; column gap stays 48px. */
    gap: 40px 48px;
    max-width: 900px;
    margin: 0 auto;
}

.capability-tile {
    position: relative;
    text-align: center;
    padding: 16px;
    cursor: default;
    /* Stable height so swapping the icon for the card doesn't reflow the grid.
       Fits the ~220px square sketch + label. */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Icon + label fade out on hover so the card can take their place in-line. */
.capability-icon,
.capability-label {
    transition: opacity 0.18s;
}
.capability-tile:hover .capability-icon,
.capability-tile:focus-within .capability-icon,
.capability-tile:hover .capability-label,
.capability-tile:focus-within .capability-label {
    opacity: 0;
}

.capability-icon {
    display: block;
    width: 100%;
    max-width: 220px;         /* fills more of the ~236px cell; scales down responsively */
    aspect-ratio: 1 / 1;      /* square box; draw sketches 1:1 (SVG or ~660px PNG) */
    height: auto;
    object-fit: contain;      /* scale to fit without distortion */
    margin: 0 auto;
}

.capability-icon-placeholder {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 auto;
    border: 2px dashed #bbb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: var(--text-light-grey);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.capability-label {
    font-size: var(--fs-lg);          /* 20px — matches the "we help you extract" lead text */
    font-weight: var(--fw-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dark-grey);
    margin: 12px 0 0;
}

/* Hover card — replaces the icon in place (centered over the tile), not floating.
   Width fits two ~135px pill columns; long pills drop to a full-width row. */
.capability-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    background: #fff;
    border: 1px solid var(--logo-blue);
    border-radius: 15px;
    padding: 16px;
    width: 280px;
    max-width: calc(100vw - 32px);   /* never exceed the viewport on small screens */
    min-height: 210px;               /* uniform card size; small cards center with top/bottom space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 10;
}

.capability-tile:hover .capability-card,
.capability-tile:focus-within .capability-card {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.capability-card-heading {
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);   /* 16px — up from 12px for readability */
    line-height: 1.3;
    color: var(--text-dark-grey);   /* #333 — the rest of the sentence */
    text-align: center;
    margin: 0;
}
/* The capability phrase ("slope data", "summary data", ...): Inter SemiBold, #000 */
.capability-card-heading .cap-term {
    font-weight: var(--fw-semibold);
    color: var(--text-dark-grey);
}

.capability-card .capability-card-btn {
    width: 100%;
    max-width: 152px;
    text-align: center;
    /* Pills sized to match the larger card heading. */
    font-size: var(--fs-sm);   /* 14px — up from 12px */
    padding: 7px 10px;
}

/* Product pills: two columns; long names drop to a full-width row at the bottom.
   minmax(0,1fr) + wrapping keeps a long pill from widening the whole card. */
.capability-card-btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
}
.capability-card-btns .capability-card-btn {
    width: auto;
    max-width: none;
    white-space: normal;
}
.capability-card-btn--wide { grid-column: 1 / -1; }

/* "explore all products" link — same font/size as the heading */
.capability-card-explore {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);   /* 14px — matches the larger card text */
    line-height: 1.3;
    color: var(--logo-blue);
    text-decoration: none;
    margin-top: 2px;
}
.capability-card-explore:hover { text-decoration: underline; }

/* Capability Card BLOCK — portable, always-visible card (CapabilityCardBlock).
   Reuses .capability-card-heading and the .btn-fill-{colour} button styles. */
.capability-card-section { padding: 32px 0; }
.cap-card {
    max-width: 320px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--logo-blue);
    border-radius: 15px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.cap-card .capability-card-heading { font-size: var(--fs-sm); }
.cap-card-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.cap-card .capability-card-btn {
    width: 100%;
    max-width: 200px;
    text-align: center;
}

/* ---- 4. PRECISION SAMPLES --------------------------------------------- */
.home-precision { padding: 64px 0; }

.home-precision-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    max-width: 800px;
    margin: 32px auto 0;
}

/* ---- 5. TRUSTED BY LEADERS -------------------------------------------- */
.home-trusted { padding: 64px 0; }

.home-trusted-logos {
    display: flex;
    justify-content: center;
    margin: 32px auto;
    max-width: 1196px;
}

.home-trusted-logos img {
    width: 100%;
    height: auto;
}

.home-trusted-subtitle {
    font-size: var(--fs-lg);
    line-height: 1.4;
    color: var(--text-dark-grey);
    text-align: center;
    margin: 32px auto 0;
    max-width: 800px;
}

/* ---- 6. FINAL CTA ----------------------------------------------------- */
.home-final {
    padding: 96px 0;
    text-align: center;
}

.home-final .home-section-subtitle {
    margin-bottom: 32px;
}

/* ---- RESPONSIVE ------------------------------------------------------- */
@media (max-width: 860px) {
    .home-hero { height: auto; padding-bottom: 32px; }
    .home-hero-card { margin-top: 32px; padding: 32px 24px; }
    .home-hero-card-grid { grid-template-columns: 1fr; }
    .home-hero-accent { text-align: left; font-size: var(--fs-lg); }
    .home-whatwedo-grid { grid-template-columns: 1fr; gap: 16px; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}

@media (max-width: 540px) {
    .capability-grid { grid-template-columns: 1fr; }
    /* Hero CTAs stack full-width so they never spill off a phone screen. */
    .home-hero-ctas { flex-direction: column; }
    .home-hero-ctas .btn { width: 100%; text-align: center; }
}

/* ----------------------------------------------------------------------------
   STORIES — index + category listing pages (brick wall + filter) and detail
   NOTE: card sizes/spans here are a sensible first pass; tune against the Figma
   Story Card component once it lands (proportions, padding, type treatments).
   ---------------------------------------------------------------------------- */
.stories {
    padding: 120px 16px 80px;   /* top room for the fixed nav */
    max-width: 1180px;
    margin: 0 auto;
}

.stories-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.stories-intro { flex-basis: 100%; color: var(--text-dark-grey); }

/* Category heading "Stories / news": same slot/style as the index "Stories"
   heading, with the "Stories" segment linking back to the index. */
.stories-title a { color: inherit; text-decoration: none; }
.stories-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.stories-title-type { text-transform: lowercase; }

/* Breadcrumb back to the Stories hub (wayfinding from /news/ and /news/<slug>/) */
.story-breadcrumb {
    margin-bottom: 16px;
    font-size: var(--fs-sm);
    color: var(--text-dark-grey);
}
.story-breadcrumb a { color: var(--logo-blue); text-decoration: none; }
.story-breadcrumb a:hover { text-decoration: underline; }
.story-breadcrumb-sep { margin: 0 8px; color: var(--text-light-grey); }

/* --- Filter dropdown (native <details> disclosure of real links) --- */
.story-filter { position: relative; }

.story-filter-current {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--logo-blue);
    border-radius: 999px;
    color: var(--logo-blue);
    font-weight: var(--fw-semibold);
    text-transform: lowercase;
    white-space: nowrap;
}
.story-filter-current::-webkit-details-marker { display: none; }
.story-filter-current::after {
    content: '';
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--logo-blue);
    transition: transform 0.2s ease;
}
.story-filter[open] .story-filter-current::after { transform: rotate(180deg); }

.story-filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 200px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: .5px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.story-filter-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-dark-grey);
    text-decoration: none;
    text-transform: lowercase;
}
.story-filter-menu a:hover { background: var(--logo-blue-tint); }
.story-filter-menu a[aria-current="page"] { font-weight: var(--fw-semibold); }
/* Option text coloured by type: news/research/case-studies blue, blog/tech-docs
   green; "all stories" (no class) stays the regular text colour. */
.story-filter-menu a.sf-blue   { color: var(--logo-blue); }
.story-filter-menu a.sf-green  { color: var(--text-on-green); }
.story-filter-menu a.sf-orange { color: var(--text-orange); }

/* --- The brick wall: dense auto-packing grid --- */
/* --- The Stories wall: uniform 2-up grid of content cards (Figma "Stories") --- */
.story-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Category listing pages (news/blog/case-studies/tech-docs/research): a little
   more breathing room than the dense all-stories index, so each filtered listing
   feels airy and in keeping with the product pages. The /stories/ index keeps its
   existing density (scoped by body class). */
.template-storycategorypage .stories-head { margin-bottom: 48px; }
.template-storycategorypage .stories-intro { margin-top: 6px; line-height: 1.6; max-width: 760px; }
.template-storycategorypage .story-wall { gap: 48px 40px; }

.story-empty { color: var(--text-dark-grey); }

/* --- Card: bordered + rounded; border and type label coloured by type --- */
.story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--logo-blue);
    border-radius: 15px;
    background: #fff;
    color: var(--text-dark-grey);
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}
.story-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }
.story-card--blue   { border-color: var(--logo-blue); }
.story-card--green  { border-color: var(--logo-green); }
.story-card--orange { border-color: var(--logo-orange); }

/* Header: type link (left) + date (right) */
.story-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.story-card-type {
    position: relative;
    z-index: 2;                 /* above the stretched card link */
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-transform: lowercase;
    text-decoration: underline;
}
.story-card--blue   .story-card-type { color: var(--logo-blue); }
.story-card--green  .story-card-type { color: var(--text-on-green); }
.story-card--orange .story-card-type { color: var(--text-orange); }
.story-card-date { font-size: var(--fs-base); color: var(--text-dark-grey); white-space: nowrap; }

/* Serif headline */
.story-card-heading a { color: inherit; text-decoration: none; }

/* Stretched link: the heading anchor covers the whole card (-> story); the type
   link sits above it (-> category page). */
.story-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Body: description (left) + square image (right) */
.story-card-main {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 5px;            /* a little breathing room below the headline */
}
.story-card-desc {
    flex: 1;
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.3;
    color: var(--text-dark-grey);
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.story-card-img {
    flex-shrink: 0;
    width: 261px;
    height: 261px;
    border-radius: 15px;
    overflow: hidden;
}
.story-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.story-card-readmore {
    margin-top: auto;
    font-size: var(--fs-base);
    color: var(--text-dark-grey);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .story-wall { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .story-card-main { flex-direction: column; }
    .story-card-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* --- Story detail page (Figma layout 109:154) --- */
.story {
    padding: 120px 0 80px;     /* top clears the fixed nav */
}
.story-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Stacked story header: breadcrumb -> banner image -> title -> date -> lead. */
.story-banner { margin: 8px 0 28px; }
.story-banner img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 15px;
}
/* Sized story header: title + meta on the left, image beside it on the right at
   the chosen fraction (one-third / half / two-thirds), like the product Image
   block with companion text. The image renders at its natural size
   (max-width:100%, never upscaled) and hugs the right, so small figures don't get
   stretched into a full-width banner. */
.story-header-split {
    display: flex;
    gap: 56px;                 /* generous space between the title and the image */
    align-items: flex-start;
    margin-bottom: 24px;
}
.story-header-split-img {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.story-header-split-img img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}
/* Image fraction -> column ratios (text gets the rest). */
.story-header-split--one-third  .story-header-split-main { flex: 2; min-width: 0; }
.story-header-split--one-third  .story-header-split-img  { flex: 1; }
.story-header-split--half       .story-header-split-main { flex: 1; min-width: 0; }
.story-header-split--half       .story-header-split-img  { flex: 1; }
.story-header-split--two-thirds .story-header-split-main { flex: 1; min-width: 0; }
.story-header-split--two-thirds .story-header-split-img  { flex: 2; }
@media (max-width: 768px) {
    .story-header-split { flex-direction: column; gap: 20px; }
    .story-header-split-img { justify-content: flex-start; }
}

.story-title { margin: 0 0 8px; }   /* h1; family/colour/size inherit h1-h6 */
.story-date {
    font-size: var(--fs-base);
    color: var(--text-dark-grey);
    margin-bottom: 12px;
}
/* Footer block: source/article link, then tech-doc download — after the body. */
.story-foot { margin-top: 40px; }

/* Description: the colour lead (coloured by type), between the date and the meta/body */
.story-lead {
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--text-dark-grey);
    margin: 0 0 24px;
}

/* Publication name (news/press stories) */
.story-publication {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-dark-grey);
    margin: 0 0 8px;
}
.story-card-publication {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-dark-grey);
    margin: 0 0 4px;
}
/* Authors (research/press detail) */
.story-authors {
    font-size: var(--fs-base);
    color: var(--text-light-grey);
    margin: 8px 0 24px;   /* gap before the abstract (authors only renders on research) */
}
/* Abstract (research detail): body-sized block, not the big lead */
.story-abstract {
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0 0 24px;
}
.story-abstract p { margin: 0 0 1rem; }
.story-abstract p:last-child { margin-bottom: 0; }

/* External "read the full article" link on press detail pages */
.story-article-link {
    margin: 0 0 40px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
}
/* External article/paper link: brand green text (Text/On-green). */
.story-article-link a {
    color: var(--text-on-green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.story-article-link a:hover { text-decoration-thickness: 2px; }

/* Case-study company row (logo + name) in the story header. */
.story-company {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
}
.story-company-logo img { max-height: 48px; width: auto; display: block; }
.story-company-name { font-weight: var(--fw-semibold); }

/* Tech-doc "Download as PDF" button row. */
.story-pdf { margin: 0 0 32px; }

/* Body: centred 784 column */
.story-content {
    max-width: 784px;
    margin: 0 auto;
    padding: 0 16px;
}
/* Rich-text (nested) images stay within the reading column */
.story-content img {
    max-width: 100%;
    height: auto;
}
/* fullbleedimage block (bare <img>, direct child): true full-bleed, edge to edge
   (100vw), breaking out of the centred 784 column. */
.story-content > img {
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-top: 32px;
    margin-bottom: 32px;
}
/* full-width image block (FullWidthPhoto): 1140 content width, centred, rounded
   (also breaks out of the 784 column, but capped at 1140). */
.story-content .fullwidth-photo-wrapper {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1140px, calc(100vw - 32px));
    box-sizing: border-box;
}
.story-content .fullwidth-photo-wrapper .container {
    max-width: none;
    padding: 0;
}

/* Breadcrumb + description text coloured by story type (blue / on-green) */
.story--blue   .story-breadcrumb a,
.story--blue   .story-lead { color: var(--logo-blue); }
.story--green  .story-breadcrumb a,
.story--green  .story-lead { color: var(--text-on-green); }
.story--orange .story-breadcrumb a,
.story--orange .story-lead { color: var(--text-orange); }

@media (max-width: 768px) {
    .story-header { grid-template-columns: 1fr; }   /* stack image under the text */
}

/* ----------------------------------------------------------------------------
   PRODUCTS LANDING (/products/) — Figma "ProductsLanding" (116:36)
   Colour-coded category rows: a header (Source Serif title + Inter subtitle)
   and a row of three image tiles, each with a centred white pill label. The
   category colour sets the text colour.
   ---------------------------------------------------------------------------- */
/* Subhead under the H1: one line per sentence, sized like the home-page subtitle
   so it sits airily with the rest of the site. */
.pl-lead {
    margin: 16px auto 0;
    max-width: 760px;
    font-size: var(--fs-lg);          /* 20px */
    line-height: 1.5;
    color: var(--text-dark-grey);
}

.products-landing {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 16px;   /* sticky nav already takes its own space; 80px is breathing room */
}

.pl-category {
    display: flex;
    flex-direction: column;
    gap: 20px;                  /* header -> tiles */
}
.pl-category + .pl-category { margin-top: 64px; }   /* between categories */

/* Colour variants set the text colour (title, subtitle, pill label) */
.pl-category--orange { color: var(--text-orange); }   /* Text/Orange #995500 */
.pl-category--blue   { color: var(--logo-blue); }         /* #006699 */
.pl-category--green  { color: var(--text-on-green); }     /* #336600 */

.pl-category-head {
    display: flex;
    flex-direction: column;     /* subtitle sits beneath the title */
    align-items: flex-start;
    gap: 6px;
}
.pl-category-title {
    margin: 0;
    color: inherit;   /* deliberately category-coloured (overrides the canonical #333) */
}
.pl-category-subtitle {
    margin: 0;
    font-size: var(--fs-md);            /* Inter */
    line-height: 1.2;
    color: inherit;
}

/* Tile row: three 360x224 tiles, 30px gaps */
.pl-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 330px));
    gap: 30px;
}
.pl-tile {
    position: relative;
    display: block;
    aspect-ratio: 330 / 204;
    border-radius: 15px;
    overflow: hidden;
    background: #e9e7e3;        /* placeholder for tiles without an image */
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pl-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
/* Hover: lift + soft shadow + image zoom, matching the site's other cards. */
.pl-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
}
.pl-tile:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .pl-tile, .pl-tile img { transition: none; }
    .pl-tile:hover { transform: none; }
    .pl-tile:hover img { transform: none; }
}
/* Centred white pill label near the bottom of the tile */
.pl-tile-label {
    position: absolute;
    top: 15px;                  /* top-left of the tile, 15px in */
    left: 15px;
    max-width: calc(100% - 30px);   /* stay within the tile (15px each side) */
    box-sizing: border-box;
    padding: 3px 10px;          /* 3px top/bottom, 10px each side (per "land cover") */
    background: #fff;
    border-radius: 15px;
    text-align: center;
    white-space: nowrap;        /* keep labels (e.g. "canopy height model") on one line */
    font-weight: var(--fw-medium);           /* Inter Medium */
    font-size: var(--fs-base);
    text-transform: lowercase;
    line-height: 1.2;
    color: inherit;             /* category text colour */
}

@media (max-width: 768px) {
    .pl-category-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pl-category-title { width: auto; }
    .pl-tiles { grid-template-columns: 1fr; }
}

/* ============================================================================
   FREE SAMPLES HUB (/samples/) — one SampleSection per product
   Section titles take the product-family colour (blue / on-green / readable
   orange), matching /products/. Download pills reuse .btn-fill-{colour}.
   ============================================================================ */

/* Quick-nav: colour-coded jump-link pills, grouped by /products/ category, one
   row per category with the category name leading the row. Sits below the banner
   and the editable sample-links block. */
.samples-nav {
    max-width: 860px;            /* same width as the product section cards */
    margin: 28px auto 8px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.samples-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.samples-nav-label {        /* an <h2>; family/weight inherit h1-h6 */
    margin: 0 4px 0 0;
    font-size: var(--fs-lg);
}
.samples-nav-label--orange { color: var(--text-orange); }
.samples-nav-label--blue   { color: var(--logo-blue); }
.samples-nav-label--green  { color: var(--text-on-green); }

.sample-section {
    padding: 16px 0;
    scroll-margin-top: 96px;   /* clear the fixed nav when deep-linked (#anchor) */
}
/* Each product section is a family-coloured card (matches the product-card kit:
   white, 15px radius, 1px brand border). */
.sample-section-inner {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--logo-blue);
    border-radius: 15px;
    padding: 28px 32px;
}
.sample-section--blue   .sample-section-inner { border-color: var(--logo-blue); }
.sample-section--green  .sample-section-inner { border-color: var(--logo-green); }
.sample-section--orange .sample-section-inner { border-color: var(--logo-orange); }

/* Header: product thumbnail + title + prose. */
.sample-section-head {
    display: flex;
    gap: 22px;
    align-items: flex-start;   /* thumbnail top flush with the product name, regardless of prose length */
    margin-bottom: 18px;
}
.sample-section-thumb {
    flex: 0 0 auto;
    width: 160px;
    height: 160px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}
.sample-section-head-text { min-width: 0; }

.sample-section-title { margin: 0 0 8px; }
/* Heading links to the product page but keeps the family colour (no link blue). */
.sample-section-title a { color: inherit; text-decoration: none; }
.sample-section-title a:hover { text-decoration: underline; }
.sample-section--blue   .sample-section-title { color: var(--logo-blue); }
.sample-section--green  .sample-section-title { color: var(--text-on-green); }
.sample-section--orange .sample-section-title { color: var(--text-orange); }

/* AEO prose — the explanatory paragraph AI answers pull from. Sits beside the
   thumbnail in the header, so spacing is handled by .sample-section-head. */
.sample-section-prose {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.6;
}
.sample-section-prose p { margin: 0; }
/* .sample-section-prose links styled with the shared prose-link rule (PAGE INTRO
   TEXT section): brand blue, underlined. */

/* Featured AOIs — rich buttons + a sentence each, above the fold. */
.sample-featured {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 18px;
}
.sample-featured-item {
    flex: 1 1 220px;
    min-width: 0;
}
.sample-dl { display: inline-flex; }
.sample-featured-desc {
    margin: 8px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.sample-view {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--text-light-grey);
    text-decoration: none;
    white-space: nowrap;
}
.sample-view:hover { color: var(--logo-blue); text-decoration: underline; }

/* Full coverage — collapsible plain-text list of every AOI (the crawl surface). */
.sample-coverage {
    margin: 0 0 14px;
    font-size: var(--fs-sm);
}
.sample-coverage > summary {
    cursor: pointer;
    color: var(--logo-blue);
    font-weight: var(--fw-medium);
}
/* Summary + request line cycle through off-family colours (like the product
   pages): the "All ... samples" toggle takes one neighbour, the custom-request
   link the other, so neither matches the card's own family colour. */
.sample-section--blue   .sample-coverage > summary { color: var(--text-orange); }
.sample-section--green  .sample-coverage > summary { color: var(--logo-blue); }
.sample-section--orange .sample-coverage > summary { color: var(--text-on-green); }
.sample-coverage > summary:hover { text-decoration: underline; }
.sample-coverage-list {
    margin: 10px 0 0;
    line-height: 1.9;
}
.sample-coverage-list a { color: var(--logo-blue); text-decoration: none; }
.sample-coverage-list a:hover { text-decoration: underline; }

.sample-request {
    margin: 16px 0 0;
    font-size: var(--fs-sm);
}
.sample-request a { color: var(--text-on-green); font-weight: var(--fw-medium); text-decoration: none; }
.sample-section--blue   .sample-request a { color: var(--text-on-green); }
.sample-section--green  .sample-request a { color: var(--text-orange); }
.sample-section--orange .sample-request a { color: var(--logo-blue); }
.sample-request a:hover { text-decoration: underline; }

/* Mobile: stack the section header (thumbnail above the title + prose). */
@media (max-width: 600px) {
    .sample-section-inner { padding: 22px; }
    .sample-section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sample-section-thumb { width: 120px; height: 120px; }
}