/* ==========================================================================
   PRIMITEK GROUP — design system
   Basic Plan, 2026-08. Layered over Bootstrap 5.1; replaces the Porto theme
   aesthetic on every rebuilt page.

   Tone: precision · industrial · credible · modern · international · restrained
   No gradients, no glassmorphism, no decorative animation, minimal shadow.
   Red is structural punctuation, never decoration.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
    /* Brand */
    --pk-red:        #ED1C24;   /* large areas, rules, fills — NOT small text on white */
    --pk-red-deep:   #C41320;   /* accessible interaction red: links, buttons, focus  */
    --pk-red-press:  #9E0F19;
    --pk-red-tint:   #FDECED;

    /* Ink & neutrals */
    --pk-ink:        #101418;
    --pk-ink-2:      #2C3238;
    --pk-muted:      #5A646E;
    --pk-line:       #E4E8EC;
    --pk-surface:    #F6F8FA;
    --pk-white:      #FFFFFF;

    /* Type */
    --pk-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --pk-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --pk-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Rhythm — a 4px base grid */
    --pk-s1: 4px;   --pk-s2: 8px;   --pk-s3: 12px;  --pk-s4: 16px;
    --pk-s5: 24px;  --pk-s6: 32px;  --pk-s7: 48px;  --pk-s8: 64px;
    --pk-s9: 96px;  --pk-s10: 128px;

    --pk-radius: 3px;
    --pk-maxw:   1240px;

    /* One shadow, used sparingly. */
    --pk-shadow: 0 1px 2px rgba(16, 20, 24, .06), 0 8px 24px rgba(16, 20, 24, .06);

    --pk-header-h: 76px;
}

/* ------------------------------------------------- 1b. element normalise

   Replaces the small part of Bootstrap's Reboot that this site actually
   depended on. Bootstrap was loaded on every page for 160 KB and contributed
   ZERO class selectors (measured across 235 rendered pages) — but its reboot
   layer was silently styling bare elements, so dropping the file without this
   block shifted every image down by 7-8px and every form control by 4px.

   Each rule below was derived from a measured before/after diff, not copied
   wholesale. Every declaration corresponds to a geometry or typography change
   observed when the Bootstrap link was removed from a live document.

   Placed before section 2 so the site's own base styles still win, exactly as
   they did when Bootstrap was a separate, earlier stylesheet.
   ------------------------------------------------------------------------ */

/* Images sat back on the text baseline once Bootstrap went, leaving a
   descender gap under every figure, card image and the footer logo. This is
   the single most consequential rule in the block. */
img, svg { vertical-align: middle; }

/* Form controls do not inherit typography from the page by default. Without
   this the contact form rendered in 13.33px Arial. */
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled),
[type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
label { display: inline-block; }
textarea { resize: vertical; }

/* Block elements whose UA defaults are wrong for this layout. */
figure  { margin: 0 0 var(--pk-s4); }
address { font-style: normal; line-height: inherit; margin-bottom: var(--pk-s4); }
dl { margin-top: 0; margin-bottom: var(--pk-s4); }
dt { font-weight: 700; }
dd { margin-bottom: var(--pk-s2); margin-left: 0; }
h6 { font-family: var(--pk-font-display); color: var(--pk-ink); font-weight: 700;
     font-size: 1rem; line-height: 1.15; margin: 0 0 var(--pk-s4); }

/* Tables. .pk-specs sets its own; CMS-authored content tables rely on these. */
table   { caption-side: bottom; border-collapse: collapse; }
caption { padding: var(--pk-s2) 0; color: var(--pk-muted); text-align: left; }
th      { text-align: inherit; text-align: -webkit-match-parent; }

b, strong { font-weight: bolder; }
small     { font-size: .875em; }

/* ----------------------------------------------------------------- 2. base */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--pk-header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--pk-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--pk-ink-2);
    background: var(--pk-white);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

img, svg, video { max-width: 100%; height: auto; }
img { border: 0; }

