/* ==========================================================================
   chp.css — Chetan Pro shared UI layer
   Extends the exported Next.js design system (same fonts, same tokens,
   same black) with: the full-width modal navigation, the injected home
   sections, and the inner-page (services / work / blog) shell.
   Nothing here overrides the core hero / 3D / scroll animations.
   ========================================================================== */

:root {
  --chp-bg: #040508;
  --chp-bg-2: #0a0b0f;
  --chp-fg: #d8d8d8;
  --chp-fg-strong: #ffffff;
  --chp-dim: #8f9199;
  --chp-line: rgba(216, 216, 216, 0.14);
  --chp-line-strong: rgba(216, 216, 216, 0.3);
  --chp-accent: #d8d8d8;
  --chp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chp-pad: clamp(20px, 4vw, 64px);
  --chp-max: 1560px;
}

/* Fonts are already declared by the exported stylesheet
   (/_next/static/chunks/0-x39_77jza10.css). These aliases let the custom
   layer use them without depending on Tailwind utility names. */
.chp,
.chp-body {
  font-family: "neueHaas", "neueHaas Fallback", system-ui, sans-serif;
  color: var(--chp-fg);
  background: var(--chp-bg);
}

.chp-display {
  font-family: "familjen", "familjen Fallback", system-ui, sans-serif;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-weight: 400;
}

.chp-mono {
  font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chp-serif {
  font-family: "ppEditorial", "ppEditorial Fallback", Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- layout */
.chp-wrap {
  width: 100%;
  max-width: var(--chp-max);
  margin-inline: auto;
  padding-inline: var(--chp-pad);
}

.chp-sec {
  position: relative;
  padding-block: clamp(64px, 9vw, 140px);
}

.chp-sec--tight { padding-block: clamp(44px, 6vw, 90px); }
.chp-sec--line { border-top: 1px solid var(--chp-line); }

.chp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 64px);
}

.chp-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--chp-dim);
}
.chp-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.chp-h2 {
  font-family: "familjen", "familjen Fallback", system-ui, sans-serif;
  font-size: clamp(30px, 4.6vw, 74px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 12px 0 0;
  max-width: 18ch;
  color: var(--chp-fg-strong);
  font-weight: 400;
}

.chp-h3 {
  font-family: "familjen", "familjen Fallback", system-ui, sans-serif;
  font-size: clamp(19px, 1.7vw, 27px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--chp-fg-strong);
  font-weight: 400;
}

.chp-lede {
  max-width: 62ch;
  color: var(--chp-dim);
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.65;
  margin: 0;
}

/* --------------------------------------------------------------- buttons */
.chp-btn {
  --b: var(--chp-fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px 14px;
  border: 1px solid var(--chp-line-strong);
  border-radius: 999px;
  color: var(--chp-fg-strong);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  font-family: "martianMono", "martianMono Fallback", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.45s var(--chp-ease), border-color 0.45s var(--chp-ease);
  will-change: transform;
}
.chp-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chp-fg-strong);
  transform: translateY(101%);
  transition: transform 0.55s var(--chp-ease);
}
.chp-btn:hover { color: #040508; border-color: var(--chp-fg-strong); }
.chp-btn:hover::after { transform: translateY(0); }
.chp-btn--solid { background: var(--chp-fg-strong); color: #040508; border-color: var(--chp-fg-strong); box-shadow: 0 14px 30px -16px rgba(216, 216, 216, 0.35); }
.chp-btn--solid::after { background: #040508; }
.chp-btn--solid:hover { color: var(--chp-fg-strong); }
.chp-btn .chp-arrow { transition: transform 0.45s var(--chp-ease); }
.chp-btn:hover .chp-arrow { transform: translate(4px, -4px); }

/* ==========================================================================
   FULL-WIDTH MODAL NAVIGATION
   ========================================================================== */
.chp-menu-btn {
  position: fixed;
  top: clamp(14px, 2vw, 26px);
  right: var(--chp-pad);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 10px;
  border: 1px solid var(--chp-line-strong);
  border-radius: 999px;
  background: rgba(4, 5, 8, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.75);
  color: var(--chp-fg-strong);
  cursor: pointer;
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: border-color 0.4s var(--chp-ease), background 0.4s var(--chp-ease), box-shadow 0.4s var(--chp-ease);
}
.chp-menu-btn:hover { border-color: var(--chp-fg-strong); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.85); }
.chp-menu-btn i {
  position: relative;
  display: block;
  width: 14px;
  height: 9px;
}
.chp-menu-btn i::before,
.chp-menu-btn i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--chp-ease);
}
.chp-menu-btn i::before { top: 2px; }
.chp-menu-btn i::after { bottom: 2px; }
.chp-menu-btn:hover i::before { transform: translateY(2px); }
.chp-menu-btn:hover i::after { transform: translateY(-2px); }

