/* ---------------------------------------------------------------------------
 * About v2
 *
 * Tokens are the ones agreed in the Figma style guide, not new ones: brand yellow #FED208,
 * the neutral ramp, and slate #212C34 — which is the colour of the fixture bodies themselves
 * and the site's real heading colour, even though the brand document never named it.
 *
 * Layout follows the house grid: 1200px content, 40px gutter, breakpoints 640 / 960 / 1200 / 1600.
 * Buttons are pills at 30px to match .uk-button on the live site; cards and images stay square
 * at 0 to match .uk-card. Those two values were measured, not chosen.
 *
 * Section rhythm alternates near-black against high-key, which is what the brand's own imagery
 * already does — 49.5% of sampled pixels sit below 0.15 luminance and 36.3% above 0.5, with only
 * 14.2% in between. The page avoids that middle deliberately.
 * ------------------------------------------------------------------------- */

.kf-sec {
    --kf-yellow: #FED208;
    /* Slate is the site's real heading colour and the colour of the fixture bodies themselves.
       It replaces the derived "text-safe yellow" #846C01, which passed AA at 5.09:1 but read as
       mud — the style guide's own rule is that yellow is a FILL, not a text colour, so a link
       should not be trying to be yellow in the first place. Yellow returns on hover, as an
       underline, where it is decoration rather than the thing being read. */
    --kf-slate: #212C34;
    --kf-link: #212C34;
    --kf-link-hover: #161616;
    --kf-ink: #161616;
    --kf-ink-2: #2A2B2C;
    --kf-ink-3: #414243;
    --kf-mute: #717275;
    --kf-line: #E5E5E5;
    /* Cards, media and thumbnails. Was 0 — the house spec called for square cards and the LynTec
       ports' 6/8px were being corrected back to it. Changed on request 2026-09-04: product cards
       are rounded, and one token keeps every card on the site agreeing. 4px is the value the
       home page's New Arrivals card already uses, which is the card this matches. */
    --kf-card-radius: 4px;
    --kf-line-dark: #2A2B2C;
    --kf-paper: #F9F9F9;
    --kf-slate: #212C34;
    --kf-on-dark: #D3D4D5;
    --kf-on-dark-mute: #A1A2A4;

    --kf-pad: 70px;             /* .uk-section at >=960 */
    --kf-pad-lg: 140px;         /* .uk-section-large at >=960 */

    --kf-display: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
    --kf-body: 'Roboto', system-ui, sans-serif;
}

/* SECOND CONSUMER: a Builder section measures with its own `.uk-container`, which this theme sets
   to 1600 — 400px wider than the design. The press bands are aliased onto the house measure here
   instead of restating it; `:not(.kf-bleed)` leaves the full-bleed scrub stage alone. */
.kf-container,
/* Two levels, because a section carrying a BACKGROUND IMAGE wraps its content in an extra
   `.uk-background-cover` div — a direct-child selector silently stops matching and the band falls
   back to the theme's 1600 container while every other band sits at 1200. */
.kf-sec[class*="kf-press-"]:not(.kf-bleed) > .uk-container,
.kf-sec[class*="kf-press-"]:not(.kf-bleed) > * > .uk-container {
    box-sizing: content-box;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 40px;
}

.kf-band { padding-block: var(--kf-pad-lg); }

/* --- type ---------------------------------------------------------------- */
/* the `[class*="uk-h"]` twins exist because a native Builder headline carries `uk-h2` as well as
   the system class, and theme.1.css loads later at equal specificity. */
.kf-display, .kf-h1, .kf-h2, .kf-h4, .kf-entry__head, .kf-quote,
.kf-display[class*="uk-h"], .kf-h1[class*="uk-h"], .kf-h2[class*="uk-h"], .kf-h4[class*="uk-h"],
.kf-quote[class*="uk-h"],
.kf-card__name, .kf-era__name, .kf-year__num, .kf-entry__year, .kf-stat__big,
.kf-proof__grid .el-title, .kf-range__grid .el-title {
    font-family: var(--kf-display);
    font-weight: 700;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
}
.kf-band p { font-family: var(--kf-body); margin: 0; }

