/* ==========================================
   KENSTACK — Site design system (multi-page)
   Loaded last; builds on tokens from style.css
   White is the primary canvas; black is reserved
   for highlight bands (hero, stats, CTA).
   ========================================== */

:root {
  --ks-ink: #0a0a0a;
  --ks-ink-2: #121212;
  --ks-soft: #fafafa;
  --ks-line: rgba(0, 0, 0, 0.08);
  --ks-line-dark: rgba(255, 255, 255, 0.09);
  --ks-muted: #5f6470;
  --ks-gold: #D4AF37;
  --ks-gold-deep: #b8960c;
  --ks-gold-soft: rgba(212, 175, 55, 0.12);
  --ks-radius: 20px;
  --ks-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ks-header-h: 76px;
}

/* ==========================================
   HEADER — shared tweaks
   ========================================== */
.logo-tagline {
  font-size: 12px;
  color: var(--ks-muted);
  letter-spacing: 0.01em;
}

.kn-nav { display: none; }

.kn-cta i { font-size: 0.72rem; transition: transform 0.3s ease; }
.kn-cta:hover i { transform: translateX(3px); }

.sm-panel-item.is-active { color: var(--ks-gold); }

/* ==========================================
   HEADER — desktop top navbar (>=1025px)
   ========================================== */
@media (min-width: 1025px) {
  .kn-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    padding: 14px 40px;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: top 0.5s var(--ks-ease), width 0.5s var(--ks-ease), padding 0.5s var(--ks-ease),
      border-radius 0.5s var(--ks-ease), box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
  }

  .kn-header.scrolled,
  .kn-header.is-floating {
    top: 12px;
    width: min(1280px, calc(100% - 40px));
    padding: 8px 10px 8px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ks-line);
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.18);
  }

  .kn-header .sm-logo { justify-self: start; }
  .kn-header .sm-logo-img { height: 38px; }
  .kn-header .sm-logo-text { font-size: 1.12rem; letter-spacing: -0.02em; }

  .kn-nav { display: block; }

  .kn-nav-track {
    position: relative;
    padding: 4px;
    border-radius: 999px;
    background: #f3f3f4;
    border: 1px solid var(--ks-line);
  }

  .kn-nav-list {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .kn-nav-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    opacity: 0;
    border-radius: 999px;
    background: var(--ks-ink);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(212, 175, 55, 0.55);
    transition: transform 0.45s var(--ks-ease), width 0.45s var(--ks-ease), opacity 0.3s ease;
    pointer-events: none;
  }

  .kn-nav-link {
    display: block;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: #52525b;
    white-space: nowrap;
    transition: color 0.3s ease;
  }

  .kn-nav-link:hover { color: var(--ks-ink); }
  .kn-nav-link.is-lit,
  .kn-nav-link.is-lit:hover { color: #fff; }

  /* No-JS fallback: show active state without the sliding thumb */
  .kn-nav-track:not(.is-ready) .kn-nav-link.is-active {
    background: var(--ks-ink);
    color: #fff;
  }

  .kn-nav-link:focus-visible {
    outline: 2px solid var(--ks-gold);
    outline-offset: 2px;
  }

  .kn-header .sm-header-right { justify-self: end; }

  .kn-cta {
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ks-gold), var(--ks-gold-deep));
    color: #0a0a0a;
    box-shadow: 0 6px 20px -6px rgba(212, 175, 55, 0.7);
  }

  .kn-cta:hover {
    background: linear-gradient(135deg, #e2c04a, var(--ks-gold));
    box-shadow: 0 10px 28px -8px rgba(212, 175, 55, 0.85);
  }

  /* Staggered menu is mobile-only now */
  .kn-header .sm-toggle,
  .staggered-menu-panel,
  .sm-prelayers,
  .sm-overlay { display: none !important; }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .kn-header .logo-content { display: none; }
  .kn-nav-link { padding: 9px 13px; font-size: 0.85rem; }
}

@media (max-width: 1024px) {
  .logo-tagline { font-size: 11px; }
}

@media (max-width: 480px) {
  .logo-tagline { display: none; }
}

/* ==========================================
   LAYOUT PRIMITIVES
   ========================================== */
.ks-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.ks-section {
  position: relative;
  padding: 110px 0;
  background: #fff;
}

.ks-section--soft { background: var(--ks-soft); }

.ks-section--dark {
  background: var(--ks-ink);
  color: #fff;
  overflow: hidden;
}

.ks-section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.ks-section--dark > * { position: relative; }
.ks-section--dark p { color: rgba(255, 255, 255, 0.62); }

.ks-head {
  max-width: 760px;
  margin-bottom: 56px;
}

.ks-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ks-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: end;
}