/* the site's own side panel is replaced by the full-width modal */
.menu-block { display: none !important; }

.chp-nav {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--chp-bg);
  color: var(--chp-fg);
  pointer-events: none;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--chp-ease), visibility 0s linear 0.9s;
  overflow: hidden;
}
.chp-nav.is-open {
  pointer-events: auto;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s var(--chp-ease), visibility 0s;
}
.chp-nav__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(216, 216, 216, 0.13), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}
.chp-nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.2vw, 30px) var(--chp-pad);
  border-bottom: 1px solid var(--chp-line);
}
.chp-nav__bar img { width: 118px; height: auto; }
.chp-nav__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--chp-line-strong);
  border-radius: 999px;
  color: var(--chp-fg-strong);
  padding: 9px 18px 10px;
  cursor: pointer;
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  transition: background 0.4s var(--chp-ease), color 0.4s var(--chp-ease);
}
.chp-nav__close:hover { background: var(--chp-fg-strong); color: #040508; }

.chp-nav__body {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 70px);
  padding: clamp(26px, 4vw, 60px) var(--chp-pad);
  align-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 900px) {
  .chp-nav__body { grid-template-columns: 1fr; align-content: start; }
  .chp-nav__word { font-size: clamp(30px, 9.5vw, 46px); }
  .chp-nav__item { padding: 10px 0; }
  .chp-nav__aside { margin-top: 10px; }
  .chp-nav__foot { font-size: 9px; gap: 6px 16px; }
}

.chp-nav__primary { display: flex; flex-direction: column; }
.chp-nav__item:focus-visible { outline: none; }
.chp-nav__item:focus-visible .chp-nav__word { opacity: .62; transform: translateX(14px); }
.chp-nav__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 26px);
  padding: clamp(6px, 0.9vw, 14px) 0;
  border-bottom: 1px solid var(--chp-line);
  text-decoration: none;
  color: var(--chp-fg-strong);
  overflow: hidden;
}
.chp-nav__num {
  font-family: "martianMono", "martianMono Fallback", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--chp-dim);
  transform: translateY(-0.3em);
}
.chp-nav__word {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(30px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.05em;
  display: block;
  position: relative;
  transition: transform 0.6s var(--chp-ease), opacity 0.4s var(--chp-ease);
}
.chp-nav__item .chp-nav__word span { display: inline-block; will-change: transform; }
.chp-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--chp-fg-strong);
  transition: width 0.6s var(--chp-ease);
}
.chp-nav__item:hover::after { width: 100%; }
.chp-nav__item:hover .chp-nav__word { opacity: 0.62; transform: translateX(clamp(8px, 1.2vw, 22px)); }
.chp-nav__item.is-current .chp-nav__num { color: var(--chp-fg-strong); }

.chp-nav__aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-content: center;
}
.chp-nav__col h4 {
  margin: 0 0 14px;
  color: var(--chp-dim);
  font-family: "martianMono", "martianMono Fallback", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
}
.chp-nav__col a,
.chp-nav__col p {
  display: block;
  margin: 0 0 9px;
  color: var(--chp-fg);
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.3s var(--chp-ease), transform 0.4s var(--chp-ease);
}
.chp-nav__col a:hover { opacity: 1; transform: translateX(5px); }

.chp-nav__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  padding: clamp(14px, 1.6vw, 22px) var(--chp-pad);
  border-top: 1px solid var(--chp-line);
  color: var(--chp-dim);
}

