@font-face {
    font-family: "Museo Sans";
    src: url("../nc_assets/fonts/museo-sans-300-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Museo Sans";
    src: url("../nc_assets/fonts/museo-sans-500-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Museo Sans";
    src: url("../nc_assets/fonts/museo-sans-700-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --bg: #f4eee5;
    --bg-accent: #edf5f2;
    --surface: rgba(255, 251, 246, 0.86);
    --surface-strong: #fffdf9;
    --surface-tint: rgba(238, 245, 242, 0.8);
    --midnight: #172446;
    --midnight-soft: #22315b;
    --ink: #1f3f43;
    --ink-muted: #526d6e;
    /* Was #6a8383, which measured 3.81:1 on the cream card surfaces and failed
       AA for the .note small print. #5c7677 measures 4.58:1 on the same
       backdrop and still reads quieter than --ink-muted. */
    --ink-soft: #5c7677;
    --line: rgba(32, 84, 88, 0.13);
    --brand: #1f6d6f;
    --brand-strong: #174f54;
    --brand-deep: #10393d;
    --brand-soft: #53d3ca;
    /* Was #d7a16d. That only ever showed up on /contact, because a specificity
       bug painted the eyebrows elsewhere in muted grey; once that was fixed the
       real colour turned out to measure 2.2:1 on the cream cards. --accent is
       used exclusively for the small uppercase eyebrow labels, so it is deepened
       to a bronze that keeps the warm contrast against the teal and passes AA
       at 5.2:1. */
    --accent: #8f6226;
    --shadow: 0 26px 64px rgba(25, 45, 47, 0.12);
    --shadow-soft: 0 16px 32px rgba(25, 45, 47, 0.08);
    --max-width: 1180px;
    --radius-lg: 30px;
    --radius-md: 22px;
    --radius-sm: 16px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Museo Sans", "Avenir Next", "Trebuchet MS", sans-serif;
    color: var(--ink);
    line-height: 1.72;
    background:
        radial-gradient(circle at top left, rgba(83, 211, 202, 0.14), transparent 30%),
        radial-gradient(circle at 84% 8%, rgba(23, 36, 70, 0.13), transparent 26%),
        radial-gradient(circle at 74% 18%, rgba(215, 161, 109, 0.12), transparent 24%),
        linear-gradient(180deg, #faf6ef 0%, var(--bg) 50%, var(--bg-accent) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 80%);
}

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 10000;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    background: var(--brand-strong);
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0 0;
}

.nav-shell,
main,
.footer-shell,
.footer-meta {
    width: min(calc(100% - 2rem), var(--max-width));
    margin: 0 auto;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 0.95rem 1.15rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(180deg, rgba(34, 49, 91, 0.96), rgba(18, 57, 61, 0.94));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
    text-decoration: none;
}

.logo {
    width: clamp(5.2rem, 10vw, 6.6rem);
    height: 3.9rem;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    padding: 0.38rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-kicker,
.eyebrow,
.mini-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
}

.brand-kicker {
    color: rgba(255, 255, 255, 0.74);
}

.brand-name {
    color: #fffaf3;
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.15;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Built by js/nav.js, only ever visible below the 760px breakpoint. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.6rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    color: #fffaf3;
    font-size: 0.95rem;
    font-weight: 700;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: none;
    box-shadow: none;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 1.05rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before {
    top: -6px;
}

.nav-toggle-bars::after {
    top: 6px;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.68rem 0.92rem;
    border-radius: 999px;
    color: rgba(255, 251, 246, 0.92);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.nav-links .nav-cta,
.nav-links a[href="/hire"] {
    background: linear-gradient(135deg, var(--brand-soft), #a6f3ec);
    color: #0f3133;
    font-weight: 700;
}

.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus-visible,
.nav-links a[href="/hire"]:hover,
.nav-links a[href="/hire"]:focus-visible {
    color: #0f3133;
    background: linear-gradient(135deg, #61ddd3, #c0f7f0);
}

main {
    margin-top: 1.45rem;
    padding-bottom: 4rem;
}

.page-shell {
    display: grid;
    gap: 1.4rem;
}

.hero,
.page-intro,
.panel,
.card,
.split-panel,
.highlight-band,
.form-layout,
.schedule-panel,
.quote-band,
.legal-shell,
.download-shell,
.logo-test-shell {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.hero,
.page-intro,
.panel,
.split-panel,
.highlight-band,
.form-layout,
.schedule-panel,
.quote-band,
.legal-shell,
.download-shell,
.logo-test-shell {
    padding: clamp(1.35rem, 3vw, 2rem);
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(310px, 0.82fr);
    gap: clamp(1.5rem, 4vw, 2.8rem);
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at right bottom, rgba(83, 211, 202, 0.2), transparent 26%),
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.84), transparent 25%),
        linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(239, 247, 243, 0.84));
}

.hero::after {
    content: "";
    position: absolute;
    right: -5rem;
    bottom: -5rem;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(83, 211, 202, 0.22), transparent 70%);
}

.hero-copy,
.hero-side {
    position: relative;
    z-index: 1;
}

.hero-copy {
    display: grid;
    align-content: start;
}

.hero h1,
.page-intro h1,
.schedule-panel h1,
.contact-title,
.legal-shell h1,
.download-shell h1,
.logo-test-shell h1 {
    margin: 0;
    color: var(--brand-strong);
    /* 0.98 was set for one-line headlines. These run four to six lines, where
       sub-1.0 leading makes the block feel jammed together. */
    line-height: 1.05;
    letter-spacing: -0.04em;
    /* Was clamp(2.4rem, 5vw, 4.7rem), i.e. 72px at 1440px. The headlines here
       are full sentences of 15-25 words, so that filled the entire first
       screen with nothing but the h1. */
    font-size: clamp(2.1rem, 3.6vw, 3.5rem);
}

.eyebrow,
.mini-label {
    display: inline-flex;
    color: var(--accent);
    margin-bottom: 0.9rem;
}

/* Bare element selectors only. The old version of this rule listed `.card p`,
   `.panel p`, `.info-card p` and friends alongside the bare `p`, which made it
   specificity (0,1,1) and silently beat every single-class text style that came
   later in the file: `.price-tag`, `.mini-label`, `.footer-copy`. Those all
   rendered as plain muted body copy. Keeping this at (0,0,1) lets them win. */
p,
li,
label,
summary,
blockquote,
.hero-lead,
.form-copy {
    color: var(--ink-muted);
    font-size: 1.06rem;
}

/* Comfortable measure. Panel and card copy previously ran the full 1180px
   content width, around 130 characters per line. */
.panel > p,
.panel > ul,
.panel > ol,
.page-intro > p,
.split-panel > p,
.legal-shell > p,
.download-shell > p {
    max-width: 68ch;
}

.hero-lead {
    max-width: 42rem;
    margin: 1.15rem 0 0;
    font-size: 1.14rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.hero-pill,
.hero-stat,
.hero-aside-card,
.highlight-card {
    border: 1px solid rgba(31, 109, 111, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 249, 247, 0.82));
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.45rem;
    padding: 0.65rem 0.95rem;
    border-radius: 999px;
    color: var(--brand-strong);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(25, 45, 47, 0.07);
}

.cta,
.button-row,
.intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.button-link,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.82rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fffdf9;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 16px 28px rgba(24, 79, 84, 0.18);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.button-link:hover,
.button-link:focus-visible,
button:hover,
button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(24, 79, 84, 0.24);
}

.button-link.outline,
.button-link.ghost {
    background: rgba(255, 255, 255, 0.52);
    color: var(--brand-strong);
    border-color: rgba(31, 109, 111, 0.22);
    box-shadow: none;
}

.button-link.ghost {
    background: transparent;
}

/* .outline / .ghost hardcode a 52%-white fill and dark teal text, which is
   right on the light cards but composites to a muddy grey pill on the dark CTA
   bands (measured 3.40:1). On dark surfaces, flip to a light-on-dark treatment. */
/* .highlight-band only. .quote-band looks similar in the markup but is a light
   cream surface, so it keeps the default dark-on-light treatment. */
.highlight-band .button-link.outline,
.highlight-band .button-link.ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #eff9f7;
    border-color: rgba(188, 232, 227, 0.55);
}

.highlight-band .button-link.outline:hover,
.highlight-band .button-link.ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(188, 232, 227, 0.8);
}

