/* ============================================================================
   Ventrax — public website design system
   ----------------------------------------------------------------------------
   Real estate is a paper-trail business before it is anything else: title
   deeds, surveys, ledgers, signed approvals. The palette and type below are
   chosen to feel like an institution keeping careful records, not a generic
   SaaS dashboard — because that is the actual claim this product is making.

   Zero web-font downloads, deliberately. This site will be read on Nigerian
   mobile data by people deciding whether to trust a company with their
   accounts, and a slow page undermines that pitch before a word is read.
   The differentiated choice instead: a serif display stack against a plain
   sans body. Every competitor in this category (Odoo, Sage, most ERP
   marketing) runs all-sans. A serif at zero cost is the free move.
   ========================================================================== */

:root {
    /* ---- ink & paper ---- */
    --ink:        #0B1815;
    --ink-2:      #12241F;
    --ink-3:      #1D332C;
    --slate:      #52625C;
    --slate-2:    #7B8A84;
    --paper:      #F3F6F5;
    --surface:    #FFFFFF;
    --line:       #DCE4E1;
    --line-soft:  #E9EFED;

    /* ---- teal: the one action colour ---- */
    --teal-900:   #0A3A34;
    --teal-700:   #0F5C51;
    --teal:       #14806F;
    --teal-dark:  #0D5A4D;
    --teal-dim:   #E3F0EC;
    --teal-line:  #BFDCD3;

    /* ---- brass: sparse counter-accent, deed-stamp weight ---- */
    --brass:      #A8763D;
    --brass-dim:  #F5EEE1;

    /* ---- status ---- */
    --good:       #14806F;
    --good-dim:   #E3F0EC;
    --warn:       #A8763D;
    --warn-dim:   #F5EEE1;
    --bad:        #B3261E;
    --bad-dim:    #FBEBEA;

    --radius:     10px;
    --radius-sm:  6px;
    --gap:        20px;
    --wrap:       1180px;

    --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, "Times New Roman", serif;
    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --shadow:      0 1px 2px rgba(11,24,21,.06), 0 1px 3px rgba(11,24,21,.05);
    --shadow-lift: 0 8px 28px rgba(11,24,21,.10);

    --ease: cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 var(--sans);
    letter-spacing: -0.003em;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.14;
    margin: 0 0 .5em;
    color: var(--ink);
}

h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 600; }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 21px; }
h4 { font-size: 17px; }

