/* site.css - the design system for every page.
   Every component here is shown on /style-guide with its exact markup.
   Components use the tokens below, never raw values. */

/* ---------- Design tokens ----------
   Colours, type, spacing and shapes. Use these variables,
   never raw values, in components.
   Contrast (WCAG): text #333 on cream 11.5:1; green on cream 5.9:1, on white
   6.5:1; white on green 6.5:1; text #333 on mustard 9.4:1. Mustard on cream
   is 1.2:1, so mustard is never a text colour - highlights and accents only.
   Border-strong on cream 3.5:1 (enough for input borders). */
:root {
    /* Colours */
    --color-bg: #f8f4f0;             /* cream page background, rgb(248,244,240) */
    --color-surface: #ffffff;        /* cards, alternate sections */
    --color-tint: #edf5ef;           /* soft green: icon and number badges */
    --color-brand-deep: #004d2a;     /* deep green band (closing call): white text 9.9:1 */
    --color-tint-line: #cfe3d6;      /* thin lines on a tint band */
    --color-sand: #efe7dc;           /* warm sand: call panels (call box, closing call,
                                        result call); text 10.3:1, green 5.3:1 */
    --color-text: #333333;
    --color-heading: #1f1f1f;
    --color-text-muted: #5c5c5c;     /* 6.1:1 on cream */
    --color-brand: #006d3c;          /* logo green: links, headings accents, call button */
    --color-brand-dark: #00552f;     /* hover and pressed */
    --color-on-brand: #ffffff;       /* text on green */
    --color-accent: #fede00;         /* logo mustard: small highlights only */
    --color-warning: #c1121f;        /* genuine warnings only */
    --color-border: #e6dfd6;         /* decorative dividers */
    --color-border-strong: #8a8278;  /* input and control borders */
    --color-focus: #1f1f1f;          /* focus ring, visible on cream, white and green */

    /* Type */
    --font-body: "Poppins", sans-serif;
    --font-kn: "Noto Sans Kannada", "Poppins", sans-serif;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-h3: 1.25rem;
    --text-lead: 1.25rem;            /* hero lead */
    --text-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    --text-h2-article: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);  /* H2 inside a guide article (18px text) */
    --text-display: clamp(2.5rem, 1.3rem + 4.4vw, 4.5rem);  /* founder stat, big numbers */
    --text-hero: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);    /* hero H1 */
    --text-h1: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --leading-body: 1.6;
    --leading-heading: 1.25;
    --tracking-heading: -0.015em;    /* slightly tighter large headings */

    /* Spacing (4px steps) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-gap: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);
    --gutter: clamp(1rem, 4vw, 2rem);  /* 16px side gutter on phones */

    /* Layout and shape */
    --container: 72rem;
    --container-text: 42rem;         /* comfortable reading width */
    --container-article: 48rem;      /* guide article reading width (18px text) */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;               /* panel cards */
    --shadow-card: 0 1px 2px rgba(31, 31, 31, 0.04), 0 4px 16px rgba(31, 31, 31, 0.05);
    --radius-pill: 999px;
    --tap-min: 48px;                 /* minimum touch target for buttons */
    --tap-link: 44px;                /* minimum height for stacked text links */
    --header-h: 64px;                /* header height (80px from 1200px, set below) */
    --badge-sm: 32px;                /* How we work number circle */
    --badge-step: 40px;              /* timeline number circle */
}

/* Kannada script needs more line height, a larger small size (vowel signs
   and conjuncts get hard to read at 14px) and lower underlines */
html[lang="kn"] {
    --leading-body: 1.8;
    --leading-heading: 1.4;
    --text-sm: 0.9375rem;
}
html[lang="kn"] a { text-underline-offset: 0.35em; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

/* Font follows the language of each element, so English inside a Kannada
   page (and the reverse) uses the right font. */
html[lang="kn"] body,
html[lang="kn"] button,
[lang="kn"] { font-family: var(--font-kn); }
[lang="en"] { font-family: var(--font-body); }

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

h1, h2, h3 {
    color: var(--color-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    text-wrap: balance;
}
h1, h2 { font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); }
html[lang="kn"] h1, html[lang="kn"] h2 { letter-spacing: 0; }
h1 { font-size: var(--text-h1); line-height: 1.12; }
html[lang="kn"] h1 { line-height: var(--leading-heading); }
h2 { font-size: var(--text-h2); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }

p + p { margin-top: var(--space-4); }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: var(--color-brand); text-underline-offset: 0.2em; }
a:hover { color: var(--color-brand-dark); }

address { font-style: normal; }

/* ---------- Accessibility ---------- */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -100px;
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-heading);
    color: var(--color-surface);
    font-weight: var(--weight-semibold);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { top: 0; color: var(--color-surface); }

#main-content:focus { outline: none; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
/* Narrow reading column, left-aligned with the other sections */
.container--text > * { max-width: var(--container-text); }

.section { padding-block: var(--section-gap); }
/* Cream is the page base. A section may change background (tint, deep green)
   or be a white band for variety. The thin line only sits between two
   plain cream sections (or two white bands): where the colour changes, the
   colour is the divider. */
main > section + section { border-top: 1px solid var(--color-border); }
.section--surface { background: var(--color-surface); }
.section--tint { background: var(--color-tint); }
.section--sand { background: var(--color-sand); }
.section--deep { background: var(--color-brand-deep); color: var(--color-on-brand); }
main > .section--tint, main > .section--tint + section,
main > .section--sand, main > .section--sand + section,
main > .section--deep, main > .section--deep + section,
main > .section--surface + section { border-top-color: transparent; }
main > .section--surface { border-top-color: transparent; }
main > .section--surface + .section--surface { border-top-color: var(--color-border); }

