/* Kristers Ansons - component stylesheet. Loads after tokens.css. Prefix: ka- */

:root {
  /* The signature line, matched to the supplied line files: oxblood -> studio-red -> signal-orange -> bone.
     Always dark left, light right. signal-red, apricot and peach are passed through on the way, not stops. */
  --line-signature: linear-gradient(90deg, var(--oxblood) 0%, var(--studio-red) 30%, var(--signal-orange) 68%, var(--bone) 100%);
  /* Vertical variant: light rises - dark at the bottom, light at the top. */
  --line-signature-v: linear-gradient(0deg, var(--oxblood) 0%, var(--studio-red) 30%, var(--signal-orange) 68%, var(--bone) 100%);
  /* CSS stand-in for a glow while the raster asset loads. Bands on some screens - never ship it as final. */
  --glow-fallback: radial-gradient(60% 50% at 85% 85%, var(--peach-light) 0%, var(--signal-orange) 18%, var(--studio-red) 40%, var(--oxblood) 62%, rgba(2, 2, 2, 0) 80%);
  /* Raster assets (override these with your own hosted paths outside this system) */
  --ka-grain: url("../assets/texture/grain-black-384.png");
  --ka-glow-g01: url("../assets/glows/g01-horizon.webp");
  --ka-glow-g02: url("../assets/glows/g02-arc.webp");
  --ka-glow-g03: url("../assets/glows/g03-wash.webp");
  --ka-glow-g04: url("../assets/glows/g04-column.webp");
  --ka-glow-g05: url("../assets/glows/g05-orb.webp");
  /* Card backgrounds - Kristers's own light studies, made for the service cards */
  --ka-card-bg-horizon: url("../assets/card-backgrounds/card-bg-horizon.webp");
  --ka-card-bg-right: url("../assets/card-backgrounds/card-bg-right-light.webp");
  --ka-card-bg-cloud: url("../assets/card-backgrounds/card-bg-cloud.webp");
  --ka-card-bg-diagonal: url("../assets/card-backgrounds/card-bg-diagonal.webp");
  --ka-card-bg-corner: url("../assets/card-backgrounds/card-bg-corner.webp");
  --ka-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}
.ka-surface { background: var(--bg); color: var(--fg-2); font-family: var(--font-body); }
.ka-tnum { font-variant-numeric: tabular-nums; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Grain: a fine black material under everything (dark grounds only) ----------
   The tile is the page's background, not a layer over it - so text and photographs stay clean. */
.ka-grain { position: relative; background: #030303 var(--ka-grain) repeat; background-size: 384px 384px; }
[data-theme="paper"] .ka-grain, .ka-grain[data-theme="paper"] { background: var(--bg); }

/* ---------- Type helpers ---------- */
.ka-h1 { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); margin: 0; }
.ka-h2 { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); margin: 0; }
.ka-h2 b, .ka-h2 strong { font-weight: 700; }
.ka-h2--mixed { font-weight: 300; }
.ka-h3 { font-family: var(--font-mono); font-weight: 500; font-size: 15px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); margin: 0; }
.ka-descriptor { font-family: var(--font-mono); font-weight: 300; font-size: 20px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin: 0; }
.ka-body-l { font-size: 19px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 36em; }
.ka-body { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 40em; }
.ka-caption { font-size: 13px; line-height: 1.5; color: var(--fg-3); margin: 0; }
@media (max-width: 767px) {
  .ka-h1 { font-size: 36px; }
  .ka-h2 { font-size: 28px; }
  .ka-h3 { font-size: 14px; }
  .ka-descriptor { font-size: 14px; line-height: 1.5; }
  .ka-body-l { font-size: 17px; }
}

/* ---------- Lockup (proportions measured from the supplied lockup files) ---------- */
.ka-lockup {
  --ka-size: 36px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--fg);
  text-decoration: none;
  line-height: 1;
}
/* A - the primary lockup: spaced mono KRISTERS over a heavy ANSONS */
.ka-lockup__first {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: max(calc(var(--ka-size) * 0.205), 8px);
  line-height: 0.75;
  letter-spacing: 0.37em;
  margin-right: -0.37em;
  margin-left: calc(var(--ka-size) * 0.133);   /* the logo's indent: KRISTERS starts a little right of the A */
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: calc(var(--ka-size) * 0.15);
}
.ka-lockup__last {
  font-family: var(--font-surname);
  font-weight: 400;
  font-size: var(--ka-size);
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  /* the logo's surname is Anton drawn 17% wider: stretch it, and reserve the extra width so layout stays true */
  display: inline-block;
  transform: scaleX(1.17);
  transform-origin: 0 0;
  margin-right: 0.52em;
}
.ka-square {
  display: inline-block;
  width: 0.1045em;            /* 0.122em once the surname's 1.17 stretch is applied - a true square */
  height: 0.122em;
  margin-left: 0.045em;
  background: var(--accent);
  vertical-align: baseline;
}
/* D - KRISTERS in Oswald: the small-size alternate of A */
.ka-lockup--oswald .ka-lockup__first {
  margin-left: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--ka-size) * 0.26);
  line-height: 0.81;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  margin-bottom: calc(var(--ka-size) * 0.088);
}
/* B - stacked, both names at full weight and size */
.ka-lockup--stacked .ka-lockup__first {
  margin-left: 0;
  font-family: var(--font-surname);
  font-weight: 400;
  font-size: var(--ka-size);
  line-height: 0.86;
  letter-spacing: 0;
  color: var(--fg);
  display: inline-block;
  transform: scaleX(1.17);
  transform-origin: 0 0;
  margin-right: 0.575em;
  margin-bottom: calc(var(--ka-size) * 0.12);
}
/* C - one line */
.ka-lockup--line { flex-direction: row; align-items: baseline; gap: 0.28em; font-size: var(--ka-size); }
.ka-lockup--line .ka-lockup__first {
  font-family: var(--font-surname);
  font-weight: 400;
  font-size: var(--ka-size);
  line-height: 0.86;
  letter-spacing: 0;
  color: var(--fg);
  display: inline-block;
  transform: scaleX(1.17);
  transform-origin: 0 0;
  margin: 0 0.575em 0 0;
}
.ka-lockup--hero { --ka-size: clamp(88px, 13vw, 208px); }
.ka-hero-lockup { display: flex; flex-direction: column; align-items: flex-start; }
.ka-hero-lockup > .ka-line { align-self: stretch; margin-top: calc(var(--ka-size, 208px) * 0.2); }
.ka-hero-lockup > .ka-descriptor { margin-top: calc(var(--ka-size, 208px) * 0.2); }