/* reveal-in animation for nav content (also works without JS) */
.chp-nav .chp-stagger { opacity: 0; transform: translateY(38px); }
.chp-nav.is-open .chp-stagger {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--chp-ease), transform 0.8s var(--chp-ease);
  transition-delay: calc(0.16s + var(--i, 0) * 0.045s);
}

html.chp-lock, body.chp-lock { overflow: hidden !important; }

/* ==========================================================================
   INJECTED HOME SECTIONS
   ========================================================================== */
/* The injected block must not paint over the exported footer that reveals
   underneath it, so the background lives on the sections, not the host. */
.chp-home { background: transparent; position: relative; z-index: 20; }
.chp-home > section,
.chp-home > .chp-marquee { background: var(--chp-bg); }
.chp-footer-spacer { background: transparent; width: 100%; pointer-events: none; }

/* --- services ticker/list ------------------------------------------------ */
.chp-svc-list { border-top: 1px solid var(--chp-line); }
.chp-svc {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.1fr) 40px;
  gap: clamp(10px, 2vw, 34px);
  align-items: center;
  padding: clamp(16px, 2vw, 30px) 0;
  border-bottom: 1px solid var(--chp-line);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  overflow: hidden;
}
.chp-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(216, 216, 216, 0.09), rgba(216, 216, 216, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--chp-ease);
}
.chp-svc:hover::before { transform: scaleX(1); }
.chp-svc__n { color: var(--chp-dim); }
.chp-svc__t {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(20px, 2.3vw, 36px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--chp-fg-strong);
  transition: transform 0.6s var(--chp-ease);
}
.chp-svc:hover .chp-svc__t { transform: translateX(10px); }
.chp-svc__d { color: var(--chp-dim); font-size: 14.5px; line-height: 1.55; }
.chp-svc__a {
  justify-self: end;
  width: 34px;
  height: 34px;
  border: 1px solid var(--chp-line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.45s var(--chp-ease), color 0.45s var(--chp-ease), transform 0.45s var(--chp-ease);
}
.chp-svc:hover .chp-svc__a { background: var(--chp-fg-strong); color: #040508; transform: rotate(45deg); }
@media (max-width: 860px) {
  .chp-svc { grid-template-columns: 46px minmax(0, 1fr) 34px; }
  .chp-svc__d { display: none; }
}

/* --- work: horizontal pinned gallery (the alternate animation style) ----- */
.chp-work { position: relative; background: var(--chp-bg); overflow: clip; }
.chp-work__track {
  display: flex;
  gap: clamp(16px, 2vw, 34px);
  padding-inline: var(--chp-pad);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--chp-pad);
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.chp-work__track .chp-card { scroll-snap-align: start; }
.chp-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 460px);
  border: 1px solid var(--chp-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(216, 216, 216, 0.045), rgba(216, 216, 216, 0.01));
  padding: clamp(18px, 1.8vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(320px, 34vw, 470px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.5s var(--chp-ease), transform 0.6s var(--chp-ease);
  transform-style: preserve-3d;
}
.chp-card:hover { border-color: var(--chp-line-strong); }
.chp-card__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0c0d12;
  margin-bottom: 20px;
}
.chp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--chp-ease), filter 0.8s var(--chp-ease);
  filter: grayscale(1) contrast(1.05);
}
.chp-card:hover .chp-card__media img { transform: scale(1.12); filter: grayscale(0); }
.chp-card__cat { color: var(--chp-dim); margin-bottom: 10px; display: block; }
.chp-card > span { display: block; }
.chp-card__t {
  display: block;
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(19px, 1.55vw, 26px);
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--chp-fg-strong);
  margin: 0 0 10px;
}
.chp-card__d { display: block; color: var(--chp-dim); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.chp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chp-chip {
  border: 1px solid var(--chp-line);
  border-radius: 999px;
  padding: 5px 11px 6px;
  color: var(--chp-dim);
  font-family: "martianMono", "martianMono Fallback", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chp-work__progress { display: none; }

/* --- journal ------------------------------------------------------------- */
.chp-posts { display: grid; gap: 0; border-top: 1px solid var(--chp-line); }
.chp-post {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 30px);
  align-items: baseline;
  padding: clamp(15px, 1.7vw, 26px) 0;
  border-bottom: 1px solid var(--chp-line);
  text-decoration: none;
  color: inherit;
}
.chp-post:hover .chp-post__t { opacity: 0.6; transform: translateX(8px); }
.chp-post__d { color: var(--chp-dim); }
.chp-post__t {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(17px, 1.5vw, 25px);
  letter-spacing: -0.03em;
  color: var(--chp-fg-strong);
  transition: opacity 0.45s var(--chp-ease), transform 0.6s var(--chp-ease);
}
@media (max-width: 700px) { .chp-post { grid-template-columns: 1fr; } }

/* --- stats --------------------------------------------------------------- */
.chp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(18px, 2.5vw, 40px);
}
.chp-stat b {
  display: block;
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(38px, 5.4vw, 86px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--chp-fg-strong);
  font-weight: 400;
}
.chp-stat span { display: block; margin-top: 12px; color: var(--chp-dim); }