/* Split sections (from 1024px): the H2 sits in a left column and everything
   else in a wider right column, so the page uses its full width. Every
   section heading is a direct child of the container (or of a div.prose,
   which then passes its children through).
   .section--stacked keeps the heading on top at full width (for boxed cards). */
@media (min-width: 1024px) {
    .section:not(.section--stacked) > .container {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: var(--space-8);
        align-items: start;
    }
    .section:not(.section--stacked) > .container > * { grid-column: 2; }
    /* The heading spans the rows beside it (empty rows take no space), so the
       content column flows on without a gap */
    .section:not(.section--stacked) > .container > h2,
    .section:not(.section--stacked) > .container > div.prose > h2 { grid-row: span 20; }
    .section:not(.section--stacked) > .container > h2 { grid-column: 1; margin-bottom: 0; }
    .section:not(.section--stacked) > .container > div.prose:has(> h2) { display: contents; }
    .section:not(.section--stacked) > .container > div.prose > h2 { grid-column: 1; margin-bottom: 0; }
    .section:not(.section--stacked) > .container > div.prose > * { grid-column: 2; }
    .section:not(.section--stacked) > .container > div.prose > h2 + * { margin-top: 0; }
    .section:not(.section--stacked) > .container > .section-lead { margin-top: 0; }
}

/* Card groups are lists of rows split by thin lines, not boxes */
.card-grid { display: grid; gap: 0; border-bottom: 1px solid var(--color-border); }
.card-grid > * { min-width: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font: inherit;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn:hover { background: var(--color-brand-dark); color: var(--color-on-brand); }
.btn .icon { flex-shrink: 0; }
.btn--block { display: flex; width: 100%; }
.btn--call { font-size: var(--text-lg); line-height: 1.3; flex-wrap: wrap; column-gap: var(--space-2); row-gap: 0; }
.btn__label { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
/* The Kannada font sits digits high in the line: phone numbers in buttons use
   the Latin font so they stay centred */
html[lang="kn"] .btn .nowrap,
html[lang="kn"] .site-header__call span,
html[lang="kn"] .col-word a[href^="tel:"] { font-family: var(--font-body); }
/* Kannada "ಕರೆ ಮಾಡಿ" and the Latin digits sit on one baseline (the Kannada
   font's taller box put the word 2-3px high when centred) */
html[lang="kn"] .btn--call { align-items: baseline; align-content: center; }
html[lang="kn"] .btn--call .btn__label { align-items: baseline; }
html[lang="kn"] .btn--call .icon { align-self: center; }
/* Under 360px the Kannada call button would wrap to 2 lines */
@media (max-width: 359px) {
    html[lang="kn"] .btn--call { font-size: var(--text-base); padding-inline: var(--space-4); }
}
/* The phone number never breaks across lines; "Call" may wrap above it */
.nowrap { white-space: nowrap; }

/* ---------- Link notes ---------- */
/* white-space: pre keeps the space before "(ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ)" when the link is a flex box (header, standalone arrow links) */
.link-lang { font-weight: var(--weight-regular); font-size: var(--text-sm); white-space: pre; }
.link-current { font-weight: var(--weight-medium); color: var(--color-text-muted); display: inline-flex; align-items: center; min-height: var(--tap-link); }

/* ---------- Links with an arrow ---------- */
.link-list { display: grid; gap: 0; }
.link-list li { display: flex; align-items: center; min-height: var(--tap-link); padding-block: var(--space-1); }
.card-grid + .link-list { margin-top: var(--space-5); }
/* Arrow links flow like text (in paragraphs and when they wrap) */
.link-arrow { font-weight: var(--weight-medium); }
.link-arrow .icon { display: inline-block; vertical-align: -0.2em; margin-left: 0.2em; transition: transform 0.15s; }
.link-arrow:hover .icon { transform: translateX(3px); }
/* A standalone arrow link (the only link in its paragraph, e.g. "About us →", the hero fork)
   gets a 44px tap target; arrow links inside a sentence stay inline. */
p > a.link-arrow:only-child { display: inline-flex; align-items: center; min-height: var(--tap-link); }

/* ---------- Header ---------- */
.site-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
/* The header stays at the top while scrolling, except on very short screens
   (landscape phones, 200% zoom), where it would take too much room. Focus and
   in-page links scroll clear of it. */
@media (min-height: 421px) {
    .site-header { position: sticky; top: 0; z-index: 850; }
    html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
}
@media (min-width: 1200px) { :root { --header-h: 80px; } }
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--header-h);
}
.site-header__logo { margin-right: auto; flex-shrink: 0; }
.site-header__logo img { width: 128px; height: auto; }
.site-header__inner > .lang-switch,
.menu-toggle { flex-shrink: 0; }

.site-nav { display: none; }

.lang-switch {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-link);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-heading);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}
.lang-switch:hover { border-color: var(--color-brand); color: var(--color-brand); }
.lang-switch[lang="kn"] { font-family: var(--font-kn); }

/* Header call button. On phones (up to 768px) it is a round phone icon; the
   number is read by screen readers only. From 769px it shows the full number. */
.site-header__call {
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.site-header__call span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-heading);
    cursor: pointer;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* Mobile menu: opened by script.js (body.menu-open) */
.mobile-nav { display: none; }
body.menu-open .mobile-nav {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 900;
    overflow-y: auto;
    background: var(--color-bg);
}
.mobile-nav__panel {
    display: grid;
    gap: var(--space-5);
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--space-5) var(--gutter) var(--space-7);
}
.mobile-nav__panel ul { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.mobile-nav__panel li { border-bottom: 1px solid var(--color-border); }
.mobile-nav__panel li a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--color-heading);
    font-weight: var(--weight-medium);
    text-decoration: none;
}
.mobile-nav__panel li a[aria-current="page"] { color: var(--color-brand); }
.mobile-nav__panel .lang-switch { justify-self: start; }
body.menu-open .site-header { z-index: 950; }
@media (max-height: 420px) { body.menu-open .site-header { position: relative; } }
/* The open menu has its own call button (first) and language switch (last) */
body.menu-open .site-header__call,
body.menu-open .site-header__inner > .lang-switch { visibility: hidden; }
.menu-backdrop { display: none; }

