/* ----------------------------------------------------------------------------
   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(--text-light-grey);   /* 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;
}

/* Default link colour: brand blue. Green hover is applied per content context
   below (prose, nav, breadcrumbs, etc.), NOT globally, so it can never leak onto
   button anchors (.btn / .btn-pill / .pc-card-btn keep their own hover styles). */
a { color: var(--logo-blue); }

/* ----------------------------------------------------------------------------
   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(--text-on-green);
}

/* ---- 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);
}

/* Restated at this specificity so the fill-inverts-to-stroke hover isn't
   overridden by the reset above (white text on the emptied white pill). */
.nav-menu li.nav-api a:hover {
    color: var(--logo-blue);
}

/* 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;
    scroll-margin-top: 90px;   /* keep anchored sections clear of the sticky nav */
}

/* 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           { color: var(--logo-blue); }   /* default; also 'auto' on non-product pages */
.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); }
/* 'Auto' (the default) takes the product-family colour on product pages, so every
   product page stays colour-coordinated. An explicit is-blue/green/orange choice
   above wins over this (it doesn't target .is-auto), letting an editor override a
   single section on purpose. */
body.product--blue   .section-intro-streamers.is-auto { color: var(--logo-blue); }
body.product--green  .section-intro-streamers.is-auto { color: var(--logo-green); }
body.product--orange .section-intro-streamers.is-auto { 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 */
}

/* Rich-text "description" boxes (section intro, section intro split, value-prop
   cards, sample links). The global reset zeroes <p> margins, so a single
   paragraph renders exactly as the old plain-text field did; this only adds a
   gap when an editor uses multiple paragraphs (line breaks). */
.rt-desc > p { margin: 0; }
.rt-desc > p + p { margin-top: 0.6em; }

/* 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; }
}

/* ----------------------------------------------------------------------------
   PULL QUOTE
   Large serif quotation with a family-coloured left rule + optional attribution.
   Colour is driven by --pq so the border, quote glyph, and name stay in sync.
   ---------------------------------------------------------------------------- */
.pull-quote {
    --pq: var(--logo-blue);
    max-width: 900px;
    margin: var(--block-space) auto;
    padding: 4px 0 4px 28px;
    border-left: 4px solid var(--pq);
}
.pull-quote--green  { --pq: var(--logo-green); }
.pull-quote--orange { --pq: var(--logo-orange); }

.pull-quote-text {
    font-family: var(--font-serif-display);
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    line-height: 1.4;
    color: var(--text-dark-grey);
    margin: 0;
}
.pull-quote-text::before {
    content: "\201C";
    color: var(--pq);
    font-weight: 600;
    margin-right: 2px;
}
.pull-quote-text::after {
    content: "\201D";
    color: var(--pq);
    font-weight: 600;
    margin-left: 2px;
}

.pull-quote-cite {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 18px;
}
.pull-quote-name {
    font-weight: 600;
    color: var(--pq);
}
.pull-quote-detail {
    font-size: 1rem;
    color: var(--text-dark-grey);
    opacity: 0.75;
}

@media (max-width: 768px) {
    .pull-quote { padding-left: 20px; }
}

/* ----------------------------------------------------------------------------
   PARTNER LOGO GRID
   Centred, wrapping row of partner logos (each optionally linking out).
   ---------------------------------------------------------------------------- */
.partner-grid-wrapper { padding: var(--block-space) 0; }
.partner-grid-heading { text-align: center; margin-bottom: 40px; }
.partner-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px 56px;
    max-width: 1140px;
}
.partner-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-grid-item img {
    max-height: 60px;
    width: auto;
}
.partner-logo-link { display: inline-flex; }

/* ----------------------------------------------------------------------------
   TECH SPECS
   Label/value specification table with a family-coloured heading + top rule.
   ---------------------------------------------------------------------------- */
