/* K Films — v3 design system (dark motorcycle performance, mobile-first) */

:root {
  --kf-black: #050505;
  --kf-surface: #0a0a0a;
  --kf-surface-2: #111111;
  --kf-card: #0d0d0d;
  --kf-card-hover: #121212;
  --kf-border: rgba(255, 255, 255, 0.12);
  --kf-border-strong: rgba(255, 255, 255, 0.28);
  --kf-red-border: rgba(226, 31, 38, 0.6);
  --kf-white: #f5f5f5;
  --kf-silver: #b7b7b7;
  --kf-muted: #777777;
  --kf-red: #e21f26;
  --kf-red-cta: #f1262d;
  --kf-red-hover: var(--kf-red-cta);

  --kf-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --kf-font-body: "Inter", system-ui, -apple-system, sans-serif;

  --kf-track: 0.18em;
  --kf-track-tight: 0.08em;
  --kf-track-btn: 0.03em;

  --kf-gutter: clamp(20px, 4vw, 64px);
  --kf-section-y: clamp(64px, 10vw, 128px);
  --kf-header-h: 72px;
  --kf-radius: 4px;
  --kf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kf-duration: 0.45s;
  --kf-duration-fast: 0.18s;
  --kf-duration-mid: 0.28s;

  /* Minimum comfortable tap target. */
  --kf-tap: 44px;
}

@media (min-width: 1100px) {
  :root { --kf-header-h: 88px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--kf-header-h);
}

body.kfilms {
  margin: 0;
  min-height: 100%;
  background: var(--kf-black);
  color: var(--kf-white);
  font-family: var(--kf-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.kfilms.nav-lock {
  overflow: hidden;
}

/* Any component that sets display beats the user agent's [hidden] rule, so a
   flex row or a grid stays on screen after JavaScript hides it. This is the one
   place in the stylesheet !important is the right answer: hidden means hidden,
   and the alternative is patching it per component and missing one. */
[hidden] {
  display: none !important;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ——— Focus, skip link, motion preference ——— */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kf-red-cta);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--kf-red-cta);
  color: #ffffff;
  font-family: var(--kf-font-display);
  font-weight: 700;
  letter-spacing: var(--kf-track-btn);
  text-transform: uppercase;
  transition: top var(--kf-duration-fast) var(--kf-ease);
}

.skip-link:focus {
  top: 12px;
}

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

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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--kf-font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 0.35em;
  color: var(--kf-white);
  /* Display type this large has a floor it cannot shrink below, so on a 375px
     phone a long enough word is simply wider than the column — "STRAIGHTFORWARD"
     on /pricing was 33px over, and the whole page scrolled sideways because of
     it. Hyphenate where the browser knows how, and break the word where it does
     not. An awkward break costs a moment's reading; a page that slides under the
     thumb costs the rider's patience on the one device most of them arrive on. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Hero scale: ~52–68px on phones, ~80–110px on desktop. */
.h1, h1 { font-size: clamp(3.25rem, 7.5vw, 6.875rem); font-weight: 800; }
.h2, h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 700; }
.h3, h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; }
.h4, h4 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: 0; }
.h5, h5 { font-size: 0.95rem; font-weight: 600; letter-spacing: var(--kf-track); text-transform: uppercase; }
.h6, h6 { font-size: 0.8rem; font-weight: 600; letter-spacing: var(--kf-track); text-transform: uppercase; color: var(--kf-silver); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kf-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-red);
  margin: 0 0 1rem;
}

/* The rule is decoration; the eyebrow text carries the meaning. */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
  background: var(--kf-red);
}

.eyebrow--center {
  justify-content: center;
}

.p,
.p-lg {
  margin: 0 0 1em;
  color: var(--kf-silver);
  max-width: 42rem;
}

.p-lg {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--kf-silver);
}

.p { font-size: 1rem; color: var(--kf-muted); }

.kf-container {
  width: min(1400px, calc(100% - (var(--kf-gutter) * 2)));
  margin-inline: auto;
}

.kf-container--narrow {
  width: min(920px, calc(100% - (var(--kf-gutter) * 2)));
}

/* ——— Buttons ——— */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--kf-tap);
  padding: 0 28px;
  font-family: var(--kf-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--kf-track-btn);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--kf-radius);
  transition: background var(--kf-duration-mid) var(--kf-ease),
    color var(--kf-duration-mid) var(--kf-ease),
    border-color var(--kf-duration-mid) var(--kf-ease);
}

/* The arrow is written into the markup as a span so it can slide on hover
   without the pseudo-element fighting an icon a page might already have. */
.btn .btn-arrow {
  transition: transform var(--kf-duration-mid) var(--kf-ease);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--kf-red-cta);
  color: #ffffff;
  border-color: var(--kf-red-cta);
}

.btn-primary:hover {
  background: var(--kf-red);
  border-color: var(--kf-red);
}

/* Phones: a CTA that spans the column is easier to hit than one that doesn't. */
@media (max-width: 639px) {
  .btn-row .btn { width: 100%; }
}

.btn-ghost {
  background: transparent;
  color: var(--kf-white);
  border-color: var(--kf-border-strong);
}

.btn-ghost:hover {
  border-color: var(--kf-white);
}

.btn-secondary {
  background: transparent;
  color: var(--kf-white);
  border-color: var(--kf-border-strong);
}

.btn-secondary:hover {
  border-color: var(--kf-white);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: var(--kf-tap);
  gap: 10px;
  font-family: var(--kf-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-white);
  transition: color var(--kf-duration) var(--kf-ease);
}

.link-arrow::after {
  content: "→";
  color: var(--kf-red);
  transition: transform var(--kf-duration) var(--kf-ease);
}

.link-arrow:hover {
  color: var(--kf-red);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* A back link points the other way, and the arrow leads rather than trails. */
.link-arrow--back {
  flex-direction: row-reverse;
}

.link-arrow--back::after {
  content: "←";
}

.link-arrow--back:hover::after {
  transform: translateX(-4px);
}

/* ——— Header (logo left, nav centre, location + CTA right) ——— */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--kf-white);
  transition: background var(--kf-duration-mid) var(--kf-ease),
    border-color var(--kf-duration-mid) var(--kf-ease);
  border-bottom: 1px solid transparent;
}

/* The scrim that keeps the nav legible over a photograph. It lives on a
   pseudo-element so it can run past the bar and fade to nothing in open space;
   painted inside the header it has to reach zero at the bar's own edge, and
   that last step from 1/255 to 0 draws a hairline across the hero. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -60px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.78),
    rgba(5, 5, 5, 0.42) 55%,
    rgba(5, 5, 5, 0)
  );
  transition: opacity var(--kf-duration-mid) var(--kf-ease);
}

/* Once the bar is solid the scrim is redundant, and its tail would smear a
   band down the page. */
.site-header.is-solid::before {
  opacity: 0;
}

/* nav.js adds this past the fold so the bar reads against light photography. */
.site-header.is-solid {
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--kf-border);
}

/* Pages without a full-bleed hero start their content below the bar. */
.kf-main-offset {
  padding-top: var(--kf-header-h);
}

.header-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: var(--kf-header-h);
  padding: 0 var(--kf-gutter);
}

.nav-cluster {
  display: none;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
}