/* --- marquee ------------------------------------------------------------- */
.chp-marquee {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--chp-line);
  padding-block: clamp(12px, 1.4vw, 22px);
  user-select: none;
}
.chp-marquee__row {
  display: flex;
  flex: 0 0 auto;
  gap: 44px;
  padding-right: 44px;
  animation: chp-scroll 38s linear infinite;
}
.chp-marquee:hover .chp-marquee__row { animation-play-state: paused; }
.chp-marquee span {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(18px, 2.1vw, 34px);
  letter-spacing: -0.035em;
  color: var(--chp-dim);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 44px;
}
.chp-marquee span::after { content: "✦"; font-size: 0.5em; opacity: 0.5; }
@keyframes chp-scroll { to { transform: translateX(-100%); } }

/* ==========================================================================
   INNER PAGE SHELL (services / work / blog)
   ========================================================================== */
.chp-body { min-height: 100vh; }

.chp-hero {
  position: relative;
  padding-top: clamp(120px, 15vw, 220px);
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow: hidden;
}
.chp-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--chp-line);
}
.chp-hero__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 120vw;
  height: 90vh;
  transform: translateX(-50%);
  background:
    radial-gradient(38% 46% at 50% 42%, rgba(216, 216, 216, 0.13), transparent 72%),
    radial-gradient(60% 60% at 50% 100%, rgba(216, 216, 216, 0.05), transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}
.chp-hero h1 {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(38px, 7.4vw, 118px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  margin: 18px 0 0;
  max-width: 17ch;
  color: var(--chp-fg-strong);
  font-weight: 400;
}
.chp-hero p { margin-top: clamp(18px, 2vw, 30px); }
.chp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 44px); }

.chp-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--chp-dim);
  align-items: center;
}
.chp-crumb a { color: inherit; text-decoration: none; opacity: 0.75; }
.chp-crumb a:hover { opacity: 1; }

.chp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.chp-tile {
  position: relative;
  border: 1px solid var(--chp-line);
  border-radius: 16px;
  padding: clamp(20px, 2vw, 32px);
  background: linear-gradient(155deg, rgba(216, 216, 216, 0.06), rgba(216, 216, 216, 0.01) 55%, rgba(0, 0, 0, 0.2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -26px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: border-color 0.5s var(--chp-ease), transform 0.6s var(--chp-ease), box-shadow 0.6s var(--chp-ease);
  text-decoration: none;
  color: inherit;
  display: block;
}
.chp-tile:hover {
  border-color: var(--chp-line-strong);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(216, 216, 216, 0.08);
}
.chp-tile img { filter: grayscale(1) contrast(1.04); transition: filter .7s var(--chp-ease), transform 1s var(--chp-ease); }
.chp-tile:hover img { filter: grayscale(0); transform: scale(1.02); }
.chp-prose img { filter: grayscale(1) contrast(1.04); transition: filter .7s var(--chp-ease); }
.chp-prose img:hover { filter: grayscale(0); }
.chp-tile__n {
  color: var(--chp-dim);
  display: block;
  margin-bottom: 16px;
}
.chp-tile p { color: var(--chp-dim); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; }

.chp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.chp-pill {
  border: 1px solid var(--chp-line);
  border-radius: 999px;
  padding: 8px 16px 9px;
  color: var(--chp-fg);
  font-size: 13.5px;
  transition: border-color 0.4s var(--chp-ease), color 0.4s var(--chp-ease), transform 0.4s var(--chp-ease);
}
.chp-pill:hover { border-color: var(--chp-line-strong); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.8); }

.chp-steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--chp-line); }
.chp-step {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(12px, 2vw, 30px);
  padding: clamp(16px, 1.8vw, 28px) 0;
  border-bottom: 1px solid var(--chp-line);
  align-items: baseline;
}
.chp-step__n { color: var(--chp-dim); }
.chp-step h3 { margin: 0; }
.chp-step p { margin: 0; color: var(--chp-dim); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 760px) { .chp-step { grid-template-columns: 54px 1fr; } .chp-step p { grid-column: 2; } }