.hero-statline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.hero-stat {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1rem 1.05rem;
    border-radius: 1.25rem;
    box-shadow: 0 18px 34px rgba(25, 45, 47, 0.08);
}

.hero-stat-value {
    color: var(--brand-strong);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-stat-copy {
    color: var(--ink-muted);
    font-size: 0.97rem;
    line-height: 1.55;
}

.hero-mark {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.45rem;
    background: linear-gradient(180deg, rgba(28, 41, 77, 0.98), rgba(18, 55, 58, 0.96));
    box-shadow: 0 18px 34px rgba(17, 44, 46, 0.22);
}

.hero-mark img {
    width: 100%;
    border-radius: 1rem;
    background: linear-gradient(180deg, #e8edf4, #dfe6f0);
    padding: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.hero-note,
.info-card,
.stat,
.contact-note,
.resource-card,
.legal-section,
.download-item {
    border-radius: var(--radius-md);
    border: 1px solid rgba(31, 109, 111, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(243, 249, 246, 0.82));
}

.hero-note,
.info-card,
.contact-note,
.resource-card,
.legal-section,
.download-item {
    padding: 1rem 1.05rem;
}

.hero-aside-card {
    padding: 1rem 1.05rem;
    border-radius: var(--radius-md);
}

.hero-list,
.feature-list,
.resource-list,
.download-list {
    margin: 0;
    padding-left: 1.12rem;
}

.hero-list {
    padding: 0 0 0 1.2rem;
    background: transparent;
    border: 0;
}

.stats-grid,
.grid,
.resource-grid,
.form-layout,
.contact-grid,
.footer-shell,
.tile-grid,
.legal-grid {
    display: grid;
    gap: 1rem;
}

/* auto-fit rather than a hard 3 columns, so a row is never left with an empty
   slot: /about's 2 cards used to leave a third of the row blank, and the 4th
   card on /resources ("MDN Accessibility Docs") sat alone on its own row.
   Card counts in use are 2, 3 and 4, and this fills the row for all three. */
.stats-grid,
.grid,
.resource-grid,
.tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.signal-strip,
.highlight-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.stats-grid {
    align-items: start;
}

.stat {
    padding: 1.25rem 1.1rem;
    box-shadow: 0 16px 30px rgba(25, 45, 47, 0.08);
}

.stat-label {
    display: block;
}

.stat-value {
    display: block;
    color: var(--brand-strong);
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.panel .section-heading,
.panel > .section-heading,
.legal-shell > .section-heading,
.download-shell > .section-heading {
    max-width: 44rem;
    margin-bottom: 1.2rem;
}

.section-heading h2,
.panel h2,
.split-panel h2,
.highlight-band h2,
.quote-band h2,
.form-panel h2,
.contact-copy h2,
.schedule-panel h2,
.legal-shell h2,
.download-shell h2,
.card h3,
.legal-section h2,
.download-item h3 {
    margin: 0;
    color: var(--brand-strong);
    letter-spacing: -0.035em;
}

.section-heading h2,
.panel h2,
.split-panel h2,
.highlight-band h2,
.quote-band h2,
.form-panel h2,
.contact-copy h2,
.schedule-panel h2,
.legal-shell h2,
.download-shell h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.04;
}

.card {
    padding: 1.4rem;
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at top right, rgba(83, 211, 202, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 249, 247, 0.84));
}

/* Column layout so the "Buy now" row can be pinned to the card floor. Without
   it the CTAs sat wherever the copy happened to end: on /webdev they landed at
   three different heights, and on /offerings the third card's button floated
   with ~150px of empty card below it. */
.pricing-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pricing-card > p:last-child {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 1rem;
}

/* Reserve two lines for the eyebrow so the headlines across a row share a
   baseline even when one label wraps ("Site rebuild and remediation"). */
.pricing-card .mini-label {
    display: block;
    min-height: 2.2em;
    margin-bottom: 0.5rem;
}

.featured-pricing {
    border-color: rgba(31, 109, 111, 0.3);
    box-shadow: 0 24px 40px rgba(24, 79, 84, 0.14);
    background:
        radial-gradient(circle at top right, rgba(83, 211, 202, 0.2), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 246, 0.92));
}

.price-tag {
    margin: 0 0 0.8rem;
    color: var(--brand-strong);
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

/* "Starting at" and similar qualifiers sit above the figure as a small caps
   line, so the number itself is what carries the size on every card. */
.price-qualifier {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.process-grid .card {
    position: relative;
    overflow: hidden;
}

.process-card::before {
    content: "";
    position: absolute;
    inset: auto -2rem -2rem auto;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(83, 211, 202, 0.18), transparent 72%);
    pointer-events: none;
}

.process-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(31, 109, 111, 0.1);
    color: var(--brand-strong);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card h3,
.legal-section h2,
.download-item h3 {
    margin-bottom: 0.7rem;
    font-size: 1.28rem;
}

.card ul,
.resource-list,
.feature-list,
.download-list,
.legal-shell ul {
    margin-top: 0.9rem;
}

.page-intro {
    display: grid;
    gap: 1rem;
    background:
        radial-gradient(circle at top right, rgba(83, 211, 202, 0.14), transparent 28%),
        linear-gradient(135deg, rgba(255, 253, 248, 0.95), rgba(239, 247, 243, 0.82));
}

.split-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 253, 248, 0.95), rgba(240, 248, 245, 0.84));
}