/* ---------- Lines ---------- */
.ka-line {
  display: block;
  height: var(--stroke-signature);
  background: var(--line-signature);
  border: 0;
  margin: 0;
  transform-origin: left center;
}
.ka-line--to-edge { margin-right: calc(-1 * var(--ka-edge, var(--space-8))); }
.ka-line--draw { animation: ka-draw 600ms ease-out both; }
.ka-divider {
  display: block;
  width: var(--size-divider-short);
  min-width: 48px;
  height: var(--stroke-dash);
  border: 0;
  margin: 0 auto;
  border-radius: var(--radius-divider);
  background: var(--line-signature);
}
.ka-vline {
  display: block;
  width: var(--stroke-dash);
  min-height: 48px;
  align-self: stretch;
  background: var(--line-signature-v);
}
.ka-dash { display: block; width: var(--size-dash); height: var(--stroke-dash); background: var(--accent); border: 0; margin: 0; }
@keyframes ka-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Glow fields (raster, grain baked in) ---------- */
.ka-glow {
  position: relative;
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
}
.ka-glow--g01 { background-image: var(--ka-glow-g01), var(--glow-fallback); background-position: right center; }
.ka-glow--g02 { background-image: var(--ka-glow-g02), var(--glow-fallback); background-position: right bottom; }
.ka-glow--g03 { background-image: var(--ka-glow-g03), var(--glow-fallback); background-position: right bottom; }
.ka-glow--g04 { background-image: var(--ka-glow-g04), var(--glow-fallback); background-position: center top; }
.ka-glow--g05 { background-image: var(--ka-glow-g05), var(--glow-fallback); background-position: center; }
.ka-glow--fallback { background-image: var(--glow-fallback); }
/* Feathered edges: a raster field never shows a hard box edge on the page */
.ka-glow--soft-left { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 35%); mask-image: linear-gradient(to right, transparent 0, #000 35%); }
.ka-glow--soft-y { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%); }
.ka-glow--soft-corner { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 35%), linear-gradient(to bottom, transparent 0, #000 35%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 35%), linear-gradient(to bottom, transparent 0, #000 35%); mask-composite: intersect; }
.ka-glow--soft-under { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 45%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 45%); mask-composite: intersect; }
.ka-glow--fade { animation: ka-fade 1.2s ease-out both; }
@keyframes ka-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Eyebrow + numbered label ---------- */
.ka-eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.ka-eyebrow::before { content: ""; display: block; width: var(--size-dash); height: var(--stroke-dash); background: var(--accent); }
.ka-eyebrow--inline { flex-direction: row; align-items: center; gap: 16px; }
.ka-eyebrow--inline::before { width: 32px; }
.ka-eyebrow--accent { color: var(--accent); }
[data-theme="paper"] .ka-eyebrow--accent { color: var(--fg-2); }