a {
    color: var(--pk-red-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
a:hover { color: var(--pk-red-press); }

h1, h2, h3, h4, h5 {
    font-family: var(--pk-font-display);
    color: var(--pk-ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 var(--pk-s4);
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 var(--pk-s4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--pk-s4); padding-left: 1.25em; }

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

::selection { background: var(--pk-red); color: #fff; }

/* --------------------------------------------------------- 3. a11y basics */

.pk-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 14px 24px;
    background: var(--pk-ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.pk-skip-link:focus {
    left: 12px;
    top: 12px;
    color: #fff;
}

:focus-visible {
    outline: 3px solid var(--pk-red-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

.pk-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;
}

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

/* ------------------------------------------------------------- 4. layout */

.pk-wrap {
    width: 100%;
    max-width: var(--pk-maxw);
    margin-inline: auto;
    padding-inline: var(--pk-s5);
}
@media (min-width: 768px) { .pk-wrap { padding-inline: var(--pk-s6); } }

.pk-section { padding-block: var(--pk-s8); }
.pk-section--tight { padding-block: var(--pk-s7); }
.pk-section--surface { background: var(--pk-surface); }
.pk-section--ink { background: var(--pk-ink); color: #C7CDD4; }
.pk-section--ink h2, .pk-section--ink h3 { color: #fff; }

@media (min-width: 992px) {
    .pk-section { padding-block: var(--pk-s9); }
    .pk-section--tight { padding-block: var(--pk-s8); }
}

/* Section header: eyebrow + heading + optional intro, left-aligned.
   Deliberately not centred — long centred paragraphs read badly and the
   brand direction calls for restraint. */
.pk-sec-head { max-width: 62ch; margin-bottom: var(--pk-s7); }
.pk-sec-head--split {
    max-width: none;
    display: grid;
    gap: var(--pk-s4);
    align-items: end;
}
@media (min-width: 992px) {
    .pk-sec-head--split { grid-template-columns: minmax(0, 1fr) auto; }
}

.pk-eyebrow {
    display: block;
    font-family: var(--pk-font-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pk-red-deep);
    margin-bottom: var(--pk-s3);
}
.pk-section--ink .pk-eyebrow { color: #FF6B70; }

.pk-sec-head p {
    color: var(--pk-muted);
    font-size: 1.0625rem;
    margin-top: var(--pk-s3);
}
.pk-section--ink .pk-sec-head p { color: #A8B2BC; }

/* A short red rule used as a section marker. The only decorative red. */
.pk-rule {
    width: 40px;
    height: 3px;
    background: var(--pk-red);
    margin-bottom: var(--pk-s5);
}

.pk-grid { display: grid; gap: var(--pk-s5); }
.pk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pk-grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pk-grid--4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ------------------------------------------------------------ 5. buttons */

.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pk-s2);
    min-height: 48px;                 /* comfortable touch target */
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: var(--pk-radius);
    font-family: var(--pk-font-body);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pk-btn--primary {
    background: var(--pk-red-deep);
    border-color: var(--pk-red-deep);
    color: #fff;
}
.pk-btn--primary:hover,
.pk-btn--primary:focus {
    background: var(--pk-red-press);
    border-color: var(--pk-red-press);
    color: #fff;
}

.pk-btn--secondary {
    background: transparent;
    border-color: var(--pk-ink);
    color: var(--pk-ink);
}
.pk-btn--secondary:hover,
.pk-btn--secondary:focus {
    background: var(--pk-ink);
    color: #fff;
}

.pk-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
.pk-btn--ghost:hover,
.pk-btn--ghost:focus {
    background: #fff;
    border-color: #fff;
    color: var(--pk-ink);
}

.pk-btn--block { width: 100%; }

/* Inline "more" link with an arrow that shifts on hover. */
.pk-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s2);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.pk-link-arrow::after {
    content: "→";
    transition: transform .15s ease;
}
.pk-link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------- 6. site header */

.pk-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--pk-white);
    border-bottom: 1px solid var(--pk-line);
}

.pk-header__inner {
    display: flex;
    align-items: center;
    gap: var(--pk-s5);
    min-height: var(--pk-header-h);
}

.pk-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.pk-logo img { height: 40px; width: auto; display: block; }

.pk-nav { margin-left: auto; }

.pk-nav__list {
    display: flex;
    align-items: center;
    gap: var(--pk-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pk-nav__link {
    display: block;
    padding: 10px 12px;
    color: var(--pk-ink-2);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.pk-nav__link:hover { color: var(--pk-ink); }
.pk-nav__link[aria-current="page"] {
    color: var(--pk-ink);
    font-weight: 600;
    border-bottom-color: var(--pk-red);
}

.pk-header__cta { flex-shrink: 0; }

.pk-nav-toggle {
    display: none;
    margin-left: auto;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    cursor: pointer;
}
.pk-nav-toggle span,
.pk-nav-toggle span::before,
.pk-nav-toggle span::after {
    display: block;
    width: 20px; height: 2px;
    background: var(--pk-ink);
    position: relative;
}
.pk-nav-toggle span::before { content: ""; position: absolute; top: -6px; }
.pk-nav-toggle span::after  { content: ""; position: absolute; top:  6px; }

/*
 * Intermediate desktop band — 1100px to 1399px.
 *
 * The bar holds a logo, nine navigation links and a CTA button. At full
 * spacing that measured 1226px of content against a 1176px container, so the
 * header pushed past the viewport and every page scrolled sideways on any
 * screen between the mobile breakpoint and about 1390px — which is 1280x800,
 * 1366x768 and 1280x1024, i.e. most laptops.
 *
 * Tightening the band rather than lowering the breakpoint keeps a real
 * navigation bar on laptop-class screens instead of dropping them to a
 * hamburger.
 */
@media (min-width: 1100px) and (max-width: 1399px) {
    .pk-wrap                { padding-inline: var(--pk-s5); }
    .pk-header__inner       { gap: var(--pk-s3); }
    .pk-logo img            { height: 32px; }
    .pk-nav__list           { gap: 0; }
    .pk-nav__link           { padding: 10px 7px; font-size: .8125rem; letter-spacing: -0.01em; }
    .pk-header__cta .pk-btn { padding: 10px 14px; font-size: .8125rem; }
}

@media (max-width: 1099px) {
    .pk-nav-toggle { display: inline-flex; }
    .pk-header__cta { display: none; }

    /* Mobile: a full-height panel, not a squeezed desktop bar. */
    .pk-nav {
        position: fixed;
        inset: var(--pk-header-h) 0 0 0;
        background: var(--pk-white);
        border-top: 1px solid var(--pk-line);
        padding: var(--pk-s5) var(--pk-s5) var(--pk-s8);
        overflow-y: auto;
        margin: 0;
        display: none;
    }
    .pk-nav.is-open { display: block; }

    .pk-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .pk-nav__link {
        padding: 16px 0;
        font-size: 1.125rem;
        border-bottom: 1px solid var(--pk-line);
    }
    .pk-nav__link[aria-current="page"] {
        border-bottom-color: var(--pk-line);
        padding-left: 12px;
        border-left: 3px solid var(--pk-red);
    }
    .pk-nav__cta { margin-top: var(--pk-s5); }
    body.pk-nav-open { overflow: hidden; }
}

/* -------------------------------------------------------------- 7. hero */

.pk-hero {
    position: relative;
    background: var(--pk-ink);
    color: #fff;
    overflow: hidden;
}
.pk-hero__media {
    position: absolute;
    inset: 0;
}
.pk-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Flat scrim, not a decorative gradient wash — it exists purely so the
   text meets contrast requirements over a photograph. */
.pk-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 24, .72);
}
.pk-hero__inner {
    position: relative;
    padding-block: var(--pk-s8);
    max-width: 46rem;
}
@media (min-width: 992px) {
    .pk-hero__inner { padding-block: var(--pk-s10); }
}
.pk-hero h1 { color: #fff; margin-bottom: var(--pk-s5); }
.pk-hero__lede {
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    color: #D4D9DE;
    max-width: 40rem;
    margin-bottom: var(--pk-s6);
}
.pk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pk-s3); }

/* Hero slide track — CSS-only crossfade, no carousel library. */
.pk-hero__slides { position: absolute; inset: 0; }
.pk-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.pk-hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .pk-hero__slide { transition: none; }
}

/* ------------------------------------------------------- 8. trust / stats */

.pk-stats {
    border-block: 1px solid var(--pk-line);
    background: var(--pk-white);
}
.pk-stats__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.pk-stats__item {
    padding: var(--pk-s6) var(--pk-s5);
    border-right: 1px solid var(--pk-line);
}
.pk-stats__item:last-child { border-right: 0; }
@media (max-width: 767px) {
    .pk-stats__item { border-right: 0; border-bottom: 1px solid var(--pk-line); }
    .pk-stats__item:last-child { border-bottom: 0; }
}

.pk-stats__value {
    display: block;
    font-family: var(--pk-font-display);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    font-weight: 700;
    color: var(--pk-ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.pk-stats__label {
    display: block;
    margin-top: var(--pk-s2);
    font-size: .875rem;
    color: var(--pk-muted);
}

/* ------------------------------------------------------------- 9. cards */

.pk-card {
    display: flex;
    flex-direction: column;
    background: var(--pk-white);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    overflow: hidden;
    transition: border-color .15s ease;
}
.pk-card:hover { border-color: var(--pk-ink-2); }

.pk-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--pk-surface);
    overflow: hidden;
}
.pk-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.pk-card__body {
    padding: var(--pk-s5);
    display: flex;
    flex-direction: column;
    gap: var(--pk-s2);
    flex: 1;
}
.pk-card__kicker {
    font-family: var(--pk-font-mono);
    /* 12px floor. This carries dates and category names — real information,
       not decoration — and 11px uppercase mono at 375px is genuinely hard to
       read. Measured at 11px during the layout audit. */
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pk-muted);
}
.pk-card__title {
    font-family: var(--pk-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pk-ink);
    margin: 0;
    line-height: 1.3;
}
.pk-card__title a {
    color: inherit;
    text-decoration: none;
}
/* Whole-card click target, keyboard focus still lands on the real link. */
.pk-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.pk-card { position: relative; }
.pk-card__title a:hover { color: var(--pk-red-deep); }

.pk-card__text {
    font-size: .9375rem;
    color: var(--pk-muted);
    margin: 0;
}
.pk-card__meta {
    margin-top: auto;
    padding-top: var(--pk-s3);
    font-size: .8125rem;
    color: var(--pk-muted);
}

/* Category tile — image-led, compact label bar. */
.pk-tile { position: relative; display: block; text-decoration: none; }
.pk-tile__media {
    aspect-ratio: 1 / 1;
    background: var(--pk-surface);
    border: 1px solid var(--pk-line);
    overflow: hidden;
}
.pk-tile__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.pk-tile:hover .pk-tile__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .pk-tile__media img { transition: none; }
    .pk-tile:hover .pk-tile__media img { transform: none; }
}
.pk-tile__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-s2);
    padding: var(--pk-s3) 0 0;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--pk-ink);
}
.pk-tile__count { font-weight: 400; font-size: .8125rem; color: var(--pk-muted); }