.ks-h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ks-ink);
}

.ks-section--dark .ks-h2 { color: #fff; }

.ks-gold { color: var(--ks-gold); }
.ks-gold-italic { color: var(--ks-gold); font-style: italic; }

.ks-lead {
  margin-top: 18px;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ks-muted);
}

.ks-prose p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ks-muted);
}

.ks-prose p + p { margin-top: 16px; }
.ks-prose strong { color: var(--ks-ink); font-weight: 600; }
.ks-section--dark .ks-prose strong { color: #fff; }

.ks-prose a,
.ks-link {
  color: var(--ks-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ks-gold);
  transition: color 0.25s ease;
}

.ks-prose a:hover,
.ks-link:hover { color: var(--ks-gold-deep); }

.ks-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ks-ink);
}

.ks-more i { transition: transform 0.3s ease; color: var(--ks-gold); }
.ks-more:hover i { transform: translateX(4px); }
.ks-section--dark .ks-more { color: #fff; }

.ks-more-row {
  display: flex;
  justify-content: center;
  padding: 8px 24px 72px;
}

.ks-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.ks-btn-row .btn { border-radius: 999px; padding: 15px 28px; }

.btn-outline-dark {
  background: transparent;
  color: var(--ks-ink);
  border: 1.5px solid rgba(0, 0, 0, 0.14);
}

.btn-outline-dark:hover { border-color: var(--ks-ink); transform: translateY(-2px); }

/* ==========================================
   PAGE HERO (inner pages) — centered tech orbit
   ========================================== */
.ph {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--ks-line);
  padding-bottom: 0;
}

/* Stage: centered copy with the orbit behind it */
.ph-stage {
  position: relative;
  padding: calc(var(--ks-header-h) + 84px) 0 112px;
}

/* Faint grid, fading out from the centre */
.ph-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%);
  pointer-events: none;
}

/* ── Orbit: three concentric circles sized to fit the stage ── */
.ph-orbit {
  position: absolute;
  top: var(--ks-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  container-type: size;
  pointer-events: none;
}

.ph-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(640px, 80vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.24) 0%, rgba(212, 175, 55, 0.08) 38%, transparent 68%);
  animation: ph-breathe 7s ease-in-out infinite;
}

@keyframes ph-breathe {
  0%, 100% { transform: scale(0.9); opacity: 0.75; }
  50% { transform: scale(1.08); opacity: 1; }
}

.ph-ring {
  --dur: 60s;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  aspect-ratio: 1;
}

.ph-ring--1 { width: min(50cqh, 62cqw); }
.ph-ring--2 { width: min(74cqh, 80cqw); }
.ph-ring--3 { width: min(97cqh, 96cqw); }

/* Ring artwork — layered CSS so detail stays crisp on any ellipse */
.ph-ring-line,
.ph-ring-ticks,
.ph-ring-dash,
.ph-ring-arc {
  position: absolute;
  border-radius: 50%;
}

/* Main line: gradient stroke fading from ink to gold */
.ph-ring-line {
  inset: 0;
  padding: 1.4px;
  background: linear-gradient(135deg,
    rgba(10, 10, 10, 0.03) 0%,
    rgba(10, 10, 10, 0.2) 42%,
    rgba(212, 175, 55, 0.75) 68%,
    rgba(212, 175, 55, 0.05) 100%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Fine dotted tick ring just inside the line */
.ph-ring-ticks {
  inset: 2.2%;
  border: 2px dotted rgba(10, 10, 10, 0.16);
}

/* Extra dashed track on the middle ring */
.ph-ring-dash {
  inset: 5.5%;
  border: 1px dashed rgba(10, 10, 10, 0.12);
}

/* Glowing gold arc sweeping around the ring */
@property --ph-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ph-ring-arc {
  inset: -1px;
  border: 2.5px solid var(--ks-gold);
  -webkit-mask: conic-gradient(from var(--ph-ang), transparent 0deg, #000 30deg, #000 46deg, transparent 50deg);
  mask: conic-gradient(from var(--ph-ang), transparent 0deg, #000 30deg, #000 46deg, transparent 50deg);
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.9));
  animation: ph-arc var(--dur) linear infinite;
}

.ph-ring--2 .ph-ring-arc { animation-direction: reverse; }
.ph-ring--3 .ph-ring-arc { opacity: 0.75; }

@keyframes ph-arc {
  to { --ph-ang: 360deg; }
}

/* Logos and sparks travel along the circle and stay upright */
.ph-chip,
.ph-spark {
  position: absolute;
  top: 0;
  left: 0;
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-rotate: 0deg;
  offset-anchor: center;
  animation: ph-travel var(--dur) linear infinite;
  animation-delay: var(--delay, 0s);
}

.ph-ring--2 .ph-chip,
.ph-ring--2 .ph-spark { animation-direction: reverse; }

@keyframes ph-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.ph-chip {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--ks-line);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.32), 0 0 0 5px rgba(255, 255, 255, 0.75);
}