/* FAQ */
.chp-faq { border-top: 1px solid var(--chp-line); }
.chp-faq details { border-bottom: 1px solid var(--chp-line); }
.chp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(15px, 1.7vw, 26px) 0;
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(17px, 1.4vw, 23px);
  letter-spacing: -0.03em;
  color: var(--chp-fg-strong);
  transition: opacity 0.35s var(--chp-ease);
}
.chp-faq summary::-webkit-details-marker { display: none; }
.chp-faq summary:hover { opacity: 0.7; }
.chp-faq summary::after {
  content: "+";
  font-family: "martianMono", monospace;
  font-size: 18px;
  color: var(--chp-dim);
  transition: transform 0.45s var(--chp-ease);
}
.chp-faq details[open] summary::after { transform: rotate(45deg); }
.chp-faq details[open] {
  background: linear-gradient(160deg, rgba(216, 216, 216, 0.045), transparent 60%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}
.chp-faq p {
  margin: 0 0 clamp(16px, 1.7vw, 26px);
  color: var(--chp-dim);
  max-width: 78ch;
  line-height: 1.7;
  font-size: 15px;
}

/* article typography */
.chp-article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: clamp(24px, 4vw, 70px); align-items: start; }
@media (max-width: 1000px) { .chp-article { grid-template-columns: 1fr; } }
.chp-prose { max-width: 74ch; font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.78; color: #c3c5cb; }
.chp-prose h2 {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--chp-fg-strong);
  margin: clamp(36px, 4vw, 64px) 0 16px;
  font-weight: 400;
}
.chp-prose h3 {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(19px, 1.7vw, 26px);
  letter-spacing: -0.03em;
  color: var(--chp-fg-strong);
  margin: clamp(26px, 3vw, 40px) 0 12px;
  font-weight: 400;
}
.chp-prose p { margin: 0 0 20px; }
.chp-prose a { color: var(--chp-fg-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--chp-line-strong); }
.chp-prose a:hover { text-decoration-color: var(--chp-fg-strong); }
.chp-prose ul, .chp-prose ol { margin: 0 0 22px; padding-left: 20px; }
.chp-prose li { margin-bottom: 9px; }
.chp-prose blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 1px solid var(--chp-line-strong);
  color: var(--chp-fg);
  font-family: "ppEditorial", Georgia, serif;
  font-size: 1.2em;
}
.chp-prose code {
  font-family: "martianMono", monospace;
  font-size: 0.82em;
  background: rgba(216, 216, 216, 0.08);
  padding: 2px 6px;
  border-radius: 5px;
}
.chp-prose pre {
  background: #0a0b0f;
  border: 1px solid var(--chp-line);
  border-radius: 12px;
  padding: 18px;
  overflow: auto;
}
.chp-prose img { max-width: 100%; border-radius: 12px; }
.chp-prose table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 0.94em; }
.chp-prose th, .chp-prose td { border: 1px solid var(--chp-line); padding: 10px 12px; text-align: left; }

