/* === RESET & VARIABLES === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Palette — deep forest greens + warm earth accents */
    --color-primary-900: #071A12;
    --color-primary-800: #0C2E1F;
    --color-primary-700: #14432E;
    --color-primary-600: #1A5C3E;
    --color-primary-500: #22764F;
    --color-primary-400: #2D9B68;
    --color-primary-300: #52C48C;
    --color-primary-200: #8EDBB3;
    --color-primary-100: #D0F0E0;
    --color-primary-50: #F0F7F3;

    --color-accent: #D4956C;
    --color-accent-dark: #B8784F;
    --color-accent-light: #E8C4A8;
    --color-tech: #3D8B7A;

    --color-text: #1A1F2C;
    --color-text-secondary: #4A5568;
    --color-text-muted: #718096;
    --color-text-inverse: #FFFFFF;

    --color-bg: #FAFAF6;
    --color-bg-alt: #F4F2EC;
    --color-bg-dark: #071A12;
    --color-surface: #FFFFFF;
    --color-border: #E2E0DA;
    --color-border-light: #EDEBE6;

    /* Typography */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Sizes */
    --container-max: 1240px;
    --header-height: 88px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Transitions */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.35s;
    --duration-slow: 0.6s;
}

/* === BASE === */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--color-primary-400);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-primary-900);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

ul, ol {
    padding-left: var(--space-lg);
}

/* === LAYOUT === */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-3xl) 0;
}

.section-alt {
    background: var(--color-bg-alt);
    background-image: url('/img/topo-pattern.svg');
    background-repeat: repeat;
    background-size: 400px 400px;
}

/* === SECTION HEADERS === */
.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--space-2xl);
}

.section-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-accent-light);
    border-radius: 100px;
    background: rgba(212, 149, 108, 0.06);
}

.section-header p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-md);
}

/* === SCROLL REVEAL === */
/* Hidden only where JavaScript is running to reveal it again — html.js is set by
   js-flag.js in the head. Without that guard this rule made JS a requirement for
   READING the site: scripts blocked, or any error stopping app.js, left every block
   at opacity 0 permanently. The page still had all its text in the DOM, so it
   indexed fine and rendered as a hero followed by nothing. */
html.js .reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

/* Someone who asked the OS for less motion gets the content, not the animation. */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Must match the html.js prefix above, or it loses on specificity (0,2,1 beats 0,2,0)
   and nothing ever reveals. */
html.js .reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger children — golden ratio timing */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.18s; }
.reveal:nth-child(4) { transition-delay: 0.28s; }
.reveal:nth-child(5) { transition-delay: 0.38s; }
.reveal:nth-child(6) { transition-delay: 0.48s; }

/* === STYLED LISTS === */
.styled-list {
    list-style: none;
    padding-left: 0;
}

.styled-list li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.styled-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .section {
        padding: var(--space-2xl) 0;
    }

    .container {
        padding: 0 var(--space-md);
    }
}
/* === HEADER / NAV === */
.site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.site-header.scrolled {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 70px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--space-lg);
    padding: 0;
}

.nav-links a {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
    position: relative;
    padding: var(--space-xs) 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--duration-normal) var(--ease-out);
}

.nav-links a:hover,
.nav-links a.nav-active {
    color: var(--color-primary-700);
}

.nav-links a:hover::after,
.nav-links a.nav-active::after {
    width: 100%;
}

/* Dropdown (About > What We Do / Partners) */
.nav-dropdown {
    position: relative;
}

.nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: var(--space-xs) var(--space-md);
    list-style: none;
    min-width: 150px;
    z-index: 10;
}

.nav-dropdown:hover .nav-sub,
.nav-dropdown:focus-within .nav-sub {
    display: block;
}

.nav-sub a {
    display: block;
    padding: var(--space-xs) 0;
    white-space: nowrap;
}

.nav-sub a::after {
    display: none;
}

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}

.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: all var(--duration-fast) var(--ease-out);
}