.ka-num {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.ka-num::after { content: ""; display: block; width: var(--size-numeral-rule); height: 1px; background: currentColor; }
.ka-num--lg { font-size: 48px; font-weight: 300; gap: 16px; color: var(--fg); }
.ka-num--lg::after { background: var(--accent); height: 2px; width: 48px; }

/* ---------- Buttons ---------- */
.ka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--size-button);
  padding: 0 28px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ka-ease), border-color 200ms var(--ka-ease), color 200ms var(--ka-ease);
}
.ka-btn svg { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ka-ease); }
.ka-btn:hover svg { transform: translateX(4px); }
.ka-btn--primary {                    /* black core, gradient hairline - no flat orange buttons */
  color: var(--bone);
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(90deg, var(--studio-red), var(--signal-orange) 45%, var(--bone)) border-box;
  border-color: transparent;
}
.ka-btn--primary:hover { box-shadow: 0 0 28px -10px rgba(255, 107, 26, 0.5); }
[data-theme="paper"] .ka-btn--primary { color: var(--ink-soft); background: linear-gradient(var(--bone), var(--bone)) padding-box, linear-gradient(90deg, var(--studio-red), var(--signal-orange) 30%, var(--ink-soft)) border-box; }
.ka-btn--secondary { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.ka-btn--secondary:hover { border-color: var(--accent); }
.ka-btn--compact { height: 44px; padding: 0 20px; font-size: 12px; }
.ka-btn[disabled], .ka-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---------- Text link ---------- */
.ka-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--link);
  text-decoration: none;
}
.ka-link svg { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ka-ease); }
.ka-link:hover { color: var(--accent-hover); }
.ka-link:hover svg { transform: translateX(4px); }
[data-theme="paper"] .ka-link { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
[data-theme="paper"] .ka-link:hover { color: var(--fg); }
[data-theme="paper"] .ka-link svg { color: var(--accent); }

/* ---------- Nav ---------- */
.ka-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px var(--space-8);
  background: rgba(2, 2, 2, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ka-ease);
}
.ka-nav.is-scrolled { border-bottom-color: var(--rule); }
.ka-nav__links { display: flex; gap: 36px; margin: 0 auto; padding: 0; list-style: none; }
.ka-nav__links a { white-space: nowrap; }
@media (max-width: 1320px) { .ka-nav { gap: 24px; } .ka-nav__links { gap: 24px; } }
.ka-nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
}
.ka-nav__link:hover { color: var(--fg); }
.ka-nav__link[aria-current="page"] { color: var(--fg); }
.ka-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.2em;
  bottom: 0;
  height: var(--stroke-dash);
  background: var(--accent);
}
.ka-nav__end { display: flex; align-items: center; gap: 28px; }
.ka-lang { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--fg-3); }
.ka-lang a, .ka-lang button { all: unset; cursor: pointer; color: var(--fg-3); }
.ka-lang [aria-current="true"] { color: var(--fg); }
.ka-lang a:focus-visible, .ka-lang button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ka-nav__menu { display: none; background: none; border: 0; padding: 8px; color: var(--fg); cursor: pointer; }
.ka-nav__menu svg { width: 24px; height: 24px; }
@media (max-width: 960px) {
  .ka-nav { padding: 16px var(--margin-mobile); }
  .ka-nav__links, .ka-nav__end .ka-btn, .ka-nav__end .ka-cta { display: none; }
  .ka-nav__end { margin-left: auto; }
  .ka-nav__menu { display: inline-flex; }
}

/* ---------- Stat row ---------- */
.ka-stats { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.ka-stat { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 var(--space-4); }
.ka-stat:first-child { padding-left: 0; }
.ka-stat + .ka-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--size-stat-rule);
  background: var(--rule);
}
.ka-stat__figure { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: 0.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ka-stat__label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); max-width: 22ch; }
.ka-stats--stacked { flex-direction: column; align-items: stretch; }
.ka-stats--stacked .ka-stat { padding: var(--space-3) 0; }
.ka-stats--stacked .ka-stat + .ka-stat::before { left: 0; right: 0; top: 0; width: auto; height: 1px; transform: none; }
@media (max-width: 767px) {
  .ka-stats { flex-direction: column; align-items: stretch; }
  .ka-stat { padding: var(--space-3) 0; }
  .ka-stat + .ka-stat::before { left: 0; right: 0; top: 0; width: auto; height: 1px; transform: none; }
}

/* ---------- Statement block ---------- */
.ka-statement { display: flex; flex-direction: column; gap: 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; letter-spacing: 0.28em; text-transform: uppercase; }
.ka-statement__lead { color: var(--fg); margin: 0; }
.ka-statement__rest { color: var(--fg-3); margin: 0; }
.ka-statement__lead span, .ka-statement__rest span { display: block; }
.ka-statement::before { content: none; }
.ka-statement .ka-dash { width: 44px; }
.ka-statement--right { text-align: right; align-items: flex-end; }
@media (max-width: 960px) { .ka-statement--desktop { display: none; } }