.ph-chip--invert img { filter: invert(1); }

.ph-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ph-spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18), 0 0 16px rgba(212, 175, 55, 0.85);
}

/* Browsers without offset-path: hide the travellers, keep the rings */
@supports not (offset-path: ellipse(50% 50% at 50% 50%)) {
  .ph-chip,
  .ph-spark { display: none; }
}

/* Client avatars on the orbit (clients page) */
.ph-chip--avatar {
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--from), var(--to));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ph-chip--avatar::after {
  content: '\2605';
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ks-gold);
  border: 2px solid #fff;
  color: var(--ks-ink);
  font-size: 0.55rem;
}

/* ── Solutions: perspective grid floor + floating service tiles ── */
.ph-grid {
  position: absolute;
  top: var(--ks-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  perspective: 900px;
  pointer-events: none;
}

.ph-grid-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 55% at 50% 42%, rgba(212, 175, 55, 0.2), transparent 70%);
  animation: ph-breathe 8s ease-in-out infinite;
}

.ph-grid-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -12%;
  height: 72%;
  transform-origin: 50% 100%;
  transform: rotateX(70deg);
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.18) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: ph-floor 3.5s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}

@keyframes ph-floor {
  to { background-position: 0 72px; }
}

.ph-grid-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.45), transparent);
  animation: ph-scan 6s ease-in-out infinite;
}

@keyframes ph-scan {
  0% { top: 100%; opacity: 0; }
  15% { opacity: 1; }
  100% { top: -20%; opacity: 0; }
}

.ph-tile {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--ks-line);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.3);
  animation: ph-bob 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}

.ph-tile--l { left: clamp(16px, 5vw, 120px); }
.ph-tile--r { right: clamp(16px, 5vw, 120px); }
.ph-tile--l:nth-of-type(odd) { margin-left: 40px; }
.ph-tile--r:nth-of-type(even) { margin-right: 40px; }

.ph-tile-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--ks-ink);
  color: var(--ks-gold);
  font-size: 0.95rem;
}

.ph-tile-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ks-ink);
  white-space: nowrap;
}

.ph-tile-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

@keyframes ph-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

/* ── Process: workflow flowchart ── */
.ph-flow {
  position: absolute;
  top: var(--ks-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.ph--flow .ph-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 45% at 50% 50%, rgba(212, 175, 55, 0.16), transparent 70%);
  pointer-events: none;
}

.ph-flow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--font-body);
}

.ph-flow-link {
  fill: none;
  stroke: rgba(10, 10, 10, 0.12);
  stroke-width: 2;
}

.ph-flow-link-flow {
  fill: none;
  stroke: var(--ks-gold);
  stroke-width: 2;
  stroke-dasharray: 6 14;
  opacity: 0.85;
  animation: ph-dash 1.1s linear infinite;
}

@keyframes ph-dash {
  to { stroke-dashoffset: -20; }
}

.ph-flow-loop {
  fill: none;
  stroke: rgba(10, 10, 10, 0.2);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
}

.ph-flow-loop-label {
  fill: #8a8f99;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ph-flow-card {
  fill: #fff;
  stroke: rgba(10, 10, 10, 0.1);
  stroke-width: 1;
  animation: ph-node-on 12s linear infinite;
  animation-delay: calc(var(--i) * 2s);
}

@keyframes ph-node-on {
  0%, 15% { stroke: #D4AF37; stroke-width: 2.5; }
  20%, 100% { stroke: rgba(10, 10, 10, 0.1); stroke-width: 1; }
}

.ph-flow-badge { fill: var(--ks-ink); }

.ph-flow-step {
  fill: var(--ks-gold);
  font-size: 13px;
  font-weight: 700;
}

.ph-flow-title {
  fill: var(--ks-ink);
  font-size: 17px;
  font-weight: 600;
}

.ph-flow-meta {
  fill: #6b7280;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.ph-flow-packet {
  fill: var(--ks-gold);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.9));
}

.ph-flow-packet--loop { fill: var(--ks-ink); filter: none; }

/* ── Projects: browser-frame showcase ── */
.ph--showcase .ph-stage { padding-bottom: 72px; }

.ph--showcase .ph-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90%;
  height: 70%;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(212, 175, 55, 0.2), transparent 70%);
  pointer-events: none;
}

.ph-showcase {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  height: clamp(340px, 40vw, 580px);
  margin: 64px auto 0;
  perspective: 1800px;
}