/* Concern card — text-led, no photography required. */
.pk-concern {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s3);
    padding: var(--pk-s6);
    background: var(--pk-white);
    border: 1px solid var(--pk-line);
    border-top: 3px solid var(--pk-red);
    border-radius: var(--pk-radius);
    position: relative;
}
.pk-concern__est {
    font-family: var(--pk-font-mono);
    font-size: .75rem;
    color: var(--pk-muted);
    letter-spacing: .06em;
}
.pk-concern h3 { margin: 0; font-size: 1.125rem; }
.pk-concern h3 a { color: inherit; text-decoration: none; }
.pk-concern h3 a::after { content: ""; position: absolute; inset: 0; }
.pk-concern h3 a:hover { color: var(--pk-red-deep); }
.pk-concern p { font-size: .9375rem; color: var(--pk-muted); }

/* Feature row — icon-free, numbered, industrial. */
.pk-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pk-s6); }
@media (min-width: 768px) { .pk-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pk-features--3 { grid-template-columns: repeat(3, 1fr); } }

.pk-feature { padding-top: var(--pk-s4); border-top: 1px solid var(--pk-line); }
.pk-feature__num {
    font-family: var(--pk-font-mono);
    font-size: .75rem;
    color: var(--pk-red-deep);
    letter-spacing: .1em;
    display: block;
    margin-bottom: var(--pk-s3);
}
.pk-feature h3 { font-size: 1.0625rem; margin-bottom: var(--pk-s2); }
.pk-feature p { font-size: .9375rem; color: var(--pk-muted); margin: 0; }