/* ---------- Service card ---------- */
.ka-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color 300ms var(--ka-ease);
}
.ka-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ka-glow-g03) right bottom / 140% auto no-repeat;
  opacity: 0;
  transition: opacity 600ms var(--ka-ease);
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 100% 100%, #000 0%, transparent 70%);
}
.ka-card:hover, .ka-card:focus-within { border-color: rgba(255, 107, 26, 0.6); }
.ka-card:hover::after, .ka-card:focus-within::after { opacity: 0.35; }
[data-theme="paper"] .ka-card::after { display: none; }
.ka-card .ka-card__icon { width: 32px; height: 32px; display: block; }
.ka-card__body { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ka-card .ka-link { margin-top: auto; padding-top: 8px; }

/* ---------- Quote / closing line ---------- */
.ka-quote { font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: 32px; line-height: 1.25; color: var(--fg); margin: 0; quotes: none; max-width: 22em; }
.ka-quote--display { font-size: 56px; line-height: 1.1; }
@media (max-width: 767px) { .ka-quote { font-size: 26px; } .ka-quote--display { font-size: 38px; } }

/* ---------- Form field ---------- */
.ka-field { display: flex; flex-direction: column; gap: 10px; }
.ka-field__label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-3); }
.ka-field__input {
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  transition: border-color 200ms var(--ka-ease);
}
.ka-field__input::placeholder { color: var(--fg-3); }
.ka-field__input:focus, .ka-field__input:focus-visible, .ka-field.is-focus .ka-field__input { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 11px; }
[data-theme="paper"] .ka-field__input:focus, [data-theme="paper"] .ka-field.is-focus .ka-field__input { border-bottom-color: var(--fg); }
textarea.ka-field__input { resize: vertical; min-height: 112px; }
.ka-field__help { font-size: 13px; line-height: 1.5; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.ka-field__help svg { width: 16px; height: 16px; flex: none; }
.ka-field.is-error .ka-field__input { border-bottom-color: var(--state-error); }
.ka-field.is-error .ka-field__help { color: var(--state-error); }
[data-theme="paper"] .ka-field.is-error .ka-field__input { border-bottom: 2px solid var(--signal-orange); padding-bottom: 11px; }
[data-theme="paper"] .ka-field.is-error .ka-field__help::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--signal-orange); }
.ka-field.is-success .ka-field__help { color: var(--state-success); }
.ka-field.is-success .ka-field__help svg { color: var(--accent); }

/* ---------- Photo frame ---------- */
.ka-photo { position: relative; margin: 0; display: inline-block; }
.ka-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-photo); }
.ka-photo--ticks::after {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  --t: var(--fg-3);
  background:
    linear-gradient(var(--t), var(--t)) left top / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) left top / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) right top / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) right top / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) right bottom / 1px 14px no-repeat;
}
.ka-photo figcaption { margin-top: 14px; font-size: 13px; color: var(--fg-3); }

/* ---------- Footer ---------- */
.ka-footer { display: flex; align-items: center; gap: 32px; padding: 32px var(--space-8); border-top: 0; }   /* no rule: sections fade into each other */
.ka-footer .ka-line { width: 200px; height: var(--stroke-dash); flex: none; }
.ka-footer__tag { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-3); margin: 0 auto 0 0; }
.ka-footer__social { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ka-footer__social a { display: inline-flex; color: var(--accent); }
.ka-footer__social a:hover { color: var(--accent-hover); }
.ka-footer__social svg { width: 22px; height: 22px; }
.ka-footer__legal { font-size: 13px; color: var(--fg-3); }
@media (max-width: 767px) {
  .ka-footer { flex-wrap: wrap; padding: 28px var(--margin-mobile); gap: 20px; }
  .ka-footer__tag { flex-basis: 100%; order: 3; }
}

/* ---------- Icons drawn inline (inherit color) ---------- */
.ka-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); flex: none; }

/* ---------- Reveal motion (Ansons.initMotion) ---------- */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ka-ease), transform 700ms var(--ka-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ka-line--draw, .ka-glow--fade { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ka-btn svg, .ka-link svg, .ka-card, .ka-card::after { transition: none; }
}

/* ---------- Print (PDF) ---------- */
@page { size: A4; margin: 20mm 18mm 20mm 15mm; }
@media print {
  .ka-grain::before { display: none; }
  .ka-line { height: 0.6mm; }
}

/* =====================================================================
   Signature CTAs - 01 trace, 02 solid, 03 underline, 04 halo, 05 split, quiet
   Black core, bone text, light around the edges. One slow motion vocabulary:
   - hover / keyboard focus / .is-hover (demo): an unhurried lift (800ms) + warmer bloom
   - press (:active): settle to 0.98
   - one light move per variant, always travelling dark -> light
   Only transform, opacity and background-position animate (cheap to render).
   ===================================================================== */
@property --ka-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ka-spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.ka-cta {
  --ka-cta-h: var(--size-button);
  --ka-slow: cubic-bezier(0.16, 1, 0.3, 1);            /* long, soft ease-out; no overshoot */
  --ka-bloom-rest: 0 0 0 0 rgba(255, 107, 26, 0);
  --ka-bloom-hover: 0 10px 36px -16px rgba(255, 107, 26, 0.32);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: var(--ka-cta-h);
  padding: 0 32px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--ka-bloom-rest);
  transform: scale(1);
  --ka-line: 2px;                                     /* the gradient border - one step thicker than a hairline */
  transition: transform 600ms linear, box-shadow 600ms linear, border-color 400ms linear, background-color 400ms linear;
}
.ka-cta svg { width: 18px; height: 18px; flex: none; transition: transform 600ms linear; }
.ka-cta:is(:hover, :focus-visible, .is-hover) { transform: scale(1.03); box-shadow: var(--ka-bloom-hover); }
.ka-cta:is(:hover, :focus-visible, .is-hover) svg { transform: translateX(4px); }
.ka-cta:active { transform: scale(0.98); transition-duration: 150ms; }
.ka-cta--lg { --ka-cta-h: 72px; padding: 0 44px; font-size: 15px; gap: 20px; }
.ka-cta--lg svg { width: 22px; height: 22px; }
.ka-cta--compact { --ka-cta-h: 44px; padding: 0 20px; font-size: 12px; gap: 12px; }
.ka-cta--compact svg { width: 16px; height: 16px; }
.ka-cta--compact:is(:hover, :focus-visible, .is-hover) { transform: scale(1.02); }