.tech-specs {
    --ts: var(--logo-blue);
    padding: var(--block-space) 0;
}
.tech-specs--green  { --ts: var(--logo-green); }
.tech-specs--orange { --ts: var(--logo-orange); }

.tech-specs-heading {
    text-align: center;
    color: var(--ts);
    margin-bottom: 32px;
}
.tech-specs-table {
    max-width: 900px;
    margin: 0 auto;
}
.tech-specs-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tech-specs-row:first-child {
    border-top: 2px solid var(--ts);
}
.tech-specs-label {
    font-weight: 600;
    color: var(--text-dark-grey);
}
.tech-specs-value {
    color: var(--text-dark-grey);
    margin: 0;
}
@media (max-width: 640px) {
    .tech-specs-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ----------------------------------------------------------------------------
   COMPARISON TABLE
   Two things compared across shared row labels. Same 900px measure, family
   colour, and hairline rules as TECH SPECS above; the difference is the second
   value column. Below 640px the rows stack and each value is prefixed with its
   column name (from data-col), so the table never scrolls sideways.
   ---------------------------------------------------------------------------- */
.comparison-table {
    --ct: var(--logo-blue);
    --ct-line: 1px solid rgba(0, 0, 0, 0.08);   /* row rules AND the outer frame */
    padding: var(--block-space) 0;
}
.comparison-table--green  { --ct: var(--logo-green); }
.comparison-table--orange { --ct: var(--logo-orange); }

.comparison-table-heading {
    text-align: center;
    color: var(--ct);
    margin-bottom: 32px;
}
/* Frame: the outline is a wrapper rather than a border on the table, so its
   padding holds the row rules a few px clear of the outline on every side.
   The border and radius match the stats card and the rest of the card kit
   (0.5px hairline, 15px) so the two read as one family; the internal row rules
   stay lighter than the frame. */
.comparison-table-frame {
    max-width: 900px;
    margin: 0 auto;
    border: 0.5px solid var(--hairline);
    border-radius: 15px;   /* same as the stats card and the rest of the card kit */
    padding: 8px 16px;
}
.comparison-table-grid {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.comparison-table-grid th,
.comparison-table-grid td {
    padding: 14px 24px 14px 0;
    border-bottom: var(--ct-line);
    color: var(--text-dark-grey);
    vertical-align: top;
}
/* No rule on the last row: it would read as a double line against the frame. */
.comparison-table-grid tbody tr:last-child th,
.comparison-table-grid tbody tr:last-child td { border-bottom: 0; }
.comparison-table-grid th:last-child,
.comparison-table-grid td:last-child { padding-right: 0; }
.comparison-table-grid thead th,
.comparison-table-corner {
    border-bottom: 2px solid var(--ct);
}
.comparison-table-grid thead th {
    color: var(--ct);
    font-weight: 600;
}
.comparison-table-grid th[scope="row"] {
    width: 200px;
    font-weight: 600;
}

@media (max-width: 640px) {
    /* Stack: the column headings move next to each value as a data-col prefix. */
    .comparison-table-grid thead { display: none; }
    .comparison-table-grid,
    .comparison-table-grid tbody,
    .comparison-table-grid tr,
    .comparison-table-grid th,
    .comparison-table-grid td { display: block; width: auto; }
    .comparison-table-grid tr {
        padding: 14px 0;
        border-bottom: var(--ct-line);
    }
    .comparison-table-grid tbody tr:first-child { border-top: 2px solid var(--ct); }
    .comparison-table-grid tbody tr:last-child { border-bottom: 0; }
    .comparison-table-grid th[scope="row"] { padding: 0 0 6px; border-bottom: 0; }
    .comparison-table-grid td { padding: 2px 0 2px 12px; border-bottom: 0; }
    .comparison-table-grid td::before {
        content: attr(data-col) ": ";
        font-weight: 600;
        color: var(--ct);
    }
}

/* ----------------------------------------------------------------------------
   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;
    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-green {
    background-color: var(--logo-green);
    border-color: var(--logo-green);
    color: #fff;
}

.btn-fill-orange {
    background-color: var(--logo-orange);
    border-color: var(--logo-orange);
    color: var(--text-dark-grey);   /* dark text on light orange */
}

/* Hover: a fill inverts to its stroke counterpart (white pill, brand border and
   text) — the mirror of a stroke filling in. The border colour already matches
   the brand colour on every fill, so only background and text change. Every
   filled button sits on white or on a white card, so the emptied pill reads. */
.btn-fill-blue:hover   { background-color: #fff; color: var(--logo-blue); }
.btn-fill-green:hover  { background-color: #fff; color: var(--text-on-green); }
.btn-fill-orange:hover { background-color: #fff; color: var(--text-orange); }

/* Pressed/active: dark variants (the moment of click, not hover). */
/* color is restated because the hover rule above recolours the label. */
.btn-fill-blue:active  { background-color: var(--logo-blue-dark);  border-color: var(--logo-blue-dark);  color: #fff; transform: translateY(0); }
.btn-fill-green:active { background-color: var(--logo-green-dark); border-color: var(--logo-green-dark); color: #fff; 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 {
    color: var(--text-on-green);
    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).
   Border is transparent-free here: it carries the brand colour so the pill can
   invert to a stroke on hover like .btn-fill-* does. */
.btn-pill {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);                     /* 16px */
    line-height: 1;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill-blue  { background-color: var(--logo-blue);  border-color: var(--logo-blue); }
.btn-pill-green { background-color: var(--logo-green); border-color: var(--logo-green); }
.btn-pill-blue:hover  { background-color: #fff; color: var(--logo-blue); }
.btn-pill-green:hover { background-color: #fff; color: var(--text-on-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 { color: var(--text-on-green); 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;
   }
}

/* ----------------------------------------------------------------------------
   SPACER  (editor-placed white space)
   One small unit. Editors stack two or more when they want a bigger gap, so
   this height is deliberately smaller than any block's own padding.
   ---------------------------------------------------------------------------- */
.spacer { height: 24px; }

/* ----------------------------------------------------------------------------
   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; }
/* 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; }

/* --- Full width + companion text: no side room, so stack ------------------- */
/* The image keeps the whole 1140px; the text sits above or below it (template
   order), capped at the 784px reading measure and placed by the align choice. */
.flex-image--w-fill.flex-image--has-text .flex-image-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
}
.flex-image--w-fill.flex-image--has-text .flex-image-media { width: 100%; }
.flex-image--w-fill.flex-image--has-text .flex-image-text { max-width: 784px; }
.flex-image--w-fill.flex-image--has-text.flex-image--left   .flex-image-text { margin-right: auto; text-align: left; }
.flex-image--w-fill.flex-image--has-text.flex-image--center .flex-image-text { margin-left: auto; margin-right: auto; text-align: center; }
.flex-image--w-fill.flex-image--has-text.flex-image--right  .flex-image-text { margin-left: auto; text-align: right; }

.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 { 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 */
.rt-desc a:not(.btn),               /* rich-text description boxes */
.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,
.rt-desc a:not(.btn):hover,
.home-whatwedo-text a:not(.btn):hover { color: var(--text-on-green); }

.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 ----------------------------------------------------- */
/* Bottom padding is deliberately small: the capability grid below adds its own
   top padding, and the two together used to leave a ~112px hole. */
.home-whatwedo { padding: 96px 0 16px; }

.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;
}

/* No trailing margin under the last line, so the gap below is the section's. */
.home-whatwedo-text p:last-child { margin-bottom: 0; }

/* ---- 3. CAPABILITY GRID + HOVER CARDS --------------------------------- */
.home-capabilities { padding: 40px 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 { color: var(--text-on-green); 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 {
    color: var(--text-on-green);
    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 { color: var(--text-on-green); 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; }
}