/* ============================================================================
   Trinidad Point of Sale - public site
   Everything is served from this origin: system fonts, inline SVG icons,
   CSS gradients. No CDN, no web font, no remote image.
   ========================================================================= */

:root {
    /* Brand - taken from the logo: sky blue ring, graphite bars, one green */
    --brand-300: #8CCBF5;
    --brand-400: #5BAFEF;
    --brand-500: #3D9BE9;
    --brand-600: #1B78C6;
    --brand-700: #0F5F9F;
    --brand-800: #0B4877;
    --brand-900: #0A3355;

    --ink: #14202B;
    --ink-soft: #2C3A47;
    --slate: #55636F;
    --slate-light: #7C8894;

    --canvas: #F4F7FA;
    --surface: #FFFFFF;
    --surface-alt: #EDF2F7;
    --line: #DCE3EA;
    --line-strong: #C3CDD7;

    --accent: #17835A;
    --accent-soft: #E7F5EE;
    --danger: #B3261E;
    --danger-soft: #FDECEA;
    --warn: #9A6100;
    --warn-soft: #FFF4E0;
    --info-soft: #E8F2FB;

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 88px;

    /* Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* Shadow */
    --sh-1: 0 1px 2px rgba(20, 32, 43, .07), 0 1px 3px rgba(20, 32, 43, .06);
    --sh-2: 0 2px 6px rgba(20, 32, 43, .08), 0 6px 18px rgba(20, 32, 43, .07);
    --sh-3: 0 10px 34px rgba(20, 32, 43, .14);

    /* Motion */
    --t-fast: .14s;
    --t-med: .22s;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    --header-h: 76px;
    --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    background: var(--surface);
    /* The page body never scrolls sideways - wide things scroll inside their own box. */
    overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--s-3);
    color: var(--ink);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .45vw, 1.4rem); }
h4 { font-size: 1.06rem; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-800); }

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