/* Under 360px the logo, language switch, call icon and menu button only fit
   when tightened (the menu icon's own padding sits in the gutter) */
@media (max-width: 359px) {
    .site-header__inner { gap: var(--space-1); }
    .site-header__logo img { width: 116px; }
    .site-header__inner > .lang-switch { padding-inline: var(--space-2); }
    .menu-toggle { margin-right: calc(-1 * var(--space-2)); }
}

@media (min-width: 400px) {
    .site-header__logo img { width: 150px; }
    .site-header__inner { gap: var(--space-3); }
}

@media (min-width: 769px) {
    .site-header__call { width: auto; height: auto; padding-inline: var(--space-4); }
    .site-header__call span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

@media (min-width: 1200px) {
    .site-header__inner { gap: var(--space-4); }
    .site-header__logo { margin-right: 0; }
    .site-header__logo img { width: 180px; }
    .site-nav { display: block; margin-left: var(--space-6); margin-right: auto; }
    .site-nav ul { display: flex; gap: var(--space-4); list-style: none; padding: 0; }
    .site-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 var(--space-2);
        color: var(--color-heading);
        font-weight: var(--weight-medium);
        text-decoration: none;
        white-space: nowrap;
        border-radius: var(--radius-sm);
    }
    .site-nav a:hover { color: var(--color-brand); }
    .site-nav a[aria-current="page"] { color: var(--color-brand); text-decoration: underline; text-underline-offset: 0.4em; }
    /* The "(in English)" marker is too wide for the desktop nav, so it is read by
       screen readers only there (the menu and page links still show it). */
    .site-nav .link-lang {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .menu-toggle, .mobile-nav, body.menu-open .mobile-nav { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
    padding-block: var(--space-8) var(--space-6);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
.site-footer__contact { grid-column: 1 / -1; }
@media (min-width: 960px) {
    .site-footer__grid { grid-template-columns: repeat(4, 1fr) 1.4fr; }
    .site-footer__contact { grid-column: auto; }
}
.site-footer__title { font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li a, .site-footer address a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--color-text);
}
.site-footer a:hover { color: var(--color-brand); }
/* Navigation lists: no underline until hover or focus; phone and email keep it */
.site-footer li a { text-decoration: none; }
.site-footer a[href^="tel:"] { min-height: var(--tap-link); }
.site-footer li a:hover, .site-footer li a:focus-visible { text-decoration: underline; }
.site-footer address p + p { margin-top: 0; }
.site-footer__rights { margin-top: var(--space-6); color: var(--color-text-muted); }

/* ---------- Proof line ---------- */
.proof-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    color: var(--color-text);
    font-weight: var(--weight-medium);
}
/* Full proof line: the facts in a 2 x 2 grid split by thin lines, each a large
   green number (5.9:1 on cream) over a short muted label */
.proof-line:not(.proof-line--compact) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.proof-line:not(.proof-line--compact) li { padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.proof-line__num {
    display: block;
    font-size: var(--text-h2);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-brand);
}
html[lang="kn"] .proof-line__num { letter-spacing: 0; }
.proof-line__label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
}
/* Compact: plain text joined with " · " */
.proof-line--compact { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.proof-line--compact li { display: inline; }
.proof-line--compact li:not(:last-child)::after { content: " · "; }

/* ---------- Filing promise and call block ---------- */
.filing-promise {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 34rem;
    color: var(--color-heading);
}
.filing-promise .icon { color: var(--color-brand); margin-top: 0.15em; flex-shrink: 0; }

.call-block { display: grid; gap: var(--space-4); justify-items: start; margin-top: var(--space-5); }
@media (min-width: 768px) {
    .call-block { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-5); }
}

/* ---------- Cards ----------
   A card is a row: a thin line above, the title, then the details. From 640px
   the title sits on the left and the details on the right. */
.card {
    display: block;
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.card > * + * { margin-top: var(--space-3); }
@media (min-width: 640px) {
    .card-grid:not(.card-grid--columns) > .card:not(.card--link) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        column-gap: var(--space-6);
        align-items: start;
    }
    .card-grid:not(.card-grid--columns) > .card:not(.card--link) > * { grid-column: 2; }
    .card-grid:not(.card-grid--columns) > .card:not(.card--link) > :first-child { grid-column: 1; grid-row: 1 / span 6; margin-bottom: 0; }
    .card-grid:not(.card-grid--columns) > .card:not(.card--link) > :nth-child(2) { margin-top: 0; }
    .card-grid:not(.card-grid--columns) .btn--block { display: inline-flex; width: auto; justify-self: start; }
}
/* Split sections from 1024 to 1199px: the right column is too narrow for a
   second split, so row titles sit above their details */
@media (min-width: 1024px) and (max-width: 1199px) {
    .section:not(.section--stacked) .card-grid:not(.card-grid--columns) > .card:not(.card--link) { display: block; }
    .section:not(.section--stacked) .card-grid:not(.card-grid--columns) > .card:not(.card--link) > :first-child { margin-bottom: var(--space-2); }
    .section:not(.section--stacked) .card-grid:not(.card-grid--columns) > .card:not(.card--link) > * + * { margin-top: var(--space-3); }
}

/* Columns: a few points of equal weight side by side (e.g. "Why businesses
   choose us"), each under a short green line. Use in a .section--stacked so
   they get the full width. Stacked on phones and tablets, one column per card
   from 960px. */