/* 01 TRACE - gradient hairline border; on hover a comet of light slowly orbits it */
.ka-cta--trace {
  --ka-bloom-rest: 0 0 22px -12px rgba(255, 107, 26, 0.22);
  border-width: var(--ka-line);
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(90deg, var(--studio-red), var(--signal-orange) 45%, var(--bone)) border-box;
}
.ka-cta--trace::before, .ka-cta--quiet::before {
  content: "";
  position: absolute;
  inset: calc(var(--ka-line) * -1);
  z-index: -1;
  padding: calc(var(--ka-line) + 1px);  /* ring thickness: the border plus 1px */
  background: conic-gradient(from var(--ka-angle), transparent 0% 66%, var(--studio-red) 80%, var(--signal-orange) 92%, var(--bone) 99.2%, transparent 100%);
  animation: ka-orbit 3.2s linear infinite;   /* always turning at one speed; hover only fades it in */
  /* keep only the ring: full box minus the content box */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 500ms linear;
  pointer-events: none;
}
.ka-cta--trace:is(:hover, :focus-visible, .is-hover)::before { opacity: 1; }
@keyframes ka-orbit { to { --ka-angle: 360deg; } }

/* 03 UNDERLINE - bone outline sitting on the signature line; on hover a spark runs along it */
.ka-cta--underline { border-color: color-mix(in srgb, var(--bone) 85%, transparent); }
.ka-cta--underline::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  background: var(--line-signature);
  box-shadow: 0 2px 14px rgba(255, 107, 26, 0.35);
  transition: box-shadow 800ms var(--ka-slow);
  pointer-events: none;
}
.ka-cta--underline::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  z-index: 1;
  background: linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58% 100%) 100% 0 / 250% 100% no-repeat;
  opacity: 0;
  transition: opacity 600ms var(--ka-slow);
  pointer-events: none;
}
.ka-cta--underline:is(:hover, :focus-visible, .is-hover)::before { opacity: 1; animation: ka-spark 2.4s linear infinite; }
.ka-cta--underline:is(:hover, :focus-visible, .is-hover)::after { box-shadow: 0 4px 24px rgba(255, 107, 26, 0.6); }
@keyframes ka-spark { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* 04 HALO - black core, the signature light rotating slowly behind it (always on; one per page) */
.ka-cta--halo {
  background: transparent;
  border-color: transparent;
  --ka-bloom-rest: none;
  --ka-bloom-hover: none;
  animation: ka-spin 8s linear infinite;
}
.ka-cta--halo::before,                  /* the soft light behind */
.ka-cta--halo::after {                  /* the crisp rotating line + black core */
  content: "";
  position: absolute;
  pointer-events: none;
  --ka-wheel: conic-gradient(from var(--ka-spin), var(--oxblood) 0%, var(--studio-red) 22%, var(--signal-orange) 40%, var(--bone) 50%, var(--signal-orange) 60%, var(--studio-red) 78%, var(--oxblood) 100%);
}
.ka-cta--halo::before {
  inset: -1px;
  z-index: -2;
  background: var(--ka-wheel);
  filter: blur(10px);
  opacity: 0.22;
  transform: scale(1);
  transition: opacity 600ms linear, transform 600ms linear;
}
.ka-cta--halo::after {
  inset: 0;
  z-index: -1;
  border: var(--ka-line) solid transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--ka-wheel) border-box;
}
.ka-cta--halo:is(:hover, :focus-visible, .is-hover)::before { opacity: 0.4; transform: scale(1.03); }
@keyframes ka-spin { to { --ka-spin: 360deg; } }

/* 05 SPLIT - black label, arrow in a gradient block; on hover the block grows into the label */
.ka-cta--split {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bone) 85%, transparent);
}
.ka-cta__label { padding: 0 36px 0 32px; flex: 1; text-align: center; }
.ka-cta--split .ka-cta__end {
  position: relative;
  align-self: stretch;
  width: calc(var(--ka-cta-h) * 1.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.ka-cta--split .ka-cta__end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--studio-red) 0%, var(--signal-orange) 45%, var(--bone) 100%);
  transform-origin: right center;
  transition: transform 900ms var(--ka-slow);
}
.ka-cta--split:is(:hover, :focus-visible, .is-hover) .ka-cta__end::before { transform: scaleX(1.35); }

/* GHOST - the secondary beside a primary: black core, one plain bone hairline, no light of its own */
.ka-cta--ghost { border: 1px solid color-mix(in srgb, var(--bone) 38%, transparent); --ka-bloom-hover: none; }
.ka-cta--ghost:is(:hover, :focus-visible, .is-hover) { border-color: color-mix(in srgb, var(--bone) 80%, transparent); transform: scale(1.02); }
[data-theme="paper"] .ka-cta--ghost { color: var(--bone); background: var(--ink); border: 3px solid var(--ink); }

/* Compact halo for the header */
.ka-cta--halo.ka-cta--compact { --ka-line: 1.5px; }