.highlight-band {
    background:
        radial-gradient(circle at top right, rgba(166, 243, 236, 0.12), transparent 22%),
        linear-gradient(135deg, rgba(23, 36, 70, 0.98), rgba(20, 60, 64, 0.95));
    color: #eff9f7;
}

.highlight-band h2,
.highlight-band p,
.highlight-band li,
.highlight-band a,
.highlight-band .mini-label,
.highlight-band blockquote {
    color: inherit;
}

.quote-band {
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.95), rgba(244, 249, 247, 0.86));
}

.highlight-grid {
    margin-top: 1.2rem;
}

.highlight-card {
    padding: 1.2rem 1.15rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(166, 243, 236, 0.08));
}

.highlight-card h3 {
    color: #fffaf3;
}

.highlight-card p {
    color: rgba(239, 249, 247, 0.86);
}

blockquote {
    margin: 0;
    font-size: 1.08rem;
}

.form-layout,
.contact-grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
}

.contact-copy {
    display: grid;
    gap: 0.95rem;
}

.form-panel,
.contact-panel {
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border-radius: var(--radius-lg);
    background: rgba(255, 253, 248, 0.88);
    border: 1px solid var(--line);
}

.form-copy {
    margin: 0.4rem 0 1.2rem;
}

.contact-note {
    display: grid;
    gap: 0.4rem;
}