.chp-toc {
  position: sticky;
  top: 110px;
  border: 1px solid var(--chp-line);
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(160deg, rgba(216, 216, 216, 0.05), rgba(216, 216, 216, 0.008));
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.85);
}
.chp-toc h4 { margin: 0 0 14px; color: var(--chp-dim); font-family: "martianMono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; }
.chp-toc a { display: block; color: var(--chp-fg); opacity: 0.72; text-decoration: none; font-size: 14px; line-height: 1.4; margin-bottom: 10px; transition: opacity 0.3s, transform 0.3s; }
.chp-toc a:hover, .chp-toc a.is-active { opacity: 1; transform: translateX(4px); }

/* CTA band */
.chp-cta {
  position: relative;
  border-top: 1px solid var(--chp-line);
  padding-block: clamp(60px, 8vw, 130px);
  text-align: center;
  overflow: hidden;
}
.chp-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1100px, 140vw);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 0%, rgba(216, 216, 216, 0.1), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.chp-cta > * { position: relative; z-index: 1; }
.chp-cta h2 {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(30px, 6vw, 92px);
  line-height: 0.93;
  letter-spacing: -0.05em;
  margin: 0 auto 26px;
  max-width: 16ch;
  color: var(--chp-fg-strong);
  font-weight: 400;
}
.chp-cta .chp-hero__cta { justify-content: center; }

/* footer for static pages */
.chp-foot { border-top: 1px solid var(--chp-line); padding-block: clamp(40px, 5vw, 80px) 26px; }
.chp-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(22px, 3vw, 50px);
}
.chp-foot h4 { margin: 0 0 14px; color: var(--chp-dim); font-family: "martianMono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; }
.chp-foot a { display: block; color: var(--chp-fg); opacity: 0.75; text-decoration: none; font-size: 14.5px; margin-bottom: 9px; transition: opacity 0.3s, transform 0.35s; }
.chp-foot a:hover { opacity: 1; transform: translateX(4px); }
.chp-foot__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  margin-top: clamp(30px, 4vw, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--chp-line);
  color: var(--chp-dim);
}
.chp-foot__word {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(52px, 15vw, 250px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: rgba(216, 216, 216, 0.07);
  margin: clamp(30px, 4vw, 60px) 0 0;
  text-align: center;
  user-select: none;
}

/* scroll reveal primitives */
[data-chp-reveal] { opacity: 0; transform: translateY(34px); }
[data-chp-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.8s var(--chp-ease), transform 1s var(--chp-ease); }
[data-chp-reveal][data-chp-delay="1"].is-in { transition-delay: 0.08s; }
[data-chp-reveal][data-chp-delay="2"].is-in { transition-delay: 0.16s; }
[data-chp-reveal][data-chp-delay="3"].is-in { transition-delay: 0.24s; }

.chp-line-mask { display: block; overflow: hidden; }
.chp-line-mask > span { display: block; will-change: transform; }

/* visually hidden (kept in the a11y / SEO tree) */
.chp-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* page progress bar */
.chp-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--chp-fg-strong);
  z-index: 1300;
  opacity: 0.85;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-chp-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   TEMPLATE LEFTOVERS
   Sections that shipped with the reference build and advertise someone
   else's awards, partner logos and client roster are hidden here rather
   than deleted from the exported markup — no DOM surgery, no hydration
   risk, and one line to switch any of them back on once the real assets
   exist.
   ========================================================================== */
.awards-logo-list,
.awards-image-wrapper,
.partners-block,
.partners-list,
.brand-showcase { display: none !important; }

/* ==========================================================================
   MOTION LAYER (generated routes)
   Intro/route wipe, masked line reveals, process rail, cursor, tints.
   ========================================================================== */
.chp-line-wrap { display: block; overflow: hidden; padding-bottom: 0.06em; }
html.chp-motion-on [data-chp-split] { visibility: visible; }

/* --- transition / intro overlay ----------------------------------------- */
.chp-trans {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  visibility: hidden;
}
.chp-trans.is-active { visibility: visible; pointer-events: auto; }
.chp-trans__panel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 50% at 50% 48%, rgba(216, 216, 216, 0.1), transparent 70%),
    #040508;
  transform: translateY(0);
}
.chp-trans.is-intro .chp-trans__panel { transform: translateY(0); }
.chp-trans__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.chp-trans__mark {
  width: clamp(54px, 7vw, 92px);
  height: auto;
  color: var(--chp-fg-strong);
  filter: drop-shadow(0 0 26px rgba(216, 216, 216, 0.35));
}
.chp-trans__mark path { fill: currentColor; }
.chp-trans__label { color: var(--chp-dim); letter-spacing: 0.22em; }

