/* =========================================================================
   Nagged — October 2026 design
   =========================================================================

   Loaded sitewide by layouts/app.blade.php, AFTER nagged.css, and not merged
   into it. nagged.css is the previous site and still paints every page that
   has not been redesigned. Every class here is prefixed `n26-`, so this file
   cannot reach those pages. When the rest of the site catches up, this file
   becomes the site and nagged.css is deleted — not the other way round.

   ── How this file is built (2026-09-29) ──────────────────────────────
   Bootstrap-style, with no Bootstrap: a container, a 12-column flex grid, a
   spacing scale and a fluid type scale, all declared once below and used by
   every section.

   It replaced a `--u` system in which every size was an artboard pixel value
   multiplied by (100vw / 1920) and elements were absolutely positioned at
   artboard coordinates. That reproduced the artboard exactly and fought
   responsive design at every turn. Tom's brief: things vertically aligned,
   centred correctly and padded correctly — NOT pixel-perfect. Alignment and
   centring come from flex and grid; space comes from the scale; sizes come
   from the type tokens. Nothing is positioned at a coordinate.
   ========================================================================= */

:root {
    /* Palette, 2026-09-28. Named for their job, not their hue. */
    --n-cta:        #24ff00;   /* primary buttons, highlight fills (was #a5ff82 to 2026-09-29) */
    --n-cta-soft:   #caff99;   /* the quieter companion to --n-cta */
    --n-ink:        #262416;   /* headings AND body */
    --n-accent:     #5cde29;   /* sub-headings only */
    --n-red:        #e3241b;   /* the one red: section 4's question (was the wave's "not") */
    --n-paper:      #ffffff;
    --n-dark:       #16150e;
    --n-rule:       rgba(38, 36, 22, .12);
    --n-muted:      rgba(38, 36, 22, .62);

    /* Faces — Adobe kit xnk3hkj.
         --n-head   FatFrank: headlines, section titles, green sub-lines,
                    buttons, tabs, stat figures. ONE WEIGHT (400) — nothing
                    set in it may ask for bold, or the browser fakes it.
         --n-body   Urca 400/700: everything read rather than scanned.
         --n-brand  Loretta: invented clients' own names ("Lily's Bakes"). */
    --n-head:       "fatfrank", sans-serif;
    --n-body:       "urca", sans-serif;
    --n-brand:      "loretta", serif;

    /* Fluid type. Each is clamp(phone floor, fluid middle, desktop ceiling);
       the ceiling is what the artboard draws at 1920. */
    --n-fs-display:  clamp(2.4rem, 1.1rem + 3.2vw, 5rem);      /* hero headline */
    --n-fs-body-xl:     clamp(1.25rem, .8rem + 1.9vw, 3.1rem); /* a band's one paragraph */
    --n-fs-body:        clamp(1rem, .75rem + .95vw, 1.9rem);   /* longer paragraphs */
    /* Every section title below the two heroes, and the line under it — one
       pair, so the headings match section to section. The band headlines had
       their own bigger pair until 2026-09-29, which is what wrapped "We know
       what you’re thinking…" and "We’re ready to go". */
    --n-fs-h2:       clamp(2.3rem, 1.1rem + 3.63vw, 5.5rem);   /* section title (+10% on 2026-09-29) */
    --n-fs-h2-sub:   clamp(1.6rem, .8rem + 2.4vw, 3.7rem);     /* the line under it */
    --n-fs-brand:    clamp(2.4rem, 1rem + 4.1vw, 6rem);        /* client name */
    --n-fs-lead:     clamp(1.5rem, .8rem + 2.4vw, 3.7rem);     /* "wants to…" */
    --n-fs-hero-sub: clamp(1.4rem, .8rem + 1.75vw, 2.65rem);
    --n-fs-body-lg:  clamp(1.1rem, .8rem + 1.35vw, 2.45rem);   /* ledes */
    --n-fs-chip:     clamp(1rem, .7rem + 1.2vw, 2.1rem);
    --n-fs-tab:      clamp(1.1rem, .7rem + 1.3vw, 2.25rem);
    --n-fs-intro:    clamp(3rem, 1rem + 6.6vw, 8.75rem);       /* "We make websites" */
    --n-fs-intro-line: clamp(1.9rem, .6rem + 4.5vw, 6rem);    /* "so you'll get … by customers" */
    --n-fs-btn-xl:   clamp(1.3rem, .6rem + 2.2vw, 3.1rem);     /* the intro's two buttons */
    --n-fs-btn:      clamp(1.05rem, .6rem + 1vw, 1.7rem);
    --n-fs-btn-sm:   clamp(.95rem, .6rem + .75vw, 1.35rem);
    --n-fs-nav:      clamp(1rem, .6rem + .95vw, 1.75rem);
    --n-fs-contact:  clamp(.85rem, .5rem + .75vw, 1.45rem);

    /* Grid gutters and section rhythm. */
    --n-gx: clamp(1rem, 2vw, 2rem);
    --n-section-y: clamp(3.5rem, 2rem + 5vw, 9rem);

}

/* ── Container ───────────────────────────────────────────────────────── */
/* Bootstrap's fixed steps up to 1400, then the ARTBOARD's proportion.

   The artboard is a 1920 canvas with a 1600 measure — 160 either side, so the
   content is 83.333% of the screen. Pure Bootstrap steps hold at 1320 from
   1400 all the way to the next step, which on a 1728-wide MacBook made the
   whole page 160px narrower than the design — Tom spotted it straight away
   (2026-09-29). From 1400 up the measure is 83.333vw of CONTENT, capped at
   1600, and the padding is added on top so it never eats into the measure.

   Below 1400 the steps stay: on a laptop-and-down screen a stable measure
   reads better than one that breathes with every pixel of window width. */
.n26-container {
    --n-container-pad: calc(var(--n-gx) * .5 + 4px);
    width: 100%; margin-inline: auto;
    padding-inline: var(--n-container-pad);
}
@media (min-width: 576px)  { .n26-container { max-width: 540px; } }
@media (min-width: 768px)  { .n26-container { max-width: 720px; } }
@media (min-width: 992px)  { .n26-container { max-width: 960px; } }
@media (min-width: 1200px) { .n26-container { max-width: 1140px; } }
@media (min-width: 1400px) {
    .n26-container { max-width: calc(min(83.333vw, 1600px) + var(--n-container-pad) * 2); }
}