.card-grid--columns { gap: var(--space-7); border-bottom: 0; }
@media (min-width: 960px) {
    .card-grid--columns { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.card-grid--columns > .card {
    padding: var(--space-5) 0 0;
    border-top: 2px solid var(--color-brand);   /* 5.9:1 on cream */
}
.card--link { color: var(--color-text); text-decoration: none; }
.card--link:hover { color: var(--color-text); }


.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-tint);
    color: var(--color-brand);
    flex-shrink: 0;
}

/* ---------- Two paths ---------- */
.paths-bridge, .paths-compact { margin-top: var(--space-5); }
.paths-bridge { font-weight: var(--weight-medium); }

/* ---------- How we work ---------- */
.steps { display: grid; counter-reset: step; max-width: var(--container-text); border-bottom: 1px solid var(--color-border); }
.steps li {
    position: relative;
    counter-increment: step;
    padding: var(--space-4) 0 var(--space-4) calc(var(--badge-sm) + var(--space-4));
    border-top: 1px solid var(--color-border);
}
/* Soft number badge: green on light green (6.2:1), centred on the first line */
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: calc(var(--space-4) + 0.8em - var(--badge-sm) / 2 + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--badge-sm); height: var(--badge-sm);
    border-radius: 50%;
    background: var(--color-tint);
    color: var(--color-brand);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.steps strong { color: var(--color-heading); font-weight: var(--weight-medium); }
.steps + .call-block { margin-top: var(--space-6); }

/* ---------- No office visits ---------- */
.no-office { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); color: var(--color-heading); }
.no-office .icon { color: var(--color-brand); flex-shrink: 0; }

/* ---------- Link rows (industries, cities, tools) ----------
   One design for every row that links to another page: optional icon, the
   name, one line of text, an arrow. The whole row is the link. From 640px the
   name and text use the same 2fr / 3fr columns as the content rows. */
.link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name arrow" "text arrow";
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: center;
}
.link-row:has(> .icon-badge) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon name arrow" "icon text arrow";
}
.link-row > * + * { margin-top: 0; }
.link-row > .icon-badge { grid-area: icon; }
.link-row__name { grid-area: name; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-brand); }
.link-row__text { grid-area: text; }
.link-row__arrow { grid-area: arrow; color: var(--color-brand); }
.link-row__arrow .icon { transition: transform 0.15s; }
.link-row:hover .link-row__name { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.link-row:hover .link-row__arrow .icon { transform: translateX(3px); }
@media (min-width: 640px) {
    .link-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
        grid-template-areas: "name text arrow";
        column-gap: var(--space-6);
    }
    .link-row:has(> .icon-badge) {
        grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr) auto;
        grid-template-areas: "icon name text arrow";
    }
}

.industry-also { margin-top: var(--space-5); max-width: var(--container-text); }
/* .section--groups: a section holding two or more groups, each under its own H3
   (home "Who we work with, and where"). Each later H3 starts a new group. */
.section--groups > .container > * + h3 { margin-top: var(--space-8); }

/* ---------- FAQ (accordion wired by script.js) ---------- */
.faq { border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-heading { margin: 0; font-size: var(--text-base); }
.accordion-heading button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-4) 0;
    border: 0;
    background: none;
    color: var(--color-heading);
    font: inherit;
    font-weight: var(--weight-medium);
    text-align: left;
    text-wrap: pretty;
    cursor: pointer;
}
.accordion-heading button:hover { color: var(--color-brand); }
.accordion-heading .icon { flex-shrink: 0; color: var(--color-brand); transition: transform 0.2s; }
.accordion-heading button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion-content { padding-bottom: var(--space-5); }
.accordion-content[aria-hidden="true"] { display: none; }

/* ---------- Testimonials ---------- */
.testimonial blockquote p { font-size: var(--text-lg); color: var(--color-heading); }
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Photo slot ---------- */
.photo-slot img {
    width: 100%;
    aspect-ratio: var(--ratio, 4/3);
    object-fit: cover;
    border-radius: var(--radius);
}
.photo-slot figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Result call box (tools) ---------- */
.result-call {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--color-sand);
    border-radius: var(--radius);
}
.result-call__line { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-heading); }
.result-call__button { margin-top: var(--space-4); }
.result-call .proof-line { margin-top: var(--space-4); }

/* ---------- Hero ----------
   Text on the left. From 1024px the right column holds the proof facts
   (2 x 2). proof="strip" puts the
   four facts in a full-width row under both columns. */