.ph-frame {
  position: absolute;
  top: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ks-line);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.38);
}

.ph-frame--center {
  z-index: 3;
  left: 50%;
  width: min(64%, 800px);
  transform: translateX(-50%);
}

.ph-frame--left,
.ph-frame--right {
  z-index: 2;
  top: 9%;
  width: min(44%, 540px);
}

.ph-frame--left {
  left: 1%;
  transform: rotateY(24deg) scale(0.92);
  transform-origin: right center;
}

.ph-frame--right {
  right: 1%;
  transform: rotateY(-24deg) scale(0.92);
  transform-origin: left center;
}

.ph-frame-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f6f6f7;
  border-bottom: 1px solid var(--ks-line);
}

.ph-frame-dots { display: inline-flex; gap: 6px; }

.ph-frame-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.ph-frame-dots i:nth-child(2) { background: #febc2e; }
.ph-frame-dots i:nth-child(3) { background: #28c840; }

.ph-frame-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 4px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--ks-line);
  font-size: 0.72rem;
  color: var(--ks-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.ph-frame-url i { font-size: 0.6rem; color: var(--ks-gold-deep); }

.ph-frame-screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f1f2;
}

.ph-frame-screen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
  animation: ph-pan 16s ease-in-out infinite alternate;
}

.ph-frame--left .ph-frame-screen img { animation-delay: -5s; }
.ph-frame--right .ph-frame-screen img { animation-delay: -10s; }

@keyframes ph-pan {
  to { object-position: 50% 100%; }
}

.ph-frame-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.86);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
}

.ph-float-card {
  position: absolute;
  z-index: 4;
  right: 12%;
  bottom: -4%;
  width: min(20%, 230px);
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ks-line);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.4);
  animation: ph-bob 7s ease-in-out infinite;
}

.ph-float-card .ph-frame-screen { aspect-ratio: 1; border-radius: 12px; }

.ph-float-card figcaption {
  padding: 8px 6px 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ks-ink);
}

@media (max-width: 1200px) {
  .ph-tile { display: none; }
}

@media (max-width: 1100px) {
  .ph-flow { display: none; }
}

@media (max-width: 768px) {
  .ph-showcase { height: auto; margin-top: 44px; padding: 0 16px; perspective: none; }
  .ph-frame--left,
  .ph-frame--right,
  .ph-float-card { display: none; }
  .ph-frame--center { position: relative; left: 0; width: 100%; transform: none; }
  .ph-grid-floor { height: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-grid-floor,
  .ph-grid-scan,
  .ph-grid-sky,
  .ph-tile,
  .ph-flow-link-flow,
  .ph-flow-card,
  .ph-frame-screen img,
  .ph-float-card { animation: none; }
  .ph-flow-packet { display: none; }
}

/* ── Centered copy ── */
.ph-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ph-crumb { margin-bottom: 26px; }

.ks-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ks-muted);
}

.ks-breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: rgba(0, 0, 0, 0.25);
}

/* animations.css hides every <nav> below 768px; keep the breadcrumb */
nav.ks-breadcrumb { display: block; }

.ks-breadcrumb a { transition: color 0.2s ease; }
.ks-breadcrumb a:hover { color: var(--ks-ink); }
.ks-breadcrumb [aria-current] { color: var(--ks-ink); font-weight: 600; }

.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ks-line);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.25);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-ink);
}

.ph-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-gold);
}

.ph-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ks-gold);
  animation: ph-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ph-ping {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ph h1 {
  max-width: 17ch;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ks-ink);
  text-wrap: balance;
  text-shadow: 0 0 2px #fff, 0 0 18px #fff, 0 0 32px rgba(255, 255, 255, 0.9);
}

.ph-lead {
  max-width: 620px;
  margin-top: 24px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ks-muted);
  text-wrap: pretty;
}

.ph-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 22px;
  min-height: 52px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.ph-btn--dark {
  background: var(--ks-ink);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}

.ph-btn--dark i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ks-gold);
  color: var(--ks-ink);
  font-size: 0.8rem;
  transition: transform 0.35s var(--ks-ease);
}

.ph-btn--dark:hover { transform: translateY(-2px); }
.ph-btn--dark:hover i { transform: rotate(-45deg); }

.ph-btn--ghost {
  padding-right: 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  color: var(--ks-ink);
}

.ph-btn--ghost:hover { border-color: var(--ks-ink); transform: translateY(-2px); }

.ph-btn:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 3px;
}

/* ── Facts strip ── */
.ph-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ks-line);
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.35);
}

.ph-stat {
  min-width: 180px;
  padding: 26px 30px;
  border-right: 1px solid var(--ks-line);
}

.ph-stat strong {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ks-ink);
}