.nav-cluster--centre { justify-content: center; }
.nav-cluster--right { justify-content: flex-end; }

@media (min-width: 1100px) {
  .nav-cluster { display: flex; }
  .nav-toggle { display: none; }
}

.nav-cluster a,
.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  /* The bar is only 72–88px tall, so a nav item cannot have the full 44px of
     padding around it. Filling the bar's height is the honest maximum. */
  min-height: var(--kf-tap);
  font-family: var(--kf-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: var(--kf-track-btn);
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.82);
  padding: 6px 0;
  transition: color var(--kf-duration-fast) var(--kf-ease);
}

/* Location indicator — a fact from config, not a link. */
.nav-location {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--kf-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-silver);
  white-space: nowrap;
}

.nav-location::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--kf-red);
}

@media (min-width: 1280px) {
  .nav-location { display: inline-flex; }
}

.nav-cluster a:hover,
.nav-dd-btn:hover,
.nav-cluster a.is-active {
  color: var(--kf-white);
}

.nav-cluster a.is-active {
  box-shadow: inset 0 -2px 0 var(--kf-red);
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  /* The mark is only ~28px tall, but it is the way back to the home page and
     wants a thumb-sized target around it. */
  min-height: var(--kf-tap);
}

.logo img {
  width: auto;
  height: clamp(28px, 3.2vw, 40px);
}

.nav-dd {
  position: relative;
}

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  padding: 12px 0;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nav-dd.open .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dd-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.68rem;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  color: var(--kf-silver);
}

.nav-dd-menu a:hover {
  color: var(--kf-white);
  background: rgba(255, 255, 255, 0.04);
}

.nav-cta {
  min-height: 40px;
  padding: 0 18px;
  margin-left: 8px;
}

.nav-toggle {
  justify-self: end;
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  grid-column: 3;
}

/* Below the base rule on purpose. The desktop breakpoint further up also hides
   this, but it is declared earlier, so on its own it loses to the display above
   and the burger sits under the header bar on every wide screen. */
@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--kf-white);
}

.nav-toggle span:first-child { width: 28px; }

.header-shell .logo {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
}

.header-shell .nav-cluster--centre { grid-column: 2; grid-row: 1; }
.header-shell .nav-cluster--right { grid-column: 3; grid-row: 1; }

@media (max-width: 1099px) {
  .header-shell {
    grid-template-columns: 1fr auto;
  }
  .nav-toggle {
    grid-column: 2;
  }
}

/* Mobile drawer */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 130;
  width: 100%;
  height: 100%;
  background: var(--kf-black);
  border-left: 1px solid var(--kf-border);
  transform: translateX(100%);
  transition: transform 0.4s var(--kf-ease);
  display: flex;
  flex-direction: column;
}

/* Full-screen on phones; a wide panel once there is room beside it. */
@media (min-width: 640px) {
  .nav-panel { width: min(100%, 440px); }
}

.nav-panel.is-open {
  transform: translateX(0);
}

.nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--kf-gutter);
  border-bottom: 1px solid var(--kf-border);
}

.nav-close {
  font-size: 1.75rem;
  line-height: 1;
  width: 44px;
  height: 44px;
}

.nav-panel-body {
  padding: 24px var(--kf-gutter) 48px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-row,
.nav-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--kf-tap);
  padding: 14px 0;
  font-family: var(--kf-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  border-bottom: 1px solid var(--kf-border);
  color: var(--kf-white);
  text-align: left;
}

.nav-row.is-active {
  color: var(--kf-red);
}

.nav-panel-location {
  margin-top: 24px;
  font-family: var(--kf-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-muted);
}

.nav-acc-panel {
  display: none;
  padding: 8px 0 16px;
}

.nav-acc.open .nav-acc-panel {
  display: block;
}

.nav-acc-panel a {
  display: flex;
  align-items: center;
  min-height: var(--kf-tap);
  padding: 8px 0;
  font-size: 0.95rem;
  color: var(--kf-silver);
}

.nav-panel-cta {
  margin-top: 28px;
  width: 100%;
}

/* ——— Shared section furniture ——— */
.kf-section {
  padding: var(--kf-section-y) 0;
}

.kf-section--surface {
  background: var(--kf-surface);
}

.kf-section--hairline {
  border-top: 1px solid var(--kf-border);
}

.kf-section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.kf-section-head--center {
  text-align: center;
}

.kf-section-head--center .p-lg {
  margin-inline: auto;
}

.kf-section-head h2 {
  margin-bottom: 0.25em;
}

/* Head with the heading left and a link parked on the right at desktop. */
.kf-section-head--split {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .kf-section-head--split {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* ——— Hero ——— */
.kf-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: calc(var(--kf-header-h) + 32px) 0 clamp(32px, 6vw, 72px);
  overflow: hidden;
  background: var(--kf-black);
}

.kf-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Two stacked washes: a vertical one for the header and footer edges, and a
   horizontal one so the copy column keeps its contrast over the bike. */
.kf-hero-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.35) 45%, rgba(5, 5, 5, 0.75) 100%),
    linear-gradient(to right, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.55) 45%, rgba(5, 5, 5, 0.1) 100%);
}

/* No width here: this element is also a .kf-container, and anything set on it
   would land after that rule and take the page gutter away. */
.kf-hero-inner {
  position: relative;
  z-index: 1;
}

.kf-hero-copy {
  max-width: 640px;
}

.kf-hero h1 {
  margin-bottom: 0.2em;
}

.kf-hero .p-lg {
  max-width: 34rem;
  color: var(--kf-silver);
}

/* Trust points — a row on desktop, a two-up grid on phones. */
.kf-hero-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(28px, 5vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--kf-border);
}

@media (min-width: 900px) {
  .kf-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 44px);
  }
}

.kf-hero-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--kf-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  color: var(--kf-silver);
}

.kf-hero-trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--kf-red);
  transform: rotate(45deg);
}

/* The fourth trust point is only worth the room on a narrow screen. */
.kf-hero-trust li[data-trust-optional] {
  display: none;
}

@media (max-width: 899px) {
  .kf-hero-trust li[data-trust-optional] {
    display: flex;
  }
}

/* Location panel — desktop only in the hero; phones get it further down. */
.kf-hero-location {
  display: none;
  position: absolute;
  right: var(--kf-gutter);
  bottom: clamp(32px, 6vw, 72px);
  z-index: 1;
  width: min(300px, 30vw);
  padding: 24px;
  background: rgba(10, 10, 10, 0.88);
  border: 1px solid var(--kf-border);
  border-left: 2px solid var(--kf-red);
  border-radius: var(--kf-radius);
  backdrop-filter: blur(6px);
}

@media (min-width: 1100px) {
  .kf-hero-location { display: block; }
}

.kf-hero-location h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5em;
}

.kf-hero-location p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--kf-silver);
}

.kf-hero-location p:last-child {
  margin-bottom: 0;
  color: var(--kf-muted);
}

/* ——— Service cards ——— */
.kf-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 800px) {
  .kf-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.kf-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kf-card);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  transition: background var(--kf-duration-mid) var(--kf-ease),
    border-color var(--kf-duration-mid) var(--kf-ease);
}

.kf-service-card:hover,
.kf-service-card:focus-within {
  background: var(--kf-card-hover);
  border-color: var(--kf-red-border);
}