.contact-title {
    max-width: 13ch;
}

.form-status {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--line);
}

.form-status.ok {
    background: rgba(219, 245, 230, 0.92);
    border-color: rgba(52, 126, 84, 0.28);
    color: #1f5e39;
}

.form-status.err {
    background: rgba(255, 236, 236, 0.92);
    border-color: rgba(183, 85, 85, 0.26);
    color: #7b2424;
}

form {
    display: grid;
    gap: 0.42rem;
}

label,
legend {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-strong);
}

input[type="text"],
input[type="email"],
textarea,
select {
    width: 100%;
    margin: 0 0 0.9rem;
    padding: 0.86rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(31, 109, 111, 0.22);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-strong);
    background: #fff;
}

.check-group {
    margin: 0 0 1rem;
    padding: 0.95rem 1rem 0.55rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(31, 109, 111, 0.16);
    background: rgba(241, 247, 245, 0.88);
}

.check-group label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.check-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

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

.schedule-panel {
    display: grid;
    gap: 1rem;
    background:
        radial-gradient(circle at right top, rgba(83, 211, 202, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(255, 253, 248, 0.95), rgba(240, 248, 245, 0.86));
}

.thank-you-panel {
    max-width: 760px;
    margin-inline: auto;
}

.thank-you-panel p {
    max-width: 60ch;
}

.scheduler-frame {
    width: 100%;
    min-height: 720px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.legal-shell,
.download-shell,
.logo-test-shell {
    background:
        radial-gradient(circle at top right, rgba(83, 211, 202, 0.12), transparent 26%),
        linear-gradient(135deg, rgba(255, 253, 248, 0.95), rgba(242, 248, 246, 0.84));
}

.legal-actions,
.download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.download-item a {
    text-decoration: none;
}

.resource-intro {
    min-height: 4.6rem;
}

.logo-demo {
    display: grid;
    place-items: center;
    padding: 1.2rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(20, 62, 66, 0.96), rgba(18, 52, 56, 0.94));
}

.logo-demo img {
    width: min(100%, 22rem);
    padding: 0.65rem;
    border-radius: 1rem;
    background: #f7f1e8;
}

.note {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.site-footer {
    width: 100%;
    background: linear-gradient(180deg, var(--midnight), #0f272b);
    color: rgba(244, 249, 247, 0.82);
    padding: 2.2rem 0 1.35rem;
}

.footer-shell {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1rem 2rem;
    align-items: start;
}

.footer-brand {
    margin: 0;
    color: #fffaf3;
    font-size: 1.28rem;
    font-weight: 700;
}

/* The bare `p` colour rule beat the footer's inherited light colour, so this
   tagline rendered in --ink-muted on the dark navy footer at 2.77:1. */
.site-footer p {
    color: inherit;
}

.footer-copy {
    max-width: 34rem;
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    margin-top: 1rem;
}

.footer-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(188, 232, 227, 0.22);
    background: rgba(255, 255, 255, 0.04);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
}

.site-footer a {
    color: #bce8e3;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #fff;
}

.footer-meta {
    margin-top: 1.2rem;
    color: rgba(244, 249, 247, 0.66);
    font-size: 0.92rem;
}

h1,
h2,
h3,
p,
ul,
ol,
blockquote {
    margin-top: 0;
}

ul,
ol {
    padding-left: 1.2rem;
}

strong {
    color: var(--brand-strong);
}

a {
    color: var(--brand);
}

a:hover,
a:focus-visible {
    color: var(--brand-strong);
}

/* Focus indication.

   Every focus-visible rule in this file used to either set `outline: none` or
   change only the text colour, so keyboard focus was essentially invisible:
   buttons moved up 2px and nothing else, nav links picked up a 12%-white wash
   (1.44:1), and form fields got a 14%-opacity mint glow (1.09:1). WCAG 2.4.11
   wants the indicator itself at 3:1 against what it sits on.

   One ring, two colours: dark teal on the light page surfaces, mint on the
   dark nav / footer / CTA bands. Both clear 6:1 against their backdrop. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.button-link:focus-visible,
.case-study-card:focus-visible {
    outline: 3px solid var(--brand-strong);
    outline-offset: 3px;
}

.site-nav a:focus-visible,
.site-nav button:focus-visible,
.site-footer a:focus-visible,
.highlight-band a:focus-visible,
.highlight-band button:focus-visible {
    outline-color: var(--brand-soft);
}

/* Form fields draw the ring tight to the control so it reads as one object. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 1px;
}

/* Windows High Contrast / forced-colours: let the OS supply the ring. */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    .button-link:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }
}