p { margin: 0 0 1em; color: var(--ink-2); }
p.lede { font-size: 19px; line-height: 1.55; color: var(--slate); max-width: 62ch; }
.muted { color: var(--slate); }
.small { font-size: 13.5px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ layout */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--teal); }
.section-head { max-width: 640px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .section { padding: 56px 0; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s var(--ease), border-color .14s var(--ease), transform .1s var(--ease), color .14s var(--ease);
}
.btn:hover { border-color: var(--slate-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

.btn-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

.btn-quiet { border-color: transparent; background: transparent; padding-left: 4px; padding-right: 4px; }
.btn-quiet:hover { background: transparent; text-decoration: underline; }

.btn-lg { padding: 15px 28px; min-height: 52px; font-size: 15.5px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(243,246,245,.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: block; }
.site-footer .brand-mark { filter: brightness(1.35); }

.nav-primary { display: flex; align-items: center; gap: 4px; }
.nav-primary a {
    color: var(--ink-2); font-size: 14.5px; font-weight: 550;
    padding: 9px 13px; border-radius: var(--radius-sm);
}
.nav-primary a:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.nav-primary a.is-active { color: var(--teal-dark); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

@media (max-width: 980px) {
    .nav-primary { display: none; }
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm);
        background: var(--surface); cursor: pointer;
    }
    .header-actions .btn:not(.nav-toggle) { display: none; }
    .header-actions .btn-primary { display: inline-flex; padding: 9px 14px; min-height: 38px; font-size: 13.5px; }
}

.mobile-nav {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 10px 0 18px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
    display: block; padding: 12px 24px; color: var(--ink-2); font-weight: 550; font-size: 15.5px;
    border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:hover { color: var(--teal-dark); text-decoration: none; }
.mobile-nav .mobile-cta { padding: 16px 24px 0; display: flex; gap: 10px; }

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    background: var(--teal-900);
    color: #fff;
    overflow: hidden;
    padding: 76px 0 0;
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
    pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: #BFE3DA; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    padding: 6px 12px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero p.lede { color: #CFE3DE; max-width: 46ch; }
.hero-figure { position: relative; }
.hero-foot {
    position: relative;
    margin-top: 56px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.14);
    display: flex; gap: 40px; flex-wrap: wrap; align-items: center;
    color: #9FC3B9; font-size: 13px;
}

@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-figure { order: -1; max-width: 420px; margin: 0 auto; }
}

/* --- blueprint diagram --- */
.blueprint text { font-family: var(--mono); fill: #CFE3DE; }
.blueprint .node-label { font-size: 11.5px; letter-spacing: .01em; }
.blueprint .node-core text { fill: #0B1815; font-weight: 700; }
.blueprint circle.node-dot { fill: var(--teal-900); stroke: #6FBFAF; stroke-width: 1.4; }
.blueprint circle.node-core { fill: #E9F5F1; stroke: #fff; stroke-width: 2; }
.blueprint .link {
    stroke: #4E9284; stroke-width: 1.2; fill: none;
    stroke-dasharray: 240; stroke-dashoffset: 240;
    animation: draw 1.1s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .blueprint .link { animation: none; stroke-dashoffset: 0; } }

/* ------------------------------------------------------------- credibility */

.credibility { background: var(--surface); border-bottom: 1px solid var(--line); }
.credibility-row {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    padding: 26px 0; color: var(--slate); font-size: 13px; letter-spacing: .02em;
}
.credibility-list { display: flex; gap: 30px; flex-wrap: wrap; font-family: var(--mono); font-weight: 600; color: var(--slate); }

/* ------------------------------------------------------------------ cards */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
    transition: box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
}
a.card { display: block; color: inherit; }
a.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--teal-line); text-decoration: none; }

.card-icon {
    width: 40px; height: 40px; border-radius: 9px;
    background: var(--teal-dim); color: var(--teal-dark);
    display: grid; place-items: center; margin-bottom: 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--slate); font-size: 14.5px; margin-bottom: 0; }
.card .card-link { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--teal-dark); }

.card-row-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tag {
    display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; background: var(--teal-dim); color: var(--teal-dark);
    letter-spacing: .02em;
}
.tag-brass { background: var(--brass-dim); color: var(--brass); }

/* ------------------------------------------------------------- module map */

.module-map { background: var(--ink); color: #fff; border-radius: 16px; padding: 48px; }
.module-map h2 { color: #fff; }
.module-map p.lede { color: #A9BBB5; }
.module-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,.1); margin-top: 36px; border-radius: 12px; overflow: hidden; }
.module-cell { background: var(--ink-2); padding: 20px 16px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }
.module-cell strong { font-size: 14px; }
.module-cell span { font-size: 12px; color: #8FA69E; }
.module-cell.is-core { background: var(--teal-900); }
@media (max-width: 900px) { .module-grid { grid-template-columns: repeat(2, 1fr); } .module-map { padding: 28px; } }
@media (max-width: 480px) { .module-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ steps */

.steps { counter-reset: step; }
.step { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step-num {
    counter-increment: step; flex: 0 0 auto;
    font-family: var(--serif); font-size: 22px; color: var(--teal-line);
    width: 42px;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step h4 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--slate); font-size: 14.5px; }

/* ------------------------------------------------------------------ scale */

.scale-path { display: flex; align-items: stretch; gap: 0; margin-top: 40px; overflow-x: auto; }
.scale-stage {
    flex: 1 1 0; min-width: 190px; padding: 22px 20px; border: 1px solid var(--line); background: var(--surface);
    position: relative;
}
.scale-stage + .scale-stage { border-left: 0; }
.scale-stage:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.scale-stage:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.scale-stage.is-now { background: var(--teal-dim); border-color: var(--teal-line); }
.scale-stage::after {
    content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
    color: var(--slate-2); font-size: 14px; z-index: 2;
}
.scale-stage:last-child::after { content: ""; }
.scale-stage .stage-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-dark); margin-bottom: 8px; }
.scale-stage h4 { margin-bottom: 6px; font-size: 15.5px; }
.scale-stage p { font-size: 13px; color: var(--slate); margin: 0; }

/* ---------------------------------------------------------------- pricing */

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.plan.is-featured { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.plan-badge { position: absolute; top: -12px; left: 24px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan-name { font-family: var(--serif); font-size: 21px; margin-bottom: 4px; }
.plan-for { color: var(--slate); font-size: 13.5px; margin-bottom: 18px; }
.plan-price { font-family: var(--mono); font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.plan-price small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--slate); }
.plan-note { font-size: 12.5px; color: var(--slate-2); margin-bottom: 22px; }
.plan-features { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.plan-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); padding: 7px 0; border-top: 1px solid var(--line-soft); }
.plan-features li:first-child { border-top: 0; }
.plan-features li svg { flex: 0 0 auto; margin-top: 2px; color: var(--teal); }

/* ------------------------------------------------------------------- logo */

.logo-strip { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; opacity: .7; }
.logo-chip { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--slate); letter-spacing: -.01em; }

/* --------------------------------------------------------------- security */

.security-strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.security-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .security-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .security-list { grid-template-columns: 1fr; } }
.security-item { display: flex; gap: 12px; align-items: flex-start; }
.security-item svg { flex: 0 0 auto; color: var(--teal); margin-top: 3px; }
.security-item h4 { margin-bottom: 3px; font-size: 14.5px; }
.security-item p { font-size: 13px; color: var(--slate); margin: 0; }

