@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");

/* ==========================================================================
   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: #e2453a;
  --chp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chp-pad: clamp(20px, 4vw, 64px);
  --chp-max: 1560px;

  /* ---- brand repaint: light red replaces the exported design system's
     warm-cream surface tone. Overriding the two tokens here (chp.css loads
     after the exported stylesheet on every route) recolors every
     bg-cream / border-cream / text-cream utility in the static export,
     plus the preloader panel below, without touching the generated
     markup or bundles. --chp-red-* are new tokens for this layer's own
     accents (buttons, hover states, rules). */
  --color-cream: #f3d9d6;
  --color-cream-line: #e2a29b;
  --chp-red: #e2453a;
  --chp-red-dim: #a83128;
  --chp-red-soft: rgba(226, 69, 58, 0.16);
  --pl-panel-gray: #150908;
}

/* 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(226, 69, 58, 0.16), transparent 72%),
    radial-gradient(60% 60% at 50% 100%, rgba(226, 69, 58, 0.06), 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-red); 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, color 0.3s; }
.chp-foot a:hover { opacity: 1; color: var(--chp-red); 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: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  border: 1.5px 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),
    border-width 0.35s var(--chp-ease);
}
/* Bigger, bolder hover state: was 34px/no fill — now a much larger
   circle with a visible fill, so hovering a link/button reads as a
   clear, confident state change rather than a subtle nudge. */
.chp-cursor.is-active .chp-cursor__ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(216, 216, 216, 0.2);
  border-width: 1px;
}
/* chp-motion.js always adds is-active and is-wide together (a "wide"
   target is always also "active"), so this needs to out-specificity
   `.chp-cursor.is-active .chp-cursor__ring` above — a pre-existing bug
   (present before today's sizing change too, just less visible when the
   two states were closer in size) meant .is-wide's own rule could never
   win and this variant was unreachable at any size. */
.chp-cursor.is-active .chp-cursor__ring.is-wide {
  width: 108px;
  height: 108px;
  margin: -54px 0 0 -54px;
  background: rgba(216, 216, 216, 0.16);
}
.chp-cursor__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  color: #d8d8d8;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
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 -------------------------
   Visually this is the tail end of the real React footer (#site-footer,
   pulled up over it with a negative margin) — same dark ground, no seam,
   red-accent hovers to match the rebrand, closed out with the same giant
   wordmark + status bar as the static-page footer (.chp-foot below) so
   every route ends on one consistent footer, not two different ones.
   Nothing is collapsed or hidden — dressUpIndex() in chp.js only appends
   the wordmark and bottom bar; every link build-pages.mjs renders stays
   exactly as visible as before. */
.chp-index {
  position: relative;
  z-index: 30;
  background: var(--chp-bg);
  border-top: 1px solid var(--chp-line);
  padding-block: clamp(44px, 5vw, 78px) 26px;
  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-red);
  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), color 0.3s var(--chp-ease);
}
.chp-index a:hover { opacity: 1; color: var(--chp-red); 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;
}
.chp-index__word {
  font-family: "familjen", "familjen Fallback", sans-serif;
  font-size: clamp(52px, 15vw, 250px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: rgba(226, 69, 58, 0.09);
  margin: clamp(30px, 4vw, 60px) 0 0;
  text-align: center;
  user-select: none;
}
.chp-index__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  margin-top: clamp(30px, 4vw, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--chp-line);
  color: var(--chp-dim);
  font-size: 12.5px;
}
.chp-index__totop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chp-dim);
  font-family: "martianMono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--chp-ease);
}
.chp-index__totop:hover { color: var(--chp-red); }
.chp-index__totop span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--chp-line-strong);
  border-radius: 50%;
  transition: border-color 0.3s var(--chp-ease), transform 0.3s var(--chp-ease);
}
.chp-index__totop:hover span { border-color: var(--chp-red); transform: translateY(-3px); }

/* 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; }

/* ------------------------------------------------------- static about ---
   Replaces the home page's "statement" section (section.home-about — the
   animated particle/glass-shard background with a word-by-word reveal)
   with a plain, static block: no canvas, no scroll-triggered timeline,
   visible immediately. Inserted by homePageCleanup() in chp.js. */