.hero,
.signal-strip .stat,
.panel,
.highlight-band,
.split-panel,
.quote-band {
    animation: rise-in 700ms ease both;
}

.signal-strip .stat:nth-child(2),
.grid .card:nth-child(2),
.highlight-grid .highlight-card:nth-child(2) {
    animation-delay: 90ms;
}

.signal-strip .stat:nth-child(3),
.grid .card:nth-child(3),
.highlight-grid .highlight-card:nth-child(3) {
    animation-delay: 180ms;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .hero,
    .split-panel,
    .form-layout,
    .contact-grid,
    .footer-shell,
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .grid,
    .signal-strip,
    .highlight-grid,
    .resource-grid,
    .tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-statline {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body::before {
        background-size: 26px 26px;
        opacity: 0.14;
    }

    .site-header {
        padding-top: 0.75rem;
    }

    .site-nav {
        flex-direction: column;
        padding: 0.75rem;
        gap: 0.8rem;
        align-items: flex-start;
    }

    .brand {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        gap: 0.7rem;
    }

    .brand-copy {
        align-items: flex-start;
    }

    .brand-kicker {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.15rem;
    }

    .brand-name {
        font-size: 1rem;
    }

    .site-nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .brand {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* The tagline wraps to two lines in the space left beside the logo, which
       pushed the Menu button onto its own row and put the collapsed header back
       up at 147px. The brand link's accessible name comes from its aria-label,
       so this is a purely visual line and nothing is lost by dropping it here. */
    .brand-kicker {
        display: none;
    }

    /* The .js class is set by an inline snippet in <head>, so the collapsed
       state applies on the first paint instead of flashing the full list.
       Without JS the nav keeps its previous wrapping behaviour. */
    .nav-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .js .nav-links {
        display: none;
    }

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

    .nav-links {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
        padding: 0.6rem 0 0;
        gap: 0.3rem;
    }

    .nav-links a {
        min-height: 2.75rem;
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    main {
        margin-top: 1rem;
        padding-bottom: 3rem;
    }

    .hero h1,
    .page-intro h1,
    .schedule-panel h1,
    .contact-title,
    .legal-shell h1,
    .download-shell h1,
    .logo-test-shell h1 {
        font-size: clamp(1.85rem, 7.5vw, 2.6rem);
    }

    .stats-grid,
    .grid,
    .signal-strip,
    .highlight-grid,
    .resource-grid,
    .tile-grid,
    .footer-links {
        grid-template-columns: 1fr;
    }

    .logo {
        width: 4.5rem;
        height: 2.95rem;
    }

    .hero,
    .page-intro,
    .panel,
    .card,
    .split-panel,
    .highlight-band,
    .form-layout,
    .schedule-panel,
    .quote-band,
    .form-panel,
    .contact-panel,
    .legal-shell,
    .download-shell,
    .logo-test-shell {
        border-radius: 22px;
    }

    .scheduler-frame {
        min-height: 620px;
    }

    .footer-actions {
        gap: 0.55rem;
    }

    .footer-actions a {
        width: fit-content;
    }

    .hero-pill {
        width: 100%;
        justify-content: center;
    }

    /* Decorative logo render. On a phone it stacked below the hero CTAs, so it
       sat as a full-width block between the hero and the first real section.
       It also repeats the logo already in the header a few hundred px above. */
    .hero-side {
        display: none;
    }
}

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


.hp-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hero-note p:last-child,
.contact-note p:last-child,
.info-card p:last-child {
    margin-bottom: 0;
}

/* Portfolio intro */
.portfolio-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(1.5rem, 4vw, 2.8rem);
    background:
        radial-gradient(circle at right bottom, rgba(83, 211, 202, 0.2), transparent 26%),
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.84), transparent 25%),
        linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(239, 247, 243, 0.84));
}