/* QUIET - the low-key nav style: hairline that starts red and settles into bone, a faint warm bloom */
.ka-cta--quiet {
  --ka-cta-h: 48px;
  --ka-bloom-rest: 0 0 20px -10px rgba(255, 107, 26, 0.2);
  --ka-bloom-hover: 0 0 28px -10px rgba(255, 107, 26, 0.32);
  padding: 0 24px;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.24em;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(90deg, var(--studio-red) 0%, var(--signal-orange) 12%, var(--bone) 42%) border-box;
  border-width: var(--ka-line);
}
.ka-cta--quiet svg { width: 16px; height: 16px; }
.ka-cta--quiet:is(:hover, :focus-visible, .is-hover) { transform: scale(1.02); }
.ka-cta--quiet::before { animation-duration: 4.5s; }
.ka-cta--quiet:is(:hover, :focus-visible, .is-hover)::before { opacity: 0.7; }

/* Paper (light) grounds: outlines turn ink; no glows on bone */
[data-theme="paper"] .ka-cta { --ka-bloom-rest: none; --ka-bloom-hover: none; }
/* On bone the buttons stay what they are - black core, white text - with the gradient line one step thicker (3px) so it holds against the light ground */
[data-theme="paper"] .ka-cta { --ka-line: 3px; }
[data-theme="paper"] .ka-cta:is(.ka-cta--trace, .ka-cta--underline, .ka-cta--split, .ka-cta--quiet, .ka-cta--halo) { color: var(--bone); background-color: var(--ink); }
[data-theme="paper"] .ka-cta--trace, [data-theme="paper"] .ka-cta--quiet { background: linear-gradient(var(--ink), var(--ink)) padding-box, linear-gradient(90deg, var(--studio-red), var(--signal-orange) 55%, var(--ink)) border-box; --ka-bloom-rest: none; }   /* ends in black, not bone, so the line stays visible on the light ground */
[data-theme="paper"] .ka-cta--underline, [data-theme="paper"] .ka-cta--split { border: 3px solid var(--ink); }
[data-theme="paper"] .ka-cta--halo::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ka-cta, .ka-cta svg, .ka-cta--split .ka-cta__end::before, .ka-cta--halo::before { transition: none; }
  .ka-cta:is(:hover, :focus-visible, .is-hover), .ka-cta:active { transform: none; }
  .ka-cta:is(:hover, :focus-visible, .is-hover) svg { transform: none; }
  .ka-cta, .ka-cta::before, .ka-cta::after { animation: none !important; }
  .ka-cta:is(.ka-cta--trace, .ka-cta--quiet)::before { --ka-angle: 135deg; }
  .ka-cta--halo { --ka-spin: 200deg; }
  .ka-cta--split:is(:hover, :focus-visible, .is-hover) .ka-cta__end::before, .ka-cta--halo:is(:hover, :focus-visible, .is-hover)::before { transform: none; }
}

/* ---------- Copy-led helpers (Website copy section) ---------- */
/* The hero H1: the thesis in ten words or fewer, sitting under the lockup's descriptor */
.ka-thesis { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--fg); margin: 0; max-width: 26em; text-wrap: balance; }
@media (max-width: 767px) { .ka-thesis { font-size: 20px; } }
/* The one factual line under a primary CTA: duration, format, price */
.ka-cta-note { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin: 14px 0 0; }
/* Standing legal lines under the footer */
.ka-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; padding: 16px var(--space-8) 28px; font-size: 12px; line-height: 1.5; color: var(--fg-3); }
.ka-footer-legal p { margin: 0; max-width: 64ch; }
.ka-footer-legal a { color: var(--fg-2); }
@media (max-width: 767px) { .ka-footer-legal { padding: 12px var(--margin-mobile) 24px; } }

/* =====================================================================
   Page layer - pure black with grain, one photograph that sits beside the
   text at the text's height, sections that follow on without big gaps
   ===================================================================== */
/* Section rhythm: 96px between sections on desktop, 64px on phone; no rules between them */
.ka-section { position: relative; padding: var(--space-12) var(--space-8); }
.ka-section + .ka-section { padding-top: 0; }
.ka-section > * { position: relative; z-index: 1; }
/* A thin rule that fades out at both ends - the only divider, used once under the hero */
.ka-fade-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent); }