.chp-static-about {
  padding-block: clamp(64px, 10vw, 140px);
  background: var(--chp-bg);
  border-top: 1px solid var(--chp-line);
  border-bottom: 1px solid var(--chp-line);
}
.chp-static-about__link {
  display: inline-block;
  margin-top: clamp(24px, 3vw, 40px);
  color: var(--chp-fg);
  font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--chp-line-strong);
  padding-bottom: 4px;
  transition: opacity 0.25s var(--chp-ease);
}
.chp-static-about__link:hover { opacity: 0.65; }

/* --- Nav logo reverted: the lowercase "chetan" text swap was undone —
   case-study/service/location pages (~112 generated routes) use a
   completely separate hand-written header (.chp-topbar) that was never
   touched by that rule, so only the six React routes (home/about/work/
   services/contact/name-story) had "chetan" while every generated page
   still showed the original "Chetan Pro" wordmark image. Given that
   inconsistency, "Chetan Pro" — the version already everywhere else —
   is now what every page shows again; the original a.logo img is simply
   left alone. */

/* --- Cookie consent banner — removed entirely, site-wide. It's a plain
   React component with no id/class of its own beyond Tailwind utilities,
   so it's matched by its distinctive fixed-position combo (unique to
   this banner) rather than a semantic selector. The component still
   mounts and its accept/decline logic still runs harmlessly in the
   background (no cookie ever gets set since it's never clicked) — this
   is purely a visual removal, not a DOM/JS change, so there's nothing to
   race with React's own rendering. */
div[class*="fixed bottom-6 md:bottom-30"] {
  display: none !important;
}

/* --- Home: hero particle canvas — force-cleared once .chp-static-about
   scrolls into view (class toggled by an IntersectionObserver in
   chp.js). !important on a stylesheet rule beats GSAP's own inline
   opacity/transform sets regardless of timing, unlike a plain inline
   style, which the next GSAP tick would just overwrite. */
body[data-chp-page="home"].chp-hero-cleared .absolute.inset-0.w-full.h-dvh.z-0.pointer-events-none {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --- Home: "Selected work & explorations" (#work-section) — a
   GSAP-pinned horizontal filmstrip of the 6 featured case studies,
   superseded by the real /work page. Hidden with plain display:none
   instead of removed from the DOM: this section is actively managed by
   a React-owned useGSAP hook with a live ScrollTrigger, and pulling it
   out of the DOM or killing that ScrollTrigger from outside React (an
   earlier attempt) raced React's own render commit and crashed the
   whole home page. display:none touches neither the DOM structure nor
   the ScrollTrigger instance — GSAP just keeps ticking harmlessly
   against a hidden, zero-size element — and it collapses the section
   (pin-spacer included) out of the page's height with no dead zone. */
body[data-chp-page="home"] #work-section {
  display: none !important;
}

/* --- Home: "#keyfacts-section" — same crash class as #work-section
   above, found by tracing Home's mobile-only crash to its exact source.
   The compiled bundle sets up a *mobile-only* pinned ScrollTrigger
   against this section (matchMedia "(max-width: 767px)", id
   "keyfacts-cards-mobile-pin" — desktop's matching timeline isn't
   pinned, which is why this never crashed there). homePageCleanup() in
   chp.js used to .remove() this section outright; on mobile that pulls
   the DOM out from under GSAP's live pin mid-creation and throws
   "Cannot read properties of null (reading 'insertBefore')", escaping
   to Next's root error boundary and unmounting <main> entirely — the
   actual cause of Home's crash. display:none instead, same reasoning
   as #work-section: never touches the DOM or the ScrollTrigger. */
body[data-chp-page="home"] #keyfacts-section {
  display: none !important;
}

/* ---------------------------------------------------------- hero melt ---
   Replaces the removed "hold to blast" WebGL particle gesture (module
   61604's press-and-hold handler, neutralised in patch-copy.mjs) with a
   press-and-hold effect built entirely in CSS: the line softens, blurs and
   sags downward like it's melting, then eases back on release. Wired from
   chp-layout.js on .blast-icon, the same element the old copy lived in. */