/* The copy column is a heading plus three lines; the aside beside it is two
   stacked cards and runs ~250px taller. Centring spreads that difference above
   and below instead of dumping all of it under the paragraph. */
.portfolio-intro {
    align-items: center;
}

.portfolio-intro-copy {
    display: grid;
    align-content: center;
    gap: 0.4rem;
}

.portfolio-kicker-card {
    padding: 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(31, 109, 111, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 249, 247, 0.82));
}

/* Case study index cards */
.case-study-index {
    display: grid;
    gap: 1rem;
}

.case-study-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top right, rgba(83, 211, 202, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 249, 247, 0.84));
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.case-study-card:hover,
.case-study-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(31, 109, 111, 0.28);
}

.case-study-card h3 {
    margin: 0.6rem 0 0.5rem;
    color: var(--brand-strong);
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.case-study-card h3 a {
    color: inherit;
    text-decoration: none;
}

.case-study-card h3 a:hover,
.case-study-card h3 a:focus-visible {
    text-decoration: underline;
}

.case-study-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 700;
    transition: gap 0.2s ease;
}

.case-study-card-action::after {
    content: "\2192";
    transition: transform 0.2s ease;
}

.case-study-card:hover .case-study-card-action,
.case-study-card:focus-visible .case-study-card-action {
    color: var(--brand-strong);
    gap: 0.65rem;
}