/* Hero, as in the mockup: the name holds the left 40% of the screen, the photograph the right 60% and runs to the page edge */
.ka-hero { position: relative; display: flex; align-items: flex-start; padding: 144px var(--space-8) 72px; box-sizing: border-box; overflow: hidden; }
.ka-hero__text { position: relative; z-index: 2; width: 46vw; display: flex; flex-direction: column; }
.ka-hero__name { --ka-line-w: calc((46vw - 64px) * 1.017); --ka-size: calc((46vw - 64px) / 3.54 * 0.93); }      /* the signature line spans ~46% of the screen; ANSONS. is a touch shorter, so the line runs just past the dot */
.ka-hero__name .ka-lockup { --ka-size: inherit; }
.ka-hero .ka-hero-lockup > .ka-line { align-self: flex-start; width: var(--ka-line-w, calc(var(--ka-size) * 3.6)); margin-top: calc(var(--ka-size) * 0.16); }   /* runs just past the orange square */
.ka-hero .ka-hero-lockup > .ka-descriptor { margin-top: calc(var(--ka-size) * 0.14); font-size: max(calc(var(--ka-size) * 0.145), 14px); letter-spacing: 0.16em; line-height: 1.35; }   /* smaller caps, wider tracking, as in the reference */
.ka-hero__text .ka-thesis { margin-top: 28px; font-size: 19px; font-weight: 400; line-height: 1.5; color: var(--fg-2); max-width: 27em; }
.ka-hero__acts { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; margin-top: 32px; }
.ka-hero__acts .ka-link { margin-top: 20px; }
.ka-hero .ka-stats { margin-top: 44px; }
.ka-hero__media { position: absolute; top: 56px; right: 0; bottom: 0; width: 62%; z-index: 0; margin: 0; pointer-events: none; }
.ka-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%), linear-gradient(to top, transparent 0%, #000 14%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 28%), linear-gradient(to top, transparent 0%, #000 14%, #000 92%, transparent 100%);
  mask-composite: intersect; }

/* The small header mark: the surname alone, shown only once the hero's big ANSONS. has scrolled away (Ansons.initNav) */
.ka-nav__brand { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 400ms linear, transform 400ms linear; }
.ka-nav.is-brand-shown .ka-nav__brand { opacity: 1; transform: none; pointer-events: auto; }
/* the header's CTA arrives with the mark - never two identical buttons on screen at once */
.ka-nav--reveal .ka-nav__end .ka-cta { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 400ms linear, transform 400ms linear; }
.ka-nav--reveal.is-brand-shown .ka-nav__end .ka-cta { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ka-nav__brand { transition: none; } }

/* Column portrait (subpages): fills its grid cell, so it matches the text height; edges fade into the black */
.ka-portrait { position: relative; margin: 0; min-height: 0; isolation: isolate; }
.ka-portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%), linear-gradient(to top, transparent 0%, #000 20%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%), linear-gradient(to top, transparent 0%, #000 20%, #000 92%, transparent 100%);
  mask-composite: intersect; }
/* Optional light BEHIND the person: a glow study under the photo; the photo is lighten-blended, so the glow
   only shows where the picture is black (the background around him), never over his face or body */
.ka-portrait--glow::before { content: ""; position: absolute; inset: 0 0 20% 12%; z-index: -1; background: radial-gradient(42% 46% at 58% 40%, rgba(214, 58, 28, 0.34) 0%, rgba(122, 22, 18, 0.18) 45%, rgba(2, 2, 2, 0) 75%); pointer-events: none; }
.ka-portrait--glow img { mix-blend-mode: lighten; }

/* Two columns that share one section (steps beside receipts) */
.ka-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) 96px; align-items: start; }

