/* ==========================================================================
   Heritage Crest Build — Kitchens page
   Marquee, style blocks (video or image+thumbs), project carousel, viewer modal
   ========================================================================== */

:root {
    --kp-gold: #ac8d56;
    --kp-cream: #f7f5f1;
    --kp-text: #1a1a1a;
    --kp-muted: #555;
    --kp-dark: #0a0a0a;
    --kp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Marquee strip ===== */
.kp-marquee {
    background: var(--kp-dark);
    color: #fff;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 18px 0;
}
.kp-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    white-space: nowrap;
    animation: kp-marquee 28s linear infinite;
    padding-left: 100%;
}
.kp-marquee-track > span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #fff;
}
.kp-marquee-track > span.kp-marquee-dot {
    color: var(--kp-gold);
    font-size: 8px;
    letter-spacing: 0;
}
@keyframes kp-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== Section head reuse ===== */
.kp-section-head {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
    padding: 0 24px;
}
.kp-section-eyebrow {
    display: inline-block;
    color: var(--kp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.kp-section-head h2 {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    color: var(--kp-text);
    margin: 0 0 14px;
    letter-spacing: -0.005em;
}
.kp-section-head p {
    color: var(--kp-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* ===== Style blocks ===== */
.kp-styles { padding: 30px 0 60px; background: #fff; }
.kp-style {
    max-width: 1320px;
    margin: 0 auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 56px;
    align-items: center;
}
.kp-style:nth-child(even) {
    grid-template-columns: 1.6fr 1fr;
}
.kp-style:nth-child(even) .kp-style-text { order: 2; }
.kp-style:nth-child(even) .kp-style-main { order: 1; }
.kp-style:nth-child(even) .kp-style-thumbs { order: 3; grid-column: 1; }

.kp-style-num {
    display: inline-block;
    color: var(--kp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.kp-style-text h3 {
    margin: 0 0 16px;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    color: var(--kp-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
    position: relative;
    padding-bottom: 14px;
}
.kp-style-text h3::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 2px;
    background: var(--kp-gold);
}
.kp-style-copy {
    font-size: 15px;
    line-height: 1.75;
    color: var(--kp-muted);
    margin: 0 0 18px;
}
.kp-style-credits {
    font-size: 13px;
    color: var(--kp-muted);
    margin: 0;
    line-height: 1.6;
}
.kp-style-credits span {
    color: var(--kp-gold);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-right: 6px;
    font-size: 11px;
}

.kp-pending {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 10px 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(172, 141, 86, 0.15);
    color: var(--kp-gold);
    vertical-align: middle;
}
.kp-card-pending {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 5px 11px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(172, 141, 86, 0.85);
    color: #fff;
}

.kp-style-main {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #1a1a1a;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    display: block;
    width: 100%;
}
.kp-style-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--kp-ease), filter 0.4s var(--kp-ease);
    will-change: transform;
}
.kp-style-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0);
    transition: background 0.4s var(--kp-ease);
    pointer-events: none;
}
.kp-style-main:hover img {
    transform: scale(1.04);
    filter: brightness(0.78);
}
.kp-style-main:hover::after {
    background: rgba(10, 10, 10, 0.18);
}

.kp-style-zoom {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 64px; height: 64px;
    line-height: 64px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 50%;
    background: rgba(172, 141, 86, 0.45);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.35s var(--kp-ease), transform 0.45s var(--kp-ease);
    z-index: 2;
    pointer-events: none;
}
.kp-style-main:hover .kp-style-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.kp-style-zoom-label {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 9px 18px 8px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.55);
    opacity: 0;
    transition: opacity 0.35s var(--kp-ease) 0.05s, transform 0.35s var(--kp-ease) 0.05s;
    z-index: 2;
    pointer-events: none;
}
.kp-style-main:hover .kp-style-zoom-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.kp-style-thumbs {
    grid-column: 2;          /* sits under the main image (right column) */
    min-width: 0;            /* let the strip scroll inside its track, not expand it */
    margin-top: 18px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(172, 141, 86, 0.5) transparent;
    padding-bottom: 6px;
}
.kp-style-thumbs::-webkit-scrollbar { height: 6px; }
.kp-style-thumbs::-webkit-scrollbar-thumb { background: rgba(172, 141, 86, 0.5); border-radius: 4px; }
.kp-thumb {
    flex: 0 0 auto;
    width: 110px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    background: #1a1a1a;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.25s var(--kp-ease), border-color 0.25s var(--kp-ease);
}
.kp-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.kp-thumb:hover { opacity: 0.95; }
.kp-thumb.is-active { opacity: 1; border-color: var(--kp-gold); }

/* ===== Projects carousel ===== */
.kp-projects {
    background: var(--kp-cream);
    padding: 80px 0 90px;
    position: relative;
}
.kp-projects .kp-section-head { margin-bottom: 36px; }
.kp-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 32px 28px;
    scroll-padding: 32px;
    scrollbar-width: none;
}
.kp-carousel::-webkit-scrollbar { display: none; }
.kp-card {
    flex: 0 0 360px;
    scroll-snap-align: start;
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1a1a1a;
    text-decoration: none;
    color: #fff;
    transition: transform 0.4s var(--kp-ease), box-shadow 0.4s var(--kp-ease);
}
.kp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -22px rgba(0,0,0,0.35);
}
.kp-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--kp-ease), filter 0.4s var(--kp-ease);
}
.kp-card:hover img { transform: scale(1.05); filter: brightness(0.88); }
.kp-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}
.kp-card-copy {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 26px 24px 22px;
    color: #fff;
}
.kp-card-eyebrow {
    display: inline-block;
    color: var(--kp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.kp-card-copy h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #fff;
    /* wrap whole words only (style.css sets break-word site-wide) */
    word-break: normal;
    overflow-wrap: normal;
}
.kp-card-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s var(--kp-ease), transform 0.35s var(--kp-ease);
}
.kp-card:hover .kp-card-view { opacity: 1; transform: translateY(0); }
.kp-card-arrow { display: inline-block; transition: transform 0.3s var(--kp-ease); }
.kp-card:hover .kp-card-arrow { transform: translateX(4px); }