/* -------------------------------------------------------------------- cta */

.cta-band { background: var(--teal-900); color: #fff; border-radius: 18px; padding: 56px 48px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #CFE3DE; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ forms */

.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .hint { display: block; font-size: 12px; color: var(--slate-2); margin-top: 5px; font-weight: 400; }
.input, textarea.input, select.input {
    width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px;
}
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.form-note { font-size: 12.5px; color: var(--slate-2); margin-top: 14px; }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; border: 1px solid transparent; }
.alert-good { background: var(--good-dim); color: var(--teal-dark); border-color: var(--teal-line); }
.alert-bad  { background: var(--bad-dim); color: var(--bad); border-color: #F0C9C6; }

/* -------------------------------------------------------------------- faq */

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 600; font-size: 15.5px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--serif); font-size: 22px; color: var(--slate-2); flex: 0 0 auto; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 4px 20px; color: var(--slate); font-size: 14.5px; max-width: 68ch; }

/* --------------------------------------------------------------- article */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose p, .prose ul, .prose ol { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--teal); font-family: var(--serif); font-size: 19px; color: var(--ink); }
.prose code { font-family: var(--mono); background: var(--teal-dim); padding: 1px 6px; border-radius: 4px; font-size: .9em; }

.byline { display: flex; align-items: center; gap: 10px; color: var(--slate); font-size: 13.5px; margin-bottom: 36px; }
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-2); }

.post-card { display: block; padding: 26px 0; border-top: 1px solid var(--line); color: inherit; }
.post-card:first-child { border-top: 0; }
.post-card:hover { text-decoration: none; }
.post-card:hover h3 { color: var(--teal-dark); }
.post-card .post-meta { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-2); margin-bottom: 8px; }
.post-card h3 { margin-bottom: 8px; transition: color .12s var(--ease); }
.post-card p { color: var(--slate); font-size: 14.5px; margin: 0; }

/* --------------------------------------------------------------- callout */