/* ── Grid ────────────────────────────────────────────────────────────── */
.n26-row {
    display: flex; flex-wrap: wrap;
    margin-inline: calc(var(--n-gx) * -.5);
    row-gap: var(--n-gy, 0);
}
.n26-row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-inline: calc(var(--n-gx) * .5); }
.n26-col { flex: 1 0 0%; }
.n26-col-1 { flex: 0 0 auto; width: 8.33333%; }
.n26-col-2 { flex: 0 0 auto; width: 16.6667%; }
.n26-col-3 { flex: 0 0 auto; width: 25%; }
.n26-col-4 { flex: 0 0 auto; width: 33.3333%; }
.n26-col-5 { flex: 0 0 auto; width: 41.6667%; }
.n26-col-6 { flex: 0 0 auto; width: 50%; }
.n26-col-7 { flex: 0 0 auto; width: 58.3333%; }
.n26-col-8 { flex: 0 0 auto; width: 66.6667%; }
.n26-col-9 { flex: 0 0 auto; width: 75%; }
.n26-col-10 { flex: 0 0 auto; width: 83.3333%; }
.n26-col-11 { flex: 0 0 auto; width: 91.6667%; }
.n26-col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
    .n26-col-sm { flex: 1 0 0%; }
    .n26-col-sm-1 { flex: 0 0 auto; width: 8.33333%; }
    .n26-col-sm-2 { flex: 0 0 auto; width: 16.6667%; }
    .n26-col-sm-3 { flex: 0 0 auto; width: 25%; }
    .n26-col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
    .n26-col-sm-5 { flex: 0 0 auto; width: 41.6667%; }
    .n26-col-sm-6 { flex: 0 0 auto; width: 50%; }
    .n26-col-sm-7 { flex: 0 0 auto; width: 58.3333%; }
    .n26-col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
    .n26-col-sm-9 { flex: 0 0 auto; width: 75%; }
    .n26-col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
    .n26-col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
    .n26-col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
    .n26-col-md { flex: 1 0 0%; }
    .n26-col-md-1 { flex: 0 0 auto; width: 8.33333%; }
    .n26-col-md-2 { flex: 0 0 auto; width: 16.6667%; }
    .n26-col-md-3 { flex: 0 0 auto; width: 25%; }
    .n26-col-md-4 { flex: 0 0 auto; width: 33.3333%; }
    .n26-col-md-5 { flex: 0 0 auto; width: 41.6667%; }
    .n26-col-md-6 { flex: 0 0 auto; width: 50%; }
    .n26-col-md-7 { flex: 0 0 auto; width: 58.3333%; }
    .n26-col-md-8 { flex: 0 0 auto; width: 66.6667%; }
    .n26-col-md-9 { flex: 0 0 auto; width: 75%; }
    .n26-col-md-10 { flex: 0 0 auto; width: 83.3333%; }
    .n26-col-md-11 { flex: 0 0 auto; width: 91.6667%; }
    .n26-col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .n26-col-lg { flex: 1 0 0%; }
    .n26-col-lg-1 { flex: 0 0 auto; width: 8.33333%; }
    .n26-col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
    .n26-col-lg-3 { flex: 0 0 auto; width: 25%; }
    .n26-col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
    .n26-col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
    .n26-col-lg-6 { flex: 0 0 auto; width: 50%; }
    .n26-col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
    .n26-col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
    .n26-col-lg-9 { flex: 0 0 auto; width: 75%; }
    .n26-col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
    .n26-col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
    .n26-col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
    .n26-col-xl { flex: 1 0 0%; }
    .n26-col-xl-1 { flex: 0 0 auto; width: 8.33333%; }
    .n26-col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
    .n26-col-xl-3 { flex: 0 0 auto; width: 25%; }
    .n26-col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
    .n26-col-xl-5 { flex: 0 0 auto; width: 41.6667%; }
    .n26-col-xl-6 { flex: 0 0 auto; width: 50%; }
    .n26-col-xl-7 { flex: 0 0 auto; width: 58.3333%; }
    .n26-col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
    .n26-col-xl-9 { flex: 0 0 auto; width: 75%; }
    .n26-col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
    .n26-col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
    .n26-col-xl-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1400px) {
    .n26-col-xxl { flex: 1 0 0%; }
    .n26-col-xxl-1 { flex: 0 0 auto; width: 8.33333%; }
    .n26-col-xxl-2 { flex: 0 0 auto; width: 16.6667%; }
    .n26-col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .n26-col-xxl-4 { flex: 0 0 auto; width: 33.3333%; }
    .n26-col-xxl-5 { flex: 0 0 auto; width: 41.6667%; }
    .n26-col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .n26-col-xxl-7 { flex: 0 0 auto; width: 58.3333%; }
    .n26-col-xxl-8 { flex: 0 0 auto; width: 66.6667%; }
    .n26-col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .n26-col-xxl-10 { flex: 0 0 auto; width: 83.3333%; }
    .n26-col-xxl-11 { flex: 0 0 auto; width: 91.6667%; }
    .n26-col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

/* ── Utilities ───────────────────────────────────────────────────────── */
.n26-d-flex { display: flex !important; }
.n26-flex-column { flex-direction: column !important; }
.n26-flex-wrap { flex-wrap: wrap !important; }
.n26-align-items-start  { align-items: flex-start !important; }
.n26-align-items-center { align-items: center !important; }
.n26-align-items-end    { align-items: flex-end !important; }
.n26-justify-content-start   { justify-content: flex-start !important; }
.n26-justify-content-center  { justify-content: center !important; }
.n26-justify-content-end     { justify-content: flex-end !important; }
.n26-justify-content-between { justify-content: space-between !important; }
.n26-text-center { text-align: center !important; }
.n26-mt-0 { margin-top: 0 !important; } .n26-mb-0 { margin-bottom: 0 !important; } .n26-gap-0 { gap: 0 !important; }
.n26-mt-1 { margin-top: .25rem !important; } .n26-mb-1 { margin-bottom: .25rem !important; } .n26-gap-1 { gap: .25rem !important; }
.n26-mt-2 { margin-top: .5rem !important; } .n26-mb-2 { margin-bottom: .5rem !important; } .n26-gap-2 { gap: .5rem !important; }
.n26-mt-3 { margin-top: 1rem !important; } .n26-mb-3 { margin-bottom: 1rem !important; } .n26-gap-3 { gap: 1rem !important; }
.n26-mt-4 { margin-top: 1.5rem !important; } .n26-mb-4 { margin-bottom: 1.5rem !important; } .n26-gap-4 { gap: 1.5rem !important; }
.n26-mt-5 { margin-top: 2rem !important; } .n26-mb-5 { margin-bottom: 2rem !important; } .n26-gap-5 { gap: 2rem !important; }
.n26-mt-6 { margin-top: 3rem !important; } .n26-mb-6 { margin-bottom: 3rem !important; } .n26-gap-6 { gap: 3rem !important; }
.n26-mt-7 { margin-top: 4.5rem !important; } .n26-mb-7 { margin-bottom: 4.5rem !important; } .n26-gap-7 { gap: 4.5rem !important; }
.n26-mt-8 { margin-top: 6rem !important; } .n26-mb-8 { margin-bottom: 6rem !important; } .n26-gap-8 { gap: 6rem !important; }

/* ── Base ────────────────────────────────────────────────────────────── */
.n26 { color: var(--n-ink); font-family: var(--n-body); }
.n26-main { background: var(--n-paper); }
.n26-section { padding-block: var(--n-section-y); }

/* Every page, not just the homepage (2026-10-10). nagged.css's own tokens now
   carry this palette too; these two settle the page itself. FatFrank has one
   weight, and the older pages ask their headings for 600–700, which a browser
   fakes by smearing the outline — synthesis off renders the real face. */
body { background: var(--n-paper); color: var(--n-ink); }
h1, h2, h3, h4, h5, h6 { font-synthesis: none; }

/* ── Document pages (Privacy, Terms, …) ─────────────────────────────────
   One readable column on the container: FatFrank title and headings, Urca
   body, tables and lists in the same ink. A page opts in with
   <div class="n26 n26-doc"><div class="n26-container n26-doc__inner">. */
.n26-doc { padding-block: clamp(2.5rem, 5vw, 6rem) var(--n-section-y); }
.n26-doc__inner { max-width: calc(52rem + var(--n-gx)); }
.n26-doc h1 { margin: 0; color: var(--n-ink); font-size: var(--n-fs-h2); line-height: 1.08; }
.n26-doc__lead { margin: .5em 0 0; color: var(--n-accent); font-family: var(--n-head); font-size: var(--n-fs-h2-sub); line-height: 1.15; }
.n26-doc__updated { margin: 1rem 0 0; color: var(--n-muted); font-size: .95rem; }
.n26-doc__intro { margin: 1.75rem 0 0; font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem); line-height: 1.5; }
.n26-doc h2 { margin: 2.75rem 0 .75rem; color: var(--n-ink); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.15; }
.n26-doc h3 { margin: 1.75rem 0 .5rem; color: var(--n-ink); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.2; }
.n26-doc p, .n26-doc li { color: var(--n-ink); font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.65; }
.n26-doc p { margin: 0 0 1rem; }
.n26-doc ul, .n26-doc ol { margin: 0 0 1.25rem; padding-left: 1.4em; }
.n26-doc ul { list-style: disc; }       /* Tailwind's preflight strips both */
.n26-doc ol { list-style: decimal; }
.n26-doc li { margin-bottom: .4rem; }
.n26-doc li::marker { color: var(--n-accent); }
.n26-doc a { color: var(--n-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.n26-doc a:hover { text-decoration-thickness: 2px; }
.n26-doc strong { font-weight: 700; }
.n26-doc hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--n-rule); }
.n26-doc__table { overflow-x: auto; margin: 0 0 1.5rem; }
.n26-doc table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.n26-doc th, .n26-doc td { padding: .7rem .8rem; border-bottom: 1px solid var(--n-rule); text-align: left; vertical-align: top; line-height: 1.5; }
.n26-doc th { font-weight: 700; background: #f5f6f0; }
/* A value still to be confirmed — visible, so it is never mistaken for final. */
.n26-doc .placeholder { padding: .1em .4em; border-radius: .3em; background: var(--n-cta-soft); color: var(--n-ink); font-style: normal; }

/* A short centred notice on a page of its own (unsubscribe and the like). */
.n26-notice { padding-block: clamp(3rem, 7vw, 8rem); text-align: center; }
.n26-notice__inner { max-width: calc(36rem + var(--n-gx)); }
.n26-notice__badge {
    display: inline-block; margin-bottom: 1.5rem; padding: .5em 1em; border-radius: 999px;
    background: var(--n-cta); color: var(--n-ink); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.n26-notice__badge--warn { background: #fff1d6; color: #7a4d00; }
.n26-notice h1 { margin: 0 0 1rem; color: var(--n-ink); font-size: var(--n-fs-h2); line-height: 1.1; }
.n26-notice p { margin: 0 0 1rem; color: var(--n-ink); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.6; }
.n26-notice p.n26-notice__meta { margin-top: 1.5rem; color: var(--n-muted); font-size: .95rem; }
.n26-notice__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }


/* ── Type ────────────────────────────────────────────────────────────── */
.n26-h2 { margin: 0; color: var(--n-ink); font-size: var(--n-fs-h2); line-height: 1.12; }
.n26-h2-sub { margin: .15em 0 0; color: var(--n-accent); font-size: var(--n-fs-h2-sub); line-height: 1.15; }
.n26-lede { margin: 1rem 0 0; color: var(--n-ink); font-size: var(--n-fs-body-lg); line-height: 1.25; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* One component, sized in em from its own font-size so padding, gap and the
   arrow all scale together. The arrow is partials/_arrow. */
.n26-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .7em 1.05em; border: 2px solid transparent; border-radius: .45rem;
    font-size: var(--n-fs-btn-sm); line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.n26-btn:hover { text-decoration: none; transform: translateY(-1px); }
.n26-btn:active { transform: none; }
.n26-btn--lg { font-size: var(--n-fs-btn); padding: .72em 1.1em; }
.n26-btn--xl { font-size: var(--n-fs-btn-xl); padding: .32em .52em; border-radius: .25em; }
.n26-btn--lime          { background: var(--n-cta); color: var(--n-ink); }
.n26-btn--ink           { background: var(--n-ink); color: var(--n-paper); }
.n26-btn--dark          { background: var(--n-ink); color: var(--n-cta); }
.n26-btn--white         { background: var(--n-paper); color: var(--n-ink); }
.n26-btn--outline-light { background: transparent; color: var(--n-paper); border-color: var(--n-paper); }
.n26-btn--outline-dark  { background: transparent; color: var(--n-ink); border-color: var(--n-ink); }
.n26-btn--outline-dark:hover { background: rgba(38,36,22,.06); }
/* The hand-drawn arrow (partials/_arrow): the supplied shape as a mask, filled
   with the text colour. 100:68 is the file's own proportion. */
.n26-arrow {
    display: inline-block; flex: none; width: 1.35em; aspect-ratio: 100 / 68;
    background-color: currentColor;
    -webkit-mask: url('../images/home/arrow.png') center / contain no-repeat;
            mask: url('../images/home/arrow.png') center / contain no-repeat;
}

/* Heroicons / inline SVG icons carry no size of their own. */
.n26-ico { width: 1.25em; height: 1.25em; flex: none; display: block; color: currentColor; }

/* ── Header ──────────────────────────────────────────────────────────── */
/* partials/header: the wordmark on the left, and on the right two stacked
   rows — contacts, then the nav — both right-aligned. The wordmark is
   vertically centred against the pair, which is what the artboard shows.
   Solid dark on every page; transparent on the homepage, where it sits on
   the photograph. */
.n26-header { position: relative; z-index: 3; background: var(--n-dark); color: var(--n-paper); }
.n26-topblock--home .n26-header { background: transparent; }
.n26-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding-block: clamp(1rem, 2.5vw, 3rem);
}
.n26-header__brand { flex: none; display: block; }
/* White, as drawn. No white wordmark was supplied, so this renders the
   supplied green file white — the LOGO being coloured, not a photograph.
   Swap the src for a white PNG and delete the filter if one exists. */
.n26-header__mark { display: block; width: clamp(120px, 12vw, 230px); height: auto; filter: brightness(0) invert(1); }
.n26-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(.75rem, 1.4vw, 1.5rem); }

.n26-contact {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
    gap: .5rem clamp(1rem, 2vw, 2.4rem);
    font-size: var(--n-fs-contact); letter-spacing: .03em;
}
.n26-contact a { display: inline-flex; align-items: center; gap: .5em; color: var(--n-paper); text-decoration: none; }
.n26-contact a:hover { color: var(--n-cta); text-decoration: none; }

/* The Google chip — white, because Google's four-colour mark sits badly on
   dark and because that is what Google's own badge does. Sized in em from
   the contact row so it scales with it. */
.n26-rating {
    display: inline-flex; align-items: center; gap: .5em;
    height: 2.45em; padding: 0 .95em; border-radius: 999px;
    background: var(--n-paper); color: var(--n-ink);
    font-size: .74em; letter-spacing: 0;
}
.n26-rating__g { display: inline-flex; }
.n26-rating__g svg { width: 1.3em; height: 1.3em; display: block; }
.n26-rating__word  { font-weight: 700; }
.n26-rating__stars { color: #FBBC05; letter-spacing: .04em; }
.n26-rating__num   { font-weight: 700; }
.n26-rating__count { color: var(--n-muted); }

.n26-nav { position: static; }
.n26-nav__links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 2vw, 2.45rem); }
.n26-nav__links a {
    color: var(--n-paper); text-decoration: none; white-space: nowrap;
    font-size: var(--n-fs-nav); font-weight: 800; letter-spacing: .02em;
    /* 800 as specified; the kit has Urca at 400 and 700, so this renders at
       700 until a heavier Urca is added to kit xnk3hkj. */
}
.n26-nav__links a:hover { color: var(--n-cta); text-decoration: none; }
/* The nav CTAs as buttons (partials/nav). Button face at 85% of the nav
   links' size, so they sit in the row rather than towering over it. The
   selectors carry the header and the <a> so they outrank the nav links'
   own colour, hover-lime and ink-tone underline rules — without that the
   green button's text turned green on hover and vanished. */