/* Each card carries its own glow study, low, at a different edge - so no two cards read the same */
.ka-card--g01::after { background: var(--ka-glow-g01) center 135% / 220% auto no-repeat; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 55%); mask-image: linear-gradient(to top, #000 0%, transparent 55%); opacity: 0.35; }
.ka-card--g02::after { background: var(--ka-glow-g02) right -8% bottom -22% / 80% auto no-repeat; -webkit-mask-image: radial-gradient(90% 90% at 100% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(90% 90% at 100% 100%, #000 0%, transparent 70%); opacity: 0.35; }
.ka-card--g04::after { background: var(--ka-glow-g04) 88% top / 45% auto no-repeat; -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%); mask-image: linear-gradient(to left, #000 0%, transparent 60%); opacity: 0.35; }
.ka-card:is(.ka-card--g01, .ka-card--g02, .ka-card--g04):is(:hover, :focus-within)::after { opacity: 0.6; }

/* Card backgrounds: one of Kristers's light studies fills the card (cover); it brightens a little on hover.
   One per card, never the same one twice in a row. */
/* low-key: the images are pre-darkened and balanced to one brightness; a soft scrim keeps the text zone (top and left) quiet */
.ka-card[class*="ka-card--bg-"]::after { background-image: linear-gradient(170deg, rgba(3, 3, 3, 0.62) 0%, rgba(3, 3, 3, 0.35) 45%, rgba(3, 3, 3, 0) 80%), var(--ka-card-bg); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat; -webkit-mask-image: none; mask-image: none; opacity: 0.85; transition: opacity 500ms linear; }
.ka-card[class*="ka-card--bg-"]:is(:hover, :focus-within, .is-hover)::after { opacity: 1; }
.ka-card--bg-horizon { --ka-card-bg: var(--ka-card-bg-horizon); }
.ka-card.ka-card--bg-horizon::after { background-position: center, center top; background-size: cover, auto 135%; }   /* keeps the bright horizon below the text */
.ka-card--bg-right { --ka-card-bg: var(--ka-card-bg-right); }
.ka-card--bg-cloud { --ka-card-bg: var(--ka-card-bg-cloud); }
.ka-card--bg-diagonal { --ka-card-bg: var(--ka-card-bg-diagonal); }
.ka-card--bg-corner { --ka-card-bg: var(--ka-card-bg-corner); }

/* Warm card: the service / pillar card with its light already on, low */
.ka-card--warm::after { opacity: 0.18; }
.ka-card--warm:hover::after, .ka-card--warm:focus-within::after { opacity: 0.4; }

/* Receipts list: one fact per line, figure left, label right */
.ka-receipts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ka-receipts li { display: grid; grid-template-columns: 9ch 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.ka-receipts b { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.ka-receipts span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); line-height: 1.5; }

/* Service card: black, icon beside the title, its own low glow; on hover it grows a little, at one speed */
.ka-card--service { display: grid; grid-template-columns: 68px 1fr; gap: 8px 22px; align-items: start; padding: 32px 28px 30px; background: #030303 var(--ka-grain) repeat; background-size: 384px 384px; transform: scale(1); transition: transform 500ms linear, border-color 400ms linear; }
.ka-card--service .ka-card__icon { grid-row: span 2; width: 68px; height: 68px; margin-top: -14px; object-fit: contain; mix-blend-mode: screen; }   /* the icon images are drawn on black: screen drops the black */
.ka-card--service .ka-card__body { -webkit-line-clamp: unset; display: block; }
.ka-card--service:is(:hover, :focus-within, .is-hover) { transform: scale(1.025); border-color: rgba(255, 107, 26, 0.45); }
.ka-card--service::after { transition: opacity 500ms linear; }
.ka-card--service:is(.ka-card--g01, .ka-card--g02, .ka-card--g04)::after { opacity: 0.55; }
.ka-card--service:is(.ka-card--g01, .ka-card--g02, .ka-card--g04):is(:hover, :focus-within, .is-hover)::after { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .ka-card--service, .ka-card--service:is(:hover, :focus-within) { transform: none; transition: none; } }

/* Hero statement: the short vertical text on the portrait's dark side, as in the mockup */
.ka-hero__statement { position: absolute; top: 24%; right: var(--space-8); z-index: 2; text-shadow: 0 0 14px rgba(2, 2, 2, 0.9), 0 0 3px rgba(2, 2, 2, 0.8); }
.ka-hero__statement .ka-statement__rest { color: var(--fg-2); }

/* Compact proof row for the hero: smaller figures, so words (IRONMAN · HYROX) fit as well as numbers */
.ka-stats--compact .ka-stat__figure { font-size: 28px; letter-spacing: 0.02em; }
.ka-stats--compact .ka-stat { gap: 8px; }
.ka-stats--compact .ka-stat__label { font-size: 11px; max-width: none; white-space: nowrap; }
.ka-stats--compact .ka-stat__figure { white-space: nowrap; }
@media (max-width: 1320px) { .ka-hero__statement { display: none; } }

/* Laptop heights (MacBook Air 13" is about 1470 x 956 CSS px): keep the hero inside one screen */
@media (max-height: 820px) and (min-width: 961px) { .ka-hero { padding-top: 120px; } .ka-hero .ka-stats { margin-top: 32px; } .ka-hero__acts { margin-top: 24px; } }
/* Tablet and phone: the portrait goes on top as a short band (4:3), the text follows under its faded edge */
@media (max-width: 960px) {
  .ka-section { padding: var(--space-8) var(--margin-mobile); }
  .ka-section + .ka-section { padding-top: 0; }
  .ka-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 60px var(--margin-mobile) var(--space-6); }
  .ka-hero__media { position: relative; top: 0; order: -1; width: auto; aspect-ratio: 1 / 1.02; margin: 0 calc(var(--margin-mobile) * -1); }
  .ka-hero__media img { object-position: 42% 30%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 38%); mask-image: linear-gradient(to top, transparent 0%, #000 38%); -webkit-mask-composite: source-over; mask-composite: add; }
  .ka-hero__text { width: auto; margin-top: -84px; }
  .ka-hero__name { --ka-line-w: calc(100vw - 40px); --ka-size: calc((100vw - 40px) / 3.54 * 0.93); }
  .ka-hero .ka-hero-lockup > .ka-descriptor { font-size: calc(var(--ka-size) * 0.185); letter-spacing: 0.1em; }
  .ka-hero__text .ka-thesis { font-size: 14.5px; line-height: 1.55; margin-top: 20px; }
  .ka-portrait { order: -1; aspect-ratio: 4 / 3; margin: 0 calc(var(--margin-mobile) * -1); }
  .ka-portrait img { object-position: 55% 22%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 35%), linear-gradient(to right, transparent 0%, #000 8%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0%, #000 35%), linear-gradient(to right, transparent 0%, #000 8%); mask-composite: intersect; }
  .ka-cta--lg { --ka-cta-h: 60px; padding: 0 24px; font-size: 13px; gap: 14px; }
  .ka-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .ka-hero__statement { display: none; }
  .ka-sep { display: none; }
  .ka-stats--compact .ka-stat__figure, .ka-stats--compact .ka-stat__label { white-space: normal; }
  .ka-card--service { padding: 24px 20px; }
  .ka-card--service:is(:hover, :focus-within) { transform: none; }
  .ka-receipts li { grid-template-columns: 7ch 1fr; gap: 16px; padding: 14px 0; }
  .ka-receipts b { font-size: 22px; }
}