.blast-icon {
  display: inline-block;
  transform-origin: 50% 0%;
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1),
    filter 1.5s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 1.5s var(--chp-ease);
  will-change: transform, filter;
}
.blast-icon.chp-melting {
  transform: scaleY(1.4) translateY(12px) skewX(-2deg);
  filter: blur(3px);
  opacity: 0.7;
  transition-duration: 0.9s, 0.9s, 0.9s;
}
@media (prefers-reduced-motion: reduce) {
  .blast-icon, .blast-icon.chp-melting { transition: none; transform: none; filter: none; opacity: 1; }
}

/* ==========================================================================
   About / Work / Services — layout pass (CSS-only, does not touch the
   hydrated chunk JS or the mix-blend-difference / GSAP reveal timelines,
   only spacing, alignment, color and decorative pseudo-elements).
   ========================================================================== */

/* --- About: hero — asymmetric split instead of a single centred/left
   column. Statement on the left, a bordered fact-panel on the right —
   an actually different composition, not another pass of the same
   stacked-text layout. Only alignment/spacing/typography/generated
   content are touched; opacity/filter/visibility stay untouched so the
   blur-reveal timeline keeps working. mix-blend-difference lives on
   .title-block itself, so every added color here is a LIGHT value (see
   the note below) — dark reads back invisible against the white page. */