.n26-nav__links a.n26-navcta {
    gap: .45em; padding: .55em .8em;
    font-size: calc(var(--n-fs-nav) * .85); letter-spacing: 0;
}
.n26-header .n26-nav__links a.n26-navcta--primary,
.n26-header .n26-nav__links a.n26-navcta--primary:hover   { background: var(--n-cta);   color: var(--n-ink); text-decoration: none; }
.n26-header .n26-nav__links a.n26-navcta--secondary,
.n26-header .n26-nav__links a.n26-navcta--secondary:hover { background: var(--n-paper); color: var(--n-ink); text-decoration: none; }
/* On the green pottery photo the neon button would vanish, so the primary
   is ink there — the same pair as the intro's own two buttons. */
.n26-header--ink .n26-nav__links a.n26-navcta--primary,
.n26-header--ink .n26-nav__links a.n26-navcta--primary:hover { background: var(--n-ink); color: var(--n-paper); }

.n26-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    background: transparent; border: 2px solid rgba(255,255,255,.6); border-radius: 8px; cursor: pointer;
}
.n26-burger span { display: block; height: 2px; border-radius: 2px; background: var(--n-paper); }

@media (max-width: 991.98px) {
    /* Nav behind the burger; the list drops down under the whole header. */
    .n26-nav__links { display: none; }
    .n26-nav__links.is-open {
        display: flex; flex-direction: column; align-items: flex-end; gap: 1rem;
        position: absolute; left: 0; right: 0; top: 100%;
        padding: 1.25rem calc(var(--n-gx) * .5 + 4px) 1.5rem;
        background: var(--n-dark);
    }
    .n26-burger { display: flex; }
    .n26-header__right { flex-direction: row; align-items: center; gap: 1rem; }
    /* Icons only on the contact row; the numbers are one tap away. */
    .n26-contact__text { display: none; }
    .n26-contact .n26-ico { width: 22px; height: 22px; }
}
@media (max-width: 767.98px) {
    .n26-rating { display: none; }
}