.kf-service-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--kf-surface);
}

.kf-service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kf-duration) var(--kf-ease);
}

.kf-service-card:hover .kf-service-card-media img {
  transform: scale(1.04);
}

/* Stands in for a photograph the garage has not shot yet, rather than
   borrowing an unrelated image and implying it is our work. */
.kf-service-card-media--drawn {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(226, 31, 38, 0.14), transparent 62%),
    var(--kf-surface);
}

.kf-service-card-media--drawn svg {
  width: min(46%, 190px);
  height: auto;
  fill: none;
  stroke: var(--kf-red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

/* Keeps the card title legible where a photograph runs bright. */
.kf-service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0.05));
}

.kf-service-card-media--drawn::after {
  display: none;
}

.kf-service-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 32px);
}

.kf-service-card-body h3 {
  margin: 0;
}

.kf-service-card-body p {
  margin: 0;
  color: var(--kf-silver);
  font-size: 0.98rem;
}

.kf-service-card-body .link-arrow {
  margin-top: auto;
  padding-top: 8px;
}

/* The whole card is the target; the inner link keeps the accessible name. */
.kf-service-card .kf-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ——— Services page: jump nav + detail rows ——— */
.kf-jump {
  position: sticky;
  top: var(--kf-header-h);
  z-index: 50;
  background: rgba(5, 5, 5, 0.94);
  border-bottom: 1px solid var(--kf-border);
  backdrop-filter: blur(8px);
}

.kf-jump ul {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kf-jump ul::-webkit-scrollbar {
  display: none;
}

.kf-jump a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kf-tap);
  padding: 0 14px;
  white-space: nowrap;
  font-family: var(--kf-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--kf-track-btn);
  text-transform: uppercase;
  color: var(--kf-silver);
  border-bottom: 2px solid transparent;
  transition: color var(--kf-duration-fast) var(--kf-ease),
    border-color var(--kf-duration-fast) var(--kf-ease);
}

.kf-jump a:hover {
  color: var(--kf-white);
  border-bottom-color: var(--kf-red);
}

/* An in-page target that clears the fixed header and the sticky jump nav. */
.kf-anchor {
  display: block;
  position: relative;
  top: calc((var(--kf-header-h) + 60px) * -1);
}

.kf-section[id] {
  scroll-margin-top: calc(var(--kf-header-h) + 60px);
}

.kf-service-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .kf-service-detail {
    grid-template-columns: 1fr 1fr;
  }

  /* Alternate which side the photograph sits on down the page. */
  .kf-service-detail--flip .kf-service-detail-media {
    order: 2;
  }
}

.kf-service-detail-media {
  overflow: hidden;
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-service-detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kf-service-detail-media--drawn {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(226, 31, 38, 0.14), transparent 62%),
    var(--kf-card);
}

.kf-service-detail-media--drawn svg {
  width: min(52%, 260px);
  height: auto;
  fill: none;
  stroke: var(--kf-red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.kf-service-detail-body h2 {
  margin-bottom: 0.25em;
}

.kf-spec {
  margin: 28px 0 0;
  border-top: 1px solid var(--kf-border);
}

.kf-spec dt {
  padding-top: 16px;
  font-family: var(--kf-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-red);
}

.kf-spec dd {
  margin: 6px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kf-border);
  color: var(--kf-silver);
  font-size: 0.97rem;
}

.kf-spec dd a {
  color: var(--kf-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ——— Benefits ——— */
.kf-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: var(--kf-border);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  overflow: hidden;
}

@media (min-width: 640px) {
  .kf-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .kf-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kf-benefit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--kf-card);
}

.kf-benefit svg {
  width: 30px;
  height: 30px;
  stroke: var(--kf-red);
  stroke-width: 1.5;
  fill: none;
}

.kf-benefit h3 {
  margin: 0;
  font-size: 1.15rem;
}

.kf-benefit p {
  margin: 0;
  color: var(--kf-silver);
  font-size: 0.95rem;
}

/* ——— Home gallery strip ——— */
/* Desktop lays five frames side by side; phones swipe through the same list. */
.kf-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.kf-strip::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .kf-strip { grid-auto-columns: 46%; }
}

@media (min-width: 1024px) {
  .kf-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
}

.kf-strip-item {
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  background: var(--kf-surface);
}

.kf-strip-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--kf-duration) var(--kf-ease);
}

.kf-strip-item:hover img {
  transform: scale(1.05);
}

/* Honest labelling: reference and concept frames say so on the frame. */
.kf-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 9px;
  font-family: var(--kf-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-white);
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid var(--kf-red-border);
  border-radius: 2px;
}

.kf-strip-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .kf-strip-dots { display: none; }
}

.kf-strip-dots button {
  width: var(--kf-tap);
  height: var(--kf-tap);
  display: grid;
  place-items: center;
}

.kf-strip-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kf-border-strong);
  transition: background var(--kf-duration-fast) var(--kf-ease),
    transform var(--kf-duration-fast) var(--kf-ease);
}

.kf-strip-dots button[aria-current="true"]::before {
  background: var(--kf-red);
  transform: scale(1.3);
}

/* ——— Process ——— */
.kf-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: kf-step;
}

@media (min-width: 1024px) {
  .kf-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.kf-step {
  position: relative;
  padding: 0 0 32px 44px;
}

@media (min-width: 1024px) {
  .kf-step {
    padding: 28px 0 0;
    border-top: 1px solid var(--kf-border);
  }
}

/* Phones read this as a vertical timeline; the rule is the spine. */
.kf-step::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: var(--kf-border);
}

.kf-step:last-child::before {
  display: none;
}

@media (min-width: 1024px) {
  .kf-step::before { display: none; }
}

.kf-step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  font-family: var(--kf-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kf-red);
  border: 1px solid var(--kf-red-border);
  border-radius: 50%;
  background: var(--kf-black);
}

@media (min-width: 1024px) {
  .kf-step-num {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 14px;
    font-size: 2rem;
    border: 0;
    background: none;
  }
}

.kf-step h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.kf-step p {
  margin: 0;
  color: var(--kf-silver);
  font-size: 0.95rem;
}

/* Lifestyle frame with the craft statement over it. */
.kf-process-media {
  position: relative;
  margin-top: clamp(40px, 6vw, 64px);
  overflow: hidden;
  border-radius: var(--kf-radius);
}

.kf-process-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 768px) {
  .kf-process-media img { aspect-ratio: 21 / 9; }
}

.kf-process-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 4vw, 48px);
  background: linear-gradient(to top, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.15));
}

.kf-process-media-overlay p {
  margin: 0;
  font-family: var(--kf-font-display);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--kf-white);
}

.kf-process-media-overlay span {
  color: var(--kf-red);
}

/* ——— Closing CTA ——— */
.kf-cta {
  padding: var(--kf-section-y) 0;
  background: var(--kf-surface);
  border-top: 1px solid var(--kf-border);
}

.kf-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .kf-cta-grid { grid-template-columns: 1.25fr 1fr; }
}

.kf-cta h2 {
  margin-bottom: 0.25em;
}

.kf-cta-notes {
  display: grid;
  gap: 16px;
}