.hero { padding-block: clamp(3rem, 2rem + 6vw, 8rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero h1 { max-width: 24ch; font-size: var(--text-hero); line-height: 1.1; }
html[lang="kn"] .hero h1 { line-height: 1.4; }
.hero__lead { max-width: 34rem; margin-top: var(--space-5); font-size: var(--text-lead); color: var(--color-text-muted); }
.hero__call { margin-top: var(--space-6); }
/* One small line under the lead (service pages: "Not registered yet? …") */
.hero__fork { margin-top: var(--space-3); font-weight: var(--weight-medium); }
.hero__fork .link-arrow { white-space: nowrap; }   /* keeps the arrow with the link text */
.hero .proof-line { margin-top: var(--space-7); }
@media (min-width: 1024px) {
    .hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: var(--space-8);
        align-items: end;
    }
    .hero__grid > .proof-line:not(.proof-line--compact) { margin-top: 0; }
    /* No proof column (proof="strip", "compact" or false): the text uses the full width */
    .hero__text:only-child { grid-column: 1 / -1; }
}
/* The proof column is too narrow from 1024 to 1199px for a 2 x 2 grid without
   a number wrapping (e.g. "35 years"): stack the 4 facts in one column instead. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero__grid > .proof-line:not(.proof-line--compact) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Text section (prose) ---------- */
.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose > * + h3 { margin-top: var(--space-6); }
/* A check list inside running text: no bullet indent; the list's own gap spaces the items */
.prose .check-list { padding-left: 0; }
.prose .check-list li + li { margin-top: 0; }
.prose p + .check-list { margin-top: var(--space-3); }
.prose strong { color: var(--color-heading); font-weight: var(--weight-semibold); }
.section-lead { max-width: var(--container-text); margin-top: calc(-1 * var(--space-3)); margin-bottom: var(--space-5); }

/* ---------- Check list ---------- */
.check-list { display: grid; gap: var(--space-3); }
.check-list li { position: relative; padding-left: calc(20px + var(--space-3)); }
.check-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.2em;
    width: 20px; height: 20px;
    background: var(--color-brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Link groups (secondary links) ----------
   A short label, then stacked arrow links: industries, cities, the compact
   two paths and the guides under the tools. Two groups sit side by side in
   .link-groups from 640px. */
.link-group__label { font-weight: var(--weight-medium); color: var(--color-heading); }
.link-group__label + .link-list { margin-top: var(--space-1); }
.link-groups { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .link-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Up to 4 groups in a full-width (stacked) section: 2 columns from 560px,
   4 from 1200px (narrower columns wrap the labels and rows) */
@media (min-width: 560px) { .link-groups--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .link-groups--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); } }

/* ---------- Stacked blocks inside one section ---------- */
.stack > * + * { margin-top: var(--space-5); }
.stack > h2 + * { margin-top: 0; }

/* ---------- Lines on phones and tablets ----------
   Below 1024px everything stacks, so the section line is the only full-width
   divider. Inside a section, lines sit only between rows: none under the H2,
   none after the last row. Hero facts use spacing only. */
@media (max-width: 1023px) {
    .card-grid, .steps { border-bottom: 0; }
    .card-grid:not(.card-grid--columns) > .card:first-child, .card-grid > li:first-child > .card, .steps li:first-child { border-top: 0; padding-top: 0; }
    .card-grid > .card:last-child, .card-grid > li:last-child > .card, .steps li:last-child { padding-bottom: 0; }
    .steps li:first-child::before { top: calc(0.8em - var(--badge-sm) / 2 + 2px); } /* keeps badge 1 on its line */
    .card-grid + * { margin-top: var(--space-6); }
    .faq { border-top: 0; }
    .faq .accordion-item:last-child { border-bottom: 0; }
    .proof-line:not(.proof-line--compact) { border-bottom: 0; row-gap: var(--space-5); }
    .proof-line:not(.proof-line--compact) li { border-top: 0; padding-block: 0; }
}
/* Stacked columns (below 960px): a short green accent instead of a full-width line */
@media (max-width: 959px) {
    .card-grid--columns > .card { border-top: 0; padding-top: 0; }
    .card-grid--columns > .card::before {
        content: "";
        display: block;
        width: var(--space-7);
        height: 2px;
        margin-bottom: var(--space-4);
        background: var(--color-brand);
    }
}

/* ---------- Closing call ----------
   Deep green band, white text, white call button. Focus ring turns white. */
.closing-call h2 { margin-bottom: 0; max-width: 20ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.closing-call .btn--call { padding: var(--space-4) var(--space-6); }
.section--deep h2, .section--deep h3 { color: var(--color-on-brand); }
.section--deep .filing-promise { color: var(--color-on-brand); }
.section--deep .filing-promise .icon { color: var(--color-accent); }
.section--deep .btn--call { background: var(--color-surface); color: var(--color-brand-deep); }
.section--deep .btn--call:hover { background: var(--color-tint); color: var(--color-brand-deep); }
.section--deep :focus-visible { outline-color: var(--color-surface); }
.section--deep a { color: var(--color-on-brand); }
.section--deep .btn--call, .section--deep .btn--call:hover { text-decoration: none; }

/* ---------- Legal pages (privacy, terms) ----------
   The same simple layout on both: a short head on cream (H1, one summary
   line, the date), then one white band with numbered points in a single
   reading column, a thin line between them. */
.legal-head { padding-block: var(--space-7); }
.legal-head + .section--surface { padding-block: var(--space-7) var(--section-gap); }
.legal-head h1 { max-width: 20ch; }
.legal-head__lead { max-width: var(--container-text); margin-top: var(--space-4); font-size: var(--text-lead); color: var(--color-text-muted); }
.legal-head .note { margin-top: var(--space-4); }
.legal { max-width: var(--container-text); counter-reset: legal; }
.legal__item { counter-increment: legal; padding-block: var(--space-6); border-top: 1px solid var(--color-border); }
.legal__item:first-child { padding-top: 0; border-top: 0; }
.legal__item:last-child { padding-bottom: 0; }
.legal__item h2 { display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-3); font-size: var(--text-h3); letter-spacing: 0; }
.legal__item h2::before { content: counter(legal) "."; min-width: 1.5em; color: var(--color-brand); }
.legal__item > :not(h2) { padding-left: calc(1.5em * 1.25 + var(--space-3)); }
.legal__item > * + * { margin-top: var(--space-3); }
.legal__item h2 + * { margin-top: 0; }
.legal__other { margin-top: var(--space-5); }

/* ---------- Tools (calculators, checkers, converter) ----------
   Tool pages start with a short head (H1 + one line) so the tool is on the
   first screen on phones. The tool scripts build the fields and results with
   these classes. Inputs sit on cream with the strong border (3.5:1); errors
   are written out in words, never colour alone. */
.tool-section { padding-top: var(--space-6); }
.tool-section h1 { max-width: 20ch; }
.tool-lead { max-width: var(--container-text); margin-top: var(--space-4); font-size: var(--text-lg); }
.tool { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.tool-section h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
/* Form and result side by side from 1024px; the result call box sits under the result */
@media (min-width: 1024px) {
    .tool--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; }
    .tool--split > .tool-form { grid-row: 1 / span 2; }
    .tool--split > .result-call { margin-top: 0; }
}
/* Two separate checks (eligibility): side by side from 1024px */
.tool-checks { display: grid; gap: var(--space-7); margin-top: var(--space-5); }
@media (min-width: 1024px) { .tool-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.tool-check > h3 { margin-bottom: var(--space-4); }
/* v2 tool pages: hero-sized head; the tool sits in one white panel (each
   check in its own panel on the checkers); the result call box is tint.
   Scoped to tool pages, so blog posts keep their own head. */
[data-page-type="tool"] .tool-section h1,
[data-page-type="post"] .tool-section h1 { font-size: var(--text-hero); line-height: 1.1; }
html[lang="kn"] [data-page-type="tool"] .tool-section h1,
html[lang="kn"] [data-page-type="post"] .tool-section h1 { line-height: var(--leading-heading); }
[data-page-type="tool"] .tool-lead,
[data-page-type="post"] .tool-lead { font-size: var(--text-lead); color: var(--color-text-muted); }
[data-page-type="tool"] .tool,
[data-page-type="tool"] .tool-check {
    margin-top: var(--space-7);
    padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
[data-page-type="tool"] .tool-checks { margin-top: var(--space-7); column-gap: var(--space-6); row-gap: var(--space-6); }
[data-page-type="tool"] .tool-checks .tool-check { margin-top: 0; }
[data-page-type="tool"] .result-call { background: var(--color-tint); border-radius: var(--radius-lg); }
@media (max-width: 559px) {
    /* phones: the panel runs to the screen edge so fields keep their width */
    [data-page-type="tool"] .tool, [data-page-type="tool"] .tool-check { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding-inline: var(--gutter); }
}
.tool-checks + .result-call { max-width: var(--container-text); }
/* Guide article (v2 posts): every H2 of a post in one reading column, with
   more space above each H2; the mid-post call box sits between two .prose
   blocks, tint like the tool pages. */
main > .guide-article { padding-top: 0; border-top-color: transparent; }
.guide-article .prose > h2 { margin-top: var(--space-7); font-size: var(--text-h2-article); }
.guide-article .prose { max-width: var(--container-article); font-size: var(--text-lg); }
[data-page-type="post"] .tool-lead { max-width: var(--container-article); margin-top: var(--space-5); }
/* Post head: the article follows closely, not a full section gap below the byline */
[data-page-type="post"] .tool-section { padding-bottom: var(--space-7); }
.guide-article .prose > h2:first-child { margin-top: 0; }
.guide-article .result-call { max-width: var(--container-article); margin-block: var(--space-7); background: var(--color-tint); border-radius: var(--radius-lg); }

.tool-form { display: grid; gap: var(--space-5); max-width: 32rem; }
/* The scripts fill a wrapper div with the fields */
.tool-form > div:not(.field):empty { display: none; }
.tool-form > div:not(.field) { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); min-width: 0; padding: 0; border: 0; }
.field[hidden] { display: none; }
.field > label, .field > legend { font-weight: var(--weight-medium); color: var(--color-heading); padding: 0; }
.field > legend { margin-bottom: var(--space-2); }
.field input[type="number"], .field input[type="text"], .field input[type="month"],
.field input[type="date"], .field input[type="file"], .field select {
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
}
.field input[type="file"] { padding-block: var(--space-2); }
.field input[type="file"]::file-selector-button {
    min-height: calc(var(--tap-min) - 2 * var(--space-2) - 2px);
    margin-right: var(--space-3);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 2px var(--color-brand);
    background: transparent;
    color: var(--color-brand);
    font: inherit;
    font-weight: var(--weight-semibold);
    cursor: pointer;
}
/* A value the tool works out as you type (e.g. the due date), shown as text, not a box */
.field__output:has(output:empty) { display: none; }
.field__output output { font-weight: var(--weight-medium); color: var(--color-heading); }
.field input[aria-invalid="true"], .field[aria-invalid="true"] .radio { border-color: var(--color-warning); }
.field > p + p { margin-top: 0; }
.field__help { font-size: var(--text-sm); color: var(--color-text-muted); }
.field__error { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-warning); }
.field__error:empty { display: none; }
.field__options { display: grid; gap: var(--space-2); }
.radio {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.radio:has(input:checked) { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.radio input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--color-brand); }
.field-more summary { min-height: var(--tap-link); display: flex; align-items: center; color: var(--color-brand); font-weight: var(--weight-medium); cursor: pointer; }
.field-more[open] summary { margin-bottom: var(--space-4); }

/* The tool's own button: outlined, so it never looks like the call button */
.btn--outline {
    justify-self: start;
    background: transparent;
    color: var(--color-brand);
    box-shadow: inset 0 0 0 2px var(--color-brand);
}
.btn--outline:hover { background: transparent; color: var(--color-brand-dark); box-shadow: inset 0 0 0 2px var(--color-brand-dark); }
/* A button that reads as a link (e.g. "Check again") */
.btn-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-link);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-brand);
    font: inherit;
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.btn-link:hover { color: var(--color-brand-dark); }