.nav-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600));
    color: var(--color-text-inverse);
    border-color: var(--color-primary-700);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-500));
    border-color: var(--color-primary-600);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    /* Glow in the button's own hue, like the accent one: primary-400 rather
       than the near-black 700, which on the dark hero showed as nothing. */
    box-shadow: 0 4px 20px rgba(45, 155, 104, 0.45);
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

.btn-secondary:hover {
    background: var(--color-primary-700);
    color: var(--color-text-inverse);
}

.btn-outline-light {
    background: transparent;
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--color-text-inverse);
    /* Same lift and shadow as the solid buttons: without it, a hovered button
       in a row sat 1px above its neighbours and the row read as misaligned. */
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

/* Accent call to action — for the one link on a page that must not read as
   just another outline button next to an outline button. Uses the warm accent
   so it separates from the green primary rather than competing with it. */
.btn-accent {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
    color: #2A1B10;
    /* Transparent so the gradient paints through the border box and no darker
       rim reads as extra height next to the green button. */
    border-color: transparent;
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    border-color: transparent;
    color: #2A1B10;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(212, 149, 108, 0.45);
}

/* === CARDS === */
/* The one card left. An article carries an image, a date and a headline: a bounded
   object, which is what a card is for. Prose and links are not cards - see .ruled-column
   and .index-row. This block used to carry six names for the same component, which is
   exactly why changing one page never changed the others. */
/* The listing grid. Only the 1024px and 768px overrides existed, so on a full
   desktop width .article-grid was not a grid at all and every card stretched to
   the container - which is why one article filled the screen and its 1600px
   image came through at full size. */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* Related articles under an article: same cards, no images, narrower column. */
.article-grid-small {
    grid-template-columns: repeat(3, 1fr);
}

.article-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-top: 3px solid var(--color-tech);
    border-radius: var(--radius-md);
    /* Padding belongs to the body, not the card: the image has to reach the
       card's edges, and overflow:hidden keeps it inside the rounded corners. */
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
    box-shadow: 0 1px 3px rgba(7, 26, 18, 0.04);
}

.article-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--ease-out);
}

.article-card:hover .article-card-image img {
    transform: scale(1.04);
}

.article-card-body {
    padding: var(--space-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card h2,
.article-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.article-card h2 a,
.article-card h3 a {
    color: var(--color-primary-900);
}

.article-card h2 a:hover,
.article-card h3 a:hover {
    color: var(--color-primary-500);
}

.article-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    flex: 1;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 12px rgba(7, 26, 18, 0.06),
        0 16px 40px rgba(7, 26, 18, 0.08);
    border-color: var(--color-border);
    border-top-color: var(--color-accent);
}

/* === GRIDS === */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
}

.card-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-600);
    margin-top: var(--space-md);
}

.ruled-number-legacy {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-accent-light);
    margin-bottom: var(--space-md);
    line-height: 1;
}

/* === RULED COLUMNS ===
   Everything on this page used to be the same white rounded box: numbered arguments,
   destination links, news items, partnership pitches. One recipe for every kind of
   content is what makes a page read as templated even when the writing is specific.
   These are three parts of one argument, so they get hairline rules instead of borders
   and share a ground with the section rather than sitting on top of it. */
.ruled-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

/* Two across, for groups of four. A four-item group in a three-column grid leaves a
   hole in the second row; the rule is not "always three", it is "divide the group
   cleanly". Same component, same rules, different count. */
.ruled-columns.two-up {
    grid-template-columns: repeat(2, 1fr);
}

/* Past six items there is nothing left to compare side by side, so it stops being
   columns and becomes a list: full width, rules between. Seven in a three-column grid
   breaks 3+3+1, which is the shape this avoids. */
.ruled-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--color-border-light);
}

.ruled-stack .ruled-column {
    border-left: 0;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-lg) 0;
}

.ruled-stack .ruled-number {
    margin-bottom: var(--space-xs);
}

.ruled-column {
    border-left: 1px solid var(--color-border-light);
    padding-left: var(--space-lg);
}