/* Ink tone — the header on a light photo (@section('header-tone','ink')).
   Dark text, the supplied black wordmark unfiltered. Hover can't go green
   here — the photo IS green — so links underline instead. */
.n26-header--ink { color: var(--n-ink); }
.n26-header--ink .n26-header__mark { filter: none; }
.n26-header--ink .n26-contact a,
.n26-header--ink .n26-nav__links a { color: var(--n-ink); }
.n26-header--ink .n26-contact a:hover,
.n26-header--ink .n26-nav__links a:hover {
    color: var(--n-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em;
}
.n26-header--ink .n26-burger { border-color: rgba(38,36,22,.6); }
.n26-header--ink .n26-burger span { background: var(--n-ink); }
@media (max-width: 991.98px) {
    .n26-header--ink .n26-nav__links.is-open { background: var(--n-paper); }
    /* The white CTA on the white drop-down needs an edge to be seen. */
    .n26-header--ink .n26-nav__links.is-open a.n26-navcta--secondary { box-shadow: inset 0 0 0 2px var(--n-ink); }
}

/* ── Top block (homepage) ────────────────────────────────────────────── */
/* The header and the hero on one photograph that runs the full width and
   stops at the bottom of the hero. A real wrapper + a real <img> with
   object-fit: cover, because a background image cannot be bounded to part
   of its element. The photo is used exactly as supplied: no overlay, no
   gradient, no filter. */
/* The fallback fill behind the photo is the green, so a slow load reads as
   the right page rather than a black box. */
.n26-topblock--home { position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--n-cta); color: var(--n-ink); }
.n26-topblock__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
/* At desktop the block is at least as tall as the photo's own proportions
   (1920×1040), so the whole picture shows; the intro centres itself in
   what's left. */
@media (min-width: 992px) { .n26-topblock--home { min-height: min(54.167vw, 1040px); } }

/* ── Intro (section 0) ───────────────────────────────────────────────── */
/* Ink headline in two sizes, the black script inline in the smaller line,
   a white sub, two buttons in a row. */
.n26-intro { flex: 1; display: flex; align-items: center; padding-block: clamp(1rem, 1.5vw, 2rem) clamp(3rem, 7vw, 9rem); color: var(--n-ink); }
.n26-intro > .n26-container { width: 100%; }
.n26-intro__title { margin: 0; color: var(--n-ink); }
.n26-intro__big  { display: block; font-size: var(--n-fs-intro); line-height: 1; }
.n26-intro__line { display: block; font-size: var(--n-fs-intro-line); line-height: 1.2; margin-top: .15em; }
/* The black script — same treatment as the hero's green one: em-sized off
   its line, inline-block past Tailwind's img{display:block}, negative
   vertical margins so its 1.77em height hangs over the line rather than
   pushing the sub down. */
.n26-intro__mark { display: inline-block; width: 4em; height: auto; vertical-align: baseline; margin: -.95em 0 -.7em; }
/* No <br>: the sub wraps on its measure, which breaks after "what you" at
   desktop as drawn (16em — FatFrank is wider than the artboard's face). The shadow is the same one the wave headline carries. */
.n26-intro__sub {
    max-width: 16em; margin: clamp(1.5rem, 3.4vw, 4rem) 0 0;
    color: var(--n-paper); font-size: var(--n-fs-h2-sub); line-height: 1.2;
    text-shadow: .05em .05em 0 rgba(24, 90, 0, .38);
}
.n26-intro__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1rem, 2.6vw, 3.2rem); margin-top: clamp(1.75rem, 3.6vw, 4.5rem); }

/* ── Hero (section 1, Lily's Bakes) ──────────────────────────────────── */
/* Its own photo, bounded to the section the same way as the top block's,
   and shorter than it was as the top of the page: 800 at 1920. */
.n26-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center;
    padding-block: clamp(2.5rem, 2.9vw, 3.5rem);
    background: var(--n-dark); color: var(--n-paper);
}
.n26-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
@media (min-width: 992px) { .n26-hero { min-height: min(41.667vw, 800px); } }
.n26-hero > .n26-container { width: 100%; }
.n26-hero__title { margin: 0; color: var(--n-paper); font-size: var(--n-fs-display); line-height: 1.15; }
/* The green script inside the headline. em-sized so it tracks the headline
   at every width. Negative vertical margins take its height OUT of the line
   box: it is 1.84× the text height and hangs below the baseline, and without
   them it would push the headline's second line down. inline-block because
   Tailwind's preflight makes every img a block, which breaks the line. */
.n26-hero__mark { display: inline-block; width: 4em; height: auto; vertical-align: baseline; margin: -.12em 0 -.875em .08em; }
.n26-hero__sub { margin: .9em 0 0; color: var(--n-paper); font-size: var(--n-fs-hero-sub); line-height: 1.18; }
.n26-hero__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: clamp(1.25rem, 2vw, 2rem); }

/* The three supplied composites. Cards stacked and right-aligned (so the
   wider Facebook card reaches further left, as drawn), phone beside them,
   the whole group vertically centred on the copy. Each image is capped at
   its native width and shrinks in proportion below it. */