body[data-chp-page="about"] main > section:first-of-type .title-block {
  position: relative;
}
@media (min-width: 1024px) {
  body[data-chp-page="about"] main > section:first-of-type .title-block {
    justify-content: space-between;
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    padding-left: clamp(48px, 7vw, 120px);
    padding-right: clamp(48px, 7vw, 120px);
    padding-top: clamp(32px, 4vw, 56px);
  }
  body[data-chp-page="about"] main > section:first-of-type .title-block h1 {
    text-align: left;
    flex: 1 1 auto;
    max-width: 780px;
    margin-left: 0;
    font-size: clamp(38px, 3.6vw, 58px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  body[data-chp-page="about"] main > section:first-of-type .title-block::before {
    content: "About";
    position: absolute;
    left: clamp(48px, 7vw, 120px);
    top: 1.5rem;
    white-space: nowrap;
    font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #b8b8b8;
  }
  /* the fact-panel: a bordered column of short lines, using the CSS
     content \A + white-space:pre-line trick to get multiple lines out
     of a single pseudo-element without touching the hydrated markup. */
  body[data-chp-page="about"] main > section:first-of-type .title-block::after {
    content: "Faridabad, India\A Solo practice, since 2019\A Design + code + automation";
    white-space: pre-line;
    flex: 0 0 auto;
    width: 240px;
    align-self: center;
    border-left: 2px solid #b8b8b8;
    padding-left: clamp(18px, 2vw, 28px);
    font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
    font-size: 11px;
    line-height: 2.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b8b8b8;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* the fact-panel needs real width to sit beside a 2-3 line heading
     without forcing an awkward wrap — below this, drop it rather than
     let both columns get cramped. */
  body[data-chp-page="about"] main > section:first-of-type .title-block::after {
    display: none;
  }
}

/* --- About: hero — static. The exported hero normally waits on a
   scroll/load-triggered blur-in reveal (JS sets visibility:hidden plus an
   opacity/filter tween on these elements); that's overridden here so the
   statement and its mobile duplicate are simply visible immediately, no
   motion. A plain CSS !important beats the plain inline style JS sets
   (no !important on that side), so this is a reliable override. */
body[data-chp-page="about"] main > section:first-of-type .title-block h1,
body[data-chp-page="about"] main > section:first-of-type .title-block span,
body[data-chp-page="about"] main > section:first-of-type .md\:hidden .title span {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* --- About/Work/Services heroes, part 2: the heading text also goes
   through a GSAP SplitText pass a few seconds after load (splitting it
   into char/word/line spans not present in the DOM at first paint, each
   starting blurred/transparent and animating in) — the rules above only
   reach the h1 itself, so that split still produced a brief blur-in on
   the glyphs even with the parent forced static. Catching both the
   singular and plural class names SplitText can use, scoped to just
   these three hero headings so nothing else on the page is affected. */
body[data-chp-page="about"] main > section:first-of-type .title-block h1 [class*="char"],
body[data-chp-page="about"] main > section:first-of-type .title-block h1 [class*="word"],
body[data-chp-page="about"] main > section:first-of-type .title-block h1 [class*="line"],
#page-header-pin h1 [class*="char"],
#page-header-pin h1 [class*="word"],
#page-header-pin h1 [class*="line"],
body[data-chp-page="services-index"] .sec-expertise h1 [class*="char"],
body[data-chp-page="services-index"] .sec-expertise h1 [class*="word"],
body[data-chp-page="services-index"] .sec-expertise h1 [class*="line"] {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* --- About: "What I value" paperfold cards — alternate a faint tint and a
   left accent rule per card instead of uniform white blocks. The 3D fold
   transform/perspective is untouched (still driven by the chunk's GSAP). */
.velue-block .paperfold-card:nth-child(even) .paperfold-card-inner {
  background: #f4f3f1;
}
.velue-block .paperfold-card-inner {
  border-left: 2px solid var(--chp-line);
  transition: border-color 0.3s var(--chp-ease);
}
.velue-block .paperfold-card:hover .paperfold-card-inner {
  border-left-color: var(--chp-line-strong);
}

/* --- About + Services: "How I work" — replace the horizontal connecting
   line under each step with a staggered, alternating (zigzag) layout.
   Scoped to the exact column div via its Tailwind token combo, which only
   appears on this shared stepper component, so nothing else is affected. */
@media (min-width: 768px) {
  div[class*="not-first:mt-10"][class*="md:col-span-4"] {
    border-left: 1px solid var(--chp-line);
    padding-left: 1.75rem !important;
    margin-top: 0;
  }
  div[class*="not-first:mt-10"][class*="md:col-span-4"] .fill-line {
    display: none;
  }
  div[class*="not-first:mt-10"][class*="md:col-span-4"]:nth-child(2) {
    margin-top: clamp(40px, 6vw, 88px);
    border-left-color: var(--chp-line-strong);
  }
  div[class*="not-first:mt-10"][class*="md:col-span-4"]:nth-child(3) {
    margin-top: clamp(80px, 11vw, 168px);
  }
  div[class*="not-first:mt-10"][class*="md:col-span-4"] .step-no {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    opacity: 0.3 !important;
    letter-spacing: -0.02em;
  }
}

/* --- Services: hero — top-anchored and left-aligned instead of dead
   centre, so the orbit-ring canvas (untouched — GSAP-driven, out of
   scope for a CSS pass) reads as a centrepiece the text sits above
   rather than text stacked directly on top of it. A third distinct
   composition alongside About's split panel and Work's bottom corners. */
@media (min-width: 900px) {
  body[data-chp-page="services-index"] .sec-expertise {
    justify-content: flex-start;
    padding-top: clamp(80px, 12vh, 140px);
  }
  /* .exp-left also carries the shared .tr__container utility class,
     which sets its own margin-inline:auto — that centers the whole
     block regardless of the align-items fix below (which only affects
     children *inside* it), so the fix has to override that margin too. */
  body[data-chp-page="services-index"] .sec-expertise .exp-left {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0 !important;
  }
  body[data-chp-page="services-index"] .sec-expertise .exp-left h1 {
    text-align: left;
  }
  body[data-chp-page="services-index"] .sec-expertise .exp-top-label {
    justify-content: flex-start;
  }
}
/* --- Services: hero — small accent pass on the "what we do best" label
   and the pill list, kept light since the section already reads well. */
body[data-chp-page="services-index"] .sec-expertise .exp-top-label .title {
  letter-spacing: 0.24em;
}
body[data-chp-page="services-index"] .sec-expertise .srv-list li {
  position: relative;
  padding-inline: 0.4em;
}
body[data-chp-page="services-index"] .sec-expertise .srv-list li:not(:last-child)::after {
  content: "/";
  margin-left: 0.6em;
  opacity: 0.35;
}

/* --- Work: hero — edge-anchored instead of centered. The heading sits
   bottom-left like a catalog cover title, with a small stat panel at
   bottom-right — a genuinely different composition from the dead-centre
   stack it had before (and from About's split-with-side-panel), not the
   same layout with new copy. */
body[data-chp-page="work-index"] #page-header-pin {
  position: relative;
  background: radial-gradient(ellipse 60% 45% at 50% 40%, rgba(216, 216, 216, 0.06), transparent 70%);
}
@media (min-width: 900px) {
  body[data-chp-page="work-index"] #page-header-pin {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: 0 clamp(32px, 6vw, 100px) clamp(64px, 9vw, 120px);
  }
  /* the heading actually sits inside a .tr__container child, which
     carries its own margin-inline:auto (centers the block itself,
     independent of #page-header-pin's own align-items) — same fix as
     Services' .exp-left, below. */
  body[data-chp-page="work-index"] #page-header-pin .tr__container {
    margin-inline: 0 !important;
    align-items: flex-start;
  }
  body[data-chp-page="work-index"] #page-header-pin h1,
  body[data-chp-page="work-index"] #page-header-pin .small {
    text-align: left;
    margin-left: 0;
  }
}
body[data-chp-page="work-index"] #page-header-pin::before {
  content: "Selected work, 2019 \2014 present";
  position: absolute;
  font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chp-dim);
  pointer-events: none;
}
@media (max-width: 899px) {
  body[data-chp-page="work-index"] #page-header-pin::before {
    top: clamp(18%, 22vh, 26%);
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 900px) {
  body[data-chp-page="work-index"] #page-header-pin::before {
    top: clamp(60px, 10vh, 110px);
    left: clamp(32px, 6vw, 100px);
  }
  /* the stat panel — bottom-right, mirroring the kicker's position at
     top-left, so the whole hero reads as four anchored corners instead
     of one centred block. */
  body[data-chp-page="work-index"] #page-header-pin::after {
    content: "13 projects\A 6 industries\A Since 2019";
    white-space: pre-line;
    position: absolute;
    right: clamp(32px, 6vw, 100px);
    bottom: clamp(64px, 9vw, 120px);
    text-align: left;
    border-left: 1px solid var(--chp-line-strong);
    padding-left: 18px;
    font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
    font-size: 10px;
    line-height: 2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chp-dim);
    pointer-events: none;
  }
}