/* Results */
.tool-result:empty { display: none; }
.tool-result > * + * { margin-top: var(--space-4); }
.tool-result:focus { outline: none; }
.result-summary p + p { margin-top: var(--space-1); }
.result-message { padding-top: var(--space-4); border-top: 2px solid var(--color-brand); }
.result-message strong { display: block; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-heading); }
.result-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.result-table th, .result-table td { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.result-table thead th { padding-top: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.result-table tbody th { font-weight: var(--weight-regular); padding-right: var(--space-4); }
.result-table td, .result-table thead th:last-child { text-align: right; white-space: nowrap; }
.result-table__subtotal th, .result-table__subtotal td { font-weight: var(--weight-medium); color: var(--color-heading); }
.result-table__total th, .result-table__total td {
    border-top: 2px solid var(--color-heading);
    border-bottom: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
}
.result-note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Eligibility result: a short green line above, an icon for the kind of
   answer (applies, doesn't apply, not needed yet, not sure). No red: these are
   answers, not warnings. */
.verdict { padding-top: var(--space-4); border-top: 2px solid var(--color-brand); }
.verdict > * + * { margin-top: var(--space-3); }
.verdict__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.verdict__title { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-heading); }
.verdict__label + .verdict__title { margin-top: var(--space-1); }
.verdict__title .icon { flex-shrink: 0; margin-top: 0.1em; color: var(--color-brand); }
.verdict__note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Converter: step list and the message under the button */
.tool-steps { display: grid; gap: var(--space-5); max-width: 32rem; counter-reset: tstep; }
.tool-steps > li { counter-increment: tstep; }
.tool-steps > li > * + * { margin-top: var(--space-3); }
.tool-steps h3::before { content: counter(tstep) ". "; color: var(--color-brand); }
.tool-status { font-weight: var(--weight-medium); color: var(--color-heading); }
.tool-status:empty { display: none; }
.tool-status--error { color: var(--color-warning); }

/* Note under "how this is worked out": the disclaimer in plain words, not red */
.note { font-size: var(--text-sm); color: var(--color-text-muted); }
.note strong { color: var(--color-heading); }

/* Tools hub: tool cards grouped under a question */
.tool-group + .tool-group { margin-top: var(--space-7); }
.tool-group > h3 { margin-bottom: var(--space-3); }
.tool-form + .tool-result { margin-top: var(--space-6); }


/* ---------- Bands ----------
   White and soft green bands need less padding than cream sections: the
   colour already separates them. Stacked headings get a little more room. */
.section--surface, .section--tint { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.section--stacked > .container > h2 { margin-bottom: var(--space-6); }

/* ---------- Panel cards ----------
   White rounded cards for a few points of equal weight. Use in a
   .section--stacked so they get the full width. */
.card-grid.card-grid--panel {
    gap: var(--space-5);
    border-bottom: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.card-grid.card-grid--panel > .card:not(.card--link), .paths-flow > .card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.card-grid.card-grid--panel > .card:not(.card--link) > * { grid-column: auto; grid-row: auto; }
.card-grid.card-grid--panel > .card:not(.card--link) > :nth-child(n+2), .paths-flow > .card > * + * { margin-top: var(--space-3); }
.card-grid.card-grid--panel > .card:not(.card--link) > h3, .paths-flow > .card > h3 { margin-bottom: 0; font-size: 1.375rem; }
.card-grid--panel .icon-badge, .paths-flow .icon-badge { align-self: flex-start; }
.section--surface .card-grid--panel > .card { box-shadow: none; }

/* Tool and link cards in a panel grid: icon beside the name, text below,
   the whole card is the link. Border only, no shadow. On hover: soft green
   background and green border; no lift and no underline. */
.card-grid.card-grid--panel > .card--link.link-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon name arrow" "text text text";
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: background-color 0.15s, border-color 0.15s;
}
.card-grid.card-grid--panel > .card--link.link-row:hover { background: var(--color-tint); border-color: var(--color-brand); }
.card-grid.card-grid--panel > .card--link.link-row:hover .link-row__name { text-decoration: none; }
.card-grid.card-grid--panel > .card--link.link-row:hover .icon-badge { background: var(--color-surface); }
/* Link cards without an icon (guide cards): name sits at the left edge */
.card-grid.card-grid--panel > .card--link.link-row:not(:has(> .icon-badge)) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name arrow" "text text";
}
/* Exactly 4 panel cards: 2 by 2 (never 3 + 1) */
@media (min-width: 640px) {
    .card-grid.card-grid--panel:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Two paths as a flow ----------
   Two white cards joined by an arrow (down on phones, across from 768px).
   The links sit at the foot of each card as full-width rows. */
.paths-flow { display: grid; gap: var(--space-3); justify-items: stretch; }
.paths-flow__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-brand);
}
.paths-flow__arrow .icon { transform: rotate(90deg); }
@media (min-width: 768px) {
    .paths-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-4); }
    .paths-flow__arrow .icon { transform: none; }
}
.row-links { margin-top: auto; padding-top: var(--space-4); }
.link-groups .link-list { margin-top: var(--space-2); }
.card-grid + .link-list { margin-top: var(--space-6); }
.card-grid + .link-groups { margin-top: var(--space-7); }
.card-grid + .prose { margin-top: var(--space-6); }
.row-links li, .link-groups .link-list li, .card-grid + .link-list li { border-top: 1px solid var(--color-border); padding-block: 0; }
.row-links a.link-arrow, .link-groups a.link-arrow, .card-grid + .link-list a.link-arrow {
    display: flex;
    gap: 0.3em;
    align-items: center;
    width: 100%;
    min-height: var(--tap-link);
    text-decoration: none;
}
.row-links a.link-arrow:hover, .link-groups a.link-arrow:hover, .card-grid + .link-list a.link-arrow:hover { text-decoration: underline; }
.row-links a.link-arrow .icon, .link-groups a.link-arrow .icon, .card-grid + .link-list a.link-arrow .icon { margin-left: auto; flex-shrink: 0; }
.link-groups .link-list li:last-child, .card-grid + .link-list li:last-child { border-bottom: 1px solid var(--color-border); }
.row-links .link-current { min-height: var(--tap-link); font-weight: var(--weight-medium); color: var(--color-text-muted); }