.case-study-card:hover .case-study-card-action::after,
.case-study-card:focus-visible .case-study-card-action::after {
    transform: translateX(3px);
}

.case-study-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.case-study-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.case-study-type {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(31, 109, 111, 0.1);
    color: var(--brand-strong);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-study-severity {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.severity-critical {
    background: rgba(183, 55, 55, 0.12);
    color: #8b2525;
}

.severity-moderate {
    background: rgba(196, 152, 48, 0.14);
    color: #7a5c12;
}

.case-study-card-meta {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

/* Individual case study pages */
.case-study-hero {
    background:
        radial-gradient(circle at right bottom, rgba(83, 211, 202, 0.18), transparent 28%),
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.84), transparent 25%),
        linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(239, 247, 243, 0.84));
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
    color: var(--brand);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.back-link::before {
    content: "\2190";
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--brand-strong);
}

.case-study-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31, 109, 111, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 249, 247, 0.82));
}

.meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
}

.meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-strong);
}

/* Finding flow (step-by-step findings on case study pages) */
.finding-flow {
    display: grid;
    gap: 1rem;
}

.finding-step {
    padding: 1.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top right, rgba(83, 211, 202, 0.06), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 249, 247, 0.84));
    box-shadow: var(--shadow-soft);
}

.finding-step-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.finding-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.finding-step-header h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.finding-severity {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.finding-details {
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.finding-details > div {
    display: grid;
    grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.finding-details > div:last-child {
    border-bottom: none;
}

.finding-details dt {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-strong);
}

.finding-details dd {
    margin: 0;
    font-size: 1rem;
    color: var(--ink-muted);
    line-height: 1.65;
}

.finding-details code {
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: rgba(31, 109, 111, 0.08);
    color: var(--brand-strong);
    font-size: 0.9em;
}

/* Finding grid (used on case study remediation sections) */
.finding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.finding-card {
    padding: 1.4rem;
    border-radius: var(--radius-md);
}

@media (max-width: 1024px) {
    .portfolio-intro {
        grid-template-columns: 1fr;
    }

    .finding-details > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .case-study-meta {
        flex-direction: column;
    }

    .case-study-card-meta {
        flex-direction: column;
        gap: 0.3rem;
    }

    .finding-step-header {
        flex-direction: column;
        align-items: flex-start;
    }
}