/* ---------------------------------------------------- 10. page furniture */

.pk-pagehead {
    background: var(--pk-surface);
    border-bottom: 1px solid var(--pk-line);
    padding-block: var(--pk-s7);
}
.pk-pagehead h1 { margin-bottom: var(--pk-s3); }
.pk-pagehead__lede {
    color: var(--pk-muted);
    font-size: 1.0625rem;
    max-width: 60ch;
    margin: 0;
}

.pk-breadcrumb { margin-bottom: var(--pk-s4); }
.pk-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
    color: var(--pk-muted);
}
.pk-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--pk-s2);
    color: #B6BEC6;
}
.pk-breadcrumb a { color: var(--pk-muted); text-decoration: none; }
.pk-breadcrumb a:hover { color: var(--pk-red-deep); text-decoration: underline; }
.pk-breadcrumb [aria-current="page"] { color: var(--pk-ink); }

.pk-pagination { margin-top: var(--pk-s7); }
.pk-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.pk-pagination a,
.pk-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    font-size: .9375rem;
    text-decoration: none;
    color: var(--pk-ink-2);
}
.pk-pagination a:hover { border-color: var(--pk-ink); color: var(--pk-ink); }
.pk-pagination .is-current {
    background: var(--pk-ink);
    border-color: var(--pk-ink);
    color: #fff;
    font-weight: 600;
}
.pk-pagination__gap { border: 0; min-width: auto; }