.kp-carousel-controls {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.kp-carousel-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    color: var(--kp-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s var(--kp-ease), color 0.25s var(--kp-ease), border-color 0.25s var(--kp-ease);
}
.kp-carousel-btn:hover {
    background: var(--kp-gold);
    color: #fff;
    border-color: var(--kp-gold);
}

/* ===== Project viewer modal ===== */
body.kp-locked { overflow: hidden; }
.kp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
}
.kp-modal[hidden] { display: none; }
.kp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8,8,8,0.94);
    cursor: zoom-out;
}
.kp-shell {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 22px 28px 26px;
    color: #fff;
}
.kp-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    flex-shrink: 0;
}
.kp-modal-title h2 {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #fff;
    line-height: 1.2;
}
.kp-eyebrow {
    display: block;
    color: var(--kp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.kp-modal-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    width: 42px; height: 42px;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.kp-modal-close:hover { background: var(--kp-gold); border-color: var(--kp-gold); }

.kp-modal-main {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 8px 0;
}
.kp-modal-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kp-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    background: #1a1a1a;
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
}
.kp-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    background: rgba(20,20,20,0.55);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    z-index: 3;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.kp-modal-prev { left: 12px; }
.kp-modal-next { right: 12px; }
.kp-modal-nav:hover { background: var(--kp-gold); border-color: var(--kp-gold); }
.kp-modal-counter {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    color: var(--kp-gold);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}

.kp-modal-thumbs {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 16px 4px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.kp-modal-thumbs::-webkit-scrollbar { height: 6px; }
.kp-modal-thumbs::-webkit-scrollbar-thumb { background: rgba(172, 141, 86, 0.55); border-radius: 4px; }
.kp-modal-thumb {
    flex: 0 0 auto;
    width: 110px; height: 74px;
    padding: 0;
    border: 2px solid transparent;
    background: #1a1a1a;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    scroll-snap-align: center;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}
.kp-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-modal-thumb:hover { opacity: 0.85; }
.kp-modal-thumb.is-active { border-color: var(--kp-gold); opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .kp-style,
    .kp-style:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .kp-style:nth-child(even) .kp-style-text,
    .kp-style:nth-child(even) .kp-style-main,
    .kp-style:nth-child(even) .kp-style-thumbs {
        order: initial;
    }
    .kp-style-thumbs,
    .kp-style:nth-child(even) .kp-style-thumbs {
        grid-column: 1;
    }
    .kp-card { flex-basis: 280px; }
}
@media (max-width: 640px) {
    .kp-style { margin-bottom: 56px; }
    .kp-projects { padding: 60px 0 70px; }
    .kp-card { flex-basis: 240px; }
    /* a little more text width on the 240px cards so "Compartmentation" fits whole */
    .kp-card-copy { padding: 24px 18px 20px; }
    .kp-modal-nav { width: 40px; height: 40px; font-size: 22px; }
    .kp-modal-thumb { width: 86px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    /* No scroll: the track's 100% left padding only exists to let the words run in
       from the right, so without the animation the strip was an empty black band.
       Show the words still, from the left, fading into the strip at the right edge. */
    .kp-marquee-track { animation: none; padding-left: 24px; transform: none; }
    .kp-marquee { position: relative; }
    .kp-marquee::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 18%;
        background: linear-gradient(to right, rgba(10, 10, 10, 0), var(--kp-dark));
        pointer-events: none;
    }
    .kp-card, .kp-card img, .kp-card-view, .kp-card-arrow,
    .kp-modal-img, .kp-style-main img { transition: none !important; }
}

/* ===== Project Showcase — reuses .kp-style grid, .kp-style-main (16/10) and
   .kp-style-thumbs strip. No new fonts: inherits the page font like every
   other block. Only adds slide-stacking + named project thumbnails. ===== */
.kp-sc-hero {
    cursor: default;
}
.kp-sc-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s var(--kp-ease);
}
.kp-sc-slide.is-active { opacity: 1; }
.kp-sc-hero::after { display: none; }   /* no zoom overlay on the rotating hero */

/* Named project thumbnails — sized to sit comfortably under the main image:
   big enough to read the photo, captioned in the About-Us dash style. */
/* Thumb row locked to the main-image column width: a grid that never overflows.
   --kp-cols (set by JS) = how many tiles fit; extra projects collapse behind a "+N" chip. */
.kp-showcase .kp-style-thumbs {
    display: grid;
    grid-template-columns: repeat(var(--kp-cols, 4), 1fr);
    gap: 14px;
    margin-top: 20px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.kp-proj-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    background: #1a1a1a;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
}
.kp-proj-thumb[hidden] { display: none; }

/* "+N more" chip — same footprint as a tile, sits flush at the end of the row */
.kp-proj-more {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 1px solid rgba(172, 141, 86, 0.45);
    border-radius: 2px;
    background: #141414;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.25s var(--kp-ease), border-color 0.25s var(--kp-ease);
}
.kp-proj-more:hover { background: #1f1f1f; border-color: var(--kp-gold); }
.kp-proj-more-plus {
    color: var(--kp-gold);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 300;
    line-height: 1;
}
.kp-proj-more-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.kp-proj-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--kp-ease);
}
.kp-proj-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0) 60%);
    transition: background 0.3s var(--kp-ease);
}
.kp-proj-thumb:hover img { transform: scale(1.05); }
/* On hover the whole thumbnail dims evenly so the top-right "View Project" hint stays legible over any photo */
.kp-proj-thumb:hover::after { background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 100%); }