.kf-cta-note {
  padding: 20px 22px;
  background: var(--kf-card);
  border: 1px solid var(--kf-border);
  border-left: 2px solid var(--kf-red);
  border-radius: var(--kf-radius);
}

.kf-cta-note h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.kf-cta-note p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--kf-silver);
}

/* ——— Local band ——— */
.kf-local-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.kf-local-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kf-tap);
  padding: 0 18px;
  font-family: var(--kf-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--kf-track-btn);
  text-transform: uppercase;
  color: var(--kf-silver);
  background: var(--kf-card);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  transition: color var(--kf-duration-fast) var(--kf-ease),
    border-color var(--kf-duration-fast) var(--kf-ease);
}

.kf-local-links a:hover {
  color: var(--kf-white);
  border-color: var(--kf-red-border);
}

/* ——— Sticky mobile quote bar ——— */
/* Hidden while a form field has focus so it cannot cover the keyboard target. */
.kf-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: block;
  padding: 10px var(--kf-gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 5, 5, 0.95);
  border-top: 1px solid var(--kf-border);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform var(--kf-duration-mid) var(--kf-ease);
}

.kf-sticky-cta.is-in {
  transform: translateY(0);
}

.kf-sticky-cta .btn {
  width: 100%;
}

@media (min-width: 900px) {
  .kf-sticky-cta { display: none; }
}

body.kf-typing .kf-sticky-cta {
  transform: translateY(110%);
}

/* ——— Footer ——— */
.site-footer {
  background: var(--kf-black);
  border-top: 1px solid var(--kf-border);
  padding: clamp(48px, 6vw, 80px) 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: min(1400px, calc(100% - (var(--kf-gutter) * 2)));
  margin: 0 auto 48px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1.3fr 1fr;
  }
}

.footer-links {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

/* A column of 24px links is a column of missed taps on a phone. Each row gets
   a full tap target instead, and the gap goes with it so the spacing does not
   double up. */
.footer-links a {
  display: flex;
  align-items: center;
  min-height: var(--kf-tap);
  font-size: 0.9rem;
  color: var(--kf-muted);
  transition: color var(--kf-duration) var(--kf-ease);
}

.footer-links a:hover {
  color: var(--kf-white);
}

.footer-hours p {
  margin: 0 0 8px;
  color: var(--kf-muted);
  font-size: 0.9rem;
}

.footer-hours a {
  color: var(--kf-silver);
}

.footer-bottom {
  width: min(1400px, calc(100% - (var(--kf-gutter) * 2)));
  margin-inline: auto;
  padding-top: 24px;
  border-top: 1px solid var(--kf-border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--kf-muted);
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kf-tap);
}

.footer-bottom a:hover {
  color: var(--kf-white);
}

.site-footer .form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer .fld input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  color: var(--kf-white);
  font: inherit;
  border-radius: 0;
}

.site-footer .fld input:focus {
  outline: 1px solid var(--kf-red);
  border-color: var(--kf-red);
}

.site-footer .form-note {
  display: none;
  font-size: 0.85rem;
  color: var(--kf-silver);
  margin: 0;
}

/* ——— Page hero (inner pages) ——— */
.page-hero {
  padding: calc(var(--kf-header-h) + clamp(40px, 7vw, 88px)) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--kf-border);
  background: var(--kf-surface);
}

.page-hero .kf-container,
.kf-section .kf-container {
  width: min(1400px, calc(100% - (var(--kf-gutter) * 2)));
  margin-inline: auto;
}

.page-hero h1 {
  margin-bottom: 0.2em;
}

.page-hero .p-lg {
  max-width: 46rem;
  margin-bottom: 0;
}

/* The price a service page leads with. A rider deciding whether to ask for a
   quote wants a number before they want prose, and the range is the honest
   answer — the figure moves with the bike and with how much comes off. */
.kf-hero-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 1.5rem 0 0;
}

.kf-hero-price-amount {
  font-family: var(--kf-font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--kf-white);
}

.kf-hero-price-note {
  font-size: 0.9rem;
  color: var(--kf-silver);
}

/* ——— FAQ accordion ——— */
/* site.js owns the open/closed state and the aria wiring. */
.faq-list {
  border-top: 1px solid var(--kf-border);
}

.faq-item {
  border-bottom: 1px solid var(--kf-border);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: var(--kf-tap);
  padding: 20px 0;
  font-family: var(--kf-font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  color: var(--kf-white);
  transition: color var(--kf-duration-fast) var(--kf-ease);
}

.faq-q:hover {
  color: var(--kf-red);
}

.faq-q .mark {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--kf-red);
}

.faq-a {
  margin: 0;
  padding: 0 0 24px;
  max-width: 62ch;
  color: var(--kf-silver);
}

.faq-item:not(.open) .faq-a {
  display: none;
}

.faq-a a {
  color: var(--kf-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kf-faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 1000px) {
  .kf-faq-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }

  .kf-faq-aside {
    position: sticky;
    top: calc(var(--kf-header-h) + 32px);
  }
}