.ph-stat span {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

.ph-points {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 22px 30px;
  min-width: 0;
}

.ph-points-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-gold-deep);
}

.ph-points ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ph-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #27272a;
  overflow-wrap: anywhere;
}

.ph-points li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex: 0 0 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.58rem;
  background: var(--ks-ink);
  color: var(--ks-gold);
}

/* ── Black ticker band ── */
.ph-ticker {
  position: relative;
  z-index: 2;
  margin-top: 64px;
  overflow: hidden;
  background: var(--ks-ink);
  padding: 18px 0;
}

.ph-ticker-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: ph-marquee 38s linear infinite;
}

.ph-ticker span {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.ph-ticker i {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ks-gold);
}

.ph-ticker:hover .ph-ticker-track { animation-play-state: paused; }

@keyframes ph-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Compact variant (legal pages): smaller orbit, no facts/ticker */
.ph--compact .ph-stage { padding-bottom: 96px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ph-facts { grid-template-columns: 1fr 1fr; }
  .ph-stat:nth-child(2) { border-right: 0; }
  .ph-points { grid-column: 1 / -1; border-top: 1px solid var(--ks-line); }
}

@media (max-width: 768px) {
  .ph-stage { padding: calc(var(--ks-header-h) + 48px) 0 72px; }
  .ph-ring { opacity: 0.6; }
  .ph-chip { width: 38px; height: 38px; border-radius: 12px; opacity: 0.55; }
  .ph-chip img { width: 18px; height: 18px; }
  .ph-crumb { margin-bottom: 20px; }
  .ph-eyebrow { margin-bottom: 20px; }
  .ph-lead { font-size: 1rem; }
  .ph-stat { min-width: 0; padding: 22px 20px; }
  .ph-points { padding: 20px; }
  .ph-ticker { margin-top: 40px; padding: 14px 0; }
  .ph-ticker span { font-size: 0.95rem; }
}

@media (max-width: 560px) {
  .ph-actions { width: 100%; }
  .ph-btn { width: 100%; justify-content: space-between; }
  .ph-btn--ghost { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-chip,
  .ph-spark,
  .ph-ring-arc,
  .ph-glow,
  .ph-dot::after,
  .ph-ticker-track { animation: none; }
}

/* ==========================================
   CARDS & GRIDS
   ========================================== */
.ks-grid {
  display: grid;
  gap: 20px;
}

.ks-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ks-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ks-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ks-card {
  position: relative;
  padding: 32px;
  border-radius: var(--ks-radius);
  background: #fff;
  border: 1px solid var(--ks-line);
  transition: transform 0.4s var(--ks-ease), border-color 0.3s ease, box-shadow 0.4s ease;
  scroll-margin-top: 110px;
}

.ks-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.28);
}

.ks-section--dark .ks-card {
  background: var(--ks-ink-2);
  border-color: var(--ks-line-dark);
}

.ks-section--dark .ks-card:hover { border-color: rgba(212, 175, 55, 0.4); }

.ks-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--ks-gold-soft);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--ks-gold-deep);
  font-size: 1.2rem;
  margin-bottom: 24px;
}

.ks-section--dark .ks-card-icon { color: var(--ks-gold); }

.ks-card h3 {
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ks-ink);
  margin-bottom: 12px;
}

.ks-section--dark .ks-card h3 { color: #fff; }

.ks-card p {
  font-size: 0.97rem;
  line-height: 1.7;
}

.ks-card-num {
  position: absolute;
  top: 28px;
  right: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.25);
}

.ks-section--dark .ks-card-num { color: rgba(255, 255, 255, 0.25); }

.ks-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.ks-tags li {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  background: #f4f4f5;
  color: #3f3f46;
}

.ks-section--dark .ks-tags li {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}

/* Feature card spanning two columns */
.ks-card--wide { grid-column: span 2; }

/* Card with screenshot */
.ks-card--media { padding: 0; overflow: hidden; }

.ks-card-shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f1f2;
  border-bottom: 1px solid var(--ks-line);
}

.ks-card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.7s var(--ks-ease);
}

.ks-card--media:hover .ks-card-shot img { transform: scale(1.03); }
.ks-card-body { padding: 28px 32px 32px; }

/* Client name wall */
.ks-client-wall {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
}

.ks-client-wall li {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 24px;
  background: #fff;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #3f3f46;
  transition: color 0.3s ease, background 0.3s ease;
}

.ks-client-wall li:hover { color: var(--ks-ink); background: #fffdf5; }


/* ==========================================
   SPLIT LAYOUT + CHECKLIST
   ========================================== */
.ks-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.ks-split--top { align-items: start; }

.ks-checklist {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}

.ks-checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ks-muted);
}