/* Caption — matches the About Us "— Project Name" gold-dash style.
   Tiles can be as narrow as 160px (layoutShowcaseThumbs aims for 160px columns at
   every screen width), so the caption is sized for that:
   - line-height is set here: it used to inherit body's 30px, so a 4-line name
     (e.g. "Repton Manor Primary School") rose past the top of the tile and lost
     its first word;
   - word-break/overflow-wrap normal cancel style.css's site-wide break-word, so
     names wrap between whole words ("COMPARTMENTA/TION" no longer splits);
   - 10px with 0.1em tracking lets the longest word, COMPARTMENTATION, fit the
     text width of a 160px tile. Measured at 320-1920px on all tiled pages. */
.kp-proj-name {
    position: absolute;
    left: 12px;
    right: 8px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-left: 20px;
    word-break: normal;
    overflow-wrap: normal;
    -webkit-hyphens: manual;
            hyphens: manual;
}
.kp-proj-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 1px;
    background: var(--kp-gold);
    transition: width 0.4s var(--kp-ease);
}
/* grows on hover but stays inside the 20px gutter, clear of the words */
.kp-proj-thumb:hover .kp-proj-name::before { width: 18px; }

/* "View Project" hint — centred pill, appears on the dark hover scrim */
.kp-proj-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(6px);
    z-index: 3;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 9px 18px 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    opacity: 0;
    transition: opacity 0.3s var(--kp-ease), transform 0.3s var(--kp-ease);
}
.kp-proj-thumb:hover .kp-proj-view { opacity: 1; transform: translate(-50%, -50%) translateY(0); }

@media (max-width: 600px) {
    .kp-showcase .kp-style-thumbs { gap: 10px; }
}

.kp-sc-hero:hover img { transform: none; }


/* ===== Gallery scrubber — drag to jump straight to the end ===== */
.kp-modal-slider {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    width: min(58%, 520px);
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    cursor: pointer;
    z-index: 3;
}
.kp-modal-slider:focus { outline: none; }
.kp-modal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kp-gold);
    border: 2px solid #fff;
    cursor: grab;
}
.kp-modal-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kp-gold);
    border: 2px solid #fff;
    cursor: grab;
}

/* Gallery modal — the one-line project descriptor under the title.
   Gold, small, quiet; it sits between the project name and the photographs. */
.kp-modal-blurb {
    margin: 6px 0 0;
    color: var(--kp-gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.55;
    max-width: 62ch;
}
@media (max-width: 700px) {
    .kp-modal-blurb { font-size: 11px; letter-spacing: 0.1em; }
}

/* A client's full project description (e.g. Dan's WhatsApp captions, shown verbatim)
   reads as a sentence rather than tracked gold caps. */
.kp-modal-blurb.is-long {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    max-width: 78ch;
}
@media (max-width: 700px) {
    .kp-modal-blurb.is-long { font-size: 13px; letter-spacing: 0; }
}