/* ——— Form fields (shared) ——— */
.fld {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fld > label,
.fld-label {
  font-family: var(--kf-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  color: var(--kf-silver);
}

.fld-hint {
  font-size: 0.82rem;
  color: var(--kf-muted);
}

.fld input,
.fld select,
.fld textarea {
  width: 100%;
  min-height: var(--kf-tap);
  padding: 12px 14px;
  font-family: var(--kf-font-body);
  font-size: 1rem;
  color: var(--kf-white);
  background: var(--kf-black);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  transition: border-color var(--kf-duration-fast) var(--kf-ease);
}

.fld textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.fld input::placeholder,
.fld textarea::placeholder {
  color: var(--kf-muted);
}

.fld input:hover,
.fld select:hover,
.fld textarea:hover {
  border-color: var(--kf-border-strong);
}

.fld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--kf-silver) 50%),
    linear-gradient(135deg, var(--kf-silver) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.kf-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.kf-form .btn {
  align-self: flex-start;
}

/* Written for the state after a FormSubmit redirect back with ?sent=1, which
   site.js reveals; hidden the rest of the time so it never reads as a promise
   the page has not kept. */
.form-note {
  display: none;
  margin: 0;
  font-size: 0.9rem;
  color: var(--kf-red);
}

.form-note.show {
  display: block;
}

/* Errors and status lines that JavaScript writes into. Kept apart from
   .form-note because that one is display:none until a class arrives, which
   would swallow a message whose only signal is the hidden attribute coming
   off. */
.form-alert {
  margin: 0;
  font-size: 0.9rem;
  color: var(--kf-red);
}

.form-alert--muted {
  color: var(--kf-muted);
}

/* A button that has to read as a link, because switching between logging in
   and signing up is a change of mode rather than a change of page. It reads
   like prose but it is not prose — it is the only route to an account on this
   page, so it gets a tap target rather than a text baseline. */
button.linkish {
  display: inline-flex;
  align-items: center;
  min-height: var(--kf-tap);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

button.linkish:hover {
  opacity: 0.85;
}

/* ——— Saved builds ———
   login.js and wrap-studio-garage.js both write this list, so the shape lives
   here rather than on either page. */
.studio-garage-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.studio-garage-empty {
  font-size: 0.85rem;
  color: var(--kf-muted);
}

.studio-garage-card {
  background: var(--kf-black);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.studio-garage-card.is-active {
  border-color: var(--kf-red-border);
}

.studio-garage-card-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: var(--kf-tap);
  padding: 12px 14px;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.studio-garage-card-btn strong {
  font-family: var(--kf-font-display);
  font-size: 0.88rem;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
}

.studio-garage-card-btn span {
  font-size: 0.8rem;
  color: var(--kf-muted);
}

.studio-garage-card-bar {
  height: 2px;
  background: var(--kf-border);
}

.studio-garage-card-bar i {
  display: block;
  height: 100%;
  background: var(--kf-red);
}

/* ——— Generic page furniture ———
   Four shapes the content pages kept reinventing: a copy/aside split, a grid of
   small facts, a bordered card, and a bordered panel to sit a form in. */
.kf-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 900px) {
  .kf-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .kf-split--wide {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.kf-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.kf-tile {
  padding: 18px 20px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-tile h3 {
  margin-bottom: 6px;
  color: var(--kf-muted);
}

.kf-tile p {
  margin: 0;
  font-size: 0.95rem;
}

.kf-panel {
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-panel > h3 {
  margin-bottom: 8px;
}

/* A note that qualifies what is above it, never the main line of a section. */
.kf-note {
  max-width: 52rem;
  margin-top: 24px;
  font-size: 0.92rem;
  color: var(--kf-muted);
}

/* Used by the pages that are one short statement and a way out: 404 and the
   three confirmation pages. */
.kf-centered {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.kf-centered .eyebrow,
.kf-centered .btn-row {
  justify-content: center;
}

.kf-centered .p-lg,
.kf-centered .p {
  margin-inline: auto;
}

.kf-list {
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.95rem;
  color: var(--kf-silver);
}

.kf-list li {
  padding-left: 18px;
  position: relative;
}

.kf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--kf-red);
}

/* A small square label, unlike .kf-tag which is positioned over an image. */
.kf-chip {
  align-self: flex-start;
  padding: 5px 10px;
  font-family: var(--kf-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-silver);
  border: 1px solid var(--kf-border-strong);
}

.kf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}

.kf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--kf-black);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-card h3 {
  margin: 4px 0 0;
  font-size: 1.15rem;
}

.kf-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--kf-silver);
}

/* ——— Price cards ——— */
.kf-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 900px) {
  .kf-price-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kf-price-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-price-card--featured {
  border-color: var(--kf-red-border);
  background: linear-gradient(180deg, rgba(232, 39, 31, 0.07), transparent 45%), var(--kf-surface);
}

.kf-price-card h3 {
  margin: 18px 0 0;
  font-size: 1.35rem;
}

.kf-price-amount {
  margin: 6px 0 0;
  font-family: var(--kf-font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--kf-white);
}

/* Pushes the card's action to the bottom so a row of cards lines up however
   long the copy above happens to run. */
.kf-price-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.kf-price-card .kf-note {
  margin-top: 10px;
}

/* ——— Callout banner ——— */
.kf-banner {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: clamp(24px, 3.5vw, 36px);
  border: 1px solid var(--kf-red-border);
  border-radius: var(--kf-radius);
  background: linear-gradient(120deg, rgba(232, 39, 31, 0.1), transparent 60%), var(--kf-surface);
}

@media (min-width: 900px) {
  .kf-banner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.kf-banner p.p {
  max-width: 46rem;
  margin-bottom: 0;
}

.kf-banner .btn {
  justify-self: start;
}

/* ——— Shop ———
   One card shape covers collections, photoshoot packages, wrap finishes and
   merch, because they are all the same object: a picture, a name, a price and
   a link into the thing. */
.kf-crumbs a {
  color: inherit;
}

.kf-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}

.kf-product-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  overflow: hidden;
  transition: border-color var(--kf-duration-fast) var(--kf-ease),
    transform var(--kf-duration-fast) var(--kf-ease);
}

.kf-product-card:hover,
.kf-product-card:focus-visible {
  border-color: var(--kf-red-border);
  transform: translateY(-3px);
}

.kf-product-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--kf-black);
}

.kf-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A second image in the media box is the alternate shot: it sits on top and
   fades in on hover, so a card with only one image behaves normally. */
.kf-product-media img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--kf-duration) var(--kf-ease);
}

.kf-product-card:hover .kf-product-media img + img {
  opacity: 1;
}

.kf-product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.kf-product-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
}

.kf-product-head h2,
.kf-product-head h3 {
  margin: 0;
  font-size: 1.25rem;
}

.kf-product-price {
  font-family: var(--kf-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--kf-track-tight);
  color: var(--kf-white);
  white-space: nowrap;
}

.kf-product-body p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--kf-silver);
}

.kf-product-colour {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--kf-muted);
}

.kf-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--kf-border-strong);
}

.kf-swatch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--kf-muted);
}

.kf-swatch-row span[style] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--kf-border-strong);
}

.kf-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

.kf-thumb-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}

.kf-colour-card {
  margin: 0;
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
  overflow: hidden;
  background: var(--kf-surface);
}

.kf-colour-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.kf-colour-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  font-size: 0.85rem;
}

.kf-colour-card figcaption span {
  color: var(--kf-muted);
  font-size: 0.78rem;
}

.kf-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px);
}

.kf-mini {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--kf-tap);
  padding: 8px 16px 8px 10px;
  font-family: var(--kf-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  color: var(--kf-silver);
  text-decoration: none;
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

.kf-mini:hover,
.kf-mini:focus-visible {
  color: var(--kf-white);
  border-color: var(--kf-border-strong);
}

.kf-media-frame img {
  width: 100%;
  height: auto;
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}

/* Finish swatches. Drawn rather than photographed so a finish always has a
   swatch, even one with no product shot yet, and so the seven read as one set
   instead of seven different lighting setups. */
.kf-finish {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 2px;
  overflow: hidden;
}

.kf-finish::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, transparent 34%, transparent 66%, rgba(255, 255, 255, 0.1) 100%);
}