.ruled-column h3 {
    margin-bottom: var(--space-sm);
}

.ruled-column p {
    color: var(--color-text-muted);
}

/* === INDEX LIST ===
   Destinations, not arguments. The three columns above are read; these are pressed, so
   making them look the same would just swap one universal recipe (white rounded box) for
   another (ruled column). Full-width rows with a rule under each read as a table of
   contents: the eye runs down the left edge instead of comparing three equal blocks.

   Losing the box also loses the "I am a clickable object" signal a card carries for free.
   The arrow on the right carries it instead, and the whole row lights up on hover. */
.index-list {
    border-top: 1px solid var(--color-border-light);
}

.index-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 var(--space-lg);
    padding: var(--space-lg) var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--color-text);
    transition:
        background-color var(--duration-normal) var(--ease-out),
        padding-left var(--duration-normal) var(--ease-out);
}

.index-row h3 {
    grid-column: 1;
    margin-bottom: var(--space-xs);
}

.index-row p {
    grid-column: 1;
    margin-bottom: 0;
    color: var(--color-text-muted);
}

/* The call to action sits right, spanning both text rows, so it reads as the row's
   handle rather than as a third line of copy. */
.index-row .card-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    white-space: nowrap;
}

.index-row .card-link::after {
    content: " \2192";
    display: inline-block;
    transition: transform var(--duration-normal) var(--ease-out);
}

.index-row:hover {
    color: var(--color-text);
    background-color: var(--color-surface);
    padding-left: var(--space-md);
}

.index-row:hover .card-link {
    color: var(--color-primary-400);
}

.index-row:hover .card-link::after {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    /* One column on a phone: the arrow drops under the text rather than squeezing it. */
    .index-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .index-row .card-link {
        grid-column: 1;
        grid-row: auto;
    }

    .index-row:hover {
        padding-left: var(--space-sm);
    }
}

/* Sits on the rule, in the display face, quiet enough to index rather than announce. */
.ruled-number {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-accent-light);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.team-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
}

.team-role {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

/* === CONTACT === */
.contact-info h3,
.contact-form h3 {
    margin-bottom: var(--space-lg);
}

.contact-detail {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    margin-bottom: var(--space-lg);
}


.contact-detail strong {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

/* === FORMS === */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px var(--space-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(34, 118, 79, 0.1);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

/* Off-screen trap field for bots; must stay out of the tab order and off screen readers' path */
.form-extra-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* === CTA BLOCK === */
.cta-block {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--color-primary-900);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
}

.cta-block h2 {
    color: var(--color-text-inverse);
    margin-bottom: var(--space-md);
}

.cta-block p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 560px;
    margin: 0 auto var(--space-lg);
}

/* === FOOTER === */
.site-footer {
    background: var(--color-primary-900);
    color: rgba(255, 255, 255, 0.6);
    padding: var(--space-2xl) 0 var(--space-xl);
    border-top: 3px solid var(--color-accent);
}

/* One-line subscribe hint at the foot of every tool page. The button is styled
   as a link; it opens the sticky subscribe modal (data-open-subscribe). */
.tool-subscribe-hint {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
}

.tool-subscribe-hint-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary-500);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tool-subscribe-hint-btn:hover {
    color: var(--color-primary-600);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-text-inverse);
    margin-bottom: 6px;
    white-space: nowrap;
}

.footer-tagline {
    font-size: 0.78rem;
}

/* Let the brand pair wrap naturally on phones — nowrap only helps on wide screens. */
@media (max-width: 640px) {
    .footer-logo { white-space: normal; }
}

.footer-nav {
    display: flex;
    gap: var(--space-2xl);
}

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: var(--space-md);
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    display: block;
    padding: 4px 0;
}

.footer-col a:hover {
    color: var(--color-accent-light);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-xl);
    font-size: 0.8rem;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.6);
}