.callout { border: 1px solid var(--teal-line); background: var(--teal-dim); border-radius: var(--radius); padding: 20px 22px; display: flex; gap: 14px; }
.callout svg { flex: 0 0 auto; color: var(--teal-dark); margin-top: 2px; }
.callout p { margin: 0; font-size: 14px; color: var(--teal-dark); }
.callout.is-warn { border-color: #E7D2AE; background: var(--brass-dim); }
.callout.is-warn svg, .callout.is-warn p { color: #7A5623; }

/* --------------------------------------------------------------- breadcrumb */

.crumbs { font-size: 13px; color: var(--slate); display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--teal-dark); }
.crumbs [aria-current] { color: var(--ink); font-weight: 550; }

/* ------------------------------------------------------------- page hero */

.page-hero { padding: 64px 0 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.page-hero .section-eyebrow { margin-bottom: 14px; }
.page-hero h1 { max-width: 20ch; }
.page-hero p.lede { margin-top: 14px; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--ink); color: #C6D3CD; padding: 64px 0 28px; margin-top: 90px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { color: #8FA69E; font-size: 13.5px; max-width: 30ch; }
.footer-col h5 { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #6E877E; margin: 0 0 14px; font-weight: 600; }
.footer-col a { display: block; color: #C6D3CD; font-size: 13.5px; padding: 5px 0; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 12.5px; color: #6E877E; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: #6E877E; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 980px) { .footer-top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- cookie bar */

.cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
    max-width: 640px; margin: 0 auto;
    background: var(--ink); color: #E4EDE9;
    border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow-lift);
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.cookie-bar p { margin: 6px 0 0; font-size: 13.5px; color: #C6D3CD; }
.cookie-bar p a { color: #8FD3C4; }
.cookie-bar .cookie-title { font-family: var(--serif); font-size: 15.5px; color: #fff; }
.cookie-bar .btn-row { flex: 0 0 auto; width: 100%; }
.cookie-bar .cookie-decline { color: #C6D3CD; border-color: rgba(255,255,255,.22); }
.cookie-bar .cookie-decline:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }

/* -------------------------------------------------------------- skeleton */

.skeleton { background: linear-gradient(90deg, var(--line-soft) 25%, var(--paper) 37%, var(--line-soft) 63%); background-size: 400% 100%; animation: sweep 1.3s ease infinite; border-radius: var(--radius-sm); }
@keyframes sweep { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------- scroll-reveal */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ print */

@media print {
    .site-header, .cookie-bar, .site-footer .btn { display: none; }
}

/* ============================================================================
   Motion
   ----------------------------------------------------------------------------
   Restraint on purpose. Animation here does one of two jobs: it draws the eye
   to the thing that just arrived, or it acknowledges a press. Anything that
   moves without saying something is decoration, and decoration on a business
   site reads as a company with time on its hands.

   Everything below is off under prefers-reduced-motion — for some people this
   is nausea rather than delight, and that is a real cost for a small gain.
   ========================================================================== */

/* --- entrance: the page arriving, once, in order ------------------------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.hero h1,
.hero p.lede,
.hero .btn-row,
.hero-eyebrow {
    animation: rise .62s var(--ease) backwards;
}

.hero-eyebrow  { animation-delay: .04s; }
.hero h1       { animation-delay: .12s; }
.hero p.lede   { animation-delay: .20s; }
.hero .btn-row { animation-delay: .28s; }

/* The blueprint nodes settle in after their connecting lines are drawn, so
   the sequence reads as "connection first, then what is connected". */
.blueprint g > circle.node-dot,
.blueprint .node-label {
    animation: rise .5s var(--ease) backwards;
    animation-delay: .9s;
}

.blueprint .node-core { animation: rise .55s var(--ease) backwards; animation-delay: .1s; }

/* --- scroll reveal: staggered within a grid ------------------------------ */

.reveal > * { transition-delay: 0ms; }
.reveal.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.reveal.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.reveal.is-visible > *:nth-child(4) { transition-delay: 210ms; }

.reveal > .card,
.reveal > a.card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ease), transform .5s var(--ease),
                box-shadow .16s var(--ease), border-color .16s var(--ease);
}

.reveal.is-visible > .card,
.reveal.is-visible > a.card { opacity: 1; transform: none; }

/* --- hover: small, and only where something is clickable ----------------- */

.card-icon { transition: background .18s var(--ease), transform .18s var(--ease); }
a.card:hover .card-icon { background: var(--teal); color: #fff; transform: scale(1.04); }

.card-link { transition: gap .16s var(--ease); }
a.card:hover .card-link { text-decoration: none; }

/* The arrow in "Read more →" moves the width of a hair. Enough to feel
   responsive, not enough to notice as an animation. */
a.card .card-link::after { content: ""; display: inline-block; width: 0; transition: width .16s var(--ease); }
a.card:hover .card-link::after { width: 4px; }

.btn-primary { position: relative; overflow: hidden; }

.module-cell { transition: background .2s var(--ease); }
.module-cell:hover { background: var(--ink-3); }
.module-cell.is-core:hover { background: var(--teal-700); }

.scale-stage { transition: background .18s var(--ease), border-color .18s var(--ease); }
.scale-stage:hover { border-color: var(--teal-line); }

.plan { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.step { transition: border-color .2s var(--ease); }
.step:hover .step-num { color: var(--teal); }
.step-num { transition: color .2s var(--ease); }

/* --- header: gains a shadow only once the page has moved ----------------- */

.site-header { transition: box-shadow .22s var(--ease), background .22s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(11,24,21,.06); }

/* --- footer links: underline grows from the left ------------------------- */

.footer-col a { position: relative; }
.footer-col a::after {
    content: ""; position: absolute; left: 0; bottom: 2px;
    width: 0; height: 1px; background: currentColor;
    transition: width .18s var(--ease);
}
.footer-col a:hover::after { width: 100%; }

/* --- forms: the field being filled is the one that stands out ------------ */

.field > span { transition: color .16s var(--ease); }
.field:focus-within > span { color: var(--teal-dark); }

button[type="submit"]:disabled { opacity: .65; cursor: progress; }

/* --- FAQ: the answer unrolls rather than appearing ----------------------- */

.faq-item[open] .faq-body { animation: rise .28s var(--ease); }
.faq-item summary::after { transition: transform .18s var(--ease), color .18s var(--ease); }
.faq-item summary:hover::after { color: var(--teal); }
.faq-item[open] summary::after { transform: rotate(180deg); }

/* --- everything off, for anybody who asked ------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero p.lede, .hero .btn-row, .hero-eyebrow,
    .blueprint g > circle.node-dot, .blueprint .node-label, .blueprint .node-core,
    .faq-item[open] .faq-body {
        animation: none;
    }

    .reveal > .card, .reveal > a.card { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------- skip link
   Hidden until a keyboard reaches it, then a proper button above everything
   else. The previous version used inline styles and inline focus handlers,
   which fought the sticky header's stacking context and would have been
   blocked by the content security policy anyway. */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 11px 18px;
    background: var(--teal-900);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-lift);
    transform: translateY(-160%);
    transition: transform .18s var(--ease);
}

.skip-link:focus { transform: none; text-decoration: none; color: #fff; }

/* ------------------------------------------------------------- cookie bar
   It sat centred over the page like a modal, which on a wide screen reads as
   an interruption rather than a notice. Anchored bottom-left instead, narrow,
   and it slides up rather than appearing. */

.cookie-bar {
    left: 20px;
    right: auto;
    bottom: 20px;
    margin: 0;
    max-width: 420px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    animation: cookie-in .34s var(--ease) .6s backwards;
}

.cookie-bar p { flex: none; }
.cookie-bar .btn-row { width: 100%; }
.cookie-bar .btn { padding: 9px 16px; min-height: 38px; font-size: 13.5px; }

@keyframes cookie-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .cookie-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
    .cookie-bar { animation: none; }
}

/* ============================================================================
   Admin
   ----------------------------------------------------------------------------
   Denser than the public site and visually distinct from it, so nobody
   confuses the two. Same tokens, so it still looks like the same company.
   ========================================================================== */

.admin-shell { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.admin-side { background: var(--ink); padding: 24px 0; }
.admin-side .brand { color: #fff; padding: 0 20px 20px; }
.admin-side a { display: block; padding: 10px 20px; color: #A9BBB5; font-size: 14px; }
.admin-side a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.admin-side a.is-on { background: var(--teal-900); color: #fff; border-left: 2px solid var(--teal); }
.admin-side .admin-count { float: right; font-family: var(--mono); font-size: 11.5px; opacity: .7; }
.admin-side hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 18px 20px; }

.admin-main { padding: 32px 36px 60px; background: var(--paper); }
.admin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-head h1 { font-size: 26px; margin: 0; }

.admin-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 10px; }
.admin-row-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.admin-row h3 { font-size: 16px; margin-bottom: 3px; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.admin-table th { text-align: left; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.admin-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }

.admin-auth { max-width: 400px; margin: 8vh auto; }

@media (max-width: 820px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { padding: 16px 0; }
    .admin-side a { display: inline-block; padding: 8px 14px; }
    .admin-main { padding: 22px 18px 50px; }
}

/* ---------------------------------------------------------- admin: enquiries
   An enquiry is somebody's first contact with the business, so the screen is
   built to answer "what do I do about this one" rather than to list rows. */

.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.admin-tabs a {
    padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 550;
    color: var(--slate); background: var(--surface); border: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 7px;
}
.admin-tabs a:hover { color: var(--ink); border-color: var(--slate-2); text-decoration: none; }
.admin-tabs a.is-on { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }
.admin-tabs a span { font-family: var(--mono); font-size: 11.5px; opacity: .75; }

.admin-search { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-search .input { flex: 1 1 260px; }

.admin-empty { text-align: center; padding: 44px 26px; }

.lead-row { padding: 0; overflow: hidden; }
.lead-row summary { list-style: none; cursor: pointer; padding: 16px 20px; }
.lead-row summary::-webkit-details-marker { display: none; }
.lead-row summary:hover { background: var(--paper); }
.lead-row[open] summary { border-bottom: 1px solid var(--line); background: var(--paper); }
.lead-row.is-overdue { border-left: 3px solid var(--brass); }

.lead-summary { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.lead-summary h3 { margin-bottom: 3px; font-size: 16px; }
.lead-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.status-pill {
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .03em;
    padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
    background: var(--teal-dim); color: var(--teal-dark);
}
.status-new       { background: var(--teal); color: #fff; }
.status-contacted { background: var(--teal-dim); color: var(--teal-dark); }
.status-qualified { background: #DDEBFA; color: #1B4F7E; }
.status-proposal  { background: var(--brass-dim); color: var(--brass); }
.status-won       { background: #0A3A34; color: #fff; }
.status-lost,
.status-junk      { background: var(--line-soft); color: var(--slate); }

.lead-body { padding: 20px; }

.lead-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft);
}
.fact-label {
    display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .07em; color: var(--slate-2); margin-bottom: 3px;
}
.fact-value { font-size: 14px; color: var(--ink); }

.lead-quote {
    background: var(--paper); border-left: 3px solid var(--teal-line);
    padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 20px;
}
.lead-quote p { margin: 4px 0 0; font-size: 14.5px; }

.lead-form { padding-top: 4px; }
.lead-meta { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }

@media (max-width: 640px) {
    .lead-summary { flex-direction: column; gap: 8px; }
    .lead-body { padding: 16px; }
}

/* ------------------------------------------------------------------- jobs */

.job-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 10px; overflow: hidden;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.job-card:hover { border-color: var(--teal-line); box-shadow: var(--shadow); }
.job-card summary {
    list-style: none; cursor: pointer; padding: 18px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.job-card summary::-webkit-details-marker { display: none; }
.job-card h3 { margin-bottom: 5px; font-size: 17px; }
.job-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--slate); }
.job-meta span + span::before { content: "·"; margin-right: 8px; color: var(--slate-2); }
.job-open {
    flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--teal-dark);
    border: 1px solid var(--teal-line); background: var(--teal-dim);
    padding: 5px 12px; border-radius: 999px;
}
.job-card[open] .job-open::after { content: ""; }
.job-body { padding: 4px 20px 22px; border-top: 1px solid var(--line-soft); }
.job-summary { font-size: 16px; margin-top: 16px; }
.job-apply { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------- admin: content */

.admin-intro { max-width: 62ch; margin-bottom: 20px; }
.admin-subhead { font-size: 20px; margin: 34px 0 14px; }
.admin-form-block { margin-bottom: 10px; }
.input-mono { font-family: var(--mono); font-size: 13.5px; line-height: 1.55; }

.copy-group { padding: 0; margin-bottom: 8px; }
.copy-group summary {
    list-style: none; cursor: pointer; padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-weight: 600; font-size: 15px;
}
.copy-group summary::-webkit-details-marker { display: none; }
.copy-group summary::before {
    content: "▸"; color: var(--slate-2); margin-right: 4px;
    transition: transform .15s var(--ease); display: inline-block;
}
.copy-group[open] summary::before { transform: rotate(90deg); }
.copy-group summary:hover { background: var(--paper); }
.copy-group[open] summary { border-bottom: 1px solid var(--line); background: var(--paper); }
.copy-fields { padding: 20px; }
.copy-fields .field:last-child { margin-bottom: 0; }

/* A save button that scrolls away is a save button people forget to press. */
.admin-sticky-save {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 20px; margin-top: 18px;
    box-shadow: 0 -4px 16px rgba(11,24,21,.06);
}

.admin-row-actions { white-space: nowrap; }
.inline-form { display: inline; margin-left: 10px; }
.link-danger {
    border: 0; background: none; color: var(--bad); cursor: pointer;
    font: inherit; font-size: 14px; padding: 0;
}
.link-danger:hover { text-decoration: underline; }
.admin-table-empty { text-align: center; padding: 30px; color: var(--slate); }

/* ------------------------------------------------------------ mobile care
   The admin is used on a phone more than anyone plans for — a lead arrives,
   somebody checks it standing up. These are the sizes that make that work. */

@media (max-width: 820px) {
    .admin-shell { grid-template-columns: 1fr; }

    .admin-side {
        display: flex; gap: 4px; overflow-x: auto; padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
    }
    .admin-side .brand { padding: 0 12px 0 4px; flex: 0 0 auto; align-self: center; }
    .admin-side a {
        flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; white-space: nowrap;
        border-left: 0 !important;
    }
    .admin-side a.is-on { background: var(--teal); }
    .admin-side hr, .admin-side p { display: none; }

    .admin-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .admin-sticky-save { padding: 12px 14px; }
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
    .admin-table tr { border-bottom: 1px solid var(--line); padding: 12px 4px; }
    .admin-table td { border: 0; padding: 4px 12px; }
    .admin-table td:empty { display: none; }
}

@media (max-width: 560px) {
    /* Touch targets, not mouse targets. */
    .btn { min-height: 48px; }
    .job-card summary { padding: 16px; flex-wrap: wrap; }
    .copy-fields { padding: 16px; }
    .hero { padding-top: 48px; }
    .cta-band { padding: 36px 22px; }
    .module-map { padding: 24px 18px; }
    .form-panel { padding: 22px 18px; }
    .wrap { padding: 0 18px; }
    .section-head { margin-bottom: 30px; }
}

/* ----------------------------------------------------------------- status */

.status-list { padding: 0; overflow: hidden; }
.status-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 16px 22px; border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.status-row:first-child { border-top: 0; }
.status-name { font-weight: 550; font-size: 14.5px; display: block; }
.status-how { display: block; margin-top: 2px; }
.status-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex: 0 0 auto; }
.status-state-ok { color: var(--teal-dark); }
.status-state-bad { color: var(--bad); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* -------------------------------------------------------- blog navigation */

.category-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.category-bar a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 550;
    background: var(--surface); border: 1px solid var(--line); color: var(--slate);
    transition: border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease);
}
.category-bar a:hover { color: var(--ink); border-color: var(--slate-2); text-decoration: none; }
.category-bar a.is-on { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }
.category-bar a span { font-family: var(--mono); font-size: 11.5px; opacity: .7; }

.related { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line); }
.related-head { font-size: 22px; margin-bottom: 20px; }
.related-title { font-size: 17px; margin: 10px 0 6px; }

/* ----------------------------------------------------------------- search */

.search-form { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.search-form .input { flex: 1 1 260px; font-size: 16px; padding: 13px 15px; }
.header-search { padding: 9px 11px !important; color: var(--slate); }
.header-search:hover { color: var(--ink); }
@media (max-width: 980px) { .header-search { display: none; } }

/* -------------------------------------------------------- admin: overview */

.attention-list { display: grid; gap: 8px; margin-bottom: 30px; }
.attention {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--slate-2);
    border-radius: var(--radius); padding: 15px 18px; color: var(--ink); font-size: 14.5px;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
a.attention:hover { text-decoration: none; box-shadow: var(--shadow); border-left-color: var(--teal); }
.attention.is-urgent { border-left-color: var(--brass); background: var(--brass-dim); }
a.attention.is-urgent:hover { border-left-color: var(--bad); }
.attention-go { flex: 0 0 auto; color: var(--slate); font-size: 13px; }
.admin-clear { text-align: center; padding: 36px 26px; }
.admin-clear h3 { margin-bottom: 6px; }

/* --------------------------------------------------------- admin: traffic */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 28px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat-value { display: block; font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat-label { display: block; font-size: 12.5px; color: var(--slate); margin-top: 4px; }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.bar-fill {
    width: 100%; background: var(--teal-dim); border-radius: 2px 2px 0 0;
    border-top: 2px solid var(--teal); transition: background .14s var(--ease);
}
.bar:hover .bar-fill { background: var(--teal-line); }
.bars-axis {
    display: flex; justify-content: space-between; margin-top: 10px;
    font-size: 11.5px; color: var(--slate-2); font-family: var(--mono);
}

.admin-list { padding: 14px 18px; }
.list-row {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
    padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px;
}
.list-row:first-of-type { border-top: 0; }
.list-row .mono { color: var(--slate); font-size: 12.5px; }

.fix-link { margin-left: 12px; font-size: 12.5px; font-weight: 600; }
.checkbox-field { display: flex; gap: 10px; align-items: flex-start; }
.checkbox-field input { margin-top: 3px; flex: 0 0 auto; }
.checkbox-field span { font-size: 13.5px; color: var(--slate); font-weight: 400; }

/* ------------------------------------------------------- motion, part two
   Each of these does one job: draw the eye to a number that just arrived, or
   confirm a press. Nothing moves that is not saying something. */

.stat { transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat.is-headline { background: var(--teal-900); border-color: var(--teal-900); }
.stat.is-headline .stat-value { color: #fff; }
.stat.is-headline .stat-label { color: #9FC3B9; }
.stat-row-quiet .stat { background: transparent; border-style: dashed; }
.stat-row-quiet .stat-value { font-size: 20px; color: var(--slate); }

/* Bars grow from the floor, left to right, once. */
.bar-fill {
    height: var(--h);
    animation: grow .5s var(--ease) backwards;
    animation-delay: var(--d, 0ms);
}
@keyframes grow { from { height: 2%; opacity: .3; } to { height: var(--h); opacity: 1; } }

/* A saved form should say so without a page that jumps. */
.alert { animation: rise .3s var(--ease); }

/* Rows arriving in a list. */
.lead-row, .job-card, .admin-row { animation: rise .32s var(--ease) backwards; }
.lead-row:nth-child(2) { animation-delay: 40ms; }
.lead-row:nth-child(3) { animation-delay: 80ms; }
.lead-row:nth-child(4) { animation-delay: 120ms; }

/* The nav underline, drawn rather than switched on. */
.nav-primary a { position: relative; }
.nav-primary a::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
    height: 1.5px; background: var(--teal); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .18s var(--ease);
}
.nav-primary a:hover::after, .nav-primary a.is-active::after { transform: scaleX(1); }

/* Buttons: a press that feels like one. */
.btn-primary::after {
    content: ""; position: absolute; inset: 0; background: #fff;
    opacity: 0; transition: opacity .2s var(--ease);
}
.btn-primary:active::after { opacity: .12; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .bar-fill, .alert, .lead-row, .job-card, .admin-row { animation: none; }
    .bar-fill { height: var(--h); }
    .nav-primary a::after { transition: none; }
}