.finish-gloss { background: radial-gradient(120% 100% at 30% 12%, #6e6e6e 0%, #1c1c1c 46%, #050505 100%); }
.finish-satin { background: linear-gradient(160deg, #4a4a4a 0%, #262626 48%, #101010 100%); }
.finish-matte { background: linear-gradient(160deg, #2c2c2c 0%, #1e1e1e 52%, #151515 100%); }
.finish-matte::after { opacity: 0.12; }
.finish-metallic { background: linear-gradient(140deg, #9aa0a6 0%, #4c5257 34%, #d0d4d8 52%, #3a3f44 74%, #7e858b 100%); }
.finish-shift { background: linear-gradient(135deg, #7b2ff7 0%, #e8271f 34%, #f2a516 58%, #12b8a6 82%, #2b6ef6 100%); }
.finish-chrome { background: linear-gradient(180deg, #f4f6f8 0%, #9fa7ae 24%, #3d4348 46%, #e6eaee 62%, #7d858c 82%, #cfd5da 100%); }
.finish-textured {
  background:
    repeating-linear-gradient(45deg, #1a1a1a 0 5px, #101010 5px 10px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 5px, transparent 5px 10px);
}

/* ——— Style guide ——— */
.sg-swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin: 24px 0 48px;
}

.sg-swatch {
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font-family: var(--kf-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--kf-border);
}

.sg-table-scroll {
  overflow-x: auto;
  margin: 24px 0 48px;
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sg-table th,
.sg-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kf-border);
}

.sg-table th {
  font-family: var(--kf-font-display);
  font-size: 0.7rem;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-muted);
}

.sg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}

.sg-type-sample {
  margin-bottom: 20px;
}

.sg-token-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 40px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--kf-silver);
}

/* ——— Motion helpers ——— */
/* site.js reveal: a fade and a short lift, no scroll-linked transforms.
   It adds .is-in immediately when motion is reduced or IntersectionObserver
   is missing, so content is never left stranded at opacity 0. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--kf-duration) var(--kf-ease),
    transform var(--kf-duration) var(--kf-ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

.kf-hero,
.kf-page-hero {
  overflow: hidden;
}

.kf-hero-media,
.kf-page-hero > img {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ——— Gallery page ——— */
.kf-page-hero {
  position: relative;
  min-height: clamp(360px, 52vh, 580px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--kf-black);
}

.kf-page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kf-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.25) 55%);
}

.kf-page-hero-copy {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - (var(--kf-gutter) * 2)));
  margin: 0 auto;
  padding: calc(var(--kf-header-h) + 32px) 0 clamp(36px, 5vw, 64px);
}

.kf-page-hero-copy h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  margin: 0 0 0.25em;
}

.kf-gallery-body {
  padding: clamp(40px, 6vw, 72px) 0 var(--kf-section-y);
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.filter-tabs button {
  font-family: var(--kf-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--kf-border);
  background: transparent;
  color: var(--kf-muted);
  cursor: pointer;
  border-radius: 0;
  transition: color var(--kf-duration) var(--kf-ease),
    border-color var(--kf-duration) var(--kf-ease),
    background var(--kf-duration) var(--kf-ease);
}

.filter-tabs button.on,
.filter-tabs button:hover {
  color: var(--kf-white);
  border-color: var(--kf-white);
  background: transparent;
}

.filter-tabs button.on {
  box-shadow: inset 0 -2px 0 var(--kf-red);
  border-color: var(--kf-border-strong);
}

/* Responsive mosaic: CSS columns pack tiles by their OG aspect ratios. */
.masonry {
  column-gap: 10px;
  column-count: 2;
}

@media (min-width: 700px) { .masonry { column-count: 3; column-gap: 12px; } }
@media (min-width: 1100px) { .masonry { column-count: 4; column-gap: 14px; } }

@supports (grid-template-rows: masonry) {
  .masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: masonry;
    gap: 10px;
    column-count: auto;
    column-gap: normal;
  }

  @media (min-width: 700px) {
    .masonry {
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
  }

  @media (min-width: 1100px) {
    .masonry {
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
  }
}

.masonry-item {
  break-inside: avoid;
  margin: 0 0 10px;
}

@media (min-width: 700px) {
  .masonry-item { margin-bottom: 12px; }
}

@media (min-width: 1100px) {
  .masonry-item { margin-bottom: 14px; }
}

@supports (grid-template-rows: masonry) {
  .masonry-item { margin: 0; }
}


.tile {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--kf-border);
  background: var(--kf-surface);
  cursor: pointer;
  overflow: hidden;
  border-radius: 0;
  /* Default to landscape build stills (1920×1280); overridden by --ar / modifiers. */
  aspect-ratio: var(--ar, 3 / 2);
  transition: border-color var(--kf-duration) var(--kf-ease);
}

.tile:hover { border-color: var(--kf-red); }

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s var(--kf-ease);
}

.tile:hover img { transform: scale(1.04); }

.tile:focus-visible {
  outline: 2px solid var(--kf-red);
  outline-offset: 2px;
}

.tile-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--kf-white);
  pointer-events: none;
  z-index: 1;
}

.tile-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--kf-white);
}

.tile.is-video:hover .tile-play {
  background: var(--kf-red);
  border-color: var(--kf-red);
}

.tile-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  font-family: var(--kf-font-display);
  font-size: 0.7rem;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  text-align: left;
  color: var(--kf-white);
  z-index: 1;
}

.tile-meta em {
  font-style: normal;
  color: var(--kf-silver);
  margin-left: 8px;
}

/* Vertical films / portrait stills — use the OG frame, not the thumb crop. */
.masonry-item--reel .tile { aspect-ratio: 9 / 16; }
.masonry-item--portrait .tile { aspect-ratio: 2 / 3; }
.masonry-item--wide .tile { aspect-ratio: 16 / 9; }

.gallery-empty {
  color: var(--kf-muted);
  text-align: center;
  padding: 40px 0;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.94);
}

body.lb-lock { overflow: hidden; }

.lb-stage {
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-media {
  max-width: 92vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lb-embed {
  width: min(92vw, 1100px);
  aspect-ratio: 16 / 9;
  max-height: 84vh;
  border: 0;
  background: #000;
}

.lb-info {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 24px;
  max-height: 40vh;
  overflow-y: auto;
}

.lb-caption {
  text-align: center;
  color: var(--kf-white);
  font-family: var(--kf-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.lb-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 14px auto 0;
  max-width: 760px;
}

.lb-meta-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--kf-border);
}

.lb-meta-label {
  font-family: var(--kf-font-display);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kf-muted);
}

.lb-meta-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kf-white);
}

.lb-close,
.lb-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--kf-border);
  color: var(--kf-white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lb-close:hover,
.lb-nav:hover {
  background: var(--kf-red);
  border-color: var(--kf-red);
}

.lb-close {
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
}

.lb-prev { left: 16px; }
.lb-next { right: 16px; }

@media (max-width: 600px) {
  .lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ——— Lookbook / wraps gallery ——— */
.kf-lookbook-body {
  padding-top: clamp(28px, 4vw, 48px);
}

.kf-lookbook-toolbar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.kf-lookbook-toolbar-head .eyebrow {
  margin-bottom: 8px;
}

.kf-lookbook-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.kf-lookbook-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.kf-lookbook-field--search {
  grid-column: 1 / -1;
}

.kf-lookbook-label {
  font-family: var(--kf-font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
  color: var(--kf-muted);
}

.kf-lookbook-search,
.kf-lookbook-select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  color: var(--kf-white);
  font: inherit;
  font-size: 0.9rem;
  border-radius: 0;
  appearance: none;
}

.kf-lookbook-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a8a' d='M1.4.3 6 4.9 10.6.3 12 1.7 6 7.7 0 1.7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.kf-lookbook-search:focus,
.kf-lookbook-select:focus {
  outline: 1px solid var(--kf-red);
  border-color: var(--kf-red);
}

.kf-lookbook-meta {
  font-size: 0.8rem;
  color: var(--kf-muted);
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  font-family: var(--kf-font-display);
  margin: 0;
}

/* Portrait / phone: always 2 equal square-media tiles */
.kf-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.kf-lookbook-grid > .gallery-empty {
  grid-column: 1 / -1;
}

@media (orientation: portrait) {
  .kf-lookbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .kf-lookbook-controls {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .kf-lookbook-field--search {
    grid-column: auto;
  }

  .kf-lookbook-grid {
    gap: 16px;
  }
}

@media (min-width: 700px) and (orientation: landscape),
  (min-width: 900px) {
  .kf-lookbook-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1100px) {
  .kf-lookbook-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.kf-lookbook-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  color: inherit;
  border: 1px solid var(--kf-border);
  background: var(--kf-surface);
  transition: border-color var(--kf-duration) var(--kf-ease);
}

.kf-lookbook-card:hover { border-color: var(--kf-red); }

.kf-lookbook-card-media {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: #151515;
  flex: 0 0 auto;
}

.kf-lookbook-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s var(--kf-ease);
}

.kf-lookbook-card:hover img { transform: scale(1.04); }

.kf-lookbook-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  /* Fixed footer band so every card shares the same height in a row */
  height: 5.5rem;
  padding: 10px 10px 12px;
  box-sizing: border-box;
}

@media (min-width: 700px) {
  .kf-lookbook-card-body {
    height: 5.75rem;
    padding: 14px;
    gap: 6px;
  }
}

.kf-lookbook-card-body h3 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 700px) {
  .kf-lookbook-card-body h3 {
    font-size: 0.78rem;
    white-space: nowrap;
    display: block;
    -webkit-line-clamp: unset;
    text-overflow: ellipsis;
  }
}