.n26-hero__art { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 1.7vw, 2rem); }
.n26-hero__cards { flex: 0 1 420px; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.n26-hero__cards img { display: block; height: auto; }
.n26-hero__ig { width: 71.43%; max-width: 300px; }
.n26-hero__fb { width: 100%;   max-width: 420px; }
.n26-hero__phone { flex: 0 1 334px; display: block; width: 100%; max-width: 334px; height: auto; }
@media (max-width: 991.98px) {
    .n26-hero__art { display: none; }
}

/* ── Section 0b · Who are Nagged? ────────────────────────────────────── */
/* White band, left-aligned on the container. Title with the black script
   inline (same hanging treatment as the intro's), a FatFrank lead, Urca
   body with one sentence per line at desktop, a FatFrank note, then three
   lime contact buttons that wrap on a phone. */
.n26-who { background: var(--n-paper); color: var(--n-ink); padding-block: clamp(3rem, 5vw, 6.5rem) clamp(3.5rem, 6vw, 7.5rem); }
.n26-who__title { margin: 0; color: var(--n-ink); font-size: var(--n-fs-h2); line-height: 1.1; }
.n26-who__mark { display: inline-block; width: 3.6em; height: auto; vertical-align: baseline; margin: -.8em 0 -.62em; }
.n26-who__lead { margin: .55em 0 0; color: var(--n-ink); font-size: var(--n-fs-hero-sub); line-height: 1.15; }
.n26-who__body { margin: .35em 0 0; color: var(--n-ink); font-size: var(--n-fs-body-lg); line-height: 1.35; }
.n26-who__body span { display: block; }
.n26-who__note { margin: 1.4em 0 0; color: var(--n-ink); font-size: var(--n-fs-btn-sm); line-height: 1.3; }
.n26-who__acts { display: flex; flex-wrap: wrap; gap: 1rem clamp(1rem, 2vw, 2rem); margin-top: clamp(1rem, 1.6vw, 1.75rem); }
.n26-who__btn {
    display: inline-flex; align-items: center; gap: .6em;
    padding: .64em .85em; border-radius: .45rem;
    background: var(--n-cta); color: var(--n-ink);
    /* Button text matches every other button below the intro — FatFrank at
       --n-fs-btn (2026-09-29); it was Urca at the contact-row size. Padding
       scaled down by the same ratio so the button itself stays its size. */
    font-size: var(--n-fs-btn); line-height: 1; white-space: nowrap;
    text-decoration: none; transition: transform .12s ease;
}
.n26-who__btn:hover { color: var(--n-ink); text-decoration: none; transform: translateY(-1px); }
.n26-who__btn .n26-ico { width: 1.35em; height: 1.35em; }

/* ── Section 2 · Case studies ────────────────────────────────────────── */
/* A phone and a panel side by side, the phone overlapping the panel's left
   edge — so the panel pulls left under the phone by half the phone's width
   and pads its content back out past it. Both share one height (the row
   stretches), and the panel's content is vertically centred in it. */
.n26-cases__head { margin-bottom: clamp(1.5rem, 2.5vw, 2.75rem); }
.n26-case { --n-phone-w: clamp(220px, 23.2vw, 446px); display: flex; align-items: stretch; }
.n26-case[hidden] { display: none; }
.n26-case__phone { position: relative; z-index: 2; flex: none; display: block; width: var(--n-phone-w); height: auto; align-self: flex-start; }
.n26-case__panel {
    position: relative; z-index: 1; flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    margin-left: calc(var(--n-phone-w) * -.5);
    padding: clamp(1.5rem, 3vw, 3.5rem) clamp(1.25rem, 2.5vw, 3rem) clamp(1.5rem, 3vw, 3.5rem) calc(var(--n-phone-w) * .5 + clamp(1.5rem, 2.5vw, 3rem));
    border-radius: clamp(1.5rem, 2.9vw, 3.5rem);
    /* Sampled off the artboard: saturated at the right, paler to the left
       and bottom. No border — the artboard has none. */
    background:
        radial-gradient(120% 90% at 100% 30%, #6cff40 0%, #7eff54 30%, rgba(178,255,141,0) 70%),
        linear-gradient(180deg, #aeff88 0%, #b8ff98 55%, #b3ff8b 100%);
}
.n26-case__tabs { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.n26-tab {
    min-width: 7em; padding: .55em 1.1em; border: 2px solid var(--n-ink); border-radius: 999px;
    background: transparent; color: var(--n-ink); cursor: pointer;
    font-size: var(--n-fs-tab); line-height: 1;
}
.n26-tab[aria-selected="true"] { background: var(--n-paper); }
.n26-case__name { margin: 0; color: var(--n-ink); font-size: var(--n-fs-brand); line-height: 1.1; }
.n26-case__want { margin: .25em 0 0; max-width: 16em; color: var(--n-ink); font-size: var(--n-fs-lead); line-height: 1.15; }
.n26-case__how  { margin: .6em 0 0; color: var(--n-ink); font-size: var(--n-fs-body-lg); line-height: 1.25; }

/* Four equal tiles. Top margin leaves room for the icons, which break out of
   the top of each tile. Text centred along the bottom of the tile. */
.n26-case__chips {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.75rem, 1.3vw, 1.5rem);
    width: 100%; max-width: 60rem; margin-top: clamp(2.25rem, 3vw, 3.25rem);
}
.n26-chip {
    position: relative; aspect-ratio: 217 / 246;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0 .6em 1.05em; border-radius: clamp(.9rem, 1.8vw, 2.1rem);
    background: var(--n-ink); font-size: var(--n-fs-chip);
}
/* The icons are @2x files; height is set relative to the tile so they stay
   in proportion to it at every width. */
.n26-chip__icon { position: absolute; left: 50%; top: -11%; transform: translateX(-50%); height: 40%; width: auto; display: block; }
.n26-chip__text { color: var(--n-paper); text-align: center; line-height: 1.18; }
.n26-case__btn { margin-top: clamp(1.5rem, 2.8vw, 3.25rem); }

@media (max-width: 991.98px) {
    /* Stacked: the phone centred on top, overlapping the panel's TOP edge the
       way it overlaps the left edge on desktop. */
    .n26-case { --n-phone-w: min(280px, 72vw); flex-direction: column; align-items: center; }
    .n26-case__phone { align-self: center; margin-bottom: -4.5rem; }
    .n26-case__panel { width: 100%; margin-left: 0; padding: 6rem 1.25rem 1.75rem; border-radius: 1.75rem; }
    .n26-case__want { max-width: none; }
    /* Two to a row; the row gap is bigger because each icon breaks out of
       its tile into the row above. */
    .n26-case__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
    .n26-chip { aspect-ratio: auto; min-height: 9.5rem; padding-top: 3.5rem; }
    .n26-chip__icon { height: 4.25rem; top: -1.25rem; }
    .n26-case__btn { white-space: normal; text-align: left; }
}

/* ── Section 3 · On the go (artboard v2) ─────────────────────────────── */
/* Two grid columns, the same height (the row stretches). The copy column is
   right-aligned and vertically centred; its right edge is the container's,
   the same line the header's nav ends on. The image column pushes its image
   to the bottom, and a negative bottom margin equal to the band's padding
   stands it ON the band's bottom edge rather than above it. */
.n26-go { --n-go-pad: clamp(3rem, 6vw, 7.5rem); position: relative; overflow: hidden; background: var(--n-cta); padding-block: var(--n-go-pad); }
.n26-go .n26-row { align-items: stretch; }
/* The background wordmark: centred on the band and a little wider than it,
   so its strokes run off both edges the way the artboard's do. Behind
   everything, and never catching a click meant for the buttons. */
.n26-go__ghost {
    position: absolute; left: 50%; top: 50%; z-index: 0;
    width: max(110%, 900px); height: auto; transform: translate(-50%, -50%);
    pointer-events: none; user-select: none;
}
.n26-go > .n26-container { position: relative; z-index: 1; }
.n26-go__media { display: flex; align-items: flex-end; }
.n26-go__img { display: block; width: 100%; max-width: 628px; height: auto;   /* @1x width of the @2x file */ margin-bottom: calc(var(--n-go-pad) * -1); }
.n26-go__copy { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
.n26-go__title { margin: 0; color: var(--n-ink); font-size: var(--n-fs-h2); line-height: 1.08; }
.n26-go__sub   { margin: .05em 0 0; color: var(--n-ink); font-size: var(--n-fs-h2-sub); line-height: 1.1; }
.n26-go__body  { margin: .75em 0 0; max-width: 18em;   /* three lines, as drawn, for the longer 2026-09-29 copy */ color: var(--n-ink); font-size: var(--n-fs-body-xl); line-height: 1.2; }
.n26-go__acts  { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 3.5rem); }

@media (max-width: 991.98px) {
    /* Copy first, left-aligned for reading; the image under it, still
       standing on the band's bottom edge. */
    .n26-go .n26-row { flex-direction: column-reverse; }
    .n26-go__copy { align-items: flex-start; text-align: left; }
    .n26-go__acts { align-items: flex-start; }
    .n26-go__body { max-width: none; }
    .n26-go__media { justify-content: center; margin-top: 2rem; }
    .n26-go__img { max-width: min(460px, 90%); }
}

/* ── Section 4 · "Can't I make a website with AI?" ──────────────────── */
/* isolation makes this section the stacking context, so the rotated wordmark
   (z-index -1, see below) paints ABOVE the section's white but BEHIND every
   line of text in it — including the end of the second list item, which it
   passes behind on the artboard. overflow clips it at the section edges, as
   drawn. */
.n26-ai { position: relative; isolation: isolate; overflow: hidden; background: var(--n-paper); }
.n26-ai__title { margin: 0; color: var(--n-ink); font-size: var(--n-fs-h2); line-height: 1.08; }
.n26-ai__sub   { margin: .1em 0 0; color: var(--n-red); font-size: var(--n-fs-h2-sub); line-height: 1.1; }
.n26-ai__row   { margin-top: clamp(1.5rem, 3vw, 3rem); --n-gy: 2.5rem; }
.n26-ai__lead  { margin: 0; color: var(--n-ink); font-size: var(--n-fs-body-xl); line-height: 1.2; }
/* The three points, 10% smaller than the "3 things." above them.
   Numbered with a counter rather than list-style: Tailwind's preflight sets
   `ol { list-style: none }`, so the numbers never rendered and the list was
   left indented around a gap. The number sits on the same left edge as
   "3 things." and the text hangs after it, so a wrapped line lines up under
   its own text, not under the number (2026-09-29). */
.n26-ai__list  {
    margin: .15em 0 0; padding: 0; list-style: none; counter-reset: n26-ai;
    color: var(--n-ink); font-size: calc(var(--n-fs-body-xl) * .72); line-height: 1.25;   /* .9 → .72: 20% smaller once the points became full sentences */
}
.n26-ai__list li { position: relative; padding-left: 1em; counter-increment: n26-ai; }
.n26-ai__list li::before { content: counter(n26-ai) "."; position: absolute; left: 0; top: 0; }
/* The points became full sentences, several lines each (2026-09-29), so they
   need air between them or they read as one block. */
.n26-ai__list li + li { margin-top: .6em; }
.n26-ai__btn   { margin-top: clamp(1.5rem, 3vw, 3.25rem); }

/* The caption and the face, right-aligned together. The caption is FatFrank,
   right-aligned and tipped a few degrees clockwise, with its arrow under the
   last line pointing across at the face. */
.n26-ai__who { position: relative; margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: clamp(.75rem, 1.2vw, 1.25rem); }
/* No forced line breaks: the caption wraps to whatever the space beside the
   face allows. flex: 1 lets it take that space and min-width: 0 lets it
   shrink below its one-line width, which a flex item otherwise refuses to. */
.n26-ai__caption {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: .25em;
    color: var(--n-ink); text-align: right; font-size: clamp(1.1rem, .7rem + 1.5vw, 2.4rem); line-height: 1.08;
    transform: rotate(4deg); transform-origin: right center;
}
.n26-ai__caption .n26-arrow { width: 1.1em; }
.n26-ai__face { flex: none; display: block; width: clamp(110px, 8.2vw, 158px); height: auto; }   /* @1x of the @2x file */

/* The wordmark, turned 90° clockwise and centred on the caption-and-face
   group (nudged right, as drawn) so one of its loops contains them.
   Positioned inside the figure so it FOLLOWS that group at every width; its
   z-index of -1 drops it behind all the section's text (see .n26-ai).
   A mask rather than an <img> so the supplied shape can carry the artboard's
   colour for this section without the file being edited. */
.n26-ai__ghost {
    position: absolute; z-index: -1; left: 50%; top: 50%;
    width: min(95vw, 1823px); aspect-ratio: 1823 / 803;
    background: #e4ffd9;
    -webkit-mask: url('../images/home/on-the-go-bg-logo.webp') center / contain no-repeat;
            mask: url('../images/home/on-the-go-bg-logo.webp') center / contain no-repeat;
    transform: translate(calc(-50% + 4vw), -50%) rotate(90deg);
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .n26-ai__who { justify-content: flex-start; }
    .n26-ai__caption { align-items: flex-end; }
}

/* ── Section 5 · Why do I need a website? ───────────────────────────── */
/* The band's gradient is sampled off the artboard: lime with pale diagonal
   streaks running through it. No image was supplied for it, so it is drawn. */
.n26-stats {
    background: linear-gradient(160deg,
        #c2feac 0%, #e9ffdc 18%, #b9fe98 32%, #a8fe86 50%,
        #d8ffc6 64%, #f5fff0 76%, #c8fea8 90%, #b6fe8f 100%);
}
.n26-stats__quote { margin: .1em 0 0; color: var(--n-ink); font-size: var(--n-fs-h2-sub); line-height: 1.15; }
.n26-stats__list {
    list-style: none; padding: 0;
    margin: clamp(2.25rem, 3.5vw, 4rem) 0 0;
    display: grid; gap: clamp(2.5rem, 4vw, 4.5rem);
}
/* The pill. Its height is the TEXT's; the number is far taller and breaks
   out of the top and bottom by way of its negative block margins, which is
   how the artboard draws it. */
.n26-stat {
    display: flex; align-items: center; gap: clamp(.75rem, 1.2vw, 1.25rem);
    min-height: clamp(4.25rem, 6vw, 7.2rem);
    padding: .5rem clamp(1.25rem, 2.4vw, 3rem) .5rem clamp(1.5rem, 2.9vw, 3.5rem);
    background: #f5fff0; border: 1px solid #c7ffae; border-radius: 999px;
}
.n26-stat__n {
    flex: none; color: var(--n-ink);
    font-size: clamp(4rem, 1.5rem + 7.7vw, 12rem); line-height: .78;
    margin-block: -.2em; letter-spacing: -.02em;
}
/* Text and source together; the source is right-aligned to the END OF THE
   TEXT, not to the pill — which is where the artboard puts it. */
.n26-stat__body { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.n26-stat__t {
    color: var(--n-ink); font-size: clamp(1.1rem, .6rem + 1.9vw, 3rem);
    font-weight: 700; font-style: italic; line-height: 1.15;
}
/* A proper superscript: lifted to the top of the capitals. vertical-align
   is reset to baseline so the lift is exactly `top`, not the browser's
   `super` plus it — and line-height 0 keeps it out of the line box, so a
   raised marker can't push its line away from the one above. */
.n26-stat__t sup { font-size: .5em; line-height: 0; vertical-align: baseline; position: relative; top: -1.15em; margin-left: .15em; }
.n26-stat__cite {
    margin-top: .35rem; color: #a3ad9a; font-size: clamp(.6rem, .5rem + .3vw, .72rem);
    font-weight: 700; font-style: italic; text-decoration: none; overflow-wrap: anywhere; text-align: right;
}
.n26-stat__cite:hover { color: var(--n-ink); }

@media (max-width: 767.98px) {
    /* The text wraps on a phone, so the pill becomes a rounded card. */
    .n26-stat { border-radius: 1.5rem; padding-block: 1rem; }
}

/* ── Section 6 · Reviews ────────────────────────────────────────────── */
/* overflow-x: clip because the card track reaches to the screen's right
   edge, and 100vw includes a vertical scrollbar on Windows — without the
   clip that scrollbar's width becomes a sideways page scroll. */
.n26-reviews { overflow-x: clip; }

/* Chip and attribution on one row, left-aligned under the green line. */
.n26-rev__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
    margin: clamp(1.25rem, 2.2vw, 2.25rem) 0 clamp(1.75rem, 3vw, 3rem);
}
.n26-rev__chip {
    font-size: clamp(.9rem, .75rem + .35vw, 1.1rem);
    border: 1px solid var(--n-rule); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.n26-rev__chip:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); text-decoration: none; }
.n26-rev__attr {
    display: inline-flex; align-items: center; gap: .45em; margin: 0;
    color: var(--n-muted); font-size: clamp(.9rem, .75rem + .35vw, 1.1rem);
}
.n26-rev__attr a { display: inline-flex; align-items: center; gap: .4em; color: inherit; text-decoration: none; }
.n26-rev__attr a:hover { color: var(--n-ink); }
.n26-rev__attr-g svg { width: 1em; height: 1em; display: block; }

/* The track: left edge on the container, right edge on the SCREEN, so the
   next card peeks in and runs off the edge as drawn. The negative margin
   reaches exactly to the viewport edge because the container is centred;
   the matching padding lets the last card still scroll fully into view. */
.n26-rev__track {
    display: flex; gap: clamp(1rem, 2vw, 2.5rem);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%);
    padding-bottom: .25rem;
}
.n26-rev__track::-webkit-scrollbar { display: none; }
.n26-rev__track:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 4px; }

/* A card is ~88% of the container, which is what leaves the next one
   peeking: 73.3vw is 88% of the 1600/1920 measure from 1400 up. */
.n26-rev__card {
    flex: 0 0 min(73.3vw, 1406px); scroll-snap-align: start;
    display: flex; flex-direction: column;
    min-height: clamp(12rem, 16vw, 19rem);
    padding: clamp(1.25rem, 2vw, 2.2rem);
    border: 1px solid var(--n-cta); border-radius: clamp(1.25rem, 2.5vw, 2.6rem);
    background: var(--n-paper);
}
.n26-rev__mark { display: block; height: .5em; color: var(--n-ink); font-size: clamp(3.5rem, 5.5vw, 7rem); line-height: .8; }
.n26-rev__quote {
    margin: clamp(.75rem, 1.5vw, 1.5rem) 0 0; color: var(--n-ink);
    font-size: clamp(1.05rem, .75rem + 1.1vw, 2.2rem); line-height: 1.3;
    font-weight: 700; font-style: italic;
}
/* Name bottom-right, as drawn; the photo and stars small beside it for
   Google's attribution rules. */
.n26-rev__by {
    margin-top: auto; padding-top: 1rem; align-self: flex-end;
    display: flex; align-items: center; gap: .6rem;
    color: #a9a9a9; font-size: clamp(.95rem, .7rem + .9vw, 2rem); font-style: italic; font-weight: 700;
}
.n26-rev__avatar { width: 1.4em; height: 1.4em; border-radius: 50%; object-fit: cover; }
.n26-rev__stars { color: #FBBC05; font-style: normal; font-size: .75em; letter-spacing: .05em; }
.n26-rev__name { color: inherit; text-decoration: none; }
.n26-rev__name:hover { color: var(--n-ink); }
.n26-rev__all { margin-top: clamp(1.5rem, 2.8vw, 3rem); }

@media (max-width: 767.98px) {
    .n26-rev__card { flex-basis: 86vw; }
}

/* ── Section 7 · Our services ────────────────────────────────────────── */
/* The supplied photo behind, cover-fitted, no overlay. Title, a strip of
   text tabs (active in ink, the rest muted), then one white card per type
   holding rows of small outlined cards that wrap. */
.n26-services__top { position: relative; isolation: isolate; overflow: hidden; background: var(--n-cta-soft); padding-block: var(--n-section-y) clamp(2.5rem, 4vw, 5rem); }
.n26-services__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.n26-services__tabs { display: flex; flex-wrap: wrap; gap: .5rem clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(.75rem, 1.5vw, 1.5rem); }
/* Text tabs: the pill tab's behaviour with none of its chrome. */
.n26-tab--text { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: rgba(38, 36, 22, .45); }
.n26-tab--text[aria-selected="true"] { background: none; color: var(--n-ink); }
.n26-tab--text:hover { color: var(--n-ink); }

.n26-svc {
    margin-top: clamp(1rem, 1.6vw, 1.75rem);
    padding: clamp(1.25rem, 2vw, 2.25rem); border-radius: .6rem;
    background: var(--n-paper); color: var(--n-ink);
}
.n26-svc__title { margin: 0; color: var(--n-ink); font-size: var(--n-fs-h2-sub); line-height: 1.1; }
.n26-svc__intro { margin: .5em 0 0; color: var(--n-ink); font-size: var(--n-fs-body); line-height: 1.3; }
.n26-svc__label { margin: 1.1em 0 .5em; color: var(--n-ink); font-size: var(--n-fs-btn); line-height: 1.1; }
.n26-svc__cards { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1vw, 1rem); }
.n26-svc__card {
    flex: 0 1 17rem; min-width: 0;
    padding: .7rem 1rem .8rem; border: 1px solid var(--n-ink); border-radius: .5rem;
}
.n26-svc__card-title { margin: 0; color: var(--n-ink); font-size: clamp(1.2rem, .9rem + .7vw, 1.75rem); line-height: 1.1; }
.n26-svc__card-text  { margin: .3em 0 0; color: var(--n-ink); font-size: clamp(.9rem, .8rem + .25vw, 1.1rem); line-height: 1.3; }
@media (max-width: 575.98px) { .n26-svc__card { flex-basis: 100%; } }

/* The process — the services section's second band. Flat green, the
   artboard's #a5ff82 (the original CTA green, sampled off the design; it
   has no token since the CTA moved to #24ff00). */
.n26-process { background: #a5ff82; padding-block: clamp(2.5rem, 4vw, 5rem) var(--n-section-y); }
.n26-process .n26-process__sub { color: var(--n-ink); }
/* Each icon stands about 45% out of the top of its card, so the row is
   pushed down by that much to keep it clear of the heading. */
.n26-process__steps {
    --icon-h: clamp(96px, 7vw, 140px);
    display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--icon-h) * .45 + 1rem) clamp(.75rem, 1.2vw, 1.25rem);
    margin: calc(var(--icon-h) * .45 + clamp(1.5rem, 2.5vw, 2.5rem)) 0 0; padding: 0; list-style: none;
}
.n26-step {
    --cols: 5;
    flex: 0 1 calc((100% - (var(--cols) - 1) * clamp(.75rem, 1.2vw, 1.25rem)) / var(--cols));
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 clamp(.9rem, 1.2vw, 1.25rem) clamp(1.25rem, 1.8vw, 1.75rem);
    border-radius: clamp(1rem, 1.6vw, 1.6rem); background: var(--n-paper); color: var(--n-ink);
}
/* Height-led so five differently shaped renders read as one set; never
   larger than the files' own ~140px. */