/* Prose — long-form body copy from the CMS. */
.pk-prose { max-width: 68ch; }
.pk-prose h2 { margin-top: var(--pk-s7); font-size: 1.5rem; }
.pk-prose h2:first-child { margin-top: 0; }
.pk-prose h3 { margin-top: var(--pk-s6); }
.pk-prose ul, .pk-prose ol { margin-bottom: var(--pk-s4); }
.pk-prose li { margin-bottom: var(--pk-s2); }

/* Specification table — this is a specifications business. */
.pk-specs-wrap { overflow-x: auto; margin-bottom: var(--pk-s5); }
.pk-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.pk-specs th, .pk-specs td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pk-line);
    text-align: left;
    vertical-align: top;
}
.pk-specs th {
    width: 34%;
    font-weight: 600;
    color: var(--pk-ink);
    background: var(--pk-surface);
    font-family: var(--pk-font-body);
}
.pk-specs td { font-family: var(--pk-font-mono); font-size: .875rem; }

/* ------------------------------------------------------------ 11. forms */

.pk-field { margin-bottom: var(--pk-s5); }
.pk-field label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pk-ink);
    margin-bottom: var(--pk-s2);
}
.pk-field .pk-req { color: var(--pk-red-deep); }

.pk-field input[type="text"],
.pk-field input[type="email"],
.pk-field input[type="tel"],
.pk-field input[type="url"],
.pk-field select,
.pk-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pk-ink);
    background: var(--pk-white);
    border: 1px solid #C7CDD4;
    border-radius: var(--pk-radius);
}
.pk-field textarea { min-height: 150px; resize: vertical; }