.footer-contact a:hover {
    color: var(--color-accent-light);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ruled-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-surface);
        flex-direction: column;
        padding: var(--space-lg);
        gap: 0;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        border-bottom: 1px solid var(--color-border-light);
    }

    .nav-links a {
        display: block;
        padding: var(--space-md) 0;
    }

    .nav-links a::after {
        display: none;
    }

    /* Dropdown flattens into an indented sub-list inside the hamburger menu */
    .nav-sub {
        display: block;
        position: static;
        transform: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0 var(--space-md);
        min-width: 0;
    }

    .nav-sub li:last-child {
        border-bottom: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .about-grid,
    .contact-grid,
    .two-col {
        grid-template-columns: 1fr;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    /* Stacked, the vertical rule would run down the left of the whole page and read as
       a quote block. Horizontal rules separate them instead. */
    .ruled-columns {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .ruled-column {
        border-left: 0;
        border-top: 1px solid var(--color-border-light);
        padding-left: 0;
        padding-top: var(--space-md);
    }

    /* One-line subscribe hint at the foot of every tool page. The button is styled
   as a link; it opens the sticky subscribe modal (data-open-subscribe). */
.tool-subscribe-hint {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
}

.tool-subscribe-hint-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary-500);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tool-subscribe-hint-btn:hover {
    color: var(--color-primary-600);
}

.footer-top {
        flex-direction: column;
    }

    .footer-nav {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
    }
}
/* === COOKIE CONSENT BANNER === */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: var(--space-md);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner-visible {
    transform: translateY(0);
}

.cookie-banner-inner {
    max-width: 720px;
    margin: 0 auto;
    background: #FFFFFF;
    color: #1A1F2C;
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.cookie-banner-inner p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.cookie-banner-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 20px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.cookie-banner .btn-primary {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: #FFFFFF;
}

.cookie-banner .btn-primary:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #FFFFFF;
}

.cookie-banner .btn-secondary {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.cookie-banner .btn-secondary:hover {
    border-color: var(--color-primary-700);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

@media (max-width: 768px) {
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
    }

    .cookie-banner-actions {
        width: 100%;
        justify-content: center;
    }
}
/* === STICKY SUBSCRIBE LABEL === */
.sticky-subscribe-label {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px 13px 18px;
    background: var(--color-primary-500);
    color: var(--color-text-inverse);
    border: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(45, 155, 104, 0.55),
                0 8px 24px rgba(7, 26, 18, 0.22);
    animation: stickySubscribePulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transition: transform var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

@keyframes stickySubscribePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 155, 104, 0.55),
                    0 8px 24px rgba(7, 26, 18, 0.22);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(45, 155, 104, 0),
                    0 8px 24px rgba(7, 26, 18, 0.22);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(45, 155, 104, 0),
                    0 8px 24px rgba(7, 26, 18, 0.22);
    }
}

.sticky-subscribe-label:hover {
    background: var(--color-primary-400);
    transform: translateY(-2px);
}

.sticky-subscribe-label:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.sticky-subscribe-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.85rem;
    line-height: 1;
}

.sticky-subscribe-label.is-hidden {
    display: none;
}

/* At 375px the pill landed on top of the hero's "Get in Touch" button - measured, the
   two rectangles overlapped between y 758 and 800. A fixed element will always cover
   something; what it must not cover is another control. Shrink it and let the hero end
   above it, rather than moving the collision somewhere else on the page. */
@media (max-width: 768px) {
    .sticky-subscribe-label {
        right: 12px;
        bottom: 12px;
        font-size: 0.8rem;
        padding: 0.55rem 0.9rem;
    }

    .hero {
        padding-bottom: calc(var(--space-2xl) + 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-subscribe-label {
        animation: none;
    }
}

/* === MODAL === */
.sticky-subscribe-modal {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 9001;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(7, 26, 18, 0.18),
                0 4px 14px rgba(7, 26, 18, 0.08);
    padding: 18px 18px 16px;
    transform-origin: bottom right;
    animation: stickySubscribePop var(--duration-normal) var(--ease-out);
}

.sticky-subscribe-modal[hidden] {
    display: none;
}

@keyframes stickySubscribePop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sticky-subscribe-modal-header {
    margin-bottom: 14px;
}

.sticky-subscribe-modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--color-primary-900);
    margin: 0 0 4px;
}