.n26-step__icon { display: block; height: var(--icon-h); width: auto; max-width: 100%; margin-top: calc(var(--icon-h) * -.45); }
.n26-step__title { margin: .5em 0 0; color: var(--n-ink); font-size: clamp(1.3rem, .9rem + .75vw, 1.9rem); line-height: 1.1; }
.n26-step__sep { font-size: .7em; vertical-align: .12em; }
.n26-step__text { margin: .45em 0 0; color: var(--n-ink); font-size: clamp(1rem, .8rem + .45vw, 1.35rem); line-height: 1.3; }
@media (max-width: 1199.98px) { .n26-step { --cols: 3; } }
@media (max-width: 767.98px)  { .n26-step { --cols: 1; } }

/* ── Section 8 · Get in touch ────────────────────────────────────────── */
/* The Livewire form, restyled from outside. The old stylesheet centred it in
   a 640px column with the old blue on focus, tick and submit; every one of
   those is overridden here under .n26-form so the component's markup and
   logic stay as they were. */
.n26-form .finalcta__form-wrap { max-width: none; margin: 0; text-align: left; }
.n26-form .finalcta__form { gap: 1.1rem; }
.n26-form .finalcta__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.n26-form .finalcta__field { gap: .55rem; }
.n26-form .finalcta__field label { font-family: var(--n-body); font-size: clamp(.95rem, .8rem + .35vw, 1.15rem); font-weight: 700; letter-spacing: .01em; color: var(--n-ink); }
.n26-form .finalcta__field label span { font-weight: 400; color: var(--n-muted); margin-left: .35em; }
.n26-form .finalcta__field input,
.n26-form .finalcta__field textarea {
    min-height: clamp(3.25rem, 3.6vw, 4.3rem); padding: .8em 1.25em;
    border: 2px solid #e2e2e2; border-radius: .9rem;
    font-family: var(--n-body); font-size: clamp(1rem, .85rem + .4vw, 1.2rem); color: var(--n-ink);
}
.n26-form .finalcta__field textarea { min-height: clamp(8rem, 8.4vw, 10rem); }
.n26-form .finalcta__field input:focus,
.n26-form .finalcta__field textarea:focus { border-color: var(--n-accent); box-shadow: 0 0 0 3px rgba(92, 222, 41, .2); }
.n26-form .finalcta__field input::placeholder,
.n26-form .finalcta__field textarea::placeholder { color: #a3a3a3; }
.n26-form .finalcta__consent { padding: 0; font-family: var(--n-body); font-size: .95rem; color: var(--n-muted); }
.n26-form .finalcta__consent input[type="checkbox"] { accent-color: var(--n-accent); }
.n26-form .finalcta__submit { align-self: flex-start; width: auto; margin-top: .5rem; }
.n26-form .finalcta__tick { background: var(--n-cta); color: var(--n-ink); }

/* The success state's three steps (partials: livewire/contact-form). Dots
   joined by a line, the first green and ticked, the rest grey. Three across;
   on a phone they stack, with the line running down between the dots. */
.n26-form .finalcta__steps {
    --dot: 3.25rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 42rem; margin: clamp(1.25rem, 2vw, 1.75rem) auto 0; padding: 0; list-style: none;   /* under the title since 2026-10-10 */
}
.n26-form .finalcta__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 0 .5rem; text-align: center; }
/* The joining line: from the previous dot's centre to this one's, behind both. */
.n26-form .finalcta__steps li + li::before {
    content: ""; position: absolute; z-index: 0;
    top: calc(var(--dot) / 2 - 1px); right: 50%; width: 100%; height: 2px; background: #dcdcdc;
}
.n26-form .finalcta__step-dot {
    position: relative; z-index: 1; flex: none;
    display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%;
    background: #ececec; color: var(--n-muted); font-size: 1.3rem; line-height: 1;
}
.n26-form .finalcta__steps .is-done .finalcta__step-dot { background: var(--n-cta); color: var(--n-ink); }
.n26-form .finalcta__step-text { color: var(--n-ink); font-size: clamp(.95rem, .85rem + .3vw, 1.1rem); line-height: 1.3; }
.n26-form .finalcta__steps .is-done .finalcta__step-text { font-weight: 700; }