.ks-checklist li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 0.65rem;
  background: var(--ks-ink);
  color: var(--ks-gold);
}

.ks-checklist strong { color: var(--ks-ink); font-weight: 600; }
.ks-section--dark .ks-checklist li { color: rgba(255, 255, 255, 0.65); }
.ks-section--dark .ks-checklist li::before { background: var(--ks-gold); color: var(--ks-ink); }
.ks-section--dark .ks-checklist strong { color: #fff; }

.ks-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ks-soft);
  border: 1px solid var(--ks-line);
  aspect-ratio: 4 / 3;
}

.ks-media img,
.ks-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================
   STATS BAND (black highlight)
   ========================================== */
.ks-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 24px;
  overflow: hidden;
  gap: 1px;
  background: var(--ks-line-dark);
  border: 1px solid var(--ks-line-dark);
}

.ks-split .ks-stats { grid-template-columns: repeat(2, 1fr); }

.ks-stat {
  padding: 36px 28px;
  background: var(--ks-ink);
}

.ks-stat strong {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}

.ks-stat strong em {
  font-style: normal;
  color: var(--ks-gold);
}

.ks-stat span {
  display: block;
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   STEPS (process timeline)
   ========================================== */
.ks-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: grid;
  gap: 20px;
}

.ks-step {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 40px;
  padding: 40px;
  border-radius: var(--ks-radius);
  background: #fff;
  border: 1px solid var(--ks-line);
  transition: border-color 0.3s ease, box-shadow 0.4s ease;
  scroll-margin-top: 110px;
}

.ks-step:hover {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.25);
}

.ks-step-num {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ks-ink);
}

.ks-step-num small {
  display: block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-gold-deep);
}

.ks-step h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ks-ink);
  margin-bottom: 12px;
}

.ks-step-out {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--ks-soft);
  border: 1px solid var(--ks-line);
}

.ks-step-out h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin-bottom: 12px;
}

.ks-step-out ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.ks-step-out li {
  position: relative;
  padding-left: 18px;
  font-size: 0.93rem;
  color: #27272a;
}

.ks-step-out li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-gold);
}

/* ==========================================
   FAQ
   ========================================== */
.ks-faq {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.ks-faq details {
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ks-line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ks-faq details[open] {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.25);
}

.ks-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ks-ink);
}

.ks-faq summary::-webkit-details-marker { display: none; }

.ks-faq summary::after {
  content: '+';
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 400;
  background: #f4f4f5;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.ks-faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--ks-ink);
  color: var(--ks-gold);
}

.ks-faq summary:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
  border-radius: 18px;
}

.ks-faq-body {
  padding: 0 28px 26px;
}

.ks-faq-body p {
  font-size: 0.98rem;
  line-height: 1.8;
}

/* ==========================================
   CTA BAND (black highlight)
   ========================================== */
.ks-cta-wrap { padding: 0 0 110px; background: #fff; }
.ks-section--soft + .ks-cta-wrap,
.ks-cta-wrap--soft { background: var(--ks-soft); }

.ks-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 40px;
  align-items: center;
  padding: 64px;
  border-radius: 32px;
  background: var(--ks-ink);
  color: #fff;
}

.ks-cta::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  right: -140px;
  bottom: -300px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent 65%);
}

.ks-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.ks-cta > * { position: relative; z-index: 1; }

.ks-cta h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
}

.ks-cta p {
  margin-top: 14px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.6);
}

.ks-cta .ks-btn-row { margin-top: 0; justify-content: flex-end; }

.ks-cta .btn-outline-white { border-radius: 999px; padding: 15px 28px; }

/* ==========================================
   TEAM — clean aligned grid
   ========================================== */
.kt-team { background: #fff; padding-bottom: 48px; }

.kt-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.kt-card {
  flex: 0 0 calc((100% - 4 * 24px) / 5);
  display: flex;
  flex-direction: column;
}

.kt-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFD84D 0%, #D4AF37 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.5s var(--ks-ease), box-shadow 0.5s ease;
}

.kt-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 35%);
  pointer-events: none;
}

.kt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s var(--ks-ease);
}

.kt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ks-gold);
}

.kt-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(72%) sepia(43%) saturate(583%) hue-rotate(3deg) brightness(98%);
}

.kt-info {
  padding: 18px 4px 0;
}

.kt-name {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ks-ink);
  line-height: 1.3;
}

.kt-role {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ks-muted);
  line-height: 1.5;
}

.kt-card:hover .kt-photo {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -24px rgba(0, 0, 0, 0.35);
}

.kt-card:hover .kt-photo img { transform: scale(1.04); }

/* ==========================================
   CONTACT PAGE — heading + distinctive contact cards
   ========================================== */