/* --- process rail -------------------------------------------------------- */
.chp-rail { position: relative; padding-left: clamp(22px, 3vw, 54px); }
.chp-rail__line {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--chp-line);
}
.chp-rail__fill {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--chp-fg-strong);
  transform-origin: top;
  transform: scaleY(0);
}
.chp-rail .chp-step { position: relative; transition: opacity 0.5s var(--chp-ease); opacity: 0.55; }
.chp-rail .chp-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(22px, 3vw, 54px) - 4px);
  top: clamp(24px, 2vw, 34px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--chp-line-strong);
  background: var(--chp-bg);
  transition: background 0.4s var(--chp-ease), border-color 0.4s var(--chp-ease), transform 0.4s var(--chp-ease);
}
.chp-rail .chp-step.is-live { opacity: 1; }
.chp-rail .chp-step.is-live::before { background: var(--chp-fg-strong); border-color: var(--chp-fg-strong); transform: scale(1.25); }

/* --- tinted sections (the light/dark swap from the home page) ------------ */
[data-chp-tint] { transition: background-color 0.9s var(--chp-ease), color 0.9s var(--chp-ease); }
[data-chp-tint].is-tinted { background: linear-gradient(180deg, #0a0b0f 0%, #06070a 100%); }

/* --- media frames -------------------------------------------------------- */
[data-chp-media] {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--chp-line);
  will-change: clip-path;
}
[data-chp-media] img { width: 100%; height: 100%; object-fit: cover; }

/* --- precision cursor ---------------------------------------------------- */
.chp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2500;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}
.chp-cursor__ring {
  display: block;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  border: 1px solid #d8d8d8;
  transition: width 0.35s var(--chp-ease), height 0.35s var(--chp-ease),
    margin 0.35s var(--chp-ease), background 0.35s var(--chp-ease);
}
.chp-cursor.is-active .chp-cursor__ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.chp-cursor__ring.is-wide { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(216, 216, 216, 0.08); }
.chp-cursor__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  color: #d8d8d8;
  white-space: nowrap;
  font-size: 9px;
}
html.chp-motion-on body { cursor: none; }
html.chp-motion-on a, html.chp-motion-on button, html.chp-motion-on summary { cursor: none; }
@media (pointer: coarse) {
  html.chp-motion-on body, html.chp-motion-on a, html.chp-motion-on button { cursor: auto; }
  .chp-cursor { display: none; }
}

/* --- hero flourish ------------------------------------------------------- */
.chp-hero__rule {
  height: 1px;
  background: var(--chp-line);
  margin-top: clamp(30px, 4vw, 56px);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .chp-trans, .chp-cursor { display: none !important; }
  html.chp-motion-on body { cursor: auto; }
}

/* ==========================================================================
   GENERATED-PAGE CHROME
   ========================================================================== */
.chp-skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 4000;
  background: var(--chp-fg-strong);
  color: #040508;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
}
.chp-skip:focus { left: 16px; }

.chp-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2vw, 26px) var(--chp-pad);
  mix-blend-mode: difference;
  pointer-events: none;
}
.chp-topbar a { pointer-events: auto; }
.chp-topbar img { width: clamp(104px, 9vw, 128px); height: auto; }
.chp-topbar__label {
  color: var(--chp-dim);
  padding-right: clamp(96px, 12vw, 150px);
  text-align: right;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) { .chp-topbar__label { display: none; } }

/* scope note (what I don't take on) */
.chp-note {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--chp-line);
  border-left: 2px solid var(--chp-line-strong);
  border-radius: 14px;
  color: var(--chp-dim);
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.7;
  background: linear-gradient(180deg, rgba(216, 216, 216, 0.04), transparent);
}
.chp-note .chp-mono { display: block; color: var(--chp-fg-strong); margin-bottom: 8px; }