@media (max-width: 575.98px) {
    .n26-form .finalcta__steps { grid-template-columns: 1fr; max-width: 22rem; }
    .n26-form .finalcta__steps li { flex-direction: row; align-items: center; gap: 1rem; padding: 0 0 1.25rem; text-align: left; }
    .n26-form .finalcta__steps li:last-child { padding-bottom: 0; }
    .n26-form .finalcta__steps li + li::before { display: none; }
    .n26-form .finalcta__steps li:not(:last-child)::after {
        content: ""; position: absolute; z-index: 0;
        top: var(--dot); bottom: 0; left: calc(var(--dot) / 2 - 1px); width: 2px; background: #dcdcdc;
    }
}

@media (max-width: 575.98px) {
    .n26-form .finalcta__row { grid-template-columns: 1fr; }
    .n26-form .finalcta__submit { width: 100%; }
}

/* The form and the card side by side, tops aligned. Stacked below 992px the
   card comes first — the quickest way to reach us is the first thing a
   thumb gets to — then the form. */
.n26-enquire__row { --n-gy: 2rem; margin-top: clamp(1.75rem, 3vw, 3rem); align-items: flex-start; }
@media (max-width: 991.98px) { .n26-enquire__aside { order: -1; } }

/* Contact details card — the header/footer dark, a lime title, and three
   rows that are each one tap: a lime disc with the icon, a small label,
   then the value. */