.sticky-subscribe-modal-header p {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin: 0;
}

/* === FORM === */
.sticky-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sticky-subscribe-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sticky-subscribe-field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sticky-subscribe-field input {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.sticky-subscribe-field input:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(34, 118, 79, 0.12);
}

.sticky-subscribe-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    cursor: pointer;
    margin-top: 2px;
}

.sticky-subscribe-consent input {
    margin-top: 2px;
    accent-color: var(--color-primary-600);
    flex-shrink: 0;
}

/* What happens after they press subscribe: one confirmation email, and nothing
   until they use it. Said on the form so the email is expected, not a surprise. */
.sticky-subscribe-note {
    margin: 4px 0 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.sticky-subscribe-submit {
    margin-top: 6px;
    padding: 11px 18px;
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600));
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.sticky-subscribe-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(20, 67, 46, 0.28);
}

.sticky-subscribe-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sticky-subscribe-feedback {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    min-height: 1em;
}

.sticky-subscribe-feedback.is-success {
    color: var(--color-primary-600);
}

.sticky-subscribe-feedback.is-error {
    color: #B8784F;
}

/* === MOBILE === */
@media (max-width: 480px) {
    .sticky-subscribe-label {
        right: 12px;
        bottom: 12px;
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .sticky-subscribe-modal {
        right: 12px;
        bottom: 64px;
        width: calc(100vw - 24px);
    }
}
/* === NAV LOGIN BUTTON === */
.nav-links /* Sign-in as a link, not a call to action. It used to be the only filled, dark element
   in the header, which on a site that sells nothing made "Login" read as the main thing
   on offer. It stays reachable and stops shouting. */
.nav-quiet {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
    padding: var(--space-xs) 0;
    position: relative;
}

.nav-quiet:hover {
    color: var(--color-primary-700);
}

.nav-quiet::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--duration-normal) var(--ease-out);
}

.nav-quiet:hover::after {
    width: 100%;
}

.nav-cta {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-primary-700);
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.nav-links .nav-cta:hover {
    background: var(--color-primary-600);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.nav-links .nav-cta::after {
    display: none;
}

/* === AUTH CARD (centered card on top of section-alt) === */
.auth-card {
    max-width: 460px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    box-shadow: 0 1px 3px rgba(7, 26, 18, 0.04),
                0 12px 32px rgba(7, 26, 18, 0.06);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.auth-header h2 {
    margin: 0 0 var(--space-xs);
}

.auth-header p {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

.auth-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
}

/* Submit button stretches inside the card */
.auth-card .btn {
    width: 100%;
    margin-top: var(--space-sm);
}

/* Inline hint under a form field */
.form-hint {
    margin: var(--space-xs) 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Login extras row (remember + forgot) */
.auth-extras {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -4px;
    font-size: 0.85rem;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.auth-remember input {
    accent-color: var(--color-primary-600);
}

.auth-divider {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.auth-error-list {
    margin: 0;
    padding-left: var(--space-md);
}

.auth-error-list li {
    margin: 0;
}

/* === ACCOUNT DASHBOARD === */
.account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.account-card p {
    margin-bottom: var(--space-md);
}

.account-logout-form {
    margin-top: var(--space-md);
}

@media (max-width: 768px) {
    .nav-cta-item {
        margin-top: var(--space-md);
    }

    .nav-links .nav-cta {
        display: block;
        text-align: center;
    }
}

/* Cross-tool saved locations (injected by location.js) */
.saved-locations { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.saved-locations-select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; background: var(--color-bg); color: var(--color-text); }
.saved-locations-save { font-size: 0.85rem; }
.saved-locations-msg { font-size: 0.82rem; color: var(--color-primary-600); }