/* author box on articles */
.chp-author {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--chp-line);
}
.chp-author img { width: 56px; height: 56px; flex: 0 0 auto; opacity: 0.9; }
.chp-author .chp-mono { color: var(--chp-dim); margin: 0 0 6px; }
.chp-author p { margin: 0 0 8px; font-size: 15px; line-height: 1.65; color: var(--chp-dim); }
.chp-author a { color: var(--chp-fg-strong); }

/* featured journal card */
.chp-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}
@media (max-width: 860px) { .chp-feature { grid-template-columns: 1fr; } }

/* --- crawlable index band on the exported routes ------------------------- */
.chp-index {
  position: relative;
  z-index: 30;
  background: var(--chp-bg);
  border-top: 1px solid var(--chp-line);
  padding-block: clamp(44px, 5vw, 78px);
  font-family: "neueHaas", system-ui, sans-serif;
  color: var(--chp-fg);
}
.chp-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}
.chp-index h3 {
  margin: 0 0 12px;
  font-family: "martianMono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chp-dim);
  font-weight: 400;
}
.chp-index a {
  display: block;
  color: var(--chp-fg);
  opacity: 0.72;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 8px;
  transition: opacity 0.3s var(--chp-ease), transform 0.35s var(--chp-ease);
}
.chp-index a:hover { opacity: 1; transform: translateX(4px); }
.chp-index__note {
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--chp-line);
  color: var(--chp-dim);
  font-size: 13.5px;
  max-width: 90ch;
}

/* About page: replaces the removed CHETAN wordmark/strip-drag hero graphic */
.chp-about-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px) clamp(24px, 4vw, 56px);
}
.chp-about-strip img {
  width: 100%;
  height: clamp(180px, 28vw, 340px);
  object-fit: cover;
  border-radius: 6px;
}
.chp-about-strip img:nth-child(2) { margin-top: clamp(16px, 3vw, 32px); }
@media (max-width: 767px) {
  .chp-about-strip {
    grid-template-columns: 1fr;
  }
  .chp-about-strip img:nth-child(2) { margin-top: 0; }
}

/* ---------------------------------------------------------------- 09 price
   published prices on every service page, and the small fact rail the case
   studies open with. Both sit in the same dark rhythm as the rest of the
   generated chrome, so they read as one page rather than an inserted block. */
.chp-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.chp-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--chp-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.chp-price--now { border-color: var(--chp-line-strong); }
.chp-price__n { color: var(--chp-dim); letter-spacing: .18em; text-transform: uppercase; font-size: 11px; }
.chp-price__v { font-family: var(--chp-font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.03em; }
.chp-price__t { color: var(--chp-dim); font-size: 11.5px; }
.chp-price__for { margin: 0; color: var(--chp-ink); font-size: 15px; line-height: 1.6; }
.chp-price ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.chp-price li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--chp-dim); }
.chp-price li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 1px;
  background: var(--chp-accent, currentColor);
  opacity: .8;
}
.chp-price__not { margin: 4px 0 0; font-size: 13px; color: var(--chp-dim); opacity: .8; }
.chp-price__not .chp-mono { letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; margin-right: 6px; }

/* the fixed header's talk pill — the menu button is position:fixed over the
   same corner, so the bar keeps a gutter for it */
.chp-topbar { padding-right: calc(var(--chp-pad) + clamp(92px, 10vw, 138px)); }
.chp-topbar__talk {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 9px 18px 10px;
  border-radius: 999px;
  background: #e6e4e2;
  color: #0d0d0d;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.chp-topbar__talk:hover { background: #fff; transform: translateY(-1px); }
@media (max-width: 700px) { .chp-topbar__talk { display: none; } .chp-topbar { padding-right: var(--chp-pad); } }

/* case-study fact rail */
.chp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 0 0 clamp(26px, 3vw, 44px);
  background: var(--chp-line);
  border: 1px solid var(--chp-line);
  border-radius: 14px;
  overflow: hidden;
}
.chp-facts > div { padding: 16px 18px; background: var(--chp-bg); }
.chp-facts dt { font-family: var(--chp-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chp-dim); }
.chp-facts dd { margin: 7px 0 0; font-size: 15px; line-height: 1.4; }