.kf-display, .kf-display[class*="uk-h"] { font-size: 56px; line-height: 60px; color: #fff; }
.kf-h1, .kf-h1[class*="uk-h"] { font-size: 40px; line-height: 48px; color: var(--kf-ink); }
.kf-h2, .kf-h2[class*="uk-h"] { font-size: 36px; line-height: 44px; color: var(--kf-ink); }
.kf-h2--on-dark { color: #fff; }
.kf-h4, .kf-h4[class*="uk-h"] { font-size: 19px; line-height: 26px; color: var(--kf-ink); }

.kf-eyebrow {
    font-family: var(--kf-body); font-size: 11px; line-height: 14px;
    letter-spacing: 1.6px; text-transform: uppercase; font-weight: 500;
    color: var(--kf-mute);
}
.kf-eyebrow--on-dark { color: var(--kf-yellow); }

.kf-lede { font-size: 17px; line-height: 27px; color: var(--kf-on-dark); max-width: 34em; }
.kf-sub { font-size: 15px; line-height: 23px; color: var(--kf-on-dark-mute); max-width: 46em; }
.kf-sub--on-light { font-size: 17px; line-height: 27px; color: var(--kf-ink-3); }
.kf-sub--on-yellow { font-size: 17px; line-height: 27px; color: var(--kf-ink-2); }
/* `.kf-band p { margin: 0 }` is (0,1,1) and beats a single class, and its SHORTHAND resets
   margin-inline — so this centred variant was silently left-aligned inside its parent, sitting
   255px off the heading's centre. Qualified so the two agree. */
.kf-band p.kf-sub--center,
.kf-sub--center { margin-inline: auto; text-align: center; }

.kf-rule { display: block; width: 64px; height: 3px; background: var(--kf-yellow); }

.kf-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- buttons (pill, 30px — matches .uk-button) --------------------------- */
/* SECOND CONSUMER: the press page's CTAs are native Builder buttons, so they arrive as
   `.uk-button` — theme.1.css styles those at a 2px radius, not this system's pill. */
/* The house button.
 *
 * The aliases below are ports that arrived with LynTec's button language — square or 6px corners,
 * Inter or Roboto Condensed, letterspaced — and were restating a spec this file already owns. They
 * are listed here rather than re-declared in four stylesheets so there is one definition of what a
 * Kino Flo button is. Geometry exceptions (a list row does not want a 52px CTA) stay local to the
 * stack that needs them. */
.kf-btn,
.kf-sec[class*="kf-press-"] .uk-button,
.kf-dlrow__btn,
.kf-downloads__loadmore-btn,
.kf-downloads__reset,
.kf-downloads__bottomsheet-cta,
.kf-downloads__mobile-fab,
.kf-search-results__page,
.kf-search-results__filters-clear,
.js-reset-filters,
.js-apply-filters {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding-inline: 30px; border-radius: 30px;
    /* Token FALLBACKS, not new values. This file scopes its tokens to .kf-sec, which
       suits pages built out of kf-sec bands. A button dropped into an older layout
       whose sections predate that class resolves var(--kf-body) to nothing, and an
       undefined var makes the whole declaration invalid: the label falls back to
       inherited grey and the background to transparent. The fallbacks make a button
       self-sufficient wherever the stylesheet is loaded. */
    font-family: var(--kf-body, Roboto, Arial, sans-serif); font-size: 15px; line-height: 20px; font-weight: 700;
    letter-spacing: normal; text-transform: uppercase; text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.kf-btn--primary,
.kf-sec[class*="kf-press-"] .uk-button.uk-button-primary,
.kf-downloads__loadmore-btn,
.kf-downloads__bottomsheet-cta--apply,
.js-apply-filters { background: var(--kf-yellow, #FED208); color: var(--kf-ink, #161616); }
.kf-btn--primary:hover,
.kf-sec[class*="kf-press-"] .uk-button.uk-button-primary:hover,
.kf-downloads__loadmore-btn:hover,
.kf-downloads__bottomsheet-cta--apply:hover,
.js-apply-filters:hover { background: #D9B201; color: var(--kf-ink, #161616); }
.kf-btn--dark { background: var(--kf-ink, #161616); color: #fff; }
.kf-btn--dark:hover { background: var(--kf-ink-2); color: #fff; }
.kf-dlrow__btn,
.kf-downloads__reset,
.kf-downloads__bottomsheet-cta--reset,
.kf-search-results__page,
.kf-search-results__filters-clear,
.js-reset-filters,
.kf-btn--ghost,
.kf-press-net .uk-button.uk-button-default { border: 1px solid var(--kf-ink, #161616); color: var(--kf-ink, #161616); }
.kf-btn--ghost:hover,
.kf-press-net .uk-button.uk-button-default:hover { background: var(--kf-ink, #161616); color: #fff; }
/* The ink-bordered ghost is invisible on a dark band. The press hero sits on ink, so the ghost
   gets a light counterpart rather than the hero re-declaring a button of its own. */
.kf-btn--ghost-on-dark,
/* the press hero's secondary CTA is a native Builder button, so it arrives as
   .uk-button-default — ink-on-ink against that band. Aliased, not restated. */
.kf-press-hero .uk-button.uk-button-default {
    border: 1px solid rgba(255,255,255,.5); color: #fff; background: transparent;
}
.kf-btn--ghost-on-dark:hover,
.kf-press-hero .uk-button.uk-button-default:hover { background: #fff; color: var(--kf-ink, #161616); }

/* --- hero ---------------------------------------------------------------- */
/* Figma "Kino Flo — About": `hero bg` is 1600x680 with a VIDEO fill — full width, not the split
   black/photo panel this was before. Copy is inset 200px from the page edge, not on the 120 measure
   the rest of the page uses, so it is stated rather than inherited from .kf-container. */
/* padding-block:0 overrides .kf-band's 140/140. Every other band on this page is sized by its
   content plus that padding; the hero is the one band the design fixes outright (680), so the
   inherited padding was pure addition — it rendered at 960. */
.kf-hero { position: relative; background: #000; overflow: hidden;
           min-height: 680px; padding-block: 0;
           display: flex; align-items: center; }
.kf-hero__media { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.kf-hero__video { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; object-position: center 42%; display: block; }

/* The scrim is not decoration — without it the headline sits on whatever the footage happens to be
   doing behind it, and this loop swings from near-black to a blown softbox inside three seconds.
   Two layers doing different jobs: a flat tint that guarantees a floor no matter the frame, and a
   left-weighted gradient that buys the copy column extra contrast without flattening the picture
   on the right. Measured against the brightest frame in the loop, not the poster. */
.kf-hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.22) 100%),
      linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.45) 100%);
}

/* z-index keeps the copy clear of the scrim; the media div isolates its own stack so neither the
   video nor the scrim can reach the text. */
.kf-hero__inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1600px; margin-inline: auto;
    padding-inline: 200px; box-sizing: border-box;
}
.kf-hero .kf-rule { display: block; width: 64px; height: 3px; background: var(--kf-yellow); }
.kf-hero .kf-eyebrow { margin-block: 18px 0; font: 500 11px/14px "Roboto", sans-serif;
                       letter-spacing: .13em; color: var(--kf-yellow); }
.kf-hero .kf-display { margin: 22px 0 0; max-width: 620px;
                       font: 700 56px/60px "Roboto Condensed", sans-serif; color: #fff; }
.kf-hero .kf-lede { margin-top: 28px; max-width: 540px;
                    font: 400 17px/27px "Roboto", sans-serif; color: #d3d4d5; }

@media (max-width: 1279px) { .kf-hero__inner { padding-inline: 80px; } }
@media (max-width: 959px) {
    .kf-hero { min-height: 460px; }
    .kf-hero__inner { padding-inline: 40px; }
    .kf-hero .kf-display { font-size: 34px; line-height: 40px; }
}

/* --- thesis -------------------------------------------------------------- */
.kf-thesis { background: #fff; }
.kf-thesis__cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 22px;
}
.kf-thesis__body p { font-size: 17px; line-height: 27px; color: var(--kf-ink-3); }
.kf-thesis__body p + p { margin-top: 24px; }
.kf-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
    margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--kf-line);
}
.kf-stat__big,
.kf-proof__grid .el-title { font-size: 44px; line-height: 50px; }
.kf-stat__small,
.kf-proof__grid .el-content p { font-size: 13px; line-height: 20px; color: var(--kf-mute); margin-top: 8px; }

/* --- history ------------------------------------------------------------- */
.kf-history {
    background: var(--kf-ink);
    /* The band is ink, so the shared rail indicator's default ground (rgba(0,0,0,.12)) is
       invisible on it. Both rails inside this band — the era chips and, below 768, the year
       index — read against white instead. */
    --kf-railbar-ground: rgba(255, 255, 255, 0.16);
    --kf-railbar-thumb: var(--kf-yellow);
}
.kf-history .kf-h2 { margin-block: 12px 14px; }
.kf-eras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.kf-era {
    display: block; text-align: left; padding: 12px 16px; min-height: 56px;
    background: var(--kf-ink-2); border: 0; border-radius: 0; cursor: pointer;
    transition: background-color .15s ease-out;
}
.kf-era:hover { background: var(--kf-ink-3); }
.kf-era[aria-selected="true"] { background: var(--kf-yellow); }
.kf-era__years {
    display: block; font-family: var(--kf-body); font-size: 11px; line-height: 14px;
    letter-spacing: .6px; color: var(--kf-on-dark-mute);
}
.kf-era__name { display: block; font-size: 16px; line-height: 20px; color: #fff; }
.kf-era[aria-selected="true"] .kf-era__years { color: #5B4B00; }
.kf-era[aria-selected="true"] .kf-era__name { color: var(--kf-ink); }

.kf-panel[hidden] { display: none; }
.kf-history__cols { display: grid; grid-template-columns: 420px 1fr; gap: 40px; margin-top: 64px; }

/* Hold one height across all four eras. The index sets the section's height and the eras carry
   6, 3, 3 and 3 years, so without this, switching era collapses the band by ~220px and everything
   below it jumps. --kf-rows is the largest era's row count, published by the builder.
   Only above the m breakpoint: below it the two columns stack and a min-height is dead space. */
@media (min-width: 960px) {
    .kf-history__cols { min-height: calc(var(--kf-rows, 6) * var(--kf-row-pitch, 82px)); }
}

.kf-index { position: relative; }
.kf-index__rail { position: absolute; left: 0; top: 10px; bottom: 34px; width: 2px; background: var(--kf-line-dark); }
.kf-index__fill { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--kf-yellow); transition: height .25s ease-out; }
.kf-year {
    position: relative; display: block; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; padding: 0 0 0 32px; margin-bottom: 38px;
    min-height: 44px;
}
.kf-year__dot {
    position: absolute; left: -4px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--kf-mute); transition: all .12s ease-out;
}
.kf-year.is-selected .kf-year__dot { left: -8px; top: 3px; width: 16px; height: 16px; background: var(--kf-yellow); }
.kf-year__num { display: block; font-size: 17px; line-height: 26px; color: var(--kf-mute); transition: color .12s ease-out; }
.kf-year__label {
    display: block; font-family: var(--kf-body); font-size: 12px; line-height: 16px;
    letter-spacing: .6px; font-weight: 500; color: #58595B; transition: color .12s ease-out;
}
.kf-year:hover .kf-year__num, .kf-year:hover .kf-year__label { color: var(--kf-on-dark-mute); }
.kf-year.is-selected .kf-year__num { font-size: 22px; color: var(--kf-yellow); }
.kf-year.is-selected .kf-year__label { color: #fff; }

/* Both entry forms occupy one grid cell, so the section height is set by the tallest entry in
   the era and selecting a year never reflows the page. */
.kf-entries { display: grid; }
.kf-entry { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .18s ease-out; }
.kf-entry.is-selected { opacity: 1; visibility: visible; }
.kf-entry__year { font-size: 150px; line-height: 140px; color: var(--kf-yellow); margin-top: 30px; }
.kf-entry__meta {
    font-family: var(--kf-body); font-size: 11px; line-height: 14px; letter-spacing: 1.4px;
    font-weight: 500; text-transform: uppercase; color: var(--kf-on-dark-mute); margin-top: 34px;
}
.kf-entry__meta.is-milestone { color: var(--kf-yellow); }
.kf-entry__head { font-size: 40px; line-height: 46px; color: #fff; margin-top: 12px; }
.kf-entry__body { font-size: 17px; line-height: 27px; color: var(--kf-on-dark); margin-top: 24px; max-width: 42em; }

.kf-steps { display: flex; align-items: center; gap: 8px; margin-top: 56px; }
.kf-step {
    width: 44px; height: 44px; border-radius: 30px; border: 0; cursor: pointer;
    background: var(--kf-ink-2); color: #fff; font-size: 18px; line-height: 1;
    transition: background-color .15s ease-out;
}
.kf-step:hover:not(:disabled) { background: var(--kf-ink-3); }
.kf-step:disabled { background: #1E1F20; color: var(--kf-ink-3); cursor: default; }
.kf-steps__count { font-family: var(--kf-body); font-size: 13px; line-height: 20px; color: var(--kf-mute); margin-left: 12px; }

/* --- range --------------------------------------------------------------- */
.kf-range { background: #fff; }
.kf-range .kf-h2 { margin-block: 12px 16px; }
.kf-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.kf-filter {
    min-height: 42px; padding-inline: 22px; border-radius: 30px; cursor: pointer;
    background: none; border: 1px solid #D3D4D5; color: var(--kf-ink-3);
    font-family: var(--kf-body); font-size: 13px; line-height: 18px; font-weight: 500;
    letter-spacing: .4px; text-transform: uppercase;
    transition: background-color .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
.kf-filter:hover { background: #F2F2F2; border-color: #A1A2A4; color: var(--kf-ink); }
.kf-filter.is-active { background: var(--kf-ink); border-color: var(--kf-ink); color: #fff; }
.kf-filter__n { opacity: .7; margin-left: 4px; }

/* SECOND CONSUMER: the press page's range band (.kf-range__grid) is the same component built from
   native Builder elements instead of hand-written markup, so it is aliased onto these rules rather
   than restated in kf-press.css. Change the card here and both pages move together. */
.kf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 44px; }
.kf-card,
.kf-range__grid .el-item {
    display: flex; flex-direction: column;
    position: relative; background: var(--kf-paper);
    /* 4px, matching every other card on the site — the footer brand panel, the Owners promos and
       the Why pillars all sit on 4. The 3px yellow top border is gone: it read as a status stripe
       rather than as part of the card. */
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none; padding-bottom: 24px;
}
.kf-card[hidden] { display: none; }
.kf-card__well { display: block; overflow: hidden; background: var(--kf-slate); aspect-ratio: 16 / 9; }
.kf-card__img,
.kf-range__grid .el-image {
    display: block; width: 100%; height: 100%; object-fit: cover;
    background: var(--kf-slate); transition: transform .2s ease-out;
}
/* Two of the eight are white product renders rather than on-set frames. Cropping them to fill a
   slate well would cut the fixture; letting them keep a white ground and sit inside it reads as a
   deliberate second treatment. Driven by content, not by matching the filename. */
.kf-card[data-light="1"] .kf-card__well { background: #fff; }
.kf-card[data-light="1"] .kf-card__img { background: #fff; object-fit: contain; padding: 10px; }
.kf-card:hover .kf-card__img { transform: scale(1.05); }
.kf-card__tag {
    position: absolute; right: 12px; top: 15px; border-radius: 11px; background: var(--kf-yellow);
    color: var(--kf-ink); font-family: var(--kf-body); font-size: 9px; line-height: 22px;
    letter-spacing: .8px; font-weight: 500; padding-inline: 10px;
}
.kf-card__kicker,
.kf-range__grid .el-meta {
    display: block; padding: 20px 20px 0; font-family: var(--kf-body); font-size: 10px;
    line-height: 14px; letter-spacing: 1.2px; font-weight: 500; text-transform: uppercase;
    color: var(--kf-mute);
}
.kf-card__name,
.kf-range__grid .el-title { display: block; padding: 6px 20px 0; font-size: 22px; line-height: 28px; color: var(--kf-ink); }
.kf-card:hover .kf-card__name { text-decoration: underline; text-decoration-color: var(--kf-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kf-card__copy { display: block; padding: 8px 20px 0; font-family: var(--kf-body); font-size: 13px; line-height: 20px; color: var(--kf-ink-3); }
/* The PADDING belongs to .el-content, never to the paragraph inside it. The two pages feed this
   element differently — About passes plain text, so grid_item emits a bare div; the press release
   passes <p> markup, so there is a paragraph as well. While both carried `padding: 8px 20px 0` the
   press copy inherited it twice and sat 20px right of its own kicker and title. Typography here,
   spacing on the wrapper, and it reads the same whichever way the content arrives. */
.kf-range__grid .el-content p { display: block; margin: 0; padding: 0; font-family: var(--kf-body); font-size: 13px; line-height: 20px; color: var(--kf-ink-3); }

/* --- gained -------------------------------------------------------------- */
.kf-gained { background: var(--kf-yellow); }
.kf-gained .kf-sub { margin-top: 14px; }
.kf-gained__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.kf-gained__rule { display: block; height: 2px; background: var(--kf-ink); margin-bottom: 18px; }
.kf-gained__item p { font-size: 14px; line-height: 21px; color: var(--kf-ink-3); margin-top: 6px; }
.kf-gained .kf-btn { margin-top: 48px; }

/* --- citation ------------------------------------------------------------ */
.kf-citation {
    position: relative;
    background: var(--kf-ink) url("../images/about-citation.jpg") center right / cover no-repeat;
}
/* The quote sits on the left third, where this frame is darkest. The scrim guarantees the
   contrast rather than relying on the crop staying exactly as it is today. */
.kf-citation::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 62%;
    background: linear-gradient(90deg, rgba(22,22,22,.94) 0%, rgba(22,22,22,.82) 55%, rgba(22,22,22,0) 100%);
}
/* Two levels, same reason as the container rule at the top of this file: YOOtheme wraps the band's
   content in `.uk-container > .uk-grid > .uk-width-*`, so the direct-child form silently stopped
   matching, the content lost its stacking context and the scrim above painted straight over the
   quote — white text rendering as grey. */
.kf-citation > .kf-container,
.kf-sec.kf-citation .kf-container { position: relative; }
.kf-quote { font-size: 46px; line-height: 56px; color: #fff; margin-top: 34px; }
.kf-quote__attr {
    font-family: var(--kf-body); font-size: 12px; line-height: 16px; letter-spacing: 1.2px;
    font-weight: 500; color: var(--kf-yellow); margin-top: 30px;
}
.kf-quote__note { font-size: 15px; line-height: 23px; color: var(--kf-on-dark-mute); margin-top: 12px; max-width: 46em; }

/* --- cta + proof --------------------------------------------------------- */
.kf-cta { background: var(--kf-paper); }
.kf-cta__inner { text-align: center; }
.kf-cta .kf-sub { margin-top: 14px; }
.kf-cta__buttons { display: flex; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.kf-cta__divider { border: 0; border-top: 1px solid var(--kf-line); margin: 56px 0 0; }
.kf-proof { font-family: var(--kf-body); font-size: 15px; line-height: 23px; color: var(--kf-ink-3); margin-top: 44px; }
.kf-marks { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.kf-mark {
    display: flex; align-items: center; justify-content: center; width: 170px; height: 64px;
    background: #EFEFEF; font-family: var(--kf-body); font-size: 12px; letter-spacing: 1px;
    font-weight: 500; color: #8A8B8D;
}

/* --- focus --------------------------------------------------------------- */
.kf-era:focus-visible, .kf-year:focus-visible, .kf-step:focus-visible,
.kf-filter:focus-visible, .kf-card:focus-visible, .kf-btn:focus-visible {
    outline: 2px solid currentColor; outline-offset: 3px;
}
.kf-history :is(.kf-era, .kf-year, .kf-step):focus-visible { outline-color: #fff; }

/* --- reflow -------------------------------------------------------------- */
@media (max-width: 1199px) {
    .kf-history__cols { grid-template-columns: 360px 1fr; }
    .kf-entry__year { font-size: 120px; line-height: 112px; }
    /* Four across only from the l breakpoint. Below 1200 the container is too narrow to hold
       them: at 960 a quarter column is 175px, against a 270px design — the name wraps and the
       copy turns into a column of two-word lines. Two-up keeps the card legible instead. */
    .kf-cards { grid-template-columns: repeat(2, 1fr); }
    .kf-eras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 959px) {
    .kf-sec { --kf-pad-lg: 70px; --kf-pad: 40px; }
    .kf-container { padding-inline: 30px; }
    .kf-display { font-size: 40px; line-height: 46px; }
    .kf-h1 { font-size: 32px; line-height: 40px; }
    .kf-h2 { font-size: 28px; line-height: 36px; }
    .kf-quote { font-size: 32px; line-height: 40px; }
    .kf-thesis__cols { grid-template-columns: 1fr; gap: 24px; }
    .kf-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .kf-history__cols { grid-template-columns: 1fr; gap: 48px; }
    .kf-entry__year { font-size: 96px; line-height: 90px; }
    .kf-entry__head { font-size: 30px; line-height: 36px; }
    .kf-cards { gap: 30px; }
    .kf-gained__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 639px) {
    .kf-container { padding-inline: 15px; }
    .kf-display { font-size: 32px; line-height: 38px; }
    .kf-stats { grid-template-columns: 1fr; gap: 24px; }
    .kf-eras { grid-template-columns: 1fr; }
    .kf-cards { grid-template-columns: 1fr; }
    .kf-entry__year { font-size: 72px; line-height: 68px; }
    .kf-marks { gap: 12px; }
    .kf-mark { width: calc(50% - 6px); }
}

@media (prefers-reduced-motion: reduce) {
    .kf-sec *, .kf-sec *::before { transition: none !important; animation: none !important; }
}

/* ---- Marquee on About -------------------------------------------------------
   The marquee follows the CTA band and should read as the same surface continuing, not as a white
   strip pasted underneath it. `--kf-marquee-ground` is why the shared component takes a custom
   property rather than hard-coding white: the edge fades have to be painted FROM the band's own
   background, so re-pointing the ground moves the fades with it in one declaration. */
.kf-sec--cta, .kf-band.kf-cta { background: #f9f9f9; }
.kf-sec.kf-marquee-band { --kf-marquee-ground: #f9f9f9; background-color: #f9f9f9; }

/* ---- mobile fixes -------------------------------------------------------
   From an independent layout review at 375 and 390. These are all cases where a DESKTOP two-column
   rule stayed in force after the layout went single-column. */
@media (max-width: 767px) {
  /* BLOCKING: the citation scrim is a left-hand gradient 62% wide, sized for copy that sat in the
     left column. Stacked, the copy runs the full measure and the last ~125px of every line landed
     on bare sunlit photograph — the note text (#a1a2a4, 15px) was effectively invisible.
     Full-bleed and vertical, so the copy is legible wherever it wraps. */
  .kf-citation::before {
    inset: 0;
    width: auto;
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.86) 0%, rgba(22, 22, 22, 0.94) 100%);
  }

  /* The hero sits on a 40px gutter while every other band is on the container's 15px, so the text
     axis jumped 25px the moment you scrolled past it. One gutter for the page, and 15px is too
     tight for a phone in any case. */
  .kf-hero__inner,
  .kf-container {
    padding-inline: 24px;
  }

  /* Stacked CTAs were 204 and 174 wide with a 2px height difference — the ghost button is
     content-box, so its 1px border added to the height while the solid one had none. Full width
     removes both problems and gives a 44px+ target. */
  .kf-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .kf-cta__buttons > .kf-btn {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The timeline headline and body were touching — .kf-entry__head has a top margin and no bottom
     one, so the only separation was the H3's own line box. */
  .kf-entry__head {
    margin-bottom: 14px;
  }
  /* ...and the attribution and note under the pull-quote had a 0px gap for the same reason. */
  .kf-quote__note {
    margin-top: 16px;
  }

  /* THE RANGE AS A RAIL.
     Stacked, this band ran 3,449px — four and a bit screens of eight identical cards, which nobody
     reads to the end. As a rail it is one gesture and the band collapses to a single card's height.
     Card is 270 wide in a 342 measure, so the next one is always part-visible: that overhang is the
     affordance, which is why the row bleeds to the page edges rather than sitting inside them.
     `scroll-padding-inline` matters — without it the snap aligns to the padding edge and drags the
     first card flush against the screen, out of line with the copy above. */
  .kf-cards {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -24px;
    padding-inline: 24px;
  }
  .kf-cards::-webkit-scrollbar {
    display: none;
  }
  .kf-cards > .kf-card {
    flex: 0 0 270px;
    scroll-snap-align: start;
    /* rounded on the rail — a square card butting against the next reads as a clipped column */
    border-radius: 6px;
    overflow: hidden;
  }

  /* The filter chips wrapped 2 + 1 with ~131px of dead space on the first row. One scrolling row
     instead, and 44px tall so they clear the tap-target floor (they were 42). */
  .kf-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    margin-inline: -24px;
    padding-inline: 24px;
  }
  .kf-filters::-webkit-scrollbar {
    display: none;
  }
  .kf-filter {
    flex: 0 0 auto;
    min-height: 44px;
  }

  /* Four full-width 58px blocks 20px apart read as four cards, not a tab group — and cost ~230px.
     Same treatment: one scrolling row of chips. */
  .kf-eras {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    margin-inline: -24px;
    padding-inline: 24px;
  }
  .kf-eras::-webkit-scrollbar {
    display: none;
  }
  .kf-eras > * {
    flex: 0 0 auto;
  }
}

/* ---- History index: a vertical column below 768 is the wrong shape ---------
   Six years cost 492px stacked — 327px of row for ~50px of ink each — so the entry you are
   meant to be reading starts a screen and a half down. Swiping is available here, so the index
   reads left-to-right like the timeline it represents.

   The track is drawn as a border on each item rather than as the absolutely positioned
   .kf-index__rail: an abspos child of a scroll container is laid out against the PADDING box, so
   a `left:0;right:0` rail would span only the visible width and then scroll away from under the
   items. Per-item borders scroll with the content and stay continuous because the items are
   spaced with padding, not gap. */
/* 959, not 767. The horizontal timeline is the right treatment for tablets as well as phones —
   at 844 the vertical rail was still stacking. 959 is UIkit's @m boundary, so this hands over to
   the desktop layout at exactly the point the rest of the page does. */
@media (max-width: 959px) {
  .kf-index {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* bleed to the bezels so the row reads as continuing past the edge, then put the gutter back
       inside; scroll-padding keeps a snapped item off the very edge */
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
  .kf-index::-webkit-scrollbar {
    display: none;
  }

  /* the vertical rail and its fill are the desktop affordance; the borders below replace them */
  .kf-index__rail {
    display: none;
  }

  .kf-year {
    flex: 0 0 auto;
    width: auto;
    min-width: 128px;
    max-width: 168px;
    scroll-snap-align: start;
    border-top: 2px solid var(--kf-line-dark);
    /* padding, not gap, so the border segments meet and the track reads as one line */
    padding: 18px 20px 0 0;
    margin-bottom: 0;
    min-height: 0;
  }
  .kf-year__dot {
    left: 0;
    top: -5px;
  }
  .kf-year.is-selected {
    border-top-color: var(--kf-yellow);
  }
  .kf-year.is-selected .kf-year__dot {
    left: -4px;
    top: -8px;
  }
  /* Vertical rhythm: the number is the anchor, the label sits under it. Both stay on one line —
     a wrapping label would make the row heights differ and break the track's baseline. */
  .kf-year__num {
    font-size: 19px;
    line-height: 24px;
  }
  .kf-year.is-selected .kf-year__num {
    font-size: 19px;
  }
  .kf-year__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The index and the entry it drives are now stacked bands rather than two columns, so the
     48px column gap reads as a void between a control and its own output. */
  .kf-history__cols {
    gap: 24px;
  }
}

/* ---- the CTA ran into the marquee -----------------------------------------
   Both bands are #f9f9f9 and the marquee is deliberately the same surface continuing, so there is
   no edge between them — which left 96px of empty ground between the CTA's last button and the
   marquee's eyebrow reading as a hole rather than as a section break. An edge would contradict the
   design; less dead space is the fix. */
@media (max-width: 767px) {
  .kf-sec--cta,
  .kf-band.kf-cta {
    padding-bottom: 40px;
  }
}

/* The pull-quote's <br> balances two lines at the design's 60px. At 32px on a phone it forces
   "picture movies are made." onto a 172px orphan line, so the break is dropped and the browser
   balances the wrap instead. The markup keeps it for the desktop composition. */
@media (max-width: 767px) {
  .kf-quote br {
    display: none;
  }
  .kf-quote {
    text-wrap: balance;
  }
}

/* 9px is the smallest type anywhere on the site and it sits on yellow at the top of a card — the
   one label a reader is meant to notice. 11px still fits the design's 22px pill without changing
   its height, since the line-height is stated rather than derived. */
.kf-card__tag {
  font-size: 11px;
}

/* ==========================================================================
   Native-element aliases, added 2026-09-01 for the about-v2 conversion
   --------------------------------------------------------------------------
   Same idea as the `.kf-range__grid` / `.kf-proof__grid` pairs above: map YOOtheme's own element
   classes onto this page's components so a band can be built from real Builder elements instead of
   an HTML blob, without restating the design.

   The hook classes carry NO layout of their own. `.kf-gained__grid` and `.kf-cta__buttons` do —
   they are `display: grid` and `display: flex` — and putting either on a native element makes it
   fight the uk-grid the element renders. These are typography-and-detail only; the element does
   the columns.
   ========================================================================== */

.kf-gained__native .el-item { position: relative; padding-top: 20px; }
/* Redraws .kf-gained__rule, which was a real <span> in the hand-written markup and has nowhere to
   live on a grid item. */
.kf-gained__native .el-item::before {
    content: ""; position: absolute; inset: 0 0 auto 0;
    height: 2px; background: var(--kf-ink);
}
.kf-gained__native .el-title {
    font-family: var(--kf-display); font-size: 15px; line-height: 21px; letter-spacing: .4px;
    text-transform: uppercase; color: var(--kf-ink); margin: 0;
}
.kf-gained__native .el-content p {
    font-size: 14px; line-height: 21px; color: var(--kf-ink-3); margin-top: 6px;
}

/* The CTA pair. `text-align: center` on the container does NOT centre them: YOOtheme's button
   element renders its own `.uk-grid`, which is a flex container, and a flex line ignores the
   parent's text-align. Centre the grid itself. The class the builder puts on the element lands on
   an outer wrapper, not on that grid, so this reaches it through the band instead. */
.kf-cta__inner .uk-grid { justify-content: center; }
.kf-cta__native { justify-content: center; margin-top: 32px; }
@media (max-width: 639px) {
    .kf-cta__native { width: 100%; }
    .kf-cta__native > * { width: 100%; }
    .kf-cta__native .kf-btn {
        box-sizing: border-box; width: 100%; min-height: 52px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* Body copy inside the converted thesis band. `.kf-thesis__body p` cannot match now that the body
   is a native text element rather than a wrapping div, so the class sits on the paragraph itself. */
.kf-thesis__p { font-size: 17px; line-height: 27px; color: var(--kf-ink-3); }
.kf-thesis__p + .kf-thesis__p { margin-top: 24px; }

/* .kf-container on a Builder COLUMN, for bands converted to native elements.
   The bare `.kf-container` rule cannot win here: the column also carries `.uk-width-1-1@m`, which
   sets `max-width: 100%`, and theme.1.css loads after this file — equal specificity, later source,
   UIkit takes it. Three classes beats one, so the measure holds regardless of load order.
   `padding-inline: 40px` is not cosmetic — the original .kf-container is content-box 1200 + 40
   either side = a 1280 box, and the grid gutter alone gives 20, so without it every converted band
   measured 1240 against the unconverted ones' 1280. Measured, not guessed. */
.kf-sec .uk-grid > .kf-container {
    box-sizing: content-box;
    max-width: 1200px;
    margin-inline: auto;
}

/* The padding needs the FULL path. custom.css carries
   `.kf-bleed > .uk-container > .uk-grid > * { padding-left: 0 }` — that is what makes .kf-bleed
   reach the page edges, and at (0,3,1) it outranks the three-class rule above. Four classes takes
   it back, for this one column only, leaving the bleed behaviour intact everywhere else. */
.kf-sec.kf-bleed > .uk-container > .uk-grid > .kf-container {
    padding-inline: 40px;
}

/* The range filter, when the band is a native grid.
   YOOtheme renders its filter as `ul.el-nav > li > a`, not the hand-rolled `button.kf-filter`
   tablist the HTML version carried. Aliasing it here is what lets the element's own filter — with
   its aria wiring, its animation and its keyboard handling — replace initRange() in kf-about.js
   without the pills changing shape. The `.is-active` state is `li.uk-active` in this markup. */
.kf-range__grid + .el-nav,
.kf-sec--range .el-nav {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px;
    list-style: none; padding: 0;
}
.kf-sec--range .el-nav > li { margin: 0; }
.kf-sec--range .el-nav > li > a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding-inline: 22px; border-radius: 30px;
    background: none; border: 1px solid #D3D4D5; color: var(--kf-ink-3);
    font-family: var(--kf-body); font-size: 12px; letter-spacing: 1.1px;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.kf-sec--range .el-nav > li > a:hover {
    background: #F2F2F2; border-color: #A1A2A4; color: var(--kf-ink); text-decoration: none;
}
.kf-sec--range .el-nav > li.uk-active > a {
    background: var(--kf-ink); border-color: var(--kf-ink); color: #fff;
}
@media (max-width: 639px) {
    .kf-sec--range .el-nav {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
    }
    .kf-sec--range .el-nav::-webkit-scrollbar { display: none; }
    .kf-sec--range .el-nav > li { flex: 0 0 auto; }
    .kf-sec--range .el-nav > li > a { min-height: 44px; }
}

/* The card image well, for the native range grid.
   In the hand-written markup the ratio lived on `.kf-card__well`, a wrapping <span> that a grid
   item has no equivalent of — so the alias has to put it on the image itself. `height: auto` is
   load-bearing for the same reason it is on the DEI cards: the `.kf-card__img` alias above sets
   `height: 100%`, and an explicit height always beats `aspect-ratio`, so without resetting it the
   ratio is declared, computes, and does nothing while the image runs to its natural height. */
.kf-range__grid .el-image {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Band grounds, for bands built from native elements
   --------------------------------------------------------------------------
   In the HTML version each band was an inner `<div class="kf-band kf-gained">` with no UIkit
   classes on it, so `.kf-gained { background: yellow }` won trivially. Now that the SECTION is the
   band, it also carries YOOtheme's `.uk-section-default`, which sets `background: #fff` at the same
   single-class specificity — and theme.1.css loads after this file, so UIkit takes it. The yellow
   band went white, the citation photograph disappeared and `.kf-band`'s vertical rhythm was
   overridden by `.uk-section`'s own padding.

   Two classes beats one. This is the same reason the old stylesheet carried `.kf-sec.kf-hero`
   duplicates of its `.kf-hero` rules.
   ========================================================================== */
/* The rhythm goes on the CONTAINER, not the section. These sections are authored with
   `padding: none`, which emits `.uk-padding-remove-vertical` — and that rule is `!important`, so
   nothing on the section itself can restore the spacing. The inner `.kf-band` div used to supply
   it; the container is where that lands now. Paired with `> * > ` for the same reason as the
   measure rules: a section given a background image gains a wrapper. */
.kf-sec.kf-band > .uk-container,
.kf-sec.kf-band > * > .uk-container { padding-block: var(--kf-pad-lg); }
.kf-sec.kf-thesis   { background: #fff; }
.kf-sec.kf-range    { background: #fff; }
.kf-sec.kf-gained   { background: var(--kf-yellow); }
.kf-sec.kf-cta      { background: var(--kf-paper); }
.kf-sec.kf-citation {
    position: relative;
    background: var(--kf-ink) url("../images/about-citation.jpg") center right / cover no-repeat;
}

/* ==========================================================================
   .kf-btn on a native Builder button
   --------------------------------------------------------------------------
   In the HTML bands these were plain `<a class="kf-btn kf-btn--dark">`, so `.kf-btn` won with
   nothing to fight. YOOtheme's button_item renders `<a class="uk-button uk-button-default kf-btn
   kf-btn--dark">`, and `.uk-button` — same single-class specificity, theme.1.css loading later —
   takes back the radius, the height, the padding and the ground. The buttons came out as square
   hairline outlines.

   Pairing each rule with `.uk-button` is exactly what the selector lists above already do for the
   press page (`.kf-sec[class*="kf-press-"] .uk-button`); this generalises it to any native button
   carrying the house classes. Values measured off the reference render, not invented:
   30px radius, 52px min-height, 30px inline padding, 700 15px.
   ========================================================================== */
.uk-button.kf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding-inline: 30px; border-radius: 30px;
    font-family: var(--kf-body, Roboto, Arial, sans-serif); font-size: 15px; line-height: 20px; font-weight: 700;
    letter-spacing: normal; text-transform: uppercase; text-decoration: none;
    border: 0; box-sizing: content-box;
    transition: background-color .15s ease, color .15s ease;
}
.uk-button.kf-btn--primary       { background: var(--kf-yellow, #FED208); color: var(--kf-ink, #161616); }
.uk-button.kf-btn--primary:hover { background: #D9B201;          color: var(--kf-ink, #161616); }
.uk-button.kf-btn--dark          { background: var(--kf-ink, #161616);    color: #fff; }
.uk-button.kf-btn--dark:hover    { background: var(--kf-ink-2, #2B2B2B);  color: #fff; }
.uk-button.kf-btn--ghost {
    background: transparent; color: var(--kf-ink, #161616);
    border: 1px solid var(--kf-ink, #161616);
}
.uk-button.kf-btn--ghost:hover   { background: var(--kf-ink, #161616);    color: #fff; }

/* ==========================================================================
   Native-element typography — measured against kinoflodev.wpengine.com/about-v2/
   --------------------------------------------------------------------------
   Every value below was read off the reference render with getComputedStyle, not estimated. Three
   distinct causes, all from the same conversion:

   1. A native `headline` emits `uk-h6` / `uk-h2` alongside the house class, and theme.1.css loads
      last — so `.kf-eyebrow` and `.kf-quote` lost their size and colour. kf-about.css already
      carries `[class*="uk-h"]` twins for .kf-display/.kf-h1/.kf-h2/.kf-h4; these two were missing
      from that list.
   2. `grid_item` renders `content` as `<div class="el-content">` with RAW TEXT — no <p>. Every
      alias written as `.el-content p` silently matched nothing.
   3. YOOtheme adds `uk-margin-top` to el-title / el-meta / el-content, which doubles up with the
      padding the card and stat aliases already provide.
   ========================================================================== */

/* 1 — headline twins */
.kf-eyebrow[class*="uk-h"] {
    font-family: var(--kf-body, Roboto, Arial, sans-serif); font-size: 11px; line-height: 14px; font-weight: 500;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--kf-mute);
}
/* Size and colour only — .kf-quote is now in the base twin list above, which supplies the
   family, weight, uppercase and `margin: 0`. That margin matters: uk-h2 carries a 20px
   margin-bottom that was pushing the attribution line down. */
.kf-quote[class*="uk-h"] { font-size: 46px; line-height: 56px; color: #fff; }
@media (max-width: 959px) {
    .kf-quote[class*="uk-h"] { font-size: 32px; line-height: 40px; }
}

/* 2 — el-content is a div of raw text, not a paragraph */
.kf-proof__grid .el-content { font-size: 13px; line-height: 20px; color: var(--kf-mute); }
.kf-range__grid .el-content { font-size: 13px; line-height: 20px; color: var(--kf-ink-3);
                              padding: 8px 20px 0; }
.kf-gained__native .el-title   { font-size: 19px; line-height: 26px; letter-spacing: normal;
                                 color: var(--kf-ink, #161616); text-transform: uppercase; }
.kf-gained__native .el-content { font-size: 14px; line-height: 21px; color: var(--kf-ink-3); }

/* 3 — the element's own top margins, where the alias already supplies that spacing as padding.
   `!important` is unavoidable here and is not laziness: YOOtheme emits `uk-margin-top`, which is
   `margin-top: 20px !important`, and the grid element has no option to suppress it — its Margin Top
   field offers xsmall/small/default/medium/large and no "remove". Among !important declarations
   specificity still decides, so a two-class selector beats UIkit's one-class utility whatever the
   load order. */
.kf-range__grid .el-title,
.kf-range__grid .el-meta,
.kf-range__grid .el-content,
.kf-proof__grid .el-title,
.kf-proof__grid .el-content   { margin-top: 0 !important; }
.kf-gained__native .el-title  { margin-top: 0 !important; }
.kf-gained__native .el-content { margin-top: 6px !important; }

/* The standfirst sits 14px under its heading in both bands. */
.kf-sec.kf-gained .kf-sub,
.kf-sec.kf-cta .kf-sub { margin-top: 14px !important; }
.kf-sec.kf-citation .kf-quote { margin-top: 34px !important; }

/* 4 — the body face.
   ONE root cause behind every remaining mismatch: `.kf-band p` (0,1,1) is what actually put
   `--kf-body` on this page's copy, and it outranked the display group (0,1,0) even for names
   listed there — which is why `.kf-stat__big` renders in Roboto, not Roboto Condensed, on the
   reference. Native elements emit `<div class="uk-panel">`, so that rule stopped matching and the
   copy fell back to the theme's Nunito Sans. Naming the aliases directly is what the `<p>`
   selector was standing in for all along.
   `.kf-range__grid .el-title` is deliberately absent: its counterpart `.kf-card__name` is a
   <span>, never matched `.kf-band p`, and correctly keeps the display face. */
.kf-thesis__p,
.kf-sub,
.kf-quote__note,
.kf-proof__grid .el-title,
.kf-proof__grid .el-content,
.kf-range__grid .el-content,
.kf-gained__native .el-content { font-family: var(--kf-body, Roboto, Arial, sans-serif); }

/* 5 — .kf-stats carries the rule-off-the-top that separates the numbers from the copy above.
   Scoped to .kf-thesis, not added to .kf-proof__grid, because that grid is the press page's
   component first and this page is only its second consumer. */
.kf-thesis .kf-proof__grid {
    /* !important only on the margin: YOOtheme emits `uk-margin` on the element and that utility is
       !important, so specificity alone does not reach it. Padding and border need no such help. */
    margin-top: 64px !important; padding-top: 36px; border-top: 1px solid var(--kf-line);
}
/* The row carrying the headline and body: UIkit's stacked-grid margin is 30px, the design's 22. */
.kf-thesis .kf-container > .uk-grid-margin { margin-top: 22px; }

/* 6 — uk-h6 brings a 20px margin-bottom to the eyebrow that the <p> version never had. */
.kf-eyebrow[class*="uk-h"] { margin: 0; }

/* 7 — .kf-gained__grid opens 48px below the standfirst and the button sits 48px below it. The
   native grid gets `uk-margin` instead, which is 20px top AND a 20px bottom that the hand-written
   grid never had — so both gaps were wrong. */
.kf-sec.kf-gained .kf-gained__native { margin-top: 48px !important; margin-bottom: 0 !important; }

/* 8 — equal-height CTA buttons. On the reference the two buttons are direct children of a flex
   .kf-cta__buttons, so the default `stretch` makes the primary match the ghost's 54px (the ghost's
   1px border sits outside its 52px min-height under content-box). The element renders them one
   `.el-item` deep inside a `uk-flex-middle` row, which centres instead of stretching — leaving a
   52px primary beside a 54px ghost. Restore the stretch and let it reach the anchor. */
.kf-cta__native .uk-grid  { align-items: stretch; }
.kf-cta__native .el-item  { display: flex; }

/* Redraws .kf-rule, the 64x3 yellow bar that opens the citation. It was a real <span> in the
   hand-written markup with nowhere to live once the band went native, and it is decoration, not
   content — nothing a non-developer would ever edit. Same technique as .kf-gained__native above.
   The 34px gap is the quote's own margin-top, exactly as on the reference. */
.kf-sec.kf-citation .kf-container::before {
    content: ""; display: block; width: 64px; height: 3px; background: var(--kf-yellow, #FED208);
}

/* =============================================================================
   .kf-lead — the featured-story lead: image beside a panel of copy
   =============================================================================
   Promoted into the design system because a second page now needs it. The home
   page's `.kf-onset__lead` is the original and still carries its own copy of
   these rules in kf-home.css; that file is not loaded anywhere else, so the blog
   archive could not have aliased onto it. Values here are the same measured
   spec — 55.88/44.12 split, 400px media, #f2f2f2 panel at 58/60 padding,
   Roboto Condensed 30/38 title, 16/26 Roboto excerpt, 46px pill.

   When the home page is next touched, point `.kf-onset__lead` at these and
   delete the duplicate. Until then this is the copy that new pages use.
   ============================================================================= */
.kf-lead {
    display: grid;
    grid-template-columns: 55.88% 44.12%;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}
.kf-lead__media { display: block; margin: 0; overflow: hidden; }
.kf-lead__media img {
    width: 100%;
    /* 400 is the DESIGNED height, not a fixed one. The panel beside this only sets
       min-height:400, so a long title or excerpt pushes the row taller and a hard
       400px here left the image short of the card with a strip of page showing under
       it. The media is a stretched grid item, so 100% resolves against the real row
       height; min-height keeps the drawn 400 when the parent height is auto instead. */
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
    /* Cards and images are square on this site; only buttons and pills round. */
    border-radius: 0;
}
.kf-lead__panel {
    background: #f2f2f2;
    min-height: 400px;
    box-sizing: border-box;
    padding: 58px 60px;
    /* Real CMS copy is rarely the exact length the design was drawn to, and
       top-anchoring leaves a dead gap under the button. Centring makes any
       length read as deliberate. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kf-lead__kicker {
    display: block;
    font: 700 11px/13px var(--kf-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kf-mute);
    margin-bottom: 15px;
}
.kf-lead__title {
    display: block;
    font: 700 30px/38px var(--kf-display);
    color: var(--kf-ink, #161616);
    margin: 0 0 15px;
    max-width: 485px;
}
.kf-lead__excerpt {
    display: block;
    font: 400 16px/26px var(--kf-body, Roboto, Arial, sans-serif);
    color: var(--kf-ink-3);
    margin: 0 0 15px;
    max-width: 493px;
}
.kf-lead__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 46px;
    padding: 0 24px;
    border-radius: 30px;
    background: var(--kf-yellow, #FED208);
    color: var(--kf-ink, #161616);
    font: 700 15px/46px var(--kf-display);
    text-decoration: none;
    transition: background-color .18s ease;
}
.kf-lead:hover .kf-lead__cta { background: #E5BD00; }
.kf-lead:focus-visible { outline: 2px solid var(--kf-ink, #161616); outline-offset: 3px; }

@media (max-width: 959px) {
    .kf-lead { grid-template-columns: 1fr; }
    /* Stacked: the media is its own row with no panel to stretch against, so it
       goes back to a set height and must drop the min-height above with it. */
    .kf-lead__media img { height: 280px; min-height: 0; }
    .kf-lead__panel { min-height: 0; padding: 36px 32px 40px; }
}

/* =============================================================================
   .kf-pcard — the product card
   =============================================================================
   Mirrors the products archive card in kf-product-filters.css: a white card with
   a hairline border, a 4:3 media area on --kf-paper with the render CONTAINED
   and padded (product shots are cut out, cropping them looks broken), then the
   type eyebrow and the name inside the card rather than floating under it.

   Promoted here because kf-product-filters.css only loads on the product
   archives; any other page that shows products needs the same card. When those
   archives are next touched, point .product-card at these and delete the copy.
   ============================================================================= */
.kf-pcard { display: block; text-decoration: none; color: inherit; }

/* Square plate, render contained and inset — product shots are cut out on white, so they are
   padded into the card rather than cropped to fill it. */
.kf-pcard__body {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--kf-line);
    border-radius: var(--kf-card-radius);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kf-pcard:hover .kf-pcard__body {
    border-color: var(--kf-ink, #161616);
    box-shadow: 0 6px 16px rgba(6, 1, 61, .06);
}
.kf-pcard__media { position: absolute; inset: 0; display: block; }
.kf-pcard__image {
    position: absolute;
    inset: 9%;
    width: 82%;
    height: 82%;
    object-fit: contain;
    display: block;
}
.kf-pcard__badge {
    position: absolute;
    top: 13px; left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 57px;
    height: 25px;
    border-radius: 12px;
    background: var(--kf-yellow, #FED208);
    color: var(--kf-ink, #161616);
    font: 700 11px/1 var(--kf-body, Roboto, Arial, sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* The name sits BELOW the plate and centred. Inside the card it fought the render for space and
   long names — "Auroris X, 3 x 3 m (10x10ft) – Head, Bag, and Tarp" — blew the card's height out
   and broke the row. */
.kf-pcard__text { display: block; margin-top: 20px; text-align: center; }
.kf-pcard__title {
    display: block;
    font: 700 17px/23px var(--kf-display);
    color: var(--kf-ink, #161616);
}
.kf-pcard:hover .kf-pcard__title { color: var(--kf-ink-2, #2B2B2B); }


/* =============================================================================
   .kf-ctaband — closing CTA: image, horizontal scrim, copy, two buttons
   =============================================================================
   In the design system because three page types now end this way. Buttons come
   from .kf-btn above; nothing about them is restated here.
   ============================================================================= */
.kf-ctaband { position: relative; display: flex; align-items: center; min-height: 300px; overflow: hidden; }
.kf-ctaband__media { position: absolute; inset: 0; background: var(--kf-ink-2, #2B2B2B) center/cover no-repeat; }
.kf-ctaband__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(14,15,16,.96) 0%, rgba(14,15,16,.8) 50%, rgba(14,15,16,.2) 100%);
}
.kf-ctaband__inner {
    position: relative; z-index: 2;
    width: 100%; max-width: min(1200px, 100% - 80px); margin: 0 auto; padding: 76px 0;
}
.kf-ctaband__eyebrow {
    display: block; font-family: var(--kf-body, Roboto, Arial, sans-serif); font-size: 10px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--kf-yellow, #FED208);
}
.kf-ctaband__title {
    font-family: var(--kf-display); font-weight: 700;
    font-size: clamp(26px, 2.6vw, 38px); line-height: 1.18;
    color: #fff; margin: 16px 0 0; max-width: 820px;
}
.kf-ctaband__text { font-size: 14px; color: var(--kf-on-dark); margin: 20px 0 0; max-width: 640px; }
.kf-ctaband__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 28px 0 0; }