.n26-card {
    background: var(--n-dark); color: var(--n-paper);
    border-radius: clamp(1.25rem, 2.5vw, 2.6rem);
    padding: clamp(1.5rem, 2.6vw, 2.75rem);
}
.n26-card__title { margin: 0 0 clamp(1.25rem, 2vw, 1.75rem); color: var(--n-cta); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); line-height: 1.1; }
.n26-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(.9rem, 1.4vw, 1.25rem); }
.n26-card__row { display: flex; align-items: center; gap: 1rem; color: var(--n-paper); text-decoration: none; }
.n26-card__row:hover { text-decoration: none; }
.n26-card__ico {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: clamp(2.75rem, 3.2vw, 3.25rem); height: clamp(2.75rem, 3.2vw, 3.25rem);
    border-radius: 50%; background: var(--n-cta); color: var(--n-ink);
}
.n26-card__ico .n26-ico { width: 45%; height: 45%; }
.n26-card__text { display: flex; flex-direction: column; min-width: 0; }
.n26-card__label { color: rgba(255,255,255,.6); font-size: clamp(.85rem, .75rem + .25vw, 1rem); }
/* overflow-wrap so a long email address breaks rather than widening the
   card past its column. */
.n26-card__value { color: var(--n-paper); font-weight: 700; font-size: clamp(1.05rem, .85rem + .5vw, 1.35rem); overflow-wrap: anywhere; transition: color .15s ease; }
.n26-card__row:hover .n26-card__value { color: var(--n-cta); }
.n26-card__foot { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); font-size: .95rem; }

/* ── Section 9 · Footer ──────────────────────────────────────────────── */
/* October 2026, second version (2026-09-29): the old "Nothing worse" wave
   section and the footer became ONE green band, on every page. Replaced the
   dark four-column footer, its tagline and the wave section's two buttons —
   removed with Tom's sign-off.

   Top to bottom, all centred: the white headline with the white script
   inline (hard green drop shadow, the artboard's type treatment), the
   supplied BLACK wordmark, four FatFrank links in ink, the copyright line.
   The photo is the supplied footer image, as supplied, cover-fitted — no
   overlay. */
.n26-foot {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--n-accent); color: var(--n-ink); text-align: center;
}
.n26-foot__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.n26-foot__inner {
    display: flex; flex-direction: column; align-items: center;
    padding-block: clamp(3rem, 4.7vw, 5.6rem) clamp(1.75rem, 2.2vw, 2.75rem);
}

/* The headline wraps by its own width — no <br>. */
.n26-foot__title {
    max-width: 8em; margin: 0 auto; color: var(--n-paper);
    font-size: clamp(2rem, 1rem + 2.5vw, 4rem); line-height: 1.2;
    text-shadow: .065em .065em 0 rgba(24, 90, 0, .38);
}
/* The supplied white script, inline. Negative margins take its height out
   of the line box so it cannot push the lines apart; the drop shadow is the
   same one the words carry. inline-block because Tailwind's preflight makes
   every img a block. */
.n26-foot__script {
    display: inline-block; width: 4.3em; height: auto; vertical-align: baseline;
    margin: -.15em .05em -.8em 0;
    filter: drop-shadow(.065em .065em 0 rgba(24, 90, 0, .38));
}
/* Spans inside the headline take the headline's font EXACTLY. The faces
   rule gives every .n26 span the body face (Urca), so wrapping words in one
   quietly switched them out of FatFrank (2026-09-29). */
.n26 .n26-foot__title span { font: inherit; }
/* "your customers." always shares a line — asked for 2026-09-29. */
.n26-foot__keep { white-space: nowrap; }

.n26-foot__mark { display: block; width: clamp(130px, 12vw, 230px); height: auto; margin-top: clamp(2.5rem, 5.8vw, 7rem); }

.n26-foot__links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .5rem clamp(1.25rem, 2.9vw, 3.5rem); margin-top: clamp(1rem, 2.2vw, 2.6rem);
}
.n26-foot__links a {
    color: var(--n-ink); text-decoration: none;
    font-size: clamp(1.4rem, .8rem + 1.9vw, 3.1rem); line-height: 1.1;
}
/* Hover can't go green on a green band, so links underline instead — the
   same as the header on the intro photo. */
.n26-foot__links a:hover { color: var(--n-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

.n26-foot__legal {
    margin: clamp(1rem, 2.2vw, 2.6rem) 0 0; color: rgba(38, 36, 22, .8);
    font-size: clamp(.85rem, .7rem + .5vw, 1.35rem); line-height: 1.4;
}

/* ── Staff bar ─────────────────────────────────────────────────────────
   Slim strip above the header, signed-in staff only (partials/_staff-bar).
   The site's dark ground, its lime button with ink text. In the page flow,
   not fixed, so it never sits over anything. */
.n26-staffbar { background: var(--n-dark); color: var(--n-paper); }
.n26-staffbar__inner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: .5rem 1.5rem; padding-block: .5rem;
}
.n26-staffbar__who {
    margin: 0; color: var(--n-paper);
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.n26-staffbar__acts { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.n26 .n26-staffbar__btn { font-size: .95rem; padding: .5em .85em; }

/* ── Faces: who gets which ───────────────────────────────────────────
   Last base rules in the file, at a specificity that settles it on source
   order. nagged.css aims `h1, h2, h3, h4 { font-family: serif }` straight at
   every heading, which beats anything inherited — so headings are named
   here. FatFrank is set at 400 with synthesis off: the kit has one weight,
   and a browser asked for bold fakes it by smearing the outline. */
.n26, .n26 p, .n26 span, .n26 a, .n26 li, .n26 label,
.n26 input, .n26 textarea, .n26 button { font-family: var(--n-body); }

.n26 h1, .n26 h2, .n26 h3, .n26 h4,
.n26 .n26-h2, .n26 .n26-h2-sub,
.n26 .n26-hero__title, .n26 .n26-hero__sub,
.n26 .n26-intro__title, .n26 .n26-intro__big, .n26 .n26-intro__line, .n26 .n26-intro__sub,
.n26 .n26-who__title, .n26 .n26-who__lead, .n26 .n26-who__note,
.n26 .n26-btn, .n26 .n26-who__btn, .n26 .n26-who__btn span, .n26 .n26-tab, .n26 .n26-case__want,
.n26 .n26-svc__title, .n26 .n26-svc__label, .n26 .n26-svc__card-title,
.n26 .finalcta__step-dot,
.n26 .n26-doc__lead,
.n26 .n26-go__sub,
.n26 .n26-ai__sub, .n26 .n26-ai__lead, .n26 .n26-ai__em, .n26 .n26-ai__caption,
.n26 .n26-rev__mark, .n26 .n26-stats__quote,
.n26 .n26-stat__n, .n26 .n26-foot__title, .n26 .n26-foot__links a {
    font-family: var(--n-head); font-weight: 400; letter-spacing: 0; font-synthesis: none;
}
/* A button's own text can sit inside spans — the contact form's loading
   swap does — and the rule above gives every span the body face, so
   "Submit your message" came out in Urca (2026-09-29). Spans in a button
   take the button's font whole. */
.n26 .n26-btn span { font: inherit; }

.n26 .n26-case__name { font-family: var(--n-brand); font-weight: 400; letter-spacing: 0; }
/* The process steps' titles are Urca Bold in the artboard, not FatFrank. */
.n26 .n26-step__title { font-family: var(--n-body); font-weight: 700; letter-spacing: 0; }