.ct {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ks-header-h) + 72px) 0 40px;
  background: #fff;
}

.ct::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 10%, transparent 75%);
  pointer-events: none;
}

.ct::after {
  content: '';
  position: absolute;
  width: 720px;
  height: 720px;
  left: 50%;
  top: -340px;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18), transparent 65%);
  pointer-events: none;
}

.ct .ks-container { position: relative; z-index: 1; }

.ct-head {
  max-width: 820px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ct-head .ks-breadcrumb { margin-bottom: 24px; }

.ct-head h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--ks-ink);
  text-wrap: balance;
}

.ct-lead {
  max-width: 600px;
  margin-top: 22px;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ks-muted);
}

.ct-cards {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 18px;
}

.ct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 250px;
  padding: 28px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--ks-line);
  background: #fff;
  color: var(--ks-ink);
  transition: transform 0.45s var(--ks-ease), box-shadow 0.45s ease, border-color 0.3s ease;
}

.ct-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
}

.ct-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border-radius: 14px;
  font-size: 1.1rem;
}

.ct-card-label {
  margin-top: 28px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}

.ct-card-value {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ct-card-value--sub { font-size: 1rem; opacity: 0.8; }

.ct-card-note {
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.5;
  opacity: 0.65;
}

.ct-card a:focus-visible,
a.ct-card:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 3px;
}

/* Email — black highlight */
.ct-card--email {
  background: var(--ks-ink);
  border-color: var(--ks-ink);
  color: #fff;
}

.ct-card--email::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  right: -120px;
  top: -140px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent 65%);
}

.ct-card--email > * { position: relative; }
.ct-card--email .ct-card-icon { background: var(--ks-gold); color: var(--ks-ink); }
.ct-card--email .ct-card-value { font-size: 1.15rem; overflow-wrap: normal; }

.ct-card-arrow {
  position: absolute !important;
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.4s var(--ks-ease), background 0.3s ease, color 0.3s ease;
}

.ct-card--email:hover .ct-card-arrow {
  transform: rotate(-45deg);
  background: var(--ks-gold);
  color: var(--ks-ink);
  border-color: var(--ks-gold);
}

/* Call — gold */
.ct-card--call {
  background: linear-gradient(150deg, #f3d872 0%, var(--ks-gold) 45%, var(--ks-gold-deep) 100%);
  border-color: transparent;
}

.ct-card--call .ct-card-icon { background: var(--ks-ink); color: var(--ks-gold); }
.ct-card--call .ct-card-label,
.ct-card--call .ct-card-note { opacity: 0.75; }
.ct-card--call a.ct-card-value:hover { text-decoration: underline; }

.ct-card--call .ct-card-icon i { animation: ct-ring 2.8s ease-in-out infinite; }

@keyframes ct-ring {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(-14deg); }
  80% { transform: rotate(12deg); }
  85% { transform: rotate(-8deg); }
  90% { transform: rotate(6deg); }
}

/* Visit — map tile */
.ct-card--visit { padding-top: 0; }

.ct-map {
  position: relative;
  display: block;
  height: 112px;
  margin: 0 -28px auto;
  background:
    radial-gradient(circle at 60% 55%, rgba(212, 175, 55, 0.25), transparent 45%),
    repeating-linear-gradient(35deg, transparent 0 22px, rgba(0, 0, 0, 0.05) 22px 24px),
    repeating-linear-gradient(-55deg, transparent 0 30px, rgba(0, 0, 0, 0.04) 30px 32px),
    #f6f6f4;
  border-bottom: 1px solid var(--ks-line);
}

.ct-map-pin {
  position: absolute;
  left: 60%;
  top: 55%;
  translate: -50% -100%;
  font-size: 1.6rem;
  color: var(--ks-ink);
  animation: ct-pin 2.4s ease-in-out infinite;
}

.ct-map-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 22px;
  height: 8px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.55);
  animation: ct-pin-shadow 2.4s ease-in-out infinite;
}

@keyframes ct-pin {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ct-pin-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.6; }
}

.ct-card--visit .ct-card-label { margin-top: 22px; }
.ct-card--visit:hover { border-color: rgba(212, 175, 55, 0.5); }

/* Social */
.ct-card--social {
  background: var(--ks-soft);
}

.ct-card--social .ct-card-label { margin-top: 0; }