:focus-visible {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

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

.skip-link {
    position: absolute; left: var(--s-4); top: -60px; z-index: 200;
    background: var(--brand-800); color: #fff; padding: var(--s-3) var(--s-4);
    border-radius: 0 0 var(--r-md) var(--r-md); transition: top var(--t-med) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

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

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.container-narrow { max-width: 820px; }

.section { padding-block: var(--s-8); }
.section-tight { padding-block: var(--s-7); }
.section-alt { background: var(--canvas); }
.section-ink { background: var(--ink); color: #C9D4DE; }
.section-ink h2, .section-ink h3 { color: #fff; }

.section-head { max-width: 760px; margin-bottom: var(--s-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--slate); font-size: 1.06rem; margin-bottom: 0; }

.eyebrow {
    display: inline-block;
    font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--brand-700); margin-bottom: var(--s-3);
}
.section-ink .eyebrow { color: var(--brand-300); }

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

.lede { font-size: 1.12rem; color: var(--slate); }

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

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

/* Seven nav items with icons, a phone number and a button is a lot to fit in 1180px.
   The gaps are deliberately tight here; loosening any of them pushes the quotation button
   off the right-hand edge. Measured, not guessed. */
.header-inner {
    display: flex; align-items: center; gap: var(--s-4);
    min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: 0 0 auto; }
.brand img { width: 42px; height: 42px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.06rem; color: var(--ink); letter-spacing: -.02em; }
.brand-sub { font-size: .72rem; color: var(--slate); letter-spacing: .04em; text-transform: uppercase; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }

.nav-link {
    display: flex; align-items: center; gap: 7px;
    padding: var(--s-2)  9px;
    color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .93rem;
    border-radius: var(--r-md);
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { background: var(--surface-alt); color: var(--brand-800); }
.nav-link.active { color: var(--brand-700); background: var(--info-soft); }

/* Each menu item keeps its own colour, so the row is scannable by colour as well as by
   word. The label stays near-black - the icon carries the colour, not the text. */
.nav-icon {
    flex: 0 0 auto;
    stroke-width: 1.9;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.main-nav ul > li:nth-child(1) .nav-icon { color: #1B78C6; }  /* Licences    - blue   */
.main-nav ul > li:nth-child(2) .nav-icon { color: #C9821A; }  /* Hardware    - amber  */
.main-nav ul > li:nth-child(3) .nav-icon { color: #17835A; }  /* Clients     - green  */
.main-nav ul > li:nth-child(4) .nav-icon { color: #0E8F9B; }  /* Support     - teal   */
.main-nav ul > li:nth-child(5) .nav-icon { color: #4B6BC4; }  /* About       - indigo */
.main-nav ul > li:nth-child(6) .nav-icon { color: #C2453B; }  /* Contact     - red    */

.nav-link:hover .nav-icon { transform: translateY(-2px) scale(1.06); }
.nav-link.active .nav-icon { filter: saturate(1.25); }

.header-cta { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

/* The phone number and quote button live in the header bar on desktop and inside the
   drop-down menu on a phone. Exactly one of the two is ever shown. */
.main-nav .mobile-cta { display: none; }
.header-phone {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 700; color: var(--ink); text-decoration: none; font-size: .95rem;
    white-space: nowrap;
}
.header-phone:hover { color: var(--brand-700); }

.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
    color: var(--ink); cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-toggle:hover { background: var(--surface-alt); border-color: var(--brand-500); }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 12px 22px;
    font: inherit; font-weight: 650; font-size: .97rem; line-height: 1.2;
    border-radius: var(--r-md); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brand-700); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--brand-800); color: #fff; box-shadow: var(--sh-2); }

.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.btn-accent:hover { background: #126C4A; color: #fff; box-shadow: var(--sh-2); }

.btn-outline { background: var(--surface); color: var(--brand-800); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--info-soft); border-color: var(--brand-500); color: var(--brand-800); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-alt); color: var(--ink); }

.btn-on-dark { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #97201A; color: #fff; }

.btn-sm { padding: 8px 14px; font-size: .88rem; }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

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

.hero {
    position: relative;
    background:
        radial-gradient(1100px 500px at 88% -10%, rgba(91, 175, 239, .30), transparent 62%),
        radial-gradient(760px 420px at 5% 108%, rgba(23, 131, 90, .16), transparent 60%),
        linear-gradient(168deg, #0A3355 0%, #0B4877 48%, #0F5F9F 100%);
    color: #D5E3EF;
    overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    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: 56px 56px;
    mask-image: radial-gradient(900px 460px at 72% 22%, #000, transparent 72%);
}
.hero > .container { position: relative; z-index: 1; }

.hero-inner {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--s-7); align-items: center;
    padding-block: var(--s-9);
}
.hero h1 { color: #fff; margin-bottom: var(--s-4); }
.hero-lede { font-size: 1.18rem; color: #C6D8E8; margin-bottom: var(--s-6); max-width: 34em; }

.hero-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    font-size: .84rem; font-weight: 600; color: #EAF3FA;
}

.hero-proof {
    display: flex; flex-wrap: wrap; gap: var(--s-6);
    margin-top: var(--s-7); padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-proof div { min-width: 120px; }
.hero-proof strong { display: block; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.hero-proof span { font-size: .86rem; color: #A9C2D8; }

.hero-figure {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    box-shadow: var(--sh-3);
}
.hero-figure img { margin-inline: auto; max-height: 340px; width: auto; }
.hero-figure figcaption {
    margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .88rem; color: #BDD2E4; text-align: center;
}
.hero-figure figcaption strong { color: #fff; display: block; font-size: 1rem; }

/* page banner for the inner pages - one height everywhere */
.page-banner {
    background: linear-gradient(150deg, #0A3355 0%, #0F5F9F 100%);
    color: #C9DCEC;
    padding-block: var(--s-7);
    min-height: 208px;
    display: flex; align-items: center;
}
.page-banner h1 { color: #fff; margin-bottom: var(--s-2); }
.page-banner p { color: #B9CFE1; max-width: 62ch; margin-bottom: 0; }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: .85rem; margin-bottom: var(--s-3); }
.crumbs a { color: #9FC0DC; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { color: #7FA3C2; }

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

.card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    /* Equal height in any row, whatever the copy length */
    height: 100%;
    transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card:hover { border-color: var(--brand-400); box-shadow: var(--sh-2); }

.card-media {
    display: flex; align-items: center; justify-content: center;
    /* Every product photo gets the same box, so no card is taller than its neighbour */
    height: 210px; padding: var(--s-4);
    background: linear-gradient(180deg, #F7FAFD 0%, #EDF2F7 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.card-media img {
    max-height: 100%; width: auto; object-fit: contain;
    /* Only the photo moves on hover - the card itself must not shift */
    transition: transform var(--t-med) var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }

.card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--s-5); }
.card-title { margin-bottom: var(--s-1); font-size: 1.22rem; }
.card-tagline { color: var(--brand-700); font-weight: 600; font-size: .9rem; margin-bottom: var(--s-3); }
.card-text { color: var(--slate); font-size: .95rem; margin-bottom: var(--s-4); }
.card-foot {
    /* Push the button to the bottom so every button in the row lines up */
    margin-top: auto; padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}

.card-badge {
    align-self: flex-start;
    margin-bottom: var(--s-2);
    background: var(--accent-soft); color: #0E5C3E;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--r-pill);
}
.card-wrap { position: relative; display: flex; }

/* feature / value cards */
.feature {
    position: relative;
    display: flex; flex-direction: column; height: 100%;
    padding: var(--s-5);
    background: linear-gradient(170deg, #FFFFFF 0%, #F6FAFD 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
}
/* A soft brand glow that only appears on hover - depth without decorating the resting state. */
.feature::after {
    content: ""; position: absolute; top: -46px; right: -46px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 175, 239, .20), transparent 70%);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-med) var(--ease);
}
.feature:hover::after { opacity: 1; }
.feature:hover {
    transform: translateY(-4px);
    border-color: var(--brand-400);
    box-shadow: var(--sh-2);
}

/* A solid gradient chip with a white glyph, not a pale square - this is the thing that
   carries the colour on an otherwise quiet card. */
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: var(--s-4);
    border-radius: 14px;
    background: linear-gradient(140deg, var(--brand-600) 0%, var(--brand-400) 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(27, 120, 198, .28);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.feature:hover .feature-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 20px rgba(27, 120, 198, .34);
}

.feature h3 { font-size: 1.12rem; margin-bottom: var(--s-2); letter-spacing: -.01em; }
.feature p { color: var(--slate); font-size: .94rem; margin-bottom: 0; }
.feature-link {
    margin-top: auto; padding-top: var(--s-4);
    font-weight: 650; font-size: .92rem; color: var(--brand-700);
    display: inline-flex; align-items: center; gap: 5px;
}
.feature:hover .feature-link { gap: 9px; }
.feature-link svg { transition: transform var(--t-med) var(--ease); }

a.feature { text-decoration: none; color: inherit; }
a.feature h3 { color: var(--ink); }

/* ---------------------------------------------------------------- price */

.price {
    font-variant-numeric: tabular-nums;
    font-weight: 800; color: var(--ink); line-height: 1.1;
    white-space: nowrap;
}
.price-lg { font-size: 1.85rem; }
.price-md { font-size: 1.35rem; }
.price-cur { font-size: .62em; font-weight: 700; color: var(--slate); margin-right: 2px; }
.price-note { display: block; font-size: .8rem; font-weight: 500; color: var(--slate-light); white-space: normal; }
.price-poa { font-size: 1.05rem; font-weight: 700; color: var(--brand-700); }

.price-panel {
    background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s-5);
}
.price-foot { font-size: .82rem; color: var(--slate-light); margin-top: var(--s-3); }

/* ---------------------------------------------------------------- lists */

.ticks { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.ticks li {
    position: relative; padding-left: 30px; margin-bottom: var(--s-3);
    color: var(--ink-soft);
}
.ticks li::before {
    content: ""; position: absolute; left: 0; top: .32em;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-soft);
}
.ticks li::after {
    content: ""; position: absolute; left: 5px; top: .6em;
    width: 8px; height: 4px;
    border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
.section-ink .ticks li { color: #C9D4DE; }

/* ---------------------------------------------------------------- tables */

/* Wide tables scroll inside their own container. Note overflow-x:auto forces
   overflow-y:auto, which kills page-level sticky - so the sticky header here is
   sticky against this scroller, and the scroller gets an explicit max height. */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .94rem;
}

table.data thead th {
    position: sticky; top: 0; z-index: 2;
    /* Opaque, because a sticky cell scrolls over the rows beneath it */
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    white-space: nowrap;
    /* Collapsed borders do not travel with sticky cells - use a shadow for the bottom edge */
    box-shadow: inset 0 -1px 0 var(--line-strong), 0 1px 0 rgba(20, 32, 43, .16);
}

table.data th + th, table.data td + td {
    /* Vertical column lines */
    border-left: 1px solid var(--line);
}

table.data tbody td {
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    vertical-align: top;
}

/* Column banding - vertical shading, not row striping */
table.data tbody td:nth-child(even) { background: #F8FAFC; }
table.data tbody tr:hover td { background: var(--info-soft); }

table.data td.num, table.data th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.data td.wrap { white-space: normal; }

/* the two-column specification table on a product page */
table.spec { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
table.spec th {
    width: 34%; text-align: left; vertical-align: top;
    padding: 11px 16px 11px 0;
    color: var(--ink); font-weight: 700;
    border-bottom: 1px solid var(--line);
}
table.spec td {
    padding: 11px 0 11px 16px;
    color: var(--slate);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
table.spec tr:nth-child(odd) th, table.spec tr:nth-child(odd) td { background: #FAFCFE; }

/* A spec table whose value column is money follows the money rules rather than the prose ones. */
table.spec-money td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.spec-money td.num .price-note { text-align: left; }

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

.form-grid { display: grid; gap: var(--s-4); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.span-2 { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 650; font-size: .92rem; color: var(--ink); }
.req { color: var(--danger); margin-left: 2px; font-weight: 700; }
.hint { font-size: .84rem; color: var(--slate-light); }

.input, .select, .textarea {
    width: 100%;
    font: inherit; font-size: .97rem; color: var(--ink);
    padding: 11px 13px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-light); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(91, 175, 239, .28);
}
.textarea { min-height: 128px; resize: vertical; }

.select {
    appearance: none;
    /* Chevron drawn in CSS - no image file, no icon font */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--slate) 50%),
        linear-gradient(135deg, var(--slate) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.field-error { font-size: .86rem; color: var(--danger); font-weight: 600; }
.field-error:empty { display: none; }

.check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: .95rem; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand-700); flex: 0 0 auto; }

.form-summary {
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid var(--danger);
    background: var(--danger-soft);
    margin-bottom: var(--s-5);
}
.form-summary p { font-weight: 700; color: var(--danger); margin-bottom: var(--s-2); }
.form-summary ul { margin: 0; padding-left: 20px; color: #7A1A15; font-size: .93rem; }
.form-summary li { margin-bottom: 3px; }

/* honeypot - deliberately NOT named company/address/phone, which Chromium autofills */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- banners */

.banner {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface-alt);
    margin-bottom: var(--s-5);
}
.banner svg { flex: 0 0 auto; margin-top: 2px; }
.banner p { margin-bottom: 0; font-size: .95rem; }
.banner-ok { background: var(--accent-soft); border-color: #B7E0CC; color: #0E5C3E; }
.banner-warn { background: var(--warn-soft); border-color: #EFD09A; color: var(--warn); }
.banner-error { background: var(--danger-soft); border-color: #F0BDB8; color: var(--danger); }
.banner-info { background: var(--info-soft); border-color: #BEDBF2; color: var(--brand-800); }

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

.site-footer { background: var(--ink); color: #A7B4C1; padding-block: var(--s-7) var(--s-5); font-size: .93rem; }
.site-footer a { color: #C6D4E1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--s-6); }
.footer-grid h4 { color: #fff; font-size: .84rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--s-2); }
.footer-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.footer-brand img { width: 40px; height: 40px; }
.footer-brand strong { color: #fff; font-size: 1.02rem; }
.footer-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer-contact svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand-400); }
.footer-bottom {
    margin-top: var(--s-6); padding-top: var(--s-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
    justify-content: space-between; align-items: center;
    font-size: .86rem; color: #8494A3;
}
.footer-version { font-family: var(--font-mono); font-size: .8rem; color: #6D7E8E; }

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

.cta-strip {
    background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
    color: #fff;
    border-radius: var(--r-lg);
    padding: var(--s-7);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5);
    align-items: center;
}
.cta-strip h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-strip p { color: #D3E5F4; margin-bottom: 0; }

/* ---------------------------------------------------------------- modal */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(10, 20, 30, .55);
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
}
.modal-backdrop.open { opacity: 1; visibility: visible; }

.modal {
    width: 100%; max-width: 470px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    transform: translateY(10px) scale(.985);
    transition: transform var(--t-med) var(--ease);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

.modal-head { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-5) var(--s-5) 0; }
.modal-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--info-soft); color: var(--brand-700);
}
.modal.danger .modal-icon { background: var(--danger-soft); color: var(--danger); }
.modal-head h3 { margin: 0; font-size: 1.15rem; }
.modal-body { padding: var(--s-3) var(--s-5) var(--s-5); color: var(--slate); }
.modal-body p { margin: 0; }
.modal-foot {
    display: flex; justify-content: flex-end; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: var(--canvas);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ---------------------------------------------------------------- toast */

.toast-stack {
    position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 320;
    display: flex; flex-direction: column; gap: var(--s-3);
    max-width: min(390px, calc(100vw - var(--s-6)));
}
.toast {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-600);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    font-size: .94rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { border-left-color: var(--accent); }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast svg { flex: 0 0 auto; margin-top: 1px; }
.toast .toast-close { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--slate-light); padding: 0; }

/* ---------------------------------------------------------------- date picker */

/* Our own picker, so no browser ever shows its grey calendar button */
.dp-wrap { position: relative; }
.dp-wrap .input { padding-right: 42px; }
.dp-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--slate);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dp-toggle:hover { background: var(--surface-alt); color: var(--brand-700); }

.dp-panel {
    position: absolute; z-index: 260; top: calc(100% + 6px); left: 0;
    width: 288px; padding: var(--s-3);
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-md); box-shadow: var(--sh-3);
    display: none;
}
.dp-panel.open { display: block; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.dp-head strong { font-size: .95rem; }
.dp-nav {
    width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--r-sm); cursor: pointer; color: var(--ink-soft);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dp-nav:hover { background: var(--surface-alt); border-color: var(--brand-500); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { font-size: .72rem; text-align: center; color: var(--slate-light); font-weight: 700; padding: 4px 0; }
.dp-day {
    border: 0; background: none; font: inherit; font-size: .88rem;
    padding: 7px 0; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-soft);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dp-day:hover { background: var(--info-soft); color: var(--brand-800); }
.dp-day.muted { color: var(--line-strong); }
.dp-day.today { box-shadow: inset 0 0 0 1px var(--brand-400); font-weight: 700; }
.dp-day.selected { background: var(--brand-700); color: #fff; font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- progress */

.progress {
    height: 8px; border-radius: var(--r-pill);
    background: var(--surface-alt); overflow: hidden;
}
.progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
    transition: width .18s linear;
}
.upload-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3);
    align-items: center;
    padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md);
    margin-bottom: var(--s-2); font-size: .9rem;
}
.upload-row .progress { grid-column: 1 / -1; }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-pct { font-variant-numeric: tabular-nums; color: var(--slate); }

/* ---------------------------------------------------------------- misc */

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--r-pill);
    font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    background: var(--surface-alt); color: var(--slate);
}
.pill-ok { background: var(--accent-soft); color: #0E5C3E; }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-info { background: var(--info-soft); color: var(--brand-800); }
.pill-off { background: #EEF1F4; color: var(--slate-light); }

.empty {
    text-align: center; padding: var(--s-8) var(--s-5);
    color: var(--slate);
    background: var(--canvas); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.empty svg { color: var(--line-strong); margin-bottom: var(--s-3); }
.empty h3 { margin-bottom: var(--s-2); }

.anchor-target { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* The letterhead and any print-only note exist on paper only; print.css turns them on. */
.print-only, .print-letterhead { display: none; }

.split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-7); align-items: center;
}

.stack > * + * { margin-top: var(--s-4); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1300px) {
    /* The number is still in the footer, on the contact page and on every product page. */
    .header-phone { display: none; }
}

@media (max-width: 1040px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-7); }
    .hero-figure { order: -1; }
    .hero-figure img { max-height: 240px; }
    .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .cta-strip { grid-template-columns: minmax(0, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The menu turns into a drawer at 1080px, not at the 900px used for the page layouts.
   Seven items with icons stop fitting on one row a good deal earlier than the content
   columns need to stack, and a nav that does not fit is what pushes the page sideways. */
/* 1184px, not 1080px: "Prices & Licences" is a wider nav item than "Licences" was, and between
   those two widths the row no longer fits, which chopped the "Get a quotation" button in half.
   Measure the header again if a nav label ever changes. */
@media (max-width: 1184px) {
    .nav-toggle { display: flex; }
    .header-cta { display: none; }
    .main-nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--sh-2);
        padding: var(--s-3) var(--s-5) var(--s-5);
        /* visibility:hidden, not overflow:hidden - otherwise the links stay in the tab order */
        visibility: hidden; opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    }
    .main-nav.open { visibility: visible; opacity: 1; transform: translateY(0); }
    .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-link { padding: var(--s-3) var(--s-4); font-size: 1rem; }
    .main-nav .mobile-cta { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .form-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .section { padding-block: var(--s-7); }
    .container { padding-inline: var(--s-4); }
    .cta-strip { padding: var(--s-5); }
    .hero-proof { gap: var(--s-4); }
    .hero-proof div { min-width: 45%; }
    .btn-row .btn { width: 100%; }
}

/* The brand block would not shrink, so on a narrow phone it pushed the menu button off the right
   edge - where overflow-x:hidden sliced it rather than scrolling to it. Let it shrink, and drop
   the company line, which is the widest thing in the header and is repeated in the footer. */
@media (max-width: 480px) {
    .brand { min-width: 0; }
    .brand-text { min-width: 0; overflow: hidden; }
    .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .brand-sub { display: none; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Forced-motion override. Windows Server reports "reduce" out of the box, and the blanket
       reset above silently kills every hover state on machines nobody actually configured that
       way. Short hover and focus feedback is interface, not decoration, so it stays.
       ADD EVERY NEW INTERACTIVE CONTAINER TO THIS LIST. */
    .btn, .card, .card-media img, .feature, .feature-icon, .feature::after,
    .problem-card, .problem-icon, .fix-row, .why-icon, .industry-row, .industry-icon,
    .industry-go, .nav-link, .nav-icon, .nav-toggle,
    .input, .select, .textarea, .dp-toggle, .dp-nav, .dp-day,
    .modal-backdrop, .modal, .toast, .skip-link, .main-nav,
    .admin-nav-link, .admin-section-toggle, .admin-tab, .icon-btn, .sortable {
        transition-duration: var(--t-med) !important;
    }
}

/* The group strip in the footer: these three sites belong to one company. */
.footer-group {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
    margin-top: var(--s-6); padding-top: var(--s-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .88rem; color: #8494A3;
}
.footer-group a { color: #C6D4E1; font-weight: 600; text-decoration: none; }
.footer-group a:hover { color: #fff; text-decoration: underline; }
.footer-group + .footer-bottom { margin-top: var(--s-4); padding-top: var(--s-4); }

/* ---------------------------------------------------------------- top bar */

/* Every number and the sales address get their own row, so the main header only has to
   carry the logo, the menu and one button. */
.topbar {
    background: var(--brand-900);
    color: #A9C2D8;
    font-size: .82rem;
}
.topbar-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s-2) var(--s-5);
    min-height: 38px; padding-block: 6px;
}
.topbar-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.topbar-contact a {
    display: inline-flex; align-items: center; gap: 6px;
    color: #D5E3EF; text-decoration: none; font-weight: 600;
    transition: color var(--t-fast) var(--ease);
}
.topbar-contact a svg { flex: 0 0 auto; color: var(--brand-400); }
.topbar-contact a:hover { color: #fff; }
.topbar-contact a:hover svg { color: #fff; }
.topbar-hours { display: inline-flex; align-items: center; gap: 6px; color: #8FAEC8; }
.topbar-hours svg { color: var(--brand-400); }

@media (max-width: 760px) {
    /* On a phone the hours are on the contact page; the numbers are what matter here. */
    .topbar-hours { display: none; }
    .topbar-inner { justify-content: center; }
    .topbar-contact { justify-content: center; gap: var(--s-2) var(--s-3); }
}

/* ------------------------------------------------- four-colour icon chips */

/* One colour across every card reads as a template. Four rotating hues give each row
   some life while staying inside the palette. */
.feature:nth-child(4n + 2) .feature-icon {
    background: linear-gradient(140deg, #12704C 0%, #35B183 100%);
    box-shadow: 0 6px 14px rgba(23, 131, 90, .30);
}
.feature:nth-child(4n + 2):hover .feature-icon { box-shadow: 0 10px 20px rgba(23, 131, 90, .36); }

.feature:nth-child(4n + 3) .feature-icon {
    background: linear-gradient(140deg, #B4741A 0%, #E8A93F 100%);
    box-shadow: 0 6px 14px rgba(180, 116, 26, .30);
}
.feature:nth-child(4n + 3):hover .feature-icon { box-shadow: 0 10px 20px rgba(180, 116, 26, .36); }

.feature:nth-child(4n + 4) .feature-icon {
    background: linear-gradient(140deg, #5B45B8 0%, #927FE0 100%);
    box-shadow: 0 6px 14px rgba(91, 69, 184, .30);
}
.feature:nth-child(4n + 4):hover .feature-icon { box-shadow: 0 10px 20px rgba(91, 69, 184, .36); }

/* The hover glow follows the chip's own colour rather than always being blue. */
.feature:nth-child(4n + 2)::after { background: radial-gradient(circle, rgba(53, 177, 131, .20), transparent 70%); }
.feature:nth-child(4n + 3)::after { background: radial-gradient(circle, rgba(232, 169, 63, .22), transparent 70%); }
.feature:nth-child(4n + 4)::after { background: radial-gradient(circle, rgba(146, 127, 224, .22), transparent 70%); }

.feature:nth-child(4n + 2):hover { border-color: #6DC6A0; }
.feature:nth-child(4n + 3):hover { border-color: #E8C88A; }
.feature:nth-child(4n + 4):hover { border-color: #A897E8; }