/* --- Contact: hero — shifted to a lower-left anchored block instead of
   dead centre, with a small kicker above it — a fourth distinct
   composition (About: split panel, Work: two corners, Services:
   top-left over the orbit ring, Contact: single lower-left block over
   the background video). No mix-blend-difference on this wrapper (unlike
   the About/Services heroes), so plain light colors work directly. */
@media (min-width: 900px) {
  body[data-chp-page="contact"] div[class*="top-[62dvh]"] {
    align-items: flex-start;
    text-align: left;
    left: clamp(32px, 6vw, 100px);
    width: auto;
    max-width: 640px;
  }
  body[data-chp-page="contact"] div[class*="top-[62dvh]"] h1,
  body[data-chp-page="contact"] div[class*="top-[62dvh]"] p {
    text-align: left;
  }
  body[data-chp-page="contact"] div[class*="top-[62dvh]"]::before {
    content: "Get in touch";
    display: block;
    font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--chp-dim);
    margin-bottom: 4px;
  }
}

/* --- Contact: hero — new copy ("Tell me what you're building." / "One
   inbox, one person reading it — usually a reply within a business
   day."), kept static like the About/Work/Services heroes: forced
   visible immediately, plus the same char/word/line SplitText catch (see
   the About/Work/Services block above) so the per-character reveal GSAP
   runs a few seconds after load can't blur or hide the glyphs either. */
body[data-chp-page="contact"] div[class*="top-[62dvh]"] h1,
body[data-chp-page="contact"] div[class*="top-[62dvh]"] p,
body[data-chp-page="contact"] div[class*="top-[62dvh]"] h1 [class*="char"],
body[data-chp-page="contact"] div[class*="top-[62dvh]"] h1 [class*="word"],
body[data-chp-page="contact"] div[class*="top-[62dvh]"] h1 [class*="line"] {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* --- Contact: "Location" removed entirely (assets-custom/chp.js) — once
   its column is gone, let "Get in touch" take the full row instead of
   sitting half-empty in its original 5-of-10 column. */
body[data-chp-page="contact"] .grid-cols-10 > div:only-child {
  grid-column: span 10 / span 10;
}

/* --- Work: hero — static, same treatment as the About hero. The heading
   and subtitle are forced visible immediately (no scroll/load-triggered
   blur-in), and the decorative motion around them — the scattered
   floating case-study thumbnails ("ft"), and the particle/lightning SVG
   groups — is turned off so nothing in the hero moves on its own. */
#page-header-pin h1,
#page-header-pin .small {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
#page-header-pin .ft,
#page-header-pin [id^="particles"],
#page-header-pin [id^="lightning"] {
  display: none !important;
}