/* ---------- Timeline (How we work) ----------
   Filled number circles joined by a line: down on phones and tablets, across
   from 1024px. White numbers on green 6.5:1; muted text on tint 6:1. */
.steps.steps--timeline { max-width: none; border-bottom: 0; color: var(--color-text-muted); }
.steps.steps--timeline li:nth-child(n) {
    padding: calc((var(--badge-step) - 1.6em) / 2) 0 var(--space-5) calc(var(--badge-step) + var(--space-4));
    border-top: 0;
}
.steps.steps--timeline li:last-child { padding-bottom: 0; }
.steps.steps--timeline li:nth-child(n)::before {
    top: 0;
    width: var(--badge-step); height: var(--badge-step);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}
.steps.steps--timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--badge-step) / 2 - 1px);
    top: var(--badge-step);
    bottom: 0;
    width: 2px;
    background: var(--color-tint-line);
}
.steps.steps--timeline strong { display: block; font-size: var(--text-lg); color: var(--color-heading); }
.steps--timeline + .call-block { margin-top: var(--space-7); }
.steps--timeline + .prose { margin-top: var(--space-7); }
.steps--timeline + .prose + .call-block { margin-top: var(--space-6); }
@media (min-width: 1024px) {
    .steps.steps--timeline { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-5); }
    .steps.steps--timeline li:nth-child(n) { padding: calc(var(--badge-step) + var(--space-4)) 0 0; }
    .steps.steps--timeline li:not(:last-child)::after {
        left: calc(var(--badge-step) + var(--space-2));
        right: calc(-1 * var(--space-3));
        top: calc(var(--badge-step) / 2 - 1px);
        bottom: auto;
        width: auto;
        height: 2px;
    }
}