.kf-lookbook-card-body .meta {
  margin: 0;
  font-size: 0.65rem;
  color: var(--kf-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 700px) {
  .kf-lookbook-card-body .meta { font-size: 0.72rem; }
}

.kf-lookbook-card.is-oos {
  opacity: 0.72;
}

.kf-lookbook-card.is-oos .kf-lookbook-card-media img {
  filter: grayscale(0.35);
}

.kf-lookbook-card-foot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  min-height: 1.1rem;
}

.kf-avail {
  font-family: var(--kf-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--kf-track);
  text-transform: uppercase;
}

.kf-avail--in { color: #7dcea0; }
.kf-avail--low { color: #f0c14b; }
.kf-avail--order { color: #8ab4f8; }
.kf-avail--out { color: var(--kf-red); }

.kf-inventory {
  margin-top: var(--kf-section-y);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--kf-border);
}

.kf-inventory .sg-table-scroll { margin-top: 24px; }

.kf-inventory .sg-table td,
.kf-inventory .sg-table th {
  white-space: nowrap;
}

.kf-inventory .sg-table td:nth-child(2) {
  white-space: normal;
  min-width: 200px;
}

/* ——— Film detail (/lookbook/film) ——— */
.kf-film-detail {
  padding-top: calc(var(--kf-header-h) + 40px);
}

.kf-film-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .kf-film-layout {
    grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  }
}

.kf-film-media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
}

.kf-film-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kf-film-copy h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 0.4em;
}

.kf-film-stock-src {
  margin-left: 10px;
  font-size: 0.75rem;
  color: var(--kf-muted);
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  font-family: var(--kf-font-display);
}

.kf-film-block {
  margin: 28px 0;
  padding-top: 20px;
  border-top: 1px solid var(--kf-border);
}

.kf-film-block .p {
  max-width: 40rem;
}

.kf-film-empty {
  max-width: 36rem;
  padding: 24px 0 64px;
}

.kf-film-empty h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover img,
  .kf-lookbook-card:hover img { transform: none; }
}


/* ——— Vinyl catalog (lookbook aliases + Metro categories) ——— */
.kf-vinyl-catalog-body {
  padding-top: 0;
  padding-bottom: var(--kf-section-y, 64px);
}
.kf-vinyl-catalog-toolbar { margin-bottom: 28px; }
.kf-vinyl-catalog-toolbar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 20px 0 16px;
}
.kf-vinyl-catalog-toolbar-head .eyebrow { margin-bottom: 0; }
.kf-vinyl-catalog-controls {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.kf-vinyl-catalog-field { display: flex; flex-direction: column; gap: 6px; }
.kf-vinyl-catalog-field--search { grid-column: 1 / -1; }
.kf-vinyl-catalog-label {
  font-size: 0.65rem;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  color: var(--kf-muted);
}
.kf-vinyl-catalog-search,
.kf-vinyl-catalog-select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  color: var(--kf-white);
  font: inherit;
}
.kf-vinyl-catalog-select { appearance: none; }
.kf-vinyl-catalog-search:focus,
.kf-vinyl-catalog-select:focus {
  outline: 1px solid var(--kf-red);
  border-color: var(--kf-red);
}
.kf-vinyl-catalog-meta { color: var(--kf-silver); font-size: 0.9rem; }
.kf-vinyl-catalog-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
  .kf-vinyl-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .kf-vinyl-catalog-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .kf-vinyl-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kf-vinyl-catalog-controls { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
}

/* Sticky product sub-nav */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kf-vinyl-subnav {
  position: sticky;
  top: var(--kf-header-h);
  z-index: 90;
  background: var(--kf-black);
  border-bottom: 1px solid var(--kf-border);
}
.kf-vinyl-subnav-inner {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.kf-vinyl-subnav-search-label { display: block; }
.kf-vinyl-subnav .kf-vinyl-catalog-search {
  background: rgba(255, 255, 255, 0.04);
}
.kf-vinyl-subnav-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.kf-vinyl-subnav-filters::-webkit-scrollbar { display: none; }
/* A scrolling row of filter chips is the one place on the site where the
   temptation to shrink a control is strongest — every pixel of height buys
   more of the grid below. It is also the row a rider swipes and stabs at
   one-handed, so it holds the tap size and the grid gives up the space. */
.kf-vinyl-filter-btn {
  flex: 0 0 auto;
  min-height: var(--kf-tap);
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--kf-silver);
  font-size: 0.68rem;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.kf-vinyl-filter-btn:hover,
.kf-vinyl-filter-btn[aria-expanded="true"] {
  color: var(--kf-white);
  border-color: rgba(255, 255, 255, 0.45);
}
.kf-vinyl-filter-btn.is-active {
  color: var(--kf-white);
  border-color: var(--kf-red);
  box-shadow: inset 0 -2px 0 var(--kf-red);
}
.kf-vinyl-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0, 0, 0, 0.55);
}
.kf-vinyl-filter-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 16px var(--kf-gutter) 24px;
  background: var(--kf-black);
  border-top: 1px solid var(--kf-border);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