/* --- Work: project grid — turn the data-pos/data-size attributes (already
   present on every .project-card, previously unstyled) into an actual
   staggered zigzag layout, and retire the canvas line/spark effect that
   used to connect the cards. */
#line-canvas, #spark-webgl-canvas {
  display: none !important;
}
@media (min-width: 900px) {
  #projects-grid {
    gap: clamp(56px, 7vw, 104px);
  }
  #projects-grid > .project-card {
    width: 100%;
  }
  #projects-grid > .project-card[data-pos="left"] {
    margin-right: auto;
  }
  #projects-grid > .project-card[data-pos="right"] {
    margin-left: auto;
  }
  #projects-grid > .project-card[data-pos="center"] {
    margin-inline: auto;
  }
  #projects-grid > .project-card[data-size="large"] {
    max-width: 76%;
  }
  #projects-grid > .project-card[data-size="medium"] {
    max-width: 58%;
  }
  #projects-grid > .project-card[data-size="xlarge"] {
    max-width: 96%;
  }
}

/* --- About: "Behind the scenes." pinned gallery — warmer background, a
   sharper heading treatment, and a grayscale-to-color hover on the photos
   instead of flat full-color stills. The GSAP pin/parallax timeline and
   the wipe-stripe transition are untouched (different elements). */