/* ---------- Proof strip ----------
   The four proof facts in a full-width row under the hero, split by thin
   lines. Large green numbers (5.9:1 on cream) over muted labels. */
.proof-strip { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.proof-strip .proof-line:not(.proof-line--compact) {
    margin-top: 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
    row-gap: var(--space-5);
}
.proof-strip .proof-line:not(.proof-line--compact) li { padding-block: 0; border-top: 0; }
.proof-strip .proof-line__num { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.proof-line__num { white-space: nowrap; }
@media (min-width: 768px) {
    .proof-strip .proof-line:not(.proof-line--compact) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
    .proof-strip .proof-line:not(.proof-line--compact) li { padding-inline: var(--space-5); border-left: 1px solid var(--color-border); }
    .proof-strip .proof-line:not(.proof-line--compact) li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Founder feature ----------
   Big "35 years" on the left, the story on the right (from 768px). */
.founder { display: grid; gap: var(--space-5); }
.founder__num { display: block; font-size: var(--text-display); line-height: 1.05; letter-spacing: var(--tracking-heading); color: var(--color-brand); white-space: nowrap; }
html[lang="kn"] .founder__num { letter-spacing: 0; }
.founder__label { display: block; margin-top: var(--space-2); color: var(--color-text-muted); }
@media (min-width: 768px) {
    .founder { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-8); align-items: center; }
}

/* ---------- Big number line ----------
   One big green number (e.g. "15th") beside one short line, above the
   section's columns. Side by side from 640px. Green on white 6.5:1. */
.big-line { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }
.big-line__num { font-size: var(--text-display); font-weight: var(--weight-medium); line-height: 1.05; letter-spacing: var(--tracking-heading); color: var(--color-brand); white-space: nowrap; }
html[lang="kn"] .big-line__num { letter-spacing: 0; }
.big-line__text { max-width: 30rem; font-size: var(--text-lead); color: var(--color-heading); }
@media (min-width: 640px) {
    .big-line { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); align-items: center; }
}

/* ---------- Fact pair ----------
   Two key numbers pulled out above running text (e.g. who must register). */
ul.fact-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.fact-pair__num { display: block; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: var(--leading-heading); color: var(--color-brand); white-space: nowrap; }
.fact-pair__label { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.prose > .fact-pair + * { margin-top: var(--space-5); }
.prose .fact-pair { padding-left: 0; }
.prose .fact-pair li + li { margin-top: 0; }

/* ---------- Statement band ----------
   One large sentence (the section's H2) and one support line. At most once a
   page. Heading colour on white 12.6:1; muted line on white 6.7:1. */
.statement__text {
    max-width: 24em;
    margin-bottom: 0;
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
    line-height: var(--leading-heading);
}
.section--stacked > .container > h2.statement__text { margin-bottom: 0; }
.statement__line { max-width: var(--container-text); margin-top: var(--space-5); font-size: var(--text-lead); color: var(--color-text-muted); }

/* ---------- Big word above a column ----------
   A number or short phrase in large green type on top of a column (instead
   of an icon), e.g. "35 years". Green on cream 5.9:1. */
.col-word {
    display: block;
    margin-bottom: var(--space-3);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-brand);
}
html[lang="kn"] .col-word { letter-spacing: 0; }
/* In a panel card (contact "Phone"), smaller so the number stays on one line */
.card-grid--panel .col-word { font-size: clamp(1.5rem, 1.1rem + 0.8vw, 1.875rem); white-space: nowrap; }
/* Side by side, a smaller size keeps each big word on one line, so the
   headings under them line up across the columns */
@media (min-width: 960px) {
    .card-grid--columns .col-word { font-size: clamp(1.75rem, 0.9rem + 1.6vw, 2.5rem); white-space: nowrap; }
}

/* ---------- Icons above columns ---------- */
.icon-badge--lg { width: 48px; height: 48px; }
.card-grid--columns .icon-badge { margin-bottom: var(--space-2); }

/* ---------- Map on tap ----------
   A light panel with a faint map grid; the Google map replaces it after the tap. */
.map-tap {
    display: grid;
    margin-top: var(--space-5);
    height: clamp(16rem, 8rem + 20vw, 28rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-tint);
    background-image: linear-gradient(var(--color-tint-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-tint-line) 1px, transparent 1px);
    background-size: 40px 40px;
}
.map-tap[hidden] { display: none; }
.map-tap__inner { place-self: center; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.map-tap__inner .icon { color: var(--color-brand); }
.map-tap__inner p { margin: 0; font-size: var(--text-sm); color: var(--color-text); }
.map-tap__inner .btn--outline { justify-self: center; background: var(--color-surface); }
.map-tap iframe { display: block; width: 100%; height: 100%; border: 0; }