.pk-field input:focus,
.pk-field select:focus,
.pk-field textarea:focus {
    border-color: var(--pk-ink);
    outline: 3px solid var(--pk-red-deep);
    outline-offset: 1px;
}

.pk-field__hint {
    display: block;
    margin-top: var(--pk-s2);
    font-size: .8125rem;
    color: var(--pk-muted);
}
.pk-field--error input,
.pk-field--error textarea { border-color: var(--pk-red-deep); }
.pk-field__error {
    display: block;
    margin-top: var(--pk-s2);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pk-red-deep);
}

/* Honeypot — visually hidden, never focusable by a real user. */
.pk-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.pk-alert {
    padding: var(--pk-s4) var(--pk-s5);
    border-radius: var(--pk-radius);
    border-left: 3px solid;
    margin-bottom: var(--pk-s5);
    font-size: .9375rem;
}
.pk-alert--success { background: #EDF7F1; border-color: #0E7A4A; color: #0B5C38; }
.pk-alert--error   { background: var(--pk-red-tint); border-color: var(--pk-red-deep); color: #8A1218; }

/* ----------------------------------------------------------- 12. footer */

.pk-footer {
    background: var(--pk-ink);
    color: #A8B2BC;
    font-size: .9375rem;
    padding-block: var(--pk-s8) var(--pk-s5);
}
.pk-footer h2, .pk-footer h3 {
    color: #fff;
    font-size: .8125rem;
    font-family: var(--pk-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: var(--pk-s4);
}
.pk-footer a { color: #C7CDD4; text-decoration: none; }
.pk-footer a:hover { color: #fff; text-decoration: underline; }

.pk-footer__grid {
    display: grid;
    gap: var(--pk-s7);
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pk-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .pk-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.pk-footer__list { list-style: none; margin: 0; padding: 0; }
.pk-footer__list li { margin-bottom: var(--pk-s2); }

.pk-footer__logo { margin-bottom: var(--pk-s4); }
.pk-footer__logo img { height: 40px; width: auto; }
/* No reversed logo asset exists yet. The standard mark is black on a near-black
   footer, so it gets a white plate to stay legible. Remove this rule the day a
   real /img/logo-light.png is supplied — the PHP already switches automatically. */
.pk-footer__logo--plate {
    display: inline-block;
    background: #fff;
    padding: var(--pk-s2) var(--pk-s3);
    border-radius: var(--pk-radius);
}

.pk-footer address { font-style: normal; margin-bottom: var(--pk-s4); line-height: 1.7; }

.pk-footer__bottom {
    margin-top: var(--pk-s7);
    padding-top: var(--pk-s5);
    border-top: 1px solid #2C3238;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pk-s4);
    justify-content: space-between;
    font-size: .8125rem;
    color: #7C8792;
}
.pk-footer__legal { display: flex; flex-wrap: wrap; gap: var(--pk-s4); list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------- 13. utilities */

.pk-mb-0 { margin-bottom: 0 !important; }
.pk-muted { color: var(--pk-muted); }
.pk-mono { font-family: var(--pk-font-mono); }
.pk-lede { font-size: 1.125rem; color: var(--pk-muted); max-width: 62ch; }
.pk-center-actions { display: flex; flex-wrap: wrap; gap: var(--pk-s3); margin-top: var(--pk-s6); }

.pk-img-missing { background: var(--pk-surface); }

.pk-empty-state {
    padding: var(--pk-s8) var(--pk-s5);
    text-align: center;
    border: 1px dashed var(--pk-line);
    border-radius: var(--pk-radius);
    color: var(--pk-muted);
}

/* ------------------------------------------------------------- 14. print */

@media print {
    .pk-header, .pk-footer, .pk-nav, .pk-btn, .pk-pagination { display: none !important; }
    body { color: #000; font-size: 11pt; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}