body[data-chp-page="about"] section[class*="bg-[#c3c3c3]"] {
  background: linear-gradient(165deg, #d9d9d7 0%, #b7b7b4 60%, #a3a3a0 100%) !important;
}
body[data-chp-page="about"] section[class*="bg-[#c3c3c3]"] h2 {
  letter-spacing: -0.02em;
}
body[data-chp-page="about"] section[class*="bg-[#c3c3c3]"] p.small {
  font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
body[data-chp-page="about"] .ChetanGallery-module__Kqu3ta__cardInner {
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
body[data-chp-page="about"] .ChetanGallery-module__Kqu3ta__galleryItem img {
  filter: grayscale(0.7) contrast(1.05);
  transition: filter 0.6s var(--chp-ease);
}
body[data-chp-page="about"] .ChetanGallery-module__Kqu3ta__galleryItem:hover img {
  filter: grayscale(0) contrast(1);
}
@media (prefers-reduced-motion: reduce) {
  body[data-chp-page="about"] .ChetanGallery-module__Kqu3ta__galleryItem img {
    transition: none;
  }
}

/* --- Footer: "© CHETAN SHARMA" reverted back to the site's plain default
   type (no Montserrat/bold/uppercase treatment) — kept as body copy, not
   a standalone mark. */

/* --- Footer: static — the animated WebGL fog canvas behind the footer
   content is removed; the footer is a plain, non-animated panel now.
   The canvas's wrapper div is pointer-events:none/aria-hidden already, so
   hiding just the canvas leaves nothing behind it to interact with. */
#site-footer canvas {
  display: none !important;
}

/* ==========================================================================
   Services — a real redesign pass, not just a copy tweak. Targets the
   parts that read as generic "agency template": the plain stacked
   image/text service panels (.services-item, unique to this page) get a
   large watermark numeral, alternating sides, an accent title and a
   marked capability list; the two full-bleed intro headings get tighter,
   more considered type. Structure/pin mechanics (GSAP-driven, chunk JS)
   are untouched — only spacing, order, color and generated content.
   ========================================================================== */
body[data-chp-page="services-index"] .sec-expertise h1 {
  letter-spacing: -0.02em;
}
body[data-chp-page="services-index"] .foc-title {
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* --- Services: hero — static, same treatment as the About/Work heroes.
   The heading and its "WHAT I DO BEST" eyebrow label (both the desktop
   and mobile copies) are forced visible immediately instead of waiting
   on the scroll/load-triggered reveal. The orbit-ring canvas behind the
   section is left running — it's a shared background across multiple
   sections here, not a one-off hero reveal — so only the text is frozen. */
body[data-chp-page="services-index"] .sec-expertise h1,
body[data-chp-page="services-index"] .sec-expertise .exp-top-label .title {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body[data-chp-page="services-index"] .services-list {
  counter-reset: svc;
}
body[data-chp-page="services-index"] .services-item {
  counter-increment: svc;
  position: relative;
}
/* Alternating image/text sides was tried here via flex-direction:
   row-reverse on the inner row, but each .services-item is pinned/
   crossfaded by a GSAP ScrollTrigger in the compiled chunk that almost
   certainly caches position/rect math against the original layout order —
   reversing it desynced the pin timeline and produced overlapping panels
   during scroll. Reverted; the numeral, accent border, tick marks and
   hover zoom below don't touch layout order or box size enough to affect
   pin math, so they're kept. */
body[data-chp-page="services-index"] .services-item::before {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
  font-family: "martianMono", "martianMono Fallback", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(4, 5, 8, 0.32);
  z-index: 3;
  pointer-events: none;
}
body[data-chp-page="services-index"] .service-title {
  position: relative;
  padding-left: 1.1rem;
  border-left: 3px solid #040508;
}
body[data-chp-page="services-index"] .service-info-item {
  position: relative;
  padding-left: 1.4rem !important;
}
body[data-chp-page="services-index"] .service-info-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 8px;
  height: 1px;
  background: rgba(4, 5, 8, 0.45);
}
body[data-chp-page="services-index"] .services-item img {
  transition: transform 0.7s var(--chp-ease);
}
body[data-chp-page="services-index"] .services-item:hover img {
  transform: scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
  body[data-chp-page="services-index"] .services-item img { transition: none; }
}

/* ==========================================================================
   Preloader — minimal wordmark instead of the animated three-blade "C"
   mark. The mark's SVG paths, gray panel and border are hidden (initial
   load overlay only — .pl-overlay-center scope excludes the lighter
   page-transition overlay, .pl-trans-center, which never had the mark);
   a simple text wordmark takes their place in its box. The belts,
   flying-plus icons, tagline and percentage counter are untouched.
   ========================================================================== */
.pl-overlay-center .pl-t-path,
.pl-overlay-center .pl-logo-black-box,
.pl-overlay-center .pl-border-svg,
.pl-overlay-center .pl-logo-corner-plus {
  display: none !important;
}
/* Wordmark: shown immediately, no entrance animation. A prior version
   faded/blurred it in, gated behind html.chp-preloader-ready (added by
   chp.js inside afterHydration(), see boot()) so a plain unconditional
   `animation` here wouldn't restart mid-play when React's
   hydration-recovery pass recreates this subtree partway through
   loading. That gate meant nothing appeared at all for roughly
   500-800ms after first paint — measured, screenshotted frame by frame
   — reading as a blank/broken loading screen. A static label has no
   "replay" to glitch, so it doesn't need gating: it's simply always
   there from the first frame the overlay itself paints. */
.pl-overlay-center .pl-overlay-logo-wrap::before {
  content: "Chetan Pro";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "familjen", "familjen Fallback", system-ui, sans-serif;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #f3d9d6;
}
/* the loading line: a thin rule beneath the wordmark. A soft ambient
   pulse (a loop, not a one-shot entrance) is safe unconditionally —
   restarting mid-cycle on a remount isn't perceptible the way a
   one-shot fade replaying from 0 would be, so it needs no gating. */
.pl-overlay-center .pl-overlay-logo-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 32%;
  width: 64px;
  height: 1px;
  background: #e2453a;
  opacity: 0.4;
  transform: translateX(-50%);
  transform-origin: center;
  animation: chp-preloader-line-pulse 1.6s ease-in-out infinite;
}
@keyframes chp-preloader-line-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.6; }
}
/* preloader watchdog backstop (chp.js, setTimeout at the bottom): if the
   overlay is still up 6s after DOMContentLoaded, force it out of the way
   so the page underneath is usable. CSS-only — never removes the node
   React owns, just stops it from blocking the viewport. */
html.chp-preloader-forced .pl-overlay-center {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  /* Only the line's ambient pulse animates now — the wordmark is
     already static. */
  .pl-overlay-center .pl-overlay-logo-wrap::after {
    animation: none;
    opacity: 0.4;
    transform: translateX(-50%);
  }
}