.ct-socials {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ct-socials a {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ks-line);
  color: var(--ks-ink);
  font-size: 1.05rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.ct-socials a:hover {
  background: var(--ks-ink);
  color: var(--ks-gold);
  transform: translateY(-2px);
}

/* Enquiry form follows directly on the contact page */
.page-contact .eq-section { padding-top: 64px; }

.eq-modern-card--solo {
  grid-template-columns: 1fr;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  .ct-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ct { padding-top: calc(var(--ks-header-h) + 44px); }
  .ct-head { margin-bottom: 36px; }
  .ct-cards { grid-template-columns: 1fr; }
  .ct-card { min-height: 0; }
  .ct-card-icon { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-card--call .ct-card-icon i,
  .ct-map-pin,
  .ct-map-pin::after { animation: none; }
}

/* ==========================================
   LEGAL PAGES (privacy, terms)
   ========================================== */

.ks-legal-wrap { padding-top: 72px; }

.ks-legal {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}

.ks-legal-toc {
  position: sticky;
  top: 110px;
  padding: 24px;
  border-radius: var(--ks-radius);
  background: #fff;
  border: 1px solid var(--ks-line);
}

.ks-legal-toc-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-gold-deep);
  margin-bottom: 14px;
}

.ks-legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.ks-legal-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ks-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.ks-legal-toc a:hover { background: #f4f4f5; color: var(--ks-ink); }

.ks-legal-body {
  padding: 48px 56px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--ks-line);
  min-width: 0;
}

.ks-legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ks-gold-soft);
  font-size: 0.82rem !important;
  color: #6b5a12 !important;
  margin-bottom: 24px;
}

.ks-legal-body section {
  scroll-margin-top: 110px;
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--ks-line);
}

.ks-legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ks-ink);
  margin-bottom: 16px;
}

.ks-legal-body h2 span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ks-gold-deep);
}

.ks-legal-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ks-ink);
  margin: 22px 0 8px;
}

.ks-legal-body ul {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ks-legal-body li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ks-muted);
}

.ks-legal-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-gold);
}

.ks-legal-body li strong { color: var(--ks-ink); font-weight: 600; }
.ks-legal-body ul + p { margin-top: 16px; }

.ks-legal-contact {
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--ks-ink);
}

.ks-legal-contact p { color: rgba(255, 255, 255, 0.7) !important; margin: 0 !important; }
.ks-legal-contact strong { color: #fff !important; }
.ks-legal-contact a { color: var(--ks-gold) !important; border-bottom-color: transparent !important; }

@media (max-width: 1024px) {
  .ks-legal { grid-template-columns: 1fr; gap: 24px; }
  .ks-legal-toc { position: static; }
  .ks-legal-toc ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ks-legal-body { padding: 28px 22px; }
  .ks-legal-toc ol { grid-template-columns: 1fr; }
  .ks-legal-body h2 { font-size: 1.25rem; }
}

/* ==========================================
   FOOTER
   ========================================== */
.kn-footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1100px) {
  .kt-card { flex-basis: calc((100% - 2 * 24px) / 3); }
  .ks-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ks-step { grid-template-columns: 90px 1fr; }
  .ks-step-out { grid-column: 2; }
}

@media (max-width: 1024px) {
  .ks-split { grid-template-columns: 1fr; gap: 48px; }
  .ks-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ks-head--split { grid-template-columns: 1fr; gap: 16px; }
  .ks-stats { grid-template-columns: repeat(2, 1fr); }
  .ks-cta { grid-template-columns: 1fr; padding: 48px; }
  .ks-cta .ks-btn-row { justify-content: flex-start; }
  .kn-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --ks-header-h: 64px; }
  .ks-section { padding: 76px 0; }
  .ks-cta-wrap { padding-bottom: 76px; }
  .ks-head { margin-bottom: 40px; }
  .ks-grid--2,
  .ks-grid--3 { grid-template-columns: 1fr; }
  .ks-card--wide { grid-column: auto; }
  .ks-card { padding: 26px; }
  .ks-step { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .ks-step-out { grid-column: auto; }
  .ks-step-num { font-size: 2.4rem; }
  .kt-grid { gap: 16px; }
  .kt-card { flex-basis: calc((100% - 16px) / 2); }
  .ks-faq summary { padding: 20px 22px; font-size: 1rem; }
  .ks-faq-body { padding: 0 22px 22px; }
}

@media (max-width: 768px) {
  .ks-client-wall { grid-template-columns: repeat(2, 1fr); }
  .ks-client-wall li { min-height: 96px; font-size: 1rem; }
  .ks-card-body { padding: 22px 24px 26px; }
}

@media (max-width: 560px) {
  .ks-grid--4 { grid-template-columns: 1fr; }
  .ks-stats { grid-template-columns: 1fr 1fr; }
  .ks-stat { padding: 26px 20px; }
  .ks-cta { padding: 36px 24px; border-radius: 24px; }
  .ks-btn-row .btn { width: 100%; justify-content: center; }
  .kn-footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kn-nav-thumb,
  .ks-card,
  .kt-photo,
  .kt-photo img { transition: none; }
}