.kf-vinyl-filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.kf-vinyl-filter-panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kf-vinyl-filter-close {
  border: 0;
  background: transparent;
  color: var(--kf-silver);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.kf-vinyl-filter-close:hover { color: var(--kf-white); }
.kf-vinyl-filter-options {
  display: grid;
  gap: 6px;
}
.kf-vinyl-filter-option {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--kf-white);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.kf-vinyl-filter-option:hover {
  border-color: rgba(255, 255, 255, 0.35);
}
.kf-vinyl-filter-option.is-on {
  border-color: var(--kf-red);
  background: rgba(232, 39, 31, 0.1);
}
.kf-vinyl-filter-panel--colour .kf-vinyl-color-hint { margin-top: 0; }
html.kf-vinyl-filter-open {
  overflow: hidden;
}
@media (min-width: 900px) {
  .kf-vinyl-filter-panel {
    left: auto;
    right: max(var(--kf-gutter), calc((100vw - 1400px) / 2 + var(--kf-gutter)));
    bottom: auto;
    top: calc(var(--kf-header-h) + 108px);
    width: min(360px, calc(100vw - 48px));
    max-height: min(60vh, 480px);
    border: 1px solid var(--kf-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
  .kf-vinyl-filter-panel--colour {
    width: min(480px, calc(100vw - 48px));
  }
  .kf-vinyl-filter-backdrop {
    background: rgba(0, 0, 0, 0.35);
  }
}
.kf-vinyl-catalog-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.kf-vinyl-catalog-type {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--kf-border);
  background: transparent;
  color: var(--kf-silver);
  font-size: 0.68rem;
  letter-spacing: var(--kf-track-tight);
  text-transform: uppercase;
  cursor: pointer;
}
.kf-vinyl-catalog-type.is-active,
.kf-vinyl-catalog-type:hover {
  color: var(--kf-white);
  border-color: var(--kf-white);
}
.kf-vinyl-catalog-type.is-active {
  box-shadow: inset 0 -2px 0 var(--kf-red);
}
.kf-founder-banner {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(232, 39, 31, 0.45);
  background: rgba(232, 39, 31, 0.08);
  color: var(--kf-white);
  font-size: 0.88rem;
}
.kf-roll-price {
  color: var(--kf-white);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kf-roll-price-lg {
  margin: 12px 0 18px;
  font-size: 1.05rem;
}
.kf-roll-price-lg strong { color: var(--kf-white); }

/* ---- Vinyl project onboarding (mission flow) -------------------------- */
.kf-project {
  padding: 48px 0 96px;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(232, 39, 31, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
    var(--kf-black);
}
.kf-project-shell {
  display: grid;
  gap: 36px;
}
@media (min-width: 960px) {
  .kf-project-shell {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
  }
}
.kf-project-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 8px 0 12px;
}
.kf-project-lede { max-width: 34ch; color: var(--kf-silver); }
.kf-project-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kf-project-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kf-silver);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.kf-project-steps li.is-active,
.kf-project-steps li.is-done {
  opacity: 1;
  color: var(--kf-white);
}
.kf-project-steps li.is-active .kf-step-num { color: var(--kf-red); }
.kf-step-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.8em;
}
.kf-project-xp { margin-top: 28px; }
.kf-project-xp-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.kf-project-xp-bar > span {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--kf-red), #ff6b45);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.kf-project-xp-label {
  margin: 8px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kf-silver);
}
.kf-project-film-card {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.kf-project-film-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}
.kf-project-film-name { margin: 4px 0; font-weight: 600; }
.kf-project-stage {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.65);
  padding: clamp(20px, 4vw, 40px);
  min-height: 420px;
  animation: kfMissionIn 0.45s ease both;
}
.kf-mission-panel.is-active { animation: kfMissionIn 0.4s ease both; }
@keyframes kfMissionIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.kf-mission-panel h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.kf-mission-actions { margin: 18px 0; }
.kf-mission-field {
  display: grid;
  gap: 6px;
  margin: 14px 0;
}
.kf-mission-field span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kf-silver);
}
.kf-mission-field em { font-style: normal; opacity: 0.6; text-transform: none; letter-spacing: 0; }
.kf-mission-field input,
.kf-mission-field select,
.kf-mission-field textarea {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0a0a0a;
  color: #fff;
  font: inherit;
}
.kf-mission-field textarea { min-height: 96px; resize: vertical; }
.kf-mission-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  align-items: center;
}
.kf-mission-nav--split { justify-content: space-between; }
.kf-mission-cards {
  display: grid;
  gap: 14px;
  margin: 22px 0;
}
@media (min-width: 640px) {
  .kf-mission-cards { grid-template-columns: 1fr 1fr; }
  .kf-mission-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kf-mission-card {
  text-align: left;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.kf-mission-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
.kf-mission-card.is-active {
  border-color: var(--kf-red);
  background: rgba(232, 39, 31, 0.08);
  box-shadow: inset 0 0 0 1px rgba(232, 39, 31, 0.35);
}
.kf-mission-card-kicker {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kf-red);
  margin-bottom: 8px;
}
.kf-mission-card strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.kf-mission-card span:last-child {
  display: block;
  color: var(--kf-silver);
  font-size: 0.92rem;
  line-height: 1.45;
}
.kf-bike-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .kf-bike-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kf-mission-form-grid {
  display: grid;
  gap: 8px 16px;
}
@media (min-width: 720px) {
  .kf-mission-form-grid { grid-template-columns: 1fr 1fr; }
}
.kf-mission-preview {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.kf-mission-preview-inner {
  display: flex;
  gap: 14px;
  align-items: center;
}
.kf-mission-preview-inner img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.kf-quote-board {
  margin-top: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.kf-quote-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kf-quote-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--kf-silver);
  font-size: 0.92rem;
}
.kf-quote-lines strong { color: var(--kf-white); font-weight: 600; }
.kf-quote-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--kf-white) !important;
  font-size: 1.05rem !important;
}

/* Multi-colour build editor */
.kf-build-films {
  display: grid;
  gap: 16px;
  margin: 20px 0 8px;
}
.kf-build-film {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
}
.kf-build-film-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.kf-build-film-swatch {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.kf-build-film-swatch--empty { display: inline-block; }
.kf-build-film-copy { flex: 1; min-width: 0; }
.kf-build-film-copy strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.kf-build-film-remove {
  border: 0;
  background: transparent;
  color: var(--kf-silver);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.kf-build-film-remove:hover { color: var(--kf-red); }
.kf-build-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.kf-build-photo {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  cursor: pointer;
}
.kf-build-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kf-build-photo-add {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: var(--kf-silver);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.kf-build-photo-add:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--kf-white);
}
.kf-build-toast {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(232, 39, 31, 0.35);
  background: rgba(232, 39, 31, 0.08);
  color: var(--kf-white);
  font-size: 0.9rem;
}
.kf-build-toast a { color: var(--kf-white); text-decoration: underline; }
.kf-quote-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.95rem;
}
.kf-quote-lines li.kf-quote-total {
  border-bottom: 0;
  padding-top: 16px;
  font-size: 1.15rem;
}
.kf-project-error {
  color: #ff8a80;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 138, 128, 0.35);
  background: rgba(255, 80, 80, 0.08);
}
.kf-project-banner {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(232, 39, 31, 0.45);
  background: rgba(232, 39, 31, 0.08);
}

.kf-vinyl-catalog-toolbar--simple {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 720px) {
  .kf-vinyl-catalog-toolbar--simple {
    grid-template-columns: 1fr minmax(220px, 320px);
    align-items: end;
  }
}

/* Multi-select colour family chips (inside Colour filter panel) */
.kf-vinyl-color-picker {
  margin-top: 20px;
}
.kf-vinyl-color-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.kf-vinyl-color-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--kf-silver);
}
.kf-vinyl-color-clear {
  border: 0;
  background: transparent;
  color: var(--kf-red);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.kf-vinyl-color-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kf-vinyl-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--kf-white);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kf-vinyl-color-chip:hover {
  border-color: rgba(255, 255, 255, 0.45);
}
.kf-vinyl-color-chip.is-on {
  border-color: var(--kf-red);
  background: rgba(232, 39, 31, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 39, 31, 0.35);
}